App Design – Size Makes a difference Presented at Designit, May 2011. In relation to GOTO Meet-up with Trifork Public.

1. Hello!
Appare Designit
Design
We
Størrelsen GØR en forskel
Henrik Hedegaard
Information Architect
@henrikhedegaard (yes, I’m on twitter!)

2. About
Born 1991 – in Aarhus
Today 180+ Designits
9 offices across Europe – strategic-creative zoo
Aarhus, Copenhagen, Munich, Oslo, London, Madrid, Barcelona, Gothenburg & Shanghai
19 nationalities – multi-cultural
Average age 33

3. Product Design Digital Design
Instructional Design Brand & Communication
Design Research
Service Innovation

5. Banking apps
Bankboks JB’s bankmiljø Tegnebog Personlig mobilbank
Bank Bruger

7. Tablets vs. SmartPhones
iPad vs. iPhone

9. How is iPad the new awesome?

10. Bigger keyboard?

11. More POWER???

12. More device memory?

13. Content defines the app,
not the machinery

14. User
es Expe
centri c ser vic r ie n
User ce!
Rethink approach!
Opportunity Solution

15. Key device differences
Usage, interaction and UI metaphors

16. Device usage
Simplicity AND complexity

17. Danmarks Medie- og Journalisthøjskole
The print media salvation!!

18. Danmarks Medie- og Journalisthøjskole
The new lean-back media!
Lean-forward, not only for SmartPhones

19. Danmarks Medie- og Journalisthøjskole
Tablets support both
We’re facing a whole new game!

21. SmartPhones are personal
Micro-tasking, localized, entertainment

24. Tablets are shared
Complexity, social, intuitive, multi-touch

25. Business Insider
Business Insider iPad Survey
850 respondents

26. Business Insider
On average, iPad owners use
the tablet are used 1-5h per day

27. Business Insider
35% used on web browsing
22% used on email & social media
12% used on video
12% used on games
19% used on other apps

28. Business Insider
40% use it as laptop replacement

29. Business Insider
A healthy tablet ecosystem

30. Interaction design
Natural User Interfaces through touch

31. What defines a NUI?
When users operates through intuitive actions
related to natural, everyday human behavior.

32. Direct Manipulation
We still love you, but...

33. A new sheriff in town

34. Touch makes you interact directly
with the primary object (content)

35. Gestures are the keyboard
shortcuts of touch interfaces

36. Big screens invite big gestures

37. Touch Gesture
Reference Guide
Luke Wroblewski
www.lukew.com/ff/entry.asp?1071

39. Physical limitation
Match level of touch and usage

40. Layered content
Step-wise touch interaction

44. Ableton Midi Controller

45. Uzu - kinetic multitouch particle visualizer

46. !
Big screens invite big gestures
Content is control AND interface

48. “ Perfection is achieved, not
when there is nothing more
to add, but when there is
nothing left to take away.

49. Design metaphors
Visually and interaction

50. FAIL!

51. New media, new guidelines
But they are ONLY guidelines

52. Guidelines are Guideline
Not a holy grail
FA IL!
E PIC

53. UX MAG
1. Support All Orientations
2. Enhance Interactivity (Don’t Just Add Features)
3. Flatten Your Information Hierarchy
4. Reduce Full-Screen Transitions
1.
5. Support All Orientations
Enable Collaboration and Connectedness
6. Add Physicality and Heightened Realism
2.
7. Add Physicality and Heightened Realism
Delight People with Stunning Graphics
8. De-emphasize User Interface Controls
3.
9.
Delight People with Stunning Graphics
Minimize Modality
4.
10. De-emphasize User Interface Controls
Rethink Your Lists
11. Consider Multi-finger Gestures
5.
12. Rethink Your Lists
Consider Popovers for Some Modal Tasks
13. Restrict Complexity in Modal Tasks
14. Downplay File-Handling Operations
15. Ask People to Save Only When Necessary
16. Start Instantly
17. Always Be Prepared to Stop

54. Realism in the keyword

55. Old design techniques
are not necessarily old fashion

56. Now, many early design trends

58. The best user interface is
when we perceive no interface

59. Perception is more than visual
We hold, see, hear, feel

60. Metaphors binds it all together

61. Remember page flips?
E-reader magazines

62. Easy, intuitive and natural
But often poorly executed

65. Familiarity invites touch

66. Apple HIG
Physicality and textures
give affordances and signifiers of
how to use the app

67. Scroll metaphor is strong
- A content pane
- Physical movement
- Move content pane
- Show new content
Because:
Equal affordances as
the physical object

68. Metaphors suggest
how to use the app

69. Page “flip” - Huh?

70. Page “flip” - WTF!?

71. If it looks like a physical object
people will try to use it as one

72. Avoid metaphor clutter
Choose 1 key metaphor and make it feel natural

74. Don’t let metaphors make you
lose digital opportunities

75. Embrace the metaphor

76. Key device differences
Usage, interaction and UI metaphors

77. www.slideshare.net/designitdk
Henrik Hedegaard
Information Architect
@henrikhedegaard (yes, I’m on twitter!)

78. Designing for iPad: Reality Check
Information Architects
iPad vs. iPhone: A User Experience Study
UX Magazine
iPad User Experience Guidelines
UX Magazine
App Store Review Guidelines
Apple