designing for mobile workshop - ux cheltenham november 2016

UX Cheltenham - November 2016

Designing for Mobile - workshop

Indu Kaila

UX Designer

About me

❖ Succinctly… a UX obsessive

-> “it’s all in the detail”

What is UX?

❖ ‘The UX Book’ by Rex Hartson

& Pardha S. Pyla gives a good

description

❖ UX is a combination of

designing for:

- Users’ needs

- Emotional engagement:

emotions, expectations,

perceptions & motivations

- Usability

Reference Materials - Designing for Mobile

❖ iOS Human Interface

Guidelines

❖ Material Design Guidelines

❖ BBC Future Media Standards &

Guidelines Designing: Mobile

Accessibility

❖ www.W3.org

Recommendations

❖ Additionally, ’Mobile User

Experience, Patterns to Make

Sense of it all’ by Adrian

Mendoza

Mobile - Principles (1)

❖ You cannot fit everything that’s displayed on

desktop onto a mobile screen

❖ Users’ determine the mobile experience -> do

your user research

❖ Think linear…show the user screen flows

❖ Go for a ‘Cleaner’ layout of elements

/information

❖ Recommended sizes for user interface

elements on mobile

❖ Make it easy for users’ to complete the

path/the function(s)

❖ Consistent navigation & interface elements

❖ Make it obvious on this small surface area as

to the hierarchy of user interactions

(Primary/Secondary/Neutral/Negative action

buttons/calls to action)

Mobile - Principles (2)

❖ Make use of the location utility

❖ Consider loading time/speed -

optimisation

❖ User learnability of your design

❖ Incorporate user feedback into the

design

❖ Retainability - keep users on the

mobile site

❖ Monitor usage/gather feedback to

refine the user experience:

- Quantitative: analytics, A/B testing,

user testing - timings

- Qualitative: user testing

Workshop - Think “Interactions”

❖ For example,

❖ Tap

❖ Swipe

❖ Drag

❖ Scroll

❖ Pinch etc

❖ Think page/screen flows

❖ Create connections - nothing in

isolation

❖ Screen rotation - how will the

design work

User Type

❖ User type will determine the

mobile experience -> you need

good user research

❖ User type (each will have

different needs)

- Novice user

- Intermittent user

- Expert user

Who are your Users?

❖ As part of the UCD (User Centred Design)

process, we can find this out from user

research:

- Analytics, A/B testing

- Customer comments,

feedback/queries/customer call-centre data

- Persona/Scenarios from real life

- Observing users

- Interviewing users/user testing - task

analysis

- Remote user testing

- Focus groups

- Ethnography/Field visits

-> Affinity diagrams - pull the material together

Understand the Users’ Needs

❖ You need to know what

users’ do, need and think

❖ Consider:

- Context of use

- Mental models

- Level of expertise

- Mobile Accessibility

Workshop - Design for users’ tobook attendance via mobile, ‘online training’ &‘non-online training’ courses

Workshop - The Users

❖ Corporate (new wave e.g.

Starlizard, JustEat)

❖ Corporate (traditional e.g.

NatWest)

Workshop - User Goals & Tasks (1)

❖ They need to find the range of

courses (course title)

❖ They need to find the date of courses

❖ They need to find the course location

❖ They need to find a course summary

❖ They need to find more details about

each course

❖ They will need to create an account

in order to book a course

❖ They will need to login/logout of their

account

❖ They need to filter through the courses

❖ They need to be aware of any course

price deals

❖ They will need to share course details

❖ Primary/Secondary action buttons

❖ They need to book themselves on

courses

❖ They need to book other people on the

courses

❖ They will need confirmation of course

booking

❖ They want a booking experience that

delights them

Workshop - User Goals & Tasks (2)

Workshop - User Persona (1)

❖ Personas should be

created from real life data

Workshop - User Persona (2)

❖ Personas should be

created from real life data

Workshop - The Booking Business/System Requirements

Normally you could have 100’s of

requirements (for the purpose of this

short exercise we have a few):

❖ Mobile display 320 x 480

❖ Back button is already incorporated

via the mobile device

❖ No user tutorial

❖ The few staff that work at the

business find the majority of their

time is taken up with answering

phone calls about courses. They

want to lessen the number of phone

calls they receive answering course

queries

Workshop - How the Course Booking System could be arranged

Summary

❖ Think Interactions…the linear flow…

❖ Think You cannot fit everything that’s

displayed on desktop onto a mobile

screen

❖ Think Users’ determine the mobile

experience -> do your user research

❖ Think consistent navigation

❖ More useful materials:

- ‘Simplicity in the Details‘ by Giles

Colborne

- ‘Don’t Make Me Think’ by Steve Krug

❖ THANKS for coming along…

Questions