mobile ux workshop general assembly
TRANSCRIPT
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/
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!