Somewhere, out there, I have a half-written piece about how playing video games in my youth, my fights with our family microwave, and my frustrations with DVD menus around the turn of the century have helped set up and shape my mental framework for looking at interfaces.
That full piece may never see the light of day. (Although feel free to nudge me into action over at Help Me Write.) In short the jist was Don’t make something really fucking annoying to use. There is one specific point in that piece that I don’t want to leave unaired and undiscussed.
Let’s start here:
Supplier to client:
Here are the visuals of your website.
These visuals are usually presented with a walk-through, a discussion about the visuals.
“Let’s take you through our thinking.”
“We have given your existing branding prominence in the website header section, per the brand guidelines.”
“That’s just meaningless holding_ Loren Ipsum _copy.”
“And now we’ve shown you the desktop version, here’s how that desktop visual will look through on a mobile device.”
There’s a number of potential issues with all of these statements. But let’s concentrate on just one point.
Usually these designs are displayed in a PDF. Or printed out. Or “in-browser” (as an exported image).
Designs. Static designs. Static, flat, motionless designs. Pretty ain’t they?
But representing movement in some way? Sometimes there might be a ‘before’ and ‘after’ visual to give you an idea. There also might be the suggestions of movement concepts, movement mechanisms with an annotation.
“The images on the home rotate through.”
“Click on the button and the form information is sent through.”
“The button changes state on roll over.”
“The user will use a slider to change the value.”
“The information will be split with accordions.”
“Click the link to go to the next item.”
But is this enough for interactions? Interactions are an animation of some sort, a change of visual state. They are key part of a design, usually to get a user’s attention.
“Yes, you clicked that button and I am detected it.”
“Can you please make sure you fill in the form fields I have highlighted red.”
“Look at this special offer!”
“It’s been ten seconds. Let me gracefully slide in another picture into that area there, a picture that makes you feel we understand you as a person.”
I raise it now due to the way interfaces - whether they are wireframes or designed visuals - are mainly created and then presented. And presenting on to ‘the client’ is the point they need to be fully understood.
Design and designing in the modern world may be continually blurred with how we connect together so many fractured elements, but the human body and the human mind still needs an interface to connect with, and how that interface responds is vital for the mind to understand. It needs to be clear.
For all the time spent caressing, nudging pixels around on-screen do yourself a favour and extend that thinking, give yourself some time to think about how the website will flow from a visual point of view.
Animation has movement, but it also has a rhythm, a pattern, a structure of its own. For its derision, Flash offered designers an up-front view of the concept of a timeline and enforce an appreciation to animate as much as tickle pixels. Think: musical notation.
On that note, sound can also be an interaction response, often overlooked on websites. (Is putting animation and sound together to form ‘video’ too much still?)
Interactions are too overlooked, and yet are an integral part of the user experience. All I ask is next time you do design work and prep it to be presented, make sure you can get across the idea of what the interactions will be, even if it is embelishing more verbs on your descriptions. In your own way you’ve got to make sure your client understands, and everything associated with the project. Let your visuals be a clear interface to your thoughts on the experience you are looking to craft.