Nokia Asha Touch UI Style Guide Part 2

1

Part 2

Series 40 Full Touch UI Style Guide

© Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Overview

2 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Part 1 (28.06.2012, 04.07.2012) • Essentials • UI Components • Exercises Part 2 (10.07.2012, 13.07.2012) • Chrome and Menus • UI Patterns • Customisation • Porting • UX offering for Series 40 • Take Home Messages • Exercises

Chrome and Menus


Ensure there is a Back button in all views.


Do not place actions in a Category bar.


Instead of scrolling horizontally, use the Category bar extension.


Category bar disappears with drill down.


It is possible to add a Ticker to a view.


The former MSK is now the primary function in Action button 1.


If there is no MSK metaphore, place all screen commands to Options.


If there are no options at all, the menu icon is dimmed automatically.


Options menu contains only global view functions.


Context menu is only a collection of shortcuts of single item actions.


There are different ’Options’ and ’Selection’ lists.


Options (screen

commands)

Popup list (Form, Canvas)

Options list (all)

Long press (item

commands)

Options list layout

+ tail position

Selection list layout

Nested list

Nested list

LCDUI Nokia UI

Options lists in LCDUI do not allow nested lists.


Options (screen

commands)

Options list (all)

Long press (item

commands)

LCDUI

Popup lists with options list layout are defined by positioning the tail.



Options list layout

+ tail position


Nested list

Nested list

Nokia UI

Popup lists with selection list layout are defined by specifying a title.



Options list layout

+ tail position


Nested list

Nested list

Nokia UI

Use nested lists for more items to avoid scrolling or for settings.



Options list layout

+ tail position


Nested list

Nested list

Nokia UI

UI Patterns


End key ends calls and data connections or exits applications.


Notify or confirm at least in case of possible loss.


Instead of dimming, use dynamic view content.


If you need Action Button #1 in a List, you can use a Form instead.


If you need and alternative to a DateField, use a TextField instead.


Use a form as wait notification, since alerts cannot listen to app events.


custom

Participate to the Asha Touch Competition 2012Q3


Customization


Use the entire screen.


Place your chrome elements where the platform chrome would be.


Fonts are between 14 pt light and 20 pt regular.


Minimum touch area is 43 x 43 pixels and 6 pixels margin.


Pixel size: 0,163 mm x 0,163 mm for 3’’, 240 x 400 pixels

Show the status bar to allow access to the notification bar.


Define the expected keyboard layout.


Porting


We will look briefly into 2 porting cases:


1. Series 40 non-touch to Series 40 touch and type (NT )

2. Series 40 touch and type to Series 40 full touch (T&T)

NT T&T removes focus and changes MSK.


NT T&T splits Options to screen and item.


Options

Context

NT Context menu items must be repeated.


Options Context

Contact (drill down) Names

T&T FT requires icons for Action button #1.


T&T FT needs Cancel button instead of .


UI porting between T&T and FT is easier than between NT and T&T.


NT T&T T&T FT

UX offering for Series 40


There is a UI style guide.

43 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber 43

The UX checklist collects the most important UI style issues.


The Nokia Icon Toolkit supports Inkscape.


Stencils help to create high fidelity wireframes or help to check sizes.


Series 40 UI component demos app showcases UI and code.


Take home messages


To maintain look and feel, chrome and components are a good start.


UI porting between T&T and FT is easier than between NT and T&T.


UX offering is not just a style guide.


Series 40 Full Touch UI Design


Library: http://www.developer.nokia.com/Resources/Library/Full_Touch/ Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-checklist.html Icon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.html UI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components.html UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation Basics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/ Asha Touch Competition 2012Q3: http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3 Wiki article to this webinar: http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_Design

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







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

http://www.developer.nokia.com/Resources/Library/Design_and_UX/�

http://www.developer.nokia.com/Resources/Library/Design_and_UX/�

http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3�



http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_Design�




Exercises


Exercise: How could these screens look in full touch?


Exercise: If Action Button 1 should be used for confirmation, how would you build a multi selction view?


Exercise: Sketch a download dialog which shows the remaining amount of data.


Exercise: Sketch a view - 2 categories - 3 primary actions - call - add - edit - 3 secondary actions - Share FB, TW, Reddit

- Options menu - use chrome - maximize the content area


Exercise: How many touch elements fit the content area?


Exercise: How many touch elements fit the entire canvas?


Thanks [email protected]


Technology

Nokia Asha Touch UI Style Guide Part 2