Designing for a Juicier Web
The first book I bought on web design, in 1998, was The Principles of Web Design by Jeffrey Veen. Jeff’s tips included how to create a striped web page background using by repeating a single-pixel GIF as a pattern in the HTML code (CSS hadn’t really caught on yet).
Today’s designers face different constrains and challenges. Sites and applications have become complex but their owners want them to feel simple and friendly. To achieve this, UX designers create static wireframes with tools like Balsamiq Mockups, teasing out interactions before developers write code.
But static mockups are limited when it comes to designing juicy interactions.
What is Juice?
Squeeze an orange: the fruit gets squishy (basic tactile feedback) but it also squirts juice at you. In game design parlance, making a game juicy means making interactions output more than the user inputs. It means making the experience pleasurable. (See my explanation on the difference between usability and user experience.)
This fun talk by game designers Martin Jonasson & Petri Purho, explains a little more about juiciness.
The new era of web juiciness is being led by mobile design. For example, click the floating action button (FAB) in Google’s material design, and it may spawn new buttons. That’s not how a button used to behave! But it’s fun.
A Glut of New Prototyping Tools
The problem with static mockups is that they can’t show juicy interactions. So we need other tools.
One of these is Pixate, which you can use to create mobile app animations. I like Pixate because it has a visual interface (no coding is required). I’ve even used it to create a watch app prototype. But Pixate requires you to prototype directly on the device. That’s maybe understandable, but anybody you want to share your prototypes with must have the Pixate app installed on their device too.
Another thing I’ve noticed about the latest glut of prototyping tools, such as InVision, Proto.io and others, is they seem geared toward high-fidelity prototyping. I prefer to work with sketches rather than polished visuals, at least until the design is close to completion. It’s easier to make radical changes to a sketchy design.
There are other prototyping tools, like Framer.js, that require you to create your prototypes in code (in Framer’s case, CoffeeScript) from the beginning. This approach has obvious advantages, but I hate writing code when I’m in “design from scratch” mode. I see a blank page and I can only think visually. Code comes next — preferably from someone a lot better at writing code than me.
Using Animation Tools to Design Some Juice
None of the many prototyping tools I’ve tried have given me what I wanted.
To create juicy interactions, my current favourite method is to use Adobe’s After Effects, a tool intended for adding credits, graphic, etc. to videos. I can take my static Balsamiq wireframes and use After Effects — which has controls similar to Flash — to create a video of the juicy interactions I’m hoping the developers can achieve.
After Effects will output a movie file by default. To create the animated GIF shown at the top of this article, I imported the resulting .avi file into Photoshop (File > Import > Video Frames to Layers). In Photoshop, I was able to play around with the timings a little more.
There is no one-size-fits all tool yet that allows me design for the juicy web. For the moment, a combination of tools seems like the way to go.
We’ve come a long way since one-pixel repeating backgrounds. I’m not complaining — those striped background sites were ugly.
