SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Beyond Wireframes
Voices That Matter • San Francisco • October 25, 2007
      Dan Brown, Principal • EightShapes, LLC
October 1
               ?
         995




                   2
October 1
                    995




1. What’s New Since 1995
        Or, then and now
Then:
• Simple, hierarchical structures
• Lack of familiarity
• Jacks of all trade
• Waterfall methodologies


                                    4
Now:
• Complex structures & interactions
• Embedded in business
• Team diversification
• Process diversification


                                      5
Complex structures & interactions:
• Faceted navigation
• User-generated content
• User-generated structures
• Dynamic behaviors
• Dissolution of the page

                                     6
Embedded in business:
• More stakeholders
• Greater scrutiny
• Greater impact on people



                             7
Team diversification:
• Specialization & Scale
• Generalization & Speed




                           8
Process diversification:
• Increased formality
• Associated backlash
• Experimentation



                           9
?


2. How Documents Fail
      Or, mistakes we make
• Unclear

• Incomplete

• Inappropriate

                  11
An Example:
Abstracted Wireframes for
Reporting Engine of CMS


                            12
page

                                                                                                                                                                                                                                                                                          1
Reports Home
                                                                                                                                                                                                                      custom...
Application Home                                 2
                                                                                                                                                    1   The name of [HIDDEN] client.
[client name] : [timeframe]                              change
                                                                  3                                                                                 2   The selected timeframe for the overview. The
  1                                                                                                                                                                                                                   custom...
                                                                                                                     5           6
                                                                                                                                                        default timeframe is quot;last seven days.quot;
                   Highlights                                             drag headers to change layout | edit metrics | export                                                                               from:    Jan            01          2006
                                             4                                                                                                      3   Clicking this link reveals a drop-down menu
                      New Members                     Donations                    Exposure                      Forwards                               allowing users to select a different time frame.      to:      Jan            01          2007




                                                                                                                                                                                                                                                                      Screen:
                                                                                                                                                        Options include: Yesterday, Last Seven Days,
                          999                        $9,999                        999                           999                                    Last Week, Last Two Weeks, Last Month, Last
                                                                                                                                                        Quarter, Last Six Months, Last Year,
                                                                                                                                                        Custom... If users select quot;customquot; they are
                    prior [timeframe]: 999       prior [timeframe]: 999      prior [timeframe]: 999     prior [timeframe]: 999                          presented with the options at right. With a
                                                                                                                                                        custom timeframe, the tiles do not display
                                                                                                                                                        data from a prior timeframe.                         Tile Dragging Behavior Rules
                      Issue Targeting                 Comments                 [variable name]            [variable name]
                                                                                                                                                                                                           These customizations are attached to user
                                                                                                                                                    4   Each highlight tile displays the name of the       accounts. Once a user selects metrics and
                          999                            999                       999                           999                                    variable, the metric in the given timeframe,
                                                                                                                                                        and the same metric in the prior timeframe.
                                                                                                                                                                                                           re-arranges the tiles, they are stored with his
                                                                                                                                                                                                           or her account.
                                                                                                                                                        For example, if the selected timeframe is
                    prior [timeframe]: 999       prior [timeframe]: 999      prior [timeframe]: 999     prior [timeframe]: 999                          quot;Last Quarterquot; the display will show quot;Prior         Dragging a tile within a row
                                                                                                                                                        Quarterquot;. Users can drag the tiles by the
                                                                                                                                                        header to rearrange them. Clicking on the                                 If users drag a tile within




                                                                                                                                                                                                                                                                      Document:
                                                                                                                                                        main part of the tile takes users to the                                  the same row, the other
                                                     7                                                                       8                          Comparison Report page for that metric.                                   tiles shift left or right to
          show: active campaigns | all campaigns                                                                                     export
                                                                                                                                                                                                                                  accommodate it, but do
      9   rank                  campaign                      pages          page performance           alerts      alert performance
                                                                                                                                                    5   Clicking this link will take users to a separate                          not jump between rows.
                                                                                                                                                        page with a list of all possible metrics. Users
           1/6             [campaign name]                   [# pages]                                [# alerts]                                        can choose up to eight metrics to display on




                                                                                                                                                                                                                                                                    Project: Reports Redesign
                                                                                                                                                        the Reports home. These selections are
                                                                                                                                                        specific to each user account.
           2/1             [campaign name]                   [# pages]                                [# alerts]
                                                                                                                                                    6   Users can export the highlighted metrics to an
                                                                                                                                                                                                            Dragging a tile to another row
                                                                                                                                                        XLS document. Clicking this link will start an
           3/18            [campaign name]                   [# pages]                                [# alerts]                                        automatic download.                                                       Dragging a tile to the top
                                                                                                                                                                                                                                  row from the bottom
           4/-             [campaign name]                   [# pages]                                [# alerts]
                                                                                                                                                    7   By default the Reports home displays only
                                                                                                                                                                                                                                  shifts the top-row tiles to
                                                                                                                                                        active campaigns. Clicking quot;all campaignsquot;
                                                                                                                                                                                                                                  the right and down as
                                                                                                                                                        will change the display of the page, hiding the
                                                                                                                                                                                                                                  necessary. The far-right
           5/2             [campaign name]                   [# pages]                                [# alerts]                                        highlights and populating the table will all the
                                                                                                                                                                                                                                  tile shifts down to the far-
                                                                                                                                                        campaigns run by the client.
                                                                                                                                                                                                                                  left position of the
                                                                                                                                                    8   Users can export the table data to an XLS                                 bottom row.
Active Campaigns are campaigns that                  Page Performance is an aggregate                  Alert Performance shows click-throughs           document. Clicking this link will start an                                Dragging a tile to the
have been designated as such by the client.          measure of all the pages in a campaign. It is     for the most recent alerts sent. It is not       automatic download.                                                       bottom row from the top
If a client has no active campaigns, the             determined by dividing the total number of        modified by the selected timeframe.                                                                                        shifts the bottom-row tiles




                                                                                                                                                                                                                                                                    Client: [HIDDEN]
campaigns displayed here are determined              actions by the total number of views within                                                    9   The table displays essential stats from active                            to the left. The far-left tile
by business rule: those campaigns that have          the specified timeframe.                                                                           campaign. Clicking on a campaign name takes                               moves to the far-right
had at least 10 actions in the last 6 months.                                                                                                           users to the Campaign Overview page.                                      position of the top row.
                                                     Campaign Rank is determined by summing the page performance and the alert performance.
                                                     The display shows the rank in the current timeframe and the rank in the prior timeframe.




                                                                                                                                                                                                                                                                   13
page

                                                                                                                                                                                                                                                                                          1
Reports Home
                                                                                                                                                                                                                      custom...
Application Home                                 2
                                                                                                                                                    1   The name of [HIDDEN] client.
[client name] : [timeframe]
  1
      Priority     Highlights
                                             4
                                                         change
                                                                  3
                                                                                                                     5
                                                                          drag headers to change layout | edit metrics | export
                                                                                                                                 6
                                                                                                                                                    2   The selected timeframe for the overview. The
                                                                                                                                                        default timeframe is quot;last seven days.quot;
                                                                                                                                                                                                              from:
                                                                                                                                                                                                                      custom...

                                                                                                                                                                                                                       Jan            01          2006
                                                                                                                                                    3   Clicking this link reveals a drop-down menu
                      New Members                     Donations                    Exposure                      Forwards                               allowing users to select a different time frame.      to:      Jan            01          2007




                                                                                                                                                                                                                                                                      Screen:
                                                                                                                                                        Options include: Yesterday, Last Seven Days,
                          999                        $9,999                        999                           999                                    Last Week, Last Two Weeks, Last Month, Last
                                                                                                                                                        Quarter, Last Six Months, Last Year,
                                                                                                                                                        Custom... If users select quot;customquot; they are
                    prior [timeframe]: 999       prior [timeframe]: 999      prior [timeframe]: 999     prior [timeframe]: 999                          presented with the options at right. With a
                                                                                                                                                        custom timeframe, the tiles do not display
                                                                                                                                                        data from a prior timeframe.                         Tile Dragging Behavior Rules
                      Issue Targeting                 Comments                 [variable name]            [variable name]
                                                                                                                                                                                                           These customizations are attached to user
                                                                                                                                                    4   Each highlight tile displays the name of the       accounts. Once a user selects metrics and
                          999                            999                       999                           999                                    variable, the metric in the given timeframe,
                                                                                                                                                        and the same metric in the prior timeframe.
                                                                                                                                                                                                           re-arranges the tiles, they are stored with his
                                                                                                                                                                                                           or her account.
                                                                                                                                                        For example, if the selected timeframe is
                    prior [timeframe]: 999       prior [timeframe]: 999      prior [timeframe]: 999     prior [timeframe]: 999                          quot;Last Quarterquot; the display will show quot;Prior         Dragging a tile within a row
                                                                                                                                                        Quarterquot;. Users can drag the tiles by the
                                                                                                                                                        header to rearrange them. Clicking on the                                 If users drag a tile within




                                                                                                                                                                                                                                                                      Document:
                                                                                                                                                        main part of the tile takes users to the                                  the same row, the other
                                                     7                                                                       8                          Comparison Report page for that metric.                                   tiles shift left or right to
          show: active campaigns | all campaigns                                                                                     export
                                                                                                                                                                                                                                  accommodate it, but do
      9   rank                  campaign                      pages          page performance           alerts      alert performance
                                                                                                                                                    5   Clicking this link will take users to a separate                          not jump between rows.
                                                                                                                                                        page with a list of all possible metrics. Users
           1/6             [campaign name]                   [# pages]                                [# alerts]                                        can choose up to eight metrics to display on




                                                                                                                                                                                                                                                                    Project: Reports Redesign
                                                                                                                                                        the Reports home. These selections are
                                                                                                                                                        specific to each user account.
           2/1             [campaign name]                   [# pages]                                [# alerts]
                                                                                                                                                    6   Users can export the highlighted metrics to an
                                                                                                                                                                                                            Dragging a tile to another row
                                                                                                                                                        XLS document. Clicking this link will start an
           3/18            [campaign name]                   [# pages]                                [# alerts]                                        automatic download.                                                       Dragging a tile to the top
                                                                                                                                                                                                                                  row from the bottom
           4/-             [campaign name]                   [# pages]                                [# alerts]
                                                                                                                                                    7   By default the Reports home displays only
                                                                                                                                                                                                                                  shifts the top-row tiles to

           5/2             [campaign name]                   [# pages]                  Elements      [# alerts]
                                                                                                                                                        active campaigns. Clicking quot;all campaignsquot;
                                                                                                                                                        will change the display of the page, hiding the
                                                                                                                                                        highlights and populating the table will all the
                                                                                                                                                        campaigns run by the client.
                                                                                                                                                                                                                                  the right and down as
                                                                                                                                                                                                                                  necessary. The far-right
                                                                                                                                                                                                                                  tile shifts down to the far-
                                                                                                                                                                                                                                  left position of the
                                                                                                                                                    8   Users can export the table data to an XLS                                 bottom row.
Active Campaigns are campaigns that                  Page Performance is an aggregate                  Alert Performance shows click-throughs           document. Clicking this link will start an                                Dragging a tile to the
have been designated as such by the client.          measure of all the pages in a campaign. It is     for the most recent alerts sent. It is not       automatic download.                                                       bottom row from the top
If a client has no active campaigns, the             determined by dividing the total number of        modified by the selected timeframe.                                                                                        shifts the bottom-row tiles




                                                                                                                                                                                                                                                                    Client: [HIDDEN]
campaigns displayed here are determined              actions by the total number of views within                                                    9   The table displays essential stats from active                            to the left. The far-left tile
by business rule: those campaigns that have          the specified timeframe.                                                                           campaign. Clicking on a campaign name takes                               moves to the far-right
had at least 10 actions in the last 6 months.                                                                                                           users to the Campaign Overview page.                                      position of the top row.
                                                     Campaign Rank is determined by summing the page performance and the alert performance.
                                                     The display shows the rank in the current timeframe and the rank in the prior timeframe.




                                                                                                                                                                                                                                                                   14
Home Page Contents
higher visual priority                                                                                                                                                                                                                                                                          lower visual priority




1
Knowledge Base
                                                                                                        2
                                                                                                        How to Add Documents
                                                                                                                                                                                                                       3
                                                                                                                                                                                                                       Mission and Vision
The primary focus of the Extranet's home page is the list of categories that                            Posting instructions appear on the                 You can contribute to any page by clicking on the           The home page includes links to organizational mission and vision. It could
                                                                                                                                                           quot;Switch to Edit Modequot; link at the top.
constitute the knowledge base. It is through this list that users access all of the                     home page to facilitate community                  If you do not see this link and would like to contribute,   look like this:
knowledge resources. The list could look like this:                                                     participation.                                     please contact your system admini strator.
                                                                                                                                                                                                                          quot;...to develop physical fitness, demonstrate courage, experience joy ...quot;
                                                                                                                                                                                              for more information,
 Athletes and Athlete Health                                 Information Technology                                                                                                           check the user guide
            TB                                                       TB
                                                                                                                                                                                                                                          our mission + our vision + message from our CEO
 Coaches, Skills, and Sports Training                        Organizational Development

              D                                                        D
 Competitions and Sports Rules                               Outreach and Recruitment
 Event Planning                                              Public Relations and Communications        Recently Added
 Families and Schools                                        Research
 Finance and Operations
 Fundraising
                                                             Stories of Special Olympics
                                                             Strategic Planning
                                                                                                        The home page includes a link to items recently added to the knowledge base.                                   Essentials
 Governance and Boards                                       Volunteers
                                                                                                                                                                                                                       The small quot;essentialsquot; area includes        essential tools from the knowledge base
                                                                                                                                                                                                                       3-5 links to topics or documents             Branding Guidelines
The knowledge categories will include Best Practices, FAQs, the Glossary, the
Dictionary, and Testimonials. In the future the collaborative applications like the
                                                                                                        Language Selection                                                                                             within the knowledge categories. It
                                                                                                                                                                                                                       could look like this:
                                                                                                                                                                                                                                                                    Volunteer Registration Form
                                                                                                                                                                                                                                                                    Budget Template
                                                                                                                                                                                                                                                                    Sports Guides (Winter, Summer)
bulletin board and expert directory will be accessed through the knowledge base. With Programs all over the world, Special
                                                                                                                                                                         language - langage -          :                                                            Coaching Guides
                                                                                    Olympics needs an extranet that appears in
                                                                                    multiple languages. The home page will have                                          English
                                                                                    a language selection menu, which might look
Special Olympics Around the World                                                   like this:                                                                                                                         Applications
The home page will include an area that highlights information specific to                                                                                                                                             The home page includes a menu of
particular regions, includes messages from the Regional Manager Directors.                              Announcements                                                                                                  Special Olympics applications. The
                                                                                                                                                                                                                                                                             applications

                                                                                                                                                                                                                       applications menu could look like this:               Program Development System                     go
                                                                                                        Announcements are internal messages, directed toward the field from Regions
                                                                                                        and HQ. The home page shows the three latest announcements with a link to
 Messages from the Regional Managing Directors
 Regional Calendars                                                                                     more, looking possibly like this:
 Regional and Program Profiles
 Regional News, Announcements, and Accomplishments
                                                                                                         Special Olympics launches multi-lingual extranet to address needs of Programs
                                                                                                         Contribute your best practices to our new kn owledge management system                                        Switch to Edit Mode
                                                                                                         Quarterly reports due to regional managing directo rs by April 7, 2003
                                                                                                                                                                                   more...                             So long as the user has security privileges, the system will
                                                                                                                                                                                                                       expose a link allowing him to enter the edit mode.                              switch to edit mode

Navigation on Every Page
Certain items appear throughout the site. A global quot;navigation barquot; includes five
items on the home page: Contacts, Around the World, Knowledge Base, User
Guide, and Search. On internal pages, there is always a link to quot;home.quot; Global
items could be rendered:


User Guide + Contacts + Around the World + Knowledge Base + Search:                                go




items italicized must appear above the fold
               The layout and design depicted herein represents                                                                                                                                                                                                        Dan Brown
                                                                                                                                                                                                                                                                                            7 March 2002      Tisani Consulting, LLC
                                                                                                                                                                                                                                                                  dan.brown@tisani.com
               content priorities only and should not be construed
               as actual layout and design. Final product may                                                                            home page contents                                                                                                         Special Olympics/
                                                                                                                                                                                                                                                                                             Version 1.1
                                                                                                                                                                                                                                                                                                               6400 Goldsboro Rd.
                                                                                                                                                                                                                                                                                                               Bethesda, MD 20817
               vary.                                                                                                                                                                                                                                                    Extranet




                                                                                                                                                                                                                                                                                                                                       15
Priority
Elements   Home Page Contents
           higher visual priority                                                                                                                                                                                                                                                                          lower visual priority




           1
           Knowledge Base
                                                                                                                   2
                                                                                                                   How to Add Documents
                                                                                                                                                                                                                                  3
                                                                                                                                                                                                                                  Mission and Vision
           The primary focus of the Extranet's home page is the list of categories that                            Posting instructions appear on the                 You can contribute to any page by clicking on the           The home page includes links to organizational mission and vision. It could
                                                                                                                                                                      quot;Switch to Edit Modequot; link at the top.
           constitute the knowledge base. It is through this list that users access all of the                     home page to facilitate community                  If you do not see this link and would like to contribute,   look like this:
           knowledge resources. The list could look like this:                                                     participation.                                     please contact your system admini strator.
                                                                                                                                                                                                                                     quot;...to develop physical fitness, demonstrate courage, experience joy ...quot;
                                                                                                                                                                                                         for more information,
            Athletes and Athlete Health                                 Information Technology                                                                                                           check the user guide
                       TB                                                       TB
                                                                                                                                                                                                                                                     our mission + our vision + message from our CEO
            Coaches, Skills, and Sports Training                        Organizational Development

                         D                                                        D
            Competitions and Sports Rules                               Outreach and Recruitment
            Event Planning                                              Public Relations and Communications        Recently Added
            Families and Schools                                        Research
            Finance and Operations
            Fundraising
                                                                        Stories of Special Olympics
                                                                        Strategic Planning
                                                                                                                   The home page includes a link to items recently added to the knowledge base.                                   Essentials
            Governance and Boards                                       Volunteers
                                                                                                                                                                                                                                  The small quot;essentialsquot; area includes        essential tools from the knowledge base
                                                                                                                                                                                                                                  3-5 links to topics or documents             Branding Guidelines
           The knowledge categories will include Best Practices, FAQs, the Glossary, the
           Dictionary, and Testimonials. In the future the collaborative applications like the
                                                                                                                   Language Selection                                                                                             within the knowledge categories. It
                                                                                                                                                                                                                                  could look like this:
                                                                                                                                                                                                                                                                               Volunteer Registration Form
                                                                                                                                                                                                                                                                               Budget Template
                                                                                                                                                                                                                                                                               Sports Guides (Winter, Summer)
           bulletin board and expert directory will be accessed through the knowledge base. With Programs all over the world, Special
                                                                                                                                                                                    language - langage -          :                                                            Coaching Guides
                                                                                               Olympics needs an extranet that appears in
                                                                                               multiple languages. The home page will have                                          English
                                                                                               a language selection menu, which might look
           Special Olympics Around the World                                                   like this:                                                                                                                         Applications
           The home page will include an area that highlights information specific to                                                                                                                                             The home page includes a menu of
           particular regions, includes messages from the Regional Manager Directors.                              Announcements                                                                                                  Special Olympics applications. The
                                                                                                                                                                                                                                                                                        applications

                                                                                                                                                                                                                                  applications menu could look like this:               Program Development System                     go
                                                                                                                   Announcements are internal messages, directed toward the field from Regions
                                                                                                                   and HQ. The home page shows the three latest announcements with a link to
            Messages from the Regional Managing Directors
            Regional Calendars                                                                                     more, looking possibly like this:
            Regional and Program Profiles
            Regional News, Announcements, and Accomplishments
                                                                                                                    Special Olympics launches multi-lingual extranet to address needs of Programs
                                                                                                                    Contribute your best practices to our new kn owledge management system                                        Switch to Edit Mode
                                                                                                                    Quarterly reports due to regional managing directo rs by April 7, 2003
                                                                                                                                                                                              more...                             So long as the user has security privileges, the system will
                                                                                                                                                                                                                                  expose a link allowing him to enter the edit mode.                              switch to edit mode

           Navigation on Every Page
           Certain items appear throughout the site. A global quot;navigation barquot; includes five
           items on the home page: Contacts, Around the World, Knowledge Base, User
           Guide, and Search. On internal pages, there is always a link to quot;home.quot; Global
           items could be rendered:


           User Guide + Contacts + Around the World + Knowledge Base + Search:                                go




           items italicized must appear above the fold
                          The layout and design depicted herein represents                                                                                                                                                                                                        Dan Brown
                                                                                                                                                                                                                                                                                                       7 March 2002      Tisani Consulting, LLC
                                                                                                                                                                                                                                                                             dan.brown@tisani.com
                          content priorities only and should not be construed
                          as actual layout and design. Final product may                                                                            home page contents                                                                                                         Special Olympics/
                                                                                                                                                                                                                                                                                                        Version 1.1
                                                                                                                                                                                                                                                                                                                          6400 Goldsboro Rd.
                                                                                                                                                                                                                                                                                                                          Bethesda, MD 20817
                          vary.                                                                                                                                                                                                                                                    Extranet




                                                                                                                                                                                                                                                                                                                                                  16
List Template

                1   XXXXXX > XXXXXX > XXXXXX
                                                                        • The LIST TEMPLATE provides a page structure for
                                        2      3 XXX | XXX | XXX          displaying lists of objects--campaigns, pages, or alerts.
                4                                                       • Each campaign has lists dedicated to pages and alerts.
                        XXXXXXXXX XXX | XXX | XXX
                                                                        • Each campaign also has a quot;watchlistquot;, rendered in the same
                5       XXXXXXXXX XXX | XXX | XXX
                                                                          template, that combines both pages and alerts.
                        XXXXXXXXX XXX | XXX | XXX
                        XXXXXXXXX XXX | XXX | XXX                       • Users may add pages and alerts to the watchlist, though a
                        XXXXXXXXX XXX | XXX | XXX                         campaign's watchlist is shared by all users of the system.
                        XXXXXXXXX XXX | XXX | XXX
                        XXXXXXXXX XXX | XXX | XXX
                        XXXXXXXXX XXX | XXX | XXX



                    List of Campaigns for a Client                                                List of Pages in a Campaign                                                     List of Alerts in a Campaign                                                     Use

1. Context            [Client name]                                                                 [Client name]       [Campaign name]                                             [Client name]       [Campaign name]                                             [C



2. Tab Set            Active        By Label         By Host      All                               By Visits     By Date               By Label     All                            By Date       By Label               All                                        NO



3. Commands           Compare Export        Label                                                   Compare Export           Label                                                  Compare Export            Label                                                 C



4. Tab Options
                      By Label          Filter by label: select label...                            By Date              Show pages launched on:             mm/dd/yyyy             By Date              Show alerts launched on:           mm/dd/yyyy
                                                                                                                                                                                                                                                                    NO

                      By Host            Filter by host:   select host...                           By Label             Filter by label: select label...                           By Label             Filter by label: select label...




5. List Entry             [Name of Campaign]               watch list   alerts list   page list         [launch date]    [Name of Page]            add to/remove from watchlist         [launch date]    [Name of Alert]       add to/remove from watchlist

                                                                                                                         [page title]                                                                    [alert title]                                              O
                                                                                                                         [list of labels]                                                                [list of labels]




                                                                                                                                                                                                                                                              17
List Template

                1   XXXXXX > XXXXXX > XXXXXX                            • The LIST TEMPLATE provides a page structure for
                                        2      3 XXX | XXX | XXX          displaying lists of objects--campaigns, pages, or alerts.
                4                                                       • Each campaign has lists dedicated to pages and alerts.
                        XXXXXXXXX XXX | XXX | XXX
                                                                        • Each campaign also has a quot;watchlistquot;, rendered in the s
                5       XXXXXXXXX XXX | XXX | XXX
                                                                          template, that combines both pages and alerts.
                        XXXXXXXXX XXX | XXX | XXX
                        XXXXXXXXX XXX | XXX | XXX                       • Users may add pages and alerts to the watchlist, thoug
                        XXXXXXXXX XXX | XXX | XXX                         campaign's watchlist is shared by all users of the system
                        XXXXXXXXX XXX | XXX | XXX
                        XXXXXXXXX XXX | XXX | XXX
                        XXXXXXXXX XXX | XXX | XXX



                    List of Campaigns for a Client                                                List of Pages in a Campaign

1. Context            [Client name]                                                                 [Client name]       [Campaign name]



2. Tab Set            Active        By Label         By Host      All                               By Visits     By Date               By Label     All



3. Commands           Compare Export        Label                                                   Compare Export           Label



4. Tab Options
                      By Label          Filter by label: select label...                            By Date              Show pages launched on:             mm/dd/yyyy



                      By Host            Filter by host:   select host...                           By Label             Filter by label: select label...




5. List Entry             [Name of Campaign]               watch list   alerts list   page list         [launch date]    [Name of Page]            add to/remove from watchl

                                                                                                                         [page title]
                                                                                                                                                                      18
                                                                                                                         [list of labels]
List Template

                       1   XXXXXX > XXXXXX > XXXXXX
                                                                               • The LIST TEMPLATE provides a page structure for



Priority
                                               2      3 XXX | XXX | XXX          displaying lists of objects--campaigns, pages, or alerts.
                       4                                                       • Each campaign has lists dedicated to pages and alerts.
                               XXXXXXXXX XXX | XXX | XXX
                                                                               • Each campaign also has a quot;watchlistquot;, rendered in the same
                       5       XXXXXXXXX XXX | XXX | XXX
                                                                                 template, that combines both pages and alerts.
                               XXXXXXXXX XXX | XXX | XXX
                               XXXXXXXXX XXX | XXX | XXX                       • Users may add pages and alerts to the watchlist, though a
                               XXXXXXXXX XXX | XXX | XXX                         campaign's watchlist is shared by all users of the system.
                               XXXXXXXXX XXX | XXX | XXX
                               XXXXXXXXX XXX | XXX | XXX
                               XXXXXXXXX XXX | XXX | XXX



                           List of Campaigns for a Client                                                List of Pages in a Campaign                                                     List of Alerts in a Campaign                                                   User-De ned Watchlist for Campaign

       1. Context            [Client name]                                                                 [Client name]       [Campaign name]                                             [Client name]       [Campaign name]                                            [Client name]      Watchlist



       2. Tab Set            Active        By Label         By Host      All                               By Visits     By Date               By Label     All                            By Date       By Label               All                                      NONE



       3. Commands           Compare Export        Label                                                   Compare Export           Label                                                  Compare Export            Label                                                Compare Export           Label



       4. Tab Options
                             By Label          Filter by label: select label...                            By Date              Show pages launched on:             mm/dd/yyyy             By Date              Show alerts launched on:           mm/dd/yyyy
                                                                                                                                                                                                                                                                         NONE

                             By Host            Filter by host:   select host...                           By Label             Filter by label: select label...                           By Label             Filter by label: select label...




       5. List Entry             [Name of Campaign]               watch list   alerts list   page list         [launch date]    [Name of Page]            add to/remove from watchlist         [launch date]    [Name of Alert]       add to/remove from watchlist                    [launch date] [Name of Item]              remove from watchlist

                                                                                                                                [page title]                                                                    [alert title]                                             OR                       [item title]

                                                                                                                                [list of labels]                                                                [list of labels]                                                                   [list of labels]




                                                                                                         Elements                                                                                                                            client:
                                                                                                                                                                                                                                             project:
                                                                                                                                                                                                                                             document:
                                                                                                                                                                                                                                                            Grassroots Enterprises
                                                                                                                                                                                                                                                            Reports Module Redesign
                                                                                                                                                                                                                                                            Speci cation
                                                                                                                                                                                                                                                                                             prepared by:
                                                                                                                                                                                                                                                                                             date:
                                                                                                                                                                                                                                                                                             version:
                                                                                                                                                                                                                                                                                                              Dan Brown
                                                                                                                                                                                                                                                                                                              Thu Feb 22 2007
                                                                                                                                                                                                                                                                                                              1.0                         Page 4 of 5




                                                                                                                                                                                                                                                                                                                                                        19
List Template

                       1   XXXXXX > XXXXXX > XXXXXX
                                                                               • The LIST TEMPLATE provides a page structure for



Priority
                                               2      3 XXX | XXX | XXX          displaying lists of objects--campaigns, pages, or alerts.
                       4                                                       • Each campaign has lists dedicated to pages and alerts.
                               XXXXXXXXX XXX | XXX | XXX
                                                                               • Each campaign also has a quot;watchlistquot;, rendered in the same
                       5       XXXXXXXXX XXX | XXX | XXX
                                                                                 template, that combines both pages and alerts.
                               XXXXXXXXX XXX | XXX | XXX
                               XXXXXXXXX XXX | XXX | XXX                       • Users may add pages and alerts to the watchlist, though a
                               XXXXXXXXX XXX | XXX | XXX                         campaign's watchlist is shared by all users of the system.
                               XXXXXXXXX XXX | XXX | XXX
                               XXXXXXXXX XXX | XXX | XXX
                               XXXXXXXXX XXX | XXX | XXX



                           List of Campaigns for a Client                                                List of Pages in a Campaign                                                     List of Alerts in a Campaign                                                   User-De ned Watchlist for Campaign

       1. Context            [Client name]                                                                 [Client name]       [Campaign name]                                             [Client name]       [Campaign name]                                            [Client name]      Watchlist



       2. Tab Set            Active        By Label         By Host      All                               By Visits     By Date               By Label     All                            By Date       By Label               All                                      NONE




                                                                                                         Variety
       3. Commands           Compare Export        Label                                                   Compare Export           Label                                                  Compare Export            Label                                                Compare Export           Label



       4. Tab Options
                             By Label          Filter by label: select label...                            By Date              Show pages launched on:             mm/dd/yyyy             By Date              Show alerts launched on:           mm/dd/yyyy
                                                                                                                                                                                                                                                                         NONE

                             By Host            Filter by host:   select host...                           By Label             Filter by label: select label...                           By Label             Filter by label: select label...




       5. List Entry             [Name of Campaign]               watch list   alerts list   page list         [launch date]    [Name of Page]            add to/remove from watchlist         [launch date]    [Name of Alert]       add to/remove from watchlist                    [launch date] [Name of Item]              remove from watchlist

                                                                                                                                [page title]                                                                    [alert title]                                             OR                       [item title]

                                                                                                                                [list of labels]                                                                [list of labels]                                                                   [list of labels]




                                                                                                         Elements                                                                                                                            client:
                                                                                                                                                                                                                                             project:
                                                                                                                                                                                                                                             document:
                                                                                                                                                                                                                                                            Grassroots Enterprises
                                                                                                                                                                                                                                                            Reports Module Redesign
                                                                                                                                                                                                                                                            Speci cation
                                                                                                                                                                                                                                                                                             prepared by:
                                                                                                                                                                                                                                                                                             date:
                                                                                                                                                                                                                                                                                             version:
                                                                                                                                                                                                                                                                                                              Dan Brown
                                                                                                                                                                                                                                                                                                              Thu Feb 22 2007
                                                                                                                                                                                                                                                                                                              1.0                         Page 4 of 5




                                                                                                                                                                                                                                                                                                                                                        20
• Unclear

• Incomplete

• Inappropriate

                  21
• Unclear
 Complex ideas vs. Context-sensitive audience

• Incomplete
 Product conception vs. Required detail

• Inappropriate
 Perceived need vs. Actual need

                                                22
3. Strategies for Success
 Or, things you could try (success not guaranteed)
• Personas

• Site Maps

• Wireframes

               24
• Unclear
 Not how we’re used to looking at audience.

• Incomplete
 Can’t represent range of people’s needs.

• Inappropriate
 Not useful design tool.

                                              25
An Alternative:
Representing User
Behaviors as Scales


                      26
Suspendisse id velit vitae ligula
                                                                                              consectetuer adipiscing elit.
                                                                                                                                                                                                       volutpat condimentum.
                                                                                              Morbi commodo, ipsum sed
Project Name // User Research                                                                 pharetra gravida, orci magna                                                        IMMERSION   Aliquam erat volutpat. Sed quis
                                                                                                                                                                                               velit. Nulla facilisi. Nulla libero.
User Pro le and Sample Personas                                                               rhoncus neque, id pulvinar odio
                                                                                                                                                                                                   Vivamus pharetra posuere.
                                                                                              lorem non turpis.
   Dimensions of a Our Users
      Lorem ipsum dolor sit amet,
                                                                                                          Suspendisse id velit vitae ligula                                                        Quisque facilisis erat a dui.
      consectetuer adipiscing elit.
                                                                                              Nam consecer. condimentum.
                                                                                                              volutpat Sed aliquam,
      Morbi commodo, ipsum sed
      pharetra gravida, orci magna                                  IMMERSION                        Aliquam erat volutpat. Sed quis                                                             Nam malesuada ornare dolor.
      rhoncus neque, id pulvinar odio                                                         nunc egetVivamus pharetra posuere.
                                                                                                             euismod, lectus nunc
                                                                                                      velit. Nulla facilisi. Nulla libero.
                                                                                                                                                                                                   Cras gravida, diam sit amet
                                                                                                                                                                                    LOYALTY
      lorem non turpis.
                                                                                              ullamcorper orci, fermentum
                                                                                                         Quisque facilisis erat a dui.                                                                rhoncus ornare, erat elit
      Nam consecer. Sed aliquam,                                                              bibendum malesuada ornare dolor.
                                                                                                       Nam enim nibh eget
      nunc eget euismod, lectus nunc
                                                                                                          Cras gravida, diam sit amet                                                             consectetuer erat, id egestas
      ullamcorper orci, fermentum                                      LOYALTY                ipsum. Donec porttitor ligula .
                                                                                                              rhoncus ornare, erat elit
      bibendum enim nibh eget
      ipsum. Donec porttitor ligula .
                                                                                                              consectetuer erat, id egestas                                                              pede nibh eget odio.
                                                                                                                     pede nibh eget odio.


                                                                                                              Nullam egestas feugiat felis.
      Aliquam iaculis. Fusce et ipsum
      et nulla tristique facilisis. Donec
                                                                                                                  Integer adipiscing semper
                                                                                                                                                                                                  Nullam egestas feugiat felis.
      eget sem sit amet ligula viverra                           ENVIRONMENT                  Aliquam iaculis. Fusce et ipsum
                                                                                                               ligula. Nunc molestie, nisl sit
      gravida.
                                                                                                              amet cursus convallis, sapien
                                                                                                                                                                                                      Integer adipiscing semper
                                                                                              et nulla tristique facilisis. Donec
                                                                                                                       lectus pretium metus,


                                                                                              eget sem sit amet ligula viverra
                                                                                                                                                                                ENVIRONMENT        ligula. Nunc molestie, nisl sit
                                                                                                             Quisque aliquet, quam
      Proin at eros non eros
                                                                                                      elementum condntum feugiat,                                                                 amet cursus convallis, sapien
      adipiscing mollis. Donec
                                                                      BREADTH                 gravida. tellus odio consectetuer wisi,
      semper turpis sed diam. Sed
      consequat ligula nec tortor.
                                                                                                          vel nonummy sem neque in elit.                                                                   lectus pretium metus,
                                                                                                            Curabitur eleifend wisi iaculis.


      Integer adipiscing semper
                                                                                                             Curabitur eleifend wisi iaculis
      ligula. Nunc molestie, nisl sit
                                                                                                           ipsum. Pelleque habitant morbi
      amet cursus convallis, sapien                               COMMITMENT                                  tristique senectus et netus et                                                           Quisque aliquet, quam
      lectus pretium metus, vitae                                                             Proin at eros non eros
                                                                                                                 malesuada fames ac turpis.
      pretium enim wisi id lectus.                                                                                                                                                             elementum condntum feugiat,
                                                                                              adipiscing mollis. Donec
                                                         Sample Personas                      semper turpis sed diam. Sed                                                          BREADTH       tellus odio consectetuer wisi,
                                                                                                     Questions for User Research                                                              vel nonummy sem neque in elit.
                                                                                              consequat eros non eros adipiscingtortor.
                                                                                                     • Proin at ligula nec mollis.
                                      The Working Mom


                • Nulla facilisi. In vel sem. Morbi id
                                                                                                           Donec semper turpis sed diam.                                                        Curabitur eleifend wisi iaculis.
                                                                                                          • Proin at eros non eros adipiscing mollis.
                  urna in diam dignissim feugiat.
                                                                                                            Donec semper turpis sed diam.
                • Proin molestie tortor eu velit.
                  Aliquam erat volutpat.                                                                  • Proin at eros non eros adipiscing mollis.
                • Nullam ultrices, diam tempus            The Busy Manager                                  Donec semper turpis sed diam.
                  vulputate egestas, eros pede varius
                  leo, sed imperdiet lectus est ornare                                        IntegerProin atsemper turpis sed diam. mollis.
                                                                                                      •
                                                                                                         adipiscing semper
                                                                                                                 eros non eros adipiscing

                                                                                                                                                                                                 Curabitur eleifend wisi iaculis
                                                                                                        Donec
                • Lorem ipsum dolor sit amet,             • Nulla facilisi. In vel sem. Morbi id      • Proin at eros non eros adipiscing mollis.
                  consectetuer adipiscing elit.             urna in diam dignissim feugiat.
                                                                                              ligula. Nunc molestie, nisl sit
                                                                                                        Donec semper turpis sed diam.
                                                          • Proin molestie tortor eu velit.
                                                                                                      • Proin at eros non eros adipiscing mollis.                                              ipsum. Pelleque habitant morbi
                                                                                              amet cursus convallis,mollis.                sapien                               COMMITMENT
                                                            Aliquam erat volutpat.
                   The quot;Sick of Her Day-Jobquot;                                                            Donec semper turpis sed diam.
                                                          • Nullam ultrices, diam tempus
                                                            vulputate egestas, eros pede varius       • Proin at eros non eros adipiscing
                                                                                                                                                                                                  tristique senectus et netus et
                                                                                              lectus pretium eros adipiscing mollis.
                                                            leo, sed imperdiet lectus est ornare
                                                                                                                          metus, vitae
                                                                                                        Donec semper turpis sed diam.
    • Nulla facilisi. In vel sem. Morbi id
      urna in diam dignissim feugiat.
                                                          • Lorem ipsum dolor sit amet,
                                                            consectetuer adipiscing elit.
                                                                                                      • Proin at eros non
                                                                                                        Donec semper turpis sed diam.                                                                malesuada fames ac turpis.
    • Proin molestie tortor eu velit.
      Aliquam erat volutpat.
                                                                                              pretium enim wisi id lectus.
                                                                                                      • Proin at eros non eros adipiscing mollis.
                                                                                                            Donec semper turpis sed diam.
    • Nullam ultrices, diam tempus
      vulputate egestas, eros pede varius                                                                 • Proin at eros non eros adipiscing mollis.
      leo, sed imperdiet lectus est ornare                                                                  Donec semper turpis sed diam.
    • Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit.


                                                                                                                     prepared by:
                                                                                                                     date:
                                                                                                                                    Dan Brown
                                                                                                                                    [DATE]                                Sample Personas
                                                                                                                                                                                              Questions for User Research
                                                                                                                     version:       1.0



                                                                                                                                                        The Working Mom
                                                                                                                                                                                              • Proin at eros non eros adipiscing mollis.
                                                                                                                                                                                                Donec semper turpis sed diam.
                                                                                                           • Nulla facilisi. In vel sem. Morbi id
                                                                                                                                                                                              • Proin at eros non eros adipiscing mollis.
                                                                                                                                                                                                                                    27
                                                                                                             urna in diam dignissim feugiat.
                                                                                                                                                                                                Donec semper turpis sed diam.
• Unclear
 Too many boxes make it difficult to read.

• Incomplete
 Can’t represent every page on the site.

• Inappropriate
 Not an accurate picture of experience.

                                             28
An Alternative:
Structures at a Higher
Level of Abstraction


                         29
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)
Beyond Wireframes from Voices That Matter (Oct 2007)

Weitere ähnliche Inhalte

Mehr von Dan Brown

Information Architecture Lenses - by Dan Brown
Information Architecture Lenses - by Dan BrownInformation Architecture Lenses - by Dan Brown
Information Architecture Lenses - by Dan BrownDan Brown
 
IA Lenses: Helpful perspectives for information architects
IA Lenses: Helpful perspectives for information architectsIA Lenses: Helpful perspectives for information architects
IA Lenses: Helpful perspectives for information architectsDan Brown
 
Crafting the Discovery Phase: Starting Design Projects Right
Crafting the Discovery Phase: Starting Design Projects RightCrafting the Discovery Phase: Starting Design Projects Right
Crafting the Discovery Phase: Starting Design Projects RightDan Brown
 
Eight Principles of Information Architecture
Eight Principles of Information ArchitectureEight Principles of Information Architecture
Eight Principles of Information ArchitectureDan Brown
 
Difficult Conversations in Creative Environments ~ IA Summit 2009
Difficult Conversations in Creative Environments ~ IA Summit 2009Difficult Conversations in Creative Environments ~ IA Summit 2009
Difficult Conversations in Creative Environments ~ IA Summit 2009Dan Brown
 
Modeling Concepts ~ IA Summit 2009
Modeling Concepts ~ IA Summit 2009Modeling Concepts ~ IA Summit 2009
Modeling Concepts ~ IA Summit 2009Dan Brown
 
Designing Rules ~ IA Summit 2009
Designing Rules ~ IA Summit 2009Designing Rules ~ IA Summit 2009
Designing Rules ~ IA Summit 2009Dan Brown
 
Concept Models ~ Interaction08
Concept Models ~ Interaction08Concept Models ~ Interaction08
Concept Models ~ Interaction08Dan Brown
 
Documentation: Choosing the Right Tool for the Job
Documentation: Choosing the Right Tool for the JobDocumentation: Choosing the Right Tool for the Job
Documentation: Choosing the Right Tool for the JobDan Brown
 
Documentation Workshop @ IA Summit
Documentation Workshop @ IA SummitDocumentation Workshop @ IA Summit
Documentation Workshop @ IA SummitDan Brown
 
Communicating Design Session @ IA Summit
Communicating Design Session @ IA SummitCommunicating Design Session @ IA Summit
Communicating Design Session @ IA SummitDan Brown
 
Dan Brown's Communicating Design Presentation to DOE
Dan Brown's Communicating Design Presentation to DOEDan Brown's Communicating Design Presentation to DOE
Dan Brown's Communicating Design Presentation to DOEDan Brown
 

Mehr von Dan Brown (12)

Information Architecture Lenses - by Dan Brown
Information Architecture Lenses - by Dan BrownInformation Architecture Lenses - by Dan Brown
Information Architecture Lenses - by Dan Brown
 
IA Lenses: Helpful perspectives for information architects
IA Lenses: Helpful perspectives for information architectsIA Lenses: Helpful perspectives for information architects
IA Lenses: Helpful perspectives for information architects
 
Crafting the Discovery Phase: Starting Design Projects Right
Crafting the Discovery Phase: Starting Design Projects RightCrafting the Discovery Phase: Starting Design Projects Right
Crafting the Discovery Phase: Starting Design Projects Right
 
Eight Principles of Information Architecture
Eight Principles of Information ArchitectureEight Principles of Information Architecture
Eight Principles of Information Architecture
 
Difficult Conversations in Creative Environments ~ IA Summit 2009
Difficult Conversations in Creative Environments ~ IA Summit 2009Difficult Conversations in Creative Environments ~ IA Summit 2009
Difficult Conversations in Creative Environments ~ IA Summit 2009
 
Modeling Concepts ~ IA Summit 2009
Modeling Concepts ~ IA Summit 2009Modeling Concepts ~ IA Summit 2009
Modeling Concepts ~ IA Summit 2009
 
Designing Rules ~ IA Summit 2009
Designing Rules ~ IA Summit 2009Designing Rules ~ IA Summit 2009
Designing Rules ~ IA Summit 2009
 
Concept Models ~ Interaction08
Concept Models ~ Interaction08Concept Models ~ Interaction08
Concept Models ~ Interaction08
 
Documentation: Choosing the Right Tool for the Job
Documentation: Choosing the Right Tool for the JobDocumentation: Choosing the Right Tool for the Job
Documentation: Choosing the Right Tool for the Job
 
Documentation Workshop @ IA Summit
Documentation Workshop @ IA SummitDocumentation Workshop @ IA Summit
Documentation Workshop @ IA Summit
 
Communicating Design Session @ IA Summit
Communicating Design Session @ IA SummitCommunicating Design Session @ IA Summit
Communicating Design Session @ IA Summit
 
Dan Brown's Communicating Design Presentation to DOE
Dan Brown's Communicating Design Presentation to DOEDan Brown's Communicating Design Presentation to DOE
Dan Brown's Communicating Design Presentation to DOE
 

Kürzlich hochgeladen

Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...
Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...
Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...Amil baba
 
Princess Jahan's Tuition Classes, a story for entertainment
Princess Jahan's Tuition Classes, a story for entertainmentPrincess Jahan's Tuition Classes, a story for entertainment
Princess Jahan's Tuition Classes, a story for entertainmentazuremorn
 
NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...
NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...
NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...Amil Baba Dawood bangali
 
Behind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdf
Behind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdfBehind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdf
Behind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdfEnzo Zelocchi Fan Page
 
Statement Of Intent - - Copy.documentfile
Statement Of Intent - - Copy.documentfileStatement Of Intent - - Copy.documentfile
Statement Of Intent - - Copy.documentfilef4ssvxpz62
 
What Life Would Be Like From A Different Perspective (saltyvixenstories.com)
What Life Would Be Like From A Different Perspective (saltyvixenstories.com)What Life Would Be Like From A Different Perspective (saltyvixenstories.com)
What Life Would Be Like From A Different Perspective (saltyvixenstories.com)Salty Vixen Stories & More
 
ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024
ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024
ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024Durkin Entertainment LLC
 
THE MEDIC, A STORY for entertainment.docx
THE MEDIC, A STORY for entertainment.docxTHE MEDIC, A STORY for entertainment.docx
THE MEDIC, A STORY for entertainment.docxazuremorn
 
Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...
Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...
Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...TeslaStakeHolder
 
NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...
NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...
NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...Amil Baba Dawood bangali
 
Biswanath Byam Samiti Open Quiz 2022 by Qui9 Grand Finale
Biswanath Byam Samiti Open Quiz 2022 by Qui9 Grand FinaleBiswanath Byam Samiti Open Quiz 2022 by Qui9 Grand Finale
Biswanath Byam Samiti Open Quiz 2022 by Qui9 Grand FinaleQui9 (Ultimate Quizzing)
 
Taken Pilot Episode Story pitch Document
Taken Pilot Episode Story pitch DocumentTaken Pilot Episode Story pitch Document
Taken Pilot Episode Story pitch Documentf4ssvxpz62
 
Fight Scene Storyboard (Action/Adventure Animation)
Fight Scene Storyboard (Action/Adventure Animation)Fight Scene Storyboard (Action/Adventure Animation)
Fight Scene Storyboard (Action/Adventure Animation)finlaygoodall2
 
Aesthetic Design Inspiration by Slidesgo.pptx
Aesthetic Design Inspiration by Slidesgo.pptxAesthetic Design Inspiration by Slidesgo.pptx
Aesthetic Design Inspiration by Slidesgo.pptxsayemalkadripial4
 
Bald Philosopher, a story for entertainment.docx
Bald Philosopher, a story for entertainment.docxBald Philosopher, a story for entertainment.docx
Bald Philosopher, a story for entertainment.docxazuremorn
 
A Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' Mother
A Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' MotherA Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' Mother
A Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' Motherget joys
 

Kürzlich hochgeladen (20)

S10_E02_How to Pimp Social Media 101.pptx
S10_E02_How to Pimp Social Media 101.pptxS10_E02_How to Pimp Social Media 101.pptx
S10_E02_How to Pimp Social Media 101.pptx
 
Sincerely, The Friday Club - Farewell Quiz-Finals.pptx
Sincerely, The Friday Club - Farewell Quiz-Finals.pptxSincerely, The Friday Club - Farewell Quiz-Finals.pptx
Sincerely, The Friday Club - Farewell Quiz-Finals.pptx
 
Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...
Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...
Uk-NO1 Amil In Karachi Best Amil In Karachi Bangali Baba In Karachi Aamil In ...
 
Princess Jahan's Tuition Classes, a story for entertainment
Princess Jahan's Tuition Classes, a story for entertainmentPrincess Jahan's Tuition Classes, a story for entertainment
Princess Jahan's Tuition Classes, a story for entertainment
 
NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...
NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...
NO1 Certified kala ilam Expert In Peshwar Kala Jadu Specialist In Peshwar Kal...
 
Moveable Feast_Travel-Lifestyle-Culture Quiz.pptx
Moveable Feast_Travel-Lifestyle-Culture Quiz.pptxMoveable Feast_Travel-Lifestyle-Culture Quiz.pptx
Moveable Feast_Travel-Lifestyle-Culture Quiz.pptx
 
Behind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdf
Behind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdfBehind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdf
Behind the Scenes The Life of Enzo Zelocchi, a Hollywood Film Producer.pdf
 
S10_E06-Sincerely,The Friday Club- Prelims Farewell Quiz.pptx
S10_E06-Sincerely,The Friday Club- Prelims Farewell Quiz.pptxS10_E06-Sincerely,The Friday Club- Prelims Farewell Quiz.pptx
S10_E06-Sincerely,The Friday Club- Prelims Farewell Quiz.pptx
 
Statement Of Intent - - Copy.documentfile
Statement Of Intent - - Copy.documentfileStatement Of Intent - - Copy.documentfile
Statement Of Intent - - Copy.documentfile
 
What Life Would Be Like From A Different Perspective (saltyvixenstories.com)
What Life Would Be Like From A Different Perspective (saltyvixenstories.com)What Life Would Be Like From A Different Perspective (saltyvixenstories.com)
What Life Would Be Like From A Different Perspective (saltyvixenstories.com)
 
ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024
ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024
ECOLUXE pre-ESPYS Ultimate Sports Lounge 2024
 
THE MEDIC, A STORY for entertainment.docx
THE MEDIC, A STORY for entertainment.docxTHE MEDIC, A STORY for entertainment.docx
THE MEDIC, A STORY for entertainment.docx
 
Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...
Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...
Flying Avocado Cat Cryptocurrency Created, Coded, Generated and Named by Grok...
 
NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...
NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...
NO1 Certified Black magic specialist,Expert in Pakistan Amil Baba kala ilam E...
 
Biswanath Byam Samiti Open Quiz 2022 by Qui9 Grand Finale
Biswanath Byam Samiti Open Quiz 2022 by Qui9 Grand FinaleBiswanath Byam Samiti Open Quiz 2022 by Qui9 Grand Finale
Biswanath Byam Samiti Open Quiz 2022 by Qui9 Grand Finale
 
Taken Pilot Episode Story pitch Document
Taken Pilot Episode Story pitch DocumentTaken Pilot Episode Story pitch Document
Taken Pilot Episode Story pitch Document
 
Fight Scene Storyboard (Action/Adventure Animation)
Fight Scene Storyboard (Action/Adventure Animation)Fight Scene Storyboard (Action/Adventure Animation)
Fight Scene Storyboard (Action/Adventure Animation)
 
Aesthetic Design Inspiration by Slidesgo.pptx
Aesthetic Design Inspiration by Slidesgo.pptxAesthetic Design Inspiration by Slidesgo.pptx
Aesthetic Design Inspiration by Slidesgo.pptx
 
Bald Philosopher, a story for entertainment.docx
Bald Philosopher, a story for entertainment.docxBald Philosopher, a story for entertainment.docx
Bald Philosopher, a story for entertainment.docx
 
A Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' Mother
A Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' MotherA Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' Mother
A Spotlight on Darla Leigh Pittman Rodgers: Aaron Rodgers' Mother
 

Beyond Wireframes from Voices That Matter (Oct 2007)

  • 1. Beyond Wireframes Voices That Matter • San Francisco • October 25, 2007 Dan Brown, Principal • EightShapes, LLC
  • 2. October 1 ? 995 2
  • 3. October 1 995 1. What’s New Since 1995 Or, then and now
  • 4. Then: • Simple, hierarchical structures • Lack of familiarity • Jacks of all trade • Waterfall methodologies 4
  • 5. Now: • Complex structures & interactions • Embedded in business • Team diversification • Process diversification 5
  • 6. Complex structures & interactions: • Faceted navigation • User-generated content • User-generated structures • Dynamic behaviors • Dissolution of the page 6
  • 7. Embedded in business: • More stakeholders • Greater scrutiny • Greater impact on people 7
  • 8. Team diversification: • Specialization & Scale • Generalization & Speed 8
  • 9. Process diversification: • Increased formality • Associated backlash • Experimentation 9
  • 10. ? 2. How Documents Fail Or, mistakes we make
  • 12. An Example: Abstracted Wireframes for Reporting Engine of CMS 12
  • 13. page 1 Reports Home custom... Application Home 2 1 The name of [HIDDEN] client. [client name] : [timeframe] change 3 2 The selected timeframe for the overview. The 1 custom... 5 6 default timeframe is quot;last seven days.quot; Highlights drag headers to change layout | edit metrics | export from: Jan 01 2006 4 3 Clicking this link reveals a drop-down menu New Members Donations Exposure Forwards allowing users to select a different time frame. to: Jan 01 2007 Screen: Options include: Yesterday, Last Seven Days, 999 $9,999 999 999 Last Week, Last Two Weeks, Last Month, Last Quarter, Last Six Months, Last Year, Custom... If users select quot;customquot; they are prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 presented with the options at right. With a custom timeframe, the tiles do not display data from a prior timeframe. Tile Dragging Behavior Rules Issue Targeting Comments [variable name] [variable name] These customizations are attached to user 4 Each highlight tile displays the name of the accounts. Once a user selects metrics and 999 999 999 999 variable, the metric in the given timeframe, and the same metric in the prior timeframe. re-arranges the tiles, they are stored with his or her account. For example, if the selected timeframe is prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 quot;Last Quarterquot; the display will show quot;Prior Dragging a tile within a row Quarterquot;. Users can drag the tiles by the header to rearrange them. Clicking on the If users drag a tile within Document: main part of the tile takes users to the the same row, the other 7 8 Comparison Report page for that metric. tiles shift left or right to show: active campaigns | all campaigns export accommodate it, but do 9 rank campaign pages page performance alerts alert performance 5 Clicking this link will take users to a separate not jump between rows. page with a list of all possible metrics. Users 1/6 [campaign name] [# pages] [# alerts] can choose up to eight metrics to display on Project: Reports Redesign the Reports home. These selections are specific to each user account. 2/1 [campaign name] [# pages] [# alerts] 6 Users can export the highlighted metrics to an Dragging a tile to another row XLS document. Clicking this link will start an 3/18 [campaign name] [# pages] [# alerts] automatic download. Dragging a tile to the top row from the bottom 4/- [campaign name] [# pages] [# alerts] 7 By default the Reports home displays only shifts the top-row tiles to active campaigns. Clicking quot;all campaignsquot; the right and down as will change the display of the page, hiding the necessary. The far-right 5/2 [campaign name] [# pages] [# alerts] highlights and populating the table will all the tile shifts down to the far- campaigns run by the client. left position of the 8 Users can export the table data to an XLS bottom row. Active Campaigns are campaigns that Page Performance is an aggregate Alert Performance shows click-throughs document. Clicking this link will start an Dragging a tile to the have been designated as such by the client. measure of all the pages in a campaign. It is for the most recent alerts sent. It is not automatic download. bottom row from the top If a client has no active campaigns, the determined by dividing the total number of modified by the selected timeframe. shifts the bottom-row tiles Client: [HIDDEN] campaigns displayed here are determined actions by the total number of views within 9 The table displays essential stats from active to the left. The far-left tile by business rule: those campaigns that have the specified timeframe. campaign. Clicking on a campaign name takes moves to the far-right had at least 10 actions in the last 6 months. users to the Campaign Overview page. position of the top row. Campaign Rank is determined by summing the page performance and the alert performance. The display shows the rank in the current timeframe and the rank in the prior timeframe. 13
  • 14. page 1 Reports Home custom... Application Home 2 1 The name of [HIDDEN] client. [client name] : [timeframe] 1 Priority Highlights 4 change 3 5 drag headers to change layout | edit metrics | export 6 2 The selected timeframe for the overview. The default timeframe is quot;last seven days.quot; from: custom... Jan 01 2006 3 Clicking this link reveals a drop-down menu New Members Donations Exposure Forwards allowing users to select a different time frame. to: Jan 01 2007 Screen: Options include: Yesterday, Last Seven Days, 999 $9,999 999 999 Last Week, Last Two Weeks, Last Month, Last Quarter, Last Six Months, Last Year, Custom... If users select quot;customquot; they are prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 presented with the options at right. With a custom timeframe, the tiles do not display data from a prior timeframe. Tile Dragging Behavior Rules Issue Targeting Comments [variable name] [variable name] These customizations are attached to user 4 Each highlight tile displays the name of the accounts. Once a user selects metrics and 999 999 999 999 variable, the metric in the given timeframe, and the same metric in the prior timeframe. re-arranges the tiles, they are stored with his or her account. For example, if the selected timeframe is prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 prior [timeframe]: 999 quot;Last Quarterquot; the display will show quot;Prior Dragging a tile within a row Quarterquot;. Users can drag the tiles by the header to rearrange them. Clicking on the If users drag a tile within Document: main part of the tile takes users to the the same row, the other 7 8 Comparison Report page for that metric. tiles shift left or right to show: active campaigns | all campaigns export accommodate it, but do 9 rank campaign pages page performance alerts alert performance 5 Clicking this link will take users to a separate not jump between rows. page with a list of all possible metrics. Users 1/6 [campaign name] [# pages] [# alerts] can choose up to eight metrics to display on Project: Reports Redesign the Reports home. These selections are specific to each user account. 2/1 [campaign name] [# pages] [# alerts] 6 Users can export the highlighted metrics to an Dragging a tile to another row XLS document. Clicking this link will start an 3/18 [campaign name] [# pages] [# alerts] automatic download. Dragging a tile to the top row from the bottom 4/- [campaign name] [# pages] [# alerts] 7 By default the Reports home displays only shifts the top-row tiles to 5/2 [campaign name] [# pages] Elements [# alerts] active campaigns. Clicking quot;all campaignsquot; will change the display of the page, hiding the highlights and populating the table will all the campaigns run by the client. the right and down as necessary. The far-right tile shifts down to the far- left position of the 8 Users can export the table data to an XLS bottom row. Active Campaigns are campaigns that Page Performance is an aggregate Alert Performance shows click-throughs document. Clicking this link will start an Dragging a tile to the have been designated as such by the client. measure of all the pages in a campaign. It is for the most recent alerts sent. It is not automatic download. bottom row from the top If a client has no active campaigns, the determined by dividing the total number of modified by the selected timeframe. shifts the bottom-row tiles Client: [HIDDEN] campaigns displayed here are determined actions by the total number of views within 9 The table displays essential stats from active to the left. The far-left tile by business rule: those campaigns that have the specified timeframe. campaign. Clicking on a campaign name takes moves to the far-right had at least 10 actions in the last 6 months. users to the Campaign Overview page. position of the top row. Campaign Rank is determined by summing the page performance and the alert performance. The display shows the rank in the current timeframe and the rank in the prior timeframe. 14
  • 15. Home Page Contents higher visual priority lower visual priority 1 Knowledge Base 2 How to Add Documents 3 Mission and Vision The primary focus of the Extranet's home page is the list of categories that Posting instructions appear on the You can contribute to any page by clicking on the The home page includes links to organizational mission and vision. It could quot;Switch to Edit Modequot; link at the top. constitute the knowledge base. It is through this list that users access all of the home page to facilitate community If you do not see this link and would like to contribute, look like this: knowledge resources. The list could look like this: participation. please contact your system admini strator. quot;...to develop physical fitness, demonstrate courage, experience joy ...quot; for more information, Athletes and Athlete Health Information Technology check the user guide TB TB our mission + our vision + message from our CEO Coaches, Skills, and Sports Training Organizational Development D D Competitions and Sports Rules Outreach and Recruitment Event Planning Public Relations and Communications Recently Added Families and Schools Research Finance and Operations Fundraising Stories of Special Olympics Strategic Planning The home page includes a link to items recently added to the knowledge base. Essentials Governance and Boards Volunteers The small quot;essentialsquot; area includes essential tools from the knowledge base 3-5 links to topics or documents Branding Guidelines The knowledge categories will include Best Practices, FAQs, the Glossary, the Dictionary, and Testimonials. In the future the collaborative applications like the Language Selection within the knowledge categories. It could look like this: Volunteer Registration Form Budget Template Sports Guides (Winter, Summer) bulletin board and expert directory will be accessed through the knowledge base. With Programs all over the world, Special language - langage - : Coaching Guides Olympics needs an extranet that appears in multiple languages. The home page will have English a language selection menu, which might look Special Olympics Around the World like this: Applications The home page will include an area that highlights information specific to The home page includes a menu of particular regions, includes messages from the Regional Manager Directors. Announcements Special Olympics applications. The applications applications menu could look like this: Program Development System go Announcements are internal messages, directed toward the field from Regions and HQ. The home page shows the three latest announcements with a link to Messages from the Regional Managing Directors Regional Calendars more, looking possibly like this: Regional and Program Profiles Regional News, Announcements, and Accomplishments Special Olympics launches multi-lingual extranet to address needs of Programs Contribute your best practices to our new kn owledge management system Switch to Edit Mode Quarterly reports due to regional managing directo rs by April 7, 2003 more... So long as the user has security privileges, the system will expose a link allowing him to enter the edit mode. switch to edit mode Navigation on Every Page Certain items appear throughout the site. A global quot;navigation barquot; includes five items on the home page: Contacts, Around the World, Knowledge Base, User Guide, and Search. On internal pages, there is always a link to quot;home.quot; Global items could be rendered: User Guide + Contacts + Around the World + Knowledge Base + Search: go items italicized must appear above the fold The layout and design depicted herein represents Dan Brown 7 March 2002 Tisani Consulting, LLC dan.brown@tisani.com content priorities only and should not be construed as actual layout and design. Final product may home page contents Special Olympics/ Version 1.1 6400 Goldsboro Rd. Bethesda, MD 20817 vary. Extranet 15
  • 16. Priority Elements Home Page Contents higher visual priority lower visual priority 1 Knowledge Base 2 How to Add Documents 3 Mission and Vision The primary focus of the Extranet's home page is the list of categories that Posting instructions appear on the You can contribute to any page by clicking on the The home page includes links to organizational mission and vision. It could quot;Switch to Edit Modequot; link at the top. constitute the knowledge base. It is through this list that users access all of the home page to facilitate community If you do not see this link and would like to contribute, look like this: knowledge resources. The list could look like this: participation. please contact your system admini strator. quot;...to develop physical fitness, demonstrate courage, experience joy ...quot; for more information, Athletes and Athlete Health Information Technology check the user guide TB TB our mission + our vision + message from our CEO Coaches, Skills, and Sports Training Organizational Development D D Competitions and Sports Rules Outreach and Recruitment Event Planning Public Relations and Communications Recently Added Families and Schools Research Finance and Operations Fundraising Stories of Special Olympics Strategic Planning The home page includes a link to items recently added to the knowledge base. Essentials Governance and Boards Volunteers The small quot;essentialsquot; area includes essential tools from the knowledge base 3-5 links to topics or documents Branding Guidelines The knowledge categories will include Best Practices, FAQs, the Glossary, the Dictionary, and Testimonials. In the future the collaborative applications like the Language Selection within the knowledge categories. It could look like this: Volunteer Registration Form Budget Template Sports Guides (Winter, Summer) bulletin board and expert directory will be accessed through the knowledge base. With Programs all over the world, Special language - langage - : Coaching Guides Olympics needs an extranet that appears in multiple languages. The home page will have English a language selection menu, which might look Special Olympics Around the World like this: Applications The home page will include an area that highlights information specific to The home page includes a menu of particular regions, includes messages from the Regional Manager Directors. Announcements Special Olympics applications. The applications applications menu could look like this: Program Development System go Announcements are internal messages, directed toward the field from Regions and HQ. The home page shows the three latest announcements with a link to Messages from the Regional Managing Directors Regional Calendars more, looking possibly like this: Regional and Program Profiles Regional News, Announcements, and Accomplishments Special Olympics launches multi-lingual extranet to address needs of Programs Contribute your best practices to our new kn owledge management system Switch to Edit Mode Quarterly reports due to regional managing directo rs by April 7, 2003 more... So long as the user has security privileges, the system will expose a link allowing him to enter the edit mode. switch to edit mode Navigation on Every Page Certain items appear throughout the site. A global quot;navigation barquot; includes five items on the home page: Contacts, Around the World, Knowledge Base, User Guide, and Search. On internal pages, there is always a link to quot;home.quot; Global items could be rendered: User Guide + Contacts + Around the World + Knowledge Base + Search: go items italicized must appear above the fold The layout and design depicted herein represents Dan Brown 7 March 2002 Tisani Consulting, LLC dan.brown@tisani.com content priorities only and should not be construed as actual layout and design. Final product may home page contents Special Olympics/ Version 1.1 6400 Goldsboro Rd. Bethesda, MD 20817 vary. Extranet 16
  • 17. List Template 1 XXXXXX > XXXXXX > XXXXXX • The LIST TEMPLATE provides a page structure for 2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts. 4 • Each campaign has lists dedicated to pages and alerts. XXXXXXXXX XXX | XXX | XXX • Each campaign also has a quot;watchlistquot;, rendered in the same 5 XXXXXXXXX XXX | XXX | XXX template, that combines both pages and alerts. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, though a XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX List of Campaigns for a Client List of Pages in a Campaign List of Alerts in a Campaign Use 1. Context [Client name] [Client name] [Campaign name] [Client name] [Campaign name] [C 2. Tab Set Active By Label By Host All By Visits By Date By Label All By Date By Label All NO 3. Commands Compare Export Label Compare Export Label Compare Export Label C 4. Tab Options By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy NO By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label... 5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchlist [launch date] [Name of Alert] add to/remove from watchlist [page title] [alert title] O [list of labels] [list of labels] 17
  • 18. List Template 1 XXXXXX > XXXXXX > XXXXXX • The LIST TEMPLATE provides a page structure for 2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts. 4 • Each campaign has lists dedicated to pages and alerts. XXXXXXXXX XXX | XXX | XXX • Each campaign also has a quot;watchlistquot;, rendered in the s 5 XXXXXXXXX XXX | XXX | XXX template, that combines both pages and alerts. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, thoug XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX List of Campaigns for a Client List of Pages in a Campaign 1. Context [Client name] [Client name] [Campaign name] 2. Tab Set Active By Label By Host All By Visits By Date By Label All 3. Commands Compare Export Label Compare Export Label 4. Tab Options By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Host Filter by host: select host... By Label Filter by label: select label... 5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchl [page title] 18 [list of labels]
  • 19. List Template 1 XXXXXX > XXXXXX > XXXXXX • The LIST TEMPLATE provides a page structure for Priority 2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts. 4 • Each campaign has lists dedicated to pages and alerts. XXXXXXXXX XXX | XXX | XXX • Each campaign also has a quot;watchlistquot;, rendered in the same 5 XXXXXXXXX XXX | XXX | XXX template, that combines both pages and alerts. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, though a XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX List of Campaigns for a Client List of Pages in a Campaign List of Alerts in a Campaign User-De ned Watchlist for Campaign 1. Context [Client name] [Client name] [Campaign name] [Client name] [Campaign name] [Client name] Watchlist 2. Tab Set Active By Label By Host All By Visits By Date By Label All By Date By Label All NONE 3. Commands Compare Export Label Compare Export Label Compare Export Label Compare Export Label 4. Tab Options By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy NONE By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label... 5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchlist [launch date] [Name of Alert] add to/remove from watchlist [launch date] [Name of Item] remove from watchlist [page title] [alert title] OR [item title] [list of labels] [list of labels] [list of labels] Elements client: project: document: Grassroots Enterprises Reports Module Redesign Speci cation prepared by: date: version: Dan Brown Thu Feb 22 2007 1.0 Page 4 of 5 19
  • 20. List Template 1 XXXXXX > XXXXXX > XXXXXX • The LIST TEMPLATE provides a page structure for Priority 2 3 XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts. 4 • Each campaign has lists dedicated to pages and alerts. XXXXXXXXX XXX | XXX | XXX • Each campaign also has a quot;watchlistquot;, rendered in the same 5 XXXXXXXXX XXX | XXX | XXX template, that combines both pages and alerts. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX • Users may add pages and alerts to the watchlist, though a XXXXXXXXX XXX | XXX | XXX campaign's watchlist is shared by all users of the system. XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX XXXXXXXXX XXX | XXX | XXX List of Campaigns for a Client List of Pages in a Campaign List of Alerts in a Campaign User-De ned Watchlist for Campaign 1. Context [Client name] [Client name] [Campaign name] [Client name] [Campaign name] [Client name] Watchlist 2. Tab Set Active By Label By Host All By Visits By Date By Label All By Date By Label All NONE Variety 3. Commands Compare Export Label Compare Export Label Compare Export Label Compare Export Label 4. Tab Options By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy NONE By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label... 5. List Entry [Name of Campaign] watch list alerts list page list [launch date] [Name of Page] add to/remove from watchlist [launch date] [Name of Alert] add to/remove from watchlist [launch date] [Name of Item] remove from watchlist [page title] [alert title] OR [item title] [list of labels] [list of labels] [list of labels] Elements client: project: document: Grassroots Enterprises Reports Module Redesign Speci cation prepared by: date: version: Dan Brown Thu Feb 22 2007 1.0 Page 4 of 5 20
  • 22. • Unclear Complex ideas vs. Context-sensitive audience • Incomplete Product conception vs. Required detail • Inappropriate Perceived need vs. Actual need 22
  • 23. 3. Strategies for Success Or, things you could try (success not guaranteed)
  • 24. • Personas • Site Maps • Wireframes 24
  • 25. • Unclear Not how we’re used to looking at audience. • Incomplete Can’t represent range of people’s needs. • Inappropriate Not useful design tool. 25
  • 27. Suspendisse id velit vitae ligula consectetuer adipiscing elit. volutpat condimentum. Morbi commodo, ipsum sed Project Name // User Research pharetra gravida, orci magna IMMERSION Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. User Pro le and Sample Personas rhoncus neque, id pulvinar odio Vivamus pharetra posuere. lorem non turpis. Dimensions of a Our Users Lorem ipsum dolor sit amet, Suspendisse id velit vitae ligula Quisque facilisis erat a dui. consectetuer adipiscing elit. Nam consecer. condimentum. volutpat Sed aliquam, Morbi commodo, ipsum sed pharetra gravida, orci magna IMMERSION Aliquam erat volutpat. Sed quis Nam malesuada ornare dolor. rhoncus neque, id pulvinar odio nunc egetVivamus pharetra posuere. euismod, lectus nunc velit. Nulla facilisi. Nulla libero. Cras gravida, diam sit amet LOYALTY lorem non turpis. ullamcorper orci, fermentum Quisque facilisis erat a dui. rhoncus ornare, erat elit Nam consecer. Sed aliquam, bibendum malesuada ornare dolor. Nam enim nibh eget nunc eget euismod, lectus nunc Cras gravida, diam sit amet consectetuer erat, id egestas ullamcorper orci, fermentum LOYALTY ipsum. Donec porttitor ligula . rhoncus ornare, erat elit bibendum enim nibh eget ipsum. Donec porttitor ligula . consectetuer erat, id egestas pede nibh eget odio. pede nibh eget odio. Nullam egestas feugiat felis. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec Integer adipiscing semper Nullam egestas feugiat felis. eget sem sit amet ligula viverra ENVIRONMENT Aliquam iaculis. Fusce et ipsum ligula. Nunc molestie, nisl sit gravida. amet cursus convallis, sapien Integer adipiscing semper et nulla tristique facilisis. Donec lectus pretium metus, eget sem sit amet ligula viverra ENVIRONMENT ligula. Nunc molestie, nisl sit Quisque aliquet, quam Proin at eros non eros elementum condntum feugiat, amet cursus convallis, sapien adipiscing mollis. Donec BREADTH gravida. tellus odio consectetuer wisi, semper turpis sed diam. Sed consequat ligula nec tortor. vel nonummy sem neque in elit. lectus pretium metus, Curabitur eleifend wisi iaculis. Integer adipiscing semper Curabitur eleifend wisi iaculis ligula. Nunc molestie, nisl sit ipsum. Pelleque habitant morbi amet cursus convallis, sapien COMMITMENT tristique senectus et netus et Quisque aliquet, quam lectus pretium metus, vitae Proin at eros non eros malesuada fames ac turpis. pretium enim wisi id lectus. elementum condntum feugiat, adipiscing mollis. Donec Sample Personas semper turpis sed diam. Sed BREADTH tellus odio consectetuer wisi, Questions for User Research vel nonummy sem neque in elit. consequat eros non eros adipiscingtortor. • Proin at ligula nec mollis. The Working Mom • Nulla facilisi. In vel sem. Morbi id Donec semper turpis sed diam. Curabitur eleifend wisi iaculis. • Proin at eros non eros adipiscing mollis. urna in diam dignissim feugiat. Donec semper turpis sed diam. • Proin molestie tortor eu velit. Aliquam erat volutpat. • Proin at eros non eros adipiscing mollis. • Nullam ultrices, diam tempus The Busy Manager Donec semper turpis sed diam. vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare IntegerProin atsemper turpis sed diam. mollis. • adipiscing semper eros non eros adipiscing Curabitur eleifend wisi iaculis Donec • Lorem ipsum dolor sit amet, • Nulla facilisi. In vel sem. Morbi id • Proin at eros non eros adipiscing mollis. consectetuer adipiscing elit. urna in diam dignissim feugiat. ligula. Nunc molestie, nisl sit Donec semper turpis sed diam. • Proin molestie tortor eu velit. • Proin at eros non eros adipiscing mollis. ipsum. Pelleque habitant morbi amet cursus convallis,mollis. sapien COMMITMENT Aliquam erat volutpat. The quot;Sick of Her Day-Jobquot; Donec semper turpis sed diam. • Nullam ultrices, diam tempus vulputate egestas, eros pede varius • Proin at eros non eros adipiscing tristique senectus et netus et lectus pretium eros adipiscing mollis. leo, sed imperdiet lectus est ornare metus, vitae Donec semper turpis sed diam. • Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. • Proin at eros non Donec semper turpis sed diam. malesuada fames ac turpis. • Proin molestie tortor eu velit. Aliquam erat volutpat. pretium enim wisi id lectus. • Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. • Nullam ultrices, diam tempus vulputate egestas, eros pede varius • Proin at eros non eros adipiscing mollis. leo, sed imperdiet lectus est ornare Donec semper turpis sed diam. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. prepared by: date: Dan Brown [DATE] Sample Personas Questions for User Research version: 1.0 The Working Mom • Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. • Nulla facilisi. In vel sem. Morbi id • Proin at eros non eros adipiscing mollis. 27 urna in diam dignissim feugiat. Donec semper turpis sed diam.
  • 28. • Unclear Too many boxes make it difficult to read. • Incomplete Can’t represent every page on the site. • Inappropriate Not an accurate picture of experience. 28
  • 29. An Alternative: Structures at a Higher Level of Abstraction 29