The future of mobile UX

improving mobile experiences for everyone

SparkUp 2010 - 25.05.2010

Antony, Co-founder, Ribot
first, some context...




               photo source: http://www.flickr.com/photos/remik78/3647335295/
Poles prefer the mobile web
  over newspapers
  AND THEY’RE THE HIGHEST MOBILE WEB USERS IN EUROPE!

Source: http://www.ei...
a little bit about me
The mobile landscape
AS OF MAY 2010
Smartphone sales
The iPhone educated the masses
Wow, look at Symbian!
App store wars
 A GAME OF NUMBERS?




Source: Distimo
Android overtakes iPhone
 This is just the start...




Source: Distimo
onto some observations...




             photo source: http://www.flickr.com/photos/didmyself/3348346351/
Mobile is the primary method
  of accessing the internet
  IN SOUTH AFRICA. OTHER COUNTRIES WILL FOLLOW SUIT.

Source: ITU...
Analogue to Digital to Human
INTERACTIONS




               photo source: http://www.flickr.com/photos/josefstuefer/186974...
Who wants a challenge?
MOBILE UX DESIGNERS!




Pressure     Accelerometer        Time of day              Gesture

Microp...
Constraints
Constraints of mobile
BUT WHICH IS MOST IMPORTANT?


form factor                    battery

network latency              ...
Context of use
understand the behaviours




             photo source: http://www.flickr.com/photos/didmyself/3099974216/
human behaviours


understand the behaviours

what finger do we use to press the
doorbell with?

                          ...
(changing) human behaviours


understand the behaviours


what finger does the younger market
press the doorbell with?

   ...
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 ...
More than just a phone
WAKE UP CANON & NIKON




                        photo source: http://www.flickr.com/photos/brianjm...
More than just a phone
 WAKE UP CANON & NIKON




Source: http://www.flickr.com/cameras/
mobile guidelines




             photo source: http://www.flickr.com/photos/didmyself/3348346873/
Mobile is not about making
things smaller

Miniaturisation   vs                 Mobilisation




http://mobilewebbook.com
...
Simpler interfaces are better
Minimise the subconscious questions

Balance efficiency, effectiveness & satisfaction

Improv...
Simpler != dumb
JUST REMEMBER TO FOCUS ON THE CORE FUNCTION



                          an eReader app
                  ...
Simple functional example
IT’S YOUR TURN TO MAKE THE TEA




                                 source: tea round iPhone app
Don’t forget the website
FOR MARKETING AND SUPPORT




                            photo source: tearoundapp.com
Complex interface
JUST REMEMBER TO FOCUS ON THE CORE FUNCTION


                            Too many elements

           ...
Make the most of your
platform
The native debate
WITH MOBILE WEB



Native                 Mobile web
Rich                   Functional

Rewrite         ...
The blurred reality
BETWEEN NATIVE & MOBILE WEB




Hardware-accelerated CSS

Access to richer APIs

Offline storage

Chrom...
Native vs Mobile Web
The Facebook home screen
Native vs Mobile Web
The Facebook contact list
Native vs Mobile Web
TWITTER ON IPHONE
Native vs Mobile Web
Marbles^2 (by Remy Sharp) - Marbles2.com
Is it possible to make money
on the Mobile Web?




              photo source: http://www.flickr.com/photos/tom_lin/320561...
Flirtomatic
A MOBILE WEB SUCCESS




$15M rev,
$12 a mth
175k paying
customers
Apps are just posh bookmarks
IT’S ALL ABOUT SCREEN ESTATE




                           photo source: http://www.flickr.co...
Think twice about your
audience
IT PAYS TO DO YOUR HOMEWORK



Analytics

Network provider

Device platforms

Devices

Fir...
time for some stats
source: http://www.agribusinessonline.com/stats/




  Poland is the 3rd biggest
  exporter of cherries to the USA
  (DATA...
1 in 7 phones are returned
  BACK TO THE SUPPLIER


Source: 2005 Which report (UK study)




                             ...
Source: http://www.wdsglobal.com/news/whitepapers/20060717/MediaBulletinNFF.pdf




 63% of returned phones have
 no hardw...
Massive market for usable
  phones & apps
 YOU NEED TO DESIGN ‘INCLUSIVELY’




 By 2020, over half of the UK population w...
What happened to Microsoft?




             photo source: http://www.flickr.com/photos/didmyself/3099140737
Windows mobile is dead.
STOP. NOW!




Nasty

Broken App Store

Broken UX

Keep away...

                   photo source: ...
Windows
mobile

is dead.
Windows Mobile is dead.
Long live Windows Phone 7!
THE BAR IS ABOUT TO BE RAISED



UX comes first

OS built from scratch

...
Windows Mobile is dead.
Long live Windows Phone 7!
THE BAR IS ABOUT TO BE RAISED




                                photo...
and to finish...
The little things count




Polish makes the UX and app stand out

                     photo source: http://www.flickr.com...
Passion




“I haven’t worked in 3 years”

Be curious. Question everything
                           photo source: http:/...
thank you




            http://www.flickr.com/photos/ronlayters/2402199783/
dziękuję bardzo!




@ribot
            photo source: http://www.flickr.com/photos/mr_t_in_dc/3526644413/
Upcoming SlideShare
Loading in...5
×

SparkUp 2010 Mobile UX 101

2,159

Published on

Mobile UX 101 - current trends, behaviours, design considerations, common mistakes, platform choices and general advice for anyone entering the mobile design and development industry

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,159
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Polish tongue twister
    a lie - this is really a mobile 101 presentation


  • Poland spends the most time in Europe on mobile web
  • 7 years in mobile
    designer/developer/entrepreneur
    push ui boundaries,
    ideas lab for mobile user interfaces
  • a little bit of everything
    hidden nuggets/tips
    context, trends, ux
    what’s happening right now..
  • In 2009, 1.2 billion mobile devices were sold
    Nokia still stands strong in terms of global sales with 36% of the market, selling a staggering 440 million
  • Of the 1.2 billion devices sold, 174 million are "smart-phones".
    Symbian devices count for nearly 47% of this market
  • Windows is irrelevant for now
    Data from earlier in the year, so slightly out of date


  • South African mobile web usage is > than fixed line.
    It's only a matter of time until this becomes true for the western world
  • Physical interactions e.g. Touchscreen, haptics, etc
    Tangible era
  • So many things to consider and more so in the future...

  • Constraints make mobile interesting. A challenge.
    If you're not aware of the constraints, the UX will be poor.

  • Note: Constraints make mobile interesting. A challenge.
    If you're not aware of the constraints, the UX will be poor.
  • Efficiency, relevancy,
  • understand your users
  • understand your users
  • understand your users
  • Like a large bag of chocolate buttons
    single early failure - non returning user
  • Motorola
    Exit, Quit,
  • Swiss army knife. Technological advancement and usability
  • pink: iPhone 3GS, green: iPhone 3G,
    the rest: single-function devices aka cameras
    blue: Nikon D90

  • Miniaturisation (shrinking things down) vs
    Mobilisation (process of selecting the features most important to the user given the mobile context)
  • If you can't get it right in 2D, don't even consider going into 3D. Complexity and poor UX for the sake of an 80s buzz word.
        
    Simpler, more usable interfaces - consider the forgotten (and rapidly growing) markets

  • simple, aesthetically pleasing,
  • whilst we’re having tea, don’t forget the website!

  • A growing number to choose from
    Platforms can be generally split in two: native and third party
    Mobile web is the main third party contender
  • Native payment UX requires far less effort than web

  • Faster design/dev iterations
    Sometimes faster performance
  • Which do I prefer? Web
  • Native, mobile web, desktop web
  • Spot the difference?
    Looks the same.
    But more important, the same UX

  • It doesn’t look great
    Iterate fast
    new feature in 3 wks, 15% increase in rev
    operator deck placement has been key
    hybrid approach
  • all about getting in front of your eyes
    good icon design is crucial
  • dig as much as possible
    don’t make assumptions
    Blackberry’s biggest market is not enterprise
    It’s games. Why. BBM and qwerty keyboards
  • while I was searching for local statistics...

  • tell me more....


  • while I was searching for local statistics...

  • A fingernail interaction rather than a finger interaction
  • Less than 200 apps for launch
    Great potential


  • minimising the number of subconscious questions the user needs to make
  • minimising the number of subconscious questions the user needs to make


  • SparkUp 2010 Mobile UX 101

    1. 1. The future of mobile UX improving mobile experiences for everyone SparkUp 2010 - 25.05.2010 Antony, Co-founder, Ribot
    2. 2. first, some context... photo source: http://www.flickr.com/photos/remik78/3647335295/
    3. 3. Poles prefer the mobile web over newspapers AND THEY’RE THE HIGHEST MOBILE WEB USERS IN EUROPE! Source: http://www.eiaa.net/news/eiaa-articles-details.asp?id=216&lang=1
    4. 4. a little bit about me
    5. 5. The mobile landscape AS OF MAY 2010
    6. 6. Smartphone sales
    7. 7. The iPhone educated the masses Wow, look at Symbian!
    8. 8. App store wars A GAME OF NUMBERS? Source: Distimo
    9. 9. Android overtakes iPhone This is just the start... Source: Distimo
    10. 10. onto some observations... photo source: http://www.flickr.com/photos/didmyself/3348346351/
    11. 11. Mobile is the primary method of accessing the internet IN SOUTH AFRICA. OTHER COUNTRIES WILL FOLLOW SUIT. Source: ITU report photo source: http://www.flickr.com/photos/8628950@N06/2145430339/
    12. 12. Analogue to Digital to Human INTERACTIONS photo source: http://www.flickr.com/photos/josefstuefer/18697485/
    13. 13. Who wants a challenge? MOBILE UX DESIGNERS! Pressure Accelerometer Time of day Gesture Microphone Haptics ... photo source: http://www.flickr.com/photos/dunechaser/174945526
    14. 14. Constraints
    15. 15. Constraints of mobile BUT WHICH IS MOST IMPORTANT? form factor battery network latency context input mechanism memory computational power
    16. 16. Context of use
    17. 17. understand the behaviours photo source: http://www.flickr.com/photos/didmyself/3099974216/
    18. 18. human behaviours understand the behaviours what finger do we use to press the doorbell with? http://www.flickr.com/photos/tscarlisle/107776922/
    19. 19. (changing) human behaviours understand the behaviours what finger does the younger market press the doorbell with? http://www.flickr.com/photos/phototropism/62931265/
    20. 20. Time for a snack... DATA-SNACKING small snippets of info 30-60 seconds simple, but repetitive regular
    21. 21. 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.flickr.com/photos/8586443@N03/1491516038/
    22. 22. More than just a phone WAKE UP CANON & NIKON photo source: http://www.flickr.com/photos/brianjmatis/4149696324/
    23. 23. More than just a phone WAKE UP CANON & NIKON Source: http://www.flickr.com/cameras/
    24. 24. mobile guidelines photo source: http://www.flickr.com/photos/didmyself/3348346873/
    25. 25. Mobile is not about making things smaller Miniaturisation vs Mobilisation http://mobilewebbook.com http://www.flickr.com/photos/tridi_animeitor/2224661744/
    26. 26. Simpler interfaces are better Minimise the subconscious questions Balance efficiency, effectiveness & satisfaction Improve glance-ability photo source: http://www.flickr.com/photos/lagiuspo/92136687/
    27. 27. Simpler != dumb JUST REMEMBER TO FOCUS ON THE CORE FUNCTION an eReader app should focus on the ‘reading experience’ photo source: http://www.flickr.com/photos/lagiuspo/92136687/
    28. 28. Simple functional example IT’S YOUR TURN TO MAKE THE TEA source: tea round iPhone app
    29. 29. Don’t forget the website FOR MARKETING AND SUPPORT photo source: tearoundapp.com
    30. 30. Complex interface JUST REMEMBER TO FOCUS ON THE CORE FUNCTION Too many elements Poor information hierarchy Functional uncertainty Buttons generally far too small Source: http://www.flickr.com/photos/gruber/2635257578/
    31. 31. Make the most of your platform
    32. 32. The native debate WITH MOBILE WEB Native Mobile web Rich Functional Rewrite Tweak All-you-can-eat APIs Reduced function set App store discovery Web discovery
    33. 33. The blurred reality BETWEEN NATIVE & MOBILE WEB Hardware-accelerated CSS Access to richer APIs Offline storage Chromeless experience
    34. 34. Native vs Mobile Web The Facebook home screen
    35. 35. Native vs Mobile Web The Facebook contact list
    36. 36. Native vs Mobile Web TWITTER ON IPHONE
    37. 37. Native vs Mobile Web Marbles^2 (by Remy Sharp) - Marbles2.com
    38. 38. Is it possible to make money on the Mobile Web? photo source: http://www.flickr.com/photos/tom_lin/3205617022
    39. 39. Flirtomatic A MOBILE WEB SUCCESS $15M rev, $12 a mth 175k paying customers
    40. 40. Apps are just posh bookmarks IT’S ALL ABOUT SCREEN ESTATE photo source: http://www.flickr.com/photos/carlotardani/3155442938
    41. 41. Think twice about your audience IT PAYS TO DO YOUR HOMEWORK Analytics Network provider Device platforms Devices Firmware versions etc... photo source: http://www.flickr.com/photos/thomashawk/155918164/
    42. 42. time for some stats
    43. 43. source: http://www.agribusinessonline.com/stats/ Poland is the 3rd biggest exporter of cherries to the USA (DATA FROM 2003) photo source: http://www.flickr.com/photos/dudleycarr/3668145869
    44. 44. 1 in 7 phones are returned BACK TO THE SUPPLIER Source: 2005 Which report (UK study) photo source: http://www.flickr.com/photos/andricongirl/4567650298/
    45. 45. Source: http://www.wdsglobal.com/news/whitepapers/20060717/MediaBulletinNFF.pdf 63% of returned phones have no hardware/software faults SO, WHAT’S THE PROBLEM? Handset configuration / settings issue Struggling with functionality / usability of device Device did not meet expectations photo source: http://www.flickr.com/photos/tom_lin/3208454911/
    46. 46. Massive market for usable phones & apps YOU NEED TO DESIGN ‘INCLUSIVELY’ By 2020, over half of the UK population will be > 65 1 in 3 Europeans can benefit from an inclusive approach 65% of americans have lost interest due to complexity Source: http://www.btplc.com/inclusion/Usefuldownloads/index.htm#designs photo source: http://www.elmbrook.org/UserFiles/Image/Volunteer%20Opportunities/Elderly%20Hands.jpg
    47. 47. What happened to Microsoft? photo source: http://www.flickr.com/photos/didmyself/3099140737
    48. 48. Windows mobile is dead. STOP. NOW! Nasty Broken App Store Broken UX Keep away... photo source: http://www.flickr.com/photos/perspective23/3677677277/
    49. 49. Windows mobile is dead.
    50. 50. Windows Mobile is dead. Long live Windows Phone 7! THE BAR IS ABOUT TO BE RAISED UX comes first OS built from scratch Discoverability fixed Focus on quality rather than quantity
    51. 51. Windows Mobile is dead. Long live Windows Phone 7! THE BAR IS ABOUT TO BE RAISED photo source:
    52. 52. and to finish...
    53. 53. The little things count Polish makes the UX and app stand out photo source: http://www.flickr.com/photos/tom_lin/3186488124/
    54. 54. Passion “I haven’t worked in 3 years” Be curious. Question everything photo source: http://www.flickr.com/photos/taraethers/
    55. 55. thank you http://www.flickr.com/photos/ronlayters/2402199783/
    56. 56. dziękuję bardzo! @ribot photo source: http://www.flickr.com/photos/mr_t_in_dc/3526644413/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×