deep dive into nokia asha ui design: designing apps
DESCRIPTION
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/webinarsTRANSCRIPT
Improve your Nokia Asha UI application design
Jan Krebber Senior User Experience Consultant OCTO3
Overview
2 © 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
The image The image
Exercise: Debug your design. But why?
3 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Start with usability and it will save you time – easily a 100 times.
4 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastname
Effort to change a usabillity problem
Project time
The image The image 5 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastname
With good UX, your architecture is more stable and your code is cleaner .
You debugging your design with the UX checklist
You debugging your design
The image The image
Back stepping is done via the hardware key - and only via the hardware key.
8 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Place basic view elements where expected.
9 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
No focus - use direct touch paradigm only.
10 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Indicate touch down event and trigger on touch release.
11 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
View 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
The image The image
Do 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
The image The image
Do not combine tabs and actions in category bar.
14 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: What is wrong with the view?
15 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: What is wrong with the view?
16 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
You debugging your design
The image The image
Make touch areas large enough and obey the minimum touch area.
18 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Use correct icon sizes and optimise your icon for Nokia Asha.
19 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Be aware of the Swipe; use flick carefully.
20 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Do not use radio button and check box icons in selection lists.
21 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Make text large enough for reading – even without magnifying glass.
22 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image 23 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Make text large enough for reading – even without magnifying glass.
The image The image
Use high contrast for UI components.
24 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Use high contrast for UI components.
25 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Use high contrast for UI components.
26 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
http://snook.ca/technical/colour_contrast/colour.html
The image The image
Make text easy to understand.
27 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Use consistent labels, expressions and commands.
28 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Clean the Options menu if your application does not require text input.
29 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: 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 Krebber
http://snook.ca/technical/colour_contrast/colour.html
The image The image
Exercise: 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 Krebber
http://snook.ca/technical/colour_contrast/colour.html
You debugging your design
The image The image
Minimize typing and use popup ChoiceGroups and pickers if possible.
33 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Use a short application name to avoid its truncation by the phone.
34 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Indicate progress.
35 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Indicate if the application is causing costs.
36 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Be positive in error situations.
37 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Avoid confirmation dialogs where possible.
38 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Allow user-set precision for location enabled apps.
39 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: Would you change any component?
40 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: Would you change any component?
41 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
You debugging your design
The image The image
Can’t see the woods for the trees.
43 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Draw a UX map to see the woods.
44 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Step back, look at the UX map and simplify the structure.
45 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Proposed structure
Current structure
The image The image
Check if you can merge views.
46 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Proposed structure Current structure
The image The image
Exercise: Take out your credit card.
47 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: 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
The image The image
Exercise: And create a paper prototype of your app’s splash screen.
49 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
People debugging your design with usability tests
Before we start
The image The image
Even your mom will give you more insights than nobody.
52 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Be ready to dump the most precious thing you have – your code.
53 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Learn to step back and observe.
54 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Everything else is simple – it is!
55 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
People debugging your design
The image The image
Usability is an analysis how to reach a goal.
57 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Old-school usability studies are usually not suitable for small software houses.
58 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
You want to improve – not prove.
59 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
2-3 participants are enough if you test multiple times.
60 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
As a test facilitator you must have a neutral attitude and be eager to learn.
61 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
People debugging your design
The image The image
Write down all the tasks and create stories from them.
63 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Invite from the target audience if you can – but do not get stuck with it.
64 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Do not use previous participants in the same project again.
65 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Run a pilot study.
66 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
People debugging your design
The image The image
Test for 1 hour.
68 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
10 min: Welcome, introduction, sign agreement and warm-up 30 min: Tasks 10 min: Open issues, wrapping up and good-bye 10 min: Take additional notes and prepare the next session
The image The image
The participant talks – not you.
69 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Ask for open issues after the tasks are done.
70 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Reward your participants.
71 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
People debugging your design
The image The image
The biggest issue is the most urgent.
73 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image 74 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Test your tweak – a very simple hallway test might do the trick here.
75 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Exercise: Watch the video. What went wrong? How do you fix it?
76 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image 77 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image 78 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Take home messages
The image The image
Inspect your app with the UX checklist.
80 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image 81 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
Test early. Test often. Fail fast. Fail cheap.
The image The image
2-3 participants are enough if you test multiple times.
82 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
The image The image
Literature and links
83 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
UX Library for Nokia Asha: http://www.developer.nokia.com/Resources/Library/Asha_UI/#!index.html Nokia Asha Web app UX guidelines: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/#!design-library.html Nokia Asha UI component demos: https://projects.developer.nokia.com/asha_ui_component_demos
Thanks. [email protected] #krebbixux