Nokia Asha Touch UI Style Guide Part 2

Series 40 Full Touch
UI Style Guide

Part 2

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

Overview

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.
LCDUI Nokia UI

Options list Popup list
(all) (Form, Canvas)

Options Long press Options Selection list
(screen (item list layout layout
commands) commands) + tail position

Nested Nested
list list

Options lists in LCDUI do not allow
nested lists.
LCDUI

Options list
(all)

Options Long press
(screen (item
commands) commands)


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

Popup list
(Form, Canvas)

Options Selection list
list layout layout
+ tail position

Nested Nested
list list

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

Popup list
(Form, Canvas)

list layout layout
+ tail position

Nested Nested
list list

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

Popup list
(Form, Canvas)

list layout layout
+ tail position

Nested Nested
list list

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.

Context

Options


NT 
Context menu items must be repeated.
Names Contact (drill down)

Context Options


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.
T&T  FT NT  T&T


UX offering for Series 40


There is a UI style guide.


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_D
esign


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 

ext-jan.krebber@nokia.com


Nokia Asha Touch UI Style Guide Part 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Microsoft Mobile Developer

Mehr von Microsoft Mobile Developer (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Nokia Asha Touch UI Style Guide Part 2