wireframe and prototyping google campus talk by zoe guiraudon
TRANSCRIPT
@zoe_guiraudon
INTRO TO WIREFRAMING AND PROTOTYPINGGENERAL ASSAMBLY @ GOOGLE CAMPUS
@zoe_guiraudon
@zoe_guiraudon
WHAT WILL YOU LEARN TODAY
INTRO TO UX WIREFRAMING PROTOTYPING
@zoe_guiraudon
WHO THE HELL IS SHE?
Zoe Guiraudon
www.zoeguiraudon.com
UX Designer at 100 Shapes
TA at General Assembly
@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
@zoe_guiraudon
INTRO TO USER EXPERIENCE DESIGN
WHAT IS USER EXPERIENCE?
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.
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.”
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.”
WHAT IS USER EXPERIENCE?
THERE ARE SOME PRODUCTS THAT WE USE DAILY THAT ARE POORLY DESIGNED AND OFTEN PROVIDE POOR EXPERIENCES.
CLASS TITLETODAY’S CLASSWHAT IS USER EXPERIENCE?
EVERYDAY UX
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?
WHAT IS USER EXPERIENCE?
CAN YOU THINK OF ANY EXAMPLES OF GOOD OR BAD EXPERIENCES?
UX COMES FROM PSYCHOLOGY
Thinking
Feeling
Instinct
UX COMES FROM PSYCHOLOGY
INTRO TO USER EXPERIENCE DESIGN
HOW DO WE “DESIGN” THE USER EXPERIENCE?
DESIGNING THE USER EXPERIENCE
WHAT MOST PEOPLE THINK UX ISField 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
DESIGNING THE USER EXPERIENCE
WHAT UX ACTUALLY ISField 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
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.
DESIGNING THE USER EXPERIENCE
USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER
DESIGNING THE USER EXPERIENCE
Jesse James Garrett, 2000
Strategy
Scope
Structure
Skeleton
Surface
INTRO TO USER EXPERIENCE DESIGN
WHY IS UX SO IMPORTANT?
WHY IS UX SO IMPORTANT?
AVOID FEATURITIS
Kathy Sierra, Creating Passionate Users, 2006
Number of features
Use
r hap
pine
ss
“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!
MASLOW’S HIERARCHY OF NEEDS
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
WHO PRACTICES UX DESIGN?
Squad
Product owner
UX’er
TesterBusiness Analyst
Developers
Front-end developer
CROSS-DISCIPLINE TEAMS
Squad
Product owner
UX’er
TesterBusiness Analyst
Developers
Front-end developer
Squad
Product owner
UX’er
TesterBusiness Analyst
Developers
Front-end developer
@zoe_guiraudon
WHERE DO WIREFRAMING AND PROTOTYPING FIT IN THE PROCESS?
@zoe_guiraudon
Research Insights PrototypeIdeation
DiscoverBusiness Analysis
Brand Analysis Competitive Analysis Technical Research
User Survey User Interview
Usability Testing
DefineAffinity Map User Flows
User Journeys Personas
Feature Prioritisation
DesignDesign Studio
Sketching Paper Prototype Usability Testing
Iterations Wireframing
Test, iterate, Validate
DeliverDigital Prototype Usability Testing
Iterations Wireframing
Test, Iterate, Validate Functional Prototype
@zoe_guiraudon
PrototypeIdeation
DesignDesign Studio
Sketching Paper Prototype Usability Testing
Iterations Wireframing
Test, iterate, Validate
DeliverDigital Prototype Usability Testing
Iterations Wireframing
Test, Iterate, Validate Functional Prototype
Design
TestLearn
Iteration Process
@zoe_guiraudon
WIREFRAMING
@zoe_guiraudon
!
@zoe_guiraudon
1 - ALWAY START WITH PAPER!
IDEAS ARE CHEAP, BUILDING THING IS EXPENSIVE.
@zoe_guiraudon
CAN YOU DRAW A…
Triangle Circle Cross Rectangle
@zoe_guiraudon
LET’S PLAY A GAME…
CALLED UXIONARY
@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
@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
@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
@zoe_guiraudon
2 - WIREFRAMES
UP THE FIDELITY
@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”
@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”
@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”
@zoe_guiraudon
3 - MOCKUPS
UP UP THE FIDELITY
@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
@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
@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
@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.
@zoe_guiraudon
THE TOOLS I use…
Sketch
@zoe_guiraudon
THE TOOLS But people also use…
Omnigraffle Illustrator InDesign Photoshop Affinity Designer
@zoe_guiraudon
PROTOTYPING
@zoe_guiraudon
“IF A PICTURE IS WORTH 1,000 WORDS, A PROTOTYPE IS WORTH 1,000 MEETINGS.”
WHY…
- Tom & David Kelly IDEO
@zoe_guiraudon
PrototypeIdeation
DesignDesign Studio
Sketching Paper Prototype Usability Testing
Iterations Wireframing
Test, iterate, Validate
DeliverDigital Prototype Usability Testing
Iterations Wireframing
Test, Iterate, Validate Functional Prototype
REMEMBER THIS?
@zoe_guiraudon
Design
TestLearn
Iteration Process
AND THIS?
@zoe_guiraudon
REMEMBER…
UX is not only about the look but also about the human interaction.
•To explore and refine
•To communicate and test
‣Functionality
‣Flow
‣ Interaction
‣Animations
‣Usability
WHY IS PROTOTYPING IMPORTANT?
PROTOTYPES ARE ALL ABOUT THE USER.
WE TEST THE USABILITY OF OUR DESIGNS.
• 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
• 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
• 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
• 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
• 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
@zoe_guiraudonLEMErrS
USABILITY TESTING
CAN YOU THINK OF ANY SITES OR APPS WHERE USABILITY TESTING HASN’T BEEN THOROUGH?
@zoe_guiraudon
WHAT ARE DIFFERENT TYPES OF PROTOTYPES?
@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.
@zoe_guiraudon
REMEMBER THIS?
Sketch Wireframes Mockup Code
Paper Prototype
Digital / Clickable Prototype
Digital / Clickable Prototype
Functional Prototype
@zoe_guiraudon
REMEMBER THIS?
Sketch Wireframes Mockup Code
Paper Prototype
Digital / Clickable Prototype
Digital / Clickable Prototype
Functional Prototype
Iteration Iteration Iteration
@zoe_guiraudon
IS PROTOTYPE AN MVP*? * MINIMUM VIABLE PRODUCT
@zoe_guiraudon
WHAT IS THE MVP OF…
A CAR?
@zoe_guiraudon
WHAT IS THE MVP OF…
IS IT A WHEEL?
@zoe_guiraudon
WHAT IS THE MVP OF…
NO
@zoe_guiraudon
AN MVP IS THE PROTOTYPE THAT WILL HELP YOUR USER TO ACHIEVE THEIR GOAL.
@zoe_guiraudon
THE TOOLS I use…
Marvel Invision POP
@zoe_guiraudon
THE TOOLS But people also use…
Axure proto.io Flinto UXPin
@zoe_guiraudon
100 SHAPES
http://www.100shapes.com/
+44-203-7738175
CONTACT US:
@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
@zoe_guiraudon
THANK YOU!
Q&AZOE GUIRAUDON
www.zoeguiraudon.com
@zoe_guiraudon