Assignment 1
Assignment 2
Assignment 3
Assignment 5
Assignment 6
Assignment 7
Assignment 8
Assignment 9
Design Revisions
For our first interactive design, we sought to support the three scenarios developed in Assignment 3 and the task scenarios we tested with a lo-fi prototype in Assignment 4.
Based on lo-fidelity paper prototypes, we supported six main tasks.
- Find a navigation pattern that would help clarify the existing navigation.
- There are user comments on this page. Where are they located?
- How would you add a comment to this pattern?
- Where would you find some sample code for this pattern?
- Go to another navigation pattern that might also provide a solution.
- How would you get back to the home page?
We also asked users in an exit survey to label and identify example patterns by a generic name. As a result of this survey and user testing, we made significant changes to the home page and structure of the site. Major changes to the site include:
Feature Boxes: The Lo-fi home page contained one feature box and example pattern image for each category. It was intended to represent the entire category. Instead, the images proved distracting to the visual flow and users interpreted them as the only item in the category. Some participants also took the example too literally rather than as merely one instance of how the pattern might be implemented. After our paper prototype testing, we sought to improve the scannability of feature boxes on our home page through different graphic treatments of the feature box. Below are images of some of these attempts to solve the problem:
These design treatments still did not alleviate the main problem that our users articulated; mainly the featured box with bulleted patterns confused and cluttered the main content area of the home page.
In the end we realized that the purpose of the example patterns was largely just to give users unfamiliar with patterns a quick and visual idea of what they are. With this in mind our latest design offers two example patterns on the homepage without associating them with the site navigation or categories. With each of these example patterns we include two images of instances of the pattern to make it clear that there's more than one way to implement a pattern.
Navigation: In our previous prototype, we tested two layouts, one with horizontal navigation and one with vertical navigation. User tests did not definitively suggest one approach over the other, but we were initially leaning toward a horizontal nav with category names and drop downs with links to each pattern. Once we decided to remove the featured pattern examples from each category on the home page, it became obvious that the home page worked better when all the categories and patterns were grouped together in a vertical side nav. For consistency, we decided to use this navigation throughout the application. In addition, this navigation offers the advantage of displaying all patterns in the library at once. This navigation is globally available to minimize clicks when browsing the library.
Two Approaches to Browsing: Our users expressed two different mental models when approaching a design problem. Sometimes a user had a specific pattern in mind already and knew it by name. At other times, the user had a general design problem and wanted to seek out a number of patterns for comparison. We address this problem on the homepage by providing user tested names in the navigation and by providing sample problem statements in the main content area on the homepage. Problem statements help users understand what patterns are used for.
Design Elements We Didn't Have Time to Finish: We're still trying to figure out the best graphic treatment for the "Common Problems that Patterns Can Solve" area on the home page. We're hoping to learn in the next rounds whether this type of interaction works and how it might be made more effective. We're also having trouble figuring out how to organize the user comment information on the right side navigation on each pattern page. We want to bring up the most recent comments into the sidebar, but also want to help users find comments with code, or at least highlight that comments can contain code. Here's an image showing one attempt to solve this problem:
Prototype Overview
The first interactive prototype consisted of supporting 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 first page that users see upon entering the site. They can quickly see what patterns are available on the left-hand navigation that is persistent throughout the entire site as well as get a quick overview of featured patterns and design problems that users may encounter. Users can also see recently contributed comments on patterns to get an idea of recent conversations that have been taking place.
Category Page
While users can get a quick preview of patterns via the left-hand navigation, we found that a comparative overview of related patterns was useful in our user testing. As such, this page allows users to look over patterns in a given category and decide where to go next.
Pattern Page
Finally, the pattern page provides a standard layout to describe the design problem, examples, and solutions. It is on this page that users are allowed a little more interactivity and can make comments regarding the pattern. In addition, users can flag their comment to indicate whether or not it contains code.
What did we leave out?
For the scope of our project, we intend on supporting additional functionality that would enable users to contribute patterns to the existing collection. However, given the scope of what could be accomplished in time as well as overcoming technical hurdles, we are relegating those tasks to another iteration of the project. What we eventually intend to support includes:
- adding a new pattern
- editing a pattern
- login - authorization/authentication of users
- rss feeds
Technologies Used
Since the collection needs to be accessible to the entire campus community, making the patterns library a web application was obvious. In addition, all of our team members are familiar with HTML and contributed to making changes and recommendations to the overall implementation.
For the dynamic/interactive portions of the site such as commenting and displaying patterns, we initially decided to use JSP and Berkeley DB XML. We planned to use XML to encode the patterns and store them in a native XML database and use JSP as the front end mechanism.
However, for the purposes of completing this assignment as well as the ability to quickly iterate on the implementation, the aforementioned technologies proved to be challenging and hard to work with. Instead, we shifted gears and decided to store the patterns in a MySQL database and use PHP to present the information. Developers in our group are more familiar with PHP/MySQL and experienced minimal difficulties.
Finally, we also added an additional element of interactivity with the use of Asynchronous Javascript and XML (AJAX) to create the tooltip mouseovers on the left-hand navigation that queries another server page to get back an example image and information regarding a pattern.
>Screenshots of Prototype and Task Scenario
Description of Running Interface and Scenarios
Access our interactive prototype and perform the below tasks based on the task scenario. This must be run in Firefox on a PC, and we recommend 1024x768 screen resolution.
Task Scenario
Your next project on campus is to redesign the navigation on a campus site. The navigation is a problem because it is not organized in a way that is easy to understand, specifically there is no hierarchy. It has 7 main top-level navigational categories and 5 sub-level categories. Additionally, other content areas are not represented in the navigation schema. You will look at our pattern library to find a navigation pattern to help solve this problem. Please use our UI design pattern library to assist you in this effort.
Tasks
- Find a navigation pattern that would help clarify the existing navigation.
- There are user comments on this page. Where are they located?
- How would you add a comment to this pattern?
- Where would you find some sample code for this pattern?
- Go to another navigation pattern that might also provide a solution.
- How would you get back to the home page?