You are on page 1of 38

Sidra Khan B.S(I.

T) 2008

Carrousel Table Filter Collapsible Panels Details on Demand Collectors Inplace Replacement List Builder List Entry View Overview by Detail Parts Selector Tabs Table Sorter Thumbnail View

Carrousel:

Problem: The user needs to browse through a set of items and possibly select one of them. Example:

Use: Use when you have a large set of items to show, but want to let the user concentrate his or her attention only on a select few items at a time. Use when you do not have enough space to show all items at once.

How? Align all items horizontally or vertically so that a 'strip' of items is created. Then show only some items of the strip and hide all the others. Place arrow buttons at both ends of the strip so that the user can move the visible area.

Why? The carrousel only shows some items at a time, you only need a small space to show many items.

Table Filter: Problem: Users want to control which subset of the total information they want to see in tables. Use: Use when you have a very large data set of results that is too large to show in one page. Use when one or more table columns can easily be summarized into categories to filter by. Solution: Provide dropdown inputs that present the categories by which the user can filter the data set by. Once the user selects a category and clicks Filter or something similar (when the user submits the form), the same data set is shown, but only with rows that belongs to the category selected.

Collapsible Panels:

Problem: Users need to access information or functionality but they only need in under certain circumstances. Solution: Create panels that can be opened or closed independently of each other . Use: When a lot of data or a lot of functionality is available, users typically only need a certain subset at any given moment. How? Stack several panels on top of each other and give each panel a label. The label should be clickable and toggles between the expanded and collapsed states of the panel.

Details on Demand:

Problem: How to show the user details about a specific item or items of interest.
Solution: A visualization should allow the user to view data item attribute values. Data tips can be used to show a temporary details on demand window.

Collector:

Problem: Users need to temporarily gather a set of items for later use. Solution: Allow users to build their list of items by selecting the items as they are viewing them. Place a link to the collected items list on every page in the site. Use: In many sites users encounter 'objects' that they will later again read, view, or use in general. For example, in a Ecommerce Site users view products which they will put in their Shopping Cart so that they may purchase them or throw them out of the cart again.

Inplace Replacement:

Problem: Users need to see a bit more details on an item in a large list. Solution: When selecting an item, create more space for the item and display additional details . Use: Variation in using popups or overview by detail. Only use when the amount of additional details that need to be shown is limited, typically 3-5 lines of text.

List Builder:

Problem: The users need to build up and manage a list of items . Solution: Present the total list and provide editing functionality next to it. Use: Users have several items to manage. They may be confronted directly with a long list or they may need to build up a new list. The list of items is typically ordered and could be quite long.

List Entry View:

Problem: The users need to add items to a list . Solution: Show a simple entry form directly above the total list of items .
Use: Users are building up a list of items one by one. The items they are adding are very simple, typically a name of a personal or item, and possible one or two extra fields.

Overview by Detail:

Problem: Users need to inspect objects that are part of a set . Solution: Show an overview of all objects and display object details of a selected object on a new page .
Use: You are designing a Web-based Application or any other site where image collections are browse-able.

Parts Selector:

Problem: Users need to configure an object consisting of several parts.


Solution: Show all the parts and allow the user to add or remove a part from the selection list. Use: A complex objects needs to be created by the users or modified later on. The object consists of several parts where the user must select the appropriate combinations of parts.

Tabs:

Problem: Users need to access a particular section of the entire available information .
Solution: Show a horizontal row of tabs with the section label in the tab. Highlight the currently selected tab and make all other tabs clickable. Use: Need to design main navigation and considering horizontal menu.

Table Sorter:

Problem: Users need to search or scan a complex table for values that interest them .
Solution: Allow users to change the sorting order of the table items by clicking on a column header . Use: Users are viewing a large table, possible spanning multiple pages, that they must scan for interesting values.

Thumbnail:

Problem: Want to give the user an idea of how an image, movie or page looks like, but doesn't want to display the full-scale image, movie or page because of download time and screen space.
Solution: Display a smaller version of the movie, image or page. Use: Want to allow fast browsing through multiple images. The visitor must get an impression of the image, movie or page, so the visitor can decide if he/she wants to see the original sized page, movie or image.

View:

Problem: Users need to manage a collection of objects . Solution: Create an overview of objects that together is meaningful to users .
Use: Typically used in a Web-based Application in which 'Views' are the main elements. Users need to manage objects such as emails, bank accounts, stocks, orders and so on.

Personalizing:
Customizable Window. Login. Registration.

Customizable window:

Problem: Users ideally want to have fully personalized content . Solution: Use "windows" with select items that users can adapt or click away.
Use: Websites that offer categorized content where users may be only interested in a handful of categories or items. This pattern is used when there is some form of customization available to the users.

Login:

Problem: The users need to identify themselves so that stored data about/of them can be used in the process.
Solution: When needed, ask the users to login using a combination of an email-address and a password . Use: Users frequently return to a site that uses large amounts of data about or belonging to the users, it is convenient to have users enter that information once and use it again for future visits to the site .

Registration:

Problem: The users repeatedly need to (re)enter a large amount of personal data .
Solution: Offer users to possibility to store their personal information for later use. Use: On many sites there is a clear benefit of offering personalized services. When large amounts of data have to be entered on each returning visit, there is a clear benefit of being able to store and retrieve that data.

You might also like