User Interface concepts

[Pureon]

See here for related discussion.

I've started working on a concept for our user interfaces and will showcase some of the new layouts below. The new theme will be rolled out throughout the game, but will not influence the in-game HUD, the main menu screen, or the new website design for now. I'm going to focus on the windows that need the most work.

Here are some windows using the existing UI theme:

**** Work in Progress warning ****

Here are the windows using the new UI theme:

On flat white and black backgrounds:

Thoughts: I focused on making the design more modern, clean, and legible. The thick gold frames are gone, being replaced by a solid top frame with an optional title area, and a lower 'weight' frame to hold it in place. This somewhat resembles the structure of a Roman Standard flag. I'm using a temporary background pattern texture that comes with Adobe Photoshop for now just to quicken the design process, but this will be replaced with a compliant texture.

That's it for now.

Hope you guys like it!

[leper]

Wow!

(Just some comments as to not distract from that beauty too much, but the background could use some more work (I know it is just temporary) as it looks a bit too modern. The player names for the diplomacy screen need a bit more vertical space.)

[Shield Bearer]

This. Is. Awesome!!! To quote leper: " "

It's so elegant, it's so sauve, its just spectacular!

[zoot]

Definitely good to see the overembellished frames go. There seem to be a symmetry issue though, with the decoration on the right side "sticking out" more than the ones on the left side. I prefer the ones sticking out less.

Edit: Actually, to be exact, I like the top-left one and the bottom-right one. If you mirror those, there should be a full set.

Edited April 21, 2013 by zoot

[Yves]

I will not use that smiley but it fits very well - It looks awesome!

The new theme will be rolled out throughout the game, but will not influence the in-game HUD, the main menu screen, or the new website design for now.

I'm not sure what you mean exactly. think consistency is one of the most important things about GUI design.

I think beside making the design prettier the GUI also needs a very pedantic and persistent person to work on the usability.

[Shield Bearer]

Oh, and maybe the bottom 'scrolls' could point down, instead of up

[Pureon]

Thanks for the feedback so far.

I'm not sure what you mean exactly. think consistency is one of the most important things about GUI design.

I'll focus on redesigning the windows and their layouts for now, they need the most 'work' - other stuff will follow at a later date if needed.

@zoot: Oops - ignore the right hand side, my mistake (At least I got the diplomacy window right)

[quantumstate]

These look pretty nice . For the dialog previews could you use a more realistic background with a game screenshot for a more realistic preview.

[feneur]

Wow indeed You're about to take the 0 A.D. GUI into the 21st century Overall really great, I would just make the general suggestion to not be limited to what the GUI looks like today in terms of where buttons are placed etc, if you think there are ways to improve it please feel free to suggest them

[Mythos_Ruler]

The overall style is fantastic, m8. A few things about the layouts: I've always felt that the Diplomacy pop-up could be a LOT bigger. The "A N E" for Ally, Neutral, Enemy is very bad for usability. They should be spelled out. Also, for tributes, the player should queue up the tribute, then the money does not get sent until the player clicks a button or close the screen. Same with changing diplomacy. The diplomacy should not actually change until the dialog is closed ('Okay' or 'Commit'). I realize that this is the 'design' thread, but I think these things should be laid out there because they affect the design.

As far as fonts go, I think title headers and button fonts can be more stylized, while all the informational stuff remains in a more 'readable' font. Let's make this look pretty and functional all rolled into one.

[MishFTW]

I have long wished for a minimalistic UI. A step in the right direction. (The old golden bars never really did give a feeling of antiquity, rather just seemed too baroque-sque to me.) If only the GUI was revamped; it would be so much easier to mod it.

Pureon, if you could stretch it to be a bit more modern (muted tones, less "shiny"/web 2.0), it would be perfect with the new website theme I've been envisioning for a while

[Shield Bearer]

I have long wished for a minimalistic UI. A step in the right direction. (The old golden bars never really did give a feeling of antiquity, rather just seemed too baroque-sque to me.) If only the GUI was revamped; it would be so much easier to mod it.

Pureon, if you could stretch it to be a bit more modern (muted tones, less "shiny"/web 2.0), it would be perfect with the new website theme I've been envisioning for a while

Keep in mind that this is a game set in a pre-modern world, where beauty was more than 'less is more' We wouldn't want a Starcraft/Crysis like GUI for this

[wraitii]

Works pretty great, I must say. Obviously the buttons would need a rework too but I guess that's part of the WIP

I really like the marble aspect of the background, though I think making it slightly less white, combined with making windows slightly less black would be easier on the eyes.

I find the bottom bar to be a bit too prominent, particularly on small windows.

Still, solid work!

[Mythos_Ruler]

I recommend that Pureon continue on this path for a while without too much nitpicking from us, to see where he leads. I'd rather not dilute his artistic direction with too much "design by committee" so I say, you go with yo bad self, Pureon. Let's see what you can do.

[Pureon]

I recommend that Pureon continue on this path for a while without too much nitpicking from us, to see where he leads. I'd rather not dilute his artistic direction with too much "design by committee" so I say, you go with yo bad self, Pureon. Let's see what you can do.

This makes me happy. So far most, if not all, of the comments have been supportive of the overall concept, so we're in a fairly good place. As you guys know, I'm too busy most weekdays at the moment, so process will be slow for now. Gives me time to think.

[Jeru]

Wonderful!

(Unrelated note: "A N E" needs to be changed, it is not clear that it means "Ally, Neutral, Enemy")

[Ludo38]

Good approach Pureon, thanks for revamping the UI that way !

[MishFTW]

Keep in mind that this is a game set in a pre-modern world, where beauty was more than 'less is more' We wouldn't want a Starcraft/Crysis like GUI for this

We can still have an "ancient-themed" GUI without overdoing it. I think a fine line exists between the two and Pureon is doing a fine job staying in balance. (And I wouldn't really call the Starcraft UI "minimalistic"; it seems a bit heavy on the textures.)

[historic_bruno]

(Unrelated note: "A N E" needs to be changed, it is not clear that it means "Ally, Neutral, Enemy")

Simplest solution: make the dialog wider so the text fits, or we could use angled/rotated text if the GUI engine supported it, or we could use icons if there are any obvious ones for Ally, Neutral, Enemy, It's one of those things a player really only needs to learn once, and then they understand the layout, so there's clearly a tradeoff.

Is there a better control than unlabeled checkboxes for selecting diplomatic stance in the first place?

[WhiteTreePaladin]

I'm glad to see an artist looking at this again. Your layout looks really nice.

I just used what I had available to make the existing theme. Many of the gold pieces are just the old bronze ones that I removed some of the red from. I wouldn't mind you replacing all the theme stuff I added, lol. I look forward to what you come up with. I don't know if I'll have time to implement it though. I'm sure someone will.

(One small request: I'd like the progress bars to revert back to flat ends. I think I came up the idea for the rounded ones and hacked it in. I've regretted it since then and it's never quite worked the way I wanted.)

[Mythos_Ruler]

Simplest solution: make the dialog wider so the text fits, or we could use angled/rotated text if the GUI engine supported it, or we could use icons if there are any obvious ones for Ally, Neutral, Enemy, It's one of those things a player really only needs to learn once, and then they understand the layout, so there's clearly a tradeoff.

I think the dialog should just be made bigger. Also, it would be nice to see chat history at the bottom with chat input. Perhaps the ability to choose different players to chat to.

Is there a better control than unlabeled checkboxes for selecting diplomatic stance in the first place?

A drop menu could work.

[wraitii]

Putting this here: I've added the ability to select items in dropdown menus by typing stuff with the keyboard (open the map menu, type "lorr", it gives you Lorraine plains"). I feel like it'd be nice to have, I'll post a patch when I get back home.

[Jeru]

A drop menu could work.

+1

[Yves]

Putting this here: I've added the ability to select items in dropdown menus by typing stuff with the keyboard ...

I missed that so much, well done!

[alpha123]

A drop menu could work.

Putting this here: I've added the ability to select items in dropdown menus by typing stuff with the keyboard (open the map menu, type "lorr", it gives you Lorraine plains"). I feel like it'd be nice to have, I'll post a patch when I get back home.

Big +1 to both of these.