Nokia Asha Touch UI Style Guide Part 2

Part 2

Series 40 Full Touch UI Style Guide

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

LCDUI Nokia UI

Options lists in LCDUI do not allow nested lists.

Options (screen

commands)

Options list (all)

Long press (item

commands)

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

Options list layout

+ tail position

Nested list

Nokia UI

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

Options list layout

+ tail position

Nested list

Nokia UI

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

Options list layout

+ tail position

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.

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

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

Technology

Nokia Asha UX webinar: Design tips for Nokia Asha game developers

Nokia Asha App Development - Part 1

Nokia Asha 202 - User Manual Download

Nokia Asha webinar: Add VoIP services to your Nokia Asha apps

Optimise Nokia Maps applications for Nokia Asha Touch phones

ALCATEL - arpa.org.ar · nokia asha 201 asha 302 asha 303 . asha 311 asha 503 lumia 530 . lumia 710 lumia 735 lumia 900

Nokia Asha webinar: Nokia Asha web app tools 3.0: New features, tips, and code samples

Nokia Asha UI Clinic September 2013

Nokia Asha webinar: Developing health-care applications for Nokia Asha phones

Nokia Asha Touch UI Style Guide Part 1

Nokia asha 303 price in pakistan nokia mobiles computer point

Download Nokia Asha 202 Manual

Nokia asha 311 price in pakistan nokia mobiles computer point

Nokia Asha 210 Dual SIM

Introduction to Nokia Asha Touch UI

Nokia Asha App Development - Part 2

Healthcare apps for Nokia X and Nokia Asha

Nokia Asha 311 ръководство на потребителя

Guide Nokia Asha SDK Installation - Operadevelopers.apps.opera.com/files/nokia_asha_sdk_installation_guide... · Nokia Asha SDK Installation Guide ... Component Name Description Nokia

Developing For Nokia Asha Devices