Share

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;

Slide-out menus

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.

Early sidebar concepts for Sportsbook

Early sidebar concepts for Sportsbook

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

Dark site - The approach here was to provide a 'lighter' sidebar for the darker sites

Dark site – The approach here was to provide a ‘lighter’ sidebar for the darker sites

Light site - And conversely here, a 'darker' sidebar was implemented for the lighter sites

Light site – And conversely here, a ‘darker’ sidebar was implemented for the lighter sites

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;

  1. Nav menu opens
  2. 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.

Compatibility

Be wary of compatibility. From a tech perspective it’s a good idea might be to use pure CSS for the animation with JavaScript as a fallback. And from a UX perspective, when dealing with older smartphones and/or depreciated browsers, implement a basic version of the sidebar concept on a basic version of the site.

The entire site is duplicated on a

The entire site is duplicated on a “basic” version which doesnt support javascript and provides basic functionality

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.

I disagree

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

DAD-Sportingbet-Anim-Sidebar

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.

…and finally

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 selec­tion of design articles spindlelegs gen­er­ated for the creative community out there. Please con­tact us fur­ther to dis­cuss if your brand really wants to ben­e­fit from this new immer­sive expe­ri­ence here: info@spindlelegs.co.uk

If something has peaked your interest. Please leave a comment below.