Nokia Asha Touch UI Style Guide Part 1

Part 1

Series 40 Full Touch UI Style Guide

Overview

2 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

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

Essentials

Series 40 full touch UI is different – the APIs are not.

4 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber 4

Home screen allows direct access to apps, contacts, and my app.

My Page App Launcher

My App

Notification bar contains pre-defined shortcuts and global notifications.

timeout

The UI is composed of 5 main layers.

Use standard gestures as intended.

Press, release Select, open

Press and hold Opens context

Double tap Toggles zoom states

Drag Move item

Swipe from the edge

Flick Scroll quickly

Pinch open Zoom in

Pinch close Zoom out

Touch UI elements must show a feedback and evoke on finger lift.

Main orientation is portrait, most Java UI elements support landscape.

Support for right-to-left languages affects chrome and content.

UI Components

LCDUI is based on few view types.

Displayable

Screen Canvas

With chrome Full screen Form List Alert Text box

Choice Group

Date Field

Text Field

String Item

Image Item

Custom Item

Spacer

Implicit choice Exclusive choice Multiple choice

2 types of displayable (views)

Displayable

Screen Canvas

Choice Group

Date Field

Text Field

String Item

Image Item

Custom Item

Spacer

Screens allow pre-defined elements, but in a canvas you can draw freely.

2 canvases

Displayable

Screen Canvas

Choice Group

Date Field

Text Field

String Item

Image Item

Custom Item

Spacer

A full screen canvas requires you to add navigation elements.

4 screens

Displayable

Screen Canvas

Choice Group

Date Field

Text Field

String Item

Image Item

Custom Item

Spacer

A form is the most versatile screen to use with LCDUI components.

Lists allow only one list item type.

Alerts can only be shown inside an application.

A text box can show editable text or non-editable text. Nothing else.

3 different types of lists

Displayable

Screen Canvas

Choice Group

Date Field

Text Field

String Item

Image Item

Custom Item

Spacer

Implicit choices are made for drill down and single selection.

Exclusive choice list does not close automatically after selection.

Also screens with multiple choices may require some additional work.

8 form items

Displayable

Screen Canvas

Choice Group

Date Field

Text Field

String Item

Image Item

Custom Item

Spacer

Changes in forms are confirmed; or cancelled with a confirmation query.

Due to their nature, only exclusive pop-up choice groups can collapse.

There is no ”single choice item” in Java Form.

custom

DateField is a tumbler, only for setting time and date.

TextField is for inline text editing such as names or passwords.

Gauge can be a slider or a progress indicator.

StringItem displays text and allows hyperlinks and button creation.

ImageItem crops the image to the screen if necessary.

CustomItem allows drawing new elements as needed.

Spacer adds space between two form items.

Exercises

Exercise: How would this screen look in Series 40 Full touch?

Exercise: Create a sign in view - Username - Password - Setting for auto-fill password - Forgot password & help

Exercise: Which component would you use to pick one of the following? - Monday - Tuesday - Wednesday - Thursday - Friday

Exercise: How would you replace a single choice item (aka switch)?

Exercise: Which views can have a button? Are there any limitations?

Links 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/

Answers and propsals from here: http://www.developer.nokia.com/Community/Wiki/Wiki_Home

Thanks ext-jan.krebber@nokia.com

Nokia Asha Touch UI Style Guide Part 1

Technology

Transcript of Nokia Asha Touch UI Style Guide Part 1

Nokia Asha UI Clinic September 2013

LWUIT for Nokia Asha app development

Developing For Nokia Asha Devices

Nokia Asha webinar: Introduction to Nokia Asha SDK 1.1: New and updated features

Nokia Asha 305

Nokia asha 311 price in pakistan nokia mobiles computer point

Nokia Asha 311

Nokia Asha App Development - Part 2

Nokia Asha 210 Dual SIM

Desenvolvimento de Apps para celulares Nokia Lumia & Nokia asha

Nokia Asha 302

Download Nokia Asha 306 Manual

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

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

Nokia Asha 210 Es

Nokia ASHA

Introducao a nova plataforma nokia asha

Deep dive into Nokia Asha UI design: Designing apps

Healthcare apps for Nokia X and Nokia Asha

Nokia-ASHA --OK.doc