Soldat Menu GUI

[Dusty]

I likey but I don't think it's necessary to keep the old gui font, it's horrendous.

[Illuminatus]

Noob question, but what does HCI stand for?

Human Computer Interaction
Pretty important stuff if you consider designing a user interface.

[thegrandmaster]

I smell some GUI debate been a long time since I last posted on these forums. Nice to see debate springing up again.

@L[one]R:
Great to see that you finally got your thoughts down onto a mock-up! Looks pretty good.
Interesting ideas with the popup, though I've never been too much of a fan of the classic popup box kinda look - x in top right, drag-able lookin window etc.
I'll just throw this out there.. a hover effect and a less popup-y style.. thoughts?

EDIT: Actually, I'm not sure how the side-overview would work if it was on the same level as the map it was previewing.. perhaps scrap the joining piece and just have the overview floating in a faded thing on the left, hovering over maps swiftly faded the new overview in.

Remind me.. what is bullet time? What I thought it was doesn't affect game rules, but I don't think it is what I thought.

[Bonecrusher]

Nice menu ideas by loner, hope to see something like that actually used in new soldat gui.

Remind me.. what is bullet time? What I thought it was doesn't affect game rules, but I don't think it is what I thought.

Bullet time is slow motion for soldat;p

[thegrandmaster]

Remind me.. what is bullet time? What I thought it was doesn't affect game rules, but I don't think it is what I thought.

Bullet time is slow motion for soldat;p

In which case it should appear in the general settings rather than the game rules as L[one]R has put it..

[L[0ne]R]

Eh, that's right, bullet time isn't really a rule, though it still is a server setting, as well as sniper line, minimap, etc.. gonna have to find a place for those too, but that's for later.

Interesting ideas with the popup, though I've never been too much of a fan of the classic popup box kinda look - x in top right, drag-able lookin window etc.
I'll just throw this out there.. a hover effect and a less popup-y style.. thoughts?

I agree that popup windows look rather "meh", so I've tried a different idea - an overlay menu, like steam overlay. Also tried a new font for some of the buttons, and it seems to fit Soldat's style very well. It adds a nice bit of variety, as well as separates main buttons (like menu buttons) from less important options and settings.

EDIT: Actually, I'm not sure how the side-overview would work if it was on the same level as the map it was previewing.. perhaps scrap the joining piece and just have the overview floating in a faded thing on the left, hovering over maps swiftly faded the new overview in.

I think we should still keep the description and the preview of currently selected map on the main screen, so that when you close the game and later start it up again - you'll see what you've been playing last time. Plus, map preview is a nice space filler that makes the screen less boring.
I do like your idea of the hovering popups for the map selector. With the overlay sub-menu idea there should be enough space to fit both the list and the popup, so if everyone's fine with where this is currently going - I'll keep working on that.


For now, here's a 640x480 version of some of the screens. Surprisingly enough, it doesn't look as bad as I thought it would. <_<
 640_screen1: Profile screen resized to 640x480, nothing new here.
 640_screen2: Start Game tab resized to 640x480. Had to use smaller font for map description, but it's not a huge problem in my opinion.  Also tried a different font for the menu buttons. Hope you'll like it.
 640_screen2a: Rules customization, but this time instead of a small window popup there's a full-screen overlay menu, kind of like steam in-game overlay.

[Shoozza]

All gfx stuff aside maybe we should first think about the general gui behavior before we do gfx.

I think the GUI should be minimal and simple and advanced options (which are rarely needed) should be hidden or in sub menus.

The GUI should work with keyboard input and mouse input (current one only works with mouse).
By keyboard input I don't mean stuff like with tab and shift tab.

[L[0ne]R]

All gfx stuff aside maybe we should first think about the general gui behavior before we do gfx.

These gfx are fairly quickly scrapped up, even checkboxes and most of the buttons are made up with square brackets for now. I wanted to at least provide a general idea of what it might actually look like, since many people have a tendency of imagining things in a completely different way. Either way, I'm not planning on messing with them more until, like you said, behavior is more decided upon.

I think the GUI should be minimal and simple and advanced options (which are rarely needed) should be hidden or in sub menus.

Well, this is the whole purpose of this concept. To me it seems fairly minimal and simple (definitely less mess on the screen than in current GUI), and advanced options open up in a separate window/overlay/whatever you want to call it.

The GUI should work with keyboard input and mouse input (current one only works with mouse).
By keyboard input I don't mean stuff like with tab and shift tab.

I'm taking that into account as well, though I've noticed a few things that can be improved.
Here's the bare-minimum setup I'm trying to make it compatible with:
- "up/down arrow keys" to scroll through options and settings.
- "left/right arrow keys" to change selected setting.
- "enter" and "escape" to open or close sub-menus, drop-down lists, choose "accept" or "cancel" in pop-up messages if any.
So if this were on console, you should be able to navigate with just d-pad and A/B keys.
Screen2 should already work well with this setup, but suggestions are always welcome.

[Shoozza]

We could use following keys for some actions:

Menu Item up:	Up/W
Menu Item down:	Down/S
Change Setting (decrease):	Left/A
Change Setting (increase):	Right/D
Choose Menu Item/Confirm Action:	Enter/Space
Go Back/Cancel Action:	Escape/Backspace

BTW this seems like a nice site to get some ideas http://gamegui.net/index.php

[nosejj]

Eh, that's right, bullet time isn't really a rule, though it still is a server setting, as well as sniper line, minimap, etc.. gonna have to find a place for those too, but that's for later.

Interesting ideas with the popup, though I've never been too much of a fan of the classic popup box kinda look - x in top right, drag-able lookin window etc.
I'll just throw this out there.. a hover effect and a less popup-y style.. thoughts?

I agree that popup windows look rather "meh", so I've tried a different idea - an overlay menu, like steam overlay. Also tried a new font for some of the buttons, and it seems to fit Soldat's style very well. It adds a nice bit of variety, as well as separates main buttons (like menu buttons) from less important options and settings.

EDIT: Actually, I'm not sure how the side-overview would work if it was on the same level as the map it was previewing.. perhaps scrap the joining piece and just have the overview floating in a faded thing on the left, hovering over maps swiftly faded the new overview in.

I think we should still keep the description and the preview of currently selected map on the main screen, so that when you close the game and later start it up again - you'll see what you've been playing last time. Plus, map preview is a nice space filler that makes the screen less boring.
I do like your idea of the hovering popups for the map selector. With the overlay sub-menu idea there should be enough space to fit both the list and the popup, so if everyone's fine with where this is currently going - I'll keep working on that.


For now, here's a 640x480 version of some of the screens. Surprisingly enough, it doesn't look as bad as I thought it would. <_<
 640_screen1: Profile screen resized to 640x480, nothing new here.
 640_screen2: Start Game tab resized to 640x480. Had to use smaller font for map description, but it's not a huge problem in my opinion.  Also tried a different font for the menu buttons. Hope you'll like it.
 640_screen2a: Rules customization, but this time instead of a small window popup there's a full-screen overlay menu, kind of like steam in-game overlay.

With some tweaks this could look great and really change the way people first re-act to Soldat when playing first times.
And of course, should be available for all resolutions while it is stretched, unlike the free space we've now when res change.

• Removed BattlEye logo on servers (all servers should use anti-cheat anyway) - agreed
  
• Added a lock to show which servers require a password - agreed
  
• Added check sign to indicate a recommended server** - ish*
  
• Removed (WM) name prefix - ish**
  
• Expanded Name column - agreed
  
• Merged Players and Max to one column - agreed
  
• Abbreviated the game mode - agreed
  
• Map column moved to the right of the game mode - agreed
  
• Game mode prefix removed from map name - not sure about that, lots of servers use ctf maps on dm servers etc. I'd keep the prefix imo.
  
• Ping right adjusted and capped at 999 - agreed
  
• Ping color dots removed - instead of dots, maybe just colour the number?
  
• Flags moved to the right of ping - I'd keep the flags in the same place, it's nice to see where it is before anything...
  
• Removed all useless info to the right of the ping - it's not doing any harm!
  
• Defaults to sort by players, then ping - sure
  

** Recommended server: Dedicated, no bots, no WM, no realistic/survival/advanced, map matches game mode.

*seems a bit in-your-face
** agreed that (WM) is not the nicest way of showing it.

These are great changes and should apply maybe even to the next release. :3

[machina]

Sadly, I need to say that I didn't enjoy that layout... It shouldn't be so simplified. Why want be that done in full resolution like 1680x1050? It's not 2002 anymore to keep with such awful quality....

[L[0ne]R]

With some tweaks this could look great and really change the way people first re-act to Soldat when playing first times.
And of course, should be available for all resolutions while it is stretched, unlike the free space we've now when res change.

Any particular tweaks you have in mind?

Sadly, I need to say that I didn't enjoy that layout... It shouldn't be so simplified. Why wont be that done in full resolution like 1680x1050? It's not 2002 anymore to keep with such awful quality....

It's a compatibility thing, you know how it goes...

Either way, here's how I think resizing should be done:
In 640x480 res you would see the bare minimum - actual content. Vertical scrollbar could be used in case all the content doesn't fit on one page (it should fit anyway, but it's still nice to have such functionality). When you go beyond 640x480 - you'll just see additional background images, banner at the top, some graphics at the bottom to not make the menu look too plain and empty. Also vertical spacing between blocks of content could be increased on higher resolutions to spread it out a bit and fill up the space.

[Bistoufly]

Nice Job!

You managed to make it look pretty neat,
while staying close to the original Soldat theme.


I like it. 

[machina]

Okay, but it looks too much like website now. Also, why won't we make some monochromes on this layout to make (among others) buttons more "button looking"...

[L[0ne]R]

Wasn't able to progress much on the GUI due to other work, but here is a work-in-progress mockup for server browser.
I'm still not sure where to put the Join/Disconnect, Filters, Favorites, History, Refresh and connection type buttons, and I'm not sure whether "Ping All" button is needed.

Also attached a screenshot of settings tab with minor tweaks.

Okay, but it looks too much like website now. Also, why won't we make some monochromes on this layout to make (among others) buttons more "button looking"...

True, it does look a bit like a website, but I can't really think of any good way to scale the interface without making everything blurry. :S It may look better if there's a demo playing in the background. Also I'm not sure what you mean by "monochromes", but for now I'm focusing more on layout, so I'm not gonna bother making actual graphics for buttons right now.

[Shoozza]

The Background is not part of the whole gui right?
Why should there be so much wasted space with the titlebar?
The X is for closing the window?
the [Lan] > [ONLINE things are buttons? What is that ----?
What does the [History] thing do? And what does Directip do?

IMHO you should try to build a basic gui without much of the gfx first so the navigation is clear and which elements are necessary. This is probably taking you too much time to prototype.

There is this tool called "Penicl Project" which is great for it.
I made the PolyWorks2 mockups with it.

[L[0ne]R]

The Background is not part of the whole gui right?

Eh.. the background is.. background? Its purpose is simply to fill the blank space outside the menu with something more interesting when using higher resolutions. What I have on the previews there is just a quickly scrapped-up placeholder image. It could potentially be something else, for example a demo playing in the background.

I'm trying to think of a better way how menu could scale, but problem is that on a small resolution every pixel matters, so a nice crisp 1-pixel thick font works very well, but is not very resize-friendly. If we can find a font that looks good without anti-alias, resizes relatively well, supports special characters and fits the style of Soldat - then proper menu scaling could work, but finding such a font will be very difficult.

Why should there be so much wasted space with the titlebar?

By titlebar do you mean just the Start/Join/Settings/Player/X bar, or do you mean the image at the very top as well?
If former: those buttons are the core element of the menu, so they should stand out at least a little bit. Also makes the menu a bit more interesting in 640x480.
If latter: the top image would only be visible under high enough resolutions (or in the profile screen) and once again, serves as a space-filler when using much higher resolutions than what Soldat natively supports.

The X is for closing the window?

Eh, I was going to replace the "X" with something closer to this. This button takes you back to profile selection screen.

the [Lan] > [ONLINE things are buttons? What is that ----?
What does the [History] thing do? And what does Directip do?

Sorry, it was my quick and lazy attempt to draw another bar with buttons/tabs that switch between different server lists.

LAN: browse LAN servers if there are any.
Online: browse online game servers.
Direct IP: connect to a server by entering a specific IP adress and port.
History: view list of servers (both local and online) that you've played on recently.
Favorites: list of favorite servers.
---- is just a separator, but I can see why it confused you. :S

IMHO you should try to build a basic gui without much of the gfx first so the navigation is clear and which elements are necessary. This is probably taking you too much time to prototype.

Well, not really. The initial concept took me a few hours, but right now im just moving graphics around. Reason I go into a bit more detail with this is because the screen space is so limited, so IMHO it's important to have at least some idea of how much space each element will take up, otherwise what might look fine on a rough sketch might not actually fit into a 640x480 design.
I'll give PencilProject a try though to make sort of a summary of  how navigation could work.

[Clawbug]

http://bokardo.com/principles-of-user-interface-design/

Learn!

[McWise]

Any news on this topic? Would be very interesting.

[L[0ne]R]

Personally I'm still somewhat unmotivated to continue work on this right now, especially considering that so far I've been doing it all wrong anyway. :S I'll wait until the devs are ready to really start completely and actively remaking the GUI, so I have more people to work together with.