Mobile UX Workshop General Assembly
8 likes1,129 views
The document provides an overview of best practices for designing mobile user experiences. It discusses principles like designing for touch, legibility, speed, and fluidity. It also covers topics such as using grids, differentiating interactive and static elements, providing feedback, and testing prototypes with users. The workshop will include designing a mobile site prototype, building it, and doing user testing to understand how real people use the design.
Mobile UX Workshop General Assembly
- 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! :)
- 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
- 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
- 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!