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

Final Project Report

• Problem Statement | Solution Overview
• Final Personae | Final Scenarios
• Application Functionality
• Unimplemented Work
• Prototyping Tools
• Design Evolution
• Best Evaluation Technique
• Work Distribution

Problem statement
Building good user interfaces is no trivial task. Many UCB campus web developers lack time and expertise for UI design or focus too intently on creating a distinctive visual design for specific sites. Budgets do not include allotments for UI designers or usability experts. Even when a web application developer consciously focuses on user interface design, the resulting application can have usability, consistency, and interoperability problems. We propose a web pattern library to support user interface design on campus. 

Solution Overview 
We built a web-based application that provides:

• One-stop shopping for potential design solutions.
• Allow easy browsing through multiple mechanisms including by category, by name, by visual example, and by synonyms. 
• Educate new users about patterns through example and instruction.
• Provides developers with comment functionality to inspire community and collaboration.
• Provide some level of recognition and visibility to developers as they contribute to the library by both up leveling comments on the homepage and pattern pages.

We began with five personae, but narrowed the focus to three. Early in the design process we decided to mainly design for one primary persona, the Swiss Army Knife, because we felt that this type was the most likely to adopt the use of web design patterns. 

Hans Euler
Nickname: The “Swiss Army Knife”, the Jack of All Trades
Technology level: High
Design level:  Medium
Interest in User Interface Design Patterns: High

Hans is a 35-year old Programmer/Analyst IV for the College of Letters & Science. He lives in Alameda with his wife Sue and their two daughters. On the weekends, he enjoys camping with his family, reading history and nonfiction books, and occasionally hanging out with a few old college buddies.

In 1992, Hans graduated from Berkeley with a degree in history, but wasn’t sure exactly what he wanted to do for a career. He was always somewhat interested in programming and had tinkered around with various languages starting with BASIC. When the “dot com” boom came he found his calling and mastered HTML and Java while working at various start ups. After the bubble burst, Hans fell into a job as a Programmer/Analyst III, working on improving a document repository for a research unit on campus. He was then promoted to a Programmer/Analyst IV position in charge of maintaining various web applications as well as managing one other programmer and two part-time tech support persons.

As the lead P/A of his department, Hans has to juggle various duties during the day. He’s often involved in every aspect of the development of an application, from coding to information architecture to creating graphics. While he gets to code a portion of his time, he also has to check on various servers since his other programmer has no system admin experience. Besides several new projects he has in the works, Hans hopes to eventually overhaul the department’s homepage to make it easier for researchers from other institutions find information. The current homepage design was inherited and features awkward navigation and layout. However, the faculty are so accustomed to the current design, Hans can only make small changes to the pages without having to hear an earful from someone.

Hans has an interest in usability, especially due to his experiences with bad design, but no formal training. He wants to learn from other programmers and designers about some layouts that have worked and their processes to arrive at those designs. He thinks that design patterns would provide some best practices and advice in context to what works within the university environment.

Goals

• Learning new professional skills for career advancement and intellectual curiosity.
• Make their job easier by making processes and systems more efficient.
• Produce high quality finished product.
• Wants high level of job satisfaction.

Tammy Jones
Nickname: The Enthusiastic Tech Manager
Technology level: Medium
Design level: Medium
Interest in User Interface Design Patterns: High

Tammy is a 36-year-old Computing Resource Manager. She has worked at various start ups but found herself at the university after the bubble burst. She’s always been an active blogger and interested in the latest trends in web technology. During her off time, she uses meetup.com to organize weekend meetings of Chihuahua owners in the city in Noe Valley.

Tammy tries to stay updated of potential projects on campus. She and her team of programmers had gained some fame from a recent project to improve work flow in the CPHS office using an online application. She introduced some improvements in the development process using RUP. While she has tremendous influence within her department, she sees the inefficiencies across campus in code reuse and sharing of ideas.

Goals:

• Minimize potential complaints in regards to any projects that she endorses.
• Make a good impression on the campus community by creating finished projects that are successful.
• Maintain a team of happy and motivated people to ensure high quality products.
• Provide influence on the overall strategic direction of projects on campus.

 Albert Tan
Nickname: The Data Hacker
Technology level: Very High
Design level: Low
Interest in User Interface Design Patterns: Very Low

Albert is a 30-year-old Programmer/Analyst in the College of Chemistry. He majored in computer science at the University of Illinois and came out to California when his friend told him about a job opening in his department. Albert has just recently past the 5 year mark of working at the university and has now vested with the university savings plan. His office is located in a basement in Barrows Hall with no windows, and pipes running overhead. Outside of work Albert is a member of a chess club and enjoys sci-fi films.

While Albert acknowledges the fragmented bureaucratic nature of the university, he’s also excited by the challenge of getting data from disparate sources and aggregating it. With the lack of a central data warehousing solution on campus, he’s had to forge ahead and create his own data warehouse. Albert is quite proud of his ingenious solution and can’t wait to release his latest creation: a data transaction coordination application with the ability to serve out data to other units on campus via web services.

Albert works with a computing resource specialist who spends her time mocking up web pages. He usually goes to her to have her slap on a quick UI. He’s not too interested in user interface design and feels that he has more important things to tackle.

Goals:

• Spend more time working on technical challenges and novel solutions for them.
• Do as little front end design work as possible.
• Meet his manager’s expectations by delivering work on time.

Hans Euler (Primary Persona)
Most days involve making minor changes and tweaks to various web pages for the College of Letters and Science, but today Hans is hoping to tackle a bigger issue that has plagued the homepage: the navigation. Before Hans came to work for the department, an undergraduate work-study student had setup the department's homepage. From there the site simply grew without much consideration for information architecture. Various faculty and staff added content and links to the pages and no one dared to reorganize the links, especially since most people had grown accustomed to it. Consequently, it has a deep structure, tons of embedded links, and insufficient global navigation.

Last week, the navigation of the site became a real sticking point when a professor complained about how visitors to the site couldn't find information for his research group on campus. The poor navigation cost the professor a hopeful postdoc for his group because the deadline to apply for the position was not accessible.

Hans quickly clicks on his bookmark for the Web Patterns site. Previously, he had visited the site to look for AJAX patterns and example implementations. Hans navigates the site to find a pattern that might help solve his navigation problem. One result in particular catches Hans's attention: tabbed navigation. He goes to the page for "tabbed navigation" and reads about the problem that the pattern attempts to address and the subsequent solution it provides. He sees a visual example of a two-level tabbed navigation that seems to have worked for another campus department with a similar organizational structure as his departments. He scrolls further down the page and finds comments made by other developers on campus about their experiences with implementing the pattern and gets some positive feedback. More importantly, Hans sees in one of the comments that another developer has added some example PHP code. He's delighted to see the code since he can easily infer the logic from the code and rework it into ASP--his scripting language of choice.

Hans quickly copies and pastes the code into his text editor. Once he's finished implementing the new pattern, he plans to post a copy of his ASP code along with a screen shot in the comments section of the pattern.

Tammy Jones (Secondary Persona)
The Committee for Protection of Human Subjects (CPHS) approval process is a complicated one and Tammy has been working hard with programmers to streamline the process in an online application. While they have completed a portion of the work flow, document approval process needs to be improved. Tammy and her team have put into place a design that walks users through filling out forms, but it still seems too long to users and many become distracted and leave before finishing the form. Tammy is hoping to find examples of other solutions.

Tammy goes to the Web Patterns site and looks for an ideal way to display and process through very long, multiple page forms. She mouses over the form names in the vertical side bar and sees the visual example. She notices the "Multi-step indicator" pattern image and goes to the page for that pattern. The larger visual example of the image contained in the tool tip catches her attention. This pattern interests Tammy and she reads on to better understand the rationale and context in which the pattern could be applied. She scrolls down further and sees more example images of the pattern's various implementations and finds one that shows a example of a task indicator widget that guides the user through the task. This simplicity of the example strikes a chord with Tammy since many times users tend to get lost in the details of the task and give up because they have no idea of when the form will end. She also sees that people have commented on the design giving some valuable feedback.

Opening another browser window with their web application, Tammy hits her "print-screen" button taking a snapshot of their overview by detail implementation. She uploads the image and decides to return later in the day to get other people's reactions to the design.

Albert Tan (Tertiary Persona)
Albert's manager has given him a new project. He needs program a new part of the existing department web site to showcase Master's projects. Albert's task is to convert the static page project links to a dynamic display pulled from the Master's Projects Database.  The web site already has information about projects in general and that needs to stay on the site. 

Albert knows he is looking for some ideas on how to add new and dynamic information to old content. He also wants some sample code to get started. He opens up his browser and goes to the web pattern library. He sees the "Information Organization" category and clicks on it. He immediately sees the "Related Information" pattern has some possibilities and wants to investigate it further. He clicks on the pattern and after reviewing it, decides it is the right one.

He then scrolls down further to find some comments regarding the pattern that are not of interest. However, towards the end of the list of comments, Albert finds that a developer from another department has posted some Java code. He looks at the code and copies it down in his text editor sitting in an adjacent window. 

Application Functionality

• Browse for Patterns: Users can browse for patterns in two ways. First, we provide a global vertical navigation bar that lists all the patterns in the collection. Second, users can compare all patterns in a category at once by viewing the category page.
  
• Tool Tips: When the user mouses over a link in the global navigation, a pop-up provides a visual example and synonyms for the pattern.
  
• Comments: We allow all users, regardless of authentication, to contribute content to the site by adding comments. Users can add a comment within individual pattern pages. These comments show up in the pattern pages themselves and also in the home page to give recognition to the most recent ones.
• Anti-spam fix (Turing Test): Within a few days of the release of our third prototype, our site was spammed with adult content. While we had intended to use an image-based CAPTCHA test on the comment form, we needed to make a much quicker fix. We opted to include a text-based challenge and response by asking users to fill in a text field with some random word.
• Solution image: We provide users with push-pin solution images to help users quickly understand implementation details.
  

Steps:

1. User views an individual pattern.
2. The user decides to add a comment and fills out the comment form.
3. User decides whether or not to preview a comment.
4. If the user decides not to preview a comment, the comment is submitted.
5. If the user previews a comment, the user sees what the comment looks like.
6. The user can then decide to re-edit the comment or submit it.

Design Evolution

Most Useful Evaluation Technique
The Lo-fi prototype was the most useful technique for our project. That test set a major design direction and highlighted some major problems we were able to refine throughout the rest of the project. Specifically, we made major design decision to display all of the patterns in a vertical navigation bar instead of a horizontal navigation bar that displayed only categories. We got valuable feedback in that users needed to browse patterns rather than search for them. From this information, a number of design ideas like the tool tip evolved. We also first got insight into the naming problem based on our survey conducted in that session. There was no consistency in recall but convergence in recognition of pattern names.

The homepage evolved dramatically from displaying one representative pattern for each category accompanied by links to all patterns. We found the links to patterns were overlooked and instead, users focused on the one representative example. This formed ideas about the category that weren't necessarily correct. Based on this information, we reconsidered the purpose of the homepage. From this point forward, used the homepage to introduce the concept of a pattern and how to use it followed by two example patterns.

In addition to feedback that lead directly to design changes, this round of testing changed the way we designed and conducted future user tests. From this we learned to provide more structure and be more clear about our test goals.