Designing Immersive Mobile Experiences - Converge 2013

7/28/2019 Designing Immersive Mobile Experiences - Converge 2013

1/87


2/87


3/87


4/87


5/87


6/87


7/87

PROS TO NATIVE APPS Use existin conventions and native UI

elements Most responsive to touch, superior physics,

complex animations Push notications, social media inte ration

Marketin advanta es to bein in theApp Store


8/87

CONS TO NATIVE APPS Native developers arent cheap or plentiful,

particularly for iOS Lon er dev time means hi her costs Apple App Store submission process

Additional effort to support multipleplatforms: iOS, Android, Blackberry, Windows


9/87

PROS TO HYBRID APPS Offers many advanta es of native app Less development cost & e ffort


10/87

CONS TO HYBRID APPS Not as responsive to touch/swipe, di fficult to

support complex physics Users expect native behavior and are subtly

disappointed when it doesnt deliver


11/87

PROS TO A RESPONSIVE SITE

Easy to develop, deploy and update One site, many devices Works across platforms


12/87

CONS TO MOBILE WEB SITES Lack of native UI elements

Fewer complex animations Lack of exposure in the App Store

Cant do push notications, cant inte ratewith the users contacts/social media


13/87


14/87

SEAMLESSNESSerases the line between thephysical and the virtual world


15/87

Touch makes immersion andseamless experiences possible


16/87


17/87


18/87


19/87

We are movin towards amouseless future


20/87

Touch is thrillin because ofthe lack of mediation


21/87

Seamlessness requires thesuspension of disbelief


22/87

Suspension of disbeliefrequires awless technolo y


23/87

Seamless desi n requiresnew, touch-specic patternsand paradi ms


24/87

User testin is the only way tovalidate seamlessness


25/87

SEAMLESSNESS TAKEAWAYS Enabled by the ma ic of touch Requires suspension of disbelief and

awless technolo y performance Necessitates new, touch-specic UI patterns Destroyed by anythin clunky or

unexpected Happens in the minds of users


26/87


27/87

What do users want to do?

Why are they doin it?

Where are they doin it?


28/87

There is no substitute for userresearch and user testin


29/87

User behavior is context-specic


30/87


31/87


32/87


33/87


34/87

Mobile-optimizin meansresearch-driven,context-specic desi n


35/87

Use research to identifyunique contexts forphone vs tablet vs desktop


36/87


37/87


38/87

26% of apps downloaded areonly used once


39/87

More features != More app usa e


40/87

Cuttin superuous featurescreates more immersiveexperiences


41/87

30 SECOND RULE:

If I cant do somethin in 30seconds or less I will neveruse your app a ain


42/87

Immersive apps o ffer hi hlyedited avenues for exploration


43/87


44/87


45/87

Quick wins build condencein new users


46/87

Seamlessness builds withfamiliarity


47/87

Speed and responsivenesslead to lon er, immersiveinteractions

Speed Familiarity Condence Exploration


48/87

Choose the ri ht metrics tomeasure and et client buy-in


49/87

Launch small and keepiteratin


50/87

Break sets of features out intomultiple apps


51/87

PLANNING TAKEAWAYS Extra features do not make an app extra

immersive 30 seconds to your most critical function Offer carefully edited avenues for

exploration Anticipate user needs and enhance the

experience in context specic ways.


52/87


53/87

Desi n = problem solvin


54/87

Immersive desi n =solvin fundamental problems+ layer of ma ic and deli ht


55/87

Navi ation is critical to yourmobile experience


56/87


57/87


58/87


59/87


60/87


61/87

One door, one exit


62/87


63/87


64/87


65/87


66/87


67/87


68/87

Transitions and animationsarent eye candy; they provideimportant user feedback


69/87

Use the z-axis to layer screensand describe relationshipsbetween content


70/87


71/87


72/87

Animation should alwaysmimic real world physics


73/87

Good er onomics is key tocreatin seamlessness

ima e credit: Josh Clark


74/87


75/87

Reduce the number of itemson each screen


76/87

Secret panels and hiddendoors streamline UI and o fferen a ement for expert users


77/87


78/87

Only hide as much as youhave to, and o ffer stron visual cues


79/87

Use familiar metaphors


80/87

Make the next actionpainfully obvious


81/87

Reward users for every touch


82/87

Super-realism extendsinteractions in a way thatsboth excitin and believable


83/87


84/87

DESIGN TAKEAWAYS

Optimize navi ation for discoverability Help users build mental maps Use animation to provide information,

not eye candy Dont for et to consider er onomics Hide options in secret panels, but only

when necessary Look for opportunities to create Super

Realism


85/87

Nobodys ot this perfectly ured out yet


86/87

Go make somethin awesome


87/87

THANK YOU!Follow me on Twitter: @heywren

Documents

Designing Immersive Mobile Experiences - Converge 2013