What Makes A Great Mobile App

Prepared by:Nick Watt & Christine VelenResearch & UX

User Experience

What makes a great mobile app?

worldwide sales of devices that can

download apps is expected to increase from:

• around 165m this year

• to 423m in 2013

most mobile applications are used only

intermittently, so they must be especially

easy during initial use

UX is important for mobile apps

Communications

Spontaneous

Geo-sensitive

Short periods of use

Focused activity

good apps play to the strengths of mobile

2

3

4

5

1

Mobile App Usability Heuristics

Principle 1: Visibility of app status

The app should always keep users

informed about what is going on, through

appropriate feedback.

Example: Shazam provides feedback as it

analyzes audio. More common feedback

use cases: progress indicator when sending

content (e.g., email) or receiving

content (e.g., latest news).

1

Mobile App Usability Heuristics

Principle 2: Match between app & the real world

The app should sense the user‟s

environment and adapt the information

display accordingly.

Example: Google App delivers location

sensitive results . Other apps change the

display orientation from portrait to

landscape when appropriate, e.g. iHandy

Level.

2

Mobile App Usability Heuristics

Principle 3: Emergency exit

Users often choose app functions by

mistake and will need a clearly marked

“emergency exit.”

Example: “Cancel” and “x” buttons are

common iPhone controls. In the case of

“immersive” apps, e.g., video or games,

users should be able to tap to access

controls and/or exit.

3

Mobile App Usability Heuristics

Principle 4: Error prevention

Eliminate error-prone conditions or check

for them and present users with a

confirmation option.

Example: Spell check has option to reject

the recommendation. The example below

is from the built-in email app.

4

Mobile App Usability Heuristics

Principle 5: Consistency & convention

Users should not have to wonder whether

different words, situations, or actions mean the

same thing.

Example: Kindle uses standard controls for

bookmarking and showing progress. See

Apple’s iPhone Human Interface Guidelines for

the complete set of standards.

5

Mobile App Usability Heuristics

Principle 6: Recognition rather than recall

Minimize the user‟s memory load by making

objects, actions, and options visible.

Example: The Yelp “Recents” tab stores

businesses recently visited. Maps also uses

“recents” to enable users to access past

addresses and routes. Other ways to reduce

recall (& minimize typing) include remembering

the app’s last state as well as previous search

results.

6

Mobile App Usability Heuristics

Principle 7: Flexibility & efficiency

Reduce the number of steps required by

anticipating user needs and enabling

customization.

Example: Maps app on iPhone anticipates

users will need to define if travelling by foot,

car or train and displays options on map

screen instantly

7

Mobile App Usability Heuristics

Principle 8: Aesthetic & minimalist design

Screens should not contain information

which is irrelevant or rarely needed.

Example: Photo controls are hidden when

not in use. The same is true for other

immersive apps such as video and e-

readers, e.g. Kindle.

8

Mobile App Usability Heuristics

Principle 9: Help users recognise & recover from errors

Error messages should be expressed in

plain language precisely indicating the

problem and solution.

Example: Epicurious explains what content

may be available when users are offline.

9

Mobile App Usability Heuristics

Principle 10: Help & documentation

Help should be focused on the user‟s task,

list concrete steps to be carried out, and not

be too long.

Example: Ocarina provides contextual help

upon startup. The Sketches app has new

user tutorials that are both playful & helpful.

10

mobile UX design considerations

Images & Colours• Use images sparingly (they should not substitute text)

• Careful with image metaphors & consider including text labels

• Use colour intelligently – to differentiate content

• Contrast is key

• Check with accessibility e.g. colour blindness

Content & Layout• Organise content into logical sections

• Organise according to the user‟s relative importance

• Group similar settings/items together

• Check for landscape and portrait configurations

• Minimise scrolling

Consistency & Feedback• Use consistent navigation, colours & language

• Display error messages in plain language

• Ensure users know why things have gone wrong

• Notify users (after 3 seconds of no activity)

• Include progress indicator

• Provide an option to „cancel‟ an action

Navigation• Ensure it is easy to return to the „home‟ screen

• Must be easy to „exit‟ at any point

• Ease of „discoverability‟

• Active areas need to be large

remember the users

• who are they?

• why will they use the service?

• what value will they gain from the content/service?

• when will they interact?

• will they have time to wait for content?

• what type of behaviour can we predict?

testing

Concept testing &

participatory design

Prototype testing

& usability

What is a Paper Prototype?

• Format can be hand-drawn sketches or screenshot printouts

• Fast & cheap way to incorporate user feedback into designs

What types of issues can you explore?

• Do they understand the key concepts?

• Do they understand the terms in the UI?

• Does the flow match what users expect?

• Does it provide the right level of information?

• Is content organized as users expect?

• What additional features are desired?

tools

http://www.appsketchbook.com http://www.balsamiq.com

http://www.graffletopia.com/

thanks!