Visual design - a key part of mobile apps Presented at Designit, feb. 2012 In relation to GOTO Meet-up with Trifork

1. Visual design
- a key part of mobile apps
Henrik Hedegaard
Information Architect
@henrikhedegaard
Twitter

2. Designit in numbers
20 250 25
YEARS TOP BRAINS NATIONS

3. Designit in numbers
09 +3 10
OFFICES NEW COUNTRIES
DENMARK
GERMANY SPAIN
NORWAY SWEDEN
UNITED KINGDOM CHINA

4. Our Collective Brain
Identify user needs Rethink & discover
opportunities
Strategic-creative &
user driven approach
Translate into
new services
User value creates
business value

5. Service Delivery
User studies & ethnography Brand and communication Digital design
Digital & product experiences Product design & ergonomy Service innovation

6. Some of the clients

8. Your choice…
Prolong the past
Or make changes?

12. http://www.realmacsoftware.com/clear/

13. http://www.realmacsoftware.com/clear/

14. http://www.realmacsoftware.com/clear/

15. What is a good design?

16. What is a good design?

17. What is a good design?
This is actually a squirt gun
...for kids!!!

18. What is a good design?
“FILL IT UP”
This is actually a squirt gun
...for kids!!!
Press FIRE!!
“SHOOOT”

20. There is no SINGLE solution
only pointers

21. Considerations

22. Considerations
Business
Must be based on a
viable business model

23. Considerations
Business
Must be based on a
viable business model
Feasibility
Must be realistic from a
technical perspective

24. Considerations
Business
Must be based on a
viable business model
Desirability
Feasibility App must deliver
Must be realistic from a real user value
technical perspective

25. Considerations
Responsibility
Must be a win-win and
Business develop sustainable
Must be based on a end-user relations
viable business model
Desirability
Feasibility App must deliver
Must be realistic from a real user value
technical perspective

26. Process stakeholders
Develop Design Business

27. Process stakeholders
Develop Design Business
Function Form $$$$$

28. We work for the end-user!

29. We work for the end-user!

31. Potential for success when...
- it solves my problem
- it address my context
- it has a great look & feel
- it is easy to use
- it has the right functionality
- it performs great
- it inspires me in my task
...and it make me WANT
to use it again

32. Potential for success when...
- it solves my problem
- it address my context
- it has a great look & feel
- it is easy to use
- it has the right functionality
- it performs great
- it inspires me in my task
...and it make me WANT
to use it again
Business, Branding & Marketing

33. POINTERS IN MOBILE DESIGN
Who what where when and why

34. The fat-finger problem

35. The fat-finger problem

36. The fat-finger problem

37. The fat-finger problem

38. Enrich standard navigation
Huffington Post
Web-relation and totally ugly
New York Times
Bad positioning
Supplemented with pinch-gesture
Zite
Very usable, but ugly
Supplemented with tap-gesture

39. Don’t Gesturize the App

40. Don’t Gesturize the App

41. Don’t Gesturize the App

42. Consider Multi-User

43. Consider Multi-User

44. Custom pop-overs & modals

45. Custom pop-overs & modals

46. Engaging splash screens

47. Engaging splash screens

48. Engaging splash screens

49. What’s touchable??

50. What’s touchable??

51. What’s touchable??

52. Provide a “home” screen
NASA App
- One big mess
- No overview
But only if you
have the right
level of complexity

53. Provide a “home” screen

54. Provide a “home” screen

55. Provide a “home” screen

56. Guide you user

57. Guide you user

58. Simplify complexity
- Goal: engaging self service apps
- Goal: reduce service calls
- Minimal amount of buttons
- Quick monitoring of usage
- Quick history functionality
- Quick statistical coloration
- Simple mobile code / login
- Well-know interface standard

59. The Extra 10%

60. The Extra 10%

61. 10 Success Factors in IxD
SATISFACTION
LEARNABILITY MEMORABILITY
EFFICIENCY CONSISTENCY
MAPPING VISIBILITY
SIMPLICITY FEEDBACK
ERROR RECOVERY

62. FORM & FUNCTION
WHEN IS OK, OK?

63. When to accept a functionality
Develop Design Business

64. When to accept a functionality
Develop Design Business
✔ ✔ ✔

65. A DIGITAL ECO-SYSTEM
Print, as we knew it, is dead...

66. A digital eco-system

70. Service integration
- Same UI universe
- Same visual style
- Same metaphores
- Different interactions
- Different context
- Diffrent technology

71. An inclusive strategy

72. Services with purpose
Regular websites
Responsive webdesign
Web-apps
Hybrid apps
Native apps

73. NEXT
Jyske Bank Case Study

74. HAVE A BREAK

75. HAVE A BREAK

76. Jyske Bank
SmartPhone, Tablet, Responsive webdesign

77. Jyske Bank - Digital Strategy
2008 - New website
2010 - Mobile Currency calculator (iPhone)
2010 - Mobile Banking (iPhone + Android)
2011 - Responsive webdesign
2011 - Mobile Banking (iPad)

116. Submitted to App Store

117. Thanks

118. http://smallsurfaces.com/
http://www.simplecue.com/
http://powazek.com/posts/2583