project-navigation
Personal tools

Author Topic: GUI Design  (Read 101337 times)

Offline Prinegon

  • Rookie
  • ***
  • Posts: 47
    • View Profile
Re: GUI Design
« Reply #75 on: May 29, 2010, 04:12:54 pm »
I know what I'm talking about, I had interface design as a subject in college.

As I had. Doesn't say too much theese days.
Of course a map view is more preciese in where your team members stand and from where danger occurs. And if this game would be real time strategy, I would totally agree a map is indispensable. For a turn based strategy game the map is over the top. There would be two ways to implement a map view: A permanent map, or a callable map.
If the map is permanent, like in games like starcraft, you are using much display expanse reducing the area for the main window. You are not able to do a too small map, since a map you could not recognize anything (or recognizing anything would take more efford than simply scrolling to the right position) is no good. And since maps are not common in round based strategy games many players probably won't use the map at all anyhow.
Making the map callable would make things even worse. However the action would be to call the map (pressing "m" to show the map, moving your mouse to a specific edge do drag in the map, zooming out, until the area display becomes a map), a player would have to take efford to call a map, in some implementations even his attention is dragged away from the main window (like if you press m and you see the map, instead of the main window). Scrolling around to find the desired location may prove as the prefered solution, even if it will take longer in the middle, since the player has not to change his attention.
There is a reason why a map is uncommon in turn based games and only used, if the playable area is really big (like in heroes of might and magic or civilization). And to be fair, how often did you really use the map in theese games? How often did you zoom out maximal in civ4 to see the whole world, just to zoom in in the desired location? Of theese reasons I think a map is over the top: Too much unused information and too much display area for its usefullness.

As I played Ufo Enemy unknown (Terror from the deep was not my game, though), I normally knew the relative position of each team member to each other. I knew, if I moved Joe, next to him was another XCOM-Operative to cover him, far to the north were two Operatives charging a house and 3 Operatives try to get to the ufo in the south. Even if you increase the number of operatives you will use, the action will not take place all over the map, there will be 2 to 5 spots where your people will be. Showing the relative position of your operatives may not help you distinguish between the left or the right operative charging the house far to the north, but you will get one of them, if you select one in the gui based on the information the arrows will give you and normally this will be good enough (since you normally would move both operatives charging the house one after the other). So more information is not needed and I can't imagine a more simple way to give this information to the player.

My second design combining the relative position with the position of opponents, however, is flawed, since I use the same representation for two different concepts. The directive position marker shows the relative position refering to the current selected operative, but the opponents marker shows the direction opponents are relative to the person represented by the gui button. Using the same representation for different things is confusing and should be avoided.

The same mistake is already done in the actual gui, since you use the same buttons once for selecting a operative and selecting a floor level. But since a new gui is searched in this thread this mistake is to be avoided in the future, once the new gui is implemented.

Offline misiek

  • Rookie
  • ***
  • Posts: 94
    • View Profile
Re: GUI Design
« Reply #76 on: May 29, 2010, 08:23:43 pm »
What about something like that for showing soldier positions?

Of course it should be made much less obtrusive - maybe with transparency. Or maybe it should be only shown when some key would be pressed.

This means, that soldier 1 is in upper side, soldier 2 in left side, soldier 3 in right side.

It could also show aliens, maybe in red color?
« Last Edit: May 29, 2010, 08:27:00 pm by misiek »

Offline TrashMan

  • Captain
  • *****
  • Posts: 833
    • View Profile
Re: GUI Design
« Reply #77 on: May 29, 2010, 09:15:39 pm »
Rather than trying to design the battle GUI piecemeal, we need to get a full mockup to keep track of exactly how much information the interface is throwing at the player. TrashMan, if you're willing to work with me, we can try to hash something out together in IRC.

I never used IRC. We could try via MSN or Skype.

Either way, I'll try making a full mockup. Already have a few ideas.

Offline Prinegon

  • Rookie
  • ***
  • Posts: 47
    • View Profile
Re: GUI Design
« Reply #78 on: May 29, 2010, 10:46:54 pm »
Of course there are other ways to represent is, like the way it is done in civilization, where offscreen-units are displayed as a little arrowed bubble at the edge in the direction the unit would be.

As I wrote before, that way of repräsentation would also be a way to help player orientating and it would be a very nice one, too. Make the numbers clickable and center the view on the soldier selecting him, once clicked the number bubble, and it would be perfect. However, implementation of this may be a little more complicated, though.

Offline misiek

  • Rookie
  • ***
  • Posts: 94
    • View Profile
Re: GUI Design
« Reply #79 on: May 30, 2010, 07:36:44 am »
I never used IRC. We could try via MSN or Skype.

You can use http://webchat.freenode.net/ - it's very simple to use.
Type ufoai in channels.

Offline TrashMan

  • Captain
  • *****
  • Posts: 833
    • View Profile
Re: GUI Design
« Reply #80 on: May 31, 2010, 01:44:45 pm »
Here's mockup 1. This one is farely self-evident.



A lot of space is freed because some of the stuff in the current GUIK is nedlessly large or unnecessary.

Clicking the weapon image could be used for shooting, instead of a crosshair icon.
Next soldier and next visible enemy icon (next to the number of enemies seen by the soldier).

There's also extra space in the soldier status window for all kinds of stuff - physical soldier stats, affliction, specilizations, etc...


The other possible gui would be very similar to UFO: Aftershock of JA2. The whole bottom is taken up by portraits of soldiers with carried weapons. I'll make a mockup of that too.

EDIT:

Normal soldier screen

Was thinking adding solider nicknames as aditional ID.
Really, we should add this. Wonderfull for personalizing your team and easier to ID soldiers when you have "Shadow", "Steroid", "Scope", "Sgt. Slaughter" and such over their heads.



When one of the soldiers is selected


Leaves a lot of room below for more icons and information and stuff. You even have room for a basic inventory (no backpack)

« Last Edit: May 31, 2010, 02:54:10 pm by TrashMan »

Offline Winter

  • Captain
  • *****
  • Posts: 829
    • View Profile
    • Street of Eyes: The Writing of Ryan A. Span
Re: GUI Design
« Reply #81 on: June 01, 2010, 12:10:04 am »

This is going in the right direction. However, in addition to a new layout, we really want to update the bland green and grey look of the GUI for something slicker and higher-tech to help improve the feel. Blue would be the operative colour. Think there's anything you can do there?


Quote
Clicking the weapon image could be used for shooting, instead of a crosshair icon.

I'm thinking single-click on weapon for a shot, double-click to change firemode.


Quote
Next soldier and next visible enemy icon (next to the number of enemies seen by the soldier).

Works for me.

I think we can also condense the various pop-up information windows on the right -- perhaps even removing the useless EEG/ECG readout entirely.


Quote
Normal soldier screen

Was thinking adding solider nicknames as aditional ID.
Really, we should add this. Wonderfull for personalizing your team and easier to ID soldiers when you have "Shadow", "Steroid", "Scope", "Sgt. Slaughter" and such over their heads.

I don't like this idea. There's no way we could pull off a JA-style interface simply because we can't do that level of personalisation. Our troops don't have individual voice tracks and specifically-written lines to establish their characters, so if anything we just end up with a bunch of cookie-cutter faces staring blankly back at the player. Thinking as a player myself, that would actually decrease my immersion and level of emotional investment in the troops.

Regards,
Winter

Offline TrashMan

  • Captain
  • *****
  • Posts: 833
    • View Profile
Re: GUI Design
« Reply #82 on: June 01, 2010, 08:40:19 am »
I don't know about you, but I always personalize the s**** out of everything.

Now, we can already change the soldiers name, so I figured adding a nickname field wouldn't be a problem (I guess I could always just name the soldier "Viper" or "Phoenix" or sumtin', but Dennis "The Menace" McAnal sounds so much better.

How to improve personalization? Well, for once, we don't really need the voices. However, the abiltiy to choose a head model for a soldier would be nice (and a few aditional heads)

Second, the profession icon thing - if it just lists all the icons from a specific folder, then players can add simple icons themselves, to further help to personalize. So I can add a small phoenix icon for my Uriel "Phoenix" Baddasovski. That makes it even easier to track soldiers.

Personally, the upper mockup offers more space so I agree we go with it. We can simplyfy it even more by using the same left/right hand method as the  lower mockup (one large field devided into two. Big weapons take up both field, small weapons take up one).

Since we have so much free space left, we could add the basic inventory preview (without backup) for hte soldier, and in the space below the health/AP bars we could add a toggle for soldier stats or something.

Offline H-Hour

  • Administrator
  • PHALANX Commander
  • *****
  • Posts: 1923
    • View Profile
Re: GUI Design
« Reply #83 on: June 01, 2010, 11:36:48 am »
I'm thinking single-click on weapon for a shot, double-click to change firemode.

The game doesn't feature much double-clicking. New users will learn the interface as a single-click interface, so they may never learn that weapons have multiple firing modes.

Offline BTAxis

  • Administrator
  • PHALANX Commander
  • *******
  • Posts: 2607
    • View Profile
Re: GUI Design
« Reply #84 on: June 01, 2010, 11:47:18 am »
Double-clicking to change firemodes sounds like a bad idea to me. If a weapon has more than 2 firemodes (and there are many of those in the game), picking the right one becomes a chore, especially if you accidentally overshoot.

Offline TrashMan

  • Captain
  • *****
  • Posts: 833
    • View Profile
Re: GUI Design
« Reply #85 on: June 01, 2010, 12:26:43 pm »
Nah, I mean that clicking on the weapon image has the same effect as clicking on the blue crosshairs icon.
That, or we could add a small fire mode icon next to the weapon image. Clicking on it would change the fire mode.

Offline geever

  • Project Coder
  • PHALANX Commander
  • ***
  • Posts: 2561
    • View Profile
Re: GUI Design
« Reply #86 on: June 01, 2010, 12:33:33 pm »

The game doesn't even support doubleclick if I'm right.

-geever

Offline Kildor

  • Project Artist
  • Captain
  • ***
  • Posts: 757
  • Project mapper and some other stuff`er
    • View Profile
    • http://ufoai.nx0.ru
Re: GUI Design
« Reply #87 on: June 01, 2010, 12:58:39 pm »
I like idea about «Click on weapon to shoot», but I don`t like any «double-clicking». We can add something like button to open menu with choises. I`m looking to the hud, and have some ideas, how to improove it. Unfortunately I don`t have time to finish mockup and show it to you, but may be tomorow?

Offline H-Hour

  • Administrator
  • PHALANX Commander
  • *****
  • Posts: 1923
    • View Profile
Re: GUI Design
« Reply #88 on: June 01, 2010, 03:35:57 pm »
Well, I love GUI design and I couldn't help getting in on the fun. Here are some ideas about how we can represent some useful information to the player in a way that isn't too visually distracting.

Ok, now I really need to get back to work.

Offline H-Hour

  • Administrator
  • PHALANX Commander
  • *****
  • Posts: 1923
    • View Profile
Re: GUI Design
« Reply #89 on: June 01, 2010, 03:41:29 pm »
Looking at my mockup again real quick, I think it would be good if we used a different background shape to represent the list of levels, something shaped like a building. Just to help differentiate the levels from the soldiers. Or we get rid of numbers for the soldiers and use names, but then the right panel would need to be set out differently.