SlideShare a Scribd company logo
Wireframes for the Wicked
Michael Angeles, Nick Finck and Donna Spencer
March 16, 2009

Use #wickedwire when commenting on twitter




                                        SXSW Interactive 2009 - Austin, TX
Michael Angeles                 Nick Finck                     Donna Spencer
is an interaction designer      is the Director of User        is an information architect,
living in Brooklyn, NY. He is   Experience at Blue Flavor, a   interaction designer, writer,
Director of User Experience     web design company that        teacher for Maadmob (her
at Traction Software and        focuses creating web           company) in Canberra,
publishes the UX design site    experiences. He lives and      Australia.
Konigi.                         plays in Seattle, WA.
                                                               @maadonna
@jibbajabba                     @nickf
What is a Wireframe?
Who are they for?
Users of documentation
• Design team                      • Managers
  - Discuss ideas and approaches     - Is the overall approach a good one
  - Critique each others work      • Developers
• Business people                    - Exactly how should this work and
  - How will it affect their day      how will I implement it
  - Have you understood the
   business rules & context
What is the process?
Moving from Sketching to Wireframing




Adaptation from Sketching the User Experience by Bill Buxton
Types of Wireframes
Types of Wireframes
• Reference Zones
• Low Fidelity
• High Fidelity
• Storyboards
• Standalone
• Specification
Reference Zones
Reference Zones
• What it is
  - Shows just major positioning of content blocks
• Use to
  - Discuss a big idea or concept early in a project
  - Show the overall structure of particular pages
  - Show how a family of pages work together
• Watch out for
  - Some people can't think abstractly
Reference Zones
High Fidelity Wireframes
High Fidelity Wireframes
• What it is
  - Shows a lot of detail, as much as in the built
    product
• Use to
  - Work through the detail of how an interaction
    (or part of one) will work
  - Ensure the designer and stakeholders both
    have the same idea about how something
    works
• Watch out for
  - Readers get bogged down in detail
  - Leave time to absorb the detail
High Fidelity Wireframes
High Fidelity Wireframes
High Fidelity Wireframes
Storyboards
Storyboards
• What it is
  - A sequence of 'screens' that show the flow
    across time
• Use to
  - Show how the wireframes fit together
  - Show how a user will experience a workflow
  - Demonstrate a task end-to-end
• Watch out for
  - Show tasks before & after for a whole context
  - Demonstrate core tasks in one flow
  - Demonstrate exceptions in a separate flow
Storyboards
Storyboards
Storyboards
Standalone Wireframes
Standalone Wireframes
• What it is
  - A wireframe that can be understood without
    you there
• Use to
  - Communicate any of the wireframe types we've
    discussed, but in a way that means they can
    be understood without you
  - Document for future reference and use
• Watch out for
  - Everything has to be included
  - Lots of annotations are needed
  - It can be hard to follow linkages between
    screens
Standalone Wireframes
Standalone Wireframes




      Wireframe by Tom Watson of Blue Flavor
Specification Wireframes
Specification Wireframes
• What it is
  - A wireframe with enough detail to be built
• Use to
  - Development
• Watch out for
  - Everything has to be included
     - all states (logged in, logged out, error)
     - data sources and destinations
     - all actions
     - all validations
  - It must stand alone
  - Talk to your developers to make it usable for
    them
  - Never show this to business people or users
Specification Wireframes
Specification Wireframes
Sketch Style Wireframes
Sketch Style Wireframes




   Balsamiq.com - Balsamiq Mockups
Sketch Style Wireframes




 Konigi.com OmniGraffle Sketch Stencils
Thank you!
Thank you!


Come to our party tonight, we’ll get you drunk!
?
Questions?

More Related Content

What's hot

Prototyping
PrototypingPrototyping
Prototyping
Eman Abed AlWahhab
 
Usability Testing Report Template
Usability Testing Report TemplateUsability Testing Report Template
Usability Testing Report Template
DigitalGov from General Services Administration
 
UX design, service design and design thinking
UX design, service design and design thinkingUX design, service design and design thinking
UX design, service design and design thinking
Sylvain Cottong
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
Ravi Bhadauria
 
UXR 101 - Introduction to UX Research
UXR 101 - Introduction to UX ResearchUXR 101 - Introduction to UX Research
UXR 101 - Introduction to UX Research
Nizar Maulana
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
UI/UX Design in Agile process
UI/UX Design in Agile process  UI/UX Design in Agile process
UI/UX Design in Agile process
Scrum Breakfast Vietnam
 
How can User Experience (UX) and Business Analysis (BA) work together?Busines...
How can User Experience (UX) and Business Analysis (BA) work together?Busines...How can User Experience (UX) and Business Analysis (BA) work together?Busines...
How can User Experience (UX) and Business Analysis (BA) work together?Busines...
User Vision
 
Ux team organization
Ux team organizationUx team organization
Ux team organization
Deidre Bohannon
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
Morgan McKeagney
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
Michael MacDonald
 
UX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore Bank
UX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore BankUX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore Bank
UX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore Bank
UX STRAT
 
Personas And Scenarios
Personas And ScenariosPersonas And Scenarios
Personas And Scenarios
OMcareers Community
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
Dotinum
 
Defining Personas, A User Experience Approach
Defining Personas, A User Experience ApproachDefining Personas, A User Experience Approach
Defining Personas, A User Experience Approach
Leon Kadoch Hardie
 
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile AppsUX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UXBERT
 
Lean Inception: how to align people and build the right product
Lean Inception: how to align people and build the right productLean Inception: how to align people and build the right product
Lean Inception: how to align people and build the right product
Paulo Caroli
 
Software development life cycle Construction phase
Software development life cycle Construction phaseSoftware development life cycle Construction phase
Software development life cycle Construction phase
REHMAT ULLAH
 
UX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dustUX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dust
Eric Reiss
 
UX Maturity Models
UX Maturity Models   UX Maturity Models
UX Maturity Models
Gena Drahun
 

What's hot (20)

Prototyping
PrototypingPrototyping
Prototyping
 
Usability Testing Report Template
Usability Testing Report TemplateUsability Testing Report Template
Usability Testing Report Template
 
UX design, service design and design thinking
UX design, service design and design thinkingUX design, service design and design thinking
UX design, service design and design thinking
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
 
UXR 101 - Introduction to UX Research
UXR 101 - Introduction to UX ResearchUXR 101 - Introduction to UX Research
UXR 101 - Introduction to UX Research
 
What is UX?
What is UX?What is UX?
What is UX?
 
UI/UX Design in Agile process
UI/UX Design in Agile process  UI/UX Design in Agile process
UI/UX Design in Agile process
 
How can User Experience (UX) and Business Analysis (BA) work together?Busines...
How can User Experience (UX) and Business Analysis (BA) work together?Busines...How can User Experience (UX) and Business Analysis (BA) work together?Busines...
How can User Experience (UX) and Business Analysis (BA) work together?Busines...
 
Ux team organization
Ux team organizationUx team organization
Ux team organization
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
 
UX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore Bank
UX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore BankUX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore Bank
UX STRAT Online 2021 Presentation by Kévin Boezennec, Singapore Bank
 
Personas And Scenarios
Personas And ScenariosPersonas And Scenarios
Personas And Scenarios
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
Defining Personas, A User Experience Approach
Defining Personas, A User Experience ApproachDefining Personas, A User Experience Approach
Defining Personas, A User Experience Approach
 
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile AppsUX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
 
Lean Inception: how to align people and build the right product
Lean Inception: how to align people and build the right productLean Inception: how to align people and build the right product
Lean Inception: how to align people and build the right product
 
Software development life cycle Construction phase
Software development life cycle Construction phaseSoftware development life cycle Construction phase
Software development life cycle Construction phase
 
UX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dustUX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dust
 
UX Maturity Models
UX Maturity Models   UX Maturity Models
UX Maturity Models
 

Viewers also liked

User-centered design: A road map to usability
User-centered design: A road map to usabilityUser-centered design: A road map to usability
User-centered design: A road map to usability
Will Sansbury
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
piksels
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best Practices
Nick Finck
 
Sketching User Experience—Video Sketching
Sketching User Experience—Video SketchingSketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
Justin Lee
 
UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008
Leah Buley
 
Experience Is The Product
Experience Is The ProductExperience Is The Product
Experience Is The Product
Peter Merholz
 
The Life Cycle of a Wireframe
The Life Cycle of a Wireframe The Life Cycle of a Wireframe
The Life Cycle of a Wireframe
Nick Finck
 
The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX Disciplines
Nick Finck
 
Portfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobPortfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the Job
Lynn Teo
 
Portfolio, Resumes and You
Portfolio, Resumes and You Portfolio, Resumes and You
Portfolio, Resumes and You
Aynne Valencia
 
Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)
Aaron Gustafson
 
Why slideshare sucks
Why slideshare sucksWhy slideshare sucks
Why slideshare sucks
Geir Sand Nilsen
 
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
Wireframing Web 2.0  for Design and  Definition: London IA UXLondon reduxWireframing Web 2.0  for Design and  Definition: London IA UXLondon redux
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
James Box
 
Product Management Class for Digital Startups
Product Management Class for Digital StartupsProduct Management Class for Digital Startups
Product Management Class for Digital Startups
Miet Claes
 
Reinventing the Product Spec
Reinventing the Product SpecReinventing the Product Spec
Reinventing the Product Spec
Ryan Glasgow
 
Prototipado del software
Prototipado del softwarePrototipado del software
Prototipado del software
Juan Pablo Bustos Thames
 
Arquitectura de la información 02
Arquitectura de la información 02Arquitectura de la información 02
Arquitectura de la información 02
Worköholics
 
Beyond the Page
Beyond the PageBeyond the Page
Beyond the Page
gsmith
 
Employee Engagement Practices at Intuit
Employee Engagement Practices at IntuitEmployee Engagement Practices at Intuit
Employee Engagement Practices at Intuit
Craig Ramsay
 
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and CollaborationYes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Steve Portigal
 

Viewers also liked (20)

User-centered design: A road map to usability
User-centered design: A road map to usabilityUser-centered design: A road map to usability
User-centered design: A road map to usability
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best Practices
 
Sketching User Experience—Video Sketching
Sketching User Experience—Video SketchingSketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
 
UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008
 
Experience Is The Product
Experience Is The ProductExperience Is The Product
Experience Is The Product
 
The Life Cycle of a Wireframe
The Life Cycle of a Wireframe The Life Cycle of a Wireframe
The Life Cycle of a Wireframe
 
The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX Disciplines
 
Portfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobPortfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the Job
 
Portfolio, Resumes and You
Portfolio, Resumes and You Portfolio, Resumes and You
Portfolio, Resumes and You
 
Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)
 
Why slideshare sucks
Why slideshare sucksWhy slideshare sucks
Why slideshare sucks
 
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
Wireframing Web 2.0  for Design and  Definition: London IA UXLondon reduxWireframing Web 2.0  for Design and  Definition: London IA UXLondon redux
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
 
Product Management Class for Digital Startups
Product Management Class for Digital StartupsProduct Management Class for Digital Startups
Product Management Class for Digital Startups
 
Reinventing the Product Spec
Reinventing the Product SpecReinventing the Product Spec
Reinventing the Product Spec
 
Prototipado del software
Prototipado del softwarePrototipado del software
Prototipado del software
 
Arquitectura de la información 02
Arquitectura de la información 02Arquitectura de la información 02
Arquitectura de la información 02
 
Beyond the Page
Beyond the PageBeyond the Page
Beyond the Page
 
Employee Engagement Practices at Intuit
Employee Engagement Practices at IntuitEmployee Engagement Practices at Intuit
Employee Engagement Practices at Intuit
 
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and CollaborationYes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
 

Similar to Wireframes for the Wicked

The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
Marcelo Graciolli
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
Lewis Lin 🦊
 
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
David Farrell
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
ipmindthegap
 
Intro to Wireframes
Intro to WireframesIntro to Wireframes
Intro to Wireframes
Deborah MacKenzie
 
Digital design workshop
Digital design workshop Digital design workshop
Digital design workshop
Katherine Barrow
 
Michael Kowalski
Michael KowalskiMichael Kowalski
Michael Kowalski
Carsonified Team
 
Does your project requires wireframing?
Does your project requires wireframing?Does your project requires wireframing?
Does your project requires wireframing?
Dikonia
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
Reza Budi Prabowo
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
uxpa-dc
 
Net Magazine Feb 2010
Net Magazine Feb 2010Net Magazine Feb 2010
Net Magazine Feb 2010
Super User Studio
 
Wireframing for Mobile App Developers
Wireframing for Mobile App DevelopersWireframing for Mobile App Developers
Wireframing for Mobile App Developers
Veiko Raime
 
Why wireframes-v2
Why wireframes-v2Why wireframes-v2
Why wireframes-v2
beckwatson
 
Wireframes vs prototypes
Wireframes vs prototypesWireframes vs prototypes
Wireframes vs prototypes
Deborah MacKenzie
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easy
OutSystems
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
JenRobbins
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web Design
Mindy McAdams
 

Similar to Wireframes for the Wicked (20)

The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
Intro to Wireframes
Intro to WireframesIntro to Wireframes
Intro to Wireframes
 
Digital design workshop
Digital design workshop Digital design workshop
Digital design workshop
 
Michael Kowalski
Michael KowalskiMichael Kowalski
Michael Kowalski
 
Does your project requires wireframing?
Does your project requires wireframing?Does your project requires wireframing?
Does your project requires wireframing?
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
 
Net Magazine Feb 2010
Net Magazine Feb 2010Net Magazine Feb 2010
Net Magazine Feb 2010
 
Wireframing for Mobile App Developers
Wireframing for Mobile App DevelopersWireframing for Mobile App Developers
Wireframing for Mobile App Developers
 
Why wireframes-v2
Why wireframes-v2Why wireframes-v2
Why wireframes-v2
 
Wireframes vs prototypes
Wireframes vs prototypesWireframes vs prototypes
Wireframes vs prototypes
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easy
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web Design
 

More from Nick Finck

Page Description Diagrams
Page Description DiagramsPage Description Diagrams
Page Description Diagrams
Nick Finck
 
Mobile Interaction Design & Strategy
Mobile Interaction Design & StrategyMobile Interaction Design & Strategy
Mobile Interaction Design & Strategy
Nick Finck
 
The cross channel experience - UXLx
The cross channel experience - UXLxThe cross channel experience - UXLx
The cross channel experience - UXLx
Nick Finck
 
The cross channel experience
The cross channel experienceThe cross channel experience
The cross channel experience
Nick Finck
 
Mobile UX
Mobile UXMobile UX
Mobile UX
Nick Finck
 
User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the Wild
Nick Finck
 
The Future of Technology and Information
The Future of Technology and InformationThe Future of Technology and Information
The Future of Technology and Information
Nick Finck
 
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Nick Finck
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
Nick Finck
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experience
Nick Finck
 
User experience utopia - interact seattle
User experience utopia - interact seattleUser experience utopia - interact seattle
User experience utopia - interact seattle
Nick Finck
 
Mobile Web User Experience
Mobile Web User ExperienceMobile Web User Experience
Mobile Web User Experience
Nick Finck
 
Sustainable UX
Sustainable UXSustainable UX
Sustainable UX
Nick Finck
 
The commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia communityThe commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia community
Nick Finck
 
The Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats StyleThe Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats Style
Nick Finck
 
The Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceThe Ten Commandments Of User Experience
The Ten Commandments Of User Experience
Nick Finck
 
Mobile UX
Mobile UXMobile UX
Mobile UX
Nick Finck
 
The Future Of IA
The Future Of IAThe Future Of IA
The Future Of IA
Nick Finck
 
User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)
Nick Finck
 
User Experience Utopia
User Experience UtopiaUser Experience Utopia
User Experience Utopia
Nick Finck
 

More from Nick Finck (20)

Page Description Diagrams
Page Description DiagramsPage Description Diagrams
Page Description Diagrams
 
Mobile Interaction Design & Strategy
Mobile Interaction Design & StrategyMobile Interaction Design & Strategy
Mobile Interaction Design & Strategy
 
The cross channel experience - UXLx
The cross channel experience - UXLxThe cross channel experience - UXLx
The cross channel experience - UXLx
 
The cross channel experience
The cross channel experienceThe cross channel experience
The cross channel experience
 
Mobile UX
Mobile UXMobile UX
Mobile UX
 
User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the Wild
 
The Future of Technology and Information
The Future of Technology and InformationThe Future of Technology and Information
The Future of Technology and Information
 
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experience
 
User experience utopia - interact seattle
User experience utopia - interact seattleUser experience utopia - interact seattle
User experience utopia - interact seattle
 
Mobile Web User Experience
Mobile Web User ExperienceMobile Web User Experience
Mobile Web User Experience
 
Sustainable UX
Sustainable UXSustainable UX
Sustainable UX
 
The commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia communityThe commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia community
 
The Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats StyleThe Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats Style
 
The Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceThe Ten Commandments Of User Experience
The Ten Commandments Of User Experience
 
Mobile UX
Mobile UXMobile UX
Mobile UX
 
The Future Of IA
The Future Of IAThe Future Of IA
The Future Of IA
 
User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)
 
User Experience Utopia
User Experience UtopiaUser Experience Utopia
User Experience Utopia
 

Recently uploaded

Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Jeffrey Haguewood
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
saastr
 

Recently uploaded (20)

Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
 

Wireframes for the Wicked

  • 1. Wireframes for the Wicked Michael Angeles, Nick Finck and Donna Spencer March 16, 2009 Use #wickedwire when commenting on twitter SXSW Interactive 2009 - Austin, TX
  • 2. Michael Angeles Nick Finck Donna Spencer is an interaction designer is the Director of User is an information architect, living in Brooklyn, NY. He is Experience at Blue Flavor, a interaction designer, writer, Director of User Experience web design company that teacher for Maadmob (her at Traction Software and focuses creating web company) in Canberra, publishes the UX design site experiences. He lives and Australia. Konigi. plays in Seattle, WA. @maadonna @jibbajabba @nickf
  • 3. What is a Wireframe?
  • 5. Users of documentation • Design team • Managers - Discuss ideas and approaches - Is the overall approach a good one - Critique each others work • Developers • Business people - Exactly how should this work and - How will it affect their day how will I implement it - Have you understood the business rules & context
  • 6. What is the process?
  • 7. Moving from Sketching to Wireframing Adaptation from Sketching the User Experience by Bill Buxton
  • 8.
  • 10. Types of Wireframes • Reference Zones • Low Fidelity • High Fidelity • Storyboards • Standalone • Specification
  • 12. Reference Zones • What it is - Shows just major positioning of content blocks • Use to - Discuss a big idea or concept early in a project - Show the overall structure of particular pages - Show how a family of pages work together • Watch out for - Some people can't think abstractly
  • 15. High Fidelity Wireframes • What it is - Shows a lot of detail, as much as in the built product • Use to - Work through the detail of how an interaction (or part of one) will work - Ensure the designer and stakeholders both have the same idea about how something works • Watch out for - Readers get bogged down in detail - Leave time to absorb the detail
  • 20. Storyboards • What it is - A sequence of 'screens' that show the flow across time • Use to - Show how the wireframes fit together - Show how a user will experience a workflow - Demonstrate a task end-to-end • Watch out for - Show tasks before & after for a whole context - Demonstrate core tasks in one flow - Demonstrate exceptions in a separate flow
  • 25. Standalone Wireframes • What it is - A wireframe that can be understood without you there • Use to - Communicate any of the wireframe types we've discussed, but in a way that means they can be understood without you - Document for future reference and use • Watch out for - Everything has to be included - Lots of annotations are needed - It can be hard to follow linkages between screens
  • 27. Standalone Wireframes Wireframe by Tom Watson of Blue Flavor
  • 29. Specification Wireframes • What it is - A wireframe with enough detail to be built • Use to - Development • Watch out for - Everything has to be included - all states (logged in, logged out, error) - data sources and destinations - all actions - all validations - It must stand alone - Talk to your developers to make it usable for them - Never show this to business people or users
  • 33. Sketch Style Wireframes Balsamiq.com - Balsamiq Mockups
  • 34. Sketch Style Wireframes Konigi.com OmniGraffle Sketch Stencils
  • 36. Thank you! Come to our party tonight, we’ll get you drunk!