Wireframe Development by byrnetown69

VIEWS: 0 PAGES: 25

									     Wireframe Development
Results from the Wireframe Assessments
Agenda

•   Wireframe development
•   Conference activities
•   Survey process
•   Findings from Wireframes V1
•   Findings from V2
•   Next Steps
•   Planned progress for ALA Midwinter Meeting
Wireframe Development

• Collected user requirements with stakeholder interviews and
  user focus groups
• Evaluated the existing ala.org site via a usability test
• Researched users’ mental models of the current information
  space via a card sort
• Created wireframes of (a portion of) the redesigned ala.org,
  intended to satisfy these requirements
• Tested and refined these wireframes through in-person
  walkthroughs at the ALA annual conference and two rounds of
  online surveys
Wireframes V1
Conference Activities

• Walkthroughs of the wireframe prototype were conducted at
  the Annual Conference
• Two participants walked through the wireframes
  simultaneously, with one usability specialist moderating and
  another taking notes
• An online survey was also conducted during the conference
• Modifications were made to the wireframes based on user
  feedback
• Survey was relaunched to see if there was any improvement
  in user opinions




                                                                 5
Survey Process

• Implementation
   – Wireframes were presented at two kiosks during the
     national conference
   – After browsing through the wireframes, people were given
     the opportunity to complete a short survey about their
     experience
• Responses (194 collected during conference)
   – 94% were from ALA members
   – 57% are involved members within ALA
   – 78% visit the site at least monthly



                                                            6
Findings from Wireframes V1

 Overall response was fairly positive:
    –   Clean layout
    –   Easy navigation
    –   Modern-looking
    –   Easy access to divisions

 Participant concerns:
    – Some terms were unfamiliar (“I Love Libraries”,
      “Recommended Reading”, “Washington Office”)
    – Some participants found the arrangement of some
      navigation items confusing


                                                        7
Conference Survey Assessments


                                 Poor   Fair    Undecided   Good    Very Good


Organization and layout          3.2%   8.4%      8.4%      61.0%    18.8%
Ease of navigation               1.9%   8.9%      12.1%     61.8%    15.3%

Amount of content per page       5.9%   17.1%     21.1%     42.8%    13.2%

Labels used in left navigation   2.6%   9.1%      16.2%     62.3%     9.7%

Labels used below ALA logo       6.4%   14.1%     17.9%     44.9%    16.7%




 n=157
Left Navigation                                      Before & After (1 of 3)


  (Before)                                 (After)


               Some participants thought
               Education and Jobs should                      Separated
               be separated.                                  “Education”
                                                              from “Jobs”
             Some were unsure what
             would fall under “Library
             Issues” or “Professional                   Revised “Library Issues”
             Resources.”                                to “Issues and
                                                        Legislation”
     Some observed that “Shop ALA”
     was a verb while the other items
     were nouns.                                 Moved “Shop ALA” from left
                                                 nav to Quick Links area (see
                                                 next slide)
                                                                                9
 Quick Links Bar                                            Before & After (2 of 3)
Participants weren’t sure which headers      Participants were unsure about the
contained dropdown menus.                    meanings of several items in the quick
                                             links bar.
(Before)



They wanted some of the items                                 Many liked being able to
moved to the beginning of the list.                           change the text size.

               Moved more important
(After)        items to beginning of      Relabeled “Recommended Reading” based
               the list                   on user feedback




                                                        Added indicator of dropdown


                                          Spelled out the names of
                                                                                      10
                                          the Divisions
 Lower-Level Pages                                                Before & After (3 of 3)


On lower-level pages, participants expect the   Lower-level pages were modified to
content to be targeted to the specific page     include contextually related links
on which it appears.

On general pages, however, they want the
secondary content to include items from
multiple subtopics.
                                                (After)
   (Before)




                                                                                        11
   Wireframes V2
                   Reworded and      Modified
                   reordered links   terminology




Reworded and
reordered links;
added
indications of
dropdowns


Separated
categories and
restructured
navigation items
Post-Conference Survey Process

Implementation
   – Wireframes were made available over the Web
   – After browsing through the wireframes, people were given
     the opportunity to complete a short survey about their
     experience

Responses (1499 collected during July/August)
   –   97% were from ALA members
   –   27% are active members within ALA
   –   71% visit the site at least monthly
   –   89% had not seen the wireframes during the conference


                                                               13
Findings from V2 (second survey)(1 of 2)
• Fresh Perspective
   – Majority of respondents to the second survey (89%) had not seen the
     first version of the wireframes
• Overall response to V2 was very positive
   – Clean layout
   – Easy navigation
   – Easy access to divisions
• We asked their assessment of five measures:
   –   Organization and layout
   –   Ease of navigation
   –   Amount of content per page
   –   Labels used in left navigation
   –   Labels used under ALA logo
• Respondents saw the changes as improvements (next slide)
                                                                       14
Findings from V2 (second survey)(2 of 2)
We conducted two comparisons (ANOVAs) of survey
responses:
  – First-time viewers of each version
     • Ratings of V1 on first survey
     • Ratings of V2 by people who had not seen V1
     • V2 received significantly better scores on all five measures
       (p<.001)
  – People who had seen both versions
     • Ratings of V1 on first survey
     • Ratings of V2 by people who had seen V1
     • V2 received significantly better scores on four of the five
       measures (p<.05 on two, p<.01 on two)
V2 was a significant improvement on V1.
                                                                      15
Opinions after Initial Viewing

• 157 people rated V1 on the five measures, during
  Annual Conference
• 1298 who had not seen V1 rated V2 on the five
  measures, in the second survey
• The following table presents the responses of these
  groups
Results of Initial Viewing (V1/V2)
                                 Poor   Fair    Not Sure   Good    V. Good   Avg.   Sig.
                                  (1)   (2)       (3)       (4)       (5)

Organization and layout (V1)     3.2%   8.4%     8.4%      61%     18.8%     3.84
                                                                                    <.001
                         (V2)    1.3%   5.7%     5.2%      51.1%   36.7%     4.00

      Ease of navigation (V1)    1.9%   8.9%     12.1%     61.8%   15.3%     3.80
                                                                                    <.001
                         (V2)    1.1%   3.2%     12.8%     47.8%   35.2%     4.02
Amount of content per page
                First impressions after update
                        5.9%
                       (V1)  17.1% 21.1% 42.8% 13.2%                         3.40
                                                                                    <.001
                         (V2)    3.4%   8.8%     17.3%     48.4%   22.1%     3.77
Labels used in left navigation   2.6%   9.1%     16.2%     62.3%    9.7%
                          (V1)                                               3.68
                                                                                    <.001
                         (V2)    1.5%   5.6%     8.5%      56%     28.4%     3.90
 Labels used under ALA logo      6.4%   14.1%    17.9%     44.9%   16.7%
                       (V1)                                                  3.51
                                                                                    <.001
                         (V2)    2%     7.8%     13.3%     49.3%   27.7%     3.85
Respondents’ Assessments of Changes

• 180 of the respondents to the second survey said
  they had previously seen V1 of the wireframes
• The following table presents the initial ratings of V1
  against the later ratings of V2 by people who had
  seen both versions
• We have no way of knowing exactly how many of
  these responses to the second survey were from
  people who had responded to the first survey, but
  we think it’s a large majority
Respondents’ Assessments of Changes
                                  Poor   Fair    Not Sure   Good    V. Good   Avg.   Sig.
                                   (1)   (2)       (3)       (4)       (5)

 Organization and layout (V1)     3.2%   8.4%     8.4%      61%     18.8%     3.84
                                                                                     n.s.
                          (V2)    2.2%   9.4%     6.1%      50.6%   31.7%     4.16

            Ease of navigation    1.9%   8.9%     12.1%     61.8%   15.3%     3.80
                                                                                     <.05
                          (V2)    2.2%   5.6%     10.1%     52%     30.2%     4.13

 Amount of content per page       5.9%   17.1%    21.1%     42.8%   13.2%     3.40
                                                                                     <.01
                          (V2)    4%     9.7%     15.3%     47.7%   23.3%     3.77

 Labels used in left navigation   2.6%   9.1%     16.2%     62.3%    9.7%     3.68
                                                                                     <.05
                          (V2)    2.8%   10.6%    7.2%      52.8%   26.7%     4.04

  Labels used under ALA logo      6.4%   14.1%    17.9%     44.9%   16.7%     3.51
                                                                                     <.01
                          (V2)    3.9%   10.7%    6.7%      53.9%   24.7%     3.93
Unclear Terms from second survey
Do the wireframes contain any unclear terms?
        Yes: 122
        No: 1354

Top terms that were unclear:
   •   “Advocacy & Awareness” vs. “Issues & Legislation”
   •   “Professional Resources”
   •   “The Voice of America’s Libraries…”
   •   “ReadWriteConnect”
   •   “giveALA”
   •   “Book Lists”
   •   “ILoveLibraries”
   •   “Awards” (without “ALA” caused confusion)
Next Steps

• Develop graphic design concepts
• Evaluate concepts
• Refine and narrow concepts to produce final graphic
  design
Develop Graphic Design concepts

  Work with Graphic Designer to develop four graphic
  design concepts presented with four sample pages
  each:
   –   Home page
   –   2nd-level landing page (e.g., News)
   –   3rd-level content page (e.g., list of press releases)
   –   4th-level content page (e.g., press release)
Focus Groups

• Two focus groups to gauge user perception to the
  graphic design concepts
   – Two user groups (frequent/infrequent ALA site users with a
     mix of other demographics)
   – 90 minutes each
   – 8-10 users
• One concept will be selected for refinement and
  development into the draft graphic design
Collect feedback at Midwinter Meeting

• Use the same process used at Conference to present
  draft design and gather feedback
• Display draft graphic design at kiosks
• Make draft design available on Web
• Collect feedback through an online survey
• Survey results will help us finalize the graphic design
Planned Progress for Midwinter Meeting

  Complete content inventory for entire site (done)
◊ Design information architecture (in process)
    – Gather user data on category names
    – Gather user data on category contents
• Develop four graphic design concepts
• Review concepts with ALA and refine
• Conduct focus groups to assess concepts
• Select a graphic design concept and refine it, and display it at
  Midwinter Meeting as the draft design
• Collect member feedback during Midwinter Meeting

								
To top