The three Us of mobile design: UX v usability v UI

Mobile design focuses, or should focus, on the user. This so-called user-centric design has generated a healthy obsession with the three Us: user experience (UX), usability and user interface (UI).

These terms, and the roles associated with them, are commonly mistaken and/or used interchangeably. This is not entirely unsurprising as there are no ubiquitous definitions and some overlap.

A useful way to approach this is to identify your typical mobile user and what they want to achieve from your service, then ask:

1. Did they achieve this goal? How easily/quickly? = Usability.
2. Did they find using the service rewarding? = UX.
3. How do they physically interact with the device? = UI.

Robert Gaines, a Kansas, US-based web and app developer suggests adding a fourth element visual design, which is a good idea, but it would throw an unhelpful V in with the Us.

I would also include visual design, which ensures that static visual components, including graphics and typography, are attractive. The four are distinguished as follows:

• UX is about a user’s overarching experience. It involves the analysis of how the user feels about both interfaces and processes, including sales funnels [the progression from prospect to customer].
• Usability is about how easy it is to complete a task.
• UI is about how a user interacts with a website.
• Visual design is about the appearance of static visual elements, including graphics and typography.

The four fields overlap, but in summary: UX is about emotional response, usability is about ease of use, UI is about interaction, and visual design is about appearance.

Are there examples that combine great usability with user experience?

A website I recently took note of was AMC Theatres. Not only is this website attractive and easy to use, it exhibits a unique form of on-boarding that is unobtrusive yet ubiquitous.

The “My Movie” feature makes users feel engaged while also encouraging them to sign-up for an account and share their activities on social media. This pattern takes the on-boarding funnel, often detrimental to the user experience, and turns it on its head by converting it in to an experience that customers actually enjoy using.

 

There are lots of different analogies for UI/UX/usability/visual design, but none beats the car and driving analogy (adapted from Thomas Baekdal).

A Ford Focus or a Ferrari Testarossa will get you from A to B. So the usability is the similar. But the driving experience – UX – will be (you would hope) more thrilling in the Ferrari. The UI is the steering wheel, pedals, gear level etc. Visual design is the lines, dashboard, color (any color as long as it is Ferrari red).

Depending on the size of the project, these requirements could be serviced by a team of specialists, with variety of job titles, or they could be merged into one all-encompassing role. See this job spec for a superhero in charge of mobile UX and UI design and strategy for web and app at Verizon marketing.

User Interface

The UI, or graphical user interface (GUI) or human computer interface (HCI), as it is sometimes known, governs how the user interacts with the device and the website or application displayed thereon. This includes layout and horizontal or vertical orientation; menus, including the main navigational menu – often represented by the three line “hamburger” icon; navigational, link and action buttons; text fields and forms; radio buttons and checkboxes; touch and gestures.

For deeper insight into the layouts, input controls, menus and other aspects of UI, see the Android Developer Guidelines  and the iOS Human Interface Guidelines.

N.B. these guides are for native app developers, but there’s plenty of cross over with web.

The UI designer will usually mockup the user interface for a mobile site or app using hand-drawn and digital wireframes.

Few designers or developers will use design mobile UI from scratch. Designers will use UX kits, see this collection from Speckyboy. Similarly, developers will use frameworks such as jQuery Mobile and Sencha Touch, which allows them to reuse tried and tested UI elements and layouts.

The art of the UI designer is to strike a balance between creating an experience that differentiates itself from the competition and creating a UI that is intuitive i.e. you don’t have to think about how to use it.

There is a UI saying goes: A user interface is like a joke… If you have to explain it, it’s not that good. It’s unclear who said this first, but the design below is from London-based digital designer Kyle Robertson.

Ginny Keegan, senior business analyst for a large US retailer:

The UI is a critical component. It’s like the foundation of a house. You must have a solid and strong foundation that will support the beams, flooring, walls and roof, without it your house will collapse.

It’s the same thing in mobile development. You have to start with a solid foundation architecture, database structure, security, etc. that will support the overall user experience of the site. You cannot have one without the other.

Usability

Usability builds on the UI. It measures how well the interface works in practice – i.e. is it clear which buttons need to be tapped to proceed to the next screen? Is it easy to tap the appropriate button without unintentionally tapping the display ad next to it?

But usability is much more than this. It also considers how easy it is for the user to complete their goal. To evaluate this, it is essential to identify the actual goals of the users. This is why good mobile designers obsess about use cases, user stories, customer journeys and user journeys, and so should you.

Compared with UX, usability is more easily quantifiable.

Usability is affected by:

• Fast v. slow page load times.
• Intuitive v. confusing navigation.
• Obvious, well-placed buttons v. unintuitive, ill-placed or non-working buttons.
• Large well-spaced buttons or links that are easy to tap v. buttons are too small or close together to tap accurately.
• Page fits screen, all important information and buttons are in view v. off screen to right or below fold.
• Easy to read v. illegible text
• Well-chosen and appropriately sized images v. irrelevant and oversized.
• Tap-to-call/email/map v. static contact details.
• Relevant, appropriately sized ads v. large, intrusive and/or irrelevant ads.

In the next blog we will consider how to conduct a usability test of your website. But as a taster…

The following example was highlighted at the Digital Shift conference in London, last month. One presenter complained that they started to view the UK’s 100 winning startups on a mobile device, but received full-screen pop-up ads for each (he gave up after two pages).

The interesting thing when comparing the experience on tablet and smartphone, the 100 Startups using Mobilizer is that full screen ads only appear to be served to mobile devices – ads on the tablet are less intrusive.

Must it be function v beauty?

Focusing on usability can encourage utilitarian design, i.e. minimalist, simplicity, functional and stripping out features that are simply there to enhance visual appeal and wow the audience. Though it has to be said that the best utilitarian mobile web or apps, like Scandinavian furniture, can be a thing of beauty and enjoyment.

Daniel Rowles, managing director, TargetInternet.com:

Usability is about task-based interactions and making those tasks easy to complete and intuitive. The User Experience is something broader and is the emotional connection that we have to carrying out those tasks. Was it meaningful and valuable, and was it a pleasurable experience?

Are there examples that combine great usability with user experience?

Uber is a good example due to the simplicity and effectiveness of the app design. It has a wow factor in its simplicity and it’s very intuitive.

It should be noted, however, that taxi app Uber has not yet chosen to extend the great experience of its native app to the mobile web, where the web site is no more than an advertisement for its download app.

User experience

UX is the over-arching feeling that the user gains from interacting with the mobile site (or app). It is less tangible, more individual and therefore harder to design for and to test than usability.

Commonly, usability is considered to be a sub-category of UX.

One of the best visual representations of UX is the user experience honeycomb, created by Peter Morville, president, Semantic Studios. This was originally created for web product, but each of these criteria is equally or more applicable to mobile.

Consider how your website resonates with the users for each of the following:

• Useful – will it become an essential utility that users can live without?
• Usable – is it intuitive to use? Is it easy for user to complete their goals?
• Desirable – when they hear about it from a friend, do they think: “I need that!”?
• Findable – is it easy to find when conducting a web search for relevant terms (or app store search)? Is it easy to navigate, find what you need on the site?
• Credible – is the call-to-action compelling? Will users trust the content onsite?
• Accessible – is the site easy to use by people with disabilities; such as visually impaired person using a screen reader.
• Valuable – will users pay, trade personal data, accept advertising in return for use?

Ginny Keegan:

The user experience is important to define in your strategy because it is what the user will remember the most when they use your mobile site or app. The UX is more about the emotion and psychology of the user; it’s about the feeling they get when they are browsing though and swiping from page to page.

In mobile development it is important that the user has a positive, easy and enjoyable feeling when using your product. You want them to feel a joyful emotion or happy experience and a stress free and no struggle experience.

Useful resources:

• DigitalGov 42 mobile user experience recommendations – these are digital guidelines for US government departments. Treat them as law.
• Usability.gov Basics of user experience  – these guidelines from the U.S. Health Department are not mobile specific, but very useful.

This is Part 21 of the ClickZ ‘DNA of mobile-friendly web’ series.

Here are the recent ones:

• Mobile design and the art of doing one thing well
• The essential role of wireframes and flow diagrams in mobile design
• Understanding the mobile customer journey and user journey; use cases and user stories
• Getting to grips with mobile design methods and lingo: empathy maps and storyboards
• The key ingredients of mobile design and UX methodology
• Why user testing should be at the forefront of mobile development