Big Ideas for Small Screens: 6 Tips for Better Mobile UI Design
Need help with mobile UI design? In this article, we’re going to discuss some key techniques you should know to improve design for mobile devices.
1. Less is more
Remember that when designing for mobile, the user will more than likely be viewing the information on a smaller screen. In a lot of cases, your audience will also be viewing the landing page whilst on-the-go so the design elements and copy should be carefully selected. Give the user the important information they really need to know, so that the UI can stay simple and easy-to-use.
Your mobile UI should not include every detail that the desktop UI does, since you are working with much more limited space. Key information should be included, and copy can be consolidated to pack a punch in fewer words.
2. Consider context
Next, it’s a good idea to take a deeper dive into the persona of the user.
Where are they most likely to view your landing page or app? In that common situation, is it loud in the surroundings, dimly lit etc?
Thinking about the context that the user will be accessing the UI in can help you make better design decisions. For example, if it’s likely they’ll be searching for your brand on a busy commute, including lots of video in the UI might not work the best.This small tip can help you to really get inside the mind of your target audience and create a design that genuinely functions how it needs to for the user, rather than just looking great.
3. Remember to design for touch
Unlike desktop, mobile UI will need to be designed for touch. Almost all handheld devices will be touchscreen, and so you’ll need to design each element to account for this. One way to do this is to give plenty of space around buttons so that it’s easier to navigate for the user, helping to eliminate the chance of accidental button clicks.
You’ll want all text included on the UI design to be clear and easy to view, and it’s good practice to make sure that gestures are intuitive to help make the customer's journey smoother.
4. Design for different screen sizes
Remember that there are a huge variety of different devices available, and your UI design needs to look perfect no matter what screen size it’s viewed on. Spend time to make sure that the design is responsive to different screen sizes, and that the adjustment between screen sizes is smooth.
5. Prioritise content
Not all the content on your desktop landing pages needs to make it onto the mobile screen. Like we covered earlier on, you’re working with a lot less space on mobile and the user is likely to be on the go when viewing it. So, make sure to curate the most relevant content for your mobile site. Keep copy concise to improve readability on a smaller scale.
Like designing for desktop, you’ll also want to make sure that the size, colour and font of the content is working. The font needs to be readable on a smaller scale, and you’ll want to make sure that the colour of the font contrasts well enough against the background.
6. Test, test and test again!
Lastly, never forget to test the design yourself. Spend time carrying out different searches and functions on the design to help identify areas that might not be working optimally. Let your team test the UI design, and encourage honest feedback on areas that seem confusing or aren’t at first easy-to-use. Testing the design is the very best way to make those all important final changes that will make the user-journey more enjoyable.
Of course, like all designs, over time with the data you collect from all your customers, you’ll continue to make improvements to the design.
