I’m a large advocate for visualizing my work. I like graphic design, usability and the science behind explaining things to people who do not know anything about the subject. My colleague Maria Kedemo posted this idea on the internal forums of House of Test, and I love it. Maria is a lovely person and a great tester, and you should visit her blog as well.
In short: Use gifs to explain a defect.
Gifs can be an animated sequence of images. They’re smaller and faster than video files, and most platforms support uploading gifs. So they’re a great tool for showing a short clip of a defect, and in that way visualizing what leads to the bug, and what the on-screen experience is.
In this example, I’ve used a simple bug in the desktop version of the social platform Slack. When I enter a third character in the chat input field, small pieces of text appear floating inside and outside of the field. They might be friendly reminders, they might be unimplemented buttons. Whatever they are, they look like a bug to me.
1) Take a screenshot of the screens you go through to reach the defect, and the results of the defect.
For capturing your screen you need a program like the free and open source Greenshot. I’ve been using FastStone Capture as well, and if you want to try it, you need to download the freeware version (v5.3 and below) as it went payware after v.5.4. You can also use the “PrtSc” (Print screen) button on your keyboard and paste the image into e.g. Paint (Paint is overall a seriously underestimated program).
2) If there’s a lot going on in the screens, draw arrows or circles on the images, to make it easier for other people to pinpoint the important things
In this example it’s not really necessary as it’s pretty easy to see where the bug appears, but I’ll do it for show.
3) Use a website like http://gifmaker.me/ or similar to put the series of images together to form a short gif. Download it.
Upload, save or send to whoever needs to see this.
Done!
