UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman

2,056 views

Published on

Another quick talk on UX - in the perspective of UX for Mobile Apps. Presenters: Masrur Hannan and Shadman Rahman

UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman

  1. 1. Google Cloud Developer Challenge 9 November, 2013 At BUET, Dhaka. UX User Experience (UX) for Apps a quick talk!
  2. 2. MASRUR HANNAN Founder and Lead UX Consultant, Bonolota Designs. www.bonolota.com (coming soon) SHADMAN RAHMAN Co- Founder, Bonolota Designs. Sr. UX Specialist, CellBazaar.com UX Lead, Beshto.com
  3. 3. MOBILE APPS’ UX The Lifecycle of a Mobile App, a User’s Perspective By Michael Griffith , Ex UX Director, HP 1. Stage One: The App Store Experience 2. Stage Two: The First-Open Experience 3. Stage Three: Attempting Simple Tasks 4. Stage Four: Attempting Complex Tasks
  4. 4. 5 QUICK TIPS FOR GOOD MOBILE APPS’ UX: Sources: http://www.nngroup.com/topic/mobile-and-tablet-design/ (mostly) 1. As few features as possible 2. Small Screen – Bigger touch targets 3. As less User Input as possible … 4. Easy Readability + interactions 5. Minimize texts and instructions.
  5. 5. QUICK TIP FOR GOOD MOBILE APPS’ UX: 1 Sources: http://www.nngroup.com/topic/mobile-and-tablet-design/ (mostly) 1 . As few features as possible limit the number of features!
  6. 6. QUICK TIP FOR GOOD MOBILE APPS’ UX: 2 Sources: http://www.nngroup.com/topic/mobile-and-tablet-design/ (mostly) 2 . Small Screen – Bigger touch targets lesser options to click in 1 screen
  7. 7. QUICK TIP FOR GOOD MOBILE APPS’ UX: 3 Sources: http://www.nngroup.com/topic/mobile-and-tablet-design/ (mostly) 3 . As less User Input as possible … Avoid requiring use of both hands for inputs.
  8. 8. QUICK TIP FOR GOOD MOBILE APPS’ UX: 4 Sources: http://www.nngroup.com/topic/mobile-and-tablet-design/ (mostly) 4 . Easy Readability + interactions Desktop copywriting must be concise; mobile copywriting must be even more concise.
  9. 9. QUICK TIP FOR GOOD MOBILE APPS’ UX: 5 Sources: http://www.nngroup.com/topic/mobile-and-tablet-design/ (mostly) 5 . Minimize texts and instructions. Instructions may actually hamper interactions
  10. 10. SOME BAD MOBILE UX EXAMPLES Source: http://mobiledesignpatterngallery.com/mobile-patterns.php
  11. 11. ELEMENTS OF MOBILE APPS’ UX Source: http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience By Lyndon Cerejo; UX professional, Clients include: American Express, Coca-Cola etc.
  12. 12. ELEMENTS OF MOBILE APPS’ UX Source: http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience By Lyndon Cerejo; UX professional, Clients include: American Express, Coca-Cola etc. 1.Functionality 2.Information Architecture 3.Content 4.Design 5.User Input 6.Mobile Context 7.Usability 8.Trustworthiness 9.Feedback 10.Help 11.Social 12.Marketing
  13. 13. WHAT IS USER EXPERIENCE?
  14. 14. WHAT IS USER EXPERIENCE?
  15. 15. DESIGNING USER’S EXPERIENCE (UX)
  16. 16. UX DESIGN OBJECTIVE
  17. 17. WHO DESIGNS UX?
  18. 18. WHO DESIGNS UX? ... IDEAL SCENARIO http://www.slideshare.net/nickf/user-experience-best-practices
  19. 19. WHO DESIGNS UX? … REALITY!
  20. 20. THE ULTIMATE USER EXPERIENCE Donald A. Norman (often called father of UX) believes that the best computer program is the one in which the computer 'disappears' and the user seems to be working directly on the problem.
  21. 21. HOW TO DESIGN GOOD UX? The User Experience Honeycomb – Peter Morville
  22. 22. HOW TO DESIGN GOOD UX? Books: Articles and publishing: Online courses: Human-Computer Interaction coursera.org
  23. 23. BONOLOTA’S 7 STEPS FOR DESIGNING GOOD UX 1. Research 2. Information design 3. Prototyping 4. Heuristic evaluation 5. Iterative development 6. User testing 7. Post-launch yada-yada(?)
  24. 24. 1. RESEARCH … (MANAGED INNOVATION!) Information Ecology Needfinding Interviews Storyboarding Inspiration Search
  25. 25. 2. INFORMATION DESIGN INFORMATION ARCHITECTURE
  26. 26. 3. PROTOTYPING … SANTA CLARA, California -- People thought Jeff Hawkins was crazy when they saw him taking notes, checking appointments, and synchronizing a small block of wood with his PC, pretending all the while that the block was a handheld computer. “If I wanted to check the calendar I'd take it out and press the wooden button.” Source: “The Philosophy of the Handheld.” Wired Magazine, October 1999.
  27. 27. 3. PROTOTYPING
  28. 28. 3. PROTOTYPING … WIREFRAMES
  29. 29. 4. HEURISTIC EVALUATION
  30. 30. 5. ITERATIVE DESIGN AND DEVELOPMENT Source: http://www.nngroup.com/articles/parallel-and-iterative-design/
  31. 31. 6. USER TESTING  Task Oriented  Thoughts  Simple spoken out loud pencil-paper notes
  32. 32. 7. POST LAUNCH YADA YDA :)
  33. 33. Q&A THANKS … :) www.bonolota.com www.facebook.com/bonolotadesigns

×