Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Title screen GUI design #4531

Open
nemaara opened this issue Oct 31, 2019 · 15 comments
Labels

Comments

@nemaara
Copy link
Contributor

@nemaara nemaara commented Oct 31, 2019

Making an issue for this finally, since I've been talking about it for a while: here would be some general things about improving the title screen and in game GUIs (which it really would be nice to improve). I'll split the in game GUI discussion into a separate issue.

One fundamental thing in GUI design is using layout, sizing, and coloring to draw attention to elements with different importance. The (functionally) most important elements also need to be the largest and stand out the most in the design. Another important thing is how much information you have in the GUI: every extra piece added dilutes all the other information contained in the display. In general, in the base display, only the most important things need to be there, and extra information can be shoved into side menus to avoid cluttering the base display. The primary goal is ease of use and understanding (not how much information you can cram into one space). With this in mind, let's look at our title screen.

image

As can be seen from the part circled in red, we have 10 (!) buttons on the right all with the same size and coloring with absolutely nothing to differentiate them. Supposing that I were a new player opening up the game for the first time, there is nothing visually to direct me to what I want to do, which is just to play something. The first thing I'm going to think about when opening the game isn't to fix my preferences nor is it to open the help menu. I just want to play the game first, then see if I need help or to fix some options (say, playing without music if it bothers me).

Next, circled in blue, we have the "tips of the day" section, which is basically the same size as the 10 buttons menu, meaning that the GUI gives it more or less has the same importance as the 10 buttons on the right combined. Obviously, however, tips of the day are not nearly as important as most of the single buttons on the right, let alone all of them combined.

Therefore, when considering the functionality of every section and button on the title screen, we should think about emphasizing only the most important 4-5 buttons, and leave the others to small icons off to the side. "Language", for example, is just a part of preferences and can be merged into that. "Tutorial" can be merged into "Campaigns" in some form. "Add-ons" and "Map Editor" are part of content creation and can be merged into a category as well. "Credits" is definitely not as important to players as any of the above, and probably should be a small button or icon off to the side. Under this design, we'd have "Singleplayer", "Multiplayer", "Content Creation", "Preferences", and optionally a quit button. Note that "Preferences" in many games is also provided as a small icon rather than a separate button.

For tips of the day, a smaller, less centered box with smaller buttons would place less emphasis on it, making it more of a nice detail rather than something that takes up a quarter of the whole screen (and thus has great importance in the GUI). This way, we can visually emphasize the most important elements to the player, namely in order:

  1. Playing the actual game (single/multiplayer/load)
  2. Content Creation (addons/map editor) - note that this can be minor for other games, but is a big one for wesnoth
  3. Quit button
  4. Preferences (options and language, possibly an icon)
  5. Other things (credits - probably an icon, tips of the day - probably a small box).

An example of a GUI design that we could emulate would be Stardew Valley's titlescreen:

Capture

In this case, there are only 4 big buttons, 3 of which are related to playing the game. I know immediately where to click if I want to play or exit, which is probably what I really care about doing as a player. Adapting something like this to Wesnoth could be as simple as replacing each of the 4 big buttons with one of our own (SP, MP, Load, Content Creation), then add small icons for everything else.

Tagging @soliton- and @stevecotton since we chatted on some other issues and IRC/Discord about this. I'll put part 2 on the in game GUI up sometime.

@stevecotton

This comment has been minimized.

Copy link
Contributor

@stevecotton stevecotton commented Nov 1, 2019

In games that just have a "new" button, then I'd expect that to start with tutorial-ish scenarios. Putting the button for new players on the first screen, I imagine something like this as the first screen:
wesnoth_start_with_campaigns

I think add-ons shouldn't be part of "content creation", there will hopefully be many more players installing UMC than authors creating UMC.

For tip-of-the-day, instead of next/previous let's just have a "more" button that opens a help page with all of the tips in it.

@CelticMinstrel

This comment has been minimized.

Copy link
Member

@CelticMinstrel CelticMinstrel commented Nov 2, 2019

I can see the reasoning for mixing the tutorial into the main campaign menu, but I'm not sure I like the idea for some reason...

@nemaara

This comment has been minimized.

Copy link
Contributor Author

@nemaara nemaara commented Nov 2, 2019

In games that just have a "new" button, then I'd expect that to start with tutorial-ish scenarios. Putting the button for new players on the first screen, I imagine something like this as the first screen:

So for a lot of games I've played, the tutorial is actually merged into the first campaign, or is a very small thing off to the side (like in a side menu). I'm not sure I like it at the very top of the campaign list either, but I don't think it needs a separate button on the main screen either. Maybe in an ideal case, we'd merge it into AToTB or TSG. For now, the easiest patch solution might be what you have there?

You have a point about addons, so maybe we'd leave that as its own button, and move the map editor to a smaller icon somewhere else?

Tips of the day, I was more thinking the box is way too large, but the buttons are a bit irksome too. I originally thought about having them be arrows instead, but it could be easy enough to just put all the tips in the help menu. Biggest issue for me is that it just takes too much space and importance away from the actual "buttons that do something" in the other menu.

Of course all of this depends on how easy it is to work with the GUI code, which as I understand it, is pretty difficult to manage right now.

@CelticMinstrel

This comment has been minimized.

Copy link
Member

@CelticMinstrel CelticMinstrel commented Nov 3, 2019

What about giving the tutorial a separate button in the campaign window rather than including it in the campaign list? Not sure that's a good idea either, but I feel that it'd be a little better than showing it in the campaign list…

I'm not sure if merging it into AToTB or TSG or even AOI is a good idea? First of all, that means anyone playing those campaigns (at least on easy) are forced to interact with the tutorial (though I suppose there could be a skip option…). Also, there's no way the current tutorial could be shoehorned into any existing campaign, and by trying to do so, I think the lessons would be harder to cover in a logical manner without detracting from the campaign. Maybe you could come up with a totally new tutorial as part of an existing campaign; I'm not sure how that would compare to the existing one…

For tips of the day, I think I like the idea of making it smaller and changing the buttons to arrows, like you often see on the front page of websites to scroll between several banners.

@nemaara

This comment has been minimized.

Copy link
Contributor Author

@nemaara nemaara commented Nov 3, 2019

What about giving the tutorial a separate button in the campaign window rather than including it in the campaign list? Not sure that's a good idea either, but I feel that it'd be a little better than showing it in the campaign list…

I'm not sure if merging it into AToTB or TSG or even AOI is a good idea? First of all, that means anyone playing those campaigns (at least on easy) are forced to interact with the tutorial (though I suppose there could be a skip option…). Also, there's no way the current tutorial could be shoehorned into any existing campaign, and by trying to do so, I think the lessons would be harder to cover in a logical manner without detracting from the campaign. Maybe you could come up with a totally new tutorial as part of an existing campaign; I'm not sure how that would compare to the existing one…

Yea I'm with you on both of these. I'd rather have a small button in the campaign window than have it appear in the campaign list, but not sure how hard that is. Merging it into TSG or AToTB would be not that trivial, and I've never been a fan of forced tutorials personally (though there's a lot of them that I can think of...). The most elegant solution (ideal case) might be finding a way to merge the tutorial into a novice campaign, but that's probably not practical for now.

@CelticMinstrel

This comment has been minimized.

Copy link
Member

@CelticMinstrel CelticMinstrel commented Nov 3, 2019

Well, moving it to a small button in the campaign screen would I think be a pretty easy change, if we want to do that. At least, the implementation of the UI change in the UI would be fairly simple; some of the C++ logic for the titlescreen and main game loop would probably have to be tweaked to support it, though, and I'm not quite sure how hard that would be.

@stevecotton

This comment has been minimized.

Copy link
Contributor

@stevecotton stevecotton commented Nov 3, 2019

Please would you make a mock-up of this? I think the tutorial is essential for first-time players, so I'm not following how making it a small button helps.

@nemaara

This comment has been minimized.

Copy link
Contributor Author

@nemaara nemaara commented Nov 3, 2019

Hmm, I have to admit I'm pretty biased against tutorials, but I think you have a point that the tutorial is something players should be able to find easily. I think a small button is still okay as long as the placement is good. Maybe a button in the red circled area (same size as or slightly wider than "OK and "Cancel")? It could also be further to the left, i.e. left aligned with the campaign text as well (blue circled area).

image

P.S. The reason I don't personally like the tutorial in the campaign list is that it's not a campaign. It doesn't fit in the same category as literally the other 18 things on that list.

@stevecotton

This comment has been minimized.

Copy link
Contributor

@stevecotton stevecotton commented Nov 3, 2019

I think you're underestimating the importance of the tutorial. Try playing the first scenario of AToTB, on easy, as if it's your very first go of Wesnoth and no-one has told you:

  • that you can recruit
  • the day/night cycle and its effects
  • anything about villages
  • what any of the numbers in that sidebar mean

I think you'd probably get to the second scenario, assuming your leader didn't die, but with a lot less troops than a rookie would need to win the second scenario. However, considering @CelticMinstrel 's feedback about watching rookies die on Tutorial S02, I'm probably being overly optimistic.

Conclusion: if your UI guidelines would make new players more likely to play AToTB than the tutorial, then your UI guidelines aren't right for this situation.

@nemaara

This comment has been minimized.

Copy link
Contributor Author

@nemaara nemaara commented Nov 3, 2019

That's true, in which case couldn't we have a popup that says something like "You have not yet played the tutorial. Are you sure you want to proceed onto the first campaign?" (a lot like the "do you want to delete this save pop up"). Then the player can disable that message if they want, or it can be autodisabled upon completing the tutorial.

Strike the above, coming up with ideas on discord:

The tutorial at the top of the menu could work, then just have it be hidden after completion. Alternatively, we could have it even in a separate box on its own (like in the circled red area below, with the campaigns menu condensed to the blue area). Then, once it's completed or the first campaign is completed, the tutorial gets hidden away and you see the normal screen again.

image

@sigurdfdragon

This comment has been minimized.

Copy link
Contributor

@sigurdfdragon sigurdfdragon commented Nov 6, 2019

What about putting the tutorial at the top of the campaign list, but spicing up its title & description a bit?

Call it "Combat Training" or "Battle School" or something
The battle dummy icon seems good for that.
Some sort of catchy portrait/scene for the description section.

A description like:
Learn the basics of fighting and then foil an orc attack.
(Tutorial, 2 scenarios.)

Maybe also have a lock on the rest of the campaign menu until the tutorial is completed?

@AI0867

This comment has been minimized.

Copy link
Member

@AI0867 AI0867 commented Nov 6, 2019

Maybe also have a lock on the rest of the campaign menu until the tutorial is completed?

That's a good way to annoy people who have played the game before, but are using a fresh install.

@nemaara

This comment has been minimized.

Copy link
Contributor Author

@nemaara nemaara commented Nov 6, 2019

What about putting the tutorial at the top of the campaign list, but spicing up its title & description a bit?

Call it "Combat Training" or "Battle School" or something
The battle dummy icon seems good for that.
Some sort of catchy portrait/scene for the description section.

A description like:
Learn the basics of fighting and then foil an orc attack.
(Tutorial, 2 scenarios.)

Maybe also have a lock on the rest of the campaign menu until the tutorial is completed?

I like the first idea! Gives the game and the tutorial some personality/style. Having it be pseudo-canonical would also make me feel a bit better about having it be in the campaign screen.

Locking the rest of campaign menu until the tutorial is completed is counterproductive, especially for people like me who usually skip tutorials. Having it be at the top is probably good enough.

@nemaara

This comment has been minimized.

Copy link
Contributor Author

@nemaara nemaara commented Nov 15, 2019

Okay hi everyone, I've been working on the titlescreen a little bit and have somewhat of a prototype. I'm putting this here now for comments.

image

There's still a couple things to do like:

Remove the right side panel and make the buttons text-only (but much larger and maybe with a different font).
Make some of the buttons (preferences, quit, editor) into large, translucent icons in the top right.
Move around/improve some smaller elements like the info button in the lower left and version string.
Find a new home for tips of the day.

@CelticMinstrel

This comment has been minimized.

Copy link
Member

@CelticMinstrel CelticMinstrel commented Nov 15, 2019

What about moving the tips of the day to a separate modeless dialog that appears centred on top of the title screen when you first launch the game? The debug clock could perhaps be used as a reference for how to do a modeless dialog.

  • Add a small "tips" button somewhere in the bottom row (along with the info and language buttons) which toggles the tips on and off.
  • Have a "don't show again" checkbox in the tips, if checked the tips will never show on startup.
  • If that checkbox isn't checked, tips show every time you start the game, but not when you return to the titlescreen (probably some flag is needed to track this).
  • Tips dialog still has a next button in it, but help button is moved somewhere else (perhaps a ? button somewhere near the screen's edge).

Which reminds me, you forgot to include the help button in your screenshot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.