Download pdf - Deep dive into Nokia Asha UI design: Designing apps

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?


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.


The image The image

Place basic view elements where expected.


The image The image

No focus - use direct touch paradigm only.


The image The image

Indicate touch down event and trigger on touch release.


The image The image

View related actions go to Options. Item related actions go to item menu.


The image The image

Do not use double tap to open a menu. Use a long-press gesture.


The image The image

Do not combine tabs and actions in category bar.


The image The image

Exercise: What is wrong with the view?


The image The image

Exercise: What is wrong with the view?



The image The image

Make touch areas large enough and obey the minimum touch area.


The image The image

Use correct icon sizes and optimise your icon for Nokia Asha.


The image The image

Be aware of the Swipe; use flick carefully.


The image The image

Do not use radio button and check box icons in selection lists.


The image The image

Make text large enough for reading – even without magnifying glass.


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.


The image The image



The image The image



http://snook.ca/technical/colour_contrast/colour.html

The image The image

Make text easy to understand.


The image The image

Use consistent labels, expressions and commands.


The image The image

Clean the Options menu if your application does not require text input.


The image The image

Exercise: Are these colors WCAG 2 compliant? #00FF00 and #FF00FF?



The image The image

Exercise: Are these colors WCAG 2 compliant? #00FF00 and #FF00FF?




The image The image

Minimize typing and use popup ChoiceGroups and pickers if possible.


The image The image

Use a short application name to avoid its truncation by the phone.


The image The image

Indicate progress.


The image The image

Indicate if the application is causing costs.


The image The image

Be positive in error situations.


The image The image

Avoid confirmation dialogs where possible.


The image The image

Allow user-set precision for location enabled apps.


The image The image

Exercise: Would you change any component?


The image The image

Exercise: Would you change any component?



The image The image

Can’t see the woods for the trees.


The image The image

Draw a UX map to see the woods.


The image The image

Step back, look at the UX map and simplify the structure.


Proposed structure

Current structure

The image The image

Check if you can merge views.


Proposed structure Current structure

The image The image

Exercise: Take out your credit card.


The image The image

Exercise: Take out your credit card. And pen and paper.


The image The image

Exercise: And create a paper prototype of your app’s splash screen.


People debugging your design with usability tests

Before we start

The image The image

Even your mom will give you more insights than nobody.


The image The image

Be ready to dump the most precious thing you have – your code.


The image The image

Learn to step back and observe.


The image The image

Everything else is simple – it is!


People debugging your design

The image The image

Usability is an analysis how to reach a goal.


The image The image

Old-school usability studies are usually not suitable for small software houses.


The image The image

You want to improve – not prove.


The image The image

2-3 participants are enough if you test multiple times.


The image The image

As a test facilitator you must have a neutral attitude and be eager to learn.



The image The image

Write down all the tasks and create stories from them.


The image The image

Invite from the target audience if you can – but do not get stuck with it.


The image The image

Do not use previous participants in the same project again.


The image The image

Run a pilot study.



The image The image

Test for 1 hour.


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.


The image The image

Ask for open issues after the tasks are done.


The image The image

Reward your participants.



The image The image

The biggest issue is the most urgent.



The image The image

Test your tweak – a very simple hallway test might do the trick here.


The image The image

Exercise: Watch the video. What went wrong? How do you fix it?




Take home messages

The image The image

Inspect your app with the UX checklist.



Test early. Test often. Fail fast. Fail cheap.

The image The image

2-3 participants are enough if you test multiple times.


The image The image

Literature and links


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