Scribble to AxeThe inspiration for Axe was the visceral act of taking a sharpie to paper and forcefully scribbling out the parts you don't like. We wanted to recreate that experience in a way that can easily be shared, and won't run our ink supplies dry. We first tried to build this interaction using the mouse, but the connection between moving the mouse up and down and the scribbles appearing on the screen was lost. The fun was lost, too. We needed to be able to actually touch the thing we were removing, so we ended up making this a tablet only application. It's web-based so you can jump right in without having to download anything. The interaction is simple, take your finger and scratch out things you don't like. We use a fairly thick line (40 canvas units to be exact), so that you can redact entire headers with a single swipe, or kill large images without excessive movement. This worked great for those use cases, but when we tested Axe by handing an iPad to someone who had not seen Axe before, one of the first things they tried to do was draw. Draw arrows, smiley faces, sad faces, swear words, you name it. And this was pretty clunky with a big fat line. We wanted to keep the options to a minimum, but if people were going to draw, we should at least make it easy. So we added the ability to toggle the thickness of the line that is drawn, a broad line for axing stuff, and a fine line for free form drawing. We still kept the broad brush as the default, because the point of Axe is, well, axing things. But if you need to add a drawing to better communicate your feedback, go ahead and doodle away. By simply taking your finger and drawing on the webpage you can communicate with more emphasis and emotion.
Tap and Hold to Comment
Blacking things off on a page is all good and fun, but the feedback is not very valuable to others unless you provide a short explanation as to why these things should be removed. Writing notes with the thin brush works if you want to be dramatic, but it's not practical for longer messages, or just explaining something without using a lot of space.
A Very Technical Discussion of Click and .focus() in Mobile Safari
Buckle up. It gets more complicated from here. Binding to click handlers in Mobile Safari is problematic because they wait roughly 300ms before firing. They are waiting to see if you tapped twice, in which case the interface will zoom in, since double tap means zoom in. Never mind if zooming has been disabled for your web page, the delay is still present. This makes it impossible to implement a double tap handler using click events, so unless we were willing to give up on auto focusing the note, the double tap gesture was out.
And give up we were not willing to do. After some random experimentation, we found that by inserting the note after a double tap, and then keping our fingers down for a moment, a click event was being generated on the note we had inserted. And thus the double tap and hold gesture was born. The magic of double tap and hold is that the callback from the second touch event is fired before Mobile Safari starts to detect the start of a click event. So imagine as your finger is coming down the second time, right before it hits the screen, a note element is created under it. Then by keeping your finger down on that element for the required 300ms, you generate a click event that we can use to focus on the note text area. Great success! Sort of.
After getting this to work consistently, we proudly handed Axe to someone who hadn't seen the app and told him to go ahead and double tap and hold to add a note. After getting a blank stare, we demonstrated the gesture. After seeing it, he was able to execute it about 60% of the time. A couple other people confirmed that the gesture was difficult to execute, unintuitive, and inconsistant with other gestures on the device. No sugar coating it; we had a real loser here.
At this point we had to make the hard decision to give up autofocus in favor of a better add note gesture. Double tap still felt good, but the timing could be a little tricky, and it did not borrow from any native gestures on the device. Ultimately we decided to tap and hold because it was somewhat consistant with the native tap and hold gesture (to bring up secondary actions), and it was dead simple to execute. Just put your finger down and wait for the note to show up. You then need to tap on the text area to bring up the keyboard, which isn't ideal, but that's mobile web development.
Two Fingers to Scroll
This last interaction is much easier to explain. Native scrolling is done by taking a single finger and swiping, but in Axe we use that interaction to let you draw. If you are viewing a webpage on Axe in the landscape mode, you can still use a single finger to scroll by touching the margins of the image. However, in portrait mode we use the entire width of the screen, so if you want to scroll using the image of the webpage, then you need to use two fingers. A simple gesture, but if you really hate it, just rotate your device and scroll outside the margins.