How to Design for Mobile
Author:
Categorised In:
Share:
As more and more users move away from desktops and laptops and towards mobile devices, it’s important that we’re designing for the majority and making sure our websites and apps are accessible to all users.
We’ve all been the victim of a bad website… you struggle to click a button, use the navigation, fill in a form and it ruins your overall experience; this is definitely what we want to avoid when designing a website.
What is mobile-first design?
Mobile-first design is the process of designing your end product for the smallest of screens to focus on the overall experience for users. As mobile devices are now so common with 89.90% of people owning a mobile phone, starting with this device and then working your way up to a desktop is the best approach when thinking about the UX of your website and what you want users to see and do.
Below are 8 design tips to help you when designing a responsive website:
Design for everyone
In recent years, we have gone from small mobile devices to ones which now have bigger screens so, this needs to be thought about when designing for mobile.
For example, people with smaller devices will generally use one hand however people with larger devices will use two. You also need to factor in right-handed users vs left-handed users. If there’s a specific CTA you want users to select or a specific route you want them to take through the website, for example, select a product, add the product to the basket and checkout, you need to make sure that it’s easy for everyone to do, and not just one user group.
Accessibility
Colour Contrast
When working with colours in your design, you need to make sure that they’re readable for all users. For example, some users will struggle to read a pale green font on a white background as they will not be able to differentiate enough between the two. Usually, when working with lighter brand colours within website designs, they’re best used in backgrounds with a darker font over the top, such as black or dark grey.
I find the Colour Contrast Checker useful to check if your content can be read on specific background colours and what colours work best together.
Have you thought about your Tap Target?
The Tap Target is the action taken by a user when selecting a CTA on a mobile device. Some users experience physical difficulty when interacting with technology, and websites in particular so it’s our job to make it as easy as possible!
The tap target needs to be at least 44px as advised by WCAG 2.0 and Google Web Fundamentals for optimal clickability.
Mobile prototypes
Creating mobile-specific prototypes and asking users to test them can help you to finalise your design. You can set specific tasks for users (add a product to the basket, find the contact form, complete the calculator) and see how easily they achieve the end result, all on their mobile devices.
You need to be checking things like;
- How easily did they locate the CTA button?
- Did they get confused or frustrated at any point?
- How quickly did they complete the task?
Having a prototyping phase during your project is always a benefit and the data captured should be utilised to achieve the desired end result – a website that users can actually use!
Typography sizing
Some people believe that big fonts on a mobile divice are the way forward however, you only have so much room on the screen so you don’t want to take it over with overly large copy. Font sizes from a desktop to a mobile device differ so make sure that you’re using the appropriate size for the device at hand.
This is also the same for body copy font. You’ll find on some websites that the main copy font can be quite small, however, you want to make it so that a user can easily take in the information without having to zoom in or move the phone closer to their face!
When designing desktop first, you obviously have more space for a larger mega-menu design and can fit more items in the menu. However, when you take the mobile-first approach, you can prioritise the items that need to be within the main menu and what can sit under a sub-menu. As you have limited space on the screen, you want to make sure everything fits and the user can easily select the page or CTA they want to.
Keep the navigation simple so that users can move between pages on your website and you’ll have returning visitors. Users find it frustrating when they know what they want to click on but because there is so much within the menu, it’s too cluttered and they can’t see what they’re looking for.
For example, when on a jewellery website looking for earrings, you want to quickly find the ‘earrings’ category and browse the products. However, if the category is in a list of 20 other categories, it’s not as straightforward for the end-user to find the category they’re looking for.
Breathing space
White space is your best friend… use it! So many people think that you have to cram every little detail onto one screen because users don’t like scrolling. This has changed! Users are now so used to scrolling on a mobile device, you have the space to let your content breathe.
When designing for mobile, ensure you leave enough breathing space around content and images so everything isn’t stacked on top of each other. Don’t be afraid to show a little background and to have a few areas where there is no content or imagery between sections to show division.
Data input
If the main action on your website is to complete a form, for either purchasing a product or making an enquiry then you need to make the data capture process as quick and easy as possible. Here’s a couple of things to think about:
- Don’t make the fields too small, consider the tap target and allow the user to select the field to enter the data.
- Make sure everything is clearly labelled. Sometimes on forms, the labels are so small above each field that it’s not clear to the user what data is required.
- If you’re asking for multiple steps of data, show the user where they are in the journey so they don’t become frustrated with how long it’s taking to checkout or submit a request.
- Keep the design clean. White input fields and clear labelling is key – keep it straight to the point and user-friendly.
Show feedback on actions
On desktop, you would usually add effects to actions such as rollovers to make it clear to users that there is an action to take. However, as we know, you can’t add hover effects to mobile although they are still really important.
When a user interacts with an area/section of the website, they need to know that something is happening. There’s nothing more frustrating than clicking on a button three or four times before the page loads because you think nothing has happened.
So when a user clicks on a button, show the change of colour and when a slider is used, show the animation between the two. It makes a huge difference to a user and makes their experience a positive one.
These are just some very simple things to take into consideration when designing your next project, using the mobile-first approach. If you’re interested in working with the Embryo design team, get in touch today or take a look at some of our most recent projects!
