Presented at YOW! Connected 2015 by Pete Collins The majority of really great apps (think Apple design award winners and Material design award winners) have invested heavily in interaction design. Why? What is it about the ‘feel’ of these apps that makes them so great? How did they incorporate animation, interaction and motion into their design approach effectively, prioritise this against new features and ultimately ship a great product? To answer some of these questions this talk will explore: - Why interaction design is so important in mobile apps - How to communicate the value in designing ‘motion’ to your colleagues, to clients, to end-users - How can you successfully prioritise UI dynamics alongside new features for your product - When during your product lifecycle you should invest time in it - Tools, hints and tips for killer interactions

1. THE VALUE OF MOTION HOW TO DESIGN INTERACTION DESIGN

2. OFF TO AN ABSOLUTE FLYER…
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 2
“Frankie” the Frenchie
1424
Instagram Followers
“Pancakes” the Blue Tabby
57,700
Instagram Followers
“Doug” the Pug
674,000
Instagram Followers
Me “The Complete Loser”
96
Instagram Followers

3. OH SNAP
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 3

4. ABOUT ME
4
My name’s Pete Collins.
I’m currently Head of Design at Outware Mobile. I’m not
a developer, but I really like working with you guys to
build cool 💩.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN

5. WHAT I’M HERE TO TALK ABOUT
The majority of really great apps (think Apple design
award winners and Material design award winners)
have invested heavily in interaction design.
WHY?
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 5

6. TODAY WE’LL EXPLORE
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 6
1/ A short history of mobile interactions
2/ A look at some of today’s best examples
3/ How to make sure you ship what you design
and lastly,
4/ 10 tools, hints and tips for killer interactions.

7. A VERY SHORT HISTORY OF MOBILE INTERACTIONS

8. WE’VE COME A LONG WAY
8YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN

9. HARDWARE ADVANCES
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 9
DISPLAY TECHNOLOGY
163 ppi
320x480
iPhone 3G, 3GS
1080x1920
iPhone 6S plus
401 ppi
CPU SPEED
70%GPU SPEED
90%

10. PHYSICS ENGINES
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 10
GPU
Engine layers
Application layer

11. DESIGN TRENDS
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 11
SKEUMORPHIC
LOOK
SKEUMORPHIC
FEEL
FLAT LOOK

12. THE BEST OF MODERN MOBILE INTERACTIONS

13. SKYGUIDE
13
Apple Design
Award winner
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN

14. TUMBLR
14
Material Design Award winner
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN

15. METAMORPHABE
T
15
Apple Design Award winner
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN

16. SO WHAT DID THEY ALL DO WELL?
16YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
PERSONALIT
Y
ORIENTATIO
N
CONTEX
T
RESPONSIV
E
EMOTIVE
RESTRAIN
T

17. HAVE PERSONALITY
17YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“DISPLAY DISTINCT CHARACTER”

18. OBVIOUS ORIENTATION
18YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“ESTABLISH THE
PHYSICAL SPACE”

19. GIVE CONTEXT
19YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“MOTION SHOULDN’T
CONTRADICT IT’S
ENVIRONMENT”

20. 20YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“REASSURE,
DON’T
SURPRISE”
BE RESPONSIVE

21. BE EMOTIVE
21YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“POSITIVE
EMOTION”

22. SHOW RESTRAINT
22YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“SUBTLETY IS
KEY…”

23. HOW TO MAKE SURE WE SHIP WHAT WE DESIGN

24. COMMUNICATING VALUE
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 24
1,000,000
MOTION FEELS
FAST
MOTION FEELS
FAST

25. PRIORITISE EARLY, OFTEN &
COLLECTIVELY
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 25
WON’T COULD
SHOUL
D
MUST
FEASABILITY
MVP

26. WHAT ARE YOUR GOALS?
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 26
LEVELOFCONTROL
DESIGN/DEVELOPMENT TIME REQUIRED
FRAMER.JS
FORM
QUARTZ
COMPOSER/ORIGAMI
HYPE
PROTO.IO
AXURE
PIXATE
FLINTO
FLUID
HOTGLOOINVISION
JUSTINMIND
MARVEL
PRINCIPLE
SOLIDIFY
UXPIN

27. WORK ON YOUR WORKFLOW
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 27
DEVELOPMENT TEAM
Story Card
Story Card
Story Card
UI
Story Card
UI
Story Card
UI
Story Card
Integration
Story Card
Integration
Story Card
Integration
Story Card
UI DYNAMICS TEAM

28. 10 HINTS, TOOLS AND TIPS FOR KILLER INTERACTIONS

29. INVEST TIME IN
DECIDING ON THE
RIGHT TOOLS
FOR THE JOB.
29YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN

30. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 30
TWO
DESIGN WITH
DEVELOPERS AND
DEVELOP WITH
DESIGNERS.

31. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 31
3
REMEMBER, USERS LOVE
PATTERNS.

32. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 32
FOUR
REMEMBER THE TRAITS
PERSONALITY, ORIENTATION, CONTEXT,
RESPONSIVE, EMOTIVE, SHOW
RESTRAINT.

33. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 33
FIVE
THE HIG AND MATERIAL
DESIGN GUIDELINES ARE
EXACTLY THAT.
GUIDELINES. NOT RULES.

34. GOOD STRUCTURE MAKES FOR GOOD
INTERACTIONS: TRIGGERS, RULES,
FEEDBACK, MODES & LOOPS.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 34
6

35. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 35

36. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 36
EIGHT
BUILD ONE
RELATIONS
HIP AT A
TIME.

37. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 37
LOREM IPSUM DOLOR
SIT AMET,
CONSECTETUR
ADIPISCING
NINE
USE MOVEMENT TO
SUPPLEMENT
NAVIGATION.

38. YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 38
LASTLY,
PATTERN
RESEARCH
ISN’T
COPYING.
DO IT OFTEN.
capptivate.co & materialup.com

39. THERE’S COLD BEER WAITING FOR EVERYONE IN THE ROOM
SO QUESTIONS BETTER BE GOOD.
TWITTER @OutwareDesign / @outware and @reduxly
WEB www.outware.com.au