2013-02-05 UXDesignForMobileApps

UX design for mobile apps

Transcript

1. UX Design for mobile apps KAMIL ZIĘBA, Co-founder & Head of Product @ UXPin
2. KAMIL ZIĘBA Co-founder & Head of Product @ UXPin PREVIOUSLY: Freelancer & UI/UX Designer Grupa Nokaut S.A.
3. USER EXPERIENCE USER EXPERIENCE Dr. Donald Norman
4. All the aspects of how people use an interactive product: the way it feels in their hands, how well they understand how it works, how they feel about it while they’re using it, how well it serves their purposes, and how well it fits into the entire context in which they are using it. User Experience
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. 47% easier to use than a mobile browser http://appdevelopersalliance.org/files/pages/The%20Growing%20App%20Market%20Slides%209-17-2012.pdf 46% most entertaining way to use their mobile device 44% fastest way to get information
7. $101.2 BILLION TOTAL GLOBAL APPLICATIONS MARKET (2017) http://www.strategyr.com/Smartphone_Apps_Market_Report.asp
8. THINGS TO REMEMBER
9. IDENTIFY YOUR CUSTOMERS Who is your target audience?
10. THINK ABOUT THE CONTEXT OF USE A mobile device can be used at anytime, anywhere. Context affects the interaction between the people and the interface.
11. ON THE GO ON THE COUCH
12. This request couldn’t be completed. AVOID “ENGINEERSPEAK”
13. This request couldn’t be completed. WTF? AVOID “ENGINEERSPEAK”
14. KEEP IT SIMPLE If your UI requires instructions - it’s badly designed.
15. 80/20 Generally, 80% of app users will use just 20% of its functionality.
16. Identify the single, most important task to your app. AND MAKE IT DEAD SIMPLE. LESS IS MORE
17. KEEP IT SAFE Default buttons in alert boxes should favor the safest option* CANCEL DELETE ALL
18. MAKE IT BRIEF AND CLEAR Keep alerts brief and clear, explain them what happened and what they can do next.
19. Role-Playing the Interaction by Stephen Anderson (http://www.youtube.com/watch?v=hkAFdIrTR00)
20. USE DESIGN PATTERNS Follow conventions and patterns to reduce the learning curve and to make the experience more intuitive.
21. UI DESIGN PATTERNS: http://patterntap.com http://www.mobile-patterns.com http://www.mobiledesignpatterngallery.com/ http://www.mobilepatterns.com http://inspired-ui.com
22. “When it comes to mobile forms, be brutally efficient and trim, trim, trim.” — Luke Wroblewski, “Mobile First” (2011)
23. DESIGN FOR TOUCH Areas of interaction shouldn’t be smaller than 44pt. Smaller elements = bigger distance between them.
24. DESIGN FOR TOUCH Place most important actions in “thumb zone”
25. CONSIDER ORIENTATION Consider both portrait and landscape orientations while designing an interface.
26. YOUR ICON IS YOUR BUSINESS CARD “Make your icon colorful, make it memorable, make it fun, but whatever you do, don’t make it mysterious. The app icon is fundamentally an advertisement, and like any good ad, it has to be clear what it’s selling.”
27. WHAT’S WRONG WITH THESE DOORS?
28. AFFORDANCE Design aspect of an object which suggest how the object should be used; a visual clue to its function and use.
29. DESIGN FOR EFFICIENCY Enable people to navigate to the most important content and functionality in as few steps as possible. 1 2 3
30. DESIGN FOR EMOTION “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.” — Don Norman — —
31. Customers care about their problems - not your solution. — Dave McClure
32. Don’t try to solve a problem if there isn’t one. WHAT’S THE PROBLEM WE’RE TRYING TO SOLVE?
33. Get out of the Building Talk with people, ask questions Build landing page* HOW?
34. Build your “MVP” and test it! IS IT WORKING?
35. Sketch it HOW? Create prototype Build working demo
36. THINK CHECK MAKE ITERATE!
37. THANK YOU! ANY QUESTIONS? kamil@uxpin.com @ziebak