Design

Improving your UX and UI with phantom guides

4 min read
Baki Bektas
  •  Apr 4, 2016
Link copied to clipboard

Ever found yourself drawn to a design, and you weren’t really sure why? Don’t worry—you aren’t losing your mind.

There are some design principles so deeply rooted in human psychology that you may not even know they’re there. I call them phantom guides.

In a nutshell, phantom guides are the collective psychological phenomena that drives our subconscious and attention to the precise point where the designer wants it to be. It’s fueled by psychological predictions of human behavior, backed with mindfully constructed compositions. 

Want users to resonate with your designs on a deeper level? Use phantom guides.Twitter Logo Read on for a few ways to incorporate them into your work.

Relate to our primal needs

As humans, our survival depends on certain needs. We’re all instinctively seeking food, security, and reproduction. All these needs lead to predictable reactions when we’re exposed to relevant stimuli. A close-up photo of a perfectly grilled steak might make us salivate, or a lit fireplace in a cozy room might make us feel secure. In almost all cases, enriching your designs with clues to primal needs will get the attention you’re looking for.Twitter Logo

Sometimes it might not be appropriate to use such visuals in your design, but you can always substitute complex photos with flat colors. For example, the color red psychologically corresponds with fire and blood, which are clues to danger. So a big, red button will get more attention than a turquoise one.

An example of shelter from Blu Homes.

An example of reproduction from Diesel.

Gestalt laws are your best friend

Gestalt laws state that our minds tend to look for certain features in a composition—similarity, proximity, closure, symmetry, common fate, and continuity—to identify a message. This is the reason hierarchically similar functions and properties in a user interface, like navigation elements, get placed close together, appear and function similarly, and work as a whole.

As famous gestalt psychologist Kurt Kolfka once stated: “The whole is other than the sum of the parts.” The whole represents an independent existence rather than just a collection of parts. 

In this respect, web grid systems are also good supporters of gestalt laws since they align all elements in respect to each other and to the composition, eventually defining a meaningful whole. 

A great example from Gitman Bros.

Use easily recognizable forms

When we’re presented with a visual, we instantly search our memory for similar forms with the same features. We either recognize it as something we know by similarity in shape, color, and working behavior, or we label it as a new thing we need to figure out.

New information requires more thinking—and none of your users want to spend time figuring things out.Twitter Logo Keeping things simple and easily recognizable will attract more attention where it’s needed. If your UI elements have different forms than their real-life counterparts or behave differently than general expectations, users will have hard time recognizing the function of it, which requires excessive use of their limited cognitive resources. Giving clues to how your objects function will increase the rate of user interaction. Hover effects and shadows are some common examples of this.

“None of your users want to spend time figuring things out.”

Twitter Logo

But if you’re deliberately aiming for an irregular or unexpected look and to direct someone’s attention to a specific point, designing that one element in an unusual way (as a contrast to the others) will get attention as a side effect of the unknown/unexpected.

Nice example from Google AdWords.

Make cost and benefit clear

When we analyze a task, we look for the relationship between the difficulty of the task and the reward of completion. If the task is too hard and the reward is too small, why would we do it?

Motivational factors also greatly affect our perception of rewards. Since people are more motivated intrinsically than extrinsically, hints of a greater cause or an opportunity of mastery or self-improvement will have greater impact, rather than hints of money or any other extrinsic reward.  

The optimum balance between cost and benefit changes in every design problem, but as designers we must present the optimum amount so that an average user can willingly interact with it—without feeling overwhelmed. For example, displaying a progress bar motivates people to finish a form.

Clarifying the benefits of the product or the proposition reduces the amount of declines.

Provide limited options

Hick’s Law states that the more options presented to someone, the longer it’ll take them to make a decision. Plus, people may completely ignore a task if they feel it isn’t worth the effortTwitter Logo to consider all the options.

Jam Study supports Hick’s Law on this issue. Limiting the number of options to 4 or fewer will greatly increase your conversion rates. Showing too many options on a pricing table will paralyze users’ ability to compare and analyze the optimum choice and may lead to abandoning the process all together. If you really need to present more options, categorizing the options and making a subset of choices can help.

Making a “featured” or a “popular” list can reduce the number of items shown and increase the probability of sale.

Present information both visually and verbally

One of the most effective ways to present an idea involves using the Dual-Coding Theory, which says we have an easier time remembering something if representations of both visual and verbal stimuli are used in unison. This is commonly seen in feature list pages where both icons and texts are used together to make it easier for the reader to process and remember. This blog structure is also an example.

“If part of your design doesn’t serve a purpose, it’s got to go.”

Twitter Logo

And rather than placing all the information in a single block and expecting the user to take it all in on one sitting, try to divide copy into steps or a bulleted list. Since learning is a high-energy process, people prefer to see information presented in small piecesTwitter Logo with even more clicks to get there. Also progressively presenting the information when user requires it will maintain focus. Accordion and collapsible UI elements and on-the-fly Ajax calls are some of the good supporters of progressive information presentation.

Feature lists, landing pages, and how-to sites are big fans of Dual Coding.

Design with purpose

Less is more. For any design medium, strip off unnecessary elements. Otherwise, the message can wind up being cluttered and hard to understand. There’s a fine line between designing with purpose and decorating for fun.Twitter Logo If part of your design doesn’t serve a purpose, it’s got to go.

Example of less is more, from .

Phantoms are your friend

Phantoms have always been an iconic part of every culture, symbolizing our inner fears and joys. Since we’re designing for human interaction, in order to be successful we absolutely must have an understanding of what drives us.

Collaborate in real time on a digital whiteboard