Plunk

Picture this — a person buys a shiny new iOS or Android device. Instead of calling his family and friends, the first thing he tests out is their new lightning fast 4G-connection speed. When he opens up his mobile browser, something terrible happens. His favorite site, and go-to destination whenever he has a chance to browse the internet, isn’t mobile friendly.

The buttons on the site are too close together, too small, making it nearly impossible to navigate. He can't easily navigate it, becoming frustrated with the product. Fuming, he heads over to a competitors site, switching alliances.

OK, we admit it. That's a bit of fiction, but there is a kernel of truth in it. It's something that we've encountered time and time again. Some designers think that designing responsively is good enough, not realizing that users interact with content differently on a mobile device.

There isn't a keyboard, a mouse or a trackpad between users and the content. As our friend Luke Wroblewski has pointed out:

The content is the user interface.

Our fingers are the tools with which we interact with the content on the page. Where our fingers land are sometimes not where the designer intended, no matter how delicately designed the buttons on the page are. For users, it can sometimes feel like bobbing for apples.

It’s extremely important to get feedback on how users will interact with the content on your mobile site. That’s why we built Plunk. The free app is a beautiful pairing of the Click Test and Yes/No test from our concept-testing tool, Verify, but soley dedicated to mobile testing.

Bobbing for Apples

Remember as a kid you would bob for apples by plunking your face down in a tub of water filled with the fruit? While you knew that a slow and steady approach toward the apples would surely guarantee a solid bite, most of us just threw our face in the water and came up short ... and a little wet.

Navigating websites and apps on a mobile device can sorta be the same thing. When browsing, we quickly plunk our fingers down on the screen and just expect to go where we want on a site or app. We figure that the buttons are big enough to understand our intended actions.

Imagine for a second that you're using an app to send money to a family member in another country. The "transfer" button is small, almost too small, too fancy and delicately designed for your fingertips to hit. You try to hit it anyway. Instead, you hit the "cancel" button right next to hit, or at least that's what the app registers. There goes your money wire. Gone in the poof of a missed touch target.

Sure we could slow down, more precisely place our fingers down. But the majority of website vistors aren't doing that. Often, mobile users are in a hurry, making mobile browsing more like a game of Whack-a-Mole than Operation.

Let's go back to LukeW for a second. He points out that we're designing for 10 mm touch targets since studies show that our fingertips are about 8 to 10 mm. Therefore, as Luke points out, we have to design touch targets within that 10 mm range, maybe even go bigger with a minimum of 2mm spacing between the targets to avoid errors.

So it becomes deadly crucial that we know where users are landing their fingers on our designs. Because those small, delicately-designed buttons can be as poisonous as the apple Snow White bit into. With Plunk you can test your user interaction and adjust the size of your apples — ahem, touch targets.

Plunk allows you to upload an image of a website or app, then select a target by creating a hotspot. A URL is created for the test, which you can share either through email or the social media network of your choice. And testers have 48 hours to take your test ... after that the test will no longer be available. Afterwards, they'll be a nifty report page that'll show you the hotspots of where your testers actually laid fingers on your design.

But enough of that — let's actually take you through some of the pieces of how we dumped our apples into the barrel.

A Bushel of Apples

Of course, we turned to Foundation when it came time to put the page together. However, we had to find a way to balance the technical aspects of Plunk with the fun theme of bobbing for apples that we came up with. Check out some of the early sketches:

Here's the sketch on the left brought to life:

And the sketch on the right brought to you in living color:

And here's the final homepage:

One thing that we really wanted was for the test to be as true to the orignal design as possible while making sure that the images were representative of a phone's dimensions. That's when we instituted what we call the "Goldilocks Implementation." Because it had to be just right on a mobile device ... get it, just right. Goldilocks. Three bears. Oh, there's more puns ahead so stay tuned.

In the Goldilocks Implementation, this means there is a minimum and maximum width, which represents all the reasonable phone sizes. So when you upload an image within that range, it'll be pixel perfect ... so long as the tester's screen is large enough. When the image is seen on a desktop, a phone chrome is placed that scales using the old school sliding doors technique. That means images that are smaller than the minimum get scaled up to meet the minimum.

Shooting an Apple with a Bow & Arrow

An important aspect of the test is the hotspots, or red targets, in the test results. Like Luke Skywalker at the end of "Star Wars: Episode IV, A New Hope," these help you stay on target, actually letting you know where users have actually plunked down their fingers. But to get those hotspots, we actually used the same annotation javascript code that we used in other apps, such as Notable and Verify.

We also put a nice cool water effect to the images that appear on the phone in the test results. It took a bit of trial and error using a server slide image processor. The final settings ended up looking like:

-colorspace gray -fill "#89dbea" -level -10 -modulate 90 -tint 100

Toss Out Those Rotten Apples

Just a quick recap. We need to test mobile devices. Why? Simple. Internet traffic is rapidly increasing on mobile devices and in India mobile traffic has already surpassed the desktop. Touch targets on a mobile are deadly crucial to allowing users to navigate a website or app.

Plunk can make sure you can stay on target. By testing mobile websites or apps, you'll see if you have a few rotten apples, or targets, that could spoil the rest of the bunch if they're not tossed out.

Start Plunking!

Check out our other free apps: Axe, Bounce, Clue, Chop, Reel, Spur, Strike