Soini - Designing Ui For Maemo 5

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 deﬁning ﬁnger 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 ﬁlters Media formats OpenMax

Contact list Proﬁle 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 Speciﬁcation Fremantle Master Layout Guide http://bit.ly/13P9Ou http://bit.ly/3o8ttP http://bit.ly/MhCb4

http://www.ifanr.com	1272
http://www.visionunion.com	296
http://www.chinaui.com	113
http://ucdchina.com	69
http://xianguo.com	54
http://www.slideshare.net	16
http://www.zhuaxia.com	7
http://laughig.blogbus.com	4
http://reader.youdao.com	2
http://cache.baidu.com	2
http://visionunion.com	1
http://wangyun1900.spaces.live.com	1
http://ifaner.com	1
file://	1
http://zhuaxia.com	1
http://coolshell.cn	1
http://static.slidesharecdn.com	1
http://www.uipower.com	1

Soini - Designing Ui For Maemo 5

by Mox Soini on Oct 11, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 1,843

Statistics

Soini - Designing Ui For Maemo 5 — Presentation Transcript