Assignment 1
Assignment 2
Assignment 3
Assignment 5
Assignment 6
Assignment 7
Assignment 8
Assignment 9
Prototype
Our prototypes were developed to support the scenarios for Hans, Tammy and Albert. To accomplish this, we started by using pencil and paper to draw screens of our pattern library. It was apparent that our desire to test the content of the patterns in addition to the interaction flow of the system, required laying in actual content and was best accomplished using computer-generated prototypes. Our set of prototypes used in testing was created with Illustrator, printed and taped together. The prototype included three types of screens:a home page, pattern category page, and a pattern page for each pattern in the navigation category. We created two treatments of the main navigation for those pages: a horizontal and a vertical navigation treatment. The horizontal navigation simply displayed the main categories of our pattern types, such as, Navigation, Search, etc. The vertical navigation displayed all patterns in the collection in a two tiered hierarchy -- main categories and all the patterns within them. Since we wanted to test real patterns, we used four navigation patterns adapted from www.welie.com and Yahoo! Design Patterns. We also used thumbnail images taken from existing patterns to test how representative the images were of the pattern. We chose a thumbnail image from real patterns for each of the main categories to display on the homepage layout.
|
Home Page: 
|
|
|
Design Treatment 1 - Horizontal Navigation Main Category Page: 
|
Pattern Breadcrumb: 
|
|
Pattern Directory: 
|
Pattern Double Tab: 
|
|
Pattern Faceted Navigation: 
|
Pattern Navigation Bar: 
|
|
Design Treatment 2 - Vertical Navigation Main Category Page: 
|
Pattern Breadcrumb: 
|
|
Pattern Directory: 
|
Pattern Double Tab: 
|
|
Pattern Faceted Navigation: 
|
Pattern Navigation Bar: 
|