How to capture a design review for a bug report

A design review can be hard to explain in a bug report: a button shifts after a resize, a menu covers the wrong item, or a change only appears after a particular click. A short recording can show what happened and what you expected instead.

Use the Screen Recorder to capture a screen, a window, or a browser tab. You can include sound, a microphone, or a camera if narration helps. The tool runs on a computer, not a phone.

Record a clear bug report

1. Open the Screen Recorder on your computer. Decide whether the bug is in a browser tab, a separate application, or the overall desktop, then choose the matching capture source.
2. Prepare the screen before recording. Close unrelated windows, hide private notifications, and position the design so the affected element and enough surrounding context are visible. If the issue depends on a particular window size, set that size before you begin.
3. Start the capture and show the steps that lead to the problem. Move at a steady pace, pause briefly before and after the action, and avoid clicking around unrelated areas.
4. If the visual change is not self-explanatory, narrate what you are doing and what you expected to happen. Enable microphone audio only if it helps. If the bug is in a web page and its sound matters, include the tab's sound when available.
5. Stop the recording as soon as the result is clear. Play it back and check that the bug is visible, the important steps are included, and the sound is understandable before attaching the clip to your report.

A useful clip often takes 10 to 30 seconds. Show the starting state, the action that triggers the bug, and the result. If you need to compare the actual result with the intended design, explain the expected behavior in your report or show a second reference image. Do not make viewers guess which part is wrong.

What the recording tells you

The bug and the steps are both visible

The clip gives a reviewer enough evidence to understand the issue and try the same interaction. Add a short note with the page or screen name, the steps, the expected result, and the actual result. If the problem only happens at a certain window size or after a reload, include that condition too.

The screen is blank or the application is missing

You may have selected a browser tab or window that does not contain the design. Stop, choose the correct source, and record again. Some applications or protected content may not appear in a window capture. Try capturing the full screen instead, then keep other windows closed so the recording stays focused.

The video is clear, but there is no sound

That may be fine if the bug is visual. If you need narration or application sound, check that the microphone or sound option was enabled and that the correct source was selected before recording. Make a short test clip first if audio is important to the report.

The clip is hard to follow

A cursor moving quickly, several unrelated clicks, or a long wait can obscure the cause. Record again with a deliberate pace. Keep the pointer near the affected control, pause at the important moment, and trim the explanation by capturing only the relevant sequence.

Fix common recording problems

1. Choose the right capture source. Use a tab for a browser-based prototype, a window for a standalone design app, or the full screen when the problem crosses windows. The browser asks you to pick what to share. If you chose the wrong item, stop and select another source for a new recording.
2. Make the important area larger. Maximize the relevant window or zoom in enough to show the component clearly. Leave some surrounding layout visible so the reviewer can tell where the issue occurs.
3. Allow screen sharing in the browser. When the browser asks what to share, select the intended tab, window, or screen and confirm the share. If you previously blocked access, reload the page and start a new capture to bring up the browser's sharing prompt again.
4. Check microphone access if narration is silent. On Windows 11, open Settings › Privacy & security › Microphone and allow microphone access for the browser. On macOS, open System Settings › Privacy & Security › Microphone and allow your browser. Then check that the intended microphone is selected in the browser or recording setup.
5. Check camera access only if you need a camera view. On Windows 11, go to Settings › Privacy & security › Camera. On macOS, go to System Settings › Privacy & Security › Camera. Allow the browser, then reload the recorder. A camera view is optional for a design bug report.
6. Review macOS screen capture permission. If the browser cannot capture a window or screen, open System Settings › Privacy & Security › Screen & System Audio Recording and check that the browser is permitted. Quit and reopen the browser after changing access, then try again.

Keep the review safe to share

A design review may show unreleased work, customer details, messages, or account information. Close anything the recipient does not need to see, and avoid recording credentials or private data. If the design itself is confidential, confirm that the people receiving the bug report are allowed to view it.

The recording stays on your device unless you choose to share it. The browser may show a sharing prompt before capture begins, so check the selected screen or window carefully before you start.