Wireframes – Remember what it is

I’ve had two dogs in my life, growing up; Goldie (a Golden retriever – not my naming) and Shamus (an Irish rescue Border Collie). By the time Shammy came around, I was already heavily into computer programming with all the dreams of being a videogame maker, so I naturally took an interest in training him in quite a programatical way.

I was amazed by how much he was capable of understanding, but also conversely how I could say the worst things to him in the sweetest voice and he’d be completely fooled and respond lovingly. Poor geezer.

A study on communication, back when I was at the BBC, showed that when two humans were talking face to face, the actual words being used made up only thirteen percent of what was being understood. The rest of that communication is transmitted through things like; tone of voice, volume, and non-verbal communication such as body language and gesticulation.

I’m reminded of this whenever designing or testing wire-frames. We must not forget the tonal value that the visual designer will bring, in terms of making something understandable and/or giving an interface its personality

I’ve said it before; in digital we tend to measure other disciplines by our understanding of it, and it’s easy to underestimate the implications of font use and sizing, colour psychology and the pace and personality given to our work through minor visual cues and slight of hand, often beyond the scope of detection for many people.

As a work flow I recommend taking wire-frames to around 75-80% complete. The UX designer/architect should expect to work with a visual designer to finalise the interface and treatment, making any changes necessary for the final face of the product…. This can include everything from scale to particular interactions.

This practice keeps the UX factor rapid and flexible in a way that reduces the UX overhead and curtails any unhealthy dominion over any particular direction. It also saves valuable space for the visual designer to have room to stretch out and be creative as well.

Now, this doesn’t necessarily invalidate any user testing on the UX side, it just reminds us to refocus on what it is we’re testing. Testing can of course happen however and whenever you wish, and will continue to be useful providing it’s posed correctly. Remembering the limits of what you’re testing is key. The information architecture can be assessed, but if a test candidate trips-up it’s essential that the sticking point is identified as a programmatical issue of the IA, and not necessarily because of any particular interface design solution.

Tools like Axure have become popular in recent years as a way of evolving lifeless wire-frames into reactive, moving prototypes. My concerns with this practice is the amount of effort being spent developing prototypes that are only half the picture. As more advanced functions and faux-development gets shoe’d into these tools, it increases the expectation for UX practitioners to embrace these functions and emulate the developer’s job, only to be left with a realistic prototype (that may fail) as well as unusable artefacts – How long would it take a developer to rapidly mock up wires in actual HTML and JS, and then be left with potentially re-usable code.

Of course different tools are for different jobs, their value will vary depending on the complexity of the project/task and the requirement for communication of ideas between the UX designer and the other parties involved. In my experience, the rapid conveyance of ideas should allow for quick changes and ultimately, acceptance of failure if a direction doesn’t perform. This is hard to do when you’ve invested considerable time on a prototype, laying it out perfectly and figuring out how to inject real data from an API feed. Tools like inVision or MarvelApp (and now Adobe XD) bind you with click-through simplicity, so you’re not tempted to invest too much in the idea, but make it interactive enough to get the idea across.

On another note, I’ve found that not over-annotating wire-frames works as a test in itself. If a developer or visual designer can make sense of a sketch, then that’s hugely beneficial to the confidence of the UX and flow of the project.

Visual communication can’t be underestimated. I often think of IA and wire-frames as a well formed sentence; Google can translate it, but it lacks the idioms of colloquial language that gives communication its context and personality.

Comments are closed