1. Design Rules

2. 2 Contents Design principles Standards and Guidelines Patterns

3. 3 Design Rules This section will present design rules to increase the usability of software products We will examine Principles as a way of understanding usability Design rules and standards Design patterns to capture and reuse design knowledge

4. 4 Design Principles Principles are the most abstract design rules Principles were derived from observing successful systems and discovering why they were successful The study of principles will provide an understanding of what makes a system usable

5. 5 Design Principles Principles can be broken into 3 categories Learnability How easy they are to learn Flexibility The number of ways the user can communicate with the system Robustness Features which support the successful achievement of a goal

6. 6 Learnability This is concerned with the features of a system which allow a novice user to Understand the system Use it at an initial level Master the system to use it efficiently with a higher level of proficiency We will now examine each of the principles affecting learnability

7. 7 Predictability Predictability involves being able to predict the effect of an action based on how the system has performed in the past This means that the user should be able to observe the system for a period of time and then predict the effect of actions

8. 8 Predictability In the worst case, the user would have to see every operation performed to be able to predict the effect of an action In the best case, observing a few operations is sufficient to allow someone to predict future operations The goal is to achieve predictability with minimal exposure to the system

9. 9 Synthesizability This is the ability of the user to assess the effect of past operations on the state of the system Predictability cannot be achieved if the effect of operations cannot be readily observed One of the hallmarks of synthesizability is immediate feedback

10. 10 Synthesizability An Example An early version of the Macintosh finder allowed the user to create new folders which were placed at the end of the list of files If there were enough files to fill the window, the new folder was placed out of sight This caused the user to assume the operation had failed and repeat it multiple times, resulting in many unnamed folders in the directory

11. 11 Familiarity Familiarity refers to how familiar the user is with concepts similar to those of the system This is often aided by the system being a metaphor for something the user is familiar with in the real world The word processor is similar to a typewriter Therefore, the user’s familiarity with the typewriter will aid he or she in understanding the word processor

12. 12 Generalizability Users can extend their understanding of the system by generalizing the concepts they already understand Example A drawing program allows one to constrain an ellipse to be a circle by holding down the shift key while drawing The user can extend this to conclude that a rectangle can be constrained to be a square by holding down the shift key Generalizability is related to consistency

13. 13 Consistency Consistency is the most often mentioned principle of interface design It means that similar actions should have similar effects in similar situations Consistency reduces the load on the user’s memory since there are fewer rules to remember

14. 14 Consistency Input consistency The arrow keys are used to move around in many text editors Some editors use regular keys arranged in the same pattern on keyboards which do not have arrow keys Eg. Using e, s, d, x as arrow substitutes that have the same relative positions

15. 15 Consistency Output consistency The control panel for an aircraft color codes the messages on the panel Urgent (red) Requires immediate attention Warning (amber) Requires attention soon Advisory (green) For information only, no action required

16. 16 Flexibility Flexibility refers to the number of ways the user can exchange information with the system There are several underlying principles which contribute to flexibility

17. 17 Dialog Initiative Dialog initiative indicates who starts a dialog – the system or the user System preemptive The system initiates all dialog and the user simply responds This happens when the system displays a modal dialog so that the user must respond before any other operation can be performed

18. 18 Dialog Initiative User preemptive The user can initiate any action In a system preemptive dialog the user’s actions are controlled by the system and greatly restricted We want to maximize the user’s ability to preempt the system Minimize The system’s ability to preempt the user

19. 19 Dialog Initiative Consider filling in an address form System preemptive User selects country System presents list of states or provinces User selects province System presents list of cities User selects city System prompts for street The user must Enter data in a specific order Cannot cut & paste from elsewhere Do exactly what the system demands

20. 20 Dialog Initiative User preemptive User asks to enter address System displays address form User enters data in any order desired This model provides much greater flexibility for the user Most users prefer this form of dialog initiative

21. 21 Dialog Initiative There are still situations where it is better for a dialog to be system preemptive Consider a shared text editor where two users can edit at the same time To avoid problems, the system locks paragraphs so that only one user can change a paragraph at a time If this was not controlled by the system a lot of confusion would result

22. 22 Multi-threading A multi-threaded dialog allows the user to interact with different parts of the system at the same time This is common in windowing systems which allow a user to switch between running programs and interact with each one The same thing can be done for an application by providing multi-threading

23. 23 Multi-threading Multi-modality is related to multi-threading It means that different communication channels can be used simultaneously A bell can sound when invalid input is supplied The user can also be provided with multiple ways to perform a task Open a window by Clicking an icon Keyboard shortcut Say “open window”

24. 24 Task Migratability This means that control of a task can be transferred from the user to the system and vice versa Consider the case of checking the spelling in a document The user can look each word up in a dictionary The system can perform the same task automatically

25. 25 Task Migratability Task migratability can enhance safety In an aircraft, routine flying can be relegated to the auto pilot In an emergency, it is vital that the functionality be transferred to a human pilot Without this migratability, safety would be compromised

26. 26 Substitutivity This means that one form of information representation can be substituted for an equivalent form Consider entering a distance As a value in default units – 3.8 As a value in specific units – 3.8 in As a calculation – (5 – 1.2) cm

27. 27 Substitutivity There are also equivalent forms of output that can be substituted Consider the display of the temperature As a thermometer showing the current temperature As a chart showing temperatures over a period As a graph showing temperatures over a period

28. 28 Substitutivity Equal opportunity blurs the distinction between input and output at the interface An analog dial which shows a value but whose hand can be moved to adjust the value A cell in a spreadsheet whose value can be changed and it will cause other values to be recalculated

29. 29 Customizability This allows the interface to the modified by the system or the user Adaptability refers to the user’s ability to adjust the form of input and output This can take two forms Lexical customization the user can only change the layout of on-screen buttons or rename commands The overall structure of the interface remains the same

30. 30 Customizability Programmability The user can program the interface The UNIX shell can be programmed VB/Java script can be used to program many applications Macros can be recorded to create new commands with simple logic in them Adaptivity is the automatic customization of the interface by the system

31. 31 Customizability Adaptivity allows the system to adjust the interface to the perceived needs of the user For example, the system could monitor the actions of the user to decide whether to provide an interface for a novice or an expert The user plays an explicit role in adaptability but an implicit role in adaptivity

32. 32 Robustness A user communicates with a computer to achieve a set of goals The robustness of the interaction is any feature of the system that supports the successful completion of the goal

33. 33 Observability Observability allows the user to evaluate the internal state of the system by interacting with the interface Observability is supported by Browsability Defaults Reachability Persistence Operation visibility

34. 34 Browsability Browsability allows the user to explore the current state of the system from the user interface Typically, the user interface does not display all of the information about the system What it should do is display all of the state information which is relevant to the current task

35. 35 Browsability Often, there is more information than which can be displayed at once This means that the user must be provided with some means of navigating the information to explore and find what is needed The browsing itself should not affect the state of the system

36. 36 Defaults The use of default values can Reduce the amount a user has to remember Reduce the number of physical actions necessary to provide a value There are two types of default values Static – the values never change Dynamic – values are calculated based on the state of the system

37. 37 Reachability This refers to the user’s ability to navigate through the observable system states A state is reachable if it can be reached from every other state in one way or another It is important that all states be reachable

38. 38 Persistence Persistence has to do with how long an act of communication between the user and the system persists If the system plays a sound to alert the user, it is gone in an instant If the user went for coffee when the alert sounded, it would be missed If the alert is displayed on the screen, it will persist for a much longer time and there is less chance it will be missed or forgotten

39. 39 Recoverability Recoverability refers to the ability to recover from a mistake and still be able to achieve a goal Recovery can occur in two directions Forward The current state is accepted and it is possible to work to the final goal from that state This might be the only possible technique if an action has irreversible side effects, such as printing

40. 40 Recoverability Backward This allows you to undo one or more actions to return to a previous state You can then move in a different direction from the previous state to correct the error The principle of commensurate difficulty states that if it is difficult to undo an operation, it should have been difficult to perform the operation in the first place

41. 41 Responsiveness Responsiveness is the rate of communication between the system and the user Response time is the duration needed for the system to display a state change to the user Ideally, response time should be close to zero so the user perceives it as instantaneous Stability, the constance ofresponse time across similar tasks, is more important than absolute response time

42. 42 Task Conformance Task conformance means that the necessary operations must not only be provided but provided in a way that they are convenient to use for a variety of tasks Task completeness means that all operations necessary to perform the task are provided

43. 43 Contents Design principles Standards and Guidelines Patterns

44. 44 Standards Standards are issued by national or international bodies to ensure compliance with design rules by a large community Most of the existing standards address hardware concerns A small amount of the standards address software The software standards are more vague than the hardware standards

45. 45 Guidelines Guidelines are less prescriptive than standards They are issued by companies or manufacturers They are directed towards a smaller community of users Surveys have been compiled that list large numbers of guidelines issued by different organizations

46. 46 Guidelines Many guidelines come from software companies to ensure that people writing for their platforms have a common look and feel to their software Examples include Microsoft Apple Sun Microsystems

47. 47 Contents Design principles Standards and Guidelines Patterns

48. 48 Patterns Patterns are solutions to recurring problems that have been generalized so that they can be applied to similar problems when they are encountered Software design patterns have become accepted in the last few years HCI patterns have also appeared that provide solutions to interface design problems

49. 49 Patterns Most patterns are stated in a stylized form that makes them easier to read Name of pattern When it might be used How the solution can be implemented References to related patterns

50. 50 Breadcrumbs Problem The users need to know where they are in a hierarchical structure Use when Sites with a large hierarchical information structure, typically more than 3 levels deep. Such sites are medium to large sized and include shops, catalogs, portals, corporate sites etc. The site has got a main navigation scheme that allows users to traverse the hierarchy. Users may want to jump several steps back instead of following the hierarchy. Users may be unfamiliar with the hierarchical structure of the information. Users may need to know where they can go. users need to know how they arrived at their current location.

51. 51 Breadcrumbs Solution Show the path from the top level to the current page. The path shows the location of the current page in the total information structure. Each level of the hierarchy is labeled and functions as a link to that level. The current page is marked in order to give the users feedback about where they are now. Don't use the current page name in the breadcrumb as the only way to show section title, add a title anyway.

52. 52 Breadcrumbs The path shows that a top-down path is traversed by using appropriate separators such as > or \ that suggest a downward motion. If the path becomes too long to fit in the designated place, some of the steps can be replaced by an elipsis e.g. "...". The path is placed in a separate "bar" that preferably spans the entire width of the content area. It is placed close to the content area, preferably above the content area but below the page header.

53. 53 Breadcrumbs Why The bread crumbs show the users where they are and how the information is structured. Because users see the way the hierarchy is structured they can learn it more easily. By making each label a link, the users can quickly browse up the hierarchy. They take up minimal space on the page and leave most of the space for the real content.

54. 54 Breadcrumbs More examples This example is taken from Sun's web site and shows the use of bread crumbs in product pages. The path from the top level is visible and the users can go to any of the other higher level product categories. * www.welie.com