Intuitive Navigation for Modern Screen Sizes


The way we interact online has changed. Hands are the new navigation system

Tourism Tiger

Tourism Tiger

8 May 2019

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.

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. 

Here’s What We’ve Learned About Optimising Websites for Mobile So Far

  • It’s all about touch. Generally speaking, users navigate with their thumbs while the rest of their hand supports the device. Refrain from putting links, buttons, and clickable text at the sides of the screen as much as possible to avoid accidental clicks away from the main page.
  • Hover features are redundant.We can no longer depend on mouse pointers and hover features to indicate whether an item is clickable, so ensure that the calls to action are clear.
  • Avoid small fonts. Unless your users have dainty, childlike fingers, chances are that tapping and navigating certain sites can be difficult. Be aware of how clickable your links and buttons are. Fonts should be larger on mobile than on desktop. Ideally, there should be no need to zoom in and out to access links.
  • Background colour matters. Fingerprints make smudges, which blur the screen. Typically, black is a no-no on mobile devices as it enhances all those greasy fingerprints and makes readability difficult in sunlight.
  • Keep it brief. Remember: mobile screens are a lot smaller than laptop screens and they therefore condense information, making it a long, narrow piece of text. Break text down into bite-sized chunks and bullet points. Avoid lengthy fields on forms. The aim is to have easily scannable content. 
  • Menu length. Screen size variations can alter the appearance of a menu, often making it impossible to display a full menu as you would on a desktop. Here is where the iconic hamburger menu comes into play.  

The Evolution of the Screen and Hamburger Menus

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.

Placement of Hamburger Menus

Why it works:

  • Simple Design.It is minimalist, intuitive, and compact -- ideal for the modern website.
  • Functional. No need for bulky, invasive menus. The dropdown menu means all items are neatly tucked away and can be easily untucked when the user decides. 
  • Fixed and Always Visible. The hamburger menu stays with you as you scroll, giving users constant access to the menu without an overwhelming menu taking up most of their screen.
  • Universal. Functional on both mobile and desktop. 

How it looks:

Facebook have gone with a tab bar to avoid hiding all the menu items.

*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. 

Placement of Hamburger Menus

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.

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.

Source: Apptimize

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 Takeaway

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! 

Emma is a Content Coordinator for TourismTiger – the premier web design agency for tour and activity operators. We build websites that sell tours. Get started on yours today. 

Chris Torres

Chris Torres

At its simplest — and it’s rarely simple — marketing is an attempt to grab and hold on to your desired customers’ attention.
Chris Torres

Chris Torres

Direct mailing can work together to complement your digital marketing strategy in order to boost your reach.
Chris Torres

Chris Torres

When Facebook first launched in 2004 no one could have predicted the effect that it would have on the public.

Let's start your journey

Whether you are an existing business or starting your journey, we will tell your story. One that inspires and sparks the imagination, turning lookers... into bookers.

Book your consultation with Chris or check out our success stories.

 

Success Stories               Speak with Chris