Understanding Mobile UX:

with General Assembly

Principles & Prototyping

“Hello there!”

DORALIN KELLY

UI/UX designer and Star Wars fangirl

“What about you?”

Hello, my name is..

What we’ll do during this workshop:

Prototyping How do I do it?

Designing for Mobile

Principles & Best Practices

Design a Mobile Site

Build a prototype

User Testing 101

You will need:

Sketch or

Illustrator

A laptop

If you don’t have either, share with someone who does! :)

Mobile Design is..

portable.

fast.

fluid.

― David Kadavy, Design for Hackers: Reverse Engineering Beauty

The user experience design of a product essentially lies between the intentions of

the product and the characteristics of your user.

“

Mobile Design B E S T P R A C T I C E S

Design for Touch

Size your touch targets and spacing right.

Use a minimum of 50px by 50px.

Keep spaces between buttons and touch targets

at least 20px–32px.

“ I H A V E F A T F I N G E R S ”

01

Design for Legibility

Keep your font size at 16pt and up.

Use web-safe fonts when designing for mobile on web.

Custom fonts can slow down page load time and not every

mobile browser supports custom fonts.

“ I C A N ’ T R E A D I T ”

02

Design for Speed

Keep your content and images light and optimised

for maximum compression.

“ T H I S I S T A K I N G T O O L O N G T O L O A D ”

https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insights03

Design for Fluidity

Avoid fixed width images. Buffer for text overflow.

Keep multiple screen widths in mind.

Designing a fluid grid creates a better user

experience for multiple screen sizes.

“ B E L I K E W A T E R - B R U C E L E E ”

04

Desktop VS Mobile

Design with APIs

Mobile devices can access user location, make phone calls,

take pictures and more. If it makes your user’s goal easier to

achieve, implement it.

“ L E V E R A G E U S E F U L F E A T U R E S O N M O B I L E ”

05

Say no to Pop-ups

Don’t do it. Nobody benefits from an additional barrier between

your user and your product the moment they land on your site.

“ J U S T N O . ”

This applies mainly to web, but for app design be careful with

pop-up notifications, make sure they’re absolutely necessary.

Be wary of bombarding your user with too much. 06

Don’t design ‘a smaller version’

Don’t do that either.

Scale and shuffle and minimise content specifically for a mobile experience.

Some things that may work for web may not work for mobile.

Cut Down on unnecessary content and make sure users can get to their

goal faster on mobile.

“ B I G S I T E S R E W O R K E D T O F I T I N A S M A L L E R B O X ”

Check out: Alternate Layouts in Adobe Muse07

Desktop VS Mobile

Don’t make users sign up first

Allow users to temporarily skip registration so that they can try out your

product first. If they find value in it they will sign up. Cut the funnel.

“ B E N E F I T > P A I N - P O I N T ”

For Example…

08

Hotel Tonight

Hotel Tonight used A/B testing to create a variant where users could complete the transaction

without having to create a dedicated account. Previously all users had to sign in before

completing a booking. They tracked the bounce rate, as well as completed transactions, and

found that discovered that making sign-ins optional actually increased bookings by 15%.

To encourage users to sign up still, they're given the option to sign up in order to save their

data to make future bookings even more painless and quick.

Keep on-boarding short & sweet

Also a big no. Don’t use long drawn video tutorials on how to use your product. Once

a user is on your app/site, you don’t need to throw your value proposition at them.

Let them try it out for themselves, but show them how in a quick and hands-on way.

If they have questions later, make sure they know where to find the answer.

“ D O N ’ T B O M B A R D T H E M W I T H ‘ V A L U E ’ ”

For Example: Slack’s on-boarding process09

Before After

Slack no longer requires new users to create a password during their signup process. Instead, they

send an email shortly after signing up notifying the user of the need to create a password.

Why this is important

One of the core tenets of user onboarding is to remove all unnecessary friction that stands between

a new user signing up and their WOW moment. While passwords are certainly foundational and

necessary for ongoing product usage, they aren’t necessary for a user to realize how Slack is going

to improve one’s life in the next 10 minutes.

Note: Slack also killed another common culprit of unnecessary friction: the email confirmation step.

http://www.appcues.com/blog/5-notable-changes-slack-made-to-its-user-onboarding-experience/

Before After

When previously arriving at the welcome screen in Slack’s application, the left hand navigation bar and

the search field were already exposed. In addition, Slack already prompted you for

desktop notification permissioning.

In the updated onboarding experience, Slack replaced the channels and search field with visual

representations and hold off on permissioning until a few steps later.

Why this is important

The most engaging products keep new users very focused on the path to success. One important way

of accomplishing this is to hide complexity and only introduce it when it is contextual to the user.

http://www.appcues.com/blog/5-notable-changes-slack-made-to-its-user-onboarding-experience/

Designing Forms & Filters

Use placeholder text and icons in singular, common forms (i.e. login forms, search

boxes or address forms) but display the labels above input forms for longer more

complex fields. Always, always strip away unnecessary forms.

Forms

Build useful filters based off of your products and what’s most important to users.

Make sure it’s easy for users to edit or clear filters and always display clearly what

has been filtered.

Filters

10

VS

Placeholder + Icons Labels

Airbnb Filters on Desktop VS Mobile

Design for Ergonomics

Other than tapping, how can users interact with your product?

i.e Double Tap, Press & Hold, Pinch/Spread, Swipe

Gestures

Transitions smooth the boundaries between application states,

transitions also help facilitate recall and prevent users from getting lost.

i.e Expand, Flip, Slide Along

Transitions

11

Design in Grids

12With a good Grid System, you can determine the most effective

placement for buttons, headlines, or images across devices.

For Example…

“ G R I D S A R E G O O D ”

Static items VS Interactive

13Make sure you make a clear differentiation between static items

and interactive functionality.

For Example, all clickable elements are COLORED but inactive fields are GREY

“ M A K E C L I C K A B L E T H I N G S L O O K C L I C K A B L E ”

Design for Feedback

14Always give a User instant feedback once they have interacted with

your design. Tell them what happens next, if the action has worked/or

failed. Don’t leave them hanging!

For Example, a button should change upon being tapped.

Give Users a ‘Thumb-Up’ after submitting a form.

“ W H A T H A P P E N S N O W ? ”

The whole form screen turns green upon confirmation of the

password change.

The ‘Help!’ button has also been disabled since it is no longer

relevant and Log In is now highlighted.

One-Size-Fits-AllU L T I M A T E L Y T H E R E I S N O

How do your users use your site/app?

E V A L U A T E

UX patterns will have to be customised to best fit YOUR user base. So make sure you understand your user behaviour,

especially when they’re on the go, on mobile.

Think through it then validate by testing with real users.

Multiple Screens D E S I G N I N G F O R

Responsive

V S

Adaptive

fluid and adapts to the size of the screen.

detects the screen size and loads the appropriate layout for it .

Responsive

Doesn’t offer as much control as adaptive

Simply reshuffles content, not always equal to good mobile user experience

Pros

Uses percentages to give a more fluid feel when scaling

Takes less work to both build and maintain

Cons

Adaptive

More work designing for multiple viewports

More work to develop and maintain

Pros

Good for retrofitting an existing site

Enables you to customise the user experience entirely for mobile

Cons

Mobile Web V S

Native App

a

Mobile Web Reach a larger audience

Runs on all mobile platforms with minimal tweaking

Instant updates

Native App Connectivity - even when Offline

Richer, more immersive experiences

Don't target one resolution.

Pick an aspect ratio, then scale your design to fit that. E.g, instead of 1280x720, target the 16:9 aspect ratio.

P R O - T I P

Aspect RatiosP R O - T I P

& 6

Create Scalable Reference Designs

Identify key features to be supported for device type groups, then create a reference design of the essential components of your product that will scale across the range of screen sizes across the group of devices by defining a

set of principles, patterns and guidelines. Don’t forget to also address different orientations.

P R O - T I P

Designing a Mobile SiteH A N D S O N !

1.

Work off of Illustrator or Sketch. (Or any other design program you’re comfortable with)

2.

Choose a webpage (preferably a fairly simple one) and redesign it in a mobile layout. Design it for your device iPhone/Android.

Ideally you want to end up with 2 pages, 1 button/CTA connecting them.

PrototypingH A N D S O N !

1.

Upload your screens onto Invision. Build your hotspots.

2.

Test it on your mobile device.

User Testing

1.

Using your prototype, take turns with others to play the role as the User and Moderator/Observer.

Do This:

The User should be swapped around from another group.

The Moderator/Observer should give the User a task to accomplish

and take down notes while the User goes through the task.

The User should talk through their thought process.

2.

Review your observations.

H A N D S O N !

Did your User manage to accomplish the task? Was it easy or challenging? How long did it take them?

Did your User get confused/stuck at any point? i.e The Moderator should ask “What are you thinking now?”

when the User appears to pause to think.

What were the barriers in the way of the User’s goal? i.e Navigation wasn’t clear enough, making it difficult to find what

they were looking for.

How can you fix the issues that surfaced? i.e Can you simplify the tasks for the User?

What did you observe?E V A L U A T E

User Testing for MobileR E S O U R C E S

Moderated in-person The Moderator runs the test face-to-face with the User.

Moderated remote The Moderator and User communicate via screen sharing software.

Unmoderated remote Software administers tasks automatically to participants around the world.

Types of User TestingR E S O U R C E S

Problem Discovery Uncover (and fix) as many usability problems as possible.

Filming Rig Allows you capture user interaction on mobile devices

during user experience tests.

Eye Tracking Understand where participants eyes are drawn in designs

and the sequences of gaze paths.

Screen Sharing Test remotely with Users via a live video feed.

https://blog.kissmetrics.com/testing-tools-for-mobile-ux/

Questions?I T ’ S A W R A P !

design@doralinkelly.ninja

@doralinkelly

doralinkelly.ninja

http://www.slideshare.net/DoralinKelly/

mobile-ux-workshop-general-assembly

B I G T H A N K S T O G E N E R A L A S S E M B L Y

Aaand we’re done!