Make your product work for people with these basic heuristic principles and smart software design

If you have ever conducted a usability study you have probably observed the difference between what people say they will do, and what they actually do.

Users rely on heuristics (ie rules of thumb) and limited information to make decisions. They make decisions quickly without stopping to consciously consider why one direction or the other is selected.

When designing a user interface it is important to keep heuristics in mind. Following these basic principles will help users successfully navigate your tool:

1. Context clues. Help the user know where they are, and what is happening. Offering appropriate visual cues and feedback within a reasonable time is important. Highlighting the navigation to indicate which section of the site they are in…

Highlighted “Get Started” navigation item lets the user know they are currently in that section.

or offering a loading indicator when the page is rendering, can be helpful.

Loading indicator lets the user know what is happening.

2. Match between system design and real-world elements. For example use of a trash can icon to represent deleting a file from your desktop.

“The system should speak the users’ language with words, phrases and concepts that are familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”
- Jakob Nielsen

3. User control. Give users the power to navigate your system as they choose, and recover easily when they make a mistake. For example, offering an undo feature, allows the user to easily recover, or roll back unwanted changes.

4. Error prevention. Using careful design, reduce occurrence of errors in data entry or click.

Providing users with form instructions, writing software to accept varied entries, and confirming intentions before they commit to the action is key.

Date entry is a good topic to discuss here. How will users enter dates into form fields? Frequently UI designers provide directions:

If the software is not written to accept multiple variations of date entry, following incorrect entry directions will result in error. This is off-putting and annoying.

Instead of requiring the user to enter mm/dd/yyyy or 10/23/2018 the user should be able to enter any date format style they desire. For example: October 23, 2018, Oct. 23, 2018, 2018/10/23 or 10.23.2018. The system should accept them all, instead of requiring the user to conform to the needs of the software. This simple change eliminates user error and the associated frustrations.

Contextual directions can be helpful, and are certainly useful. For example this form field instructs the user regarding a typical Internship Title.

Style directions are helpful. Entering the title differently will not result in error.

If the title is entered in a different format, however, the system will not error out. It will simply accept the information. There is a difference between using form instructions or helper text to give the user style tips vs mandatory instructions on how to avoid an error.

It is far superior to stop errors before they start by smartly engineering the back-end system.

5. Give users a way to correct errors themselves. If the system does generate an error, providing clear and concise directions regarding how to resolve it is key.

Clear directions to resolve an error are helpful.

6. Consistency and standards. Follow platform conventions with your design solutions. For example, clicking on the logo on a website typically returns the user to a website homepage. Navigation elements are generally along the top, or left side of a desktop navigation system.

Logo and menu placement follow established standards.

Hamburger navigation often opens a menu left, right or top on a mobile phone or tablet.

Hamburger navigation placement follows established standards.

Menu opens on the left.

Clicking on a table header generally sorts data by that column value.

Table headers sort data.

Following conventions allows the user to move quickly and not overthink each interaction.

7. 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.” - Jakob Nielsen

There has been a growing trend toward use of overflow menus within user interfaces. It is so prevalent that Android has a “…” menu built in to its standard user interface tools. Daniel Burka wrote a fantastic piece on Overuse of Overflow Menus. The key takeaway is: removing options from the UI does not simplify the user experience. It gives the illusion of simplicity. Hiding controls can be frustrating and difficult for users.

8. Flexible design for efficiency of use. Offering experienced users shortcuts, or designing systems that minimize work for the user will improve success.

For example, populate forms for users whenever possible. On this site, users can enter internships, training programs and networking events for students interested in technology careers. The user is first prompted to enter the URL for the opportunity they wish to add:

This tool asks for a URL and then pulls down data automatically.

The system then scans the content at the url and pulls information necessary to complete the form…

Pulled data saves the user tremendous time.

This greatly simplifies the user interaction involved with adding information to the site. In this case, smartly crafting the back-end system dramatically improves the user experience. Without this scraper users would have to copy and paste content for each field, or manually type it, and likelihood of user adoption and engagement would be low.

9. Design with purpose. Aesthetically, design for web and UI should be minimal and clean. Information should not be added if it is not necessary, and design elements should be kept simple and functional. Everything included within the design should serve a purpose.

Design is minimal, and everything serves a purpose.

10. Help and documentation. Offer a way to reach out, tool tips or a complete help forum to allow users to troubleshoot problems. Feedback from users is invaluable in growing your service over time.

11. Listen. When you receive feedback from users, listen and evolve your tool.

Heuristics provide helpful guidelines when designing a UI. These principles should be considered carefully. If you choose to break basic heuristic principles when designing your tool, do so with conscious thought. And, make sure to test it. Poor design can have an impact on your product’s performance.

Khaiersta Flowers English is Founder and Creative Director of Flower Press Creative Studio, a digital product design and development studio in Seattle, WA.