Date post: | 29-Jun-2015 |
Category: |
Technology |
Upload: | microsoft-mobile-developer |
View: | 1,087 times |
Download: | 0 times |
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