Mockups for a Settings Menu Layout

heinezen commented 7 years ago

Continuation of #732 .

I have created a variety of layouts to test how an options menu could look like in the final game. So far there are ~~6 different layouts~~ (EDIT: The 3 tabbed layouts remain for the second iteration We are down to 2 layouts in our third iteration) to choose from which need to be evaluated.

https://heinezen.github.io/openage/settings_menu

The following steps will be:

[x] Testing and evaluating the layouts (concerning: UX, compatibility with different languages, other improvements) a.k.a. nitpicking until we are satisfied
[x] Changing and/or moving UI elements if necessary
[ ] Decide which one we go with as the final design

If you want to test the layout, please do not use the sidebar on the left for navigation. This is generated by Axure for debugging purposes. It should always be possible to navigate to the "Home" Page by interacting with the UI. The sidebar should not appear anymore. If it still does, ping me in the IRC.

Do you want to change everything and make an even better mockup yourself? Here is the file (generated with Axure RP 8).

Wandalen commented 7 years ago

Interesting piece of software. Thanks for sharing.

coffenbacher commented 7 years ago

Wow very cool, great work. Personally I really like the tabbed layouts.

TheJJ commented 7 years ago

Nice. Some remarks:

The tab layouts rock. Somehow i like the left-tabs better, but integrated in the main-menu-thingy the top-tabs are cooler.
I would put the mod selection on a different menu, as this cannot be changed after game start. It also needs customizable load order. Maybe the menu is just disabled after game launch.
What's the difference between profiles and nicknames? Also, as all the settings depend on the profile, that should be some selection that is placed over the tabs (if that is doable nicely).
The list selections are bad, but may be suitable for mobile platforms.

VelorumS commented 7 years ago

Can group a bit the settings in "Graphics": there are some performance-related, while others are style tweaks.
Maybe there is no need for "Apply" and "Cancel".

heinezen commented 7 years ago

I've received some feedback from people I showed the mockup to:

Font Size on the Tabbed (Classic) layout is a little bit small, espacially for the tabs (font size 13). It was suggested that we have a minimum and maximum (supported) font size. This would make sure that the menu doesn't break if the user changes font size.
The distance between the Checkboxes were considered a little bit too small. This shouldn't be a problem since there is still a lot of space left in the menus.
There was some confusion wheter the "Reset to default" button (in the Tabbed Layout) resets every option or only the ones in the tab you are in. I intended it to revert only the options in the current tab. Nevertheless, this has to be made clearer in the next design iteration
On Reddit juef pointed out that we should include tooltips. I think also think this would be a nice additional feature for the menu. We should decide if we want to do this like in AoE2 (tooltip is displayed in one dedicated place in the layout) or if we want to display the tooltipright next to the cursor. His preference regarding the layouts were:

Tabbed layout (classic)

Tabbed layout (top)

Tabbed layout (left)

List (double-columned)

List (Single-columned + help)

List (Single-columned)

@ChipmunkV Can you specify what settings need to be grouped and why the "Apply" and "Cancel" buttons could be obsolete? I can integrate all recommended changes in a 2nd iteration of the mockup :)

@TheJJ

We could always do it as the HD Version does it and display the mod manager right before the game starts. I was inspired by the design of the Rimworld mod selection which you can see here The mods are loaded in order from top to bottom and you can drag and drop them to other positions in the list to change the load order. Sadly, I can't really display "drag&drop" in the mockup.
"Nickname" is short for the option "Change name for multiplayer". Your online ranking should be tied to the profile but maybe some players don't want to be recognized by their profile name. Basically you can have different online nicknames for the same profile.
It depends on what you want to accomplish by placing the profile selection over the tabs. Do you want the players to know for which profile they are making changes? I also had the idea to merge the "Profiles" options into "General". That way the profiles would always be displayed on the first page the player sees.
List Selection and single columns could indeed be used for mobile or resolutions smaller than 800x600. But before mobile is designed, there's a lot to do on desktop ;-)

VelorumS commented 7 years ago

@heinezen, highlight units behind structures, colors and notifications can be grouped. They are not related to fitting the game to display/videocard.

"Apply" may be useful for the heavy settings like fullscreen or resolution. For other settings it can be immediate. If there is no "Apply" - then there is no "Cancel". Can make a close button at the top like for a window.

Currently, "Apply (should be called "Save&Close")/Cancel" applies/closes all tabs, but "Restore to Default" restores current tab. There is such a settings menu in Eclipse. When you press "Cancel" and there are unapplied changes on other tab - it brings up a dialog "What do you want to do with changes on other tab"?

heinezen commented 7 years ago

@ChipmunkV OK, I'll try to group them in the right column so that they are seperated from the other settings. Additionally, the category should probably be renamed to "Display", since Notifications are not that related to "graphical" options.

I see your point for the "Apply/Cancel" buttons. For the "heavy settings" we can display a popup that says something like "Are you sure you want to change the resolution to XxY?" and have "Apply/Cancel" buttons there. Instead of closing the menu like a window with an "X" in the top right corner, I would favor a "Back" or "OK" button in the lower right corner though.

VelorumS commented 7 years ago

Button is good. It's bigger.

yani commented 7 years ago

Tabbed (left) definitely looks the best imo. And I personally think the Apply button is better than instantly changing the setting. It could be grayed out until a change is actually made.

Oh and what about the main menu? I think the original main menu looks really dull. Openage could improve on this. Maybe get custom art or something really modern? Maybe a few gameplay videos with a low transparency and contrast to play in the background on a loop? (I think that would look beautiful)

heinezen commented 7 years ago

@Yanikore Replacing the main menu is a different story. The problem is that AoE 2 relies heavily on skeoumorphism. And by that I mean literally everything is skeoumorphic: main menu, the campaign selection screen, mission briefings, all options menus and even the ingame interface. Ditching it in favor of something modern would require a complete redesign of everything.

The guys from OpenRA for example can get away with a gameplay loop in the background and new menus because the menu interface of CnC is the most boring (list selection) design one can come up with. OpenTTD has gameplay in the main menu screen because the original TTD also had it.

We should be careful about making these decision and always remember that beauty =! design ^^

yani commented 7 years ago

@heinezen I don't fully grasp the concept of being skeoumorphic but is it necessary for openage? I think with the GUI openage could definitely improve a lot compared to the original game. Not only in design but also in usage and other aspects.

And yeah the gameplay loop is just something I came to really like for RTS games. Some links to make you all like it as well: OpenRA / OpenTTD :P

Will it be possible to mod stuff like this?

heinezen commented 7 years ago

@Yanikore Well first of all design and usage are connected to each other, so changing a design will also change the usage of an interface.

Skeoumorphism is not necessary but it certainly works in AoE 2. The main reason for using it is that the player feels involved in the game world. Just look at how you start a campaign mission in AoE: First you enter a campaign selection menu but it doesnt look like one. Instead, it is designed like a table with drawn maps on it and little figures that represent the campaign you want to play. A mission introduction is always put on a pergament role in an environment that fits the theme of the campaign. Once you are ingame, you can see that the lower half of the interface is actually a representation of some kind of battle planner, that a medieval commander would have. Notice the pergament role in the middle where unit stats and unit selection are displayed. I think the minimap is also supposed to look like a compass.

Other games have something like this too. The mission briefings in SC 1 always begin with a video conference in a representation of a conference room. It is supposed to make you (the player) feel integrated into the story rather than being some guy who happens to play mission after mission. CnC is different in that regard because it delivers its story through videos between missions and has a simpler interface.

All I want to say is: This was put in the game with a good reason. And if we change it, we should have a good reason for that too. The main menu is just a piece of a larger puzzle. That doesn't mean, there will be no re-design but we would have to conceptualize a little bit before we create a new one. What do you not like about the old GUI and what would you improve (besides gameplay loops 😄 )?

Will it be possible to mod stuff like this?

The ingame interface will probably be moddable at some point. I also see no reason why the main menu shouldn't support different skins and alternative versions.

coffenbacher commented 7 years ago

And if we change it, we should have a good reason for that too.

The modern multiplayer scene is a good reason, i.e. Voobly client launches straight into the game with no in-game menu at all, since the in-game menu isn't designed at all to be conducive to modern play.

I think a moddable interface is a good idea, since for single-player the skeumorphism is a great feature but for multiplayer it holds back power users.

On Fri, Feb 24, 2017 at 5:52 PM, Christoph Heine notifications@github.com wrote:

@Yanikore https://github.com/Yanikore Well first of all design and usage are connected to each other, so changing a design will also change the usage of an interface.

Skeoumorphism is not necessary but it certainly works in AoE 2. The main reason for using it is that the player feels involved in the game world. Just look at how you start a campaign mission in AoE: First you enter a campaign selection menu but it doesnt look like one. Instead, it is designed like a table with drawn maps on it and little figures that represent the campaign you want to play. A mission introduction is always put on a pergament role in an environment that fits the theme of the campaign. Once you are ingame, you can see that the lower half of the interface is actually a representation of some kind of battle planner, that a medieval commander would have. Notice the pergament role in the middle where unit stats and unit selection are displayed. I think the minimap is also supposed to look like a compass.

Other games have something like this too. The mission briefings in SC 1 always begin with a video conference in a representation of a conference room. It is supposed to make you (the player) feel integrated into the story rather than being some guy who happens to play mission after mission. CnC is different in that regard because it delivers its story through videos between missions and has a simpler interface.

All I want to say is: This was put in the game with a good reason. And if we change it, we should have a good reason for that too. The main menu is just a piece of a larger puzzle. That doesn't mean, there will be no re-design but we would have to conceptualize a little bit before we create a new one. What do you not like about the old GUI and what would you improve (besides gameplay loops 😄 )?

Will it be possible to mod stuff like this?

The ingame interface will probably be moddable at some point. I also see no reason why the main menu shouldn't support different skins and alternative versions.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SFTtech/openage/issues/751#issuecomment-282401306, or mute the thread https://github.com/notifications/unsubscribe-auth/AAPAa_MWFxW27KuZZ7eHOLkhABaHM1Shks5rf0L3gaJpZM4MFxBd .

heinezen commented 7 years ago

@coffenbacher The multiplayer in AoE2 was always a little bit more straight forward than singleplayer with its menus. A launcher that let's the player get straight to multiplayer is a great idea though 👍 I'll keep that in mind for the multiplayer mockups.

heinezen commented 7 years ago

A new iteration is here (same link as in the 1st post).

SFTtech / openage

Mockups for a Settings Menu Layout #751