GREAT UI FOR A BUDGET PHONE?

1

There are over 1.5 billion Series 40 devices sold…

2

… All of which support Java

An opportunity too

big to miss

3

Better UX Better reviews Better usage numbers Better return on investment.

4

Design Process

5

In the start of the design process… Questions

How to port my application?

What features should I include

Are there any technical limitations in the platform?

How to apply Design Guidelines?

How to integrate to the platform features?

Which color theme to use?

What is the icon style?

How do I make money?

Design (should) drives the development

7

• User journeys /storyboards

• Functionality • Requirements

Concept design

• Interaction architecture

• Visual design direction

Detailed design

• Final design specifications

• Iteration and QA with software

Implementation

More info: http://www.developer.nokia.com/Design/Design_process/

Choose the right design approach

8

Custom approach •Full screen applications

•Uses mostly custom components

•Only some limitations from the platform

•Usually used by games

Hybrid approach •Follows UI design guidelines

•Uses platform UI components wherever possible

•Custom interface for features that are not possible with the platform UI components

Platform approach •Follows UI design guidelines

•Uses only platform components

•Branding applied in the limits of platform UI design guidelines

Selection of design approach influences the selection of UI development framework

9

Custom approach •JAVA custom canvas

•All screen drawn pixel by pixel

Hybrid approach •LWUIT with some custom components

•LCDUI with some custom components (more limited customization than LWUIT)

Platform approach •LWUIT components

•LCDUI components

Targeting for multiple Series 40 UI devices?

10

• Java applications can handle multiple resolutions and aspect ratios fairly well

• From UX point of view it is still recommended to do some optimisations for each different UX framework −Different UX frameworks behave

differently − Non touch UI provides focus on the

active item, touch and type and full touch don’t

− Category bar in Full Touch −Wider display gives more space to

content −Physical size of the screens may vary

− PPI differences among phones

UX Guidelines - A map that helps you to create a style for your application -

11

Scope of UI Guidelines

• The UX Guidelines are built to help designers through the design process

• Guidelines include − Overview to the UX framework − UI Pattern descriptions − UI component descriptions − Language and tone of voice guidelines − UX Checklist − Etc.

• Nokia is providing/will provide

guidelines for each UI framework supported under the Series 40 platform

− Series 40 Full Touch − Touch & Type − Non Touch − Web applications

12

Series 40 full touch design guidelines Series 40 Touch and Type UI Style Guide Series 40 non-touch design guidelines Series 40 Web App UX Guidelines

Essentials – the overview on each UI

• Essential section always tell the key functionality of the UX framework −Layout properties −How to open/close

applications −Event handling −HW Key behavior −Gestures

• These are crucial information

for designers when starting their own application design process

13

Patterns – a glue that binds the UX as one

• UI Patterns explain the generic behavioral patterns of the applications in a certain UX framework

− Navigation models − Content management − Dialogs, menus and notification

behavior − Error handling − Showing/filtering content − Etc.

• UX patterns create the consistency

between applications • Application designers shouldn’t

break the available patterns – however, creating new patterns is allowed (with custom implementation)

14

Components – the bits which create the patterns • With readymade Java UI components

the application can be made closer to the native UX easier than with creating all the components custom

• LCDUI is the official Java UI framework in use, also LWUIT theme available for Full Touch UI Framework

• When creating custom components, make sure the application is styled consistenly (no mixing of different styles within applications)

• Component stencils available in order to make the design of view mockups easier

15

Interaction design - How to apply a proper interaction architecture to an application -

16

Select the right navigation model

17

Note: Tab bar navigation models only supported in Series 40 Full Touch UI Framework

Paint the overall picture of the application

18

Explain the overall picture with key use case flows/videos/prototypes/…

19

… And key screen visualizations

20

For most developers, a proper IA, couple of key use cases and some key screen visualizations are enough to get started with the development work and dive in to the details.

21

”Your application has a personality, let it show”

- With small tweaks to the visual design, your application may stand out from the competitors -

22

Using a highlight color

23

• When choosing your application's highlight colour, consider aligning it with the primary colour of your brand to promote your brand's presence and strengthen your application's identity

• Your custom highlight colour can be applied across a set of components to indicate activity, progress, and key positive actions in your application

• It is important to apply your highlight colour consistently throughout your application, being careful not to mix different colours

Note: Customization requires custom implementation for Series 40, example image from N9

Create custom components when appropriate and they have a meaning

24

• Custom components can be really effective when applying a personality and branding to your application

• However, do not design custom components just for the sake of them. If there is a native component available for the use case consider customization carefully.

Note: Customization requires custom implementation for Series 40, example image from N9

Use layouts creatively

25

Pay attention to details. Every pixel counts.

26

”No detail is too small” - The basis for every great quality UI is an obsessive attention to the smallest

design details -

27

During the implementation, the only way to improve the UX is to raise bugs to others and resolve your own bugs. Lots of those.

28

Recap: > Design Process > Design Approach > UI Frameworks and application style > Interaction Architecture > Visual tweaks > Raise Bugs

29

THANK YOU. KIITOS.

Juhani.haaparanta@nokia.com

30