Design Rules

2

Contents

Design principles Standards and Guidelines Patterns

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Contents

Design principles Standards and Guidelines Patterns

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

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

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

Contents

Design principles Standards and Guidelines Patterns

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

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

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

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

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

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

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