Zoom product UI without losing orientation

Use a stable object identifier, panel heading or active navigation label as the anchor. Decorative window chrome is rarely enough: it identifies a window, not the current task. Write the anchor beside each proposed crop before animating the camera.

Decide what must be readable at the viewing size. If both a full table and a tiny field are essential at once, use a deliberate inset or a wider layout rather than pushing the entire screen through several restless zooms.

The example uses fictional task T-018, “Prepare sample booklet.” Supplied screens show its list row, detail panel and saved due date. No claim is made about a specific application.

• Wide, 0–5 seconds: show the task list with T-018 selected and the Tasks navigation item visible. The viewer learns the location before movement begins.
• Detail, 5–10 seconds: crop to the T-018 header and Due date field together. Keep the identifier above the field throughout the move.
• Action, 10–19 seconds: hold the camera while the actual date control is used. Show the saved value with the same header still visible.
• Return, 19–25 seconds: widen to the list row where the matching new date appears. Preserve row selection so the viewer can find T-018 again.
• Close, 25–30 seconds: hold the contextual result. Avoid a second unrelated zoom just to fill the ending.

Keeping a sidebar in every crop may make the field unreadable. Keep the object header instead and return to the full navigation before moving to a different area. Conversely, removing every surrounding label can make an enlarged date picker look like an unrelated product.

A split view works when viewers must compare before and after states simultaneously. A camera move works when they need to follow one action. Select the method from the question, not from a preference for more motion.

Compare the first and final wide frames. The interface scale, object identity and scroll position should explain the relationship. If the real product reorders a row after saving, label or show that change instead of secretly moving it back.

When adapting to a narrow composition, rebuild the crop around the same anchor. Simply trimming the sides can remove the only label that tells viewers which screen they are seeing.