Human Interface Design Basics

Everyone markets their app as “easy to use”, but we all know that only a small portion of apps are truly intuitive. What really separates easy to use apps from the rest?  In my experience, it’s the products that exemplify HID – Human Interface Design.

HID is the essence of what makes the “design” of software intuitive to people. No training manual should be required to use your product, ever.

But “design” in this context is not just about the UI and features: it’s everything from the copy and language to iconography, organization, and animations, to swipe/hover/click actions and the placement of features and elements. HID even encompasses the prioritization UI elements and consistency and familiarity throughout a product experience.

What I personally love about HID is the idea of connecting software interfaces with real life experiences. These interfaces are both familiar and naturally intuitive, just by being alive. There are so many examples of HID out there, and many are built into the software we now use every day; to name a few:

iOS

iOS added tap and swipe gestures to represent manipulating things with your hands. In real life, this could be opening a door (swipe to unlock), turning a page in a book (swipe right or left), turning on a light (changing a setting with an on/off switch). These are very familiar things in the real world that Apple spent a lot of time figuring out how to best represent in a mobile software interface. I highly recommend reading the book, Creative Selection to learn more. There’s a good reason why the iPhone placed where it did in the market, it’s HID was so successful that Android admitted to having to start over the day that the iPhone launched.

Spotify 

Spotify is another company that took mobile HID design to new levels. The team largely uses guidelines from iOS native design for the visual UI, but as I mentioned above it’s not just about the UI, it’s how the entire interface is packaged and works together. The placement of the primary elements like the scrubber and music controls are at the bottom of the screen because of the way people hold their phones (thumb used to scrub). Spotify’s team also uses familiar iconography and copy from previous ways of listening to music (i.e. radio, shuffle, repeat).

Waze

Waze emphasized the most important elements of its product in the interface – the map, all the other elements on the product were emphasized less than what is most important: where am I now? Where am I going?  It’s also worth noting that Waze’s icons are especially effective; I love the icon that represents police nearby (the man with a mustache and hat).

Facebook

Facebook created the News Feed and Like button. The News Feed took the concept of a real world thing, a newspaper, and applied it to a software interface. The user can scroll up and down a page of news and updates related to particular topics of interest – the same way a person can flip between different sections of a newspaper to read different articles. 

The Facebook Like button is another strong example: the thumbs up icon. The whole point of the Like button is to convey agreement or shared understanding without speaking or writing. In the real world, you give someone a physical thumbs up. On Facebook, the idea of liking a post to represent the same thing without having to write a comment was game-changing for their product and how social software gets used in general. Likes have now evolved into reactions since, but the HID origin of the like button remains the same.

Given the HID examples outlined above, here are some important areas of product that I strongly recommend paying close attention to as you design. Be sure to think carefully about HID and whether a person could naturally understand how to use a feature based on real-life experiences.

• Iconography: Do your icons represent whatever your interface is trying to convey? Is it familiar? Think of the police officer in Waze.
• Copy: Does the copy represent something familiar and common in the user’s own language? (Localization is way more than basic translation, the selection of words should register something familiar in the real world). Think of the Facebook ‘News Feed’ or iOS’ Wallet app.
• Primary Emphasis: What parts of the interface should be emphasized over others? How does the user interact with them on a frequent basis? Think of Waze showing full screen map on mobile and using floating action buttons for secondary interfaces.
• Instinctive Design: Is it naturally intuitive to people to use your product to perform the intended actions on a repeated basis (habit building)? Think of everything in iOS. Swiping left/right/up/down, single tap gestures, pinch in/out to zoom in/out of a photo or document, even the size of the app icons on the iOS home screen that form fit to the tip of your finger. It’s all naturally intuitive and based on human instinct.

Great products can come from anywhere and solve many different problems in different ways. But the design of how people interact in general is really tough to change. Things in the product are either familiar and intuitive to most people or they aren’t. Use the HID guidelines to help bring to life the key use cases and problems solved by your product in the easiest and most natural way possible.  And remember, a training manual should never be required by your target users to use your product.