Contrary to popular belief, it is indeed possible to create great-looking UIs for apps that target very low-priced phones. This presentation shows you how to apply solid UX guidelines and application-design principles that work great even on very low-cost hardware. Juhani Haaparanta, principal interaction designer with Nokia in Tampere, Finland, explains how to design the right type of interaction architecture, apply the appropriate UI style, and add a twist of visual excellence to applications for budget phones. The resulting apps will deliver better user experience and thus better reviews, usage numbers, and return on investment.
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
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
The items described in this presentation are the most important UX issues to consider when designing an application for Series 40 full touch. Many of the 'checks' are solved automatically when using ready-made views like 'lists', but they remain an issue for custom views.More information found from here:Style guide https://www.developer.nokia.com/Resources/Library/Full_Touch/#!index.htmlStyle guide webinar http://www.developer.nokia.com/Community/Wiki/Webinar_Series_40_UI_Design
UI FrameworksFull TouchTouch & TypeNon TouchOver 200 different models results fragmentation???ResolutionsQVGA (240*320)QVGA landscape (320 * 240)WQVGA (240*400)Common development
UI FrameworksFull TouchTouch & TypeNon TouchOver 200 different models results fragmentation???ResolutionsQVGA (240*320)QVGA landscape (320 * 240)WQVGA (240*400)Common development
Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.