![Page 1: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/1.jpg)
Design Rules
![Page 2: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/2.jpg)
2
Contents
Design principles Standards and Guidelines Patterns
![Page 3: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/3.jpg)
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
![Page 4: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/4.jpg)
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
![Page 5: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/5.jpg)
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
![Page 6: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/6.jpg)
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
![Page 7: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/7.jpg)
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
![Page 8: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/8.jpg)
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
![Page 9: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/9.jpg)
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
![Page 10: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/10.jpg)
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
![Page 11: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/11.jpg)
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
![Page 12: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/12.jpg)
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
![Page 13: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/13.jpg)
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
![Page 14: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/14.jpg)
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
![Page 15: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/15.jpg)
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
![Page 16: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/16.jpg)
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
![Page 17: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/17.jpg)
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
![Page 18: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/18.jpg)
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
![Page 19: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/19.jpg)
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
![Page 20: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/20.jpg)
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
![Page 21: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/21.jpg)
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
![Page 22: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/22.jpg)
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
![Page 23: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/23.jpg)
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”
![Page 24: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/24.jpg)
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
![Page 25: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/25.jpg)
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
![Page 26: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/26.jpg)
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
![Page 27: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/27.jpg)
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
![Page 28: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/28.jpg)
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
![Page 29: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/29.jpg)
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
![Page 30: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/30.jpg)
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
![Page 31: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/31.jpg)
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
![Page 32: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/32.jpg)
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
![Page 33: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/33.jpg)
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
![Page 34: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/34.jpg)
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
![Page 35: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/35.jpg)
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
![Page 36: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/36.jpg)
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
![Page 37: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/37.jpg)
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
![Page 38: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/38.jpg)
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
![Page 39: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/39.jpg)
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
![Page 40: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/40.jpg)
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
![Page 41: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/41.jpg)
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
![Page 42: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/42.jpg)
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
![Page 43: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/43.jpg)
43
Contents
Design principles Standards and Guidelines Patterns
![Page 44: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/44.jpg)
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
![Page 45: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/45.jpg)
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
![Page 46: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/46.jpg)
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
![Page 47: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/47.jpg)
47
Contents
Design principles Standards and Guidelines Patterns
![Page 48: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/48.jpg)
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
![Page 49: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/49.jpg)
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
![Page 50: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/50.jpg)
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.
![Page 51: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/51.jpg)
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.
![Page 52: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/52.jpg)
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.
![Page 53: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/53.jpg)
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.
![Page 54: Design Rules. 2 Contents Design principles Standards and Guidelines Patterns](https://reader030.vdocument.in/reader030/viewer/2022032806/56649efc5503460f94c0f832/html5/thumbnails/54.jpg)
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