Fundamentals of Human Interface Design

Fundamentals of Human Interface Design

Everyone markets their app as "easy to use" but we all know that only a small percentage of apps are truly intuitive. What really separates user-friendly apps from the rest? First and foremost, it's the products that exemplify HID - Human Interface Design.

HID is the essence of what makes software "design" intuitive for people. There should never be a need for a training manual to use the product.

However, "design" in this context is not just about the user interface and features: It ranges from iconography, organization, and animations to wipe / hover / click actions and the placement of features and elements. HID even includes prioritization user interface elements, as well as consistency and familiarity throughout the product experience.

HID can be thought of as a software interface with the real world - here are some examples:

iOS

iOS has added tap and swipe gestures to represent manipulating things with your hands. In real life, this can be opening a door (swiping to unlock), turning a page in a book (swiping right or left), and turning on a light (changing a setting with an on/off switch). These are very familiar things in the real world that Apple has spent a lot of time figuring out how best to represent in a mobile software interface.

Spotify

Spotify is another company that has taken mobile HID design to a new level. The team mainly uses guidelines from native iOS design for the visual user interface. However, as mentioned above, it's not just about the UI, but how the entire UI is packaged and works together. The placement of the main elements like scrubbers and music controls are at the bottom of the screen for the reason of how users hold their phones (thumbs to scrub). The Spotify 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 user interface - the map, all other elements of the product were de-emphasized as the most important: Where am I now? Where am I going?

It's also worth noting that Waze's icons are particularly effective.

Facebook

Facebook created the Newsfeed and Like buttons. The Newsfeed took the concept of a real newspaper and applied it to a software interface. The user can scroll up and down a page of news and updates on specific topics of interest - just as a person can switch between different sections of a newspaper to read different articles.

The Facebook Like button is another powerful example: the thumbs-up icon. The 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.

Given the HID examples above, here are some important product areas to pay close attention to when designing. Think carefully about HID and whether a person can understand how to use a feature (based on real-world experiences).

This might also interest you