A screenshot speaks a thousand words

I was recently forwarded an email from a client who was complaining that part of a site wasn't working correctly - the person looking into it was unable to reproduce the problem so asked me to take a look. So I followed the steps described and, no, I couldn't reproduce it. I tried varying the steps slightly (clients often aren't the most precise when I comes to saying what they did) but still no joy. Then, a glimmer of hope - they had attached a screenshot.

It's not the first time I've seen this - in a previous role I had more client contact and was frequently sent reports of issues with the job of reproducing them, in the hopes that I would be able to spot an obvious mistake on their part, "educate" the client in the proper way of doing things, and avoid a developer having to get involved at all. I think it was also because I am more patient with novice users than the devs were, but that's another story. 

So occasionally a problem would come in to the team and no-one would be able to reproduce it. This was back in the dark days before responsive design and we also had multi-platform availability to contend with, particularly as we were working in the educational sector where all manner of operating systems, browsers and screen sizes were being used (e.g. Windows XP, NT and 2000 - anyone remember ME?, browsers like IE6/7/8, Netscape and resolutions 1024x768, 800x600 or oddities like 1440×1080). All of these could potentially cause the product (which launched in a web browser) so it was essential that we were trying to recreate the defect on the same configuration, therefore one of the key things was to get that information from the user. 

To start with, we would ask them outright to detail their platform, but after a raft of responses along the lines of "it's some sort of windows I think, not sure, the monitor is about A4 size" we found that rather than send a list of detailed instructions to obtain the correct details (which sometimes they could not retrieve as the admin areas were locked down) the simplest route was to get a screenshot. And not just of the window in question - the whole screen.

Why did this work? Well, there were minor differences between the operating systems which meant that seeing e.g. the layout of the start button or desktop icons could give a clue as to the OS; the size of the top bar of any open windows would also allow you to estimate the height of the screen (no, really). But more importantly we found that occasionally there would be a clue as to why the site wasn't responding as expected:

1. You could see exactly which URL the user was looking at. Often this would contradict their description or indicate that the route they had taken to the page in question was not the one that we were using (yes, different routes could cause the product to behave differently, this was a long time ago!).
2. The browser in use could be identified with certainty - if nothing else the navigation buttons are clearly distinct. For example, someone would claim they were on IE when it was clearly Netscape. 
3. Rarely, but more often than you would hope, something else on the screen would indicate what the problem was. For example, there may be another browser window open that was hidden behind the current one, and the content of that one was interfering with the main flow (e.g. a pop-up that had to be OKed before the user could continue. Another example I did see once was a broken network connection icon in the sys tray - which explained why the online part of the site wasn't working.

There was one more thing I learned to check for and that was exactly what I saw in the screenshot I was talking about at the start of this post - a tiny, almost insignificant icon looking like a magnifying glass with a minus sign in it. I reduced the magnification on my browser to 90% and immediately reproduced the issue. 

Nowadays with screengrab tools it's all too easy to take a small clip of a page to demonstrate an issue, but sometimes this can ignore a minor detail that becomes important when trying to recreate weeks later. Think before you trim - sometimes it's important to look at the bigger picture.