Case Study: Designing a new mobile navigation
The UX process behind designing our mobile menu.
When given the exciting task to design the new website for GAMINGbible, one of the major points I wanted to focus on was the mobile menu. I’m not a fan of the hamburger menu and I’ve seen many users grow frustrated after being forced to scroll up and through many layers of content to get where they wanted. These two annoyances gave birth to GAMINGbible — a completely new style of mobile navigation.
Step 1: Research
In true UX fashion, I began with research. What is out there, what are the pros and cons of the existing menu styles, and how can they be improved?
The obvious choice would be the hamburger menu. We’ve all seen it, we’ve all used it, but no one seems to question it?! Personally, I’m done with the hamburger menu. It was a quick fix and we can do better- so we should do better. Scrolling through collapsable layers of lists takes time. Scrolling to the top of the page to select said menu takes time, even clicking an arrow to jump to the top of the page takes time.
I knew I wanted this new menu to be visible on the screen at all times. This led me to my next alternative: Tabs. These work really well on apps and again, as horizontal scrolling filters. I opted for this on GAMINGbibles’ secondary navs, both on the page and in the menu. But realistically, using tabs for this entire menu was a no-go, because there is too much content to fit in to make this style work, therefore making it less attractive than the hamburger menu.
Live chat icon : Hover bottom in the corner, non evasive to user.
I peered beyond the menus and researched hover buttons such as live chat and sticky ads. I found icons that followed users down the page — such as DuoLingos practice icons — to be useful and non-intrusive to the content. This made me consider keeping the menu as a button, rather than a full bar across any part of the screen (why take up real estate when you don’t have to?) Afterall, I want people to see the menu, but it will never be as important as the content on the page. I needed to think outside of the box and create something completely different to what I could see on other apps and websites. Eventually, this led me down a different path of research…
Gaming research
Some creatives tell stories of their best ideas coming to them in moments of meditation, whilst on a peaceful walk or in the shower. Mine came to me mid-Tekken fight whilst screaming profanities at my housemate, which could not be more apt for a gaming site.
I looked into the various gaming screens and their nuances. My favourites were the playstation and xbox homepages because I liked the way the user could scroll both horizontally and vertically with ease. Therefore, I needed to adapt and transfer TV multiway scrolling onto a mobile screen.
Taking this into consideration, I decided to put the menu in the bottom-left corner because this way, it didn’t interfere with scrolling and allowed easy reach for the users’ thumbs. Similarly, it allowed me to place my multi-scroll function left to right, across the bottom of the screen.
Wireframes & Prototypes:
This was the interesting part. How was the menu going to open? Could it be full screen?
No, because I wanted to avoid taking the user to a completely new screen. The purpose of the navigation was for it to remain part of the journey, not a breaking point between pages. Therefore, I created individual buttons which at first, were only represented by imagery. But this proved to be bad UX, for two specific reasons:
Reason 1: the users were unable to match the icons to pages, therefore a prompt underneath was necessary.
Reason 2: SEO — without a description of each page, the menu won’t rank as highly on google.
SEO importance: From Ed Watkinson (Head of SEO)
“A while back Google switched to “Mobile First indexing”. They moved away from using the desktop versions of websites as the “main version”, instead, using mobile versions of the site as the key, ranking website. One of the most important factors in SEO is internal linking, in particular those links within the primary nav as they are seen as some of the most (if not the most) important links on a website. Therefore, it is essential that our highest priority pages (ie. our category and sub category) pages are linked to and from the mobile nav.”
Simplifying the list was key to help users with category breakdowns and to prevent decision fatigue.
The piece de resistance:
One of my favourite, and most thought-out sections of this menu is the visible secondary nav. Built in for when filtering via console, this was the first time I’d designed or seen a menu like this. Naturally, I was intrigued to test this out to see how people reacted…
Reactions :
1. Where is the menu?
This was the biggest hurdle to overcome. Afterall, what is the point in designing a new menu if no-one can find it or recognises it as a menu? At first, this was a result of the menu icon being too small.
Solution: Increase the size of the menu and add drop shadow to UI highlighting this is a clickable asset.
2. Thats cool, wait why’s it fallen off the screen?
This was a build issue that was once on the top “Feature”. However, the menu was under the fold meaning the users couldn’t see it.
Solution: Show the tops of the icons when below the fold to highlight there was more on the menu. An alternative was to place the icons’ pop up above the fold however this became problematic the the order of the menu and showing the user what page they were on.
3. I don’t like green, it’s too bright.
That’s right, GAMINGbible at one point was going to take on The Hulk in its fluorescent complexion…
Solution: Thankfully our design team amended the colour pallet to a much more acceptable range of warm tones, saving our users from inevitable migraines that would come from such an intense UI. We also cross-checked our brand colours with contrastchecker.com to ensure accessibility for the visually-impaired. The brand colours chosen for tags have also been cross-checked to make them noticeably different to our colourblind users.
4. What we have now, Tell me what you think…
The live menu is still under testing and I’m very excited to see what we will learn from users’ interactions with it. Whilst I’m sure there will be many amendments to come in the future, that is the beauty of UX; it’s a constant fight to stay ahead of the game (literally, in this case).
Stay tuned to find out the results of our user testing for GAMINGbible.com!
Thank you for reading :)
If you would like to learn more about the build of this menu check out Jo Imlays’ blog post below:
Let’s go, gamers: how we made the GAMINGbible menu
