You’re sitting in the metro and you are reading the news. You’re waiting for your friend in a restaurant and checking out a new brand’s website you found on Instagram. You are shopping for a present for your mother on an online shop. Our phones have become our main source for gathering information, communicating with others, and purchasing our products. This is why we recommend your business to design your website or application with mobile responsiveness in mind.
Mobile user experience: do’s and don’ts for a responsive design
Having a mobile responsive design is critical, this is because many people will scroll through and use the mobile version of your app or website before using it on their desktop. However, designing a mobile-friendly website can be different from designing the desktop version. We will discuss a few do’s and don’ts when it comes to responsive mobile design.
Let’s look at your website
Our free video audit will take a look at your website and the UX-design of your website. We will send you a short video with an analysis from one of our talented team-members.
Do’s
When designing your mobile website/app we recommend you to always conduct research, keep it simple, and focus on making text readable
1. Do research first
Before designing the mobile version of your website or application, we advise you to first conduct research and a competitive analysis. Research how your competitors designed the mobile versions of their websites and applications and see what you can learn from this. Step into the shoes of your users; what kind of content they expect to find and how they will interact with your app. Keep in mind that you are not your user, you are probably more familiar with your application and/or service/product than they are. Therefore, you always need to design the application with a ‘new user’ in mind and understand how they will perceive it.
2. Keep it simple
Mobile design should be about simplicity. Including too many features can become overwhelming, which will decrease usability. This is because a mobile screen is smaller and often used in situations where people are on the go. Therefore, we recommend designing a mobile version that is easy to use. Make sure that the steps to get users to your desired action, such as purchasing your product or service, are user-friendly and very simple. Remember: everytime you add elements to your website design, you also add more complexity for your users.
3. Make text readable
As mentioned above, the phone screen is smaller than a desktop screen. Therefore, we would recommend to always keep the font size to 11 points minimum. You want your reader to be able to read the text on your website/application from a typical reading distance, without the need to squint their eyes. We advise you to also pay attention to the colors used in your text, this is why for text we would recommend to use black letters. If you want to use another color, always test the readability on different screens.
Tip: designing your website in multiple languages can increase the usability of your website, read more about it here.
Don’ts
When designing your mobile website/app we recommend you to always avoid too many fill-in areas, to keep in mind that your first version doesn’t have to be perfect, and that you don’t want to replicate your desktop version but rather investigate what an effective mobile design is.
1. Avoid too many fill-in areas
It is very important to minimize the need for users to type text on your mobile website/application. This is because writing on a mobile phone can be a slow and error-prone process. On top of that, mobile phones are often used in situations where people are on the go. Therefore, we recommend minimizing the fill-in areas where people have to provide information. Ask your readers only what you really need to know and remove any fields that are unnecessary.
2. It doesn’t have to be perfect
Your first version does not have to be perfect. In mobile design you can best focus on prototyping and testing. There are techniques that designers use to iterate and optimize the website/application that they are designing. One of these techniques is the rapid prototyping technique where you create, review, test, refine, and iterate. This process enables you to learn fast and implement the research results quickly. This technique allows you to launch your website more quickly and learn along the way what works best for you and your users.
3. Don’t replicate your desktop website or app
It might sound easy to replicate your desktop website or app directly into a mobile version. However, we do advise to look at mobile responsiveness from another angle. Most of the time, your users expect different interaction patterns and other elements on your mobile app/website. Design works best if the expectations of your users are met, simply because their brains are already used to seeing a certain design pattern on their mobile devices.
Mobile UX design: key principles and trends
Now we know what to look out for when designing the mobile version of a website or application, we will look into three key principles and 2021 trends when it comes to Mobile UX design. We have seen that online education is booming, that asking good questions is key for high performance, and that planning for an ever-changing future is smart. We will also discuss two design platforms that could benefit the design process.
1. Online education
The years of 2020 and 2021 have pushed many people from all over the world to work and study online and from their homes. The pandemic has fast-forwarded the process of online education and we can definitely see that this is a trend that will be developed further. Learning a new skill or working towards your business goals has never been easier with a lot of information readily available. A trend in UX design, when it comes to online education, is to make it easier for every individual user to track their progress, learn from mistakes, and set certain goals. A one-on-one experience that will make the user feel valued.
2. Ask good questions
Asking good questions is not a trend, since it has always been important. However, we do want to emphasise on this. We do believe that if you ask more questions, you will improve your emotional intelligence as you learn how different people react and provide you with information. Improving your emotional intelligence, in return, makes you ask better questions. This is important when designing your mobile website/app because it will enable you to better understand the wants and needs of your users.
3. Plan for the future
Designing is a time-consuming process that can be made easier with the right tools. We recommend scrolling through Screenlane for inspiration on how other people create mobile versions of their website and app. We also recommend Figma if you want to design certain elements of your website/app yourself. You can use both platforms if you want to create a moodboard to explain and show your thoughts on the design process. Agencies such as ours can help you put your thoughts into a beautiful and user-friendly design.
Bonus
Designing is a time-consuming process that can be made easier with the right tools. We recommend scrolling through Screenlane for inspiration on how other people create mobile versions of their website and app. We also recommend Figma if you want to design certain elements of your website/app yourself. You can use both platforms if you want to create a moodboard to explain and show your thoughts on the design process. Agencies such as ours can help you put your thoughts into a beautiful and user-friendly design.
Do you want to learn more?
Do you want to learn more about website design or get a better understanding on mobile responsiveness? Reach out and get in touch today and book a call with us. We’ll be happy to assist you in further growing your business.
