The Principles of Great Mobile Design

0
177

Share on LinkedIn


(Source: Unsplash)

Content Prioritisation – Show the Thing

Attention spans are really short, especially when interacting with a mobile device or when we’re on the move. So, it’s important to allow your customers to understand what to do within the first few seconds of interaction with your site or app.

When designing a new site or experience, keep User Interface (UI) elements to a minimum. Simple designs keep users engaged, more confident and more likely to convert.

Only display essential content and functionality that will help your user move through the process. The limited space available on a smaller screen makes every additional element you add overwhelming or in some cases confusing. Secondary content should be available on secondary and tertiary levels. Menus should have progressive disclosure and simple terminology so as not to confuse your users. To further reduce clutter, use iconography instead of text wherever possible.

Prioritize content and remember that notifications for new content should appear without interrupting the primary converting metric.

Appropriate Use of Colour

The use of colour across your UI is incredibly important on any web site or app, however, it’s especially important on mobiles and tablets with the more limited screen real estate. Key Call to Actions (CTAs) should contain their own color that stands out from everything else on the page. This reduces the risk of getting distracted and disappearing down a rabbit hole – instead lighting a clear path for your customers to take and take off on the right path. This isn’t isolated to mobile, but it is of particular importance on mobile journeys.

Consider Device Capabilities (and Limits) When Designing Functions

e.g. gestures, scan card, AR, pinch and zoom

Cookies are common-place on sites now, but utilising this to provide a better experience on your site will vastly improve customer experience. Whether it’s a persistent basket or basic personalization, you can provide a more personal experience to your customers.

Our own research has shown the vast majority of users will generally just accept cookies as a part of the site without reading any more about it.

Also think about the information the browser/device already possesses such as name, numbers, addresses etc. Auto-fill on your sites will drastically improve the usability of your site.

There is also the ability to use push notifications that can be used to pull back users that you may have previously lost. This gives you a pro-active channel in which you can communicate directly without having to overcome inbox filters.

Core Operating System (OS) Functions

(as of 2018)

There will be instances where you can use specific OS behaviour where relevant. For example, do you want to design an in-page dropdown, or would you rather use the built-in OS behaviour? (e.g. iOS provides a scroll wheel at the bottom of the screen).

It’s common for web sites to introduce complex or unnecessary solutions to address a users issue on the page. It’s now important to consider common functions built into smartphones such as gestures (e.g. swipe and pinch to zoom). These are now common behaviours that users understand. Through our own research, we actually see users trying to perform these actions as a matter of course, and any sites that either don’t allow them to perform this function, or doesn’t include the option at all, cause frustration to the user.

Phone numbers should be clickable within the device. Utilizing this functionality within your site improves the overall usability, reducing the potential for friction between you and your customers.

Android and Apple Pay are also becoming more prevalent across sites and this should be used more commonly for faster transactions. In a study by pymnts.com, we saw that there are still hurdles to overcome. However, the main reason many don’t currently use Apple Pay is purely through forgetting to use it, or users being unsure as to whether or not it is accepted by the site.

IOS


(Source: Pymnts.com)

There is a slightly different story when it comes to Android Pay, where there has been a much lower adoption from retailers.

Android

The adoption of both platforms is increasing however, and as users become more comfortable with them, more will adopt it for superfast transactions – making big strides on optimizing checkout conversions. A report actually showed that the UK was adopting mobile wallets at a faster rate than our US counterparts, therefore businesses should be jumping on this opportunity [1].

The same applies to newer functions that are now becoming commonplace, such as card scanning and Augmented Reality (AR). These technologies deliver more personalized experiences, optimize the customer journey and increase the chance of conversion. Even more rudimentary technologies such as video chat (which has been around for years), has not yet been utilised to its full potential. Calling a support line in future will include video chat options. We already see doctors clinics utilising this technique, as they can reduce the need for the requirement of presenting to the appointment in person – but they can still maintain the face-to-face element that is so pertinent to building trust.

Size Interactable Elements Appropriately For Accessibility

When you’re designing a mobile UI, it’s best practice to make your targets big enough so that they’re easy for users to finger tap.

Create key CTAs that measure at least 30px in height and width, so they can be accurately tapped with a finger, regardless of hand size. This provides them with clear visual feedback that they’ve hit the right button.

The smaller the touch point on the screen, the higher the risk of a missed interaction [2]


(Source: Pymnts.com)

Consider Visual Feedback To Acknowledge Actions

Once a user has interacted with a site, it’s also worth providing some visual acknowledgement that the action has been registered. This often applies when submitting forms and loading states that show that the site or app is doing what it is supposed to be doing, and the tap has been registered.

Any delay in response to a users interaction rapidly increases the likelihood of that user abandoning the journey. Not only this, the experience will have a negative impact on the users brand perception and it reduces the chances of them returning at a later date.

Consider Ergonomics in the UI

Position Interactable Elements in Areas the User Can Reach


(Source: Pymnts.com)

When designing on mobile it’s also important to consider how the device is held. The most common way that users hold their device is to use one hand (which creates limited coverage of the screen as illustrated above). This differs only when users are interacting with media (e.g. videos) or apps that work in a specific orientation.

It’s important to keep all key actions in the green zone, where it’s much easier for the user to access without having to adjust their grip on their phone (or their seating position), to use their other hand.


(Source: This is Insider)

The other main thing worth considering is the evolving existence of the ‘notch’ on the newest handsets. This can affect the header UI, especially given that there is no regulated depth of notch across devices. Unless showing video, it’s safest to ensure your site or app begins below the main taskbar.

Ensure Accessibility of Copy (Size and Contrast)

The key to mobile typography is readability. If users can’t read your content, there’s no point in offering it in the first place. Communicating your designs in a clear, simple layout delivers your message efficiently.

The overarching strategy for optimal mobile typography is a balance between legibility and space conservation. Generally, anything smaller than 16 pixels (or 11 points) becomes challenging to read on any screen. This will, in effect, increase frustration levels to the user and also reduce conversion. Adversely, an unnecessarily large font size results in awkward breaks and hyphenation that take longer to read.

Accessing the same amount of information from a desktop, or on smartphones, requires a higher interaction cost because of screen size. Content and the UI should be designed for mobile-first, while maintaining all the necessary information. Through our own biometric testing and thousands of research sessions across the world, it is continually supported that overcrowding a small screen space with too much content will be overlooked or turn users away.

White space is also important to improve legibility and encourages users to interact with the content.

Minimise the Need to Type/Manually Input Detail

Typing on a mobile is a slow and error-prone process. It is, therefore, best to always try to minimise the amount of typing required to use a mobile site or app. Keep forms as short and simple as possible by removing any unnecessary fields.

Ask Nice Questions First

On that note, if it’s a long form or onboarding journey ask the ‘nice’ questions first like their name, email address etc, before getting into the more complex or personal questions. This allows users to ease into the journey without putting users off at the very start.

It Isn’t an Interrogation – Ask One Question at a Time

It’s also worth considering presenting one question at a time, with a clear progress bar so users aren’t daunted by lots of questions. Human cognition can only cope with a limited number of tasks at one time efficiently, so it’s important to nurture them through rather than throwing everything including the kitchen sink and a spatula all at once.

Consider Device Type

While we talk about mobile principles, it’s also worth noting the usage difference between mobile and tablet and the ways people interact with these devices. Users on mobile will spend much less time interacting with an app or site compared to a tablet, therefore it’s important to consider the information you show for each breakpoint. You can afford to display more information on a tablet than you can on a mobile without overloading a users cognition.


(Source: Smart Insights)


(Source: Consultancy UK)

Summary

Great mobile design doesn’t happen by accident. Users expect to be lead simply, and enjoyably through their mobile journeys, and frustration occurs if this isn’t provided. The key principles of great mobile design need to be considered in order to maximise your successes and minimise your failures in this increasingly competitive market.

Make sure you consider your audiences short attention spans, and design accordingly. Utilise colour – especially in the context of your CTA’s. Consider device capabilities and limitations and core Operating System functions.

Pay attention to element size (again, especially in relation to CTA’s), and incorporate a level of visual feedback to reassure the user that their desired action is being acknowledged and worked on. Think about ergonomics in the UI, and decide how best to present your copy on the page with appropriate sizing and contrast.

When it comes to leading users to complete forms or questions, remember that minimizing the typing or input detail is recommended, and start with the easier questions so as not to deter them from persevering through the form. You may even consider visually serving the user with just one question at a time to encourage form completion.

Finally, don’t forget to consider device type – as tablets are a popular form of site or app usage and interaction, as well as mobile.

By applying the techniques discussed in this article, you will be gearing your site or app for greater success on mobile. Never has good UX been more important, particularly relating to mobile usage. Not only is minimizing frustrations of the user of the utmost importance, but delivering a simple and enjoyable interaction with your site or app will aid in your overall success and customer satisfaction.

Alan Clark
Alan is a Senior UX | UI Designer, and CRO expert at Space Between. He is passionate about biometric UX testing and analysis methods, and how they related in the context of eCommerce Marketing. www.spacebetween.co.uk

ADD YOUR COMMENT

Please use comments to add value to the discussion. Maximum one link to an educational blog post or article. We will NOT PUBLISH brief comments like "good post," comments that mainly promote links, or comments with links to companies, products, or services.

Please enter your comment!
Please enter your name here