deep dive into nokia asha ui design: designing apps
Post on 31-Aug-2014
2.164 Views
Preview:
DESCRIPTION
TRANSCRIPT
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. ext-jan.krebber@nokia.com #krebbixux
top related