Assignment 1
Assignment 2
Assignment 3
Assignment 5
Assignment 6
Assignment 7
Assignment 8
Assignment 9
Prototype Write Up
Design Changes
As a result of the heuristic evaluation and continued creative problem-solving, we made adjustments to various aspects of the site. Changes include:
Support Problem Solving
We are constantly considering ways in which we might support a user who is unclear about how to solve their problem, or what the possible solutions are.
- One approach is to rename a link in the utility navigation from About Patterns to How to Use Patterns. In the next iteration this will contain a scenario and demonstration of how a user can combine patterns to develop an interface.
- We made some adjustments to text in the "sweetspot" of the homepage. Specifically, the solution addressed in the problem statement is a link to the specific solution.
- Related patterns are available in the right sidebar on each pattern page to help users see alternative or complementary patterns.
Address Terminology Differences Between Users
- The most significant change to our design is the addition of synonyms for each pattern. Based on the lo-fi prototype exit survey, a card sorting exercise (see appendix), and an audit of pattern collections, we developed a set of synonyms for each pattern. These are displayed on the pattern page itself and on a rollover from the main navigation.
- The rollover box on the main navigation previously contained a problem statement and thumbnail image to support browsing and exploration before clicking through. This box now contains synonyms to assist users in finding the right pattern.
User Submitted Comments and Sample Code
- We clarified confusing terminology in the right side bar to simply say "Recent Comments" and "Comments with Code."
- At the bottom of the pattern, we revised the comments form. We improved the design, made terms consistent and more concise and reduced the number of fields to encourage submissions.
Pattern Descriptions & Images
- Previously we used placeholder content and images in our library. This posed issues of inconsistent language and images in use throughout the site. Our content is now closer to final and images are used in a consistent manner across the home page, category page and pattern page
Prototype Overview
The second interactive prototype supported the following tasks:
- finding a navigation pattern
- displaying and reading a pattern
- adding a comment to a pattern
As such, we focused our efforts on the following three pages:
Home Page
This page is the main point of entry for the site. Users can quickly assess available patterns by pattern name on the left-hand vertical navigation. This is the main navigation to the site and is persistent on every page throughout the entire site. When the user mouses over the pattern name a pop up provides a pictorial example and a list of synonyms for the pattern. On the right sidebar, users can browse excerpts from latest comments to specific patterns on our site and get an idea of recent conversations that have taken place. If a comment interests them, they can follow a link to the full comment.
Category Page
While users can get a quick preview of patterns via the left-hand navigation, we found that a visually comparative overview of related patterns was useful in our user testing. As such, this page allows users to look over problem descriptions and representative images for all patterns in a given category and make an informed decision on where to go next.
Pattern Page
Finally, the pattern page provides a standard layout to describe the design problem, use when statements, examples, and solutions. It is on this page that users are allowed a little more interactivity and can make comments regarding the pattern. Users can find recent, bubbled-up, comments on the right sidebar. Notice we also bubble-up comments with code separately, in part to encourage users to contribute code. Users can add comments by filling out the form at the bottom of the page. This form is also accessible by an internal link at the top of the comments section.
Preview of Pilot Study User Test
Based on the last two iterations of our application, we are revising our task scenarios to investigate some of the design changes we have made. We have designed a two part test for our pilot study.
1) The user will be asked to perform a number of tasks on the prototype with the following task scenarios:
- Find a part of the site that explains how to use a pattern.
- Find a page that displays all navigation patterns at once.
- Find the breadcrumb pattern.
- Find a synonym for Breadcrumbs.
- Find the solution section in Breadcrumbs. Describe what is going on in the solution section image.
- Add a comment with sample code to the breadcrumb pattern.
2) The user will be given a visual schematic of a website hierarchy and category names. The user will be asked to review navigation patterns and draw out a navigation solution using the schematic and patterns for reference.
Integration of Heuristic Analysis
We incorporated most changes based on the heuristic analysis done by the UCHIPO team regardless of severity level. We did not incorporate the following five suggestions. We have summarized the violation and our response. (See heuristic analysis for original comments)
Violation 3. Add a reset button on comments form.
We disagree with this recommendation because it does necessarily improve the user experience and may actually increase the risk for user error. We feel it is too easy to accidentally hit a reset button when the user intended to submit instead. The user can navigate away from the form if they don't want to submit an entry, therefore they already have an alternative mechanism to abandoning the form without submitting.
Violation 8. Include some visual indication of your current location in the main navigation.
This recommendation is a low priority for us and we would like to explore this in user testing. We feel there are two other visual cues that let the user know their location on the site: breadcrumbs, page title.
Violation 12. Add "next" and "previous" links on each page of the site.
We feel this recommendation will confuse the user instead of help them navigate through our site. This feature is already supported by browser buttons. Additionally, this element would add visual clutter.
Violation 15. Confusion over the "Problem/Solution" text on the homepage.
Our analysts felt this was dynamic content personalized to the user. This was valuable feedback in that it let us know our content wasn't quite working. We will clarify the text and how the user interacts with it to alleviate this confusion.
Violation 17. Add a Help Link to the utility navigation instead of About Patterns
We find this suggestion does not add to the application. There are two kinds of help this might address. 1) Help with the application; our application should be easy to use that one does not need to reference help. or 2) Help with how to use a pattern. In this case, we are renaming and revising About Patterns to How to Use a Pattern and explore ways to assist new users with implementing patterns.