Image Hotspot Design: Placement, Labels, and Feedback

An image hotspot is useful only when a learner can tell where to act, what the action means, and what to do with the result. A marker can be technically clickable and still fail as instruction. It may cover the evidence, blend into the picture, open a vague label, or ask for a precision the image cannot support.

This guide gives you a practical design method for clickable image hotspots. It covers points and regions, exact placement, marker treatments, labels, feedback, mobile scaling, and accessibility. If you need the creation steps first, start with the step-by-step interactive image guide. If you need ideas for a lesson, browse the interactive image examples.

First decide what the click should do

Do not begin with marker color. Begin with the learner action. Complete this sentence: When the learner selects this place, they should _____. A clear verb usually points to the right interaction.

• Explain: reveal a short information hotspot attached to visible evidence.
• Find: ask the learner to select the correct point or region.
• Identify: match a name to a visible part.
• Compare: inspect two regions using the same criteria.
• Sequence: select image regions in an ordered process.
• Inspect more closely: enter a deeper Narrative Tapestry scene.

A hotspot should not exist merely because an object is visible. It should help the learner notice evidence, make a decision, or build a useful mental model. The distinction matters because interaction supports learning when the action carries meaning, not when it simply adds more clicking.

Choose a point or a region

The selectable shape should match the thing you are teaching. A point says, “this location.” A region says, “this bounded area.” Choose based on evidence, not convenience.

Do not make a tiny point carry an area-based question. If the learner can reasonably select anywhere inside the object, draw a forgiving region around it. Conversely, do not highlight half the image when the lesson depends on one exact feature.

Put the trigger on the evidence

Placement should be evidence-aligned. If a label says “Inspect the wing lattice,” the focus frame should sit on the visible wing veins, not on the animal's body and not on empty background. The learner should be able to connect the instruction and the evidence without guessing.

1. Identify the smallest complete visual unit that supports your claim.
2. Place the marker at its edge or center, depending on which position hides less information.
3. Resize a region so its boundary follows the meaningful subject.
4. Open the activity and confirm that the explanation refers to what is actually visible at that location.

This is especially important in maps, technical diagrams, and inspection photographs. A few pixels can change the country, component, tissue, or defect being identified. In uncertain source material, write a less precise claim rather than pretending the image provides stronger evidence than it does.

Keep the subject visible

Hotspots sit on top of an image, so every control spends some of the image's visual space. Treat that space as scarce. The most important subject should remain readable before, during, and after selection.

• Move a point just beside a small feature when the link stays clear.
• Use a lighter marker treatment over detailed evidence.
• Place a label in open background rather than across the subject.
• Use Edge when the trigger itself would cover a delicate feature.
• Break a crowded picture into a guided tour or deeper scene rather than stacking more controls.

Do not solve occlusion by making every marker faint. A trigger that cannot be found is not better than one that covers the image. Adjust the position, treatment, size, and label together until both the evidence and the action are clear.

Choose the marker treatment

Interakly gives you five marker treatments: Classic, Prism, Focus, Orbit, and Edge. Ordinary activities start with Classic, labeled Legacy in the editor. Narrative Tapestry doorways start with Focus. Defaults give you a dependable first draft, but the local image may call for another treatment.

After choosing the treatment, configure the rest as one system:

• Tint: choose a color that separates from the image at that exact location. Never use tint as the only way to distinguish one action from another.
• Icon: choose a symbol that supports the action. An information cue and a deeper inspection cue should not look interchangeable.
• Size: use S, M, or L according to image detail and importance. Larger is not automatically clearer if it covers the answer.
• Pulse: use motion sparingly for the first or most important action. If everything pulses, nothing has priority.
• Show label: turn it on when the icon alone cannot set a clear expectation.
• Custom label: write the action the learner is about to take, not a generic interface instruction.

The W3C guidance on use of color explains why a tint cannot be the only signal. Pair color with text, shape, icon, position, or another visible distinction.

Write labels that set expectations

A hotspot label is microcopy. Its job is to help a learner predict the result before selecting it. Strong labels usually combine a verb and a concrete target.

Keep visible labels short enough to scan. Put the fuller explanation inside the activity. When a label would merely repeat a nearby heading or story card, hide it. Redundancy can be as distracting as missing information.

Prevent overlap and visual noise

Overlap is not only a spacing problem. It is a hierarchy problem. When several labels, story cards, and markers compete in one area, the learner cannot tell which action is primary.

1. Reserve space for fixed controls, story cards, headings, and doorway frames first.
2. Place the primary learning action in the clearest remaining area.
3. Put secondary labels above, right, below, or left according to the available background.
4. Hide a redundant label, change to Edge, or split the scene if no clear position remains.

Avoid long diagonal leader lines that cross other subjects. Avoid making labels touch the image edge. Avoid placing two different actions so close that a learner can select the wrong one by accident. The WCAG target size guidance is a useful minimum reference: pointer targets generally need a 24 by 24 CSS pixel area or sufficient spacing, subject to the criterion's stated exceptions.

Write feedback that teaches

Graded image activities need more than a red or green state. Feedback should connect the learner's action to visible evidence. A useful response answers three questions:

• Was this selection correct for the stated task?
• What visible feature supports the answer?
• What should the learner notice or try next?

Weak feedback says, “Incorrect. Try again.” Better feedback says, “That is the outlet pipe. Look for the narrower pipe entering the pump housing from the left.” The second version gives the learner a usable distinction without simply revealing an answer disconnected from the image.

Review AI Auto-place results

Interakly AI Auto-place can create 3 to 8 information hotspots from an image. That is a useful first draft, not a finished lesson. AI can name a visible object correctly while placing the marker on the wrong edge, writing a fact that does not serve your goal, or treating similar details as separate lessons.

Check the scaled mobile view

On smaller screens, Interakly keeps image elements tied to the image and scales them with the canvas. The authored placement, text, marker, and spacing retain their relationship instead of being rearranged into a different lesson. That makes the desktop design decision more important, not less.

Preview at a realistic phone width and check all of the following:

• The subject remains recognizable at the smaller image size.
• Markers are visually distinct from nearby image detail.
• Labels remain inside the stage and do not cover each other.
• Region boundaries still communicate the intended answer area.
• The learner can select each target without activating a neighbor.
• Open cards and feedback stay connected to the visible evidence.

Do not enlarge every marker to compensate for a crowded source image. First remove unnecessary controls, choose clearer image detail, or split the content into scenes. For more examples of matching an interaction to visual structure, read the guide to visual learning.

Support keyboard and screen reader access

A visual interaction needs a non-pointer route. The W3C image map tutorial recommends meaningful text alternatives for the complete image and for each selectable area. Apply the same principle to modern hotspot controls.

• Write alt text that states the purpose and essential content of the base image.
• Give every hotspot a specific accessible name, such as “Inspect the pump inlet,” rather than “Button 4.”
• Make the controls reachable in a logical keyboard order that follows the lesson.
• Keep a visible focus indicator against the local image color.
• Support activation without requiring a mouse or precise gesture.
• Provide the same explanation or result to people who cannot inspect the image visually.
• Test at zoom and with a screen reader instead of assuming an accessible name is enough.

Do not make essential instructions appear only on hover. If extra content does appear on hover or focus, the W3C guidance for content on hover or focus explains that it must be dismissible, hoverable, and persistent under the conditions described there. Click or keyboard activation is usually a clearer foundation for instructional hotspots.

A practical hotspot workflow

The fastest reliable process separates learning decisions from visual styling. Use this order for a new image or when cleaning up an existing one.

If your source is a process drawing, system map, or labeled figure, the interactive diagram guide shows how to turn that structure into explanation and practice without making the canvas crowded.

Final quality checklist

Run this short audit before publishing. If any item fails, fix it in the image studio and preview again.

FAQ

What to read next