User Interface Design Pattern Library Project


Home

Work Distribution

Assignment 1
Proposal

Assignment 2
Revised Problem Statement
Persona Explanation
Personas and Goals
Task Analysis
Appendices


Assignment 3
Scenarios
Persona Revisions
Task Revisions
Comparative Analysis
Initial Design Ideas

Assignment 4
Prototype
Write-up
Appendices

Assignment 5
Write-up
Interactive Prototype
Presentation (ppt)

Assignment 6
Heuristic Evaluation for UC HIPO

Assignment 7
Write-up
2nd Interactive Prototype
Appendix

Assignment 8
Write-up
Appendix

Assignment 9
Write-up
Presentation (ppt)
Final Interactive Prototype

Appendix - Card Sorting with MindCanvas

Summary Findings

  • Card sorting supported three of our categories: navigation, forms, search.
  • Some items were more difficult to classify and users did not consistently group them together or name them.
  • Card sorting supported the use of synonyms for pattern names.

Methodology
To better understand how our primary users conceptualize patterns, we conducted card-sorting exercises with five users on Wednesday, March 29, 2006. We chose to conduct the exercises individually and not in groups because we had a test of two parts. One part of the test was a physical sort of image representations of web patterns and the other part was the use of an online tool, MindCanvas, to sort textual cards of pattern descriptions. Our ideal test would have combined both the description and images in MindCanvas, but because of the limitation of MindCanvas's support for image sizes, we chose to have our users do two exercises. We also wanted to elicit feedback directly from each user about their terms for referring to and organizing patterns. To ward against potential learning effects caused by the order of exercises, we alternated which test was taken first from participant to participant. 

Participants
We intended to test five of our primary users (Swiss-army). Due to scheduling and availability issues, we tested one graphic designer and four Swiss-army types.  Each subject signed both a release form and a consent form.

Test Design

Web-based card sorting using MindCanvas: Each subject was asked to organize 18 cards, each containing a pattern name and pattern problem description into different categorical groupings.  After grouping the cards, they were asked to name the groupings.

Image card sorting: We collected 18 screen shot representation of patterns from the web.  These images were printed on a sheet of paper along with a pattern problem statement.  For instance, for the breadcrumb image, we included the statement "The user needs to..."   We asked each subject to group the images and to talk aloud about what they were doing, what they called the image, and to name the group.
Images used in card sort (.zip)

Example Card: Breadcrumbs


Detailed Results & Analysis

MindCanvas Card Sort
The following results were provided to us from MindCanvas. We found the dendogram to be most useful.

Dendogram Details
The dendogram allows us to cluster the results from our exercise.  When selecting 5 clusters in the dendogram -- this clustering matches the number of our existing top-level categories -- we found the below 5 groupings. These groupings are for the most part very straightforward:  navigational treatments are grouped (G5), search and search result patterns are grouped (G4), and form elements are grouped (G1).  Additionally, calendar and student account management also deal with personalization features of an application and are grouped (G3).  However, in Group 2 it is hard to see the conceptual grouping between auto-complete and process funnel.  One pattern combines search and dynamic results into the same form element (auto-complete) and the other is dealing with multi-step tasks (Process funnel).  This incongruence could possibility either be because of poor pattern description of the pattern or poor naming of the pattern itself.

Group 1
Register
Sign-in
Forms
Action-buttons

Group 2
Auto-Complete
Process funnel

Group 3
Calendar
Student Acct Mgmt

Group 4
Pagination
Simple Search
Search Results

Group 5
Main Navigation
Navigation Tabs
Directory Navigation
Fly-out Menu
Breadcrumbs
Site Index
Utility Navigation
Sidebar of Related Content

Image Card-Sort

Four subjects agreed on the following conceptual categories and their terms.
Navigation
Fly-out
Horizontal Navigation
Vertical Navigation
Navigation Tabs
Inverted L Navigation
Utility Navigation
Form
Action Buttons
Register
Sign-in
Form

Search
Simple Search

Calendar
Calendar


Three subjects agreed on the following conceptual categories and their terms.

Account Management
Account Management

Two subjects agreed on the following conceptual categories and their terms.

Navigation
Breadcrumbs
Directory Navigation

No agreement among subjects on these cards.

Auto-complete
Pagination
Site Index
Process Train
Student Profile
Sidebar of Related Content

Card-sort Details

In the card sort, groupings were shared in navigation, forms, and search. Interestingly these areas of agreement correspond to the MindCanvas test as well as our own categorical buckets. The other clear result from the is that there was no agreement on six patterns. Additionally, while talking out loud about categorizing these patterns, subjects used alternate terms to identify these pattern. This disparity in pattern names helped support our decision to integrate synonyms into our application.