1 / 16

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

IS213 Project Presentation - April 6, 2006 Owen Otto Dave Hong Kelly Snow Tim Dennis. What is a UI Design Pattern?. A pattern is a description of a common UI design problem and good solutions for that problem. What are they good for?. UI design patterns provide: A starting point.

ninap
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.

  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.

  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. 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.

  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

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

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

  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.

  10. Lo-Fi Prototype • Homepage - Horizontal Nav • Homepage - Vertical Nav • Pattern page

  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.

  12. Prototype Demo • Interactive Prototype

  13. Lessons Learned • Provide context, but not too much • 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

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

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

  16. Action ButtonsAuto-completeBreadcrumbs CalendarDirectory NavigationFly-out MenuForm Submission FormsMain NavigationMulti-Step Indicator Navigation TabsPaginationSearch ResultsSidebar of related contentSign-inSimple SearchStudent Info MgmtUtility Navigation 18 Patterns in our Library

More Related