1. IS213 Project Presentation - April 6, 2006
Owen Otto
Dave Hong
Kelly Snow
Tim Dennis
Web Patterns Project

2. What is a UI Design Pattern?
A pattern is a description of a common UI design problem and good solutions for that problem.
5/15/2019

3. What are they good for? UI design patterns provide: A starting point.
A resource of best practices for non-designers.
A common vocabulary for interdisciplinary teams
Knowledge capture from design experts
Consistent UI across a suite of applications or sites.
5/15/2019

4. UCB Developer Community
Different skill levels and needs.
Little formal UI training.
Function in isolation – lack of idea sharing & community.
With a balkanized administration, top down solutions fail at Berkeley
5/15/2019

5. Project Goals Support community and idea sharing
Improve communication between developers and across campus departments.
Help ensure consistent user experiences
Provide a resource of common design paradigms.
Allow developers to contribute their knowledge.
5/15/2019

6. Our Project
Develop a Collaborative, Community-based Web-based Pattern Library
Developers can add and edit patterns
Developers can comment on patterns
Developers can contribute sample code
Display patterns effectively
5/15/2019

7. Who is our Audience? Identified target users through: Target Audience
Survey – 12% of UCB developers responded.
User interviews – 20 employees
Target Audience
5 main types of users
Primary user, “Swiss Army”
5/15/2019

8. Personas Tammy Jones, Enthusiastic Tech Manager Hans Euler
Swiss Army guy
Albert Tan
Programmer/Hacker
Megan Reed
Graphic Designer
Shannon Evans
Administrative Staff
5/15/2019

9. Scenarios
Hans needs to redesign messy navigation on a campus web site. He seeks a good solution for his navigation problem and sample code.
Tammy has a design problem her team hasn’t dealt with before – they need to display a large amount of text with associated images in a results list.
5/15/2019

10. Lo-Fi Prototype Homepage - Horizontal Nav Homepage - Vertical Nav
Pattern page
5/15/2019

11. Design Changes
Selected Vertical navigation over Horizontal to display all patterns in the library.
Added pattern summary when user mouses over a link to support browsing from the home page.
Significantly revised the homepage layout from a feature box for each pattern category to using the main content area to describe patterns, problems and show one example.
5/15/2019

12. Prototype Demo
Interactive Prototype
5/15/2019

13. Lessons Learned Provide context, but not too much Featured Images
Users need to understand how and why they would use a pattern, but only need to learn that once.
Featured Images
Difficult to represent an entire category with one image, especially with abstract concepts.
Pattern Names & Browsing
Users agreed on some category names (search, navigation) but most others have very little agreement. This is due to different cognitive approaches between and within users.
Vague problem vs. specific UI component
Static vs. dynamic
Function vs. physical description
5/15/2019

14. Naming Problem Example
Right nav, contextual nav, meta nav, sidebar of related information.
Users categorized this as navigation, information display, dynamic.
5/15/2019

15. Lessons Learned Part 2
Technical Challenges – using our ultimate solution proved too much. We used php/mySQL to prototype.
5/15/2019

16. 18 Patterns in our Library
Action Buttons Auto-complete Breadcrumbs Calendar Directory Navigation Fly-out Menu Form Submission Forms Main Navigation Multi-Step Indicator
Navigation Tabs Pagination Search Results Sidebar of related content Sign-in Simple Search Student Info Mgmt Utility Navigation
5/15/2019