I didn’t want to just say that the home menu has problems, without also providing potential solutions, so I created an example version of how the home menu could be improved, as well as explanations on what I changed and why. Here’s my example of how the menu could be improved from 1.3:
Alt (showing alternate possible tabs and story button):
*note: Some things were hard to make look transparent. Some things, like the Quest Pass boxes, would ideally be transparent, like they are right now in-game.
*note2: The oval for story was hard to make into an oval, so just pretend it looks like a proper one. Ideally, it would also have a transparent background from the stage itself, like the 1.2 story background did. Also, ideally the ‘Stage Info’ button would have a border, but it was too hard to do for just an example mockup, so just pretend it’s there.
*note 3: I couldn’t manage to get some of the colors (such as the background of the ‘custom’ header) quite right. So if a color seems a bit off, it was likely because I couldn’t get the color I wanted, and not because I meant it to be that way.
Changes:
Top Nav
- Added a gold border to the menu icon, like the wallet has
- The menu is important, so it needs something to distinguish it from the other buttons better. Also, the menu and wallet buttons are different from other ones in that they open drop-down menus. So I decided to use gold borders to distinguish buttons with drop-down menus.
- Moved ‘Swap Hero’ button to left of level
- This gets used so much it makes sense to have it nice and close to the left side of the screen, where it’s easier to find (things at the ends of rows are easier to find than things in the middle).
- It’s also in a more similar location to where it was before with the old menu, which is nice, since it used to be in a very good spot and I often find myself reaching for that exact location instead of further right to the current location.
- Made the level bar slightly bigger and added exp progress numbers to it
- The new location of the level bar is pretty, but it was so small it lacked functionality. These changes add functionality while still keeping its prettiness.
- Also, exp progress numbers were badly needed even before, so this is a good opportunity to include them.
- Added text to all icons
- Makes understanding what they do a lot easier
- Added ‘Friends’ and ‘Shop’ buttons
- These are two things that people want to access often, and this lets them access those easily (something to note is that ‘Shop’s 1.3 location in the bottom nav isn’t intuitive and is harder to access, and ‘Friends’ is buried in the main menu with no quick access, and this fixes both of those issues). They’re also things that notifications would be useful for (daily gift notice for shop and friends request notice for friends), so this lets them have notification icons.
- Moving the shop frees up a slot in the bottom nav too.
- Made icons in nav bar slightly bigger and moved notification number onto icons slightly more
- It’s easier to read bigger icons, and moving the notification number allowed for the icons to be bigger without it going off the screen while not negatively impacting the look.
- Shrunk currency and added a border around it
- This makes it look better and easier to read, and give more space for other things in the top bar
- I made sure the currency numbers would fit to the max amount of digits that it can be currently
- Made the background of the nav bar darker
- It was too hard to read in 1.3, as there isn’t enough contrast between the icons and the background, so I made the bar darker, like in 1.2, again.
- Moved Offer Merchant to just below the nav bar on the left side, where the ‘swap hero’ button was in 1.2 and added label to him
- People are almost always going to want to look at their offers from either the home screen or the shop, so it doesn’t make sense to have him in the top nav. Here he takes up some of the space that would otherwise be wasted due to the protruding end of the level banner, and he’s still in a prominent, easy-to-find position, while not being in the way.
- A different color background or a border could be used to make him stand out more if necessary (gotta get people to buy offers I know).
note that the grayed-out buttons are still hard to read. Ideally, they would be brightened to show up better
*note also that there’s still room in the top nav for a help icon on tabs other than the home one. Here’s an example of how it would look:
Main Screen Area
- Moved offer merchant here, see above
- Quest Pass and the new events go on the left side instead of the right (just stuck extra Quest Passes in for now as an example).
- These are visual things that you want to look at but not tap a lot, so that makes the left-hand side good for them.
- Added level to Quest Pass box and made title and icon bigger
- Level is one of the important bits of info that’s missing currently, so it needs to be included. Making the title bigger makes it easier to read.
- Made chests icons be bigger again and extend most of the way across the screen
- Need to be closer to 1.2 size to be large enough to be seen properly
- No more scrolling to get to invisible chests, like 1.3 makes you do!
- Made gear and spell icons square instead of round, moved them to upper right, and revamped their look.
- Gear and spells are important parts of the game, and this is the only place in the game where you can access them. That means that the way to access them needs to be prominent on this screen. Making the icons square makes them catch the eye more (sharp, crisp edges cause the eye to stick on that thing more while round edges cause the eye to travel over and past them). The spell book and sword and shield icon help give a simple but noticeable visual too.
- It’s also important for them to be on the right side of the screen, within easy reach, as they are on the short list of most used buttons in the game.
- Changed gear button back to say ‘Gear’ and ‘Gear Score’ rather than only ‘Gear’
- I found the change confusing and believe the second word (‘Score’) is necessary.
- Added Story shortcut back to the home, with a new round icon and redone content
- The story shortcut was important to have for how easy it made navigation. The devs clearly wanted a simpler, cleaner design for the home screen, but it shouldn’t come at the expense of usability. However, I did try to strike a balance between usability and looks with the new looks of the story shortcut. The oval design is more minimal than the square, while still providing lots of room to put information.
- I included the chapter number, chapter progress, stage progress, enemy score, and a way to get more info, as that is all essential information. It was a bit hard to get all of that info in there, so hopefully it’s still readable.
- I made the stage info into a button with text instead of a question mark, as that is more understandable. Question marks are usually used for help, not for more info.
- One thing that’s missing is the battle button, but I figured that was fine, as it would be pretty clear that clicking/tapping anywhere on the button would take you to that story battle. Also, sometimes the next task in the story is a conversation, not a battle. However, I did make an alternate version of the story button that includes a battle button and restructures everything else to fit. It can be seen in the second image.
- Added events button back in in the upper left
- Wasn’t exactly sure where to put this, but its inclusion in this screen is important for ease of access, so it should be there. In the location I put it in, it doesn’t get in the way of anything, but is still there when it’s needed. It’s unfortunately on the left side of the screen and not the right, but that’s the best place I could come up with for it, as the right side of the screen has too much going on for it to be there easily.
- Moved custom nav button to be part of Battles tab instead of having its own tab and gave it a title to show what it was instead. Shrunk sides of ribbon to not expand past corner of diamond. Changed orange color to blue.
- It’s important for accessibility that ‘Battles’ is the rightmost tab in the nav tabs, and all of the custom shortcuts are found on the ‘Battles’ tab anyway. So making it part of the ‘Battles’ tab makes sense and improves accessibility, while also leaving more space in the bottom nav.
- Shrinking the ribbon is important in order to fit the button properly in the bottom right corner without it extending off the screen.
- Where I have ‘Custom’, the name of the choice would be displayed. Note that I just have the title here as an example, and there are a lot of better designs that could be used for it.
- The orange draws the eye too much and makes it hard to focus on other parts of the screen. A more muted color would be better. Here, I picked blue as an example for the title (though I couldn’t get the right shade of blue to use). I didn’t change the orange of the stage name, but that should be changed from orange to something else as well.
- Added version of character from 1.3’s gear screen
- This should be the place to admire your character and look at them and spin them around, and all that other stuff. Not the gear screen.
- I kept the character centered and large, as that is one aspect of the new home screen I found nice.
- I added the character with a weapon, like in the 1.3 gear screen, to show that they can fit even when holding different weapons, if the devs want to show that off on this screen.
Bottom Nav
- Added ‘Hero’ tab back in and changed it to ‘Home’
- This is your home base, so it’s important to be able to navigate back to it from anywhere with a single click/tap.
- It’s fine as ‘Hero’ but I think ‘Home’ makes slightly more sense
- Removed Shop and included it in top nav
- see that section for details
- Added ‘S’ to ‘Quest’ tab to make it ‘Quests’
- Preparation for the day when this game has more quests than just Quest Pass. When it does, this tab can be used for all quests.
- Added ‘Multiplayer’ tab
- The ability to access this tab quickly is important to not keep fellow players waiting, and the visibility of this tab will encourage people to play multiplayer.
- Removed custom tab and made the custom stuff part of ‘Battles’ tab instead
- see section above for details
- Added dividers to make tabs more visible as tabs and made highlighting for active tab cover all of current tab, not just the label for it.
- Highlighting is a bit of a strange shade of orange, since I couldn’t get the color right, drop shadows would have to be added to make the tabs look properly 3d, but the idea is there.
- The tabs did look pretty good before, but this makes it more clear which tab is active, which follows the principles of design better.
*note: there’s an alternate version of the tabs that I show in the second image
Conclusion
So that’s my example, as well as my reasoning for changing what I did. Let me know what you think!