Tips & Advice, UI Design

Visibility: 5 Principles of Interaction Design To Supercharge Your UI (2 of 5)

In last week’s post, we discussed David Hogue’s first critical principle of interaction design, consistency. Today I’d like to share his second principle of interaction design critical to good UI Design and UX: visibility.

Put simply, Hogue says, you can’t invite interaction and engage visitors if they’re unaware that the opportunity to interact exists!

Principle 2: Good interaction design is Visible.

One of the ways our brain shapes experiences is that it’s constantly noticing and interpreting clues in our surrounding environment: what is it, what does it mean, what does it do? And while we notice just about everything (even unconsciously), there’s a balancing act required fro interaction design that (a) invites action and (b) is easily understood. People should be able to easily tell that an opportunity interact is available, and they should be abler to reasonably predict what the result of that interaction will be.

Hogue offers a word of caution, however: while interaction design cues should always be made visible, requiring no conscious thought, too many cues are often worse than none at all.

When we can’t tell what’s interactive, or when we can’t tell the difference between options, we guess. We click, tap and swipe at everything in sight, which leads to coincidental system actions and results. And if those results aren’t what we expected, we get nervous. Have you ever clicked a button more than once because the system didn’t seem to be responding? And then experienced a sequence of chaotic events once it did respond?

Timeless UI Principles

Good visibility, according to Hogue’s principles, means that obvious prompts and cues are present, which:

  • Lead the user through an interaction.
  • Guide them through a series of tasks.
  • Indicate what possible actions are available to them.
  • Communicate the context of the situation.

The following infographic provides some interaction design patterns that help you build visible prompts and cues in your UI design work. Click or tap here for a larger, downloadable PDF version.

Interaction Design Visibility

These are just some of the ways visibility can guide your UI design efforts. When users can easily see that an opportunity to interact is available, they’re more likely to use what’s there. And using common UI elements that they’re used to seeing across other sites and apps and systems allows them to reasonably predict what the result of that interaction will be — which gives them the confidence and encourages them to act.

Tune in next week for Principle #3! In the meantime, GIVE GOOD UX!

  • Ilse P

    Very nice articles! Great overview in the infographics.

    However, I was wondering how you consider those two conflicting guidelines:

    – Components with similar behavior should have a similar appearance.
    – Making the primary action a button instead of a text link makes it more obvious, accessible and visible (the above maps example).

    • Amith Raji

      Both tips are correct. The second one is just like an add-on that overrides the first one !
      The first one is for normal contents and second one is for the important ones.