Turning that UX
         frown upside-down


Saturday, October 2, 2010
#uxfrown
                            @hellofisher


Saturday, October 2, 2010
Hello. I’m a
                            UX designer


Saturday, October 2, 2010
A Drupal
                            designer?


Saturday, October 2, 2010
a
                             simple
                            answer


Saturday, October 2, 2010
a
                             simple
                            answer


Saturday, October 2, 2010
So what is
                            UX design?


Saturday, October 2, 2010
The creation,
                            integration and
                            harmonization of
                            all user-facing
                            aspects within an
                            organization or
                            project, with the
                            goal of impacting
                            perceptions and
                            behavior.

Saturday, October 2, 2010
The creation,
                            integration and
            Make it         harmonization of
        make sense          all user-facing
                            aspects within an
      and work well         organization or
         for the site       project, with the
               users        goal of impacting
                            perceptions and
                            behavior.

Saturday, October 2, 2010
Why bother?


Saturday, October 2, 2010
Any project should
                            have goals but most
                            people seem to lose
                            sight of who the
                            audience is.




Saturday, October 2, 2010
Even a little
          bit of time spent
          getting to know
           your users will
       improve the overall
                experience



Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Ok. You’ve doing
                            user research and
                            testing. How long
                            do you really stick
                            with it?




Saturday, October 2, 2010
If you have
                 a group of 10
                  and the first
              3 people tell you
             the same thing is
                    broken it’s
                       broken.


Saturday, October 2, 2010
If you have
                 a group of 10
                  and the first
              3 people tell you   Fix it now.
             the same thing is
                    broken it’s
                       broken.


Saturday, October 2, 2010
Don’t make me
                            talk to the hand!


Saturday, October 2, 2010
Don’t make me
                            talk to the hand!


Saturday, October 2, 2010
If your site isn’t
       cute.com, don’t get cute
                            use conventions

Saturday, October 2, 2010
Make it obvious



Saturday, October 2, 2010
People get lost at
                            any turn. Too many
                            choices, bad
                            directions and noise
                            create a bad
                            situation.




Saturday, October 2, 2010
People get lost at
                            any turn. Too many
                            choices, bad
                            directions and noise
                            create a bad
                            situation.




Saturday, October 2, 2010
What might be
     obvious to you isn’t
     obvious to someone
       who is new to the
                website.



Saturday, October 2, 2010
Saturday, October 2, 2010
Web Conventions


Saturday, October 2, 2010
As a rule
                            conventions only
                            become conventions
                            if they work. Use
                            them. They are your
                            friends!



Saturday, October 2, 2010
All conventions start
         life as somebody’s
                 bright idea.
                 (Steve Krug - Don’t Make Me Think)




Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Oops

Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Problem Solving


Saturday, October 2, 2010
Sample
                            Prooocess


Saturday, October 2, 2010
Sample
                            Prooocess


Saturday, October 2, 2010
Sample
                            Prooocess


Saturday, October 2, 2010
Define


Saturday, October 2, 2010
1. Identify the type of site
              1. Branding, marketing, content source,
                task-based...
           2. Determine the team make-up required
           3. Discover and understand the client and
             industry culture
           4. Define the project objectives
           5. Understand the current state (Heuristic
             Analysis)
           6. Gather ideas from stakeholders
           7. CONTENT STRATEGY!!!


Saturday, October 2, 2010
Research


Saturday, October 2, 2010
1. User Research (internal and external)
          1. Define user groups
          2. Choose research techniques (what will
            the project's budget allow)
        2. Personas
          1. Really this could be just a short, visual
            reminder or representation for the
            people working on the project of the
            user groups. I like to have something in
            front of me that helps me keep my focus
            user-centric.


Saturday, October 2, 2010
Visioning


Saturday, October 2, 2010
1. Envision features
            1. This will allow us to flesh things out
              and see what it will take to build before
              to prioritizing
          2. Prioritize requirements




Saturday, October 2, 2010
Wireframe
                            and Design


Saturday, October 2, 2010
1. Task flows
          2. Wireframes and annotations (function)
             1. Basic/draft wireframes
             2. Filled out wireframes
          3. Prototyping - functionality testing with
           users.
          4. UI Graphic Design
           1. Design testing
          5. UI Design revisions
           1. Design testing
          6. Style guide documentation


Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
1.0                                                                                               WBEZ 91.5      :VOCALO          THIS AMERICAN LIFE          SOUND OPINIONS


                                                                                                                                                                                                             1.2
                                                                                                                                                                                                                    CONTACT US
                                                       1.1                        LOGO
                                                                                                                                                                               1.3

         1. CPM
         Homepage - alt
                                                     1.4             MEMBERS                 SPONSORS              SUPPORT           CAREERS                 FINANCIALS                     BOARD                      ABOUT

         Components

         1.0   Utility nav bar to separate nav
               elements that take you offsite to
               another CPM website.

         1.1   Logo used as link to home and
               below utility nav bar to give the                                                                                                                                                    FEATURE
               CPM site a clear separation from
               the other site nav.                         2.0          INFO                              INFO                            INFO                                        4.0
                                                                                                                                                                                                 ITEM
                                                                        GRAPHIC                           GRAPHIC                         GRAPHIC
         1.2   Global links to common actions.

         1.3   Site search. Separated from utility
               nav to indicate that it will only
               search the current site.
                                                                                                                                                                                                     5.1
         1.4   Primary nav bar (see next                                                                                                                              LATEST PRESS                         OTHER LIST
               wireframe for functionality).                                                                                                                    5.0                                                                5.3
                                                                                                                                                                      Defogging the                        Defogging the
         2.0   Info graphics linked to related                                                                                                                        Economic Crisis                      Economic Crisis
               stories. This is done manually.                                                                                                                        03.22.10                             03.22.10
                                                           3.0
         3.0   Homepage specific item. Created                    HOMEPAGE SPECIFIC ITEM TITLE                                                                         Chicago Public Radio                 Chicago Public Radio
               just for the homepage and
                                                                                                                                                                      Presents... Global                   Presents... Global
               overwritten with new content as                   Under his leadership, Chicago Public Radio has developed its most significant national
               needed.
                                                                                                                                                                      Activism Expo 2010                   Activism Expo 2010
                                                                 initiatives and programs including The Third Coast International Audio Festival in 2000,             03.01.10                             03.01.10
         4.0   Feature item area. This could be
                                                                 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
               another info graphic or a call to                 Public Radio in Washington, D.C. in 1998. In addition he has created numerous award-                 Defogging the                        Defogging the
               action to donate.                                 winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty-                     Economic Crisis                      Economic Crisis
                                                                 Eight, both in 1998.                                                                                 03.22.10                             03.22.10
         5.0   Latest press area shows the last                                                                                                                                               5.2
               three press items in reverse
               cron order.                                       Torey has an M.A. and B.A. in English Literature from Arizona State University and has                     More Press...                    More Lists...
                                                                 done postgraduate work at the University of Toronto in Middle English literature at U of
         5.1   RSS feed link for press items.
                                                                 T’s Medieval Centre.
         5.2   Link to view a listing of all press
               items.                                            Under his leadership, Chicago Public Radio has developed its most significant national
                                                                 initiatives and programs including The Third Coast International Audio Festival in 2000,                                   N ON - C ON TE N T
         5.3   Additional list. This list would                                                                                                                       6.0
                                                                 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
               have identical functionality to
               the Latest Press list.                            Public Radio in Washington, D.C. in 1998.
                                                                                                                                                                                            SERVICES
                                                                                                                                                                                                                                     6.1
         6.0   Graphic Representing non-
                                                                 Torey has an M.A. and B.A. in English Literature from Arizona State University and has
               content related services. This                                                                                                                         Teaser text on the non-content related services
               graphic links to an overview                      done postgraduate work at the University of Toronto in Middle English literature at U of
                                                                                                                                                                      that CPM offers. Studios spaces, mobile
               page for the services. This will                  T’s Medieval Centre.
               also be found in the overall IA.
                                                                                                                                                                      application, training, and community room.

         6.1   Teaser text for the non-content             7.0                                   7.1                                7.2                                        7.3
               related services. The text itself
               can deep link into the individual                 WE ARE SOCIAL:                        OUR WEBSITES:                      SITE INFO:                                 Anchoring message that could be a final
               items.
                                                                                                                                                                                     call to action for the site. A final call to
                                                                 f    Join us on Facebook              ▪ WBEZ 91.5                        ▪ FAQ
                                                                                                                                                                                     action for the site.
         7.0   Listing of social network pages.
                                                                      Follow us on Twitter             ▪ :VOCALO                          ▪ Site Map
         7.1   Listing of related websites.
                                                                      See us on Flickr                 ▪ THIS AMERICAN LIFE               ▪ Privacy Policy                                                 LOGO
        7.2 General 2, 2010
Saturday, October site info.                                                                           ▪ SOUND OPINIONS
1.0                                                                                               WBEZ 91.5      :VOCALO          THIS AMERICAN LIFE          SOUND OPINIONS


                                                                                                                                                                                                             1.2
                                                                                                                                                                                                                    CONTACT US
                                                       1.1                        LOGO
                                                                                                                                                                               1.3

         1. CPM
         Homepage - alt
                                                     1.4             MEMBERS                 SPONSORS              SUPPORT           CAREERS                 FINANCIALS                     BOARD                      ABOUT

         Components

         1.0   Utility nav bar to separate nav
               elements that take you offsite to
               another CPM website.

         1.1   Logo used as link to home and
               below utility nav bar to give the                                                                                                                                                    FEATURE
               CPM site a clear separation from
               the other site nav.                         2.0          INFO                              INFO                            INFO                                        4.0
                                                                                                                                                                                                 ITEM
                                                                        GRAPHIC                           GRAPHIC                         GRAPHIC
         1.2   Global links to common actions.

         1.3   Site search. Separated from utility
               nav to indicate that it will only
               search the current site.
                                                                                                                                                                                                     5.1
         1.4   Primary nav bar (see next                                                                                                                              LATEST PRESS                         OTHER LIST
               wireframe for functionality).                                                                                                                    5.0                                                                5.3
                                                                                                                                                                      Defogging the                        Defogging the
         2.0   Info graphics linked to related                                                                                                                        Economic Crisis                      Economic Crisis
               stories. This is done manually.                                                                                                                        03.22.10                             03.22.10
                                                           3.0
         3.0   Homepage specific item. Created                    HOMEPAGE SPECIFIC ITEM TITLE                                                                         Chicago Public Radio                 Chicago Public Radio
               just for the homepage and
                                                                                                                                                                      Presents... Global                   Presents... Global
               overwritten with new content as                   Under his leadership, Chicago Public Radio has developed its most significant national
               needed.
                                                                                                                                                                      Activism Expo 2010                   Activism Expo 2010
                                                                 initiatives and programs including The Third Coast International Audio Festival in 2000,             03.01.10                             03.01.10
         4.0   Feature item area. This could be
                                                                 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
               another info graphic or a call to                 Public Radio in Washington, D.C. in 1998. In addition he has created numerous award-                 Defogging the                        Defogging the
               action to donate.                                 winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty-                     Economic Crisis                      Economic Crisis
                                                                 Eight, both in 1998.                                                                                 03.22.10                             03.22.10
         5.0   Latest press area shows the last                                                                                                                                               5.2
               three press items in reverse
               cron order.                                       Torey has an M.A. and B.A. in English Literature from Arizona State University and has                     More Press...                    More Lists...
                                                                 done postgraduate work at the University of Toronto in Middle English literature at U of
         5.1   RSS feed link for press items.
                                                                 T’s Medieval Centre.
         5.2   Link to view a listing of all press
               items.                                            Under his leadership, Chicago Public Radio has developed its most significant national
                                                                 initiatives and programs including The Third Coast International Audio Festival in 2000,                                   N ON - C ON TE N T
         5.3   Additional list. This list would                                                                                                                       6.0
                                                                 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
               have identical functionality to
               the Latest Press list.                            Public Radio in Washington, D.C. in 1998.
                                                                                                                                                                                            SERVICES
                                                                                                                                                                                                                                     6.1
         6.0   Graphic Representing non-
                                                                 Torey has an M.A. and B.A. in English Literature from Arizona State University and has
               content related services. This                                                                                                                         Teaser text on the non-content related services
               graphic links to an overview                      done postgraduate work at the University of Toronto in Middle English literature at U of
                                                                                                                                                                      that CPM offers. Studios spaces, mobile
               page for the services. This will                  T’s Medieval Centre.
               also be found in the overall IA.
                                                                                                                                                                      application, training, and community room.

         6.1   Teaser text for the non-content             7.0                                   7.1                                7.2                                        7.3
               related services. The text itself
               can deep link into the individual                 WE ARE SOCIAL:                        OUR WEBSITES:                      SITE INFO:                                 Anchoring message that could be a final
               items.
                                                                                                                                                                                     call to action for the site. A final call to
                                                                 f    Join us on Facebook              ▪ WBEZ 91.5                        ▪ FAQ
                                                                                                                                                                                     action for the site.
         7.0   Listing of social network pages.
                                                                      Follow us on Twitter             ▪ :VOCALO                          ▪ Site Map
         7.1   Listing of related websites.
                                                                      See us on Flickr                 ▪ THIS AMERICAN LIFE               ▪ Privacy Policy                                                 LOGO
        7.2 General 2, 2010
Saturday, October site info.                                                                           ▪ SOUND OPINIONS
1.0                                                                                               WBEZ 91.5      :VOCALO          THIS AMERICAN LIFE          SOUND OPINIONS


                                                                                                                                                                                                             1.2
                                                                                                                                                                                                                    CONTACT US
                                                       1.1                        LOGO
                                                                                                                                                                               1.3

         1. CPM
         Homepage - alt
                                                     1.4             MEMBERS                 SPONSORS              SUPPORT           CAREERS                 FINANCIALS                     BOARD                      ABOUT

         Components

         1.0   Utility nav bar to separate nav
               elements that take you offsite to
               another CPM website.

         1.1   Logo used as link to home and
               below utility nav bar to give the                                                                                                                                                    FEATURE
               CPM site a clear separation from
               the other site nav.                         2.0          INFO                              INFO                            INFO                                        4.0
                                                                                                                                                                                                 ITEM
                                                                        GRAPHIC                           GRAPHIC                         GRAPHIC
         1.2   Global links to common actions.

         1.3   Site search. Separated from utility
               nav to indicate that it will only
               search the current site.
                                                                                                                                                                                                     5.1
         1.4   Primary nav bar (see next                                                                                                                              LATEST PRESS                         OTHER LIST
               wireframe for functionality).                                                                                                                    5.0                                                                5.3
                                                                                                                                                                      Defogging the                        Defogging the
         2.0   Info graphics linked to related                                                                                                                        Economic Crisis                      Economic Crisis
               stories. This is done manually.                                                                                                                        03.22.10                             03.22.10
                                                           3.0
         3.0   Homepage specific item. Created                    HOMEPAGE SPECIFIC ITEM TITLE                                                                         Chicago Public Radio                 Chicago Public Radio
               just for the homepage and
                                                                                                                                                                      Presents... Global                   Presents... Global
               overwritten with new content as                   Under his leadership, Chicago Public Radio has developed its most significant national
               needed.
                                                                                                                                                                      Activism Expo 2010                   Activism Expo 2010
                                                                 initiatives and programs including The Third Coast International Audio Festival in 2000,             03.01.10                             03.01.10
         4.0   Feature item area. This could be
                                                                 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
               another info graphic or a call to                 Public Radio in Washington, D.C. in 1998. In addition he has created numerous award-                 Defogging the                        Defogging the
               action to donate.                                 winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty-                     Economic Crisis                      Economic Crisis
                                                                 Eight, both in 1998.                                                                                 03.22.10                             03.22.10
         5.0   Latest press area shows the last                                                                                                                                               5.2
               three press items in reverse
               cron order.                                       Torey has an M.A. and B.A. in English Literature from Arizona State University and has                     More Press...                    More Lists...
                                                                 done postgraduate work at the University of Toronto in Middle English literature at U of
         5.1   RSS feed link for press items.
                                                                 T’s Medieval Centre.
         5.2   Link to view a listing of all press
               items.                                            Under his leadership, Chicago Public Radio has developed its most significant national
                                                                 initiatives and programs including The Third Coast International Audio Festival in 2000,                                   N ON - C ON TE N T
         5.3   Additional list. This list would                                                                                                                       6.0
                                                                 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National
               have identical functionality to
               the Latest Press list.                            Public Radio in Washington, D.C. in 1998.
                                                                                                                                                                                            SERVICES
                                                                                                                                                                                                                                     6.1
         6.0   Graphic Representing non-
                                                                 Torey has an M.A. and B.A. in English Literature from Arizona State University and has
               content related services. This                                                                                                                         Teaser text on the non-content related services
               graphic links to an overview                      done postgraduate work at the University of Toronto in Middle English literature at U of
                                                                                                                                                                      that CPM offers. Studios spaces, mobile
               page for the services. This will                  T’s Medieval Centre.
               also be found in the overall IA.
                                                                                                                                                                      application, training, and community room.

         6.1   Teaser text for the non-content             7.0                                   7.1                                7.2                                        7.3
               related services. The text itself
               can deep link into the individual                 WE ARE SOCIAL:                        OUR WEBSITES:                      SITE INFO:                                 Anchoring message that could be a final
               items.
                                                                                                                                                                                     call to action for the site. A final call to
                                                                 f    Join us on Facebook              ▪ WBEZ 91.5                        ▪ FAQ
                                                                                                                                                                                     action for the site.
         7.0   Listing of social network pages.
                                                                      Follow us on Twitter             ▪ :VOCALO                          ▪ Site Map
         7.1   Listing of related websites.
                                                                      See us on Flickr                 ▪ THIS AMERICAN LIFE               ▪ Privacy Policy                                                 LOGO
        7.2 General 2, 2010
Saturday, October site info.                                                                           ▪ SOUND OPINIONS
All the other stuff


Saturday, October 2, 2010
1. Build...
              2. User testing
              3. QA (internal and with client)
              4. It never ends!




Saturday, October 2, 2010
delicious.com/
                                hellosteve/
                                         ux

Saturday, October 2, 2010
Find me at
                            hellofisher.com


Saturday, October 2, 2010

Turning That UX Frown Upside Down

  • 1.
    Turning that UX frown upside-down Saturday, October 2, 2010
  • 2.
    #uxfrown @hellofisher Saturday, October 2, 2010
  • 3.
    Hello. I’m a UX designer Saturday, October 2, 2010
  • 4.
    A Drupal designer? Saturday, October 2, 2010
  • 5.
    a simple answer Saturday, October 2, 2010
  • 6.
    a simple answer Saturday, October 2, 2010
  • 7.
    So what is UX design? Saturday, October 2, 2010
  • 8.
    The creation, integration and harmonization of all user-facing aspects within an organization or project, with the goal of impacting perceptions and behavior. Saturday, October 2, 2010
  • 9.
    The creation, integration and Make it harmonization of make sense all user-facing aspects within an and work well organization or for the site project, with the users goal of impacting perceptions and behavior. Saturday, October 2, 2010
  • 10.
  • 11.
    Any project should have goals but most people seem to lose sight of who the audience is. Saturday, October 2, 2010
  • 12.
    Even a little bit of time spent getting to know your users will improve the overall experience Saturday, October 2, 2010
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
    Ok. You’ve doing user research and testing. How long do you really stick with it? Saturday, October 2, 2010
  • 23.
    If you have a group of 10 and the first 3 people tell you the same thing is broken it’s broken. Saturday, October 2, 2010
  • 24.
    If you have a group of 10 and the first 3 people tell you Fix it now. the same thing is broken it’s broken. Saturday, October 2, 2010
  • 25.
    Don’t make me talk to the hand! Saturday, October 2, 2010
  • 26.
    Don’t make me talk to the hand! Saturday, October 2, 2010
  • 27.
    If your siteisn’t cute.com, don’t get cute use conventions Saturday, October 2, 2010
  • 28.
  • 29.
    People get lostat any turn. Too many choices, bad directions and noise create a bad situation. Saturday, October 2, 2010
  • 30.
    People get lostat any turn. Too many choices, bad directions and noise create a bad situation. Saturday, October 2, 2010
  • 31.
    What might be obvious to you isn’t obvious to someone who is new to the website. Saturday, October 2, 2010
  • 32.
  • 33.
  • 34.
    As a rule conventions only become conventions if they work. Use them. They are your friends! Saturday, October 2, 2010
  • 35.
    All conventions start life as somebody’s bright idea. (Steve Krug - Don’t Make Me Think) Saturday, October 2, 2010
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
    Sample Prooocess Saturday, October 2, 2010
  • 51.
    Sample Prooocess Saturday, October 2, 2010
  • 52.
    Sample Prooocess Saturday, October 2, 2010
  • 53.
  • 54.
    1. Identify thetype of site 1. Branding, marketing, content source, task-based... 2. Determine the team make-up required 3. Discover and understand the client and industry culture 4. Define the project objectives 5. Understand the current state (Heuristic Analysis) 6. Gather ideas from stakeholders 7. CONTENT STRATEGY!!! Saturday, October 2, 2010
  • 55.
  • 56.
    1. User Research(internal and external) 1. Define user groups 2. Choose research techniques (what will the project's budget allow) 2. Personas 1. Really this could be just a short, visual reminder or representation for the people working on the project of the user groups. I like to have something in front of me that helps me keep my focus user-centric. Saturday, October 2, 2010
  • 57.
  • 58.
    1. Envision features 1. This will allow us to flesh things out and see what it will take to build before to prioritizing 2. Prioritize requirements Saturday, October 2, 2010
  • 59.
    Wireframe and Design Saturday, October 2, 2010
  • 60.
    1. Task flows 2. Wireframes and annotations (function) 1. Basic/draft wireframes 2. Filled out wireframes 3. Prototyping - functionality testing with users. 4. UI Graphic Design 1. Design testing 5. UI Design revisions 1. Design testing 6. Style guide documentation Saturday, October 2, 2010
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
    1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS 1.2 CONTACT US 1.1 LOGO 1.3 1. CPM Homepage - alt 1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT Components 1.0 Utility nav bar to separate nav elements that take you offsite to another CPM website. 1.1 Logo used as link to home and below utility nav bar to give the FEATURE CPM site a clear separation from the other site nav. 2.0 INFO INFO INFO 4.0 ITEM GRAPHIC GRAPHIC GRAPHIC 1.2 Global links to common actions. 1.3 Site search. Separated from utility nav to indicate that it will only search the current site. 5.1 1.4 Primary nav bar (see next LATEST PRESS OTHER LIST wireframe for functionality). 5.0 5.3 Defogging the Defogging the 2.0 Info graphics linked to related Economic Crisis Economic Crisis stories. This is done manually. 03.22.10 03.22.10 3.0 3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio just for the homepage and Presents... Global Presents... Global overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national needed. Activism Expo 2010 Activism Expo 2010 initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10 4.0 Feature item area. This could be Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis Eight, both in 1998. 03.22.10 03.22.10 5.0 Latest press area shows the last 5.2 three press items in reverse cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists... done postgraduate work at the University of Toronto in Middle English literature at U of 5.1 RSS feed link for press items. T’s Medieval Centre. 5.2 Link to view a listing of all press items. Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T 5.3 Additional list. This list would 6.0 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National have identical functionality to the Latest Press list. Public Radio in Washington, D.C. in 1998. SERVICES 6.1 6.0 Graphic Representing non- Torey has an M.A. and B.A. in English Literature from Arizona State University and has content related services. This Teaser text on the non-content related services graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of that CPM offers. Studios spaces, mobile page for the services. This will T’s Medieval Centre. also be found in the overall IA. application, training, and community room. 6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3 related services. The text itself can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final items. call to action for the site. A final call to f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ action for the site. 7.0 Listing of social network pages. Follow us on Twitter ▪ :VOCALO ▪ Site Map 7.1 Listing of related websites. See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO 7.2 General 2, 2010 Saturday, October site info. ▪ SOUND OPINIONS
  • 68.
    1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS 1.2 CONTACT US 1.1 LOGO 1.3 1. CPM Homepage - alt 1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT Components 1.0 Utility nav bar to separate nav elements that take you offsite to another CPM website. 1.1 Logo used as link to home and below utility nav bar to give the FEATURE CPM site a clear separation from the other site nav. 2.0 INFO INFO INFO 4.0 ITEM GRAPHIC GRAPHIC GRAPHIC 1.2 Global links to common actions. 1.3 Site search. Separated from utility nav to indicate that it will only search the current site. 5.1 1.4 Primary nav bar (see next LATEST PRESS OTHER LIST wireframe for functionality). 5.0 5.3 Defogging the Defogging the 2.0 Info graphics linked to related Economic Crisis Economic Crisis stories. This is done manually. 03.22.10 03.22.10 3.0 3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio just for the homepage and Presents... Global Presents... Global overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national needed. Activism Expo 2010 Activism Expo 2010 initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10 4.0 Feature item area. This could be Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis Eight, both in 1998. 03.22.10 03.22.10 5.0 Latest press area shows the last 5.2 three press items in reverse cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists... done postgraduate work at the University of Toronto in Middle English literature at U of 5.1 RSS feed link for press items. T’s Medieval Centre. 5.2 Link to view a listing of all press items. Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T 5.3 Additional list. This list would 6.0 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National have identical functionality to the Latest Press list. Public Radio in Washington, D.C. in 1998. SERVICES 6.1 6.0 Graphic Representing non- Torey has an M.A. and B.A. in English Literature from Arizona State University and has content related services. This Teaser text on the non-content related services graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of that CPM offers. Studios spaces, mobile page for the services. This will T’s Medieval Centre. also be found in the overall IA. application, training, and community room. 6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3 related services. The text itself can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final items. call to action for the site. A final call to f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ action for the site. 7.0 Listing of social network pages. Follow us on Twitter ▪ :VOCALO ▪ Site Map 7.1 Listing of related websites. See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO 7.2 General 2, 2010 Saturday, October site info. ▪ SOUND OPINIONS
  • 69.
    1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS 1.2 CONTACT US 1.1 LOGO 1.3 1. CPM Homepage - alt 1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT Components 1.0 Utility nav bar to separate nav elements that take you offsite to another CPM website. 1.1 Logo used as link to home and below utility nav bar to give the FEATURE CPM site a clear separation from the other site nav. 2.0 INFO INFO INFO 4.0 ITEM GRAPHIC GRAPHIC GRAPHIC 1.2 Global links to common actions. 1.3 Site search. Separated from utility nav to indicate that it will only search the current site. 5.1 1.4 Primary nav bar (see next LATEST PRESS OTHER LIST wireframe for functionality). 5.0 5.3 Defogging the Defogging the 2.0 Info graphics linked to related Economic Crisis Economic Crisis stories. This is done manually. 03.22.10 03.22.10 3.0 3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio just for the homepage and Presents... Global Presents... Global overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national needed. Activism Expo 2010 Activism Expo 2010 initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10 4.0 Feature item area. This could be Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis Eight, both in 1998. 03.22.10 03.22.10 5.0 Latest press area shows the last 5.2 three press items in reverse cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists... done postgraduate work at the University of Toronto in Middle English literature at U of 5.1 RSS feed link for press items. T’s Medieval Centre. 5.2 Link to view a listing of all press items. Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T 5.3 Additional list. This list would 6.0 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National have identical functionality to the Latest Press list. Public Radio in Washington, D.C. in 1998. SERVICES 6.1 6.0 Graphic Representing non- Torey has an M.A. and B.A. in English Literature from Arizona State University and has content related services. This Teaser text on the non-content related services graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of that CPM offers. Studios spaces, mobile page for the services. This will T’s Medieval Centre. also be found in the overall IA. application, training, and community room. 6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3 related services. The text itself can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final items. call to action for the site. A final call to f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ action for the site. 7.0 Listing of social network pages. Follow us on Twitter ▪ :VOCALO ▪ Site Map 7.1 Listing of related websites. See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO 7.2 General 2, 2010 Saturday, October site info. ▪ SOUND OPINIONS
  • 70.
    All the otherstuff Saturday, October 2, 2010
  • 71.
    1. Build... 2. User testing 3. QA (internal and with client) 4. It never ends! Saturday, October 2, 2010
  • 72.
    delicious.com/ hellosteve/ ux Saturday, October 2, 2010
  • 73.
    Find me at hellofisher.com Saturday, October 2, 2010

Editor's Notes

  • #3 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #4 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #5 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #6 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #7 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #8 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #9 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #10 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #11 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #12 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #13 Users are there to accomplish tasks. How does that move them towards the website’s goals?
  • #14 Users are there to accomplish tasks. How does that move them towards the website’s goals?
  • #15 Users are there to accomplish tasks. How does that move them towards the website’s goals?
  • #16 Users are there to accomplish tasks. How does that move them towards the website’s goals?
  • #35 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
  • #36 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
  • #37 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
  • #38 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
  • #39 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #40 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #41 It is ok to be clever, but not cute. Your navigation needs to make sense otherwise I will run into roadblocks!
  • #42 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #43 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #44 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #45 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #46 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #47 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #48 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #49 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
  • #50 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #66 That’s right. I’m Canadian, but I’m coming to America!
  • #67 That’s right. I’m Canadian, but I’m coming to America!
  • #68 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #74 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #75 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #76 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #77 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #78 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #79 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #80 Your navigation needs to make sense otherwise I will run into roadblocks!
  • #81 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #82 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #83 Steve International design week Handing off a design From strategy to QA. What do I do?
  • #84 Steve International design week Handing off a design From strategy to QA. What do I do?