February 9, 2021
I had considered titling this blog “5 tips for hacking design,” but it occurred to me that using click bait to encourage good design practices might be in poor taste. Also, it should go without saying that there are myriad design principles related to style, function, and safety well worth studying, not just five. For example, several colleagues and I developed a book titled Designing for Safe Use that describes and illustrates 100 principles for designing safety into a product’s user interface. Resources like this and other well-known sources such as AAMI HE75 Human factors engineering – Design of medical devices are beneficial and relatively easy to use for anyone, even non-designers. However, these sources don’t always help during impromptu discussions and ad-hoc meetings where you (who might be a project manager, researcher, or other team member not directly trained in design) play a role in helping guide a product development effort. Moreover, without some basic principles and terms committed to memory, some conversations could become strained and open to misinterpretation. Fortunately, learning a small set of “go-to” principles you can keep in your back pocket is relatively easy and can greatly enhance your ability to engage in design-related discussions.
So, I asked myself, “Of all the design principles I could recommend committing to memory, which ones would they be?” I have found over the years that the following five design principles come up very often in product development discussions, and tend to have significant, actionable impact. To be fair, there are multiple “principles” within each point below, but if you can achieve a basic understanding of each, you should be able to begin using them.
- Gestalt principles – early in the 20th Century, psychologists known as Gestaltists (the German word Gestalt meaning “form,” “pattern,” or “configuration”) theorized that humans make sense of the world by perceiving patterns, not just individual components, to define the objects and spaces in their environment. There are about six to eight of these simple “laws” that are relatively easy to learn through graphical examples. For example, the law of proximity states that items that are near each other will be perceived as a purposeful group. Given a world full of 2D interfaces, such as those on-screen or in print, the Gestalt principles are very useful when deciphering why and how a graphical user interface, or printed material, does or does not feel “right,” and what you can do to improve it. I still go back to Wikipedia and articles like this one by Cameron Chapman for easy-to-read reminders of these principles.
- 10 Usability Heuristics for UI Design. I’m calling out these 10 heuristics from Jakob Nielsen because they are arguably the most popular and longest-standing set of principles (unchanged since 1994) in modern UI/UX design. Starting here should immediately lay some common ground with any designers you work with. You might even have heard of some these, such as principle #1 “Visibility of system status,” which suggests that the design should always provide the user with its status. While Nielsen’s list is a solid start, I would be remiss not to include that many on our team (and many others) have developed variations and additional heuristics in numerous books, webinars, articles, and blogs that provide added nuance and specificity (e.g., with a focus on software UI, hardware UI, or topics like inclusivity). We encourage you to explore and ask us about them.
- Contrast. When reviewing user interfaces, we often find a lack of adequate contrast on graphical elements, which can make it difficult for users to read information or notice, find, or understand that an element represents a unique feature. A good baseline is 7:1 foreground-to-background contrast ratio for interactive elements and text, increasing this ratio as the criticality of the control or information increases (and decreasing to a minimum of 3:1 as elements become less important). There are various references for contrast ratio. The World Wide Web consortium, provides well accepted guidelines for contrast ratios in text (see 1.4.3, 1.4.6), non-text elements (see 1.4.11). You can also find contrast analyzers online, like the one linked here.
- Legibility. Legibility encompasses several characteristics including contrast, letter case, and of course font style. However, proper (or improper) text sizing can contribute a great deal to a user interface’s layout, information hierarchy, ability to be translated (e.g., needing more or less space to accommodate other languages), and ability to accommodate use scenarios (e.g., when will a user be reading information at arm’s reach, versus glancing from several feet away). Like contrast, text size is fairly easy to check. The size of characters (e.g., text, symbols), as it relates to legibility, is measured in the degrees of visual angle the object spans when viewed from a specific distance. In short, the further away the viewer, the larger the text will need to be for it to be readable; consider the enlarged size of lettering on a highway road sign, for example. About 20 to 22 minutes of arc (there are 60 minutes in one degree) is a good baseline for assuring legibility. For example, from a reading distance of around 18 inches, you would want a character height of around 0.1 inches, which might be a typical 10- to 12-point font letter, which aligns with US Food and Drug Administration (FDA) guidance. Beyond that, you might consider using 24 to 30 minutes of arc to size critical information, such as an alarm signal.
- Safety inf.! Many of you will be familiar with the words “DANGER”, “WARNING,” “CAUTION,” and “Notice.” Here is a nice overview article from a signage company related to ANSI Z535 and ISO 3846 standards. You may also be familiar with the concept of “Low,” “Medium,” or “High,” priority alarms in a medical device (per IEC 60601-1-8 alarm standard, Table 2). But, I doubt many can quote these signal words’ intended meaning and specific formatting requirements. This might seem like the niche knowledge you would rely on your regulatory or engineering teams to provide. However, these terms are intertwined with what is arguably one of the most fundamental activities for applying human factors engineering to medical device development: the use-related risk analysis. Specifically, the levels of severity you identify in your risk analysis correlate directly with information that might need to be communicated through the user interface (e.g., labels, instructions, screen alerts), unless mitigated in some other manner. The warnings, or alarms that need to be communicated can have great impact on the user interface given you must carefully select colors, prominent locations, and formatting that should be reserved for communicating this key safety information. Going further, alarms and/or safety messages also provide useful markers of some critical tasks, which ultimately find their way to validation testing. Learning the foundational definitions and formatting of these safety labels and alarm states is relatively easy, and this can give designers, developers, and project managers a powerful framework for discussing user interface design and use-related risk.
Keep in mind there are countless principles, heuristics, and best practices for developing safe, effective, and satisfying designs. The five topics I chose here are likely an outcome of the space our team often occupies; one in which we are always designing and evaluating products that have some use-related risk and potential for harm. Presumably, if you were involved in designing footwear, you would come up with a different list of your five most handy principles. The main point is that gaining a command of a few core design principles can begin with very little effort; read a few articles, look at a standard or two, and have a quick chat with a couple of your design colleagues. This will have a significant impact on the ability of anyone involved in the product development process to engage in effective discussions, and contribute to safe, effective, and satisfying designs.
Cory Costantino, CHFP is Design Director at Emergo by UL’s Human Factors Research & Design division.