Workshop for General Assembly on Understanding Mobile UX: Principles & Prototyping

1. Understanding
Mobile UX:
with General Assembly
Principles & Prototyping

2. “Hello there!”
DORALIN KELLY
UI/UX designer and Star Wars fangirl

5. “What about you?”
Hello,
my name is..

6. 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

7. You will need:
Sketch
or
Illustrator
A laptop
If you don’t have either, share with someone who does! :)

8. Mobile Design is..
portable.
fast.
fluid.

9. ― 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.
“

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

11. 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

12. 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

13. 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 Insights
03

14. 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

15. Desktop VS Mobile

16. 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

17. 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

18. 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 Muse
07

19. Desktop VS Mobile

20. 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

21. 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.

22. 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 process
09

23. 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/

24. 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/

25. 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

26. VS
Placeholder + Icons Labels

27. Airbnb Filters on Desktop VS Mobile

28. 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

29. Design in Grids
12
With 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 ”

31. Static items VS Interactive
13
Make 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 ”

32. Design for Feedback
14
Always 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 ? ”

33. 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.

34. One-Size-Fits-All
U L T I M A T E L Y T H E R E I S N O

35. 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.

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

37. Responsive
V S
Adaptive
fluid and adapts to the size of the screen.
detects the screen size and loads the appropriate layout for it .

38. 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

39. 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

40. Mobile Web
V S
Native App

41. 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

42. 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

43. Aspect Ratios
P R O - T I P
& 6

44. 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

45. Designing a Mobile Site
H 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.

46. Prototyping
H A N D S O N !
1.
Upload your screens onto Invision.
Build your hotspots.
2.
Test it on your mobile device.

47. 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 !

48. 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

49. User Testing for Mobile
R 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.

50. Types of User Testing
R 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/

51. Questions?
I T ’ S A W R A P !
design@doralinkelly.ninja
@doralinkelly
doralinkelly.ninja

52. 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!