Deep dive into Nokia Asha UI design: Designing apps

2,439 views

Published on

This webinar takes a deep dive into the Nokia Asha UI with UX expert Jan Krebber of OCT03 as the second part of an intensive Nokia Asha boot camp. This webinar will be particularly useful for professionals at small software companies that don’t have dedicated UI staff. At the same time, it may give seasoned UI designers new insights, too, since it will tackle design problems from a developer’s point of view.

While not essential, it’s suggested that you review the Deep dive into Nokia Asha UI design: Fundamentals webinar before reviewing this session: http://www.slideshare.net/nokia-developer/deep-dive-into-nokia-asha-ui-design-fundamentals

Join the live session on 29 May - 7 a.m. London; 9 a.m. Helsinki; 11:30 a.m. New Delhi; 2 p.m. Singapore: http://forumnokia.adobeconnect.com/asha-deep-dive-app-design/event/event_info.html

Find out more about:
* developing for Nokia Asha: http://www.developer.nokia.com/Develop/asha
* UX guidelines for Java apps: http://www.developer.nokia.com/Resources/Library/Asha_UI/
* UX guidelines for web apps: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/
* component demos: https://projects.developer.nokia.com/asha_ui_component_demos

Check out the webinar schedule here: http://www.developer.nokia.com/webinars

Published in: Technology, Business
  • Be the first to comment

Deep dive into Nokia Asha UI design: Designing apps

  1. 1. Improve your Nokia Asha UIapplication designJan KrebberSenior User Experience ConsultantOCTO3
  2. 2. Overview2 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber•  People debugging your design with usability tests•  About usability tests•  Test preparation•  People debugging your design with usability tests•  Test session•  Test outcome•  Take home messages•  Live debugging•  Take home messages•  Live debugging
  3. 3. The imageThe imageExercise: Debug your design. But why?3 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  4. 4. The imageThe imageStart with usability and it will save youtime – easily a 100 times.4 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastnameEffort to change ausabillity problemProject time
  5. 5. The imageThe image5 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastnameWith good UX, your architecture ismore stable and your code is cleaner .
  6. 6. You debugging your design with theUX checklist
  7. 7. You debugging your design
  8. 8. The imageThe imageBack stepping is done via the hardwarekey - and only via the hardware key.8 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  9. 9. The imageThe imagePlace basic view elements whereexpected.9 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  10. 10. The imageThe imageNo focus - use direct touch paradigmonly.10 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  11. 11. The imageThe imageIndicate touch down event and triggeron touch release.11 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  12. 12. The imageThe imageView related actions go to Options.Item related actions go to item menu.12 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  13. 13. The imageThe imageDo not use double tap to open a menu.Use a long-press gesture.13 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  14. 14. The imageThe imageDo not combine tabs and actions incategory bar.14 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  15. 15. The imageThe imageExercise:What is wrong with the view?15 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  16. 16. The imageThe imageExercise:What is wrong with the view?16 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  17. 17. You debugging your design
  18. 18. The imageThe imageMake touch areas large enough andobey the minimum touch area.18 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  19. 19. The imageThe imageUse correct icon sizes and optimiseyour icon for Nokia Asha.19 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  20. 20. The imageThe imageBe aware of theSwipe; use flickcarefully.20 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  21. 21. The imageThe imageDo not use radio button and check boxicons in selection lists.21 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  22. 22. The imageThe imageMake text large enough for reading – even without magnifyingglass.22 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  23. 23. The imageThe image23 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberMake text large enough for reading –even without magnifying glass.
  24. 24. The imageThe imageUse high contrast for UI components.24 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  25. 25. The imageThe imageUse high contrast for UI components.25 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  26. 26. The imageThe imageUse high contrast for UI components.26 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebberhttp://snook.ca/technical/colour_contrast/colour.html
  27. 27. The imageThe imageMake text easy to understand.27 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  28. 28. The imageThe imageUse consistent labels, expressions andcommands.28 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  29. 29. The imageThe imageClean the Options menu if yourapplication does not require text input.29 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  30. 30. The imageThe imageExercise:Are these colors WCAG 2 compliant?#00FF00 and #FF00FF?30 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebberhttp://snook.ca/technical/colour_contrast/colour.html
  31. 31. The imageThe imageExercise:Are these colors WCAG 2 compliant?#00FF00 and #FF00FF?31 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebberhttp://snook.ca/technical/colour_contrast/colour.html
  32. 32. You debugging your design
  33. 33. The imageThe imageMinimize typing and use popupChoiceGroups and pickers if possible.33 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  34. 34. The imageThe imageUse a short application name to avoidits truncation by the phone.34 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  35. 35. The imageThe imageIndicate progress.35 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  36. 36. The imageThe imageIndicate if the application is causingcosts.36 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  37. 37. The imageThe imageBe positive in error situations.37 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  38. 38. The imageThe imageAvoid confirmation dialogs wherepossible.38 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  39. 39. The imageThe imageAllow user-set precision for locationenabled apps.39 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  40. 40. The imageThe imageExercise:Would you change any component?40 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  41. 41. The imageThe imageExercise:Would you change any component?41 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  42. 42. You debugging your design
  43. 43. The imageThe imageCan’t see the woods for the trees.43 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  44. 44. The imageThe imageDraw a UX map to see the woods.44 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  45. 45. The imageThe imageStep back, look at the UX map andsimplify the structure.45 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberProposed structureCurrent structure
  46. 46. The imageThe imageCheck if you can merge views.46 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberProposed structureCurrent structure
  47. 47. The imageThe imageExercise: Take out your credit card.47 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  48. 48. The imageThe imageExercise: Take out your credit card.And pen and paper.48 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  49. 49. The imageThe imageExercise: And create a paper prototypeof your app’s splash screen.49 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  50. 50. People debugging your design withusability tests
  51. 51. Before we start
  52. 52. The imageThe imageEven your mom will give you moreinsights than nobody.52 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  53. 53. The imageThe imageBe ready to dump the most preciousthing you have – your code.53 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  54. 54. The imageThe imageLearn to step back and observe.54 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  55. 55. The imageThe imageEverything else is simple – it is!55 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  56. 56. People debugging your design
  57. 57. The imageThe imageUsability is an analysis how to reach agoal.57 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  58. 58. The imageThe imageOld-school usability studies are usuallynot suitable for small software houses.58 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  59. 59. The imageThe imageYou want to improve – not prove.59 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  60. 60. The imageThe image2-3 participants are enough if you testmultiple times.60 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  61. 61. The imageThe imageAs a test facilitator you must have aneutral attitude and be eager to learn.61 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  62. 62. People debugging your design
  63. 63. The imageThe imageWrite down all the tasks and createstories from them.63 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  64. 64. The imageThe imageInvite from the target audience if youcan – but do not get stuck with it.64 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  65. 65. The imageThe imageDo not use previous participants in thesame project again.65 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  66. 66. The imageThe imageRun a pilot study.66 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  67. 67. People debugging your design
  68. 68. The imageThe imageTest for 1 hour.68 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber10 min: Welcome, introduction, sign agreement and warm-up30 min: Tasks10 min: Open issues, wrapping up and good-bye10 min: Take additional notes and prepare the next session
  69. 69. The imageThe imageThe participant talks – not you.69 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  70. 70. The imageThe imageAsk for open issues after the tasks aredone.70 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  71. 71. The imageThe imageReward your participants.71 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  72. 72. People debugging your design
  73. 73. The imageThe imageThe biggest issue is the most urgent.73 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  74. 74. The imageThe image74 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  75. 75. The imageThe imageTest your tweak – a very simple hallwaytest might do the trick here.75 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  76. 76. The imageThe imageExercise: Watch the video. What wentwrong? How do you fix it?76 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  77. 77. The imageThe image77 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  78. 78. The imageThe image78 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  79. 79. Take home messages
  80. 80. The imageThe imageInspect your app with the UX checklist.80 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  81. 81. The imageThe image81 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberTest early. Test often.Fail fast. Fail cheap.
  82. 82. The imageThe image2-3 participants are enough if you testmultiple times.82 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
  83. 83. The imageThe imageLiterature and links83 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberUX Library for Nokia Asha:http://www.developer.nokia.com/Resources/Library/Asha_UI/#!index.htmlNokia Asha Web app UX guidelines:http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/#!design-library.htmlNokia Asha UI component demos:https://projects.developer.nokia.com/asha_ui_component_demos
  84. 84. Thanks.ext-jan.krebber@nokia.com#krebbixux

×