Download as PDF, PPTX
Uploaded byDoralin Kelly
Mobile UX Workshop General Assembly
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.
More Related Content
![Designing with Lean UX : Rapid Product Design (Handouts only) [UX Lisbon 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/uxlisbon2014designingleanux-handouts-140604100514-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Mobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
- 1. Understanding Mobile UX: with GeneralAssembly Principles & Prototyping
- 2. “Hello there!” DORALIN KELLY UI/UXdesigner and Star Wars fangirl
- 5. “What about you?” Hello, myname is..
- 6. What we’ll doduring 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 Alaptop If you don’t have either, share with someone who does! :)
- 8.
- 9. ― David Kadavy, Designfor 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 ES T P R A C T I C E S
- 11. Design for Touch Sizeyour 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 Keepyour 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 Keepyour 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 Avoidfixed 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.
- 16. Design with APIs Mobiledevices 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 toPop-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 ‘asmaller 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.
- 20. Don’t make userssign 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 Tonightused 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 nolonger 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 previouslyarriving 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 + IconsLabels
- 27. Airbnb Filters onDesktop VS Mobile
- 28. Design for Ergonomics Otherthan 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 Witha 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 VSInteractive 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 Alwaysgive 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 formscreen 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 TI M A T E L Y T H E R E I S N O
- 35. How do yourusers 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 ES I G N I N G F O R
- 37. Responsive V S Adaptive fluid andadapts to the size of the screen. detects the screen size and loads the appropriate layout for it .
- 38. Responsive Doesn’t offer asmuch 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 designingfor 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.
- 41. a Mobile Web Reach alarger 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 oneresolution. 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 RO - T I P & 6
- 44. Create Scalable ReferenceDesigns 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 MobileSite 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 ND S O N ! 1. Upload your screens onto Invision. Build your hotspots. 2. Test it on your mobile device.
- 47. User Testing 1. Using yourprototype, 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 Usermanage 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 forMobile 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 UserTesting 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 ! [email protected] @doralinkelly doralinkelly.ninja
- 52. http://www.slideshare.net/DoralinKelly/ mobile-ux-workshop-general-assembly B I GT 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!