Gestalt, eye flow and guiding the viewer

Video lecture

Gestalt, eye flow and guiding the viewer

11 chapters · about 9 min · full transcript

Coming soon

Chapter 1 of 11

Gestalt and eye flow

How the brain groups automatically
Figure and ground
Eye-flow patterns
Steering attention

The narrated lecture is in production

Every chapter is scripted and ready. Browse the chapters and read the full transcript now — the video will appear here when it’s published.

Chapters

Transcript of the narration, chapter by chapter.

0:00 Gestalt and eye flow

Look at a crowd of dots on a page, and your brain instantly groups them. These five belong together. Those three are separate. You didn't decide to do that. It just happens. Designers call these automatic rules gestalt principles, and they're working on every design you make, whether you use them or not. Add to that the path the eye takes across a layout, and you have two of the most powerful tools in visual communication. In this lecture, you'll learn the key gestalt principles, how figure and ground work, the common eye-flow patterns, and how to steer attention with directional cues. By the end, you'll be able to plan an eye path before you design.

0:50 Why it matters

Why does this matter? Because if you don't control grouping and flow, the viewer's brain will do it for you, and it might group the wrong things. A price that sits closer to the wrong product. A phone number that looks like it belongs to the footer. A call to action at the start of the path, when people aren't ready yet. Think of a museum. Good curators arrange rooms and signs so that visitors naturally walk the story in the right order. Bad ones leave you wandering. Your layout is a tiny museum. Gestalt tells you how the rooms are grouped. Eye flow is the path through them.

1:37 Key gestalt principles

Here are the principles you'll use most. Proximity: things close together are seen as a group. Similarity: things that look alike, same color, shape or size, are seen as related. Common region: things inside the same box or background are seen as a unit, which is why cards work so well. Continuity: the eye follows lines and curves. Closure: the brain completes incomplete shapes, which is why some logos work with missing pieces. And figure-ground: we separate an object, the figure, from its background. Here's the key idea. Every one of these is a way to say, these things belong together, or this is the thing to look at, without using a single word.

2:27 Figure-ground in practice

Let's zoom in on figure-ground, because it causes the most real-world problems. When text sits on a photo, the text needs to be the clear figure. If the photo is busy or similar in brightness to the text, the text sinks into the background. You've seen white text on a bright sky that you can barely read. Fixes include placing text on a calm, darker or lighter area, adding a subtle gradient or scrim behind it, using a solid panel, or blurring the background slightly. Figure-ground also matters for products. A product on a cluttered background loses its edges. Give it contrast and space so it pops forward.

3:14 Eye-flow patterns

Now eye flow. In left-to-right cultures, two patterns show up again and again. The Z pattern, common in simple layouts like ads and posters: top left, across to top right, diagonally down, and across the bottom. And the F pattern, common in text-heavy screens like articles, where people scan the top lines and then down the left edge. In right-to-left scripts like Arabic and Urdu, these mirror. So you place your most important elements at the natural stops, and you put the call to action where the path ends, not where it begins. People need the reason before they're ready to act.

3:58 Worked example 1: a smartwatch ad

Worked example one, simple. A smartwatch ad. In the original, the model looks out of the frame to the left, so viewers look there too, away from the product. The headline is top right and the call to action is top left, so the eye zigzags back and forth. And the price floats far away from the watch. The fixes: flip the photo so the model looks toward the watch and headline. Arrange a Z path: headline, then watch, then key benefit, then the call to action at the bottom right. And put the price in a small card right next to the watch, so common region makes them one unit. Same elements, but now they flow.

4:49 Worked example 2: a bilingual property ad

Worked example two, a business scenario with illustrative details. A bilingual real estate agency in Dubai creates an Instagram ad in Arabic and English. The Arabic headline is the lead, because most of their audience reads Arabic first. The original layout was designed left to right, with the English headline top left and the Arabic smaller on the right. Arabic readers enter top right and meet a small headline, then get pulled left. The fix: mirror the layout. The Arabic headline goes top right and large. The property photo sits in the middle, with the agent's gaze pointing toward the headline. The English line sits beneath the Arabic, in a clear second tier. The call to action ends the path at the bottom left, in both languages.

5:44 Watch me do it: an eye-path sketch

Watch me do it. Before I open any design tool, I plan the eye path on paper. I draw a small rectangle in the right aspect ratio. I write the reading direction at the top, left to right in this case. Stop one, the entry point: the headline, because it's the strongest contrast. Stop two: the product photo. Stop three: the proof, a rating of four point eight stars, labeled as example data. Stop four: the call to action, at the bottom right. Then I list my cues: the person's gaze points to the product, and a subtle diagonal in the background leads to the button. Finally, I note which items must read as one group. Two minutes, and the design has a plan.

6:38 Directional cues

Let's talk about directional cues, the tools that steer the path. Gaze is the strongest. People look where other people look, so a face turned toward your headline or product pulls attention there. Pointing gestures work similarly. Lines and shapes, like a road, a table edge or a diagonal shape, lead the eye along them. Arrows are blunt but effective, especially in educational content. And color can link stops: if your key benefit and your button share an accent color, the eye connects them. Use one or two cues, not all of them. Too many cues create a traffic jam.

7:21 Common mistakes

Common mistakes. Faces looking out of the frame, taking attention with them. Calls to action placed at the start of the path. Prices and details floating away from the product they belong to. Text on busy backgrounds, so figure and ground fight. Ignoring reading direction in bilingual designs. And over-steering with arrows, lines and color all at once. A quick test fixes most of these. Show your design to someone for three seconds, hide it, and ask what they remember, in what order. If their order isn't your plan, adjust the cues and grouping.

8:02 Recap and try this now

Let's recap. Gestalt principles, proximity, similarity, common region, continuity, closure and figure-ground, let you group things and create focus without words. Make text the clear figure on images. Plan eye flow with Z or F patterns, mirror them for right-to-left scripts, and put the call to action where the path ends. Steer with one or two cues, especially gaze. Try this now. Pick a design you admire from a brand you like. Sketch its eye path with the planning template: entry point, stops, cues and action. Then apply the same path to one of your own designs, and run the three-second test on a friend.

How the brain groups what it sees

Gestalt psychology describes how people perceive visual elements as organized wholes rather than separate parts. You do not need the theory in depth, but a handful of Gestalt principles explain why some layouts feel instantly clear.

Principle	What people perceive	Design application
Proximity	Close items belong together	Group image, title and price in a product card
Similarity	Items that look alike are related	Same color for all clickable elements
Closure	The mind completes incomplete shapes	Logos and icons that use implied lines
Continuity	The eye follows lines and curves	Arrange items along a path toward the call to action
Figure–ground	We separate a subject from its background	Keep subjects distinct from busy backgrounds
Common region	Items inside a boundary are grouped	Cards, panels and background blocks

The practical lesson: you can create structure with space, similarity and regions instead of adding lines, borders and labels everywhere.

Figure–ground in real life

Figure–ground problems are the most common cause of illegible social graphics. White text over a bright sky, a product photographed against a similar-colored backdrop, or a logo on a busy pattern all make it hard to separate subject from background.

Fixes, from least to most intrusive:

Reposition the text over a calmer area of the image.
Darken or lighten the whole image slightly (an overlay at low opacity).
Add a gradient from transparent to dark behind the text only.
Use a solid block or card behind the text.
Blur or simplify the background, or choose a different image.

Eye-flow patterns

Research on reading behavior, including eye-tracking studies by usability researchers, describes common scanning patterns. Treat these as tendencies, not laws:

Z-pattern: on simple, image-led designs with little text, the eye tends to move from top-left across to the top-right, diagonally down, then across the bottom. Useful for ads and single-message posts: headline top, visual in the middle, call to action bottom-right.
F-pattern: on text-heavy screens, people read the first lines more fully and then scan down the left side. Useful for carousels and infographics: front-load key words at the start of lines and headings.
Focal-point flow: a strong visual element (a face, a bright object) captures attention first; the viewer then moves to nearby elements. Useful for thumbnails.

For right-to-left languages these patterns mirror.

Directional cues

You can actively steer the eye:

Gaze: if a person in the image looks toward your headline, viewers tend to follow the gaze. If they look out of the frame, attention leaks away.
Lines and shapes: roads, arms, arrows and leading lines in photos guide the eye along a path.
Pointing and gestures: a hand pointing at a product works because it is a natural cue.
Sequence numbering: in carousels and infographics, numbered steps tell people the order explicitly.

Worked example: a product ad

A skincare brand has a photo of a model holding a bottle, a headline "Hydration that lasts all day", and a "Shop now" button.

Version A: the model looks straight at the camera; the headline is at the bottom-left; the button is top-right. The eye goes to the face, then wanders.
Version B: the model looks toward the bottle, which sits near the headline; the headline is top-left; the button sits bottom-right where a Z-pattern ends. The eye goes face → bottle → headline → button.

Version B is not guaranteed to perform better — only testing can show that — but it is structurally clearer, which gives it a better chance.

An eye-flow planning template

Entry point (what is seen first):   ______________
Path (what the eye moves to next):  ______________ → ______________
Exit / action (where it ends):      ______________
Cues used (gaze, lines, numbers):   ______________
Distractions to remove:             ______________

Common mistakes

Gaze leading out of the frame toward nothing.
Call to action placed where the eye never goes, such as a tiny corner above the headline.
Too many focal points: three faces, two products and a bright sticker all competing.
Assuming a pattern is universal: always consider reading direction and test with real viewers.

Hands-on: plan the eye path before you design

Sketch the path first — a thumbnail sketch with numbered stops takes two minutes and saves an hour of moving things around.

EYE-PATH PLAN — design: __________  reading direction: LTR / RTL
Entry point (1):     ______ (usually the strongest contrast, face or headline)
Stop 2:              ______ (supporting image or benefit)
Stop 3:              ______ (proof: number, rating, detail)
Exit / action (4):   ______ (CTA — should be where the path ends)
Cues used:           gaze / pointing / lines / arrows / shapes / color
Gestalt groups:      which items must read as ONE unit? (proximity/similarity/enclosure)
Figure-ground check: is text clearly separated from the image behind it?

Before/after: a product ad for a smartwatch

	Before	After
Model's gaze	Looks out of the frame, pulling eyes away	Looks toward the watch and headline
Path	Headline top-right, CTA top-left: the eye zigzags back	Z-path: headline → watch → benefit → CTA at bottom-right
Grouping	Price floats far from the product	Price enclosed in a small card next to the watch (common region)
Figure-ground	White text on a bright sky	Text on a darker area plus a subtle gradient scrim

For right-to-left layouts (Arabic, Urdu), mirror the plan: entry often top-right and a reversed Z toward bottom-left. For bilingual designs, the lead script decides the entry point.

Try it with a heat-map mindset

You don't need eye-tracking software to think like it. Ask a colleague to look at your design for three seconds, hide it, and ask what they remember and in which order. Two or three quick tests with different people will reveal most eye-flow problems.

Summary

Use Gestalt principles to create structure without clutter, fix figure–ground problems before publishing, and plan a deliberate path from entry point to action using gaze, lines and sequence.

Gestalt principles — proximity, similarity, common region, continuity, closure, figure-ground — group elements and create focus without words.
Text on images must be the clear figure: use calm areas, scrims, panels or blur.
Plan eye flow (Z for simple layouts, F for text-heavy) and mirror it for right-to-left scripts.
Place the call to action where the eye path ends, and steer with one or two cues such as gaze.
Test with a three-second recall check to confirm the path works.

Pick a design you like from a brand you admire. Sketch its eye path using the planning template, noting entry point, cues and action. Then apply the same path to one of your own designs.

Enrol for free to save your progress

Reading is always free. Enrol to keep your place, take the final assessment and earn a verifiable certificate.

Gestalt, eye flow and guiding the viewer