Maemo Summit 2009 Presentation "Designing UI for the Maemo 5" by Mox Soini Abstract: How to make the applications work together as an integrated whole? This talk will discuss the UI Design of the Maemo 5 product as an "application portfolio". Design patterns as well as application specific designs are presented, and the reasoning for the design decisions. Design of the pre-installed applications in the Maemo 5 product is discussed, highlighting the UI flows, common user experience solutions and power user features. Throughout the application walk-through, the structure and "look and feel" of the applications is categorized, resulting in a conceptual design tool for 3rd party application designers and developers.

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