Designing for the Human Mind
Diving into the world of Visual Communication
When designing an interface that is to be used by humans (be it website or app or restaurant menu), you’ll want to take your UX mindset, some Visual Hierarchy, and the Gestalt principles out of your toolkit. You should also take our many, uh, quirks into account.
I’m assuming that you, dear reader, are a human. But just in case you aren’t, I’ll go into a little more detail about a few of these quirks
We’re extremely prone to distraction.
This characteristic plays out in many ways, but when it comes to designing an interface, less is often more. This means that simplicity is key.
We forget things.
Our longterm memory is great at many things (remembering birthdays, where we live, who our parents are, etc), but it is also flawed in many ways. As Jeff Johnson explained it in his book Designing with the Mind in Mind:
“…it is error-prone, impressionist, free-associative, idiosyncratic, retroactively alterable, and easily biased by a variety of factors at the time of recording or of retrieval.”
Our short term memory isn’t much better.
Most people have had the experience of listening to someone talk and suddenly realizing you have no idea what they just said. Or reading a book and getting to the bottom of the page only to realize they didn’t absorb anything. That’s because our short term memory has a very low capacity for holding information. In other words: the more things you have vying for your attention, the less you’ll remember.
We like things that feel familiar
I can’t speak for everyone, but I‘ll say with relative certainty that most humans like hanging out inside their comfort zone. In UI design this translates to sticking to the current industry standards when it comes to designing the layout of a page.
Now, you may have been distracted this whole time thinking “She mentioned Gestalt principles. What the heck are Gestalt principles!?” and not absorbed a word I’ve said. If that’s the case, let’s get you up to speed:
Gestalt (a German noun: form, shape, figure) is a group of visual perception principles developed by German psychologists in the 1920s. It is built on the theory that “an organized whole, is perceived as greater than the sum of its parts”. The Gestalt principles attempt to describe how people perceive visual elements when certain conditions apply.
Eleana Gkogka wrote this excellent piece explaining Gestalt principles in UI design. Head over there to grow your brain!
Since humans are frequently not great at visualizing things using words alone, let’s take a look at the following websites.
First, let’s look at Google:
Google’s landing page is a beautiful example of visual hierarchy (just look at all that white space and contrast!).
There’s no question that it’s pleasing to look at. But let’s think about why it’s so pleasing.
Google’s UI team has done an excellent job designing for the human mind. They’ve taken our inability to focus into account and kept things simple.
Our attention is drawn to the center or the page, where they’ve placed their logo, the search bar, and two buttons (remember the diagram from earlier? This would be considered Good Figure in Gestalt principles). Proximity tells us that all of these components are related. The two buttons look similar but clearly communicate that they do different things. One will take you to endless pages of potentially related links, the other will take you directly to a place you may or may not want to go.
Next, let’s take a look at Google Drive:
Simplicity is definitely part of Google’s brand. As we saw earlier with their home page, they use plenty of visual hierarchy principles.
The more documents we save, the harder they become to find. Taking this into consideration, Google’s UI team made the search bar big and put it right on top, making it easy to find.
Proximity (and some handy labels) tell us that there are 3 sections: Quick Access, for finding our recent files; Folders, which is self-explanatory; and Files, where the entire contents of our Drive live. It also tells us that the links on the left are all related to navigation.
Finally, let’s look at Udemy:
Immediately upon arriving, our eyes are drawn to the Unique Value Proposition (UVP): Learn it. Do it.
The design of the page is engaging, yet relatively simple. It catches and holds our flighty attention without bombarding us with too much information at once.
The Gestalt principles good figure, similarity, symmetry, and proximity make navigating the page about as close to effortless as you can get.
Tying it all together
Before we go, let’s take a minute to compare and contrast the sites we just examined.
While they follow many of the same principles, they have very different vibes. Google and Google Drive offer focus through a simple lack of distraction, Udemy holds our attention through visual stimulation and organized options.
Phew! We covered a lot. Thanks for sticking with me to the end.
