UI Impressions: “Skitch” by Plasq

Cris Pearson of Plasq — the Australian software company best known for their application “Comic Life” — was kind enough to let me join the beta test for Skitch, the upcoming, uhhh, software, that umh, well, uhhh, that is kind of difficult to describe…

What is it?

Skitch takes screenshots, grabs images from web cams, and imports photos via drag-n-drop or through an iLife-like media panel. Once the images are inside Skitch, you can add doodles and text, automatically store the images in a History list, and share your artistic outbursts via email or by uploading to a server or photo sharing website. The beauty of Skitch is that it hides the technical complexity of its features behind an easy-to-use and fun interface, very much in the spirit of software like Kai’s Photo Soap or PowerGoo.

Skitch Main Window

Despite its playful appearance, it’s very handy for more serious work, too: I’m currently also beta-testing NetNewsWire 3, which has a new thumbnail tabs feature, in which unloaded pages are shown with a dimmed screenshot. Unfortunately, that effect is so subtle that it’s hardly noticeable, so I decided to send in a report about this.

Instead of taking a screenshot of the tabs in a classical tool like Ambrosia Software’s Snapz Pro X, opening the resulting image in a graphics app, then appending that file to an email to the NewsGator support guys for feedback, I just took the image in Skitch, added text right inside Skitch, and hit the “Mail this Image” menu command. Talk about a streamlined workflow.

Annotated Screenshot

Another example: “censoring” sensitive information on an image with anti-aliased lines and squiggles in Skitch looks so much more sophisticated than applying that infamous reduce-resolution filter.

As much as I like Skitch, there are a few UI details that show some room for improvement, or RFI for short. Let’s have a look at these.

Update: A good friend of mine told me after reading this article that I was overly harsh in my comments on Skitch’s UI, and somewhere in that exchange of emails, the term “hatchet job” was mentioned, as well.

The intention of this article was to explicitly focus on some of the things in Skitch that, in my humble opinion, could be improved usability-wise. I am fully aware that Skitch is still in beta, and in no way is this post intended as a hatchet job. Skitch is an amazing application that does things no other software can, and I am very much looking forward to any new features the people at Plasq will add to it before it will be released. What’s more, if you disagree with any of my views, don’t hesitate to chime in via the comments below.

With that out of the way, let’s return to our regular programming.

First Launch

  • When launching Skitch for the first time, it will show all tooltips and a 4-minute introductory movie. While a great idea in and of itself, once you close that movie, you won’t find it again: I couldn’t find a link to it anywhere in Skitch’s menus or the help file.

    First Launch

    RFI: Add “View Introduction Video” to the Help menu.

The Main Window

  • Skitch’s main window does not use the standard window controls for closing, zooming, and minimizing the window. That’s fine for the former two, because there are no multiple windows in Skitch and zooming works in a very non-standard way, as well. But you can minimize the window by hitting the standard CMD-M. That command is listed in the Window menu, but I’d still prefer to see a button inside the main window, as well.

    RFI: Add a Minimize button to the main window in the upper right-hand corner (’cause that’s where it belongs).

  • Mouse-over (aka “roll-over”) effects like “pre-lighting” have become common in UI design these days, and they are very useful, especially in crowded toolbars. In Skitch’s main window, a number of buttons have mouse-over effects, but the tools, colors, and Snap/Cam widgets only show mouse-down effects. While these mouse-down effects are more essential — as they help you back out from the mouse click until you trigger the widget’s function with the mouse-up event — I’d still like to see mouse-over events for all widgets for the sake of consistency.

    RFI: Use mouse-over events consistently on all main-window widgets.

  • Most of the tools in Skitch’s main window feature elegantly designed tool tips, whose text is centered inside the tool tip box. I have a very strong dislike for centered text: it is unnecessarily difficult to read because the eyes cannot “switch back” to a single vertical alignment line where the text starts, but have to rescan every line. Also, jagged edges on both sides of a paragraph just don’t look all that elegant. Oh, and consistently capitalize the first letter of full sentences like “Drag me to Mail, the Desktop, anywhere!”

    RFI: Use left-aligned text and proper capitalization in all tool tips.

  • The main window has one very confusing feature: a prominently placed toolbox menu, which combines almost all of the standard menu bar’s menu items. Of course, to access this menu, Skitch must be the active application, in which case the standard application menu is accessible as well, making the toolbox menu redundant. So, what is it good for? Let me be radical for a moment here: may I suggest that menu be removed completely to make room for some other buttons? More generally speaking, here’s what I’d do with the widgets in Skitch’s window bar:

    RFI: Remove the toolbar menu, move both the Save and History buttons to the left, move the Help button to the right, and add a preferences button to the right of that Help button.

    Here’s the reasoning behind that change: when you open the preferences (see “Prefs and More” below), you will notice that the Help button in the preferences window is located in the upper right, whereas the Help button in the main window is in the upper left. Buttons that provide such fundamental features should be placed consistently within an application. What’s more, by placing the Help button at the top right, and the Save button at the upper left, we mimic the positioning of these items in a standard OS X application menu, which may prove helpful especially for less experience users.

    As for the Preferences button: Skitch takes up the flipped-card metaphor you know from Dashboard’s widgets, and it even has a nice animation for flipping back and forth between both views, adding to the “whole UI in one on-screen object” philosophy found in Skitch. If you’re used to that little “i” icon found on almost any widget (the Dashboard variety), you may go looking for a similar widget (the UI element variety — umh, do we need a disambiguation page for the term “widget” here…?) inside Skitch, and you won’t find it. So we’ll throw that in. It’s that consistency thing again.

    Why place the Preferences button to the right of the Help button? Open the prefs, and you’ll see in the upper right that the order is “Help” and “Done”, and we might just as well copy that over to the main window, although this is, admittedly, a debatable choice.

  • Beware of widgets that try to do too many things at once: besides a palette of standard colors, Skitch has a button to open OS X’s color picker for choosing a custom color. Unfortunately, every time you click on that widget, the color picker opens. So, even if you are happy with your choice of custom color and dismiss the color picker, every time you switch between one of the standard colors and your custom color, the color picker will open again.

    RFI: Use two separate widgets, closely grouped together, for the custom color: one for choosing the color with the color picker, and one for selecting that custom color for using it with Skitch’s tools.

Snapping Skitches

  • When taking screenshots with the cross hairs feature, a tooltip explains how this works. Although just a cosmetic problem, this tooltip only knows one position: towards the top right of the cross hairs intersect. If you move it off the screen, it will not snap to another position to remain visible.

    RFI: make the cross hairs tooltip change position so it is always visible on screen.

Cross Hair Tooltip

  • When Skitch is in webcam-capture or re-snap mode, two buttons “Cancel/Snap” appear in the place of the Snap/Cam buttons in the upper right. Even though the Snap buttons pulsates in best Aqua default button style, these buttons are rather difficult to see. In re-snap mode, it’s even worse because the frame and buttons are made slightly transparent in that mode. To be honest, when I first used re-snap, I could not find a way to trigger the snapshot: the Escape key works for bailing out, but neither Return nor Enter trigger the snap. Therefore:

    RFI: Add more contrast to the Snap/Cancel buttons to make them really easy to see, and add support for the Return key to trigger webcam captures or re-snapping.

Editing Skitches

  • Editing images in Skitch feels very natural and immediate: resizing the main window will also resize the image in true WYSIWYG fashion, and by moving the images borders inside the main window you can crop the image, which works for both reducing and expanding the image canvas. The one thing missing is a command to automatically re-size the canvas to the image’s original size.

    I have to admit that finding a proper tag for this command is rather difficult: “Resize to Original Image” could be understood as resizing the image’s resolution; “Resize Canvas to Original Size” may confuse less experienced users unfamiliar with the term “canvas.” Maybe this could work:

    RFI: Add “Un-Crop Snap” to the “Image” menu.

Sharing Images

  • Sharing images by sending them to a server or a photo sharing site just takes a single click on the Webpost button. This is handy, but you have to guess where you’re sending the photos, because that Webpost button does not give any indication which target machine or service is currently selected. What’s more, there is a Webpost pane on the back of the main window, in which you configure the Webpost targets and select the current one. To get to this pane, you need to use the Preferences command, which is not all that intuitive (see below for further details on the main window’s back view [no pun intended — really!]).

    RFI: Add a pop-up menu to the Webpost button, listing all services plus a “Configure Webposting…” item to get to the Webpost prefs pane. Show the menu with a slight delay, similar to the Back/Forward menus in Safari, and don’t forget to include a down-ward triangle to indicate that this menu exists. Display the name of the currently selected service beneath the button. For services that offer options — like Flickr’s privacy settings — option-clicking the Webpost button should open a dialog box, displaying these options so they could easily be modified on an image-by-image basis right before uploading the current image.

Basic Aqua Consistency

  • Skitch has its (admittedly small) share of Aqua design rules violations. Some examples: some menu items are not capitalized properly (specifically, “Add shadow to image” should read “Add Shadow to Image”); Undo/Redo menu items do not include the task, e.g. “Undo Resize”; the Redo menu item is not grayed out if the last action has been redone; and some dialogs are not layed out properly (action button should be on the right, cancel on the left):

    Flawed Dialog Sheet

    On a nitpicky side note, the sheet is attached above the window’s title bar and you cannot move Skitch’s main window while the sheet is being displayed.

    RFI: Double-check that the use of standard Aqua UI widgets is in line with fundamental Aqua design principles once Skitch is feature-complete.

Prefs and More

  • The tabbed pane on the back of the main window has five tabs named “General,” “Webpost,” “History,” “Media,” and “Feedback,” which works just fine with the “whole UI in one on-screen object” philosophy noted earlier. The gripe I have is that it mixes tabs that you will use regularly — “History” and “Media” — with tabs you will open only occasionally — “General,” “Webpost,” and “Feedback.”

    Flip-Side

    RFI: Rename “General” to “Preferences” and “Webpost” to “Accounts”. Re-order the tabs as follows: “History” – “Media” – – “Preferences” – “Accounts” – “Feedback”. Make the latter three noticably smaller than the first two, and add a bit of space between the two groups.

    Resizing the tabs and regrouping them in this manner shows the obvious difference between the panes that are part of the daily use of Skitch and those used to configure Skitch. Also, when we start reading the tabs, we start at the left, so that’s where the oft-used tabs belong.

The Really, Really Good Stuff

After proof-reading this post, I was surprised what a well-developed talent for nagging I have. So, to end this list of Skitch UI impressions on a more positive note, let me close by pointing out a feature in this application that I find absolutely amazing.

Skitch has a way of very gently improving the users’ work without offending their creative feelings: as soon as you let go of the mouse button after drawing free-hand with the pen, Skitch automatically smoothens the lines, making even the squiggly mouse-doodling by a graphically challenged person like your’s truly look very cool:

From the perspective of someone who writes about user interfaces, Skitch is the perfect companion to Snapz Pro X: Snapz Pro X shines when it comes to efficiently taking screen movies and snapping UI elements like menus and windows, and Skitch offers an effective workflow for annotating and sharing images. Cris, do I get to keep this, please?

Disagree with any of my suggestions? Let’s discuss below!

Share this: del.icio.usDiggreddit


2 Readers have commented on this article:

Subscribe to this article's comments

  1. Not A Fan

    Although the features of Skitch are very nice and are a step above many of the built-in features of the Preview application, the violations of Mac OS X UI guidelines are completely unacceptable.

    Skitch behaves in a way that is totally unique and extremely unintuitive to anyone who uses Mac OS X regularly.

    The authors of Skitch fundamentally fail to apprehend the reasoning behind good and consistent UI design and for that reason I routinely recommend people search out alternatives to Skitch that thoughtfully implement good UI design that is consistent with all other Mac OS X applications.

    Your review was too kind IMHO and if the Skitch authors want to read a real hatchet job, let me write a review of their product!

  2. Jochen Wolters

    Well, sometimes there may be good reasons to leave the path of standardized UI design and come up with alternative solutions. In those cases, however, the new approaches should be just as easy to use — as well as easy to find — as those defined in, and sanctioned by, the Human Interface Guidelines.

    As for your review, please do provide me with a link if you are actually going to write that. ;)