Mobile UX - the intricacies of designing for mobile devices

MOBILE USER EXPERIENCE the intricacies of designing for mobile devices Antony Ribot, CEO, Ribot UX Corner - 08.01.2009 http://www.ﬂickr.com/taraethers

First of all, some context BACKGROUND started at tomato (’99) then studied ants, bees and termites joined the mobile scene 5 years ago co-founded ribot 1.5 years ago ceo / art director

Why does ribot exist? ribot = ideas lab for mobile UIs explore and play with interfaces in small spaces passion for pushing UI boundaries

Personal deﬁnitions User experience Interaction the qualitative design emotional how the user description of interacts with the multiple interactions object with an object Method Relationship http://www.ﬂickr.com/photos/ronlayters/586656022/

Constraints of mobile THERE ARE MANY form factor battery network latency context input mechanism memory computational power

Context of use

Behaviours & usage

The mobile environment IT’S LIKE MARS single early failure = non-returning user crucial ﬁrst 30-60 seconds usage

Mars, Neptune, Pluto... THE ENVIRONMENT DIFFERS, DEPENDING ON WHERE YOU ARE user behaviour handset range operators data allowance / pricing e.g. South Africa, Europe, Japan...

Time for a snack... DATA-SNACKING small snippets of info 30-60 seconds simple, but repetitive regular

Re-use learnt behaviours Re-use interactions inherent in the device Minimise the number of surprises soft key positions colour menu navigation tone of voice http://www.ﬂickr.com/photos/8586443@N03/1491516038/

Going into details...

Mobile is not about making things smaller Miniaturisation Mobilisation vs http://mobilewebbook.com http://www.ﬂickr.com/photos/tridi_animeitor/2224661744/

It’s all about the subtleties Fewer options = simple and more effective interface Polish makes the UX and app stand out

Default states in a UI Grid menus and lists Most important function highlighted? Maximise number of options a click away http://ﬂickr.com/photos/moonypics/2130645953/

Faking it Low latency is key to the user experience... ...especially with touch devices Make immediate visual changes... ...whilst we wait for network/other process http://ﬂickr.com/photos/rabataller/638250907/

Working around the 3G icon

Reward-based exploration FOCUSING ON THE KEY FEATURE AND DOING IT WELL keep it as simple as possible (the hard part) 1. allow the user to play within safe boundaries 2. user’s comfort increases 3. sense of exploration increases 4. discovery of features almost by accident http://www.ﬂickr.com/photos/devos/95230930/

Opera Mini A REWARD-BASED MOBILE BROWSER page by page scrolling

Opera Mini A REWARD-BASED MOBILE BROWSER Short-cuts in the soft key menu

Process

Mobile UX - the easier path Workshop Idea exploration Paper wireframes Formalised digital wireframes User/expert testing Aesthetic concepts Screen design Rapid prototype Docs Motion design Art direction http://www.ﬂickr.com/photos/bbsc30/168832715/

How to deal with diversity select lead handsets for your target audience use the design process to tackle “graceful degradation” http://www.admob.com/ http://www.ﬂickr.com/photos/joaomoura/2661761961/

Why use rapid prototyping test ideas quickly in a tangible environment extremely useful reference for developers an interactive showcase of the intended UX

Mobile rapid prototyping tools Flash (lite v3.0) XHTML + CSS Nokia Web Runtime Silverlight Dashcode Pen & paper http://www.ﬂickr.com/photos/brianauer/2249169858/

Questions Antony Ribot ribot.co.uk http://www.ﬂickr.com/photos/ronlayters/2402199783/

http://www.socialbeta.cn	591
http://www.josuesierra.net	202
http://paper.li	144
http://www.20ju.com	111
http://www.slideshare.net	86
http://mobile.csdn.net	81
http://msc-technology.wikispaces.com	79
http://thomassanders.tumblr.com	65
http://fbapp.beat-direct.com	22
http://thecusuilab.blogspot.com	7
http://us-w1.rockmelt.com	6
http://www.infinita.co.jp	6
http://cache.baidu.com	4
https://msc-technology.wikispaces.com	4
http://hi3ms.huawei.com	4
http://www.chineselinuxuniversity.net	3
http://social.weizhuli.com	3
http://tomfisher.posterous.com	3
http://innove3.com	3
http://translate.googleusercontent.com	3
http://scrum.myriadgroup.com	2
http://a0.twimg.com	2
http://design-intranet.telekom.de	2
http://uxbits.com	1
http://www.dotnetsz.com	1
http://www.dashdot.nl	1
http://www.mikiwiki.aqalert.net	1
http://mikiwiki.aqalert.net	1
http://www.365ren.com	1
http://www.zhuaxia.com	1
http://xianguo.com	1
http://twitter.com	1

Mobile UX - the intricacies of designing for mobile devices

by Antony Ribot on Jan 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

32 Embeds 1,442

Statistics

Mobile UX - the intricacies of designing for mobile devices — Presentation Transcript