1. Hello everyone!
My name is Filip Williamsson
Interaction Designer at Mobiento
Let’s talk Mobile websites
2012-09-19

2. AGENDA
1.
2.
The mobile shift - Yesterday, Today and Tomorrow
Designing for mobile - a user-centered approach
3. How to implement a solution
4. The working process
5. Your doggy bag
© MOBIENTO

3. Team players
GRAPHIC
ARTDIRECTOR DESIGNER
INTERACTION PROGRAMMER
PLANNER DESIGNER
© MOBIENTO 3

4. “DESIGNING INTERACTIVE
PRODUCTS TO SUPPORT
PEOPLE IN THEIR EVERYDAY
AND WORKING LIVES”
© MOBIENTO 4

5. Sitemaps and diagrams
Home Model
Poppa "Book a Test
Drive"
Test Drive
Choose your
car
Locate Find Find
Locate your
NEARBY
SEARCH NEARBY SEARCH
List List
Your personal Dealer
information information
© MOBIENTO 5

6. Sketches and concepts
© MOBIENTO 6

7. Wireframes and flows
© MOBIENTO 7

8. THEMOBILESHIFT
© MOBIENTO 8

9. YESTERDAY
2YEARS AGO
© MOBIENTO 9

10. THIS WAS THE WEB
© MOBIENTO 10

11. MOBILEAPPS
MOBILEAPPS
MOBILEAPPS
© MOBIENTO 11

12. Amount of projects
Mobile apps Mobile web
90
80
70
60
50
40
30
20
10
0
© MOBIENTO 12

13. Mobile web usage vs. mobile app usage
Mobile apps Mobile web
90
80
70
60
50
40
30
20
10
0
June 2010 December 2010 June 2011
Source: Flurry Analytics
© MOBIENTO 13

14. ON-THE-GO
ME,HERE,NOW
© MOBIENTO 14

15. FOCUSONLYON PRIMARYTASK
CONTENT REMOVED
© MOBIENTO 15

16. TODAY AND
TOMORROW
© MOBIENTO 16

17. Amount of projects today
Mobile apps Mobile web
90
80
70
60
50
40
30
20
10
0
© MOBIENTO 17

18. 28%OFAMERICANSUSEA
MOBILEDEVICEAS THEIR
PRIMARYWAYOFACCESSING
THEWEB
Source: Pew Research Center, 2011-07-11
© MOBIENTO 18

19. THENEW“PC”
© MOBIENTO 19

20. Location of smartphone usage
100%
75%
50%
25%
0%
Denmark Finland Norway Sweden
Home Work On the go
In a store Resturant Public transport
Base: Smartphone users
© MOBIENTO 20

21. MOBILE IS NOT THE FUTURE.
IT WAS YESTERDAY.
© MOBIENTO 21

22. WELCOMEMOBILITY
© MOBIENTO 22

23. THIS WILL BE THE WEB
© MOBIENTO 23

24. THE NEWMULTI-SCREENWORLD
© MOBIENTO 24

25. Sequential screening is common &
mostly completed within a day
90%
Use multiple screens
sequentially to
accomplish a task
over time
98% move between devices that same day
Source: Google, The New Multi-screen World, 2012-08
© MOBIENTO 25

26. Consumers take a multi-device path to purchase
61% 4%
65 Start on a
% Smartphone
Continue on
a PC/Laptop
Continue on
a Tablet
19%
Continue on
a Smartphone 5%
25 Start on a
% PC/Laptop Continue on
a Tablet
10%
11 Start on a
% Tablet
Continue on
a PC/Laptop
Source: Google, The New Multi-screen World, 2012-08
© MOBIENTO 26

27. SEAMLESS DIGITAL EXPERIENCE
BECOMES IMPORTANT
WHEN USERS MOVE BETWEEN
DEVICES
© MOBIENTO 27

28. USERS DON’T WANT TO DO
ONE THING ON MOBILEANYMORE,
THEY WANT TO DO IT ALL
© MOBIENTO 28

29. DESIGNINGAMOBILE
WEBSITE,AUSER-
CENTEREDAPPROACH
© MOBIENTO 29

30. 30
? ? ?
KNOW YOURCUSTOMER
(ASA USER)
Mobiento

31. FOCUS ON PRIMARY
USERTASK
© MOBIENTO 31

32. AT THE SAME TIME
CATER FOR THE REST
© MOBIENTO 32

33. Focus on primary user task
© MOBIENTO 33

34. MOBILEISNOT ABOUTMAKING
THINGS LESS OR SMALLER
© MOBIENTO 34

35. DESIGN WITH MOBILE
DEVICE CONSIDERATIONS
© MOBIENTO 35

36. Small screens
© MOBIENTO 36

37. USERSDON’TREAD,THEYSCAN
© MOBIENTO 37

38. What some users see
© MOBIENTO 38

39. INTERACTION
BYTOUCH
© MOBIENTO 39

40. OFTEN JUST ONE
THUMB
© MOBIENTO 40

41. © MOBIENTO 41

42. © MOBIENTO 42

43. MINIMIZE USER INPUT
© MOBIENTO 43

44. Keyboard input cost
effort
© MOBIENTO 44

45. If input is necessary - Auto-complete to
use correct keyboard minimize user input
© MOBIENTO 45

46. TAKEUSEOF
MOBILECAPABILITIES
ANDENHANCE
© MOBIENTO 46

47. LOCATION
© MOBIENTO 47

48. © MOBIENTO 48

49. CALL
© MOBIENTO 49

50. © MOBIENTO 50

51. © MOBIENTO 51

52. REUSE PATTERNS
THROUGHOUT THE
MOBILE FIELD
© MOBIENTO 52

53. Facebook menu is Footers to prevent dead
widely spread ends
© MOBIENTO 53

54. DESKTOPWEBSITE
AS A STARTINGPOINT
FORINFORMATION
© MOBIENTO
ARCHITECTURE 54

55. A typical desktop website information structure
© MOBIENTO 55

56. PRIORITIZE Content Current site New site
Header yes yes
Profile yes yes
Navigation yes yes
Article yes yes
... yes no
... no yes
... yes yes
© MOBIENTO 56

57. YOUR WEB CONTENT IS USELESS
UNLESS IT SUPPORTS
· KEYBUSINESS OBJECTIVES
· A USER IN COMPLETING A TASK
Source: Kristina Halvorson
© MOBIENTO 57

58. Rebuilt structure to support small screen devices and find-ability
© MOBIENTO 58

59. TAP QUALITY
MORE IMPORTANT THAN
TAPQUANTITY
© MOBIENTO 59

60. PROGRESSIVE
DISCLOSURE
© MOBIENTO 60

61. Desktop example
© MOBIENTO

62. Desktop example
© MOBIENTO

63. Page 1: Progressively
disclosed
A B
D
C E
© MOBIENTO

64. Page E
E2
© MOBIENTO

65. © MOBIENTO 65

66. © MOBIENTO 66

67. PERFORMANCE
© MOBIENTO 67

68. MOSTOF THE PHONEUSERS
WILL ONLY WAIT 5 SECONDS
OR LESS FOR A PAGE TO LOAD
Source: Equation Research on behalf of Compuware, 2011 “74% of mobile phone users will only wait 5 seconds or less for a page to load”
© MOBIENTO 68

69. HOW TO IMPLEMENT
© MOBIENTO 69

70. SEPARATE MOBILESITE
OR
RESPONSIVESITE
© MOBIENTO 70

71. SEPARATE MOBILE SITE:
AFTONBLADET
© MOBIENTO 71

72. RESPONSIVE SITE:
BOSTON GLOBE
© MOBIENTO 72

73. DEMO
© MOBIENTO 73

74. WHAT’S THE DIFFERENCE?
Responsive Mobile site
Pros Cons Pros Cons
• One codebase • Complex solution, requires clear • Full content control • Complex strategy and CMS handling
information architecture. • Streamlined for mobile will • Might need separate hosting
• Does not require device
detection in the same way • Requires image strategy and image make it optimal for mobile
scaling devices.
• Users gets all the content that
they expect.
© MOBIENTO 74

75. THEPROCESS
© MOBIENTO 75

76. Research
Process Method:
User Communication Iterative Design & Development Prototype presentation
Test
Prototype
User Comm Multiple
Research Strategy Sketch Device
Prototype
Visual
Design
Wireframe
© MOBIENTO 76

77. WAR ROOMS
© MOBIENTO 77

78. YOUR DOGGY BAG 12
RE 20
O
1. One seamless multi-device experience
F
It’s not mobile, it’s mobility and everywhere - information should be easily retrieved
E
whatever device you use
T B
2. Involve yourself and your users
ES
Client knows a lot about customers (users!) and business needs
B
3. Prioritize information
No one dares - mobile forces you
4. Never finish iterate
Websites are never finished, keep iterate and improve
© MOBIENTO

79. That’s it, speak soon!
Filip Williamsson
070 277 93 12
filip.williamsson@mobiento.com
www.mobiento.com
© MOBIENTO