SlideShare ist ein Scribd-Unternehmen logo
1 von 94
Downloaden Sie, um offline zu lesen
The Life Cycle of a
Wireframe
Nick Finck
May 28, 2009

Use #pssigchi when commenting on twitter


                                  Puget Sound SIGCHI - Seattle
?
Who the f#@k
is this dude?


           Puget Sound SIGCHI - Seattle
Nick Finck
• Principle & Director of User Experience at Blue Flavor
• Based in Seattle, Washington
• Over 13 years of experience working in the web field
• Projects: Adobe, Cisco, CitiBank, Converse, FDIC,
   HP, IBM, Intel, Microsoft, Oprah, PBS, Peet’s Coffee

• Co-Organizer of Refresh Seattle
• Former publisher of Digital Web Magazine




                                                           Puget Sound SIGCHI - Seattle
3
 IA is a three
step process

             Puget Sound SIGCHI - Seattle
Understanding
 the Problem


           Puget Sound SIGCHI - Seattle
Puget Sound SIGCHI - Seattle
Bu
             sin
     ds



              ess
   ee
    N




                 Co
 er




                   ns
Us




                    tra
                      int
                        s
Technical Requirements




                            Puget Sound SIGCHI - Seattle
Finding a
Solution


            Puget Sound SIGCHI - Seattle
Photo by DrJoanne - http://www.flickr.com/photos/drjoanne/10026716/


                                                                     Puget Sound SIGCHI - Seattle
Presenting the
   Solution


            Puget Sound SIGCHI - Seattle
?
What makes a good
   Wireframe?


             Puget Sound SIGCHI - Seattle
4
Wireframes in
 four parts


           Puget Sound SIGCHI - Seattle
Part One:
Navigation &
Wayfinding

               Puget Sound SIGCHI - Seattle
Questions



            Puget Sound SIGCHI - Seattle
?
Where am I?


          Puget Sound SIGCHI - Seattle
?
  Is what I am
looking for here?


             Puget Sound SIGCHI - Seattle
?
Where do I want
 to go next?


            Puget Sound SIGCHI - Seattle
?
Where have I
already been?


           Puget Sound SIGCHI - Seattle
Inputs



         Puget Sound SIGCHI - Seattle
Content Inventory




         Puget Sound SIGCHI - Seattle
Content Audit




     Puget Sound SIGCHI - Seattle
Content Strategy




        Puget Sound SIGCHI - Seattle
Sitemap            About SXSW                 Contact
                                                                                                                                                                                                                                                                                                                               SXSW Site Structure
                                                                                                                                                                                                                                                                                                                                 New Site Structure

                                                                                                                                                                                                                                                                                                                      Market at SXSW               Tools

                                                                                                                                                                                                                                                                            History                                                            SXSW SMS

SXSW.com                                                                                                                                                                                                                                                                                                                                           Gydget
                                                                                                                                                                                                                                                                          Sponsors

                                                                                                                                                                                                                                                                         Sustainability                                                          Facebook
   News &
                     Register       Getting Around   Trade Shows        Merchandise       Interactive         Film             Music
 Information
                                                                                                                                                                                                                                                                                                                                                 Opera Mini
                                                                                                                                                                                                                                                                           Glossary

Brochures and      Hotels for                                                                                                                                                                                                                                                                                                                      Utterz
                                      Austin Map     Music Exhibition
Forms (PDFs)     SXSWeek 2008

                                                                                                                                                   Music                                                                                                                                                                                       Music Player
                                     Conference
 Mailing Lists   Travel Discounts                     iF! Exhibition
                                       Center
                                                                                                                                                    News &                                                                                                      Flatstock Poster
                                                                                                                                                                           Schedule                  Talks                 Shows           Parties & Play                                 Getting Around               Press
                                                                                                                                                  Information                                                                                                         Show
  Subscribe        International    Carver Center

                                                                                                                                                The Daily Chord              Talks                Speakers                 Artists                                                          Austin Map             Press Releases
  SXSWorld         Online Reg       Day Stage Cafe
  Magazine          Directory
                                                                                                                                                                                             Keynote                                                                                        Conference
                                                                                                                                                     FAQ                    Shows                                       SXSW Live                                                                                     Press Kit
                                     Auditorium                                                                                                                                                                                                                                               Center
My SXSWorld                                                                                                                                                                                  Mentor Sessions
                                    Shores Stage
   Stories
                                                                                                                                                    Video               Parties & Play       Quickies Sessions                                                                                                          FAQ

                                    Any additional                                                                                                                                           Demo Listening
                                       venues                                                                                                      Podcasts                                  Sessions                                                                                                             Press Credentials

                                                                                                                                                                                             CLE
                                                                                                                                                                                                                                                                                                                    Photo Policy




                                                                                                                                                                Interactive

                                                                                                                                                                    News &                                                                                                            ScreenBurn
                                                                                                                                                                                           Schedule                Talks             Parties & Play         Web Awards                                        Getting Around             Press
                                                                                                                                                                  Information                                                                                                         Gaming Fest


                                                                                                                                                                Interactive Hub              Talks               Speakers                                    Winners                                           Austin Map           Press Releases


                                                                                                                                                                                                             Opening Remarks                                                                                   Conference
                                                                                                                                                                     FAQ                 Parties & Play                                                      Finalists                                                                 Press Kit
                                                                                                                                                                                                                                                                                                                 Center
                                                                                                                                                                                                             Keynotes
                                                                                                                                                                    Video                                                                                    Ceremony                                                                    FAQ
                                                                                                                                                                                                             Book Readings
    Film
                                                                                                                                                                                                             Core
                                                                                                                                                                  Podcasts                                                                                  Dewey Award                                                            Press Credentials
                                                                                                                                                                                                             Conversations
   News &
                   Schedule            Talks             FIlms          Parties & Play   Global Doc Days   Getting Around        Press
 Information
                                                                                                                                                                                                                Speaking
                                                                                                                                                                                                               Opportunities                                                                                                          Photo Policy
The News Reel        Talks           Speakers         Film Trailers                                         Austin Map      Press Releases

                                                                                                                                                                                                                Panel Picker
                                     Speaking                                                               Conference
     FAQ             Films                           Past Winners                                                               Press Kit
                                    Opportunities                                                             Center

                                                                                                                                                                                                                                                                                                                            Key
    Video        Parties & Play                                                                                                   FAQ
                                                                                                                                                                                                                Panel Picker
                                                                                                                                                                                                                                                                                                                                    Primary navigation

  Podcasts                                                                                                                  Press Credentials
                                                                                                                                                                                                                                                                                                                               a    Secondary navigation

                                                                                                                                                                                                                                                                                                                               a    Link to separate section
                                                                                                                              Photo Policy

                                                                                                                                                                                                                                                                                                                               a    Separate sub-site

                                                                                                                                                                                                                                                                                                                               a    Future navigation



                                                                                                                                                                                                                                                                                                                               Modified: Tue May 27 2008




                                                                                                                                                                                                                                                       Puget Sound SIGCHI - Seattle
Process Flow




    Puget Sound SIGCHI - Seattle
Navigation
Principals

             Puget Sound SIGCHI - Seattle
Higher Priority




   Reading Pattern
        Written english is read left to right,
        top to bottom. The top left is the
        first location the reader looks.


                                     Lower Priority
                                           Puget Sound SIGCHI - Seattle
Fitts’s Law
The time to acquire a target
is a function of the distance
to and size of the target.




                                Puget Sound SIGCHI - Seattle
The Scent of
 Information
The organization of information to
reassure a user they are are on the
right path for locating the
information they are looking for.
Jared Spool
User Interface Engineering

                                 Puget Sound SIGCHI - Seattle
!
The Navigation
   Schema


            Puget Sound SIGCHI - Seattle
Global Navigation
                                                 Navigation Schema                                               GiantCampus.com Information Architecture
                                                                                                                                       Navigation Schema


                                                                                           888-904-2267         |     Live Help    |    Contact    |   Sign In / Sign Up
                                                                                                                                                                Search



Primary Navigation

        Home                Courses              Programs           Locations         Our Difference        Community               About




        Home               Courses               Programs           Locations         Our Difference        Community               About




Secondary Navigation

  Game Design                                        Game Design                                       Game Design


  3D Modeling                                        3D Modeling                                       3D Modeling


  Digital Photography & Graphics                     Digital Photography & Graphics                    Digital Photography & Graphics

  Flash Animation & Web Design                       Flash Animation & Web Design                      Flash Animation & Web Design

  Video Production                                   Video Production                                  Video Production


  Programming & Robotics                             Programming & Robotics                            Programming & Robotics


  General Computing                                  General Computing                                 General Computing


  Our Approach                                       Our Approach                                      Our Approach




Breadcrumb Navigation

Home     >      Courses     >      Flash Animation & Web Design            >    Web Design with Dreamweaver



Footer Navigation


Feedback        | Legal     |      Careers   |   Press Room                                                            888-904-2267         |   Live Help   |   Contact




                                                                                                                                                       Puget Sound SIGCHI - Seattle
Part Two:
Layout & Page
  Structure

                Puget Sound SIGCHI - Seattle
Questions



            Puget Sound SIGCHI - Seattle
?
 What do I
notice first?


           Puget Sound SIGCHI - Seattle
?
 How is this
information
 organized?

           Puget Sound SIGCHI - Seattle
?
What seems to
 be related?


           Puget Sound SIGCHI - Seattle
Inputs



         Puget Sound SIGCHI - Seattle
Personas




 Puget Sound SIGCHI - Seattle
Page Description Diagram
                                                                                                                                  Sample Company Name
                                                                                                  Home Page                             Page Description Diagrams

1                                           2                                   3
Main call to action                         Search                              About company                             Notes
Gets users thinking about the brand     A useful site search should always be An outline of what your company is all      The homepage has been shifted to
and specific actions they can make.     available on the page to allow users an about.                                    emphasize content that’s currently
                                        alternative method for finding your                                               buried elsewhere in your site. The pro-
Sign-up                                 content.                                 Privacy, Terms of Use, Etc.              posed navigation structure reinforces
A call to action that encourages peo-                                            Most of the information that is cur-     this goal.
ple to sign up for recently added con-  Link list                                rently listed in the footer should re-
tent on the site.                       A list of semi-recently added link con- main there. The contact and address       The home page should provide a
                                        tent. This list should contain 5-7 links information can easily be moved to       clean path to the various sections of
Featured article or essay               with date and comment meta infor-        the contact page, though. We also        the site.
Shows the first paragraph of an article mation for each.                         recommend adding in some naviga-
with associated image, as well as the                                            tional links, where possible.
day it was published and the number
of comments made.

Latest entries
A short listing of the latest articles or
essays that have been posted. There
should be between 5-7 shown on the
home page. The featured article
should not be displayed in this list.




Highest Priority                                                                                     Lowest Priority
                                                                                                                                       Monday, September 24, 2007




                                                                                                                                      Puget Sound SIGCHI - Seattle
Layout Principals


             Puget Sound SIGCHI - Seattle
Common Location
 of web Objects




  Michael L. Bernard
  Software Usability Research Laboratory, Wichita State University

                                                             Puget Sound SIGCHI - Seattle
Law of Closure
The mind may experience elements it
does not perceive through sensation,
in order to complete a regular figure
(that is, to increase regularity).



                                Puget Sound SIGCHI - Seattle
Law of Similarity
 The mind groups similar elements
 into collective entities or totalities.
 This similarity might depend on
 relationships of form, color, size, or
 brightness.


                                      Puget Sound SIGCHI - Seattle
Law of Proximity
 Spatial or temporal proximity of
 elements may induce the mind to
 perceive a collective or totality.




                                      Puget Sound SIGCHI - Seattle
[          ][            ][             ]
Law of Symmetry
 Symmetrical images are perceived
 collectively, even in spite of distance.




                                     Puget Sound SIGCHI - Seattle
Law of Continuity
 The mind continues visual, auditory,
 and kinetic patterns.




                                   Puget Sound SIGCHI - Seattle
Law of Common Fate
  Elements with the same moving direction
  are perceived as a collective or unit.




                                    Puget Sound SIGCHI - Seattle
Law of Common Fate
  Elements with the same moving direction
  are perceived as a collective or unit.




                                    Puget Sound SIGCHI - Seattle
!
The Zone Diagram


            Puget Sound SIGCHI - Seattle
Zone Diagram




     Puget Sound SIGCHI - Seattle
Part Three:
  Page Detail &
Content Integration

                    Puget Sound SIGCHI - Seattle
Questions



            Puget Sound SIGCHI - Seattle
?
What is here?


           Puget Sound SIGCHI - Seattle
?
What can I do?


            Puget Sound SIGCHI - Seattle
Inputs



         Puget Sound SIGCHI - Seattle
Content Strategy




        Puget Sound SIGCHI - Seattle
Sitemap            About SXSW                 Contact
                                                                                                                                                                                                                                                                                                                               SXSW Site Structure
                                                                                                                                                                                                                                                                                                                                 New Site Structure

                                                                                                                                                                                                                                                                                                                      Market at SXSW               Tools

                                                                                                                                                                                                                                                                            History                                                            SXSW SMS

SXSW.com                                                                                                                                                                                                                                                                                                                                           Gydget
                                                                                                                                                                                                                                                                          Sponsors

                                                                                                                                                                                                                                                                         Sustainability                                                          Facebook
   News &
                     Register       Getting Around   Trade Shows        Merchandise       Interactive         Film             Music
 Information
                                                                                                                                                                                                                                                                                                                                                 Opera Mini
                                                                                                                                                                                                                                                                           Glossary

Brochures and      Hotels for                                                                                                                                                                                                                                                                                                                      Utterz
                                      Austin Map     Music Exhibition
Forms (PDFs)     SXSWeek 2008

                                                                                                                                                   Music                                                                                                                                                                                       Music Player
                                     Conference
 Mailing Lists   Travel Discounts                     iF! Exhibition
                                       Center
                                                                                                                                                    News &                                                                                                      Flatstock Poster
                                                                                                                                                                           Schedule                  Talks                 Shows           Parties & Play                                 Getting Around               Press
                                                                                                                                                  Information                                                                                                         Show
  Subscribe        International    Carver Center

                                                                                                                                                The Daily Chord              Talks                Speakers                 Artists                                                          Austin Map             Press Releases
  SXSWorld         Online Reg       Day Stage Cafe
  Magazine          Directory
                                                                                                                                                                                             Keynote                                                                                        Conference
                                                                                                                                                     FAQ                    Shows                                       SXSW Live                                                                                     Press Kit
                                     Auditorium                                                                                                                                                                                                                                               Center
My SXSWorld                                                                                                                                                                                  Mentor Sessions
                                    Shores Stage
   Stories
                                                                                                                                                    Video               Parties & Play       Quickies Sessions                                                                                                          FAQ

                                    Any additional                                                                                                                                           Demo Listening
                                       venues                                                                                                      Podcasts                                  Sessions                                                                                                             Press Credentials

                                                                                                                                                                                             CLE
                                                                                                                                                                                                                                                                                                                    Photo Policy




                                                                                                                                                                Interactive

                                                                                                                                                                    News &                                                                                                            ScreenBurn
                                                                                                                                                                                           Schedule                Talks             Parties & Play         Web Awards                                        Getting Around             Press
                                                                                                                                                                  Information                                                                                                         Gaming Fest


                                                                                                                                                                Interactive Hub              Talks               Speakers                                    Winners                                           Austin Map           Press Releases


                                                                                                                                                                                                             Opening Remarks                                                                                   Conference
                                                                                                                                                                     FAQ                 Parties & Play                                                      Finalists                                                                 Press Kit
                                                                                                                                                                                                                                                                                                                 Center
                                                                                                                                                                                                             Keynotes
                                                                                                                                                                    Video                                                                                    Ceremony                                                                    FAQ
                                                                                                                                                                                                             Book Readings
    Film
                                                                                                                                                                                                             Core
                                                                                                                                                                  Podcasts                                                                                  Dewey Award                                                            Press Credentials
                                                                                                                                                                                                             Conversations
   News &
                   Schedule            Talks             FIlms          Parties & Play   Global Doc Days   Getting Around        Press
 Information
                                                                                                                                                                                                                Speaking
                                                                                                                                                                                                               Opportunities                                                                                                          Photo Policy
The News Reel        Talks           Speakers         Film Trailers                                         Austin Map      Press Releases

                                                                                                                                                                                                                Panel Picker
                                     Speaking                                                               Conference
     FAQ             Films                           Past Winners                                                               Press Kit
                                    Opportunities                                                             Center

                                                                                                                                                                                                                                                                                                                            Key
    Video        Parties & Play                                                                                                   FAQ
                                                                                                                                                                                                                Panel Picker
                                                                                                                                                                                                                                                                                                                                    Primary navigation

  Podcasts                                                                                                                  Press Credentials
                                                                                                                                                                                                                                                                                                                               a    Secondary navigation

                                                                                                                                                                                                                                                                                                                               a    Link to separate section
                                                                                                                              Photo Policy

                                                                                                                                                                                                                                                                                                                               a    Separate sub-site

                                                                                                                                                                                                                                                                                                                               a    Future navigation



                                                                                                                                                                                                                                                                                                                               Modified: Tue May 27 2008




                                                                                                                                                                                                                                                       Puget Sound SIGCHI - Seattle
Global Navigation
                                                 Navigation Schema                                               GiantCampus.com Information Architecture
                                                                                                                                       Navigation Schema


                                                                                           888-904-2267         |     Live Help    |    Contact    |   Sign In / Sign Up
                                                                                                                                                                Search



Primary Navigation

        Home                Courses              Programs           Locations         Our Difference        Community               About




        Home               Courses               Programs           Locations         Our Difference        Community               About




Secondary Navigation

  Game Design                                        Game Design                                       Game Design


  3D Modeling                                        3D Modeling                                       3D Modeling


  Digital Photography & Graphics                     Digital Photography & Graphics                    Digital Photography & Graphics

  Flash Animation & Web Design                       Flash Animation & Web Design                      Flash Animation & Web Design

  Video Production                                   Video Production                                  Video Production


  Programming & Robotics                             Programming & Robotics                            Programming & Robotics


  General Computing                                  General Computing                                 General Computing


  Our Approach                                       Our Approach                                      Our Approach




Breadcrumb Navigation

Home     >      Courses     >      Flash Animation & Web Design            >    Web Design with Dreamweaver



Footer Navigation


Feedback        | Legal     |      Careers   |   Press Room                                                            888-904-2267         |   Live Help   |   Contact




                                                                                                                                                       Puget Sound SIGCHI - Seattle
Personas




 Puget Sound SIGCHI - Seattle
Page Description Diagram
                                                                                                                                  Sample Company Name
                                                                                                  Home Page                             Page Description Diagrams

1                                           2                                   3
Main call to action                         Search                              About company                             Notes
Gets users thinking about the brand     A useful site search should always be An outline of what your company is all      The homepage has been shifted to
and specific actions they can make.     available on the page to allow users an about.                                    emphasize content that’s currently
                                        alternative method for finding your                                               buried elsewhere in your site. The pro-
Sign-up                                 content.                                 Privacy, Terms of Use, Etc.              posed navigation structure reinforces
A call to action that encourages peo-                                            Most of the information that is cur-     this goal.
ple to sign up for recently added con-  Link list                                rently listed in the footer should re-
tent on the site.                       A list of semi-recently added link con- main there. The contact and address       The home page should provide a
                                        tent. This list should contain 5-7 links information can easily be moved to       clean path to the various sections of
Featured article or essay               with date and comment meta infor-        the contact page, though. We also        the site.
Shows the first paragraph of an article mation for each.                         recommend adding in some naviga-
with associated image, as well as the                                            tional links, where possible.
day it was published and the number
of comments made.

Latest entries
A short listing of the latest articles or
essays that have been posted. There
should be between 5-7 shown on the
home page. The featured article
should not be displayed in this list.




Highest Priority                                                                                     Lowest Priority
                                                                                                                                       Monday, September 24, 2007




                                                                                                                                      Puget Sound SIGCHI - Seattle
Zone Diagram




     Puget Sound SIGCHI - Seattle
Information
Architecture
 Principals

           Puget Sound SIGCHI - Seattle
Magic Number Seven
   Perceived channel capacity of a
   number of human cognitive and
   perceptual tasks.
   George A. Miller
   Department of Psychology, Princeton University



                                                Puget Sound SIGCHI - Seattle
Simon’s Law
Hierarchical structures reduce complexity -
the better you manage to provide users
with a sense of visual hierarchy, the easier
your content will be to perceive.



                                     Puget Sound SIGCHI - Seattle
Progressive
    Disclosure
Progressive disclosure defers advanced
or rarely used features to a secondary
screen, making applications easier to
learn and less error-prone.
Jakob Nielsen
Nielsen Norman Group

                                 Puget Sound SIGCHI - Seattle
The Knowledge Gap
   Increasing gap between higher
   and lower educated people
   Tichenor, Donohue and Olien
   University of Minnesota




                                 Puget Sound SIGCHI - Seattle
Clear Calls to Action
   Draw the user to the goal of the page.
   Encourage the next action to be taken.




                                     Puget Sound SIGCHI - Seattle
Use Patterns First,
 Innovate Last.
 Know the rules before you break them.




                                  Puget Sound SIGCHI - Seattle
!
The Wireframe


           Puget Sound SIGCHI - Seattle
Wireframe




  Puget Sound SIGCHI - Seattle
Part Four:
  Interaction &
Dynamic Elements

                  Puget Sound SIGCHI - Seattle
Questions



            Puget Sound SIGCHI - Seattle
?
What happens
when I do this?


            Puget Sound SIGCHI - Seattle
?
How long will
 this take?


           Puget Sound SIGCHI - Seattle
?
 What just
happened?


         Puget Sound SIGCHI - Seattle
?
Can I undo this?


             Puget Sound SIGCHI - Seattle
Inputs



         Puget Sound SIGCHI - Seattle
Process Flow




    Puget Sound SIGCHI - Seattle
Wireframe




  Puget Sound SIGCHI - Seattle
Interaction
 Principals


          Puget Sound SIGCHI - Seattle
Consistency
Interactions that are the same in
principal should be consistent in
behavior system wise. Be consistent
with the user’s expectations.


                                 Puget Sound SIGCHI - Seattle
Latency Reduction
 Allow for apparent quicker response
 times. Use AJAX, Cache information,
 etc. Anticipate the user’s next action.



                                     Puget Sound SIGCHI - Seattle
Show State
Always communicate what state the
current interaction is at (active/inactive).




                                      Puget Sound SIGCHI - Seattle
Do No Harm
Allow users to be able to undo what
they have done. Auto-save for the user
so information is not lost. Repopulate
form fields where appropriate.


                                 Puget Sound SIGCHI - Seattle
!
The Storyboard


           Puget Sound SIGCHI - Seattle
Storyboard

Manage Account                 Manage Account                                Manage Account                       Manage Account                                 Manage Account                            Manage Account

! Rename account               ! Rename account                              ! Rename account                     ! Rename account                               ! Rename account                          ! Rename account

 Home Checking        Rename   ! Stop check                                  ! Stop check                         ! Stop check                                   ! Stop check                              ! Stop check
                               Use this form to place a stop check on a      ! Order checks                       ! Order checks                                 ! Order checks                            ! Order checks
! Stop check                   check that has been issued. Amount of the
                               check will be credited back to your account   Order new checks for this account?   ! Order check card                             ! Order check card                        ! Order check card
! Order checks                 (more info)
                                                                              Order Checks
                                                                                                                  Note: If your card was lost or stolen please   ! Manage Statements                       ! Manage Statements
! Order check card             Account #: ...4324
                                                                                                                  call 800-637-0852 to ensure deactivation.
                                                                             ! Order check card                   (more info)                                             Paper Statements                 ! Download
! Manage Statements            From Check #:

                               To Check #:                                   ! Manage Statements                  Reason: Damaged check card                                   Go Paperless                 Select file format...
! Download
                               Reason: Lost check                            ! Download                           Rush Delivery?
                                                                                                                                                                 Note: these changes will impact your        Download Now

                                                                                                                  Note you will be chaged a $45.00 fee for a     savings account(s) as well. (more info)
                               Note you will be chaged a $8.00 fee for
                               each stop check order. (more info)                                                 rush delivery of a check card. (more info)
                                                                                                                                                                 ! Download
                                                             Stop Check                                           Charge to account: Home checking (5423)

                                                                                                                                                       Order
                               ! Order checks

                               ! Order check card                                                                 ! Manage Statements

                               ! Manage Statements                                                                ! Download

                               ! Download




                                                                                                                                                                                  Puget Sound SIGCHI - Seattle
!
The Annotated
  Wireframe


           Puget Sound SIGCHI - Seattle
Annotated Wireframe




            Puget Sound SIGCHI - Seattle
Photo by Dan Buczynski
http://www.flickr.com/photos/macwagen/225493960/
                                                  Puget Sound SIGCHI - Seattle
Relax, there is a map!




Peter Morville and Jeffery Callender   Puget Sound SIGCHI - Seattle
...and Books!




                Puget Sound SIGCHI - Seattle
Thank you!



         Puget Sound SIGCHI - Seattle
Thank you!

Remember, comment on twitter with #pssigchi




                                      Puget Sound SIGCHI - Seattle
?
Questions?


         Puget Sound SIGCHI - Seattle
The Life Cycle of a
Wireframe
Nick Finck
nick@blueflavor.com
Blue Flavor - http://blueflavor.com
Personal - http://nickfinck.com



                                     Puget Sound SIGCHI - Seattle

Weitere ähnliche Inhalte

Was ist angesagt?

DESIGN: Restaurant Design 1.0
DESIGN: Restaurant Design 1.0DESIGN: Restaurant Design 1.0
DESIGN: Restaurant Design 1.0ArchiEducPH
 
Universal Design from NC State
Universal Design from NC StateUniversal Design from NC State
Universal Design from NC StateScott Rains
 
street art youth center project.
street art  youth center project.street art  youth center project.
street art youth center project.audrey Manga
 
Architectural (construction) systems-section 3
Architectural (construction) systems-section 3Architectural (construction) systems-section 3
Architectural (construction) systems-section 3Saja Hamad
 
Gestalt for Visual Design
Gestalt for Visual DesignGestalt for Visual Design
Gestalt for Visual DesignJodie Nicotra
 
03 architectural principles & elements
03 architectural principles & elements03 architectural principles & elements
03 architectural principles & elementsJan Echiverri-Quintano
 
Spp 201-pre-design services
Spp 201-pre-design servicesSpp 201-pre-design services
Spp 201-pre-design servicesMelvin Patawaran
 
Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...
Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...
Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...Gaurav Singh Rajput
 
Commercial Design Project
Commercial Design ProjectCommercial Design Project
Commercial Design Projectdezyneecole
 
Manila Comprehensive Land Use Plan
Manila Comprehensive Land Use PlanManila Comprehensive Land Use Plan
Manila Comprehensive Land Use PlanJeannifer Villanueva
 
Rushdina Architect RA profiles
Rushdina Architect RA profilesRushdina Architect RA profiles
Rushdina Architect RA profilesArRushdinaIsmail
 
Basic Design : Elements & Principles
Basic Design : Elements & PrinciplesBasic Design : Elements & Principles
Basic Design : Elements & PrinciplesSujit Jadhav
 
Site Planning in the Context of Architectural Projects
Site Planning in the Context of Architectural Projects Site Planning in the Context of Architectural Projects
Site Planning in the Context of Architectural Projects JIT KUMAR GUPTA
 
architecture of south east asia
architecture of south east asiaarchitecture of south east asia
architecture of south east asiakedai hantu
 

Was ist angesagt? (20)

DESIGN: Restaurant Design 1.0
DESIGN: Restaurant Design 1.0DESIGN: Restaurant Design 1.0
DESIGN: Restaurant Design 1.0
 
Universal Design from NC State
Universal Design from NC StateUniversal Design from NC State
Universal Design from NC State
 
street art youth center project.
street art  youth center project.street art  youth center project.
street art youth center project.
 
Architectural (construction) systems-section 3
Architectural (construction) systems-section 3Architectural (construction) systems-section 3
Architectural (construction) systems-section 3
 
Gestalt for Visual Design
Gestalt for Visual DesignGestalt for Visual Design
Gestalt for Visual Design
 
03 architectural principles & elements
03 architectural principles & elements03 architectural principles & elements
03 architectural principles & elements
 
Buildings Structure system
Buildings Structure systemBuildings Structure system
Buildings Structure system
 
Steel Roof Truss
Steel Roof TrussSteel Roof Truss
Steel Roof Truss
 
Spp 201-pre-design services
Spp 201-pre-design servicesSpp 201-pre-design services
Spp 201-pre-design services
 
Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...
Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...
Anthropometry Data | workspace Design | Ergonomic Chair Design | Gaurav Singh...
 
Shell Structures
Shell StructuresShell Structures
Shell Structures
 
Commercial Design Project
Commercial Design ProjectCommercial Design Project
Commercial Design Project
 
Manila Comprehensive Land Use Plan
Manila Comprehensive Land Use PlanManila Comprehensive Land Use Plan
Manila Comprehensive Land Use Plan
 
Rushdina Architect RA profiles
Rushdina Architect RA profilesRushdina Architect RA profiles
Rushdina Architect RA profiles
 
Badminton for P.E. class
Badminton for P.E. classBadminton for P.E. class
Badminton for P.E. class
 
Fencing Lesson Plan-JYoung-002
Fencing Lesson Plan-JYoung-002Fencing Lesson Plan-JYoung-002
Fencing Lesson Plan-JYoung-002
 
Basic Design : Elements & Principles
Basic Design : Elements & PrinciplesBasic Design : Elements & Principles
Basic Design : Elements & Principles
 
Site Planning in the Context of Architectural Projects
Site Planning in the Context of Architectural Projects Site Planning in the Context of Architectural Projects
Site Planning in the Context of Architectural Projects
 
Module 1 1.2 space planning
Module 1  1.2 space planningModule 1  1.2 space planning
Module 1 1.2 space planning
 
architecture of south east asia
architecture of south east asiaarchitecture of south east asia
architecture of south east asia
 

Andere mochten auch

Lecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principlesLecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principlesmoduledesign
 
Depth perception by imran ali
Depth perception by imran aliDepth perception by imran ali
Depth perception by imran aliImran Sono
 
Development of action and perception
Development of action and perceptionDevelopment of action and perception
Development of action and perceptionMohsen Sarhady
 
Sensation and perception lecture notes ss
Sensation and perception lecture notes ssSensation and perception lecture notes ss
Sensation and perception lecture notes ssMrAguiar
 
PSY 126: Major Topics in Psychology
PSY 126: Major Topics in PsychologyPSY 126: Major Topics in Psychology
PSY 126: Major Topics in PsychologyMatthew Eisenhard
 
Sensation & Perception PowerPoint
Sensation & Perception PowerPointSensation & Perception PowerPoint
Sensation & Perception PowerPointKRyder
 
Perceptual Process - Organizational Behaviour
Perceptual Process - Organizational BehaviourPerceptual Process - Organizational Behaviour
Perceptual Process - Organizational BehaviourMadhuwanthi Tennakoon
 

Andere mochten auch (8)

Lecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principlesLecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principles
 
Depth perception by imran ali
Depth perception by imran aliDepth perception by imran ali
Depth perception by imran ali
 
Development of action and perception
Development of action and perceptionDevelopment of action and perception
Development of action and perception
 
Sensation and perception lecture notes ss
Sensation and perception lecture notes ssSensation and perception lecture notes ss
Sensation and perception lecture notes ss
 
PSY 126: Major Topics in Psychology
PSY 126: Major Topics in PsychologyPSY 126: Major Topics in Psychology
PSY 126: Major Topics in Psychology
 
Perception
PerceptionPerception
Perception
 
Sensation & Perception PowerPoint
Sensation & Perception PowerPointSensation & Perception PowerPoint
Sensation & Perception PowerPoint
 
Perceptual Process - Organizational Behaviour
Perceptual Process - Organizational BehaviourPerceptual Process - Organizational Behaviour
Perceptual Process - Organizational Behaviour
 

Mehr von Nick Finck

The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX DisciplinesNick Finck
 
Page Description Diagrams
Page Description DiagramsPage Description Diagrams
Page Description DiagramsNick Finck
 
Mobile Interaction Design & Strategy
Mobile Interaction Design & StrategyMobile Interaction Design & Strategy
Mobile Interaction Design & StrategyNick Finck
 
The cross channel experience - UXLx
The cross channel experience - UXLxThe cross channel experience - UXLx
The cross channel experience - UXLxNick Finck
 
The cross channel experience
The cross channel experienceThe cross channel experience
The cross channel experienceNick Finck
 
User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the WildNick Finck
 
The Future of Technology and Information
The Future of Technology and InformationThe Future of Technology and Information
The Future of Technology and InformationNick 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 DesignNick 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 experienceNick Finck
 
User experience utopia - interact seattle
User experience utopia - interact seattleUser experience utopia - interact seattle
User experience utopia - interact seattleNick Finck
 
Mobile Web User Experience
Mobile Web User ExperienceMobile Web User Experience
Mobile Web User ExperienceNick Finck
 
Sustainable UX
Sustainable UXSustainable UX
Sustainable UXNick 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 communityNick 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 StyleNick Finck
 
The Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceThe Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceNick Finck
 
The Future Of IA
The Future Of IAThe Future Of IA
The Future Of IANick 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
 

Mehr von Nick Finck (20)

The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX Disciplines
 
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)
 

Kürzlich hochgeladen

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Kürzlich hochgeladen (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

The Life Cycle of a Wireframe

  • 1. The Life Cycle of a Wireframe Nick Finck May 28, 2009 Use #pssigchi when commenting on twitter Puget Sound SIGCHI - Seattle
  • 2. ? Who the f#@k is this dude? Puget Sound SIGCHI - Seattle
  • 3. Nick Finck • Principle & Director of User Experience at Blue Flavor • Based in Seattle, Washington • Over 13 years of experience working in the web field • Projects: Adobe, Cisco, CitiBank, Converse, FDIC, HP, IBM, Intel, Microsoft, Oprah, PBS, Peet’s Coffee • Co-Organizer of Refresh Seattle • Former publisher of Digital Web Magazine Puget Sound SIGCHI - Seattle
  • 4. 3 IA is a three step process Puget Sound SIGCHI - Seattle
  • 5. Understanding the Problem Puget Sound SIGCHI - Seattle
  • 6. Puget Sound SIGCHI - Seattle
  • 7. Bu sin ds ess ee N Co er ns Us tra int s Technical Requirements Puget Sound SIGCHI - Seattle
  • 8. Finding a Solution Puget Sound SIGCHI - Seattle
  • 9. Photo by DrJoanne - http://www.flickr.com/photos/drjoanne/10026716/ Puget Sound SIGCHI - Seattle
  • 10. Presenting the Solution Puget Sound SIGCHI - Seattle
  • 11. ? What makes a good Wireframe? Puget Sound SIGCHI - Seattle
  • 12. 4 Wireframes in four parts Puget Sound SIGCHI - Seattle
  • 13. Part One: Navigation & Wayfinding Puget Sound SIGCHI - Seattle
  • 14. Questions Puget Sound SIGCHI - Seattle
  • 15. ? Where am I? Puget Sound SIGCHI - Seattle
  • 16. ? Is what I am looking for here? Puget Sound SIGCHI - Seattle
  • 17. ? Where do I want to go next? Puget Sound SIGCHI - Seattle
  • 18. ? Where have I already been? Puget Sound SIGCHI - Seattle
  • 19. Inputs Puget Sound SIGCHI - Seattle
  • 20. Content Inventory Puget Sound SIGCHI - Seattle
  • 21. Content Audit Puget Sound SIGCHI - Seattle
  • 22. Content Strategy Puget Sound SIGCHI - Seattle
  • 23. Sitemap About SXSW Contact SXSW Site Structure New Site Structure Market at SXSW Tools History SXSW SMS SXSW.com Gydget Sponsors Sustainability Facebook News & Register Getting Around Trade Shows Merchandise Interactive Film Music Information Opera Mini Glossary Brochures and Hotels for Utterz Austin Map Music Exhibition Forms (PDFs) SXSWeek 2008 Music Music Player Conference Mailing Lists Travel Discounts iF! Exhibition Center News & Flatstock Poster Schedule Talks Shows Parties & Play Getting Around Press Information Show Subscribe International Carver Center The Daily Chord Talks Speakers Artists Austin Map Press Releases SXSWorld Online Reg Day Stage Cafe Magazine Directory Keynote Conference FAQ Shows SXSW Live Press Kit Auditorium Center My SXSWorld Mentor Sessions Shores Stage Stories Video Parties & Play Quickies Sessions FAQ Any additional Demo Listening venues Podcasts Sessions Press Credentials CLE Photo Policy Interactive News & ScreenBurn Schedule Talks Parties & Play Web Awards Getting Around Press Information Gaming Fest Interactive Hub Talks Speakers Winners Austin Map Press Releases Opening Remarks Conference FAQ Parties & Play Finalists Press Kit Center Keynotes Video Ceremony FAQ Book Readings Film Core Podcasts Dewey Award Press Credentials Conversations News & Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press Information Speaking Opportunities Photo Policy The News Reel Talks Speakers Film Trailers Austin Map Press Releases Panel Picker Speaking Conference FAQ Films Past Winners Press Kit Opportunities Center Key Video Parties & Play FAQ Panel Picker Primary navigation Podcasts Press Credentials a Secondary navigation a Link to separate section Photo Policy a Separate sub-site a Future navigation Modified: Tue May 27 2008 Puget Sound SIGCHI - Seattle
  • 24. Process Flow Puget Sound SIGCHI - Seattle
  • 25. Navigation Principals Puget Sound SIGCHI - Seattle
  • 26. Higher Priority Reading Pattern Written english is read left to right, top to bottom. The top left is the first location the reader looks. Lower Priority Puget Sound SIGCHI - Seattle
  • 27. Fitts’s Law The time to acquire a target is a function of the distance to and size of the target. Puget Sound SIGCHI - Seattle
  • 28. The Scent of Information The organization of information to reassure a user they are are on the right path for locating the information they are looking for. Jared Spool User Interface Engineering Puget Sound SIGCHI - Seattle
  • 29. ! The Navigation Schema Puget Sound SIGCHI - Seattle
  • 30. Global Navigation Navigation Schema GiantCampus.com Information Architecture Navigation Schema 888-904-2267 | Live Help | Contact | Sign In / Sign Up Search Primary Navigation Home Courses Programs Locations Our Difference Community About Home Courses Programs Locations Our Difference Community About Secondary Navigation Game Design Game Design Game Design 3D Modeling 3D Modeling 3D Modeling Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design Video Production Video Production Video Production Programming & Robotics Programming & Robotics Programming & Robotics General Computing General Computing General Computing Our Approach Our Approach Our Approach Breadcrumb Navigation Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver Footer Navigation Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact Puget Sound SIGCHI - Seattle
  • 31. Part Two: Layout & Page Structure Puget Sound SIGCHI - Seattle
  • 32. Questions Puget Sound SIGCHI - Seattle
  • 33. ? What do I notice first? Puget Sound SIGCHI - Seattle
  • 34. ? How is this information organized? Puget Sound SIGCHI - Seattle
  • 35. ? What seems to be related? Puget Sound SIGCHI - Seattle
  • 36. Inputs Puget Sound SIGCHI - Seattle
  • 37. Personas Puget Sound SIGCHI - Seattle
  • 38. Page Description Diagram Sample Company Name Home Page Page Description Diagrams 1 2 3 Main call to action Search About company Notes Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently alternative method for finding your buried elsewhere in your site. The pro- Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces A call to action that encourages peo- Most of the information that is cur- this goal. ple to sign up for recently added con- Link list rently listed in the footer should re- tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of Featured article or essay with date and comment meta infor- the contact page, though. We also the site. Shows the first paragraph of an article mation for each. recommend adding in some naviga- with associated image, as well as the tional links, where possible. day it was published and the number of comments made. Latest entries A short listing of the latest articles or essays that have been posted. There should be between 5-7 shown on the home page. The featured article should not be displayed in this list. Highest Priority Lowest Priority Monday, September 24, 2007 Puget Sound SIGCHI - Seattle
  • 39. Layout Principals Puget Sound SIGCHI - Seattle
  • 40. Common Location of web Objects Michael L. Bernard Software Usability Research Laboratory, Wichita State University Puget Sound SIGCHI - Seattle
  • 41. Law of Closure The mind may experience elements it does not perceive through sensation, in order to complete a regular figure (that is, to increase regularity). Puget Sound SIGCHI - Seattle
  • 42. Law of Similarity The mind groups similar elements into collective entities or totalities. This similarity might depend on relationships of form, color, size, or brightness. Puget Sound SIGCHI - Seattle
  • 43. Law of Proximity Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality. Puget Sound SIGCHI - Seattle
  • 44. [ ][ ][ ] Law of Symmetry Symmetrical images are perceived collectively, even in spite of distance. Puget Sound SIGCHI - Seattle
  • 45. Law of Continuity The mind continues visual, auditory, and kinetic patterns. Puget Sound SIGCHI - Seattle
  • 46. Law of Common Fate Elements with the same moving direction are perceived as a collective or unit. Puget Sound SIGCHI - Seattle
  • 47. Law of Common Fate Elements with the same moving direction are perceived as a collective or unit. Puget Sound SIGCHI - Seattle
  • 48. ! The Zone Diagram Puget Sound SIGCHI - Seattle
  • 49. Zone Diagram Puget Sound SIGCHI - Seattle
  • 50. Part Three: Page Detail & Content Integration Puget Sound SIGCHI - Seattle
  • 51. Questions Puget Sound SIGCHI - Seattle
  • 52. ? What is here? Puget Sound SIGCHI - Seattle
  • 53. ? What can I do? Puget Sound SIGCHI - Seattle
  • 54. Inputs Puget Sound SIGCHI - Seattle
  • 55. Content Strategy Puget Sound SIGCHI - Seattle
  • 56. Sitemap About SXSW Contact SXSW Site Structure New Site Structure Market at SXSW Tools History SXSW SMS SXSW.com Gydget Sponsors Sustainability Facebook News & Register Getting Around Trade Shows Merchandise Interactive Film Music Information Opera Mini Glossary Brochures and Hotels for Utterz Austin Map Music Exhibition Forms (PDFs) SXSWeek 2008 Music Music Player Conference Mailing Lists Travel Discounts iF! Exhibition Center News & Flatstock Poster Schedule Talks Shows Parties & Play Getting Around Press Information Show Subscribe International Carver Center The Daily Chord Talks Speakers Artists Austin Map Press Releases SXSWorld Online Reg Day Stage Cafe Magazine Directory Keynote Conference FAQ Shows SXSW Live Press Kit Auditorium Center My SXSWorld Mentor Sessions Shores Stage Stories Video Parties & Play Quickies Sessions FAQ Any additional Demo Listening venues Podcasts Sessions Press Credentials CLE Photo Policy Interactive News & ScreenBurn Schedule Talks Parties & Play Web Awards Getting Around Press Information Gaming Fest Interactive Hub Talks Speakers Winners Austin Map Press Releases Opening Remarks Conference FAQ Parties & Play Finalists Press Kit Center Keynotes Video Ceremony FAQ Book Readings Film Core Podcasts Dewey Award Press Credentials Conversations News & Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press Information Speaking Opportunities Photo Policy The News Reel Talks Speakers Film Trailers Austin Map Press Releases Panel Picker Speaking Conference FAQ Films Past Winners Press Kit Opportunities Center Key Video Parties & Play FAQ Panel Picker Primary navigation Podcasts Press Credentials a Secondary navigation a Link to separate section Photo Policy a Separate sub-site a Future navigation Modified: Tue May 27 2008 Puget Sound SIGCHI - Seattle
  • 57. Global Navigation Navigation Schema GiantCampus.com Information Architecture Navigation Schema 888-904-2267 | Live Help | Contact | Sign In / Sign Up Search Primary Navigation Home Courses Programs Locations Our Difference Community About Home Courses Programs Locations Our Difference Community About Secondary Navigation Game Design Game Design Game Design 3D Modeling 3D Modeling 3D Modeling Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design Video Production Video Production Video Production Programming & Robotics Programming & Robotics Programming & Robotics General Computing General Computing General Computing Our Approach Our Approach Our Approach Breadcrumb Navigation Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver Footer Navigation Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact Puget Sound SIGCHI - Seattle
  • 58. Personas Puget Sound SIGCHI - Seattle
  • 59. Page Description Diagram Sample Company Name Home Page Page Description Diagrams 1 2 3 Main call to action Search About company Notes Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently alternative method for finding your buried elsewhere in your site. The pro- Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces A call to action that encourages peo- Most of the information that is cur- this goal. ple to sign up for recently added con- Link list rently listed in the footer should re- tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of Featured article or essay with date and comment meta infor- the contact page, though. We also the site. Shows the first paragraph of an article mation for each. recommend adding in some naviga- with associated image, as well as the tional links, where possible. day it was published and the number of comments made. Latest entries A short listing of the latest articles or essays that have been posted. There should be between 5-7 shown on the home page. The featured article should not be displayed in this list. Highest Priority Lowest Priority Monday, September 24, 2007 Puget Sound SIGCHI - Seattle
  • 60. Zone Diagram Puget Sound SIGCHI - Seattle
  • 61. Information Architecture Principals Puget Sound SIGCHI - Seattle
  • 62. Magic Number Seven Perceived channel capacity of a number of human cognitive and perceptual tasks. George A. Miller Department of Psychology, Princeton University Puget Sound SIGCHI - Seattle
  • 63. Simon’s Law Hierarchical structures reduce complexity - the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive. Puget Sound SIGCHI - Seattle
  • 64. Progressive Disclosure Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. Jakob Nielsen Nielsen Norman Group Puget Sound SIGCHI - Seattle
  • 65. The Knowledge Gap Increasing gap between higher and lower educated people Tichenor, Donohue and Olien University of Minnesota Puget Sound SIGCHI - Seattle
  • 66. Clear Calls to Action Draw the user to the goal of the page. Encourage the next action to be taken. Puget Sound SIGCHI - Seattle
  • 67. Use Patterns First, Innovate Last. Know the rules before you break them. Puget Sound SIGCHI - Seattle
  • 68. ! The Wireframe Puget Sound SIGCHI - Seattle
  • 69. Wireframe Puget Sound SIGCHI - Seattle
  • 70. Part Four: Interaction & Dynamic Elements Puget Sound SIGCHI - Seattle
  • 71. Questions Puget Sound SIGCHI - Seattle
  • 72. ? What happens when I do this? Puget Sound SIGCHI - Seattle
  • 73. ? How long will this take? Puget Sound SIGCHI - Seattle
  • 74. ? What just happened? Puget Sound SIGCHI - Seattle
  • 75. ? Can I undo this? Puget Sound SIGCHI - Seattle
  • 76. Inputs Puget Sound SIGCHI - Seattle
  • 77. Process Flow Puget Sound SIGCHI - Seattle
  • 78. Wireframe Puget Sound SIGCHI - Seattle
  • 79. Interaction Principals Puget Sound SIGCHI - Seattle
  • 80. Consistency Interactions that are the same in principal should be consistent in behavior system wise. Be consistent with the user’s expectations. Puget Sound SIGCHI - Seattle
  • 81. Latency Reduction Allow for apparent quicker response times. Use AJAX, Cache information, etc. Anticipate the user’s next action. Puget Sound SIGCHI - Seattle
  • 82. Show State Always communicate what state the current interaction is at (active/inactive). Puget Sound SIGCHI - Seattle
  • 83. Do No Harm Allow users to be able to undo what they have done. Auto-save for the user so information is not lost. Repopulate form fields where appropriate. Puget Sound SIGCHI - Seattle
  • 84. ! The Storyboard Puget Sound SIGCHI - Seattle
  • 85. Storyboard Manage Account Manage Account Manage Account Manage Account Manage Account Manage Account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account Home Checking Rename ! Stop check ! Stop check ! Stop check ! Stop check ! Stop check Use this form to place a stop check on a ! Order checks ! Order checks ! Order checks ! Order checks ! Stop check check that has been issued. Amount of the check will be credited back to your account Order new checks for this account? ! Order check card ! Order check card ! Order check card ! Order checks (more info) Order Checks Note: If your card was lost or stolen please ! Manage Statements ! Manage Statements ! Order check card Account #: ...4324 call 800-637-0852 to ensure deactivation. ! Order check card (more info) Paper Statements ! Download ! Manage Statements From Check #: To Check #: ! Manage Statements Reason: Damaged check card Go Paperless Select file format... ! Download Reason: Lost check ! Download Rush Delivery? Note: these changes will impact your Download Now Note you will be chaged a $45.00 fee for a savings account(s) as well. (more info) Note you will be chaged a $8.00 fee for each stop check order. (more info) rush delivery of a check card. (more info) ! Download Stop Check Charge to account: Home checking (5423) Order ! Order checks ! Order check card ! Manage Statements ! Manage Statements ! Download ! Download Puget Sound SIGCHI - Seattle
  • 86. ! The Annotated Wireframe Puget Sound SIGCHI - Seattle
  • 87. Annotated Wireframe Puget Sound SIGCHI - Seattle
  • 88. Photo by Dan Buczynski http://www.flickr.com/photos/macwagen/225493960/ Puget Sound SIGCHI - Seattle
  • 89. Relax, there is a map! Peter Morville and Jeffery Callender Puget Sound SIGCHI - Seattle
  • 90. ...and Books! Puget Sound SIGCHI - Seattle
  • 91. Thank you! Puget Sound SIGCHI - Seattle
  • 92. Thank you! Remember, comment on twitter with #pssigchi Puget Sound SIGCHI - Seattle
  • 93. ? Questions? Puget Sound SIGCHI - Seattle
  • 94. The Life Cycle of a Wireframe Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com Puget Sound SIGCHI - Seattle