Low-fi Prototyping and Usability Testing

Suffragists Speak Group
March 11, 1999

 

 

 

 

 

 



Introduction

  • "Suffragists Speak" is a web-based multimedia thematic archive containing primary and secondary documents related to the American Suffragist movement, concentrating on the period 1910-1920. The site revolves around a set of oral history manuscripts that the Regional Oral History Office of the Bancroft Library conducted from the late 1950s through 1970s. Our goal was to provide supplementary historical materials that would make it easier to use and understand the oral histories, suitable for a broad audience of researchers and educators, from high school through university level.
  • We wanted to see how users would respond to two different interfaces drawing on the same content. The first interface relies on a left-margin frame and a top frame that stays with the user at all times. The left-margin frame displays the various types of content available for viewing (introductory materials, primary documents, and secondary documents) as well access to a search engine. The top frame contains two timelines that provide contextual information meant to assist the user while reading and making sense of any of the historical documents. The second interface consists of a top frame only, with the same timelines, and a pull-down menu that provides access to all different document types that the first interface provided on the left frame. The goal was to see if we could avoid using a left frame, because in several instances the user will call up a document that is frame-based, which means that the user will see a frame containing another frame. The goal of the experiment was to see how users responded to the two different interfaces, and to see if they had a preference for one of the interfaces. We gave each participant the same mission to solve with the two interfaces. We observed if their navigation changed depending on which interface they used. We asked the participants to "think aloud" so we would understand to our best ability what they thought of each interface.

Prototype

Interface #1 displays all of the links on a left-hand frame. Interface #2 displays links along a top frame using drop-down menus that are revealed on mouse-overs. 

Both interfaces have a top frame that displays two timelines. The world timeline is in red and the suffragist chronology is in blue.

We sketched most pages of the interface, but we printed the content from our already existing Web site onto paper so that we could test the interfaces using real content. We wanted the testers to be presented with actual content when they "clicked" on a link
 

General Navigation

Interface #1

View Interface #1 "In Action"

Interface #2

View Interface #2 "In Action"
The left-hand frame is the main navigation bar. A box highlighting the name of the current page helps the users understand their current location. The timelines are in the top frame.  On the home page the link options of Search, Introduction, Primary Sources and Secondary Sources are in the top bar. Introduction, Primary Sources and Secondary sources are all pull-down menus. Below the top bar are the two timelines. 
Home page

Interface 1 - Home Page

Home page

Interface 2 - Home Page


Periodicals Page
The Periodicals page is brought up in the body of the page. The left-hand frame changes to reflect the fact that the user is now in the Periodicals page and links to different ways the periodicals can be sorted is shown to the user (sorted by suffragists, by subject, or by date). 

Interface 1 - Periodicals page

 

Primary Sources: Pull-down menu 
The user can choose from one of the pull-down menus, for example periodicals from Primary Sources.



Periodicals Page 
If the user chose Periodicals from the Primary Sources menu, then the Periodicals page would come in as the body of the page. At this point the timeline and the navigation bar switch places, so the timelines are now on the top. Below Primary Sources, the links to different ways that the periodicals can be sorted are shown to the user (sorted by suffragists, by subject, or by date). Note: the option to view the full Primary Sources pull menu is still available when the "sort by" options are displayed. 

Interface 2 - Periodicals Page

Dynaweb Interface Integration

The primary reason that we wanted to test out an interface without the left-hand frame was because of the Dynaweb interface, which is in a left/right frame format (the left-hand frame contains the table of contents for the document that is in the right hand frame). Note: the user only gets the Dynaweb interface when they go to the actual document (eg: an oral history). 
Interface #1 Interface #2
When the user is in Dynaweb they get a frame within a frame (for example here the user is in the transcription of the Alice Paul interview).

Interface 1 - Dynaweb

The navigation bar at the top alleviates the frame within a frame problem in Interface #1 (but causes other problems, see Results section)

Interface 2 - Dynaweb

Search

The search page is the same for both interfaces. There is the option to choose a quick search or a full-feature search. In the full-feature search, the user can enter a search term into the "search for" box. We then offer the options of searching by person, place, organization, or subject. Since the text is encoded in SGML, when users choose one of the options they are then searching across the SGML tags, not just performing a keyword search. The "browse" pull down menu allows users to browse the person, place, organization, or subject lists in order to get an idea of what is available or to help recall a name. "Limit by collection" is also a pull down menu option, with "all" being the default. Finally, the user can choose to search on a phrase, key words or to use Dynaweb SGML language. 
Interface #1 Interface #2
Interface 1 - Search Interface 2 - Search

Search Results

A search of the documents is done in Dynaweb, so the results come up in Dynaweb. For both interfaces, here are the results of a search across all the New York World periodicals for the name Alice Paul. 
Interface #1 Interface #2
Interface 1 - Search Results Interface 2 - Search Results

Browse page

The browse page lists persons, places, organizations, or subjects that the user can search on. When users find the term that they want, they can "click" on it and it will appear in the "search for:" box of the Search page. 
Interface #1 Interface #2
Browse on Places:

Interface 1 - Browse

Browse on Places:

Interface 2 - Browse

Timeline

When users "click" on a date on the timeline, a pop-up window appears on top of whatever is currently on the screen. This looks the same in both interfaces; here is an example using Interface #2.
Interface 2 - Timeline  

 

Method

Participants

We tested three different participants. The first is a 30-year-old female, an employee of the City of Berkeley, an experienced user of the World Wide Web, and an acquaintance of one of our team members. The second user is a 29-year-old fifth-year graduate student in history at UC Berkeley who is a writing her dissertation on a topic related to the American suffragist movement. She is an experienced user of the WWW, but does not have much experience using online research reference tools like "Suffragists Speak" (primarily because there are not many in existence). She was referred to us by another graduate student in history, and we met for the first time on the day of the test. The third participant is a 28-year-old archivist from the Documents Collection at the College of Environmental Design at UC Berkeley, an acquaintance of all of the team members. She received a master's degree in library science at Simmons College in Massachusetts, and has been working professionally as an archivist for almost two years. She is familiar with the Dynaweb interface and with historical research.

Scenarios and Procedure

We gave the participants the following scenario: Learn all you can about suffragist Alice Paul (for example, you have to give a presentation about her). You also want to find out what else is going on in 1914, one of the years that Alice Paul was active in the suffragist movement.

We also encouraged the participants to browse and explore the site on their own. We requested that they think out loud. The facilitator prompted the user when the tester seemed puzzled, stuck, or quiet.

We tested both interfaces and with each participant we used Interface #2 before Interface #1. We wanted to be consistent in conducting the tests, and to avoid bias in favor of Interface #1.

Test Measures

  • Navigation
  • Ease of Use
  • Integration of SGML/HTML pages
  • Integration of Timeline
We measured the comparable usability of the interfaces. We looked for confusion on the part of the users, and whether they were able to find what they were looking for. We listened to their comments concerning navigation, interface design, and comparison of the two interfaces.

Results

Recurring themes in the interface tests
  • Participants wanted more information about what the content was and where it came from. Particularly within the oral histories, users understood that the left screen was a table of contents, but were still often confused about what the contents meant.
  • Participants did not go directly to the search screen. (In fact, they went to the search screen last, and once there needed some direction as to what to do.)
  • With Interface #2, two out of the three participants did not immediately recognize that they could click on Introduction to get biographies of the suffragists (as discussed below, this is part of the limitations of paper-based testing vs. the Web).
  • When shown Interface #1, participants immediately liked that they were able to see all of the choices at all times.
Some specifics
Interface #2 (we tested the second interface first to avoid bias towards the existing prototype, Interface #1): Two of the three participants seemed to have a difficult time knowing where to start looking for information about a suffragist. Their solution was to look first at the timeline to gather background information (in addition to Alice Paul, they were also supposed to find information about the year 1914). All participants chose Introduction as the first pull-down menu, and all went to Meet the Suffragists (instead of Introduction to the Era) first. All participants also went directly to the oral history from the link on the Meet the Suffragists page biography. (For our prototype, we only printed information about Alice Paul. On the Web, users could scroll down to find information about all of the suffragists.) One participant became extremely focused on the oral history to the extent that she neglected (forgot about?) the pull-down windows in the top frame. All of the participants went to the Primary Sources pull-down window before going to the Secondary Sources. And all went to the Search page last. One participant was confused that a link to Books appeared under Primary Sources and also under Secondary Sources, and one participant questioned books as a primary source (they are written by women suffragists of the time, although not any of the suffragists whose oral histories appear on the site).

Interface #1: Participants did not go through all of the same steps in Interface #1 because they knew what the links would lead to by this time. One participant who had not used the search function in Interface #2 decided (after gentle prompting from the facilitator) to do a search. Like the other two, this participant did not seem to realize that "browse" would bring up an alphabetical list of subjects from the chosen category. The results were somewhat surprising to the participant, since the Dynaweb search engine is very confusing (the results include documents in which the search term does not appear).

Discussion

What we learned
We learned that participants liked the left frame because it provided more information about the contents of the site. Because it was constantly there, it reminded people of resources they may have overlooked on the top-frame interface. However, we are not ready to give up the top frame idea yet because on the Web, unlike the paper prototype, users can easily and quickly see their options by moving the mouse.

We learned that we need better descriptive information and labels. For example, it was not obvious to one participant that "Meet the Suffragists" was going to be biographies of the women. In some cases, we also need better labels to identify the content of the page. For example, the various sorting options (by Suffragist, by Subject, by Date, etc.) can be confusing. Within the Dynaweb oral histories it is not always clear what the user is seeing or what the links lead to.

We found that a potential drawback to Interface #2 is that users may never see the list of all suffragist oral histories (with thumbnail photographs) because they are more likely to link directly to the oral history from the Meet the Suffragists page. (Though each of the suffragist's oral histories is linked from the Meet the Suffragists page, so this is not a disaster.)

What the evaluation could not tell us
Since we were not able to show all of the pages from the site, the gaps in content led to some confusion for the participant. We were surprised that all of the participants really took the time to read the content that we did provide from the site. More actual content would have provided more context for the site as a whole. We did not include any actual text on the Home page of the low-fi prototype, which may have given participants an alternate starting point, particularly from Interface #2 where they seemed to have some confusion about where to begin.

Low-fi interfaces could not accurately convey the potential difficulty of the multiple frames (what we see as the main problem with interface #1). The menu options of interface #2 were not as evident as they would be on the Web with a tester using a mouse.

We were not able to simulate the interactiveness of the timeline pop-up window. On the screen, users can move, minimize or close the window, but on this is not possible paper.

Finally, it was difficult to judge what type of impact the testing order of the two interfaces had on the experience and opinions of the participant. We might have had different responses if we had given the participant Interface #1 before Interface #2.

What we will change
When we started this design procedure, we thought that adding a contextual “world news” timeline and making it and the existing suffragist chronology a more integral part of the site was a crucial change. After completing the tests, we realize that, while the timelines are relevant parts of the site, they might not need to be constantly apparent at the top of the screen. Further (Web-based) testing may disprove this, but our testers did not “jump” to the timeline in the midst of browsing the other material on the site. Rather than changing the placement of the timeline, another option for us is to include reminders and pointers to the timeline within the pages of the site. Our users did appreciate the world timeline, and adding that is certainly a change that we will make to the site.

We will modify and add labels and explanatory text to some of the pages to help clarify and identify the contents.

While the tests seemed to indicate that users preferred the left frame, we want to implement the pull-down window interface on the Web to test in a more realistic setting. As mentioned above, we think that the paper prototype did not sufficiently convey the clunkiness (especially on a small screen) of two left frames next to each other. If users still do not respond to the pull-down windows, then we will continue to work with the left frame.

Appendices