Design Evolution
Interface Changes
The Layout and Side Nav
A major change between our paper prototype and all subsequent prototypes was the overall layout of the site. We went from a classic "L" shape, with a top banner and a side nav bar, to just having a side nav bar. We placed a logo at the top of the side nav, and we added the calendar to the side nav bar. Removing the header eliminated a lot of wasted space, and adding the calendar made use of unused space.
|
|
The Home Page
We worked through several drafts of the home page, though the structure of it changed little. Changes were mostly focused on how to clearly group information, whether than what information is grouped. The design of the home page was settled on by the second interactive prototype.
|
|
Syllabus Set Up
The syllabus set up pages went through the most drastic transformations. We orginally had four single pages for entering all of the information, however there was little to connect the four pages in a workflow. For the first interactive prototype the pages became part of a wizard. This metaphor was reinforced by using a page counter across the tops of the pages. We continued to refine the fields within the forms. Between the first and second interactive prototypes we changed the second and third pages, moving some fields to the other page and changing the title of the third page from "More Course Information" to "Class Information". We also added page labels below the page counter. We eventually eliminated the questions related to setting up topics between the second and the third prototypes.
|
|
Transition from Wizard to Syllabus
The transition from the set up wizard to the syllabus editing pages proved to be problematic in each prototype. For the paper prototype, we took the user directly to the Schedule page. This proved to be an unsuccessful solution. We then tried incorporating a confirmation message into the tabbed pages (see below), so that users would see the confirmation and would be told to use one of the tabs to start editing. This also proved to be unsuccessful. We finally incorporated a fifth page in the set up wizard that displays a confirmation message, and then allows the user to choose where they want to continue to.
|
|
The Tabbed Pages
On the paper prototype, users were supposed to use links in the side nav to navigate between three different sections of the syllabus, the Schedule, Administrivia and Assignments & Exams pages. However, this failed miserably, and we moved to using tabs across the top of the pages to allow users to move between the pages for the first interactive prototype. There was also a tab that allowed the user to view a preview of the syllabus as it would look in SylViA. This was a more successful solution, and we kept it for all subsequent prototypes. After the pilot study with the second interactive prototype we realized that the Preview tab did not match the other tabs. We instead made it a button in the upper right hand of the screen and split the assignments and exams tab into two.
|
|
Topic Set Up
Setting up topics proved to be another very problematic feature of our interface. Topics allow users to group classes into subject areas within a course. However, this concept was very difficult to explain within the context of the course set up wizard, where the topic questions were originally placed. We tried several times to reword the questions about topics, but users continued to not understand what topics were or why they should care. After the second prototype, we decided that the topic questions should not be a part of the course set up wizard, since topics deal specificly with the schedule and the wizard dealt with the course more generally. We have created second wizard that the user must go through the first time they try to access the Schedule page.
|
|
The Preview Option
The preview option was always a part of our prototype, but it was not implemented until the third prototype. However, several changes were made to how it could be accessed. Originally, it was linked to in the side nav bar. Then it was part of the tabbed pages. Finally we decided to place the link to the preview in the upper right hand corner. The actually preview itself is based on the SylViA viewer, though the colors are match the scheme used for the My SylViA editor.
|
|
The Finish Process
The evolution of the process for finishing editing a syllabus proved that our first design was the best. We originally designed the process so that the user would click a link that would take the user to a page where she could choose between saving her changes in draft form, or publishing them to the viewer. In an effort to reduce the number of steps, we instead designed buttons that let the user make the choice from the tabbed pages. This turned out to be confusing the pilot usability testers, and we returned to our original design.
|
|
Evaluation Techniques
The most important evaluation technique was usability testing with real users. Lisa and Sarai found it very useful to start with the the low-fi paper prototype. Many concerns that were raised in that testing turned out to be important issues that were raised again and again in subsequent testing. Because these issues, such as the transition from the wizard to the tabbed pages, were found so early in the process we were able to try several solutions. Also, users tended to be freer with their criticisms when presented with a paper prototype. Carolyn would have prefered to start with an interactive prototype. She felt that it took quite a lot of time and effort to produce the low-fi version. And while writing HTML from the beginning might have taken as much or more time as the paper, at least we would have then had a base of code to work with going forward. Eventually, you're going to have to write the HTML and putting it off until the second version and adding the overhead of a paper version just creates more work.