Table of contents
Mobile design
Mobile has taken over desktop when it comes to web browsing. Because of this, the importance of user-friendly mobile interfaces is bigger than ever. In this recipe, we will go from a bad design to a user-friendly design in a couple of steps. This will help you make better design choices when developing for a customer!
The bad and… the ugly?
This is a design created for the fictional webshop Lux, a company that sells luxury items. If you take a look at this design, you will notice that it’s pretty clean. But a good-looking design doesn’t always check off the criteria of a good design. Take a moment to think about what could be wrong.
Don’ts
First, we will discuss the don’ts when creating a design for your application. We will take everything step by step. There will always be imperfections to the design, so keep thinking about what else could be wrong!
Custom gestures
Gestures are a fun way of working with a touch screen. It might result in faster interactions, but keep in mind that there is a learning curve to custom gestures. Don’t replace UI elements with them, but give the user the choice.
In our example, to go to the wishlist page, you have to swipe left. Some people might not know this and never get to this page. However, we can solve this by adding a tab bar that contains all the pages you can go to. Let’s combine this with the swipe gesture.
No labels
Do you see anything wrong with the newly added tab bar? You probably know by now that the heart means wishlist and the user icon has something to do with your account. These are assumptions that our brain makes when seeing those icons in this context, but it’s not always that obvious to other users. This is why labelling preferably all icons is necessary. As you can see, our tab bar is way clearer now and it will gain more engagement!
Hamburger menu
The first thing developers do when they have to make a website responsive is adding the hamburger menu, but this is not always the way to go. Let’s take a look at our Lux application. There are only three buttons in our hamburger menu and there is plenty of space in our header. If you don’t hide them behind a button, people will be more tempted to go to one of these pages. This doesn’t mean that you should never use a hamburger menu, but you should try to make the most important features easily accessible.
Hidden search bar
Another thing that decreases engagement, is hiding the search bar behind a button. If you show it all the time, you will see more users using the search functionality.
Unreadable text
Contrast
More important than ever because of the smaller screen sizes is the readability of text. First of all, you need enough contrast between the text colour and background colour. You can use a tool like Colour contrast to check the contrast between the foreground and background. For the Lux webshop, I used a grey colour that is too light for a white background. To change this, I played around with the colour contrast tool. I decided to go with a darker greyish-blue tone to grey out text and a dark grey colour for text that should be readable.
Typeface
You need to choose a typeface that works well in multiple sizes and weights to maintain readability and usability. Test your typeface before using it and avoid typefaces that are complicated. In the Lux design, the typeface ‘Stalemate’ was used for the title of the items. This might look fun, but on smaller screens, it can be harder to read handwritten fonts.
Font size
Don’t use font sizes smaller than 12px. You might be tempted to make your font small on mobile screens, but readability always goes before design!
Clutter
We have a better design than what we started with, but it is still not perfect. A famous saying by Antoine de Saint-Exupéry can be applied to mobile UX design:
“Il semble que la perfection soit atteinte non quand il n’y a plus rien à ajouter, mais quand il n’y a plus rien à retrancher.“
which translates to: “Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.” Get rid of everything you don’t need.
Especially when designing for mobile, you have to focus on what matters. In our example, there is a log out button. Logging out is not something people will often do and there is also an easily accessible account button available. That account page also has the log out functionality, so let’s just remove the log out button from our header. Another thing we can remove is the informational text on the sales items. You can click on the item to read more, but there is no need to put this information on the overview.
Forms
When you want to sign up to Lux, you have to fill in a form. Since we are creating this application for mobile, we have to take a lot of things into account when creating this form. Let’s see what our form looks like right now…
Typing too much
One thing that can scare off mobile users from filling in forms is having to type too much. There are many ways to still get the same information but make it easier for users to fill everything in. You can use their contact information to prefill forms and avoid them having to fill in their name, e-mail, phone number, etc. for the hundredth time. Next to that, you can make sure the right keyboard comes up when they click on a certain input. For example, when they are filling in a phone number, you show the number keyboard. That way, they don’t have to change it themselves. This saves a lot of time. Also, something that a lot of apps are starting to do right now, is using the camera for input. We can use this here for the credit card number. People just have to scan their credit card with their camera and the number is automatically filled in. Next to that, you can change text inputs to different inputs that require less or no typing. Here, I added a date input for the birth date and a custom selector for the categories.
Input labels
Imagine filling in a form and having to go get your credit card. When you come back, you might have forgotten what the other input fields were about. In our example, the labels are placeholders which disappear when you’ve entered something in them. The best practice for input labels is to show them at all times, because yes, people tend to forget what they were for.
Break tasks into chunks
If you have a large form, break your tasks into chunks. You can create a step-by-step form. Do this by asking the main questions in the beginning and then asking questions that don’t seem as important in the following steps. Make sure people always know why they are filling in certain information and make sure the info you’re asking for is needed at that time. In the Lux example, I changed the form so that people can sign up with just an e-mail address and a password. I added an explanation for why we need the other information and why it benefits the user to fill in a second form. I added a save button so they can always fill it in later.
Too small buttons
There are two major rules when it comes to using buttons on a touchscreen. The first rule is that you need to create controls that measure at least 7–10 mm so they can be accurately tapped with a finger. Nothing is more annoying than having to tap very precisely with a smartphone. The buttons on our newly created form are very small and you might accidentally click on the wrong button.
Rule number two is that you need to ensure that there is the right amount of spacing between tap targets. Our tab bar looks alright, but I think a little more spacing between the buttons won’t hurt.
Underlined links
For desktop applications, we use a lot of underlined links. On mobile devices however, it’s best to avoid them. Usually, links are replaced with buttons for mobile applications, because they are way easier to tap on with a touch device. And, one more plus: they grab your attention.
Do’s
Put focus on what matters
The title says it all: put focus on what matters. Try to think about what you want users to do. For our webshop, we want people to buy the Sale items. There is no reason for the titles to be this big because we don’t want the customer to interact with them. We can make them smaller and make sure the Sale title stands out a bit more. Now, our focus goes to the sale items instead of the two titles.
Provide feedback
Provide feedback on interactions so people know what’s going on. Take a look at what happens when someone adds something to their bag:
You had to look very close to see there was something added to the bag, right? Using a pop-up message here will grab your user’s attention and make it clear the action was successful.
Another example for which you need to provide feedback is when a page is loading. A small loading animation is enough, but don’t let people think they’re stuck on a page when things are loading. It might annoy them and even let them leave your application!
Source: LePraveen Tewatia on Dribbble
Thumb position
Source: Ranjith Manoharan on Dribbble
Always keep the thumb position in mind. Know what spaces on your screen are more easily accessible with the right thumb and use them for your advantage. What buttons do you want people to click on? As you can see on the thumb zone-chart, our bag is in the red zone. We want people to buy stuff, so we might have to swap the places of the account and the bag button.
Tips
Our Lux design is finished. Nothing is ever perfect, but we should always strive for perfection. Here are a few more tips to help you with designing an interface for mobile!
Test your design
In our example, we swapped the bag and account icon because we want people to easily go to the checkout. According to our thumb zone-chart, this is the right positioning for our goal, but in practice, this might not work. This is why you should always test your design. The numbers are what counts. You might have done everything by the rules and still not have the engagement you aimed for.
Optimizing flow
A user flow is a sequence of actions a user has to perform to acquire different functionalities in your app, such as set up, purchasing an item, … Users might find the perfect app but still delete it because there is friction in one of the flows. You can use the Page flows website to learn from proven products!
Source: Leanplum
Onboarding
Good onboarding is essential and shows the value of your application. A very effective way of onboarding is having an interactive tour of your app. This is a fun and easy way for people to get the hang of using your application. One thing to keep in mind is that your onboarding doesn’t make up for the fact that some things just may not be clear to your users. The app should still be easy to use, even when you’ve skipped the tutorial.
Source: Habitify app
Response time
One thing that is especially important to keep in mind for us developers is the response time. As technology progresses, people get more impatient and they might leave your app if they have to wait longer than 2 seconds for something to load. We directly influence the response time, and we should continuously improve the quality of our code. It’s also interesting to take a look at your target audience. We are used to fast internet connections in Western Europe but other countries might not have that privilege.
Source: Google/SOASTA Research, 2017
Prioritize features
You can pack your app with thousands of interesting features to make it more attractive to potential users. While you might have a lot of traffic going to your application, a lot of users will be scared off by the overload of features. The rule is to prioritize the features your application needs and omit the nice-to-haves.
Asking for permissions
Your app might need permission for using the user’s location at some point. Don’t ask for this the moment they open your application. The user might not get why they have to give you permission and will decline the request. That would mean they have to go back into their settings later. Instead, ask for it whenever they are starting to use the feature that needs location and provide a clear message as to why you need this permission.
Source: PlotProjects
Tooltips
Tooltips display information when a user hovers, focus on or taps on an element. Most commonly, a tooltip is shown on hover, but there is no such thing as hover on a mobile device. You can show it on long press, but people might not even know it’s there.
Source: Material Design
Ask yourself the question: do I really need to hide this tooltip? You can show the tooltip by default or conveniently place it alongside the element you would hover over. While on large screens a tooltip might look really small, it will draw the attention on smaller devices. Another good practice for mobile is to hide it behind a hint icon. By using hints like a question mark or info icon, you can make it clear that tapping on this icon could open a tooltip.
Trends of 2020
Advanced animation
Animation can give the user feedback on their actions and add some rhythm to interactions. Advanced animations are animations that are used as part of the branding of a company. It can help you express your brand and build loyalty.
Note: A lot of people get motion sickness because of animations. There should always be a way to turn off or minimize animations in your application.
Source: Asha Rajput on Dribbble
Personalizations
Artificial Intelligence is rapidly gaining popularity and is being used in everyday applications. Apps like Spotify and Netflix use AI to recommend certain songs or movies. This way of personalization can add value to your application and might make it easier for users to find what they are looking for.
Source: Medium
Password-less login
As I already mentioned in the part about forms, mobile users don’t like to type. Because of that, new ways of logging in are coming to the surface. Popular alternatives for passwords are: facial or fingerprint recognition, sign-in links via mail or text and using key generators.
Source: Jason Zimdars on Dribbble
Dark themes
Dark themes have two essential advantages: they use less battery power and reduce eye strain. A lot of popular apps give you the choice to swap between a light or dark theme or automatically swap between those two during the day or night. Others just go all the way and embrace the dark theme!
Source: Skeleton screens
People don’t like waiting and you might have done everything to have a fast load time, but it still doesn’t feel like enough. Skeleton screens are being used by big companies like Facebook to give you a feeling of fast loading. Skeleton screens give you a general idea of what the page is going to look like in a wireframe-like design.
Source: Medium
Are we done yet?
We will never be done redesigning our website for mobile. There’s always something we could do better. You can find many more tips and tricks for mobile design online, but these key points will always help you:
- People are lazy, literally! People don’t grab their phone to write out monologues, but just type some emojis and get it over with.
- Mobile screens are really small, don’t pack everything on them and keep removing everything you don’t need.
- Have you ever heard anyone say “I’ve got fat fingers” except for when they are using a smartphone? Make your tap targets big enough!
User testing is one of the most important things to do when improving your user experience. There is always more to learn about mobile design and it is definitely worth looking more into user testing. If you’re looking for UI/UX experts to help you tackle these issues, don’t hesitate to contact my colleagues at ClockWork!
Icons on Lux prototype made by Kiranshastry from www.flaticon.com
