Wireframe and prototyping google Campus talk by Zoe Guiraudon
- 1. @zoe_guiraudon INTRO TO WIREFRAMING AND PROTOTYPING GENERAL ASSAMBLY @ GOOGLE CAMPUS
- 3. @zoe_guiraudon WHAT WILL YOU LEARN TODAY INTRO TO UX WIREFRAMING PROTOTYPING
- 4. @zoe_guiraudon WHO THE HELL IS SHE? Zoe Guiraudon www.zoeguiraudon.com UX Designer at 100 Shapes TA at General Assembly
- 5. @zoe_guiraudon MY UX JOURNEY Finished Uni Yay! Continue Working In Social Media Found out about GA Al lot of ups and downs but it was all worth it! My GA Experience I Need a career change!!! Teaching at GA 100 Shapes ITV Project
- 6. @zoe_guiraudon INTRO TO USER EXPERIENCE DESIGN WHAT IS USER EXPERIENCE?
- 7. WHAT IS USER EXPERIENCE? WE INTERACT WITH PRODUCTS, BOTH DIGITAL AND PHYSICAL. WE TRY TO ACCOMPLISH GOALS WHEN USING THESE PRODUCTS. THIS LEADS US TO HAVING A USER EXPERIENCE.
- 8. WHAT IS USER EXPERIENCE? JESSE JAMES GARRET “Experience design is the design of anything independent of medium, or across media, with human experience as an explicit outcome and human engagement as an explicit goal.”
- 9. WHAT IS USER EXPERIENCE? DONALD NORMAN “User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
- 10. WHAT IS USER EXPERIENCE? THERE ARE SOME PRODUCTS THAT WE USE DAILY THAT ARE POORLY DESIGNED AND OFTEN PROVIDE POOR EXPERIENCES.
- 11. CLASS TITLE TODAY’S CLASSWHAT IS USER EXPERIENCE? EVERYDAY UX
- 12. WHAT IS USER EXPERIENCE? HAVE A THINK - WHAT WAS THE EXPERIENCE LIKE COMING TO THIS TALK? • Transport • Restaurants/coffee shops • Architecture • Sign posting • Did you use any apps to guide you here?
- 13. WHAT IS USER EXPERIENCE? CAN YOU THINK OF ANY EXAMPLES OF GOOD OR BAD EXPERIENCES?
- 14. UX COMES FROM PSYCHOLOGY Thinking Feeling Instinct
- 15. UX COMES FROM PSYCHOLOGY
- 16. INTRO TO USER EXPERIENCE DESIGN HOW DO WE “DESIGN” THE USER EXPERIENCE?
- 17. DESIGNING THE USER EXPERIENCE WHAT MOST PEOPLE THINK UX IS Field research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders helloerik.com/ux-is-not-ui
- 18. DESIGNING THE USER EXPERIENCE WHAT UX ACTUALLY IS Field research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders helloerik.com/ux-is-not-ui
- 19. DESIGNING THE USER EXPERIENCE THE FIELD OF USER EXPERIENCE IS CONCERNED WITH IDENTIFYING A REAL-WORLD PROBLEM AND USING DESIGN TO ATTEMPT TO SOLVE IT.
- 20. DESIGNING THE USER EXPERIENCE USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER
- 21. DESIGNING THE USER EXPERIENCE Jesse James Garrett, 2000 Strategy Scope Structure Skeleton Surface
- 22. INTRO TO USER EXPERIENCE DESIGN WHY IS UX SO IMPORTANT?
- 23. WHY IS UX SO IMPORTANT? AVOID FEATURITIS Kathy Sierra, Creating Passionate Users, 2006 Number of features Userhappiness “Nice, but I wish it did more…” “So glad they added this!” “Cool!” “I rule!” “Guess I’d better read the manual” “Where the f*** did they put that?!” “Now I can’t even do the ONE SIMPLE THING I bought this for.” “I suck at this.” Happy user peak RAWR!
- 24. MASLOW’S HIERARCHY OF NEEDS
- 25. USER EXPERIENCE HIERARCHY OF NEEDS Aarron Walter, Designing for Emotion 2011 Easy to learn to perform basic tasks Basic features that meet user needs Service and functional reliability Fun, joy and delight
- 26. WHO PRACTICES UX DESIGN? Squad Product owner UX’er Tester Business Analyst Developers Front-end developer CROSS-DISCIPLINE TEAMS Squad Product owner UX’er Tester Business Analyst Developers Front-end developer Squad Product owner UX’er Tester Business Analyst Developers Front-end developer
- 27. @zoe_guiraudon WHERE DO WIREFRAMING AND PROTOTYPING FIT IN THE PROCESS?
- 28. @zoe_guiraudon Research Insights PrototypeIdeation Discover Business Analysis Brand Analysis Competitive Analysis Technical Research User Survey User Interview Usability Testing Define Affinity Map User Flows User Journeys Personas Feature Prioritisation Design Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype
- 29. @zoe_guiraudon PrototypeIdeation Design Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype Design TestLearn Iteration Process
- 31. @zoe_guiraudon !
- 32. @zoe_guiraudon 1 - ALWAY START WITH PAPER! IDEAS ARE CHEAP, BUILDING THING IS EXPENSIVE.
- 33. @zoe_guiraudon CAN YOU DRAW A… Triangle Circle Cross Rectangle
- 34. @zoe_guiraudon LET’S PLAY A GAME… CALLED UXIONARY
- 35. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
- 36. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
- 37. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
- 38. @zoe_guiraudon 2 - WIREFRAMES UP THE FIDELITY
- 39. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
- 40. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
- 41. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
- 42. @zoe_guiraudon 3 - MOCKUPS UP UP THE FIDELITY
- 43. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
- 44. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
- 45. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
- 46. @zoe_guiraudon TO RECAP http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ Sketch Wireframes Mockup CodeIdea Getting a basic concept. Refining the concept further. Creating visual graphic & content. Developing it in the web browser.
- 48. @zoe_guiraudon THE TOOLS But people also use… Omnigraffle Illustrator InDesign Photoshop Affinity Designer
- 50. @zoe_guiraudon “IF A PICTURE IS WORTH 1,000 WORDS, A PROTOTYPE IS WORTH 1,000 MEETINGS.” WHY… - Tom & David Kelly IDEO
- 51. @zoe_guiraudon PrototypeIdeation Design Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype REMEMBER THIS?
- 53. @zoe_guiraudon REMEMBER… UX is not only about the look but also about the human interaction.
- 54. •To explore and refine •To communicate and test ‣ Functionality ‣ Flow ‣ Interaction ‣ Animations ‣ Usability WHY IS PROTOTYPING IMPORTANT?
- 55. PROTOTYPES ARE ALL ABOUT THE USER. WE TEST THE USABILITY OF OUR DESIGNS.
- 56. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
- 57. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
- 58. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
- 59. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
- 60. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
- 62. USABILITY TESTING CAN YOU THINK OF ANY SITES OR APPS WHERE USABILITY TESTING HASN’T BEEN THOROUGH?
- 63. @zoe_guiraudon WHAT ARE DIFFERENT TYPES OF PROTOTYPES?
- 64. @zoe_guiraudon REMEMBER THIS? http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ Sketch Wireframes Mockup CodeIdea Getting a basic concept. Refining the concept further. Creating visual graphic & content. Developing it in the web browser.
- 65. @zoe_guiraudon REMEMBER THIS? Sketch Wireframes Mockup Code Paper Prototype Digital / Clickable Prototype Digital / Clickable Prototype Functional Prototype
- 66. @zoe_guiraudon REMEMBER THIS? Sketch Wireframes Mockup Code Paper Prototype Digital / Clickable Prototype Digital / Clickable Prototype Functional Prototype Iteration Iteration Iteration
- 67. @zoe_guiraudon IS PROTOTYPE AN MVP*? * MINIMUM VIABLE PRODUCT
- 68. @zoe_guiraudon WHAT IS THE MVP OF… A CAR?
- 69. @zoe_guiraudon WHAT IS THE MVP OF… IS IT A WHEEL?
- 70. @zoe_guiraudon WHAT IS THE MVP OF… NO
- 71. @zoe_guiraudon AN MVP IS THE PROTOTYPE THAT WILL HELP YOUR USER TO ACHIEVE THEIR GOAL.
- 72. @zoe_guiraudon THE TOOLS I use… Marvel Invision POP
- 73. @zoe_guiraudon THE TOOLS But people also use… Axure proto.io Flinto UXPin
- 75. @zoe_guiraudon GENERAL ASSEMBLY IF YOU ARE INTERESTED IN STUDYING UX UPCOMING COURSES: Part Time - 10 weeks: July 26th - September 29th Part Time - 1 week intensive: August 8th - August 13th Full Time - UXDI: August 1st - October 7th