Motivation
Have you heard that a picture is worth a thousand words? Well, it's true! Screenshots are like travel pictures in bug reports. They help developers see exactly what's wrong, making it easier to fix the problem.
The more precise your screenshot is, the faster the bug gets identified and fixed! But how do you make sure your screenshot is crystal clear? Highlighting is key!
Highlighting Suggestions
Always Use Shapes: Avoid hand drawing; it is imprecise and makes attachments look unprofessional. Instead, shapes, rectangles, and squares are the best ones.
Less is More: Don't highlight everything! Focus on the area with the bug.
Colour Contrast: Use bright colours that stand out from the screenshot. The best colour for this is bright red, which presents the highest contrast in most environments. Check some examples here.
Don't Hide Elements: Avoid covering important text or elements with your highlights.
These are suggestions, so you must never forget our report attachment requirements and rules.
Magical Dashed Lines: Fixing Misalignments
Have you ever seen something on your screen that's a little off-centre? A button may be too high, or a line of text may not be perfectly straight. That's a misalignment! Dashed lines are like magic markers for fixing these little imperfections.
Here's why they're fantastic:
Crystal Clear Fix: They show exactly where things should be.
Easy to See: They stand out from the background without hiding anything. Especially if they are bright red.
Organised View: Dashed lines keep your screenshot clean and easy to understand.
Easy to Use: Most screenshot tools have a dashed line option! Learn more about these tools here.
Like a Pro: It's a standard way developers identify things, so you'll speak their language!
Highlighting in Action: Good vs. Bad
Elements within a Elements
Good on the Left: A bright red rectangle surrounds only the button and the part of the background text that overlaps, showing the intersection with both elements effectively highlighting the issue.
Bad on the Right: A giant red rectangle frames the button and background word. The problem is only the first four letters of the word. Highlighting the text ❝Community❞ as a whole still requires analysing the relationship between the elements to understand the bug.
Grid Misalignment
Good: A dashed bright line shows where the image width should reach, while a square helps identify the area of the page within the page.
Bad: A giant solid red square frames the entire item within the grid without providing visual cues about the bug or what must be fixed.
Heads up! When reporting visual bugs:
Focus on issues that clearly impact user experience, functionality, or readability. These have the most significant impact and are more likely to be addressed promptly.
Visual inconsistencies barely noticeable under normal viewing conditions (e.g., single-pixel misalignments, items too close to each other or slight colour variations) may be considered low priority.
Ask yourself: Is this issue noticeable during typical use? If it requires zooming in or is only visible under unusual circumstances, it might be too minor to report.
Consider context. A minor issue in one part of the application could be critical in another. Use your judgment and consider the feature's importance when deciding whether to report a visual bug.
Learn more about other common mistakes when documenting bug reports here.
And if the element is relatively small compared to the screen and other elements, adding an arrow is a good idea!
A professional approach exists when it comes to blurring information, as discussed in our article ❝Blurring Out Private Information on Attachments❞.
Remember
High-quality screenshots with effective highlighting are crucial for swift bug resolution. They enable team leaders, customers, and developers to grasp the issue quickly, leading to faster reviewing, fixes and improved overall efficiency. Remember, focusing on issues affecting users and product quality is the key to impactful bug reporting.
Applying these best practices will make you a screenshot-highlighting pro and a valuable asset to your team's tests and, ultimately, customers.