Designing UI for Maemo 5
Mox Soini

Design Process

Goal
What ideas are kept,
What ideas are dropped

Cannot extrapolate, it’s like
hand-drawn curve

Changes happen at
varying speed

Final result is often
Unexpected

Maemo 5

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

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

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

UI Flow

Navigation Structure – Line

Accounts Folders Messages Viewer
Email

Navigation Structure – Summary

Music
Video
Summary
Internet
Radio
Media Player

Navigation Structure – T-Bone

Month
Week Event
Agenda
Calendar

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

Viewing content
Manipulating content
Power use / shortcuts for content

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

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

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

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

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