UI Patterns Introduction

1. UI Patterns Introduction • There is an "Oh, right, I know what that is" reaction to most of these patterns. • However, a few of them might be new to you, and some of the familiar ones may not be part of your usual design repertoire.

2. Different UI Pattern Experiences • If you don't have years of design experience already, a set of patterns may serve as a learning tool. • If you talk to users, engineers, or managers about UI design, or write specifications, then you could use the pattern names as a way of communicating and discussing ideas. • Each pattern description tries to capture the reasons why the pattern works to make a UI easier to use.

3. The Floor Plan Analogy • The User Interface Pattern concept is inspired by the finding of design solutions in the architecture. • Just as houses have various floor plans, a good user interface does as well. • A house generally has a kitchen, living area, bedroom and bathrooms. • A user interface uses similar structures, arranged so they fit the needs of their users or inhabitants.

4. UI Patterns • Kept application independent • Adjusted in the design phase for application requirements. • Define the individual components that will solve individual requirements. • (I.e. Do we need a bedroom or a hallway here?) • Define how the components will be combined to create the application. • (What will the layout of the house look like when we are done?)

5. User Interface Pattern Questions • Which User Interface Patterns are needed to be able to accomplish certain tasks? • Which work objects need to be processed? • How should user interface screen elements such as fields be grouped together?

6. User Interface Pattern Questions • How should the individual elements of a User Interface Pattern be arranged on the user interface? • Which are the most important elements of a given User Interface Pattern, and which other, less important ones, are also required?

7. UI Pattern Answers • Did you think I’d just give them to you?  • Answers are derived from market and user research. • Dependant on the business practices and end user to be supported.

8. User Interface Patterns • Patterns are more general, while techniques are more specific. • Together the two form a foundation for solving common problems, and there is no need to re-architect every problem. • Consider how they would be used to design a new interface or redesign an existing one.

9. Table Sorter • Problem: Users need to search or scan a complex table for values that interest them • Use when: • Users are viewing data in a table where they must search for interesting values. • There are several meaningful possibilities for sorting the table and users may be more effective if they can dynamically select the column to be sorted.

10. Table Sorter • Solution: Allow users to change the column that is used for sorting the table. • As users click on the column header, the table is sorted by that column’s data. • Another click reverses the order, which can be visualized using an up- or down-wards pointing arrow. • Make sure it is visible which columns can be clicked on and which one is active.

11. Table Sorter • Further Benefits: This pattern allows users to organize data in a table with relatively few clicks. Courtesy http://www.mibexplorer.com

12. Tabs • Problem: Users need to select an element out of a set (Navigation), or a large number of parameters must be displayed. • Use When: • Navigation – If a large number of destinations which a user can select can be broken down into groups, preferably less than ten, tabs can be used. • The destination is either known already or the user may have an idea about the kind of item they are after.

13. Tabs – When to Use • Large amounts of data are usually not unrelated and can be divided into categories that match the user's conceptual view. • Parameter Display – When there are a large number of parameters, the most important, or ones without a sufficient default value, are often displayed on the first tab. • Subsequent tabs hold parameters that have been categorized and labeled via the tab headers.

14. Tabs - Solution • Divide the data into sections and present one section at a time. Show all sections and let users switch directly between sections. • Show the section labels horizontally and place the items for the current section underneath it. The currently selected category is generally highlighted. • This effect can be enforced by showing the tabular sheets visually, i.e. connecting the items-area with the current selection.

15. Tabs – Further Benefits • Further Benefits: Tabbing instantly shows the users which sections are available and makes them reachable in one click. • An important limitation comes from the fact that the categories are usually placed horizontally. • Consequently, the number of categories that "fit" is usually smaller than 10, unless an alphabetical index is used.

16. Tabs – Example 1 Navigation Tabs (Courtesy www.amazon.com)

17. Tabs – Example 2 Parameter Display Tabs (Courtesy Equipe Communications)

18. Paging • Problem: The user needs to browse through a large list of items • Use When: • Users need to go through a large list of items. • This pattern is applicable when the items are too large to fit on one page. (But > 10) • The items are typically ordered and the users are likely to find their desired result close to the beginning.

19. Paging - Solution • Present the results grouped in pages with a fixed number of items. • Provide a direct link to a particular page and links to the next/previous page that allow Stepping through the pages. • Show around 5 to 10 items at a time. • Also show the total number of items and use a title to say what kind of items they are.

20. Paging - Example • The navigation bar should tell the users the most important information about the list; how many items there are, how many they see now and how to get to the rest. Paging (Courtesy, Google)

21. Tree Table • Problem: Related items which have a parent-child or temporal relationship need to be displayed in a related way. • Use When • The UI displays multivariate information, so a table works well to show the data (or allow them to be sorted, as in Table Sorter). • The items are primarily organized as a hierarchy, so you also want a tree, or outline, to display them.

22. Tree Table - Solution • Combining the two data-viewing approaches into one gives you the best of both worlds • The cost is some visual and programming complexity. • You can show the hierarchy of items, plus a matrix of additional data or item attributes, in one unified structure. • Additional Notes: This technique is popular in email clients and news readers, where threads of discussion form treelike structures.

23. Tree Table - Example Courtesy Outlook Express's news reader

24. List Selector • Problem: Users need to configure an object consisting of several parts.

25. List Selector – Use When • A complex selection needs to be created by users from a large but defined list of items. • Items must be independent of each other so that they can be removed or added without consequences. • At some point users may change their minds and remove selected parts. Users need to know which parts are selected and which are available. • The number of available parts may change during usage of the application.

26. List Selector - Solution • Show all the parts and allow the user to add or remove a part from the selection list. • Show the list of parts, in categories if applicable, on one side and the list of selected parts on the other side. • Place add and remove functionality in between the left and right side. • The user can add parts by selecting them and then adding them to the parts list. • Consider speed-ups such as double-clicking or dragging to add or remove an item.

27. List Selector – Other Thoughts • Showing both the available and selected parts gives the user a complete and instant overview. • The visual organization creates a logical task flow from left to right. • Because item lists are used the design can easily accommodate new items or categories. • NOTE: This pattern may have to be altered if the left to right reading pattern isn’t followed in the language your users speak.

28. List Selector – Example List Selector (Courtesy Yahoo!)

29. List Sorting • It is worth noting that the List Selector is very similar to a pattern where users can sort the display of their selection. • This is useful if users want to see certain data first. • It is useful to constrain the user within their selection and not provide confusion or ways to mis-configure.

30. List Sorting - Solution • Solution: Present the list together with up and down buttons. • By selecting an item and pressing the up or down button, the item can be moved. • Effectively it swaps its place with the item above or below it when it is moved. • By selecting several items, users can move a small set of items to a new place.

31. List Sorting - Example List Sorting (Courtesy, Yahoo!)

32. Wizards - Problem • The user wants to achieve a single goal but several decisions need to be made before the goal can be achieved.

33. Wizards – Use When • A non-expert user needs to perform an infrequent complex task consisting of several subtasks where decisions need to be made. • The number of subtasks must be small. • The tasks can be ordered but are not always independent of each other. • To reach the goal several steps need to be taken but the exact steps required may vary because of decisions made in previous steps.

34. Wizards - Solution • Take the user through the entire task one step at the time. • When the complex task is started, the user is informed about the goal that will be achieved and the fact that several decisions are needed. • The user can move between tasks using a navigation system provided by the interface, generally back, next and finish buttons.

35. Wizards - Solution • If the user cannot start the next task before completing the current one, feedback is provided indicating the user cannot proceed before completion. • The user is also able to revise a decision by navigating back to a previous task. • Additional Notes: • The navigation buttons suggest the users that they are navigating a path with steps. • The inexperienced user may be able to learn a task or avoid invalid configurations, but an experienced user may take longer to perform the operation.

36. Wizards - Example Wizard (Courtesy Microsoft XP)

37. Progress Bar - Problem • Users are often impatient and need feedback during operations which take a long time to complete. • Even changing the mouse pointer to an hourglass may not be enough feedback.

38. Progress Bar • Use When: A time-consuming operation will take longer than two seconds or so to complete. • Solution: • It's been shown experimentally that if users see an indication that something is going on, they're much more patient, even if they have to wait longer. • Maybe it's because they know that "the system is thinking," and it isn't just hung or waiting for them to do something.

39. Progress Bar • Additional Notes: Show an animated indicator of how much progress has been made. • what's currently going on, • what proportion of the operation is done so far, • how much time remains, and • how to stop it. • If the UI doesn’t know how long the task will take to complete, show something animated which is noncommittal about percentages

40. Progress Bar – NOTE! • NOTE: The GUI application shouldn’t be “frozen” (i.e. unable to repaint itself, unable to perform other operations) during the time that the longer operation is taking place. Putting the operation on a separate thread, or Swing Worker Thread in Java is desirable.

41. Progress Bar – Example Animated Progress Bar (Courtesy Microsoft XP)

42. Be Creative, Have Fun! • Use existing patterns and techniques as a base to work from. • It takes a lot of work to make an easy to use GUI, but it is well worth it in the long run! • Don’t get too bizarre, and be prepared to collect feedback on the usability of new items before deployment to customers. • Examples: Table for binary logging string, various validation items, etc.

43. References • Jenifer Tidwell • http://www.mit.edu/~jtidwell/ui_patterns_essay.html • http://time-tripper.com/uipatterns • SAP Design Guild • http://sapdesignguild.org/community/readers/print_reader_crm_latzina.asp • www.welie.com • http://www.welie.com/patterns