Universal, scalable and mobile friendly- what more could you ask for? The sidebar 3-bar icon, or ‘hamburger’ icon is also perfect for a multitude of languages, can support a growing road map of products and is global recognised. But they can also be tricky to implement, see why;
Device-agnostic, they allow players, as users are defined in this case study, to access the menu without losing their place on the screen in a manner that feels very natural to players because it is like holding onto a physical item to save your place while looking for something else. They are extremely space efficient and provide a clean layout with access to lots of content
It has been argued that they are bad for engagement, but I’ll come to that later. And as for hindering discoverability, as I also mentioned later, as long as you provide recognisable sign-posts away from the sidebar then as a UXer, you’re doing your job.
Use a recognisable icon
The traditional 3-bar icon, or ‘hamburger’ icon is used by most websites with the sliding drawer menu.
Icon design is already a confusing subject with so many different glyphs and symbols out there. By sticking with the traditional three-bar icon you give players a sense of closure because they will instinctively know (or assume) what it does. Most players are familiar with the 3-bar icon so it’s a safe bet – excuse the pun.
Two flavours; Dark and Light
The UI had to satisfy *ten* other branded gambling sites worldwide. So, the solution for consistency and for effective administration reason – was to design a dark site and a light site. All other UI element, following a successful UX stage, rolled on from these two starting points. This both gave the clients visual distinction and provided the player with a point of difference. For both stylistically and usability reasons, I designed the sidebar experience as follows;
- Nav menu opens
- A dark modal renders over the unused section of the page
So when a player opens the menu it’ll appear “on top” of the page , bring focus to either a light or dark site within the group. Also the site context cannot be selected which leaves the sidebar navigation as the only actionable item. The sidebar navigation can be closed by either tapping the 3-line icon or tapping anywhere else on the page. It’s a simple effect and follows the mantra KISS – the design blends perfectly without any major rendering bugs.
It has been noted not to have too many links in the menu. Vertical navs are perfect for large companies that have multiple links which players need to access. With over 70 sports and a growing list of features, having too many links are not a issue.
You will not satisfy all mobile browsers and here, I took the view that the ‘one-size-fits-all’ rule wouldn’t apply. Players in the gambling world use high end phones, in the majority of cases, so that was my audience.
So what’s wrong, if anything, with sidebar navigation
There is a school of thought that hiding your features off-screen is a poor mobile design choice and bad for engagement, and you should probably replace it with a tab bar or other navigation scheme.
The general public are a fickle lot, always searching for the new and the shiny. Working at the coalface, day in day-out I hear a lot…
“…more functionality, more features, our competitors are doing this and that…”
…so I needed a scalable UX solution to accommodate this. And not only are tabs at the lower section of the screen or The Tab Bar, very 2008, but they are limited to five… As mentioned, this project has over 70 sports. Overall, it is an excellent solution if you’re trying to translate a fully-featured website into a mobile one.
Make sure you do this
Focussing on Sports and Casino gambling, this site is pretty much single-purpose already (i.e. gambling), so hiding extraneous features in a sidebar makes sense. Account management , Deposit and Withdraw, plus Bets Transactions and Bonus Engine can be accessed via the sidebar as well as Sports navigation. But, and this important, Sports navigation is also served front-of-stall, right on the home page along with primary gateways to Sports, inplay and Casino. So, combatting the claim that the sidebar hides content and reduces engagement, in this situation Sports navigation is there a fallback.
Design is not full of rules, but rather guidelines for creating wonderful ideas. In mobile design these ideas need to be usable and easy to interpret on any mobile screen. Hamburger menus get a lot of flak but they’re still used a lot because they work.
Get in touch
This is but part of a selection of design articles spindlelegs generated for the creative community out there. Please contact us further to discuss if your brand really wants to benefit from this new immersive experience here: email@example.com
If something has peaked your interest. Please leave a comment below.