Human Interface Guidelines – 3 Key Components

Human Interface Guidelines (HIG) and other similar documents introduce users to a body of information underlying the user interface and interaction design of a particular product or system. This information is shared so others can use and follow it when creating something that should embody the original product design and be consistent (Wikipedia offers a good definition and example documents). The key to creating a useful HIG is in understanding what information to include.

I’ve authored several HIGs intended for internal project consumption and a few for external, public use. In catering to a variety of stakeholders, there can be a wide range of information to communicate. For example, you can discuss the landscape and ecosystem of the product, the market and target audience, or design methods and processes. For this short article, I’ll focus on the instructional portion that provides specific design guidance.

Three Essential Components

Lightweight HIGs simply inspire but suffer from a lack of being actionable, while more weighty versions provide enumerated instructions and recommendations but lack that special something to create a coherent picture and understanding. The key to creating a well-balanced and effective HIG comes from a minimum of three components you’re undoubtedly familiar with, but perhaps never quite thought of in this way:

Figure 1: Heart, head, and hands are 3 key components

“Heart, head, and hands” is a mnemonic I use to remind myself of these essential components and each one’s purpose. To lead by design you need to motivate people (heart) to think a certain way (head) necessary to act appropriately (hands). Overall, the goal is to engage the reader’s heart, head, and hands in exactly this order.

Heart

The first section must engage the heart by conveying a vision to inspire, ignite passion, and infuse motivation within your readers. Heart information represents the soul of your product, and the spirit of it should be unique and authentic in order to truly drive designers and developers to connect emotionally and believe in the “why”.

Figure 2: Engage the reader’s heart to motivate them

The heart must have conviction and be deep-rooted, firm, and unbending to whim or trends. It would take something quite significant once in a long, long while to cause a change in values at this level. The heart is close to the essence of a brand and your Marketing department’s research should uncover your target audience’s true singular ‘emotional benefit’. Once you have that, incorporate it and have everything else align to it.

Note, many companies don’t publish their heart information publicly. In many cases, it is treated as a form of intellectual property and reserved for internal and partner eyes only (hence, the lack of examples for me to share with you). Very few would care to expose their soul publicly. Nevertheless, it does exist and should be integrated with your team’s HIG and shared with key stakeholders.

Head

The next section begins to distill the heart and soul, translating emotions into something you can get your head around. Head information channels the emotional energy into a focused set of mental strategies, more specifically, a set of principles.

Figure 3: Engage the reader’s head to focus their thinking

Here are a few design principles from Apple for their iOS human interface:

• Aesthetic Integrity
• Consistency
• Direct Manipulation

Design principles can be divided into two types: General and Custom. General design principles are valuable as good design practice and may apply equally well to almost any product. The example principles listed above are a case in point; which product wouldn’t benefit from following those principles? These more ubiquitous principles are fundamental and your product should embody them as a matter of good design. Your goal shouldn’t be to list them all, but rather to include the few that are a priority or point of focus for your solution.

Custom design principles on the other hand are differentiated, but still tuned to your heart. Custom principles are usually born from unique and innovative solutions (e.g., new interaction paradigms, new technology, etc.) like Microsoft Surface’s social principles around multi-user and 360-degree UIs. Potentially rooted in and derived from general design principles, these custom principles are not generic and can’t be found in any book teaching good design practices. Creating these custom principles is hard and will take time, so expect to visit and refine them repeatedly. Ultimately, your head information may contain a mix of general and custom principles, ensuring both good and differentiated designs.

Hands

Hand information in turn demonstrates the abstract principles in action through concrete examples and hands-on recommendations and guidelines. At this level, it’s important to enumerate UI elements and present as much relevant information as possible (e.g., states, behaviors, usage patterns, relationships, transitions, visual, motion, audio, etc.). You’ll know when the hands information you’ve provided is useful when it’s concrete, clear, and easy to follow (i.e., create the path of least resistance). For example, a software developer’s kit (SDK), or other similar tools, provide a library full of UI objects that already embody by default the desired look and feel (micro-usability).

Figure 4: Engage the reader’s hands to help them act appropriately

Here are a few example guidelines from Microsoft Windows for check-boxes:

• Group related check boxes. Combine related options and separate unrelated options into groups of 10 or fewer, using multiple groups if necessary.

• List check boxes in a logical order, such as grouping highly related options together or placing most common options first, or following some other natural progression. Alphabetical ordering isn’t recommended because it is language dependent, and therefore not localizable.

• Align check boxes vertically, not horizontally. Horizontal alignment is harder to read.

This section will be the largest of all three, but also the easiest to create. You can draw upon all your work products to explain and illustrate (e.g., screen shots, specifications, prototypes, motion studies, sketches, wireframes, visual comps, storyboards, etc.). Also, I’ve found that it’s useful to occasionally include ideas and designs that seem reasonable or expected but don’t actually work (and why).

At this hand level, usability studies will help shape and refine specific UI elements and interactions so that your guidelines and recommendations will be based on tested and proven results. Consequently, others who follow your lead can trust in what they inherit from you. Expert or heuristic evaluations of their product can be done against the design guidelines to ensure compliance. Of course, usability studies will still be necessary to address macro-usability.

If the heart should be firm and unchanging, then how can a product stay fresh and react to trends? If your product has its own release cycle, where on some periodic basis a new updated version is released, then the hand information can be refreshed to account for a new style. By example, think of BMW; its unwavering heart is about performance and the “ultimate driving machine”, yet year after year their hands produce updated models with fresh styles (e.g., new colors, lines, headlights, and grill). The hand creates a specific look and feel, complete with signature expressions that users will recognize and associate with your brand, and it is at this level where designs can be refreshed and re-imagined while staying true to the heart.

…And All for One

All three components form a coherent story wherein they complement and strengthen one another. The heart is the life-force creating the bigger picture that unifies everything with passion and purpose. The head provides the strategy and high level principles guiding the spirit of the design. The hands act to express the head and heart with tangible and detailed design do’s and don’ts.

Figure 5: All 3 components are essential

Could you get away with having your readers not feel or think and just do? Well perhaps, if you could predict every situation and trust that no one will ask “why?” The heart and head not only provide motivation, but also a higher level of guidance in the event there are gaps at the lower action level. The heart and head enable people to remain true and aligned as their hands extend, fill gaps, innovate, refresh, and customize when necessary.

Figure 6: Characteristics of each level along a spectrum

Given everything described so far, it should be clear that HIGs should not be created at the end of a project. Specifically, the heart and the head must be articulated in advance to some reasonable level in order to effectively drive and align your own design work. Furthermore, your handcrafted designs can be more appropriately critiqued and more easily sold when put in the context of the head and heart. Realistically, there will be some back-and-forth, wherein these three components of the HIG and your design work will influence each other.