With the explosion of mobile devices over the last few decades, it’s more important than ever to factor them into our design process when creating digital products; be that native apps, mobile sites, or infographics and PR material. Globally, 2017 was the first year that mobile overtook PC, and we saw more minutes worldwide spent on mobile devices than PCs. Whilst here in Europe, PCs still have a slight edge, the mobile market is following this same trend, and we are edging closer towards mobile devices being the most common way of accessing the internet.
With that in mind, it becomes logical to think about mobile-first design and the constraints that come along with accessing the web on a small screen. Gone are the days of simply shrinking down websites so they fit on mobile screens, forcing users to constantly zoom in and out and fumble their way through sites. Without a mouse or keyboard and a much smaller workspace to work with, we need to accommodate our designs for the future and think about mobile-first design.
NAVIGATION
Working our way around mobile content easily is something that is often taken for granted. While users will rarely compliment websites or apps for being easy to navigate, as soon as it becomes hard to get to where you want, frustration can soon see users abandoning the use of an app or website.
It’s important to ensure we are using the correct navigation system for each individual product, and implementing them in a way that makes it easy to see where you are, to get to where you want to be and, if needed, get back to the previous location.
For products with a small number of content or tools, the easiest way to do this on mobile is through using a tab menu. Often situated at the bottom of the screen, this allows users to easily access the most commonly used content. A great example of this system is when you want to make a call on your phone – on iOS we tap the phone icon, and then there is a menu along the bottom screen area, allowing you to access favourites, recent calls, contacts or type a number in. All these options are easily accessible and simple to use, allowing us to make the call we want, often with only 3 or 4 taps.
Sometimes the site or app we want to create simply has too much content or options for a tab menu to be feasible. On top of this, having all the options on screen would take up a lot of room, turning any attempt at a landing page into one huge menu screen. The solution here lies within off-canvas menus. These are fantastic for when you have a lot of navigation options and need to tuck them away until they are required. Often found on shopping sites, news outlets or anywhere with a much larger amount of content, they tend to take the form of the hamburger icon. Three lines, usually in a top corner of the screen, which when clicked will expand onto screen allowing us to scroll to the right place and navigate smoothly.
Sometimes we can use a hybrid of tabs and off-canvas menus. Commonly featured on social media apps or sites, this will allow users to easily reach their most commonly used sections but, should they need to access less used options, a hamburger menu will be situated alongside the tab.
SIZE DOES MATTER
When it comes to mobile, size is everything. For buttons and text, there are some simple sizing rules we need to follow to make sure the mobile experience is as smooth as desktop.
When sizing our text, we need to ensure that it is legible and a reasonable size on our mobile screen. The general rule of thumb for this is that body text on a mobile site or app should be no smaller than 16 pixels in size, which is around a 12pt font size. This will vary however, when creating infographics, headers or using text to emphasise or highlight information, so work with care and fully test any text on a mobile screen to ensure it is readable.
We also need to focus on ‘tap targets’. With no mouse or cursor to select our options, it is important the buttons are easily selected with our fingertips and not too small or crammed together. Both Google and Apple recommend that the minimum size of mobile buttons should be 7.6mmx7.6mm (44x44pt). Any smaller than this, and users will be more likely to mis-click. Of course, we can always go larger than this size as this will allow users an even easier selection of options, but should your product have many options you will be sacrificing page space.
MAKING INPUTS EASY
When you require a user to enter information we need to ensure that the process is quick and efficient. One way to help improve these kind of interactions is by providing users with the right tools for the job, making sure it is as simple as possible to enter what they need.
Try and avoid using keyboards where they aren’t required – on mobile you have access to sliders, pickers and stepper menus, which are often quicker, and feel more natural as a means of entering data. For example, if we were in a shopping basket on a shopping site and needed to change quantity of a product, use simple -/+ hoppers to change the value. We can also use pickers to allow quick selection of options, or sliders for adjusting values or search filters.
Sometimes, however, using a keyboard is vital to allow us to enter correct information. If this is the case, make use of the different keyboard options which are available. If our entry field only requires numbers, use the numeric keyboard as it provides much bigger buttons and will provide a more pleasant experience for the user. There is a large selection of keyboards available for use on both iOS and android, so make sure you pick the most appropriate one for your use.
IMAGERY
Jumping straight into the cliché – a picture speaks a thousand words – imagery can be a powerful tool in our mobile designs to help convey all kinds of information to users. The right image can capture the user’s imagination, create a wow factor, and be used to help compliment supporting text to deliver clear beautiful designs.
The correct image can communicate a brand’s personality, goals, and much more, whereas the wrong image can confuse users and actually have the opposite effect. Users tend to decide within milliseconds whether they like a site or product, so use images to create attractive first impressions that grab a user’s attention.
It’s important on mobile that our images are legible and simple. An extremely busy image on a small screen can lose meaning of any message it was intended to convey, so ensure our images have a clear focus which gets its point across, rather than forcing users to hunt for the message within an over-complicated picture. Use colour, size and space to maintain a focus on the main element of any image.
We also need to take into account the varying size of devices. Make sure your image scales correctly and has a deep enough resolution to avoid any pixilation. A good method to sustain image resolution is to export images at 1.5x their intended usage size, so when scaled down, they are clear and crisp.
Photography is often best used to demonstrate a certain scene or scenario, showcasing products or used for dramatic emphasis. Illustrations are more effective in conveying concepts, visualising data, and telling a story or adding personality to a material.
BE RESPONSIVE
Finally, ensure your site, app or material is responsive! Mobile screens come in an array of different sizes, so it is important that they are optimised for each and every one. At some point, we’ve probably all used a site on our mobile which wasn’t made for our screen, and pinching and zooming to navigate around is never a fun experience. So keep it responsive and cater to as broad an amount of devices as possible – by using a responsive design this will allow you to cover all bases and give each user the most optimal experience for their device.
Want to find out more about designing a mobile-first website? Get in touch with our design team today!
