Assignment 8: Interactive Prototype #2

Group 2 (Suffragists Speak):
Rosalie Lack
Joanne Miller
Sally Thomas

April 20, 1999


 


UI Redesign Overview


In response to the heuristic evaluation, the Suffragists Speak group focused on changes to the timeline, the Dynaweb interface, the left frame, and the search page. We have also tried to facilitate browsing of the site by changing the home page to highlight introductory options such as “Meet the Suffragists”, the guide to the site, and “Introduction to the Era.”

We consolidated the two timelines (world events and suffragists) into one timeline that incorporates the suffragist information into the world events timeline. While this reduced the amount of information provided about the suffragist movement, it is more informative for users to see suffragist events paralleling world events. If users want more information on the chronology of the suffragist movement, they can click on a link to see more detailed information. We also added links to previous and next years at the bottom of the timeline, as suggested by the heuristic evaluators. (See screen shots of the new timeline.)

Our solution to the problematic Dynaweb/SGML interface is to address the issue from a couple of different angles. As a pure interface problem, we are cleaning up the Dynaweb pages by copying the source code of the Dynaweb pages and saving them locally as HTML. The pages look clean, but we lose the ability to perform searches on them. (Searches done with the Dynaweb search engine will continue to search across the SGML documents.) The second tack that we are taking is to work with the Bancroft Library to alter the Dynaweb frame, at least on a temporary basis, to show only three buttons and to include descriptions for each of the buttons. (See a screen shot of the new Dynaweb frame.)

The left frame has proven to be more difficult to design than we anticipated. We took several links off of the frame so that all of the links would fit on one screen without making users scroll down to see all of the options. We changed the visited link color to be the same as the unvisited link color (white), but then realized that white would not show up with the yellow highlighting that we’ve used to show which page is currently being viewed. We either have to use a lighter purple background and a dark color font, or a darker “highlighting” color that can be used over the white font.

To improve the usability of the search page, we added brief “search tips” next to the full feature search. These tips explain how to use the search functions, and provide links to longer explanations below. The search tips should be enough information for users to perform a search, but if they want to know more about searching using SGML or Dynaweb, they can read on for more information. (See the new search page.)
 
 

Heuristic Evaluation (Arranged by Issue)

 

Timeline


1.  [H2 match between system and the real world] (Severity 3)
The popup window for a given year on the suffragist’s timeline provides no navigation to the previous or subsequent years.  It is natural for users to read the summaries for one year and then adjacent years to get a sense of the chronology.  Instead, they must return to the main page to select another year.

We added links to the previous and next year at the bottom of the timeline pop-up box.

2.  [H1 visibility of system status] (Severity 1)
The popup year summary window has no label, besides that on the Netscape title bar, indicating that the contents are a summary of suffragists’ activity in that year. Only the year is given at the top of the page.

The year is provided at the top of each page, but we added a descriptive title so users know exactly what they are looking at. The subject matter is indicated in at the top of each column.

3.  [H2 match between system and the real world] (Severity 2)
There is no way for users to view summaries of suffragists’ activities alongside the other events during the same year.  Separating other events from relevant suffragist events hinders the user’s ability to explore the simultaneous developments which influenced the suffragists during each year.

We integrated some of the suffragist information into the World timeline, which should give users a better perspective. For more detailed information, we provided a link in the timeline to a more extensive suffragist chronology.
 

Dynaweb

4.  [H2 match between system and the real world] (Severity 3)
The icons shown in the gray area of the search pages and their respective labels are not intuitive to the user. The labels do not make it much easier for users to understand the buttons’ functionality either. The help icon refers only to the icon bar and not to the search itself.

We recognize that the buttons are very unintuitive. We are in the process of making as many  modifications as the Bancroft will allow us to do. We deleted most of the buttons and added text to the few that were left in order to clarify their function. We chose to keep the “expand list” and “collapse list” buttons and the “view collection” button (however, view collection does not go to our collection but rather to the Bancroft collection—again we cannot change this link). We wanted to eliminate the search option from this page but we are not permitted to do so by the Bancroft.

Other Dynaweb issues--the disappearance of the left navigation bar, confusion regarding the location of the search results, and the drastically different interface with multiple frames--are all controlled by the Bancroft Library. Since we cannot make changes directly to the Dynaweb program, the best we can do is to mock up HTML pages that improve the design and suggest ways to solve the problems.

We have added an explanation about Dynaweb and why we are using it to the “about the site” page. We have considered adding warnings at each link to a Dynaweb document, but we realize this is not a good design practice.

The heuristic evaluators noticed that sometimes the Dynaweb tools appear at the bottom of the oral history (in a frame) and sometimes they appear at the top (without a frame). We choose to display the Dynaweb documents with frames for longer documents and without frames for shorter documents. The Dynaweb design automatically puts the tools at the top or bottom, depending on whether a frame is specified. Whole books or manuscripts require a frame with a table of contents to facilitate navigation. One to two page documents do not require a table of contents or left frame to help with navigation, but the buttons appear at the top of the page. We think that the Dynaweb buttons are more confusing than the frame/no frame issue. As noted above, we reduced the number of buttons and added text to the remaining buttons to help clear up this confusion.
 
 

Search Page

5.  [H10 help and documentation] (Severity 3)
There is no help file explaining how to use the search. This creates a usability problem since the user will not be able to find guidance about the different ways of searching the site and the collection, or get specific information about changes in the interface during the search process (i.e. when Dynaweb is used).

We added search tips to the search form (modeled on Suzanne Ginsburg’s search tips). We also added more detailed search tips below the search form, so users can scroll down if they need more help. The tips address the issues raised by the evaluators such as a detailed description of what Dynaweb is and why we chose to use SGML.
 

Left-hand Navigation Frame

6.  [H4 consistency and standards] (Severity 3) 2
Several of the text links on the navigation bar are sometimes white and sometimes blue. There is no change in functionality corresponding with this change in color nor any obvious pattern to the color changes.

and

7.  [H4 consistency and standards] (Severity 3) 3
It is hard to distinguish between link and non-link text in the navigation bar. For example, although the fonts are identical, "introduction" is not a link, but "show timelines" is.

The different colors had indicated viewed and unviewed links, but we agree that there were too many colors on the left frame. We changed the left-hand frame fonts to be more indicative of a hierarchy and the different contents. The two headings, which are not linked, are now in the same font (and different from the fonts of the linked items). In addition, we took some items off of the left-hand frame so that it would be shorter and users would be able to view the entire contents without scrolling. (We moved the Introduction materials to the home page and we combined the Secondary Sources under one label.)

We had removed underlines from links (a standard indication of a link on the Web) to simplify the design, but this might prove confusing. Right now, a couple of the categories contain no content, so users might be confused when they attempt to click on an item and realize that it is not a link. One way to solve this until we have more content is to put brackets around the word.
 

Browse Functionality

8.  [H7 flexibility and efficiency / H2 system and real world] (Severity 3) 2
In scenario three the user wants to browse subject categories. I could not find this option from the main page. After looking at the screen shots I found the browse option on the search form. “Browse” gives the impression of a category structure, which the list of keywords (mostly names) really is not.

We felt that the user would only want to browse a list of terms when they were ready to do a search for a specific item so we have left the “browse terms” link on the search page. By adding the search tips explanation of what “browse terms” means, we hope we have cleared up any confusion as to what the user will be getting when they click on the link.

However, several users have mentioned a need for an immediate introduction or explanation of the contents of the site. While these were available (in limited form) from the left frame, users either did not know what the titles meant, or did not think to click on them. We moved the links to introductory material to the home page, and added brief explanations of what each selection would provide.
 

Team Contributions

All team members contributed ideas, worked on the redesign of the site, and contributed to this report.
 

Running the Interface

The site contains text documents (books, transcriptions of oral histories, correspondence, periodicals, and a bibliography) and multimedia items (photographs, ephemera, and audio clips of songs and interviews). The text documents are encoded with SGML. In order to view them in HTML they are interpreted into HTML on-the-fly with a browser called Dynaweb. The multimedia items are not SGML-encoded so they are displayed directly in HTML documents.

When you click on a link to view the text documents or when you view the search results you will be in Dynaweb. We recognize that the Dynaweb interface may be disorienting. We cannot make any changes to the Dynaweb interface because it is on the Sunsite server, but we would like to get your feedback on what changes you would like to see made. For this project, we will take your feedback and mock up the proposed alterations in HTML.

Password

You will need to enter a password to access some of the documents. When prompted, the user ID is: teitest, the password is: sgml.

Search

Currently if you find a term you would like to search on in the “Browse terms” list you can copy it, go back to the search page, and paste it into the “Search for” box. Ideally we would like to allow the user to click on the term and automatically send it back to the “Search for” box on the search page.

Since the text is SGML-encoded, the “Limit to” category helps to further refine your search, when you choose one of the limits the search engine searches over the specific SGML tag.

Under development

The slideshow, diaries, and newsreels are still under development.