UI Improvements (GiGi Tabs and Widgets)

For what's not in 'Top Priority Game Design'. Post your ideas, visions, suggestions for the game, rules, modifications, etc.

Moderator: Oberlus

Post Reply
Message
Author
User avatar
igrok
Space Krill
Posts: 7
Joined: Tue Jul 22, 2008 4:43 am
Location: Massachusetts, USA

UI Improvements (GiGi Tabs and Widgets)

#1 Post by igrok »

When first trying to learn FreeOrion, I found the user interface pretty manageable. But there are a few items that I feel could be improved:
  • Tabs - I did not find it immediately clear which tab was selected. The shorter height and darker border color of the background tabs just wasn't enough until I knew what I was looking for. Making the tab text dark makes it much more immediately apparent which tab is active (seen in both UI Option A and B).
  • Widget Colors - I found the colors of the widgets (particularly the yellow arrows) clashed with the overall UI and distracted from the actual purpose of the controls. A yellow arrow tends to draw the eye to the widget buttons, not the button label or description. While a widget's buttons should be clearly distinguishable, they probably shouldn't be the first part of the widget a user looks at. Does it work better with darker colors (Option A) or no colors (Option B)?
Original Screenshot - for comparison
Original Screenshot - for comparison
options_panel_orig.jpg (23.1 KiB) Viewed 1459 times
UI Option A
UI Option A
options_panel_a.jpg (23.76 KiB) Viewed 1456 times
UI Option B
UI Option B
options_panel_b.jpg (24.22 KiB) Viewed 1459 times

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

Re: UI Improvements (GiGi Tabs and Widgets)

#2 Post by Geoff the Medio »

Darker inactive tab labels looks good.

However, I prefer the current spinner control button colour to the your alternatives. The dull yellow stands out and is obviously interactive, or at least important. The blue blends into the background too much... I think... I'm not sure why exactly, but it just seems harder to see clearly. That might be due to the blue background image, but it's the case regardless. The monochrome blends in with its surroundings, making it not at all apparent that the buttons are important and clickable. I don't really follow your objection either... what's wrong with the interactive buttons being obvious and important / the first thing looked at?

tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

Re: UI Improvements (GiGi Tabs and Widgets)

#3 Post by tzlaine »

Would you mind entering a feature request on the darker tab labels, on the SourceForge.net tracker? Good idea.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

Re: UI Improvements (GiGi Tabs and Widgets)

#4 Post by pd »

Tabs look good. I also like the blue arrows. Maybe they could get slightly brighter, so they stand out more.

User avatar
igrok
Space Krill
Posts: 7
Joined: Tue Jul 22, 2008 4:43 am
Location: Massachusetts, USA

Re: UI Improvements (GiGi Tabs and Widgets)

#5 Post by igrok »

Oh, I'll do the darker tabs myself - I imagine that'll be a good starter task for me.

I'm not a UI designer, so I might be off base, but I figured users should be reading the setting (e.g. width, height, etc) before worrying about what widget buttons allow them to change the setting.

Really, the button colors just looked a bit off. So it's a preference and not something I can scientifically defend.

tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

Re: UI Improvements (GiGi Tabs and Widgets)

#6 Post by tzlaine »

Here's a hint. There's a function somewhere called "DistinguishCurrentTab()".

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

Re: UI Improvements (GiGi Tabs and Widgets)

#7 Post by eleazar »

igrok wrote:I'm not a UI designer, so I might be off base, but I figured users should be reading the setting (e.g. width, height, etc) before worrying about what widget buttons allow them to change the setting.
You're right, it's more usual to have: " Width [ 100 ] "
than: " [ 100 ] Width " ... as is currently in the options.

pd wrote:Tabs look good. I also like the blue arrows. Maybe they could get slightly brighter, so they stand out more.
I agree. Greying out tabs is good. And the blue arrows would benefit by standing out a bit more.

Post Reply