Interaction Design Best Practices — Part 5

Affordances — The Interaction Designer’s Secret Weapon: Different Types of Signifiers and How to Use Them

Let Form Suggest Function: Affordances vs. Signifiers

Photo credits: behance.net
  • Explicit Signifiers — Obvious signifiers, such as words or appearances.
  • Pattern Signifiers — Trends and customs that have been popularized to the point of common understanding. See Web UI Patterns 2014 for visual case studies.
  • Hidden Signifiers — Signifiers that do not become apparent unless certain conditions are met.
  • Metaphorical Signifiers — Using a metaphor to signify its meaning, for example, an envelope icon representing email.

Explicit Signifiers

Photo credits: UXPin

Pattern Signifiers

  • Blue text representing links
  • Logos representing the homepage
  • Asterisks representing mandatory form fields
  • Cards representing clickable teasers
  • Hamburger menu representing navigation
Photo credits: Hulu

Hidden Signifiers

Photo credits: Pinterest

Metaphorical Signifiers

Photo credits: Chicago Works App

Takeaway

--

--

--

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Event Chatbot Case Study.

Planning to build an app in Arabic? This is all you need to take care of

Stop evaluating Product Designers like we’re Visual Designers

Image sourced from a Spotify Case Study showing a new Shared Playlist feature

OUR RESPONSIVE LEARNING EXPERIENCE

Nested Symbols 101 — scaling Sketch

Indian Bank Mobile Banking App: Redesign

Design Thinking: The Process

Possibilities | an invitation to product development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
UXPin

UXPin

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

More from Medium

REFACTORING UI: A BEGINNERS GUIDE

What is UI Design?

Why Wireframes Are Important When Designing A Digital Product

Super Easy Figma tutorial | Animating gradient text