Illusions—namely optical or visual illusions—are perceptual phenomena that influence the mind to perceive something either that is not there or differently from how it is. They occur due to how the brain processes visual information, often via Gestalt laws. Designers use illusions to guide users' attention, create a sense of depth and hierarchy and ultimately enhance the overall user experience.
Author and Human-Computer Interaction Expert, Alan Dix explains sensation and perception—axes around which reality revolves for the human mind.
How do Designers Use Illusions to Help Users?
In user experience (UX) design and particularly user interface (UI) design, designers use techniques to leverage users’ perceptions and create engaging and memorable experiences. Designers apply principles from psychology and visual perception, especially the Gestalt laws or principles—also common in graphic design. When designers do this, they can influence how the users of their digital products perceive and interact with these interfaces. Optical illusions involve various visual cues and tricks to create effects that captivate and engage users on web pages, mobile apps and more.
Designers typically incorporate illusions into their design work with several purposes in mind. They can guide users' attention to desired features, enhance visual hierarchy, provide visual feedback and communicate information in ways that can grab users’ attention more profoundly. When designers work illusions appropriately into their designs, they can create interfaces that aren’t just functional but visually delightful and immersive, too.
Designers frequently tend to rely on Gestalt laws to help with illusions. Gestalt psychology has a focus on how humans perceive—and interpret or make sense of—visual information as a whole rather than as individual elements. Gestalt psychology puts emphasis on the idea that the mind organizes visual stimuli into meaningful patterns and structures—and does so automatically. So, when designers create objects in visual design, they can cast powerful messages to their target audience at a glance. What’s more, when designers work with Gestalt laws such as closure, figure-ground, proximity, similarity and continuity, they can strengthen their brand’s presence—plus build trust with the users of their products or services. Such optical tricks are more than the sum of their parts.
The Gestalt law of figure-ground in three forms, from left to right: stable (it’s clear what’s in the foreground), reversible (foreground and background are interchangeable) and ambiguous (elements can seem to be both figure and ground at the same time, leaving it up to the viewer how to approach the image).
© Steven Bradley, Fair Use
What’s more, designers can use illusions to enhance visual feedback and give a sense—or a greater sense—of interactivity. For example, they can incorporate animations that simulate movement or depth. In this way, designers can create the illusion of elements responding to user feedback and actions, and so enhance the overall user experience.
Here are some ways Designers apply illusions in UX design:
1.Visual Hierarchy
Designers use size, color, contrast and positioning to create a visual hierarchy that guides users' attention to the most important elements on a page, as explained in this video.
For design projects, it’s important to establish a strong hierarchy and information architecture so users can recognize at a glance what they need to do to solve their problems and achieve desired goals.
When designers create products, they need to leverage visual design principles to establish a clear hierarchy, so users know what’s a priority and what to do.
© Interaction Design Foundation, CC BY-SA 4.0
2. Depth and Layering
When they create the illusion of depth through shadows, gradients and overlapping elements, designers can make the interface more engaging and easier to navigate. For example, raised elements with shadows make great signifiers for interactive buttons. Meanwhile, sunken or hollow elements can indicate input fields—particularly user-friendly and handy for mobile devices. Also, shadow effects such as inner shadow can give the illusion of response to a finger pressing on a screen.
Note the shadowing around the button on the right, and how it lends itself more to the suggestion of pushing.
© Neha Mestry, Fair Use
3.Motion and Animation
Animated transitions, micro-interactions and parallax scrolling are items that can provide a sense of movement and depth—and can make the interface more dynamic and engaging. What’s more, they can provide much-needed feedback to users. When designers get to work with techniques like the phi phenomenon or the wagon-wheel effect, they can make the illusion of movement—and that’s something that can be particularly effective to guide users' attention—or give feedback on certain actions. For example, a loading animation that gives the illusion of continuous rotation can make users get a sense of progress, and this holds true even if the actual loading time is longer.
The Phi phenomenon gives the illusion of movement—in this loading spinner, for example—to inform users of system feedback.
© David Hall, Fair Use
4.Optical Effects
The perception of size and proportions isn’t always reliable. Designers can apply optical illusions to manipulate these perceptions in user interfaces. And if they bring things like the Ponzo illusion or the Muller-Lyer illusion into the picture, they can make elements look larger or smaller than they are in reality. That’s something that can put emphasis on certain elements, give a good sense of balance—or guide users' attention to specific areas on the interface. For instance, when designers use converging lines to create the Ponzo illusion, they can make an element appear larger than it really is—and that’s due to the perceived distance.
Designers can use these types of illusions to guide users’ eyes to specific areas of the interface and establish hierarchy, depth and perspective. For example, in the illusion on the right, the horizontal lines are the same length.
© Interaction Design Foundation, CC BY-SA 4.0
5. Negative Space
When designers strategically use negative space, they can create the illusion of simplicity, elegance and clarity. This lets users really focus on the interface’s essential elements. The effect can help lighten the users’ cognitive load and improve their overall experience. What’s more, when designers cast a sense of simplicity and minimalism in user interfaces, they can signal a high-quality brand image—doing that through an uncluttered, clean and elegant look. For instance, when they use enough white space around elements, they can infuse their design with a sense of elegance and simplicity. This lets users really focus on the essential content.
Apple's clean, lean look leverages white space to help achieve its iconic appearance.
© Apple, Fair Use
6. Color and Contrast
When designers manipulate color and contrast, they can influence users' perceptions, draw attention to specific elements and create visual interest. Through their skillful use of color theory, designers can make helpful design decisions—decisions based on:
a. Color Gradients:
Apply color gradients to carry a sense of depth and dimension—and so give a boost to the interface’s visual appeal.
b. Contrast:
Use contrast strategically to put emphasis on important elements and give a sense of depth within the design.
An example of simultaneous contrast—note how the moving rectangles seem to be different colors when they move over their respective backgrounds.
© Circ Cular, Fair Use
How to Apply Illusions in UX Design
To get the power of optical illusions working so they can create visually engaging interfaces, designers should:
1. Understand the Principles of Perception
A strong understanding of the principles of perception—for instance, Gestalt psychology—is vital. So, designers should add concepts like visual hierarchy, proximity, similarity and closure to their design tools. That’s because of how these principles play such a crucial role—and a time-tested one—when it comes to creating illusions that are meaningful and have impact. It’s really important to appreciate the subtle points of alignment—and how users’ eyes are used to seeing certain patterns and forms on screens, too.
Note the subtle difference in label alignment—a small point, but important for users’ perception.
© Interaction Design Foundation, CC BY-SA 4.0
2. Use Optical Illusions Purposefully
When designers work optical illusions into their designs, it’s a must to use them with a clear intention. So, think about what the specific goals and objectives of the interface are—and design the illusions according to those. Don’t use illusions for the sake of visual flair on its own. Focus—instead—on how they can enhance the user experience, and so get the desired message across to users. Make sure that the effects really do run in line with the user's goals and improve how they make sense of and understand the interface. Illusions shouldn’t confuse or mislead users—designers need to earn their users’ trust, fast.
Moddeals’ pattern here leverages the Gestalt figure-ground relationship. The newsletter ad appears, and the rest of the page darkens, going into the background—which the user can still scroll.
© Moddeals (via Jerry Cao), Fair Use
3. Balance Illusions with Usability
While optical illusions can be visually engaging, enticing and helpful, it’s crucial to strike a balance between aesthetics and usability. Be totally sure that the illusions don’t get in the way of usability—or even confuse users. Another point—and one that’s extremely important here—is to design with accessibility firmly in mind—so be sure to think about factors like color contrast and readability. That’s how to make sure that the illusions can actually be accessible—to all users. Usability testing is especially helpful here. It can show up many pain points, and so can help with boosting user-centered design.
It’s also a vital thing to do to keep the effects subtle. So, don’t overwhelm users with excessive illusions—or ones that are distracting. Another point here is to always remember to stick to those established design principles and patterns. For example, most users may be used to shadow effects as feedback to screen presses. It’s a vital point to enhance the user experience without overshadowing the content or functionality of the interface.
Mach bands—there aren’t really any shadows in the above; it’s an illusion.
© Circ Cular, Fair Use
4.Test and Iterate
Now it’s time to validate how effective the illusions are—through user testing—and to get in feedback to refine and improve the design. Users' perceptions and interpretations may vary, and by quite a bit. So, it’s a crucial point for designers to collect insights from a diverse user base. And—as with any design element—be sure to test and iterate on optical illusions. Do solid user testing to get feedback on how users perceive and interact with these. Then, make adjustments based on those insights—to be sure that what users see effectively serves the intended purpose.
In this example of the Hermann grid, viewers can note how phantom grey dots show up at the white intersections whenever they look at the pictured rectangles—but vanish when they look directly at those intersections.
© Circ Cular, Fair Use
Risks and Considerations for Illusions in UX Design
Illusions can indeed be a powerful tool in UX design. Even so, there are some essential points to keep in mind:
1. Misinterpretation: Illusions can be subjective—and users may interpret them differently. Plus, another very important thing to be mindful of is how the users’ culture can influence how they perceive—or don’t perceive—intended effects. So, designers should do their user research—and thoroughly—to understand the target audience and how users interact with visual design elements. It’s vital for users to quickly “get” the intended message or action and sense the helpfulness it’s supposed to convey.
2. Cognitive load: Complex or overly stimulating illusions can drive up the level of cognitive load and keep users back from being able to understand and interact with the interface. So, think carefully about the complexity and what the impact of illusions is on user cognition. It’s also a vital point to keep the effects well in line with the brand message. So, do UX research early and use methods like card sorting, focus groups—among others—to tailor the right effects to users’ needs.
3. Compatibility: Illusions may not be compatible with all devices, platforms or screen sizes—so, make sure that the illusion functions and scales appropriately across different devices and platforms. That’s how to see that it will provide a consistent user experience. Apply responsive design to help provide users with a seamless experience every time.
4. Accessibility: Accessible design is serious business—and often a mandatory consideration by law—and here especially deserves a second mention. Some users with visual impairments or cognitive disabilities may not perceive or interpret illusions in the same way as others. For example, if the visual effects rely on colors and contrast, it’ll very likely exclude users with eyesight disabilities—like color blindness. So, do think about using alternative means of communication or interaction to make sure that inclusivity is indeed very much a part of your design.
The Munker-White illusion—clearly laid-out information where the grey lines of the grid appear darker in front of a light background and light in front of a darker background.
© Circ Cular, Fair Use
5. The illusion of completeness: Especially when designers create for mobile screens, it’s important to cue users that important information may lie below the fold. So, designers should be mindful if they decide to apply huge hero images or videos that can get in the way and deceive users that there’s nothing else below the apparent bottom or off to the side of the screen. If they leave clear hints such as the tops of elements or apply carousels, they can clue their users up on the full extent of the screen real estate on offer.
Airbnb’s site gives a clear hint that there are more than four properties here—via the scroll bar.
© Airbnb, Fair Use
6. The illusion of control: One aspect of illusions in UX design is the illusion of control—which refers to users' perception of having more control or influence over an interface than they actually do. So, it’s a vital thing for designers to remember to be very careful about this—and that they don’t mislead users into thinking that they’ve got more control or options than they actually have.
It’s important to keep that illusion of control well in check—and to make sure that the interface does indeed give feedback that’s clear and accurate. What’s more, be sure that it clearly states limitations or constraints—and that it keeps a very high level of transparency about what the user's actual level of control is. When designers set realistic expectations—and give users clear guidance—they can keep users from feeling frustrated or, worse, deceived.
7. The illusion of (false) help: Beware of tricking users with features like those found in dark patterns. For example, if users of an app need to exit quickly, show empathy. Don’t try to deceive them into opting into something—just help them on their way in their user journeys.
Overall, illusions in UX design can elevate user experiences, engage users' attention and create memorable interactions for them. If designers work principles from psychology and visual perception properly into their designs, they can strategically guide users’ attention—and enhance usability and communicate information effectively. These tricks are items—or tools—that should treat users well, and help them.
