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

Scenarios

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 their 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 UIDP 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 handling stills needs to be improved. Tammy and her team have put into place a design that lists a collection of a user's documents on the left-hand side and will show the document in further detail once you click on it from the list. While this seems to have worked so far for some users, Tammy is hoping to find examples of other solutions.

Tammy goes to the UIDP site and looks for an ideal way to display items in a collection or list. She notices the "Overview by Detail" pattern and goes to the page for that pattern. A visual example on the page resembles a solution her team had implemented previously. This 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 miniaturized version of the document on the left hand side and the actual document on the right. This example strikes a chord with Tammy since many times users tend to get lost in the details of the document. 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 begins his day by sifting through his email inbox to see what views of the data various departments are requesting. Since Albert has setup a robust data warehousing solution, he gets a few requests daily for the appropriate data for each individual need. However, Albert gets a lot of data from different sources across campus and even from UCOP. Though his data warehouse is in place, he often has to rewrite various queries and batch statements to pull from these disparate sources.

Today, Albert decides that he needs a quick visual implementation to avoid having to manually rewrite his queries in a command prompt. He fires up his browser and goes to the UIDP site. He knows what he needs and immediately enters in a query for data sorting. He gets back a list of various patterns related to displaying data and finds one titled "List sorter" that grabs his attention. He clicks on the pattern and see the sample implementation shows a drag and drop interface to put items in a different order.

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.