value of motion
TRANSCRIPT
THE VALUE OF MOTION HOW TO DESIGN INTERACTION DESIGN
OFF TO AN ABSOLUTE FLYER…
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 2
“Frankie” the Frenchie
1424Instagram Followers
“Pancakes” the Blue Tabby
57,700Instagram Followers
“Doug” the Pug
674,000Instagram Followers
Me “The Complete Loser”
96Instagram Followers
OH SNAP
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 3
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
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
TODAY WE’LL EXPLORE
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 6
1/ A short history of mobile interactions2/ A look at some of today’s best examples3/ How to make sure you ship what you design
and lastly,
4/ 10 tools, hints and tips for killer interactions.
A VERY SHORT HISTORY OF MOBILE INTERACTIONS
WE’VE COME A LONG WAY
8 YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
HARDWARE ADVANCES
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 9
DISPLAY TECHNOLOGY
163 ppi
320x480iPhone 3G, 3GS
1080x1920iPhone 6S plus
401 ppi
CPU SPEED
70%GPU SPEED
90%
PHYSICS ENGINES
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 10
GPU
Engine layers
Application layer
DESIGN TRENDS
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 11
SKEUMORPHIC LOOK
SKEUMORPHIC FEEL
FLAT LOOK
THE BEST OF MODERN MOBILE INTERACTIONS
SKYGUIDE
13
Apple Design Award winner
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
TUMBLR
14
Material Design Award winner
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
METAMORPHABET
15
Apple Design Award winner
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
SO WHAT DID THEY ALL DO WELL?
16YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
PERSONALITY
ORIENTATION
CONTEXT
RESPONSIVEEMOTIVE
RESTRAINT
HAVE PERSONALITY
17YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“DISPLAY DISTINCT CHARACTER”
OBVIOUS ORIENTATION
18YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“ESTABLISH THEPHYSICAL SPACE”
GIVE CONTEXT
19YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“MOTION SHOULDN’T CONTRADICT IT’S
ENVIRONMENT”
20YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“REASSURE, DON’T SURPRISE”
BE RESPONSIVE
BE EMOTIVE
21YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“POSITIVE EMOTION”
SHOW RESTRAINT
22YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
“SUBTLETY IS KEY…”
HOW TO MAKE SURE WE SHIP WHAT WE DESIGN
COMMUNICATING VALUE
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 24
1,000,000
MOTION FEELS FAST
MOTION FEELS FAST
PRIORITISE EARLY, OFTEN & COLLECTIVELY
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 25
WON’T COULDSHOUL
D MUSTFE
ASA
BIL
ITY
MVP
WHAT ARE YOUR GOALS?
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 26
LEVE
L O
F C
ON
TRO
L
DESIGN/DEVELOPMENT TIME REQUIRED
FRAMER.JS
FORM
QUARTZCOMPOSER/ORIGAMI
HYPE
PROTO.IO
AXURE
PIXATE
FLINTO
FLUID
HOTGLOOINVISION
JUSTINMIND
MARVELPRINCIPLE
SOLIDIFY
UXPIN
WORK ON YOUR WORKFLOW
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 27
DEVELOPMENT TEAM
Story Card
Story Card
Story Card
UIStory Card
UIStory Card
UIStory Card
IntegrationStory Card
IntegrationStory Card
IntegrationStory Card
UI DYNAMICS TEAM
10 HINTS, TOOLS AND TIPS FOR KILLER INTERACTIONS
INVEST TIME IN DECIDING ON THE RIGHT TOOLSFOR THE JOB.
29YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 30
TWODESIGN WITH
DEVELOPERS AND DEVELOP WITH
DESIGNERS.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 31
3REMEMBER, USERS LOVE
PATTERNS.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 32
FOURREMEMBER THE TRAITSPERSONALITY, ORIENTATION, CONTEXT, RESPONSIVE, EMOTIVE, SHOW RESTRAINT.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 33
FIVETHE HIG AND MATERIAL DESIGN GUIDELINES ARE EXACTLY THAT. GUIDELINES. NOT RULES.
GOOD STRUCTURE MAKES FOR GOOD INTERACTIONS: TRIGGERS, RULES,
FEEDBACK, MODES & LOOPS.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 34
6
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 35
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 36
EIGHT
BUILD ONE RELATIONSHIP AT A TIME.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 37
LOREM IPSUM DOLOR SIT AMET,
CONSECTETUR ADIPISCING
NINEUSE MOVEMENT TO
SUPPLEMENT NAVIGATION.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 38
LASTLY,PATTERNRESEARCHISN’TCOPYING.DO IT OFTEN.capptivate.co & materialup.com
THERE’S COLD BEER WAITING FOR EVERYONE IN THE ROOMSO QUESTIONS BETTER BE GOOD.
TWITTER @OutwareDesign / @outware and @reduxlyWEB www.outware.com.au