User Interface Design Pattern Library Project |
Assignment 1 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9 |
Tim's Initial Design This pattern is based on our tertiary scenario, Albert, who is trying to find a specific solution to a UI problem - sorting lists. 1. Homepage: The entry page tries to support multiple ways of browsing: by category (default display), by problem, and by pattern viewer. The default view displays each category with its associated patterns listed under it. Each category will be hyper linked to a secondary page that lists patterns with more information about that category and a list of each pattern with description and a thumbnail. The sidebar contains other ways to browse the content. Patterns by problem link to a list of UI problems and the patterns that address those problems. Pattern viewer would link to a viewer application that users could scan patterns visually by. The search pattern is uppermost right on the page. 2. Search Results: This page shows the results for "sort list" from our application. The search page consists of a search bar with the user's query in the text box. The search results will be filterable by various data points (category, etc.). The results themselves will be simple hyperlink titles of the name, a thumbnail, and a description. Additionally, a when the user mouses-over the title it will trigger a pop-up with 'use when' and a small example of the pattern-in-use. 3. Pattern: The pattern page will consist mainly of the elements of a pattern (title, image, problem, use when, comments). One the sidebar there will be related patterns that will be dynamically generated for each pattern. Additional facets could also be binned on the sidebar: other genres that use this pattern, etc. 4. Comments: This is simple representation for a submit comments page. The user is given a textbox with entitled "Leave a Comment" followed by a submit comment action button. Interactive flow for this scenario |