IT1906

HCI Guidelines
Guideline Categories
HCI principles are general and applicable to wide areas and aspects of human-computer interaction design,
while guidelines tend to be more specific. Guidelines are a set of information intended to advise people on
how something should be done or what something should be. In human-computer interaction, guidelines are
straightforward and easy to understand but difficult to incorporate in actual design and implementation.
One reason why guidelines are difficult to incorporate to an actual design and implementation is the numerous
aspects to be considered, especially for enterprise systems. There are times when guidelines can even conflict
with each other, which will require prioritizing on the part of the designer and developer.
HCI guidelines are a set of recommended information used to direct HCI design and development. These
guidelines can be divided into criteria and category. Even HCI guidelines are more detailed than HCI principles,
there are no specific instructions on how to incorporate guidelines in HCI design. With this, Jennifer Tidwell
compiled user interface design patterns in the form of guidelines (refer to Table 1). Jennifer Tidwell is a writer
and a consultant in interaction design, information architecture, and pre-design analysis. She has designed
and built user interfaces for companies such as Google and MathWorks.

CRITERIA CATEGORIES EXAMPLE

General HCI Design Display layout, information structure, soliciting Combining colors in designing a
input, output visualization, design process and website, size of an icon
practice, user experience, general aesthetic
User Type Age/Generation, disability/accessibility, Kids, visually challenged, baby
occupation, consumer group, culture, gender boomers, students, athletes,
elders
Platform/System Mobile/handheld, large display/virtual reality, Smartphones, desktop, kiosk,
Setup public installation, operating system/network, embedded OS, cloud-based, MP3
embedded, desktop player, e-book
Vendor/Organization Private, public, design style/identity NASA, iOS, Android, Windows XP
Interface Style/ Windows, icon, mouse, and pointer (WIMP); Voice, gesture, multitouch,
Modality Non-WIMP; 3D; Multimodal multimodal, menu driven,
GUI/widgets
Task/Operational Location, time, noise/lighting, bodily Office, outdoor, home,
Context constraints automobile, subway, hands-free,
classroom
Applications Game, media, e-commerce, design/editing, Interactive interface of Facebook,
social network service interface of Adobe Photoshop

Table 1. Examples of criteria/category for HCI guidelines

Source: Human-Computer Interaction, 2015. p. 14
It is not possible to list and explain all the guidelines that exist in all areas and discipline. Despite the differences
in specifications, most guidelines are shared and can be understood in terms of higher level principles.

Examples of HCI Guidelines

Visual Display Layout (General HCI Design)
Display layout, or page layout, is one of the focus of design guidelines. This concerns the organization of
relevant information, both content and user interface elements, in one (1) visible screen or a scrollable page.

02 Handout 1 *Property of STI

 [email protected] Page 1 of 3
 IT1906

The display layout should generally be organized, manageable, and appealing. Here is a list of HCI guidelines
for a Web page layout put forth by the U.S. Department of Health and Human Services for the U.S.
government:
• Avoid cluttered display. • Optimize display density.
• Place important items consistently. • Align items on a page.
• Place important items at top center. • Set appropriate page lengths.
• Structure for easy comparison. • Choose appropriate line lengths.
• Establish level of importance. • Use frames when functions must remain accessible.

Taking User Input (General HCI Design)

Crafty designs for taking user input, such as raw information and system commands, can improve the overall
performance, especially time and accuracy, for high interactive systems. A high interactive system usually has
a modern interface, which also pertains to a graphical user interface.

Graphical User Interface (GUI) is an interface through which a user interacts with electronic devices such as
computers, mobile devices, and other appliances. This interface includes elements like button, text box, menu,
forms, icons, and other visual indicator representations to display information and related user controls. These
are the HCI guidelines for facilitating data entry:
• Consistency of data-entry actions • Design of forms and dialog boxes
• Minimal input action by the user • Do not place semantically opposing entry or
• Minimal memory load on users selection options close together.
• Compatibility of data entry with data • Match and place the sequence of data-entry
display and selection fields in natural scanning and
• Clear and effective labeling of buttons hand-movement directions.
and data-entry fields

User with Disability (User Type)

The World Wide Web Consortium (W3C), an international community where organization staff and the public
work together to develop Web standards, published Web Content Accessibility Guidelines (WCAG) 2.1 in 2018.
This set of guidelines covers a wide range of recommendations for making Web content more accessible to a
wider range of people with disabilities, including accommodations for blindness and low vision, deafness and
hearing loss, and limited movement. Here is a summary of the guidelines:
• Perceivable – Information and user interface components must be presentable in ways users can
perceive.
o Provide a text alternative for non-text context.
o Provide alternatives for time-based media.
o Create content that can be presented in different ways without losing information or structure.
o Make it easier for the user to see and hear content.
• Operable – User interface components and navigation must be operable.
o Make all functionality available from a keyboard.
o Give users enough time to read and use content.
o Do not design content in a way that is known to cause seizure or physical reactions.
o Provide ways to help users navigate, find content, and determine where they are.
o Make it easier for users to operate functionality through various inputs beyond the keyboard.

02 Handout 1 *Property of STI

 [email protected] Page 2 of 3
 IT1906

• Understandable – Information and the operation of user interface must be understandable.

o Make text content readable and understandable.
o Make Web pages appear and operate in predictable ways.
o Help users avoid and correct mistakes.
• Robust – Content must be robust enough that it can be interpreted by a wide variety of user agents,
including assistive technologies.
o Maximize compatibility with current and future user agents, including assistive technologies.

Mobile Device (Platform Type)

Smartphones are widely used nowadays. Usability and other user experience of mobile devices and
applications have become more important. These are the specific HCI guidelines summarized by Tidwell:
• Fast status information, especially regarding the network connection and services
• Minimize typing and control on mixed input like buttons, touch, voice, handwriting recognition, virtual
keyboard, etc
• Intense task focus to lessen confusion in a highly dense information space
• Large hit targets for an easy and correct selection and manipulation
• Efficient use of screen space.

References:
About W3C. (n.d.). In World Wide Web Consortium. Retrieved from https://www.w3.org/Consortium/ on May 14, 2019
Kim, G. (2015). Human-Computer Interaction Fundamentals and Practice. USA: CRC Press.
Meaning of Guideline (n.d.). In Cambridge Dictionary. Retrieved from
https://dictionary.cambridge.org/us/dictionary/english/guideline on May 10, 2019
Tidwell, J. (n.d.). Designing interfaces (2nd ed.). O’Reilly Media: https://designinginterfaces.com/about-the-book/
World Wide Web Consortium. (2018, June 5). Web Content Accessibility Guidelines (WCAG) 2.1. Retrieved from
https://www.w3.org/TR/WCAG21/ on May 14, 2019

02 Handout 1 *Property of STI

 [email protected] Page 3 of 3