Our first wireframe test was a test of the new website homepage. This wireframe was a 'first draft', and we will make modifications to it based on each test we conduct. You can see the larger version of each wireframe by clicking on the image.
Overall our testers did very well and provided excellent feedback. One of the limitations of the OptimalSort wireframe test environment is the static nature of the wireframe. Our new website will be responsive, so this wireframe was really a test of a larger screen size layout.
We presented three scenarios to the testers:
- You just finished a book and are ready for another e-book. Where would you go to browse the library's e-book collection?
- You would like to renew items on your account. Find where you would sign in to your library account.
- Your friend is looking for a job. Check to see if there are job openings at the library.
The first scenario, browsing e-books, had the highest variety of answers. As you can see in the heatmap below, 64% of testers chose Books & Magazines, 19% chose catalog, 9% chose to use the search bar, 2% chose to view all of the New & Popular lists. The remaining six percent chose a variety of avenues.
Overall, 94% of respondents chose options that would lead them, either directly or nearly directly, to the library's e-book collection. In one of our first surveys, we asked testers about their navigation habits - searching versus browsing - and found a majority use both methods, but some users go straight to search (25%). In the responses to the wireframe task, some testers chose to search for e-books, heading straight for the search bar or the catalog (28%), and others chose to browse by clicking Books & Magazines or the New & Popular lists.
In our second scenario, we wanted to be sure users would be able to easily find the place where they could log in to their library account. We chose the position of the "My Account" link based on current usability conventions. Internet users today are trained to look for this type of link in the top right corner by most websites (Facebook, Goolge, Amazon, etc.). As illustrated in the heatmap below, all of our users looked in the top right corner region, and 96% clicked the My Account button directly, making this scenario the one with the most consensus.
In our third scenario, we tested an item that was in the footer of the wireframe - Jobs. The original label for this link was based on labeling surveys we conducted, as well as our search statistics. We found that most Google searchers looking for the OCLS jobs page use the word "Jobs" as opposed to "Careers" or "Employment." The position of the Jobs link was based on the results of our card sorting tests. Ninety-three percent of our testers chose Jobs in the footer, 3% chose Contact, and the remaining 4% chose a mix of places on the page.
We also asked the testers three questions once they completed
If you could move one item on this page, what would you move, and where?
What would you change?
What features are missing?
Please share any additional feedback you have.
Based on the responses to these questions, we made revisions to our wireframe, including the following:
- Swapping Kids, Tweens, and Teens with Using the Library.
- More focus on the New & Popular Releases lists - This section includes our lists of titles such as New York Times bestsellers and new DVDs. We expanded this section based on feedback that many testers' primary interest when visiting the site was browsing titles.
- Removal of the Today's Classes & Events section - many commented that this section seemed to add clutter, had little utility, and was redundant with the Classes & Events section available from the main navigation.
- Addition of the Library News section - This section that will incorporate blog posts from our various blogs as well as articles created by the library. Placing it below the New and Popular Releases coincides with our testers' comments about prioritizing the New Releases.
- Addition of a feed of our Twitter accounts based on comments about more incorporation of our social media.
- Reducing white space in the footer.
- Stylistic changes of the footer to better communicate the organization of the items.
- Addition of contact info under Contact Us for more immediate access.
- Moving Finance link into the About section.
Our second wireframe test will be based on the updated wireframe; we will share the results and the wireframe once the test is concluded.