1.
Designing UI for Maemo 5
Mox Soini

2.
Design Process

3.
Goal
What ideas are kept,
What ideas are dropped

4.
Cannot extrapolate, it’s like
hand-drawn curve

5.
Changes happen at
varying speed

6.
Final result is often
Unexpected

7.
Maemo 5

8.
Easily understandable
with Soul
Simple – not too neutral
Positive surprises
Clean
Delights

9.
Reduced set of UI elements
• The key in defining finger usability
• The key in attaining UI consistency
• Accelerate the design and development time (reduced complexity)
• Avoiding customization where possible

10.
Compared to past
• The UNIX philosophy – “do one thing and do it well".
• Finger usage – Larger size of UI elements
• Removal of focus
• Avoid dimming
• Only few menu items UP
ED h
N it
EA w at!
• No tabs in dialogs
’S
CL ow ss f
IT – N % le
50

11.
UI Flow

12.
Navigation Structure – Line

13.
Accounts Folders Messages Viewer
Email

14.
Navigation Structure – Summary

15.
Music
Video
Summary
Internet
Radio
Media Player

16.
Navigation Structure – T-Bone

17.
Month
Week Event
Agenda
Calendar

18.
UI priorities
Main views
Viewing content Navigation via content
View menus
Manipulating content Edit dialogs
Edit Mode Views
Power use / shortcuts for content Multiple selection
Context Sensitive Menus

19.
Viewing content
Manipulating content
Power use / shortcuts for content

20.
There’s NO app for that
It’s a plugin!

21.
VOIP services
IM services
Sharing services
Plugins
Media filters
Media formats
OpenMax

22.
Contact list
Profile
Alarms Bluetooth
3G / Wlan
networking Integration Metadata
Location Music / Video
File Choosers playing
Camera

23.
Keep in mind
• Simplicity
• Focus on key use cases
• Fluent and seamless
• Not cramming all in the same place
• Each view has it’s own purpose

24.
Thanks!
Designing UI for Maemo 5 – Mox Soini
Hildon 2.2 UI Style Guide Hildon 2.2 Widget UI Specification Fremantle Master Layout Guide
http://bit.ly/13P9Ou http://bit.ly/3o8ttP http://bit.ly/MhCb4