Design

Improving your UX and UI with phantom guides

by

on

View all posts

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. Read on for a few ways to incorporate them into your work.

Relate to our primal needs

PhantomsGuides_sec1_header

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.

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 shelter from Blu Homes.

An example of reproduction from Diesel.

An example of reproduction from Diesel.

Gestalt laws are your best friend

PhantomsGuides_sec2_header

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.

A great example from Gitman Bros.

Use easily recognizable forms

PhantomsGuides_sec3_header

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. 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.”

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.

Nice example from Google AdWords.

Make cost and benefit clear

PhantomsGuides_sec4_header

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.

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

Provide limited options

PhantomsGuides_sec5_header_v2

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 effort 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.

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

PhantomsGuides_sec7_header

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.”

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 pieces 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.

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

Design with purpose

PhantomsGuides_sec8_header

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. If part of your design doesn’t serve a purpose, it’s got to go.

Example from .

Example of less is more, from .

Phantoms are your friend

PhantomsGuides_sec9_header

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.

Author

Baki Bektas
Baki Bektaş is UX/UI designer for JotForm, a leading online form creation platform.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.