Skitch for Windows Touch
A design project for Evernote • 2013
In addition to working on the Skitch Windows Desktop client at Evernote, I also worked on a redesign of the Skitch app for Windows Touch. These designs were never implemented, but conceptually they were a lot of fun to work through. Some of the highlights included an updated home screen, an improved toolbar UX, new methods of panning on zoomed-in images, new designs for viewing PDF's, and a new visual design. It was also my first experience operating within Microsoft's Windows Touch guidelines, which was both interesting and challenging. To get a better idea of the state of the app before the project, here's a screenshot of the old home screen and a screenshot of the old canvas view.
The first mockups I put together included the home screen in different states and a brief overview of some canvas interactions. The home screen included some calls to action for inputting different types of media as well as a user's recently skitched images. Colors were changed to be a little easier on the eyes and add more contrast, a "How to screen snap" link was added for better clarity on taking screenshots (most people didn't know how to take screenshots on their Windows tablets at the time), dates were added above the list of recently skitched images for better organization, and PDF's were added as a new content type.
Swiping up from the bottom of the screen would reveal more menu options...a sync button to sync a user's images to Evernote, a Sort button to sort images by name, date updated, or date created, and a Help button to provide access to a guide on using the app.
Pinching in on the home screen would do something called a "semantic zoom" - an interaction where the UI morphs to show broader groupings of information. In this case, it would allow the user to select a date range so they can have more control over finding and/or sorting their skitched images.
Updates to the toolbar in the canvas view included moving all of the tool icons to the left side of the toolbar and tool properties to the right. Color and size properties were split into two separate controls (previously they were combined under one UI element). Undo, redo, and the delete object buttons floated on top of the canvas. Buttons to discard and save the skitched image were moved to the top left and top right corners of the canvas respectively.
Swiping down from the top edge of the screen would reveal the title of the skitch (which was editable) and options to export the skitch in various different formats or obtain more information about the skitch.
Toolbar UX
In addition to painting a broad picture of how the app might look and behave, I also created designs that showed some of the more nuanced toolbar behaviors. In this first mockup, I chose to make tool properties specific to the tool that was selected. When launching into the canvas view, the arrow tool is selected by default, and the two properties available for the arrow tool are color and size. Tapping the color button on the right would show a list of 8 basic colors, with the option to expand a more advanced color picker. This color picker design was lifted from my designs for the Skitch Windows Desktop app.
Tapping ‘advanced’ in the basic color picker would reveal the advanced color picker UI. Selecting a color or tapping the color icon again would dismiss it. Users could also return to the basic color picker by tapping the "basic" button at the top.
Selecting the size property would reveal a popup showing 5 different preset sizes for objects. The selected size would affect the size of any object being drawn, or, if an object was already selected on the canvas, it would affect the size of the selected object.
In this mockup the text tool has been selected, and properties on the right side of the toolbar have changed accordingly. In addition to size and color, there is now a style property. The style property affects the styling of the text - whether or not there is a stroke around the text ("cartoon text") or if the text appears plain, without a stroke.
In this example, the user has touched the shape tool icon, and a submenu containing various shape subtools has appeared.
Now, the stamp tool has been selected and stamp types are shown as properties. In the end, this idea was shot down in favor of making stamp types a submenu of the parent stamp tool, consistent with the marker and shape tools.
The delete object button (the trashcan) only appears when selecting an object on the canvas, and floats next to the undo and redo buttons.
Selecting the crop tool activates the crop mode of the app. A grid frames the images in thirds, and handles at the four corners of the image can be dragged to crop the image.
Zoom and Pan
In addition to new toolbar designs for the canvas view, I also started to experiment with an alternative idea for panning around on zoomed-in images. This might seem like a simple thing, but it was surprisingly complex. In the existing version of Skitch for Windows Touch, panning was accomplished by moving two fingers in extremely close proximity to each other on the screen. Generally these fingers would have to be the index finger and middle finger on the same hand because of the way the app figured out the difference between a pan operation and a zoom operation. This really bugged me for a few reasons:
There wasn't any education on how to pan using two fingers
It went against user preconceptions (map apps have trained people to pan around using one finger)
It wasn't a very reliable method of panning - Windows Touch hardware at the time wasn’t nearly as sensitive as Apple hardware’s touch screens, and more often than not the app either wouldn't register a pan or it would activate a zoom operation if the user's fingers weren't positioned correctly.
My proposed solution was to add a dedicated pan tool to the toolbar. I believe it solved all three problems listed above by doing the following:
It gives the user some idea of how to pan an image around, since there is a clear call to action on the toolbar. Zooming in to an image would auto-activate the pan tool, and give additional reinforcement of behavior.
It allows the user to pan using a single finger.
It is more reliable than a strange gesture-based approach.
Here is the canvas view with an image loaded. Note that there is now a dedicated pan tool on the left side of the toolbar:
My proposal was to auto-switch to the pan tool when zooming in on an image. This would provide a cue to the user that they can now move the image around. I'm not sure that this idea was perfect, but I do think that it was an improvement over what the app currently had going for it.
With the pan tool selected, the user can now single-finger pan the image.
PDF Support
One of the major things we hoped to add to the Windows Touch version of Skitch was PDF support. These designs show some of the interactions associated with viewing and drawing on PDF documents in Skitch for Windows Touch.
In this mockup, a PDF has been opened and the resulting PDF canvas view shows all pages in the PDF. Users can scroll vertically through all pages by swiping up or down. Tools are still available at the bottom of the screen to annotate any page of the PDF.
Swiping down from the top edge of the screen reveals the title of the PDF (which is editable), as well as a button to show a thumbnail gallery of all pages in the PDF.
After the user taps the Page Nav button (shown in the previous mockup), they are taken to a thumbnail gallery of all pages in the PDF. Two filters at the top of the screen - "All" and "Annotated" - allow the user to toggle between viewing all pages in the PDF, or viewing only the pages that have been annotated.
Here, the user has selected the "Annotated" filter, which shows only annotated pages in the PDF. The thumbnails have updated themselves accordingly.