1. Mobile UX — State of the Art & Challenges
UXperts.mobi, April 29th 2013
Johan Verhaegen

3. TV
mobile
desktop touch
web
Giving
technology
a
human
face

4. The
world
outside
• Users
• Tasks
• Context
Business
context
• Business
domain
• Vision
&
mission
• Technology
• Data
Mobile
UX
strategy
• NaCve
• Web
• mobile
• responsive

5. Business context

6. “Skate where the puck’s going, not where it’s been.”
Wayne Gretzky
Walter
Gretzky
‘Gretzky’s
Office’

10. hKp://wiki.developerforce.com/page/NaCve,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_ApplicaCon_Development_OpCons

11. Challenge n°1 - So, do you skate where the puck’s going?

12. The world outside
users • tasks • context

13. “Start with the customer and work backwards.”
Jeff Bezos

14. Let's
get
out
of
this
building…

15. …and
enter
into
the
real
world

16. hKp://www.mobify.com/blog/

17. Your
building.
Do
you
get
out
from
:me
to
:me?
Challenge
n°
2

18. Mobile UX strategy
native • mobile • responsive

19. “You don’t walk into a hardware store, notice a good-
looking shovel, then say “Boy this sure looks like a mighty
fine looking shovel. I’m gonna head home and start
finding stuff to dig up with this here shovel.”
Brad Frost, blogpost “Native vs Web” is total bullshit, July 2011

20. the native road

22. “As of this writing, there’s no contest: Ship [native] mobile apps if you can afford
it
(…)
We measured a success rate of 74 percent when people used [native] mobile apps,
which is much higher than the 64 percent recorded for mobile-specific websites.”
Jakob Nielsen, Mobile Usability, 2013

23. Jakob
‘we
know,
because
we’ve
seen
it
happen’
Nielsen
Jakob
Who?

24. § When to build?
§ you want
§ rich interaction
§ fluent animations
§ full access to device functionality
§ shiny graphics
§ on a level you would struggle with HTML5 (at the time of this
writing)
§ you can afford it (and the price tag tends to go up and up and…)
§ more platforms, often forked in
¨ sub-platforms: e.g. iOS for iPhone and iPad
¨ sub-versions: Android Honeycomb, Ice Cream Sandwich,
Jelly Bean,…
§ native development is not a walk in the park
The native road - when
native

25. § When to build? <ctd>
§ you want to be present in app stores
§ your competitors have already set up camp there
§ you like some cash
¨ minus a 30% cut for the [platform] owner
§ your users will download updates, won’t they…?
The native road - when
native

26. § Your focus is on
§ best possible (device-specific) UX
§ multitouch
§ fast graphics (how’s the refresh rate?)
§ fluid animations
§ ease of use
§ a solid business case
The native road - focus
native

33. HAZMAT
evac
Cargo
Decoder

36. § Limited continuity between different contexts
§ No comparable desktop and mobile experience
§ Features and content not equally likely to be accessed
on multiple devices
§ Other iOS native apps already being used
§ Interesting times…
Nokeos design strategy

37. The web road

38. “Once you start thinking in terms of networks, it just doesn’t make much
sense to prefer local apps, with downloadable, installable code that
needs to be constantly updated.
(…)
But we’re not yet in a world of infinite speed, so that’s why we have
mobile apps and PC and Mac software on laptops and phones. That’s why
there are still Xbox games on discs. That’s why everything isn’t in the
cloud. But eventually the technology wants it all to be up there.”
Marc Andreessen, Wired Magazine, April 2012

39. Marc
‘a
lot
of
things
you
want
to
do
as
part
of
daily
life
can
now
be
done
over
the
internet’
Andreessen
Marc
Who?

40. the web road

42. § Mobile-optimized websites and web applications
§ Living on the web
§ Often a subset of content/features of the
“normal” version of the website/web application
§ but what’s important? what’s not?
-> user research (esp. data analysis) will help you out
§ A wide audience reach
The web road, direction mobile

43. § When to build?
§ your users’ goals differ depending on device/context
§ you offer ‘simple’ functionality like look-ups and
simple workflows
§ you need speed
§ you don’t need
§ lots of editing or data manipulation
§ on-device functions
The web road, direction mobile - when

44. § Your focus is on
§ stripping features that are not the core of the mobile
use case
§ reducing ⎜ removing ⎜ demoting
§ enlarging interface elements
§ providing an emergency exit
§ cross-link from desktop site (or ‘full site’) to mobile site and
vice versa
The web road, direction mobile - focus

45. Uw kind wil u iets vertellen
KidsTennisishetVTV-opleidingsconceptvoorkinderenvanaf3jaar.Deopleidingisopgedeeldinvaardigheidsniveaus
die telkens een andere kleur hebben. Kinderen leren stap voor stap tennissen op een aangepast terrein met een
ander type bal.Aan de hand van testjes en diploma’s kunnen ook de ouders de tennisevolutie van hun kind volgen.
Een KidsTennisser beleeft niet alleen veel plezier,hij of zij leert ook op een kwaliteitsvolle manier tennissen.Meer
info? Surf dan naar kidstennis.be en zoek een KidsTennisclub in uw buurt!
Omdat bewegen gezond is

48. f l u i d g r i d s
f l e x i b l e m e d i a
m e d i a q u e r i e s
©
ezmarkup.com/learn-­‐how-­‐to-­‐design-­‐a-­‐mobile-­‐website.html
©
2013
Brad
Frost

49. “Perhaps there’s a compelling reason to keep your site’s desktop and mobile
experiences separate, or perhaps your content would be better served by a
responsive approach. Only you and your users know for certain.”
Ethan Marcotte - Responsive Web Design, 2011

50. That’s
right.
This
guy
sCll
has
to
prove
a
thing
or
two.
Like
most
of
us.
Ethan
Who?

51. § When to build?
§ you want continuity between different contexts
§ you want a seamless multi-device experience
§ the features and content you offer are equally likely
to be accessed on multiple devices
§ you don’t ‘over-code’
§ might indicate that you need to go native or mobile
§ and that might even be cheaper to build and maintain
The web road, direction responsive - when

52. § Your focus is on
§ content/feature-driven design
§ tiny screen usability
§ multi-device customization
§ touch interaction
¨ gestures
§ design patterns
¨ navigation, data grids, forms,…
§ graphical design
¨ typography, images, backgrounds,…
The web road, direction responsive - focus

54. native
Challenge
n°
3
-­‐
So,
which
road
will
you
choose?

55. Mobile
UX
strategy
• NaCve
• Web
• mobile
• responsive
The
world
outside
• Users
• Tasks
• Context
Business
context
• Business
domain
• Vision
&
mission
• Technology
• Data

56. See also
- www.higroup.com/news-publications/white-papers
- www.higroup.com/cases
De Regenboog 11
2800 Mechelen
+32 (0)15 40 01 38
www.higroup.com
@higroup
Human Interface Group
Human Interface Group
johan.verhaegen@higroup.com
@johanverhaegen