When even screenshots fail

My best weapon for handling user queries is the screenshot.

User: Hey Vincent, I’ve got an error when doing X.
Me: Send me a screenshot.

User: Hi Vincent, sorry to disturb you. The application Y doesn’t work.
Me: Send me a screenshot.

User: Dear Sir, I cannot log in to application Z. Please advise.
Me: Send me a screenshot.

I’ve been fortunate in that I don’t have to educate my users on how to create a screenshot. Imagine the conversation with me describing where the PrintScreen button is…

User: Uh, how do I send you a screenshot?
Me: Just do a PrintScreen.
User: How do I do a PrintScreen?
Me: Just press the PrintScreen button.
User: What PrintScreen button?
Me: It’s a button on the top right corner of your keyboard, beside the Scroll Lock button.
User: Ok, I’ve pressed the PrintScreen button. Now what?
Me: Now send me the screenshot.
User: How do I do that?

I’d probably slam the phone down and throw it halfway across the hall.

PDFs, Word documents and bitmap files

Anyway, even with the absence of the kind of inane conversation above, I still receive some interesting emails. I might receive an email with a PDF file. I open the PDF file and lo and behold, there’s a screenshot inside, all shiny and black and white and kinda fuzzy and grainy due to the warping from the PDF writing software.

Yes, there are users who are more adept at creating PDFs than Word documents.

Then there are screenshots where the user diligently took a capture of the screen. With the actual error obscured by another window.

Then there are the emails with a file size of 2 megabytes. Think bitmap file attachments with a resolution of 1024 by 768 pixels.

Then there are the clever users who took a screenshot, and to compress the file size, they dumped the contents into a Word document. Word automatically compresses the bitmap. I can’t blame them for not knowing how to use an image editor, even one as simple as Windows Paint. Didn’t get any fancy meta-screenshots, though I’ve gotten a screenshot in a PowerPoint file before.

Then there are the ultra-clever users who know how to take a screenshot, use an image editor to crop it, and *exclaim* save it as JPG or PNG. Even then there are problems. Let me first show you this:

Yellow screen of death

If you’re familiar with ASP.NET, that’s everybody’s favourite error screen. It has useful data such as the general error message, the line of code where the error occurred and the stack trace. The stack trace contains information such as what events were triggered so you know for example, which button was clicked.

Now I have this web application with a loading screen, played out with an animated GIF image. And when there’s an error, something like this shows up:

ASP.NET error with Now Loading

I’m terrible at drawing stick figures… It’s supposed to be a stick figure searching for files in a file cabinet, and throwing any useless files behind him.

Well, my user sent me that. Most of the useful information was below the screen. So I asked her to scroll down so I could see them.

Me: Can you scroll down and resend the screenshot?
User: How to scroll down?
Me: Just use the scrollbar and scroll down.
User: What scrollbar?

That’s the compressed version of a few emails back and forth. I didn’t quite throw my phone across the hall, but I did take a deep breath and drink some water.

Then I took her screenshot and added some comments in it.

ASP.NET error screen with comments

I accompanied that modified screenshot with more comments in my email. I can’t remember what I typed, so here’s the closest version:

Hi,

I’m sure the man throwing files all over the place is all very nice, but I can’t see the actual error below him. Please scroll down so I can see more of the error message.

Regards,
Vincent

Sometimes, you’re not just debugging code. You’re debugging human behaviour.

Editing screenshots with Paint.NET

Providing screenshots of a step by step process to a user is one of the most powerful guidance techniques. However, dumping a few megabytes of unprocessed image data into an email can crash your user’s mailbox. And if you copied the email to several other people as well? You had better be on very good terms with all of them.

This is where Paint.NET comes in. The software has features rivalling those of professional image editors. There’s the rotation and zooming, standard tool functions from Windows Paint, better colour selection interface, and unlimited * undos!

Doing more than just Print Screen
So you are at the screen for the screenshot, and you’ve hit the Print Screen button. Start up the Paint.NET program and paste the contents. You might be asked to expand the canvas or the working area for your image.
Expand canvas

Image cropping
Then you want to select the image area you are interested in (you are rarely interested in the entire image). Select the [Image] menu item, then [Crop to Selection], and you’ll get something like this:
Cropped image

Box and arrows
Then you make use of the rounded rectangle and line drawing tools on the Tools bar (located on the left by default).
Lines and rounded rectangle tools
You can also add pointed arrows at the end(s) of your lines, making process diagrams easier to draw.
Arrows for ends of lines

Add text for finish
Add some text and you’ll have a self-explanatory screenshot.
Screenshot with explanatory text

Bonus tip: Gaussian blur unimportant areas
You can even guide your user to focus on a certain area for emphasis. First select the area you want to highlight:
Highlighted area

Then do an inverse selection. Select the [Edit] menu item, then [Invert Selection]. Then select the [Effects] menu item, then [Blurs], then [Gaussian Blur] with 2 pixels as the radius. And you’ll get this:
Inverted selection with gaussian blur

So there you have it, simple steps to create good looking screenshots. The screenshots can then be used in documents or placed on the Internet (or Intranet) as part of an FAQ. So go get Paint.NET now!

* limited only by hard disk memory