Even though it’s almost a year as Google declared that mobile-friendliness is a ranking must, this fact still does not always change the way websites look on a mobile for the better. Mobile web design still changes and flawless mobile web experience becomes more and more of an obligatory condition rather than a competitive advantage, so just keep up a pace. In this article, you will find a checklist of UX design principles that your users will highly appreciate and great mobile web examples that will provide you with a source of inspiration.
Mobile’s influence on digital business is definitely on its rise especially speaking of mobile commerce which has grown fast and is nearing the Peak of Inflated Expectations, with opportunities expanding every year, according to Gartner’s 2015 Digital Marketing Hype Cycle. There are no signs of this trend slowing down. As business owners, entrepreneurs, or marketers we should first of all change our thinking mode into the mobile-first. And here is a list of UX design principles that will help you to keep the focus on mobile web design.
Navigation is about how easy it is for people to take action and move around your website. The key word here is easy, so thinking out how should you build mobile web navigation, do not use sophisticated approaches and elaborate words, instead use common terms to itemize a menu instead. Moreover, the visitor should understand in which direction they should go. Better to avoid symbols, but if you still want to include some, make sure they are expressed unambiguously. More tips here:
- Short but clear menu items
- Easy-to-read and perceive elements
- Your most important message listed first
- Vertical orientation if scrolling is required
- Finger-friendly design of menu items
- Make clear explanations why it is better to change orientation
Our choice: Bloomberg Business
The best websites to be viewed on mobile devices prefer the approach where content is organized in a grid-like manner so that it is easily adjusted to fit various screen sizes. Moreover, think of organizing content in such a way to keep it simple once again; mind that the user needs on their mobiles may be different from what they want to see when sitting at their desks. Give them gyst, easy-to-catch pictures, minimum of details.
Here are some of the current mobile web design best practices:
- Back to top button
- Carousel at the top with the items you want to draw attention to
- Easy-scrollable content especially for information websites
- Focus user’s attention on call-to-action (CTA) – it’s the heart of your website
- Keep important content on the surface
- Use up and down scroll, not left to right
- Show content of secondary importance upon certain action taken
- Animate content to make it more fun and easily perceivable
Our choice: Mashable
While content is king, user experience is something compared to the emperor of digital everything. The way people consume your content, interact with it, and decide what to do with your brand after they’ve left your site – this is where His Highness User Experience plays the leading role. With numerous constraints like small screen size, opening of single window, and sometimes even connectivity restrictions, mobile devices have a number of unique advantages that enable us with creative opportunities to make user experience more memorable. Use these guidelines:
- Analyze & adapt to user patterns
- Personalize the experience
- Tell a story of your brand
- Foster an emotional connection
- Use phone features to supplement the traditional experience: camera, GPS, voice input, and others
- Leverage swipe instead of clicking
Our choice: The Revenant: 200 Miles By Osk Studio (U.S.A.)
Images are vital for mobile web design. Make images expandable and never make users zoom in. Minimize downloads by organizing and optimizing mobile web content. Images will make your website shine having in mind that amazing imagery content is always crucial for your mobile website. Being able to tell a story through your images would be a big plus. Interaction paired with animation used in your mobile website design will bring the appeal factor to your web resource.
Our choice: Tesla
Think of what you want a user to do on your website. Interact with your brand? Make a quick purchase? Check out updates in your product line? Decide what action you want them to make and keep in mind that irrespective of what you choose, this action will be made with a thumb, so make everything possible to make your call to action readable, clickable, and easily accessible without zooming. Sure you can’t emphasis everything due to the screen limitation but simply prioritize your targets, when you’re designing your web pages and make the most important buttons large enough to be clicked on.
Our choice: Virgin America
6. Modest Advertising
Do not let ads and promotions steal thunder of your web site, impeding users way to completion of their and your goals. Ignoring this rule can cost you loyalty of your website users. They visit your resource because they are interested in your offering, do not let them get distracted by another company. Double check it:
- Make sure promotions do not interfere with navigation
- Make ads easily differentiated from calls-to-action
- Avoid using popups
Our choice: TechCrunch
7. Site Search
Site search is vital for sites with rich content, especially e-commerce ones. It helps mobile users find what they’re looking for quickly and on-the-go. As users of a mobile web usually come to your resource with a specific goal in mind, site search will only help them to reach their goals promptly whereas you will increase conversion rate. Just keep in mind these tips:
- Make search visible
- Ensure it works properly
- Use filters like price, relevance, top sellers, etc.
- Give alternative suggestions if user provides no input
- Ensure site search usability (offer autocomplete and spelling corrections)
Our choice: MailChimp
The ability to quickly contact a company or provide a feedback on your offering is essential. Mind that users may have either issues or questions they expect someone can help them with. So provide them with such an opportunity in a timely manner. Click to call feature, contact us form, email address should not only be displayed on your mobile website but they should be easily detectable and convenient to use.
Our choice: McDonald’s
9. Test, test, test
It’s our final point, but in fact it’s so important that probably shouldn’t be explained. We’ll just leave it here.
Mobile is a red-hot topic and it will only continue to heat. The Web changes fundamentally every day and so does the mobile web design. A lot of companies now decide on making one version of their site for desktop and another for mobile. Others choose Responsive Design, a mix of fluid grids and layouts, flexible images, and grateful use of CSS. Here at Pixetic, we believe that no matter what your client needs – mobile website, desktop web portal or a mobile app – excellence and style that is what always comes in handy. These 9 UX design principles help us make the most for a better user journey.