It first showed up in Fast Company’s March 2012 iPad edition and designers everywhere salivated. The scratch off, or what many call the “wipe away effect,” because of it’s widely recognized use by Fast Company. But as much as designers and developers love the effect, how many truly good uses are there for the effect? After three years of looking at the Fast Company cover, we found one. A word search.
As a general rule, we at Storycode have found that instead of forcing an effect into a folio where it might not fit, or where it might just be a little bit of sparkle without much usefulness, we hold on to these effects until a use-case appears. And when a client asked for a simple word search puzzle for one of their publications, we saw the opportunity to use the scratch off effect for more then just sparkle.
The scratch off effect that Bob Bringhurst shows off in his DPS Tips App, available here, is a great, simple piece of HTML5 that provides some advanced interactivity for your DPS applications and is the basis for our simple little game.
The game consists of images of the word search. The first is a plain word-search that could be done on paper. That image becomes “foreimage.jpg.” The second is that same word search with a 55% opaque highlighter yellow overlay and a black line through each word. This image becomes “backimage.jpg.”
At this point, as long as the “foreimage.jpg” and “backimages.jpg” match, you have a simple word search puzzle that will add a nice piece of interactivity that can increase user engagement
I added an, admittedly crude, reset button in the upper left hand corner and modified the HTML and JS to my preferred naming conventions, but other than a few minor cosmetic modifications, the file is largely unchanged from Bob’s sample.
Lots of little HTML5 widgets, for lack of a better word, exist that can provide great bits of interactivity when they’re in smart ways. Look past the sparkle and see how the interactivity can be utilized to provide a new, or better experience to the user.
View the sample and download the code here.