際際滷

際際滷Share a Scribd company logo

Value of Motion

Outware Mobile
Outware Mobile

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 of 39
Download to read offline
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 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
OH SNAP YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 3
ABOUT ME 4 My names Pete Collins. Im currently Head of Design at Outware Mobile. Im not a developer, but I really like working with you guys to build cool . YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
WHAT IM 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 WELL EXPLORE YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 6 1/ A short history of mobile interactions 2/ A look at some of todays best examples 3/ 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
WEVE COME A LONG WAY 8YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
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%
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
METAMORPHABE T 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 PERSONALIT Y ORIENTATIO N CONTEX T RESPONSIV E EMOTIVE RESTRAIN T
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 THE PHYSICAL SPACE
GIVE CONTEXT 19YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN MOTION SHOULDNT CONTRADICT ITS ENVIRONMENT
20YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN REASSURE, DONT 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 WONT COULD SHOUL D MUST FEASABILITY MVP
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
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
10 HINTS, TOOLS AND TIPS FOR KILLER INTERACTIONS
INVEST TIME IN DECIDING ON THE RIGHT TOOLS FOR THE JOB. 29YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 30 TWO DESIGN WITH DEVELOPERS AND DEVELOP WITH DESIGNERS.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 31 3 REMEMBER, USERS LOVE PATTERNS.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 32 FOUR REMEMBER THE TRAITS PERSONALITY, ORIENTATION, CONTEXT, RESPONSIVE, EMOTIVE, SHOW RESTRAINT.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 33 FIVE THE 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 RELATIONS HIP AT A TIME.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 37 LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING NINE USE MOVEMENT TO SUPPLEMENT NAVIGATION.
YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 38 LASTLY, PATTERN RESEARCH ISNT COPYING. DO IT OFTEN. capptivate.co & materialup.com
THERES COLD BEER WAITING FOR EVERYONE IN THE ROOM SO QUESTIONS BETTER BE GOOD. TWITTER @OutwareDesign / @outware and @reduxly WEB www.outware.com.au

More Related Content

Value of Motion

  • 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 names Pete Collins. Im currently Head of Design at Outware Mobile. Im 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 IM 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 WELL EXPLORE YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN 6 1/ A short history of mobile interactions 2/ A look at some of todays 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. WEVE 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 SHOULDNT CONTRADICT ITS ENVIRONMENT
  • 20. 20YOW CONNECTED 2015, MELBOURNE: HOW TO DESIGN INTERACTION DESIGN REASSURE, DONT 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 WONT 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 ISNT COPYING. DO IT OFTEN. capptivate.co & materialup.com
  • 39. THERES COLD BEER WAITING FOR EVERYONE IN THE ROOM SO QUESTIONS BETTER BE GOOD. TWITTER @OutwareDesign / @outware and @reduxly WEB www.outware.com.au