The document discusses the importance of a great user interface for budget phones, particularly in the context of Nokia's Series 40 devices that support Java applications. It outlines the design process, including essential design guidelines, selection of approaches, UX patterns, and the significance of attention to detail in creating applications. The text emphasizes that customizing components can enhance app personality, but developers should prioritize native components for usability.

1. GREAT UI FOR A BUDGET
PHONE?
1

2. There are over 1.5 billion Series 40 devices
sold…
2

3. … All of which
support Java
An opportunity too
big to miss
3

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

5. Design Process
5

6. In the start of the design process… Questions
How do I make money?
How to port my application?
How to apply Design Guidelines?
Which color theme to use?
What features should I include
What is the icon style?
Are there any technical limitations in the platform?
How to integrate to the platform features?

7. Design (should) drives the development
• User journeys • Interaction • Final design
/storyboards architecture specifications
• Functionality • Visual design • Iteration and QA with
• Requirements direction software
Concept design Detailed design Implementation
More info: http://www.developer.nokia.com/Design/Design_process/
7

8. Choose the right design approach
Custom Hybrid Platform
approach approach approach
• Full screen applications • Follows UI design • Follows UI design
guidelines guidelines
• Uses mostly custom
components • Uses platform UI • Uses only platform
components wherever components
• Only some limitations possible
from the platform • Branding applied in the
• Custom interface for limits of platform UI
• Usually used by games features that are not design guidelines
possible with the platform
UI components
8

9. Selection of design approach influences
the selection of UI development
framework
Custom Hybrid Platform
approach approach approach
•JAVA custom canvas • LWUIT with some custom • LWUIT components
components
•All screen drawn pixel • LCDUI components
by pixel • LCDUI with some custom
components (more
limited customization
than LWUIT)
9

10. Targeting for multiple Series 40 UI
devices?
• 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
10

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

12. 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
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
12

13. 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

14. 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

15. 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

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

17. Select the right navigation model
Note: Tab bar navigation models only supported in Series 40 Full Touch UI Framework
17

18. Paint the overall picture of the application
18

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

20. … And key screen visualizations
20

21. 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

22. ”Your application has a
personality, let it show”
- With small tweaks to the visual design, your application may stand out from the
competitors -
22

23. Using a highlight color
• 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
23
Note: Customization requires custom implementation for Series 40, example image from N9

24. Create custom components when
appropriate and they have a meaning
• 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.
24
Note: Customization requires custom implementation for Series 40, example image from N9

25. Use layouts creatively
25

26. Pay attention to
details. Every
pixel counts.
26

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

28. 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

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

30. THANK YOU. KIITOS.
Juhani.haaparanta@nokia.com
30