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 ...
Reduced set of UI elements • The key in defining finger usability • The key in attaining UI consistency • Accelerat...
Compared to past • The UNIX philosophy – “do one thing and do it well". • Finger usage – Larger size of UI elements ...
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 Navigati...
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 fil...
Contact list Profile Alarms Bluetooth 3G / Wlan networking Integration ...
Keep in mind • Simplicity • Focus on key use cases • Fluent and seamless • Not cramming all in the same place ...
Thanks! Designing UI for Maemo 5 – Mox Soini Hildon 2.2 UI Style Guide Hildon 2.2 Widget ...
Upcoming SlideShare
Loading in …5
×

Soini - Designing Ui For Maemo 5

5,738 views

Published on

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.

Published in: Design
0 Comments
15 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

Show More
No Downloads
Views
Total views
5,738
On SlideShare
0
From Embeds
0
Number of Embeds
1,954
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Soini - Designing Ui For Maemo 5

  1. 1. Designing UI for Maemo 5 Mox Soini
  2. 2. Design Process
  3. 3. Goal What ideas are kept, What ideas are dropped
  4. 4. Cannot extrapolate, it’s like hand-drawn curve
  5. 5. Changes happen at varying speed
  6. 6. Final result is often Unexpected
  7. 7. Maemo 5
  8. 8. Easily understandable with Soul Simple – not too neutral Positive surprises Clean Delights
  9. 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. 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. 11. UI Flow
  12. 12. Navigation Structure – Line
  13. 13. Accounts Folders Messages Viewer Email
  14. 14. Navigation Structure – Summary
  15. 15. Music Video Summary Internet Radio Media Player
  16. 16. Navigation Structure – T-Bone
  17. 17. Month Week Event Agenda Calendar
  18. 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. 19. Viewing content Manipulating content Power use / shortcuts for content
  20. 20. There’s NO app for that It’s a plugin!
  21. 21. VOIP services IM services Sharing services Plugins Media filters Media formats OpenMax
  22. 22. Contact list Profile Alarms Bluetooth 3G / Wlan networking Integration Metadata Location Music / Video File Choosers playing Camera
  23. 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. 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

×