User-Centered Mobile Design 101
Editor’s Note on April 28, 2021: Some additional details about mobile design have been added – the updated notes appear in bold, italic text below.
It’s 2021, there’s no excuse for your website not to be mobile-friendly. It’s time to design with mobile in mind.
Mobile design is important because smartphones have become the norm for many. It seems everyone is taking advantage of having full access to the web on the go. If your website isn’t mobile-friendly, you’re cheating yourself and your customers. So, what do you need to know about your viewers to give them the best possible mobile experience?
It’s important to keep in mind mobile users are different from desktop surfers. Take a moment and think about the reasons your website might be accessed on a mobile device. As a website owner, it’s your responsibility to adapt your website design to be mobile-friendly to help users achieve their goals as quickly and efficiently as possible.
To be mobile-friendly, it’s best that you design with mobile in mind first before beginning the rest of your website. Mobile-first design is sketching, prototyping, and designing for the smallest screen first (most likely a phone) and then scaling up to larger screens. If you can’t do that, no worries. Do your best with the tips below to make improvements to your mobile design.
Keep it Simple
Your mobile design should be simple. Don’t overthink this. The mobile user is typically task-focused. Keep the user interface clean and direct to aid in navigation. If you have trouble visualizing what this means for your web design, use the basic information architecture you used to create your website as a jumping-off point. Ask yourself the following:
- What can be eliminated to create more space?
- What is most important so that it’s front and center to lead users comfortably through your website?
- What type of information do users need on the go?
Tablets and Smartphones
Smartphones are with us everywhere we go. We rely on them for information at an instant. In contrast, tablets are often used in the evening as entertainment devices. If someone is at home lounging on the couch with a tablet in hand, a more immersive experience might be wanted than someone using a smartphone while out shopping. This is important to consider when thinking about your mobile design.
When your website display is the size of a tablet screen, you might have free reign to develop a fascinating interface that creates a really wonderful experience for the user but beware of trying to maintain that experience as you scale down to smartphone screen size. When people are out and about they most likely will only be visiting your site if they have a specific need at that moment. These needs are also time-sensitive.
Optimizing for mobile may include things like:
- Using icons instead of text to save space.
- Trimming the bloat. Select the most important things you want your viewers to see and eliminate clutter.
- Stay away from pop-ups. Pop-ups are already super annoying on a desktop or laptop screen so imagine how frustrating they are when they fill up the entire screen on the viewer’s device.
- Don’t let your font size get too small. It may be tempting with such a small screen to adjust the font to a smaller size, however, 12-14 pixels is still optimal.
If you already know your users will often be using your website on their mobile devices, it may be optimal to design the entirety of your website with a “mobile-first” mentality. This way your website on a large scale will be both minimalistic and more familiar to the user when scaled down to mobile.
Mobile Design Testing
Always remember to test, test, and test some more. The more you test, the more likely you are to find any small bugs which will undoubtedly drive users away from your website. Plus, you want your users to have the best experience possible while navigating your website. Want to know how responsive your mobile design is? Test it here.
The user experience should and always will the number one priority when it comes to design. To learn more about what we can look forward to with UI and UX, check out Staci’s blog, “The Future of UI and UX” on the Roundpeg website.
got a web project?
We’re happy to help you design a website that is as effective as it is functional.
Let's talk about chatbots. You know, those things you sometimes message on different applications...
What is your favorite social media platform? Remember the days when there was just Myspace? Oh,...
There is such a thing as a bad call to action The goal of any page on a website, whether it's the...
The Web Navigation Bar (aka, the nav & primary menu) The web navigation bar is a custom-built...