Mobile internet has more than just exploded in popularity in recent years — in many countries, it has completely taken over.
Take China, for example, where 98 percent of the people who use the internet do so on mobile.And there is a global trend towards favouring online shopping, with around 1.92 billion people predicted to make an online purchase in 2019. And, by 2021, mobile e-commerce will contribute to roughly 67.2 percent of e-commerce sales.
It is official: the way we interact online has changed. Hands are the new navigation system. And this doesn’t just apply to mobile phones as tablets, iPads, and certain laptops all require touch-screen interaction. Web designers need to do more than think about how our pixels look: they need to also imagine how they will feel in someone’s hands.
Enter UX design or user experience design: the process of analysing ease of usability.
Mobile device use has paved the way for innovate design and a focus on usability. See “How We Hold Our Gadgets” by Josh Clark for more insight on the topic.
How it works: With the introduction of the smartphone, hamburger menus solve the issue of limited, valuable space on smaller screens. The majority of internet users will have encountered the hamburger menu at some point (see the three-lined icon below). Simply click on the icon, and the menu expands. It can be tucked away just as easily.
Why it works:
How it looks:
*Note: Facebook have gone with a tab bar to avoid hiding all the menu items. The hamburger menu is used as a functional way of including additional menu items in one easy-to-find place.
As most mobile devices are held in both hands and the content is largely navigated with the thumb, there has been some debate over the most effective placement of the hamburger menu. Before I go any further, let’s take a look at the images below.
Seems pretty obvious which sections to avoid, right? Even on smaller smartphones, our fingers can easily reach the bottom ⅔ of the screen but require us to adjust our grip to access the top ⅓. That being said, hamburger menus should be placed in a section of the screen that is easily accessible but not intrusive (generally speaking, you want a menu to be accessible but not directly underneath your thumb). Although there is an ongoing debate about the placement, the majority of apps opt for the lower right-hand side.
The evolution of the screen and a shift towards mobile devices has encouraged web developers and designers to reevaluate user experience. Although there is still some way to go, a lot of the research has already been done, and there are clear steps you can take to make your site more user-friendly across a range of devices. Be aware that not all internet users have a keyboard and mouse readily available, and so you’ll need to adapt your layout and design with this in mind. For an idea of where to start, check out the tips above!