DESIGN RULES
Overview
• Designing for maximum usability is the goal of interactive
systems design.
• Abstract principles offer a way of understanding usability in a
more general sense
• Design rules in the form of standards and guidelines provide
direction for design
• The essential characteristics of good design are often
summarized through ‘golden rules’ or heuristics.
Design Rules
• Design rules (or usability rules) are rules that a designer can
follow in order to increase the usability of the system/product
e.g., principles, standards, guidelines.
• We can classify these rules along two dimensions, based on the
rule’s authority and generality.
Design Rules
• By authority, we mean an indication of whether or not the rule
must be followed in design or whether it is only suggested.
• By generality, we mean whether the rule can be applied to
many design situations or whether it is focussed on a more
limited application situation.
Types of design rules
• principles
increasing generality
• abstract design rules
• low authority
Guidelines
• high generality
• standards
• specific design rules
• high authority
• limited application Standards
• guidelines
• lower authority
• more general application
increasing authority
Types of design rules
• Principles:
• (e.g. interface should be easy to navigate).
• Abstract and have high generality & low in authority.
• Widely applicable and enduring.
• Guidelines:
• (e.g. use colour to highlight links)
• Can guide/advise on how achieve a principle
• Narrowly focused
• Can be too specific, incomplete, & hard to apply BUT they are more general and
lower in authority than Standards (e.g. use colour RGB #1010D0 on home links) which
are very
specific & high in authority
Types of design rules
• Standards: They are often set by national (eg British Standards
Institution) or international bodies (ISO).
• hardware standards more common than software high authority
and low level of detail
• Example [of standards] - ISO 9241 "Ergonomic Requirements for
Office Work with Visual Display Terminals (VDT)s“.
• ISO 9241 defines usability as effectiveness, efficiency and
satisfaction with which users accomplish tasks
Note
• Design rules should be used early in the lifecycle [e.g., during the design;
note that they can also be used to evaluate the usability of the system]
Shneiderman’s 8 Golden Rules (1987)
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
Shneiderman’s 8 Golden Rules
• These guidelines are beneficial for normal designers as well as interface
designers.
• Using these eight guidelines, it is possible to differentiate a good interface
design from a bad one.
• These are beneficial in experimental assessment of identifying better
GUIs.
Strive for Consistency
• Whether it is the layout, the size of the button, the color code or the tone
used when writing the page, it is important to be consistent throughout
the site.
• This consistency will allow you to develop your identity and not lose users
as they navigate your site.
• In the example below, you can recognize Amazon, by applying this first
heuristic, there is a consistency between all the pages present on
Amazon, the layout is the same, the size of the button is always similar,
and the color code are very specific to Amazon.
Strive for Consistency
Enable Frequent Users to Use Shortcuts
• Allow your users to access all parts of the website with a minimum of
clicks. To do this, you not only need to establish a good hierarchy in the
menu, but also make things clear.
• You should think about incorporating features for advanced users and for
beginners for example, with keyboard shortcuts or macro facilities, as for
example with Canva which allows its users to use shortcuts to copy and
paste.
Enable Frequent Users to Use Shortcuts
Offer Informative Feedback
• If your users have performed or are performing actions on your website, it
is best to display feedback immediately so that they have an idea of where
their processes are
• we'll take an example with a tool that many professionals use, Google
Drive:
• For this example, you will have to create a new folder that you can delete
right after.
• When you are in this folder, choose a document of your choice, a photo, a
video, a PDF file and use drag and drop to transfer it to your folder.
• Once your transfer is in progress, this window will appear to keep you
informed of the progress of your transfer.
Offer Informative Feedback
Design Dialog to Yield Closure
• Remember to close any interaction made with a user based on the cause of
the interaction :
• Thank you message.
• Validation message.
• Summary message during a purchase.
• Your user must see the path in his action, by offering him the end of an
interaction through feedback you reduce his mental load and improve his
experience on your interface.
Design Dialog to Yield Closure
Offer Simple Error Handling
• A good interface should be designed to avoid errors as much as possible.
However, if something goes wrong, your system should make it easy for
users to understand and resolve the problem.
• Simple ways to deal with errors include displaying clear error notifications
and descriptive hints to resolve the problem.
• For example, on our site, we tell you when you log in if your login
information is wrong.
Permit Easy Reversal of Actions
• Immediately discovering that it is easy to choose "Cancel" after making an
error is a very good thing for the user. If your users know that there is an
easy way to solve a problem, they will feel less anxious and more willing to
explore the options.
• The rule can be applied to all operations or groups of operations.
• For example, here we are in the Outlook mobile application, when archiving
an email, a small window automatically appears at the bottom of the
screen offering to cancel the archiving.
Permit Easy Reversal of Actions
Support Internal Locus of Control
• We need to give control and freedom to the users, so that they can feel that
they are in control of the system themselves, giving them some form of
free will helps to reassure the user.
• For example, in the screenshot below we are on Capian's YouTube page,
and we can choose to turn on notifications or not, YouTube lets us choose
how much notification we want to see, by doing this, YouTube is giving
freedom to the users and making them feel like they have control over
what they will receive.
Support Internal Locus of Control
Reduce Short-Term Memory Load
• The limitation of human information processing in short-term memory
requires that displays be kept simple, multiple page displays be
consolidated, window-motion frequency be reduced, and sufficient training
time be allotted for codes, mnemonics, and sequences of actions.
• Avoid overloading your site or application with information of the same
level. You have to deduce which ones should be placed first or you will lose
the user's attention.
• No matter where you place your site, whether it's the home page or the
menus, make sure that your user can't be distracted by unnecessary
information.
Reduce Short-Term Memory Load
Norman’s 7 Principles (1988)
• Use both knowledge in world & knowledge in the head.
• Simplify task structures.
• Make things visible.
• Get the mapping right
• Convert constrains into advantages (Physical constraints, Cultural
constraints, Technological constraints).
• Design for Error.
• When all else fails − Standardize.
Norman’s 7 Principles
• To assess the interaction between human and computers, Donald Norman
in 1988 proposed seven principles. He proposed the seven stages that
can be used to transform difficult tasks.
Use both, knowledge in the world and knowledge in the
head.
• Norman conceptualizes knowledge into two different camps: that which
exists in the user’s head and that which exists in the world.
• The idea is that when a user can figure out what is required of them from
a design from preexisting knowledge (knowledge in the head) or can
easily deduce it from constraints in a design (knowledge in the world),
they find a task much easier to complete.
• “It should be easy to go back and forth,” writes Norman, “to combine the
knowledge in the head with that in the world.”
Simplify the structure of tasks.
• Norman suggests this is possible by reducing the cognitive load of users
through technology.
Make Things Visible
• Visibility is the basic principle that the more visible an element is, the
more likely users will know about them and how to use them.
• Equally important is the opposite: when something is out of sight, it’s
difficult to know about and use.
Get the mapping right
• A push door should not only look like a push door. It should behave like it
looks.
• “Difficulties arise,” In simpler terms, this means that if a door says push, but
it looks like a pull, the mapping between intention and possible action is off.
• A correctly mapped door looks like a pull door because it is one.
• The up and down arrows on a keyboard are mapped to moving the cursor up
and down
• The “+” on the remote control will increase the volume and “-” will decrease
the volume.
Get the mapping right
• In a graphical user interface (GUI), buttons are typically mapped to
actions, such as opening a file or saving a document.
• A menu item is typically mapped to the action that it represents, such as
"New File" or "Exit.
• In a video game, the control buttons are typically mapped to the actions
that they represent, such as moving the character or attacking an enemy.
• Scroll Bar shows you where you are on the page
Convert constrains into advantages
• Use constraints so that the user feels as if there is only one possible thing
to do — the right thing, of course.”
• Constraints work by reducing alternatives for users. A well-constructed
system will present users as few alternatives as possible at each step.
• Examples. Many websites and apps are available in multiple languages.
• many smartphone apps use a bottom navigation bar to allow users to
quickly switch between different screens.
Design for error
• Humans make mistakes. Plan for it.
• human error is such a big part of all designs systems that the more
important lesson to be drawn from this principle is not that humans make
mistakes, but that designs should always offer them an escape route from
their mistakes.
• Designers can plan for human error by giving them options to reverse it or
fix it when it inevitably occurs.
• many text editors allow users to undo their typing actions.
Design for error
• The Google Docs app has a feature called "Track Changes." This feature
allows users to see all of the changes that have been made to a
document, including deletions and insertions.
• Many websites and apps use a feature called "Form Validation." This
feature checks the input that users enter into forms for common errors,
such as invalid email addresses or missing required fields. This helps to
prevent users from submitting forms with errors.
When all else fails, standardize
• “When something can’t be designed without arbitrary mappings and
difficulties,” according to Norman, “there is one last route: standardized.”
• Clocks are standardized.
• Traffic signs are standardized.
• Keyboards largely are standardized.
• The problem with standardization is that it requires training. The good
thing is that it only requires training one time.
Nielsen’s 10 Heuristics (1994)
1. Visibility of system status;
2. Match between system and the real world;
3. User control and freedom;
4. Consistency and standards;
5. Error prevention;
6. Recognition rather than recall;
7. Flexibility and efficiency of use;
8. Aesthetic and minimalist design;
9. Help users recognize, diagnose, and recover from errors;
[Link] and documentation.
Nielsen’s 10 Heuristics (1994)
• Jakob Nielsen's 10 general principles for interaction design.
• They are called "heuristics" because they are broad rules of thumb
and not specific usability guidelines.
Visibility of system status
• The system should always keep users informed about what is going on,
through appropriate feedback within reasonable time.
• When you login to Gmail, it shows you what’s happening in the background
and the progress.
• When you upload something, the progress should be clearly visible unless
you don’t know what happens in the background and gets confused e.g
Gmail file upload
Visibility of system status
Match between system and the real world
• “The system should speak the users’ language, with words,
phrases and concepts familiar to the user, rather than system-
oriented terms.
• Follow real-world conventions, making information appear in a
natural and logical order.”
• The Google Maps app uses familiar concepts such as streets, roads, and
landmarks to help users navigate. This makes it easy for users to
understand the map and to find their way around.
Match between system and the real world
• When you go shopping in a mall you put the products you are buying in a
shopping cart or shopping basket.
• Since e-commerces and marketplaces are the digital form of shopping, we
need to simulate the exact real-life concepts in our design.
• So that’s why we use the name and icon of shopping carts or shopping
baskets in UI design.
User control and freedom
• “Users often choose system functions by mistake and will need a
clearly marked emergency exit to leave the unwanted state
without having to go through an extended dialogue. Support
undo and redo.”
• That means the users must know if they make a mistake, they are not
going to get stuck somewhere and feel in control of the system
User control and freedom
User control and freedom
• If you attached a large file in Gmail by mistakenly, you can cancel it
before its fully uploaded.
User control and freedom
• Mozilla suggesting some security tips and handling exception.
User control and freedom
• History in Photoshop helps user in recovering previous steps.
Consistency and standards
• Users should not have to wonder whether different words, situations, or
actions mean the same thing.
• Microsoft Word, Excel, and PowerPoint all use the same style toolbar with
the same primary menu options: Home, Insert, Page Layout… Consistency
results in efficiency
Consistency and standards
Error prevention
• When you try to send an attachment through Gmail and forgets to attach it,
Gmail smartly detects that you haven’t attached the file and warn you
before you send the mail. This is Error Prevention
• Even better than good error messages is a careful design which prevents a
problem from occurring in the first place. Either eliminate error-prone
conditions or check for them and present users with a confirmation option
before they commit to the action.
• Google Docs automatically saves changes to documents as the user types.
This prevents users from losing their work if the browser crashes or if the
user accidentally closes the tab.
Recognition rather than recall
• Minimize the user's memory load by making objects, actions, and options
visible.
• The user should not have to remember information from one part of the
dialogue to another. Instructions for use of the system should be visible or
easily retrievable whenever appropriate.
Recognition rather than recall
Recognition rather than recall
• One more example is when Quora lets you pick the topics of interest from a
list of options rather than asking you to type all of them which would have
been disastrous.
Flexibility and Efficiency of use
• Shortcuts — hidden from novice users — may speed up the interaction for
the expert user so that the design can cater to both inexperienced and
experienced users. Allow users to tailor frequent actions.
• Keyboard shortcuts. Keyboard shortcuts allow users to perform common
actions with fewer keystrokes. This can be a significant time-saver for
experienced users.
• Multiple input methods. Some interfaces support multiple input methods,
such as keyboard, mouse, and touchscreen. This allows users to choose the
input method that is most comfortable and efficient for them.
• The Google Chrome web browser supports multiple input methods, including
Flexibility and Efficiency of use
Aesthetic and minimalist design
• Interfaces should not contain information that is irrelevant or
rarely needed. Every extra unit of information in an interface
competes with the relevant units of information and diminishes
their relative visibility.
• it's about making sure you're keeping the content and visual design focused
on the essentials. Ensure that the visual elements of the interface support
the user's primary goals.
Aesthetic and minimalist design
• An ornate teapot may have excessive decorative elements, like an
uncomfortable handle or hard-to-wash nozzle, that can interfere with
usability.
Aesthetic and minimalist design
Aesthetic and minimalist design
Help users recognize, diagnose, and
recover from errors
• Error messages should be expressed in plain language (no codes), precisely
indicate the problem, and constructively suggest a solution.
• These error messages should also be presented with visual treatments that
will help users notice and recognize them.
Help users recognize, diagnose, and
recover from errors
• Wrong way signs on the road remind drivers that they are heading in the
wrong direction and ask them to stop.
Help and Documentation
• “Even though it is better if the system can be used without documentation,
it may be necessary to provide help and documentation.
• Any such information should be easy to search, focused on the user’s task,
list concrete steps to be carried out, and not be too large.”
• It’s best if the system doesn’t need any additional explanation. However, it
may be necessary to provide documentation to help users understand how
to complete their tasks.
Help and Documentation
• Information kiosks at airports are easily recognizable and solve customers’
problems in context and immediately.