Creating Main Menu UI

[MartinMuzatko]

This issue contains the next discussion for planning the next steps of the main menu (including the settings)

The main document to work with is here: https://github.com/inexorgame/inexor-core/wiki/Main-Menu-UI.

To contribute, please discuss your concerns or questions here in this issue. Otherwise you can add your ideas.

Current tasks:

• [ ] Define what pages/menus we need
  • [x] Create a rough outline of contents and actions for each page
• [ ] Define how navigation around the menus works
  • [ ] Is there one main menu where you can get to the other pages, or is it always visible?
  • [x] Create sketches of main menu layouts and alternatives
• [ ] Define design (look and feel)
  • [ ] How components (buttons, switches, sliders) look like
  • [ ] How interaction with the menu works (mouse? keyboard?)
  • [ ] How menus blend from one into another (motion design)
  • [ ] Which layouts do we use?
• [ ] Guided onboarding experience (first time visiting)
  • [ ] Get started quickly with the way users interact with the game
  • [ ] Empty states with actionable navigation (no profile created - create one now)
• [ ] Define how users can interact with other users outside servers and outside the game
  • [ ] What pages do they have?
  • [ ] How do they interact with others if they have no account/profile?
  • [ ] In what parts of the game do they access these pages?
  • [ ] What are the workflows to publish/download/share?
• [ ] User Profile
  • [ ] How do they create their own profile? (What is the minimum information required for authentication)
  • [ ] What other services do we integrate with for single sign on? Google? Twitter? Github?
  • [ ] What information can they provide?

Roadmap:

• [ ] Define roughly which contents we need to display
• [ ] Create a hierarchy of content to define which menus are required
• [ ] Define a concept for design based on the content
• [ ] Create a rough outline/sketch of the different layouts and design implementation to give an idea how the end result might look like.
• [ ] Settle on a technology stack and libraries for a first implementation
• [ ] Prepare the components for the UI (buttons, sliders, menus)
• [ ] Integrate with Inexor Flex to make syncing of settings functional
• [ ] Create and use artwork to beautify the menus: Logos, Icons, Videos.

[Croydon]

Thank you for moving to do lists out from the wiki.

[MartinMuzatko]

First feedback is welcome. I'm trying to create concepts for the main menu and multiplayer.

The sketches only denote how layout and functionality might look like, no design details.

Main Menu

In the sketch below, every section gets its preview of subsections.
E.g. recently played servers in Multiplayer, or if not yet played, a few recommendations.
Or recently created Community content and a button to explore more.
Or for singleplayer, the latest savegame or next mission/tutorial to play.
This also has a few disadvantages. Users do not know whether or not they can click on the heading of each card, or if this is everything, this might be counter-intuitive especially for the settings section. Which multiplayer for instance includes a "browse all servers" button.

Multiplayer

Below is an early draft of how the server browser may look like.

[a-teammate]

I like the sketches :)

Main Menu

Users do not know whether or not they can click on the heading of each card

One solution to avoid this could be to only make the tile selectable in the front page and not its contents. So after selecting the tile the new window opens and one can do the specific actions there.

Okay, so Account is for selecting the name/playermodel/.. settings which get shared with other players when playing, while Community means Content Hub and social network? Is there a different account for social network? (I'd suggest no, since it shouldn't be Facebook, but just allow a minimum steam-like featurebase plus maybe a news feeds.)

Report a bug transports the message "this might not be stable" really well :smile: I hope it does not encourage people to assume they have no right or responsibility to search for the solution themselves, too.

Should we maybe put Multiplayer at the top, to give it the main position? Reason: Multiplayer is currently our top priority. I think Mission could be an addition somewhen, but even then I think we should encourage to play cooperatively. Currently all singleplayer functionality is removed. It was very simplistic, but obfuscated the whole C++ codebase with different execution paths. The new design (thanks to inexor flex's "instances"-concept) always spawns a server in the background and "offline" playing means playing on the local server. (That game events got synchronized just when playing specific gamemodes did not make sense to me.) The direction is towards cooperative missions I'd say. Should we maybe even go as far as hiding the option to play alone? :) So players are a bit forced to try to play cooperatively first?

I see that the tiles would not look as well arranged as they do in your sketch when moving "Multiplayer" to the top :D maybe we could split "Multiplayer" up or make the UI hookable for modules? So one person could add a "favorite server" section while the other has a "lastly edited maps" section in the main menu page after downloading an UI addon? (Hm, the problem whether the tiles should have individually clickable content arises here again..)

Serverbrowser

Very cool! Really good solution especially for seeing who is playing on a particular server.

Once I made a mod which had a server preview. It appeared as extra menu after selecting a server. After seeing the scoreboard one could choose whether to connect to the server or not. Looking back I think this had some flaws in regards of steering the user to do the thing we want him to. Firstly I often didn't join a server, since I already knew everything happening there and was only connecting if it was really appealing to me, which was manifesting habits. Secondly most of the time the relevant piece of information was "is someone playing I know"/"are enough players of another clan playing to ask for a war"/"..for a duel" or such stuff. Therefore I think your solution to list the players when hovering the server-tile is a better approach (No extra menu, not too much information)

I think people would love it if we could make it adjustable which list to show by default (favorites, clan, friends, all).

Is clan showing your currently online clan mates, or all clan players currently playing? Or the servers they play? Is it somewhat related to Community then? Would it make sense to split the Community menu into the Content Hub part, the news feed part and the Social part (aka "is there anyone to play with me")?

My two cents contain some not too thought-through ideas, so finding solutions for all that isn't the target :D I like the concepts :) This is really a major upgrade to the old UI design!

[MartinMuzatko]

Thanks for the feedback. I very much appreciate it.

Main Menu

The idea was to support having quick access to relevant information - e.g. your first three favorite servers you can quickly connect to, without needing to browse. Or if you are new and have no favorites - show the most played or random servers with players.

Since we also want a match-making service, this could be the best place to offer a "quick play" button or similar.

Of course, every tile would be clickable either through the heading. I just fear that people do not realize that, hence I added a "browse all servers" button, so you still know that you can get there.

Customizing

You could customize each tile by setting e.g. "show me favorite servers" or "show me most empty/full servers" + Amount.

Account

Maybe we can find a better naming for this. I'm trying to bring two concepts or two kinds of players together in one. One is being a player without an account, but still having basic information attached to (e.g Name and Playermodel) and read-only access to community (can download content, can see communities). The other one has an account and has writing access to the community (can publish/share content, can join clans, can have a public profile page, etc)

Some features like setting a name, playermodel or faving a server can be possible for both player types. The only difference is, that the information is stored locally on the computer instead of our databases.

So, maybe a better wording could be "Player" or "You" or "Profile" I tried to write down most of these aspects at the Game Community feature page.

Community

My first intention was to put content created by the community here, but we might as well display communities (clans) there. Also, if you are in one or multiple clans, you could quickly see who is online. This could also be a great place to stick clan news there.

Maybe we can split this into two. One is for global community stuff (content, organized events like leagues) and one for local community (clan). When you are not part of a clan, you could allow users to explore existing clans.

Mission

Yes I agree - this should not be the most prominent part of the game. Mission is also the wrong wording here I assume. I wanted to avoid saying "Singleplayer". I think it is very preferable to get a first time lesson to get an overview for the features of the game. Factorio does a great job of having ingame tutorials. You can pick from a library of tutorials, where you are put in a separate world with an interactive guide to learn a specific task. This is related to #257. However, this part of the menu also combines two things. One is content you can play alone (e.g. missions) and one is to learn new things.

We could either split this into two, or have the first-time tutorial there, when you are new. Otherwise, if you finished it, you can choose from content to play alone (as the tiles main action). Of course, you can always skip to any specific content by clicking on "mission" (or whatever we call it) directly.

I love where this is going, we have yet to define many details of how we want players to interact with the game :)

[a-teammate]

Hm, when a player opens "Community" they would do it because of independent reasons (same for account).

• One reason is to find someone to play with/find the part of the game of interest. (socializing)
• Second reason is to create content/see how others liked your content. (socializing, too. Maybe different form)
• Third reason is to have news: find out about new parts of the game (i.e. content), read feeds.. (curiosity)

Sorry for duplicating that, I see you have written it similarly in the wiki.

It is important to me that we find the right balance between socializing and curiosity. We want people to be open to new stuff. How could we subtly encourage them to do that? I'll open another issue later whether we want to steer that and if yes in which dimension.

Of course, every tile would be clickable either through the heading. I just fear that people do not realize that, hence I added a "browse all servers" button, so you still know that you can get there.

I fear the same :D I think expressiveness should win over time optimization here? I.e. allowing "the quickest way for different people" could be handled by allowing the UI to have addons. What I had in mind is the bridge towards #342: I see this issue here as good summary for what #342 should make possible.

I posted a note on #257 that it is imo not the only way to let people train offline first.

[MartinMuzatko]

I took some time to find out what the relations are of the different contents we provide within the UI. Blue: Objects
Yellow: Properties
Red: Computed properties

Those are very conceptual. We might not be able to track how many times a map has been played on a server, but this is information we could provide. At the top, you have the main objects (not a full list).

As you can see, for content circulation, it is easy to link from one page to another by letting the user explore the different contents that are linked. This way - exploration never ends.

Having a rough overview of the different properties of the different related objects, we can prioritize what information to show for each linked object and which actions to show.

This way to organize content acts as an information architecturing framework.

I will later on work out the finer details to prepare for how to display the contents.