Download - UI Clinic - Series 40 full touch, April 2013

Jan Krebber Senior User Experience Consultant OCTO3

1 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber

UI CLINIC FOR SERIES 40 APRIL 2013

Overview


- Know your phone - Package tracker - UI considerations for ads


KNOW YOUR PHONE WHAT WE FOUND

Know your phone UX map.


We especially like the contextual search.


Remove focus for touch phone.


Split screen may work on large screens but it gets problems with small screens.


Proposal, entire content scrolls

Use full content area for scrolling.


Do not get stuck with the splash screen if there is nothing to do with it.


Place navigation keys consistently, with consistent icons and where expected.


Ensure Back navigation from each page, since Series 40 style is hierarchy based.


Buttons which cannot perform any action should be hidden.


Make touch areas, icons and fonts large enough.


Use the Nokia surround shape for the launcher icon.


Optimize the app concept for the primary use case.


Current structure

Build the app around the main use case, note vice versa.


Proposed structure

Current structure


PACKAGE TRACKER WHAT WE FOUND

Package Tracker UX map.


We especially like the first time use case and the clear structure of the app.


Use best keypad layout for character input, e.g. DHL requires only decimals.


UI v

isua

lizat

ion

exam

ples

Give users the feeling that they are in control.


prop

osal

prop

osal

Be careful with fast moving UI elements. It might cause harm to people.


In LWUIT optimize for payload. Test also with less powerful phones.


Enable landscape if your text might become truncated in portrait (only).


Use a short name to avoid app name truncation in the application menu.


Pressing Back from a form or setting should evoke a confirmation query.


prop

osal

Use component titles to simplify the layout.


prop

osal

Allow clean sweep of self populated lists.


prop

osal

prop

osal


UI CONSIDERATIONS FOR ADS

Ads could be repeated at key breaks inside long content, e.g. custom lists.


Ads being part of the chrome should always appear at the same position.


The ad should always be selectable and not interfere with any chrome.


?

Differentiate the ad from the actual content.


reco

mm

ende

d

Full screen ads should be used at breakpoints, not within tasks.



TAKE HOME MESSAGES

Build the app around the main use case, note vice versa.


Give users the feeling that they are in control.


Full screen ads should be used at breakpoints, not within tasks.



UX OFFERING FOR SERIES 40

There are LCDUI and LWUIT style guides – and more.


The Nokia’s Series 40 stencils support Inkscape.


Series 40 UI component demo projects showcase UI and code.


We offer reviews for the UI clinics.


Series 40 UI design


• UX Library for Series 40 full touch: http://www.developer.nokia.com/Resources/Library/Full_Touch/

• LWUIT UX Overview: http://www.developer.nokia.com/Resources/Library/LWUIT/#!ux-overview.html

• Iconography: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation/launcher-icon-templates.html

• UI Component Demos project:

https://projects.developer.nokia.com/s40uivisualisation

• Web Apps UI visualisation project: https://projects.developer.nokia.com/webappsuivisualisation

http://www.developer.nokia.com/Resources/Library/Full_Touch/

http://www.developer.nokia.com/Resources/Library/LWUIT/






https://projects.developer.nokia.com/webappsuivisualisation

https://projects.developer.nokia.com/webappsuivisualisation

Further reading and links


• Know your phone in store: http://store.ovi.com/content/330978?clickSource=search&pos=1

• Package tracker in the store: http://store.ovi.com/content/352191?clickSource=search&pos=1

• UX blogs in Nokia developer Code Blog: http://www.developer.nokia.com/Blogs/Code/

• Mobile Design Pattern Gallery. Theresa Neil (2012). • Designing Mobile Interfaces. Steven Hoober and Eric Berkman

(2011). • http://www.nngroup.com/articles/ (Jacob Nielsen’s blog)

http://store.ovi.com/content/330978?clickSource=search&pos=1

http://store.ovi.com/content/352191?clickSource=search&pos=1

http://www.developer.nokia.com/Blogs/Code/

http://www.nngroup.com/articles/


THANKS TO: MUSTAFA MANSOUR HASSANIEN SHAI IFRACH, FUTURESOFT SANNA HIUKKA


THANKS

[email protected] #krebbixux

Download - UI Clinic - Series 40 full touch, April 2013

Top Related