UI Design Example: Screen Shot Utility Function of QQ


For those of you who are not familiar with QQ. QQ is a Chinese mock up of ICQ, an online chatting software. It’s been in the market for more than a decade. A lot of people criticizing the company for not being innovative, but with tens of millions of active users, QQ’s first place position in social networking market in China is just unshakable.

Enough about the company and the software, let’f focus on our topic for this blog post the screen shot taking utility that’s offered in QQ. Taking screen shots has always been a pain for many us. As students, we are expected to make a tons of presentations, and write tons of papers. So we experience taking screen shots a lot. The most annoying part of taking screen shots is that most times there is an additional step of editing the screen shots between taking them and pasting them. By editing, I mean cropping the images to only included the intended content. I’m surprised that this is not a built-in feature for Windows PC. In windows PC, there is a screen shot key on every keyboard for taking screen shots. But however, by pressing the key, you are taking the entire screen. There is no options for taking a screen shot of a specific window or a certain area on the screen. For mac users, there is a hot key for taking the entire screen (command + shift + 3) and a a hot key for taking a square area of the screen ( command + shift + 4). Even though the features are their, it’s just impossible to crop the screen shot in pixel level to avoid the unwanted edges. And there is no option for directly pasting the screen shots to text processing softwares or documents on the internet. All screenshots are saved automatically on the desktop, which can be very annoying.

QQ’s screen shot taking interface has offered a perfect solution for solving this problem once and for all.


The first noticeable difference of QQ’s screenshot taking utility and Mac’s built-in utility is that QQ shows a box of magnified view of the mouse location, and in the box there is a cross hair for accurate positioning. Therefore, with a little bit patience, it’s possible to get the screen shot right the first time without further editing it.

Screen Shot 2012-12-09 at 10.14.44 PM

The second important feature is that with QQ’s screenshot taking utility, taking screenshot of a window is super easy. You just need to move your mouse over the window that you want to take screenshot, and all the area outside that window will be darkened to indicate that you are only taking screenshot of the lighted area.


The third important feature is that after you’ve done cropping the screenshot to the way you like, you can still have the option of adjusting it by moving the nodes before everything is final.  When you are adjusting the nodes the box of magnified area will show up again to make sure everything is absolutely perfect.


And the buttons on the right gives you the option of adding colored boxes, circles, arrows, brush strokes, or text on the existing screenshot. And after you’ve accomplished all your goals, you have the option to cancel, save it to clipboard for directly pasting it to other files, or save it to file.

I think this is very good example of good user interface of solving a troublesome problem that’s been here since the dawn of GUI. I really wish this design can be system wise available for all PCs and Macs. Or it will be kind of silly just to open up your online chatting software for the sake of taking screenshots.



One thought on “UI Design Example: Screen Shot Utility Function of QQ

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s