UX Design for Mobile Apps

13,429 views

Published on

Published in: Design

UX Design for Mobile Apps

  1. 1. UX Design for mobile apps KAMIL ZIĘBA, Co-founder & Head of Product @ UXPin
  2. 2. KAMIL ZIĘBA Co-founder & Head of Product @ UXPinPREVIOUSLY: Freelancer & UI/UX Designer Grupa Nokaut S.A.
  3. 3. USEREXPERIENCEDr. Donald Norman USER EXPERIENCE
  4. 4. User ExperienceAll the aspects of how people use an interactiveproduct: the way it feels in their hands, how well theyunderstand how it works, how they feel about it whilethey’re using it, how well it serves their purposes, andhow well it fits into the entire context in which they areusing it.
  5. 5. “App users have a big app appetite, downloading about 10 apps per month on average, but they rarely use these apps frequently or for long.”Josh Clark “Tapworthy: Designing Great iPhone Apps”
  6. 6. 47% easier to use than a mobile browser46% most entertaining way to use their mobile device44% fastest way to get informationhttp://appdevelopersalliance.org/files/pages/The%20Growing%20App%20Market%20Slides%209-17-2012.pdf
  7. 7. TOTAL GLOBAL APPLICATIONS MARKET (2017) $101.2 BILLIONhttp://www.strategyr.com/Smartphone_Apps_Market_Report.asp
  8. 8. THINGS TO REMEMBER
  9. 9. IDENTIFY YOUR CUSTOMERSWho is your target audience?
  10. 10. THINK ABOUT THE CONTEXT OF USEA mobile device can be used at anytime, anywhere. Context affects the interaction between the people and the interface.
  11. 11. ON THE COUCH ON THE GO
  12. 12. AVOID “ENGINEERSPEAK”This request couldn’t be completed.
  13. 13. AVOID “ENGINEERSPEAK”This request couldn’t be completed. WTF?
  14. 14. KEEP IT SIMPLEIf your UI requires instructions - it’s badly designed.
  15. 15. 80/20Generally, 80% of app users will use just 20% of its functionality.
  16. 16. LESS IS MOREIdentify the single, most important task to your app. AND MAKE IT DEAD SIMPLE.
  17. 17. KEEP IT SAFEDefault buttons in alert boxes should favor the safest option* CANCEL DELETE ALL
  18. 18. MAKE IT BRIEF AND CLEARKeep alerts brief and clear, explain them what happened and what they can do next.
  19. 19. Role-Playing the Interaction by Stephen Anderson (http://www.youtube.com/watch?v=hkAFdIrTR00)
  20. 20. USE DESIGN PATTERNS Follow conventions and patterns to reduce thelearning curve and to make the experience more intuitive.
  21. 21. UI DESIGN PATTERNS:http://patterntap.comhttp://www.mobile-patterns.comhttp://www.mobiledesignpatterngallery.com/http://www.mobilepatterns.comhttp://inspired-ui.com
  22. 22. “When it comes to mobile forms, be brutally efficient and trim, trim, trim.”— Luke Wroblewski, “Mobile First” (2011)
  23. 23. DESIGN FOR TOUCHAreas of interaction shouldn’t be smaller than 44pt.Smaller elements = bigger distance between them.
  24. 24. DESIGN FOR TOUCHPlace most importantactions in “thumb zone”
  25. 25. CONSIDER ORIENTATIONConsider both portraitand landscapeorientations whiledesigning an interface.
  26. 26. YOUR ICON IS YOUR BUSINESS CARD“Make your icon colorful, make it memorable, make it fun, but whateveryou do, don’t make it mysterious. The app icon is fundamentally anadvertisement, and like any good ad, it has to be clear what it’s selling.”
  27. 27. WHAT’S WRONG WITH THESE DOORS?
  28. 28. AFFORDANCE Design aspect of an objectwhich suggest how the objectshould be used; a visual clue to its function and use.
  29. 29. DESIGN FOR EFFICIENCY Enable people to navigate to the most importantcontent and functionality in as few steps as possible. 1 2 3
  30. 30. ♥ DESIGN FOR EMOTION ♥“It is not enough that we build products that function,that are understandable and usable, we also need tobuild products that bring joy and excitement,pleasure and fun, and, yes, beauty to people’s lives.”— Don Norman
  31. 31. Customers care about their problems -not your solution.— Dave McClure
  32. 32. WHAT’S THE PROBLEMWE’RE TRYING TO SOLVE? Don’t try to solve a problem if there isn’t one.
  33. 33. HOW?Get out of the BuildingTalk with people, ask questionsBuild landing page*
  34. 34. IS IT WORKING?Build your “MVP” and test it!
  35. 35. HOW?Sketch itCreate prototypeBuild working demo
  36. 36. ITERATE!THINK MAKE CHECK
  37. 37. THANK YOU! ANY QUESTIONS? kamil@uxpin.com @ziebak

×