Lost in translation: Bridging the gap between interaction & visual design

Posted by Adeline Salkeld-Blears in Interaction design, Visual design on August 26, 2011 | 7 comments

Something that I have noticed while working in the UX industry is that sometimes it feels like interaction designers are from Mars and visual designers are from Venus. Often during user-centred design projects there is a lack of understanding between the two species, which can have a huge effect on the overall success of a project.

As I play both of these roles (a Mars-Venus hybrid if you will) I am convinced that although both roles are creative and experimental, they just don’t understand each other. I have known the utter frustration of having something you worked hard to design, test and validate butchered in order to make it look more like the apple store. I’ve also felt deflated and un-inspired when I have been asked to work from a wireframe with no room for brand considerations or allowance for creativity.

What typically happens?

The first thing to understand is how each type of designer works. In a user-centred design approach, the interaction designer will create early sketches (low-fidelity wireframes for a website) using user research to inform them. They will create multiple models for specific interactions and then take these into user testing to find out what works best for the user. Once a model is decided on they will up the fidelity of the sketches to more widely recognised mid-fidelity wireframes, add annotations to describe the interactions, and then pass this on to the visual designer.

What is important to note here is the amount of iteration, testing and validation these wireframes will go through before being passed on to the next stage. Designs could have been iterated four times and gone through two rounds of user testing before being finalised.

So what about the visual designer? Typically, they will take the annotated wireframes and use them as a baseline for the final design. They will draw inspiration from multiple sources, some of which could seem completely random to an interaction designer, or for that matter to a user, but from a visual designers perspective these have been used as a tool to enhance the aesthetics and make the design more visually appealing. Additionally, they will be guided by the brand, which is one of the most important inputs into this process as it helps set the tone for the type of design that will be created. You wouldn’t give a retro 70s grunge design to a bank for example.

Once the visual designer has something they are happy with, they’ll show it to the client, who will inevitably make a few (hopefully) tweaks here and there, and voila! The design is complete! Time to celebrate right…?

What can go wrong?

Looking back at this process there are some critical points where things could have gone awry:

Firstly, the visual designer has absolutely no input or access to the project until the wireframes are handed over. This is a huge missed opportunity. As Martin Bulmer pointed out in his previous blog post, user testing doesn’t help you innovate. Interaction designers are fantastic at coming up with great models that will work well for users, and will test these models with users to see what works best for them, but with limited budgets and timing it can sometimes be tempting to choose to use a model that you know works well over one that is completely new. Visual designers however are awesome at lateral thinking and challenging existing conventions. The perfect time to get your visual designer involved in the design is at the conceptual design stage. If you can get your interaction designer, with their knowledge of the users, to workshop with your visual designer, with their understanding of the brand, they can help to challenge each other’s thinking to create something more innovative. The great thing is that this innovation can still be user tested. So not only will you end up with some really creative wireframes, but you’ll know that they work for users too.

Secondly, more often than not the visual designer will work for a completely different company to that of the interaction designer, and these two companies will only have minimal communication lines, most often through the client. Be very wary of this. If this is your project, and you have two different companies working on the different stages of it, the best thing you can do is to get them talking. A designer should be able to explain their design, down to the last detail. By getting your designers together when the wireframes are passed over, the visual designer can interrogate the interaction designer to gain a real understanding for the reasoning behind the design decisions.

Finally, the interaction designer doesn’t have any input in the visual design process, even though it is a huge amount of their work being enhanced. The danger here is that if an interaction designer doesn’t get to check the visual designs, major elements could become completely distorted. Emphasis may be placed on the wrong elements, key interactions could be slightly changed to fit in more with the brand, lots of subtle changes could be made and this can actually have the effect of breaking a previously validated design. This is not to say that a visual designer can’t innovate at this stage – they can, and should. But these innovations need to be done with the input of the interaction designer, otherwise you risk losing vast amounts of work and thought.

So what happens if your visual designer does come up with something awesome that changes the design model so much that it is no longer validated? Well, you take the visual designs through user testing again. In fact we recommend performing user testing on all visual designs, not only will you know that your design model still works with the visual layer applied, but you’ll also get a sneak peak at your customers reactions to your new design.

Create an intergalactic alliance

Interaction designers and visual designers bring something different yet complementary to the table. If you can combine these in a pragmatic way it will enhance the final result and perhaps drive better innovation.

 

And hey, if you want your design process to be completely seamless, you could always choose a company who does both interaction and visual design

 

 

August 26, 2011. Posted by Adeline Salkeld-Blears in Interaction design, Visual design.

  • http://twitter.com/pete_love Pete Love

    A good read. I’m also interested to note that you describe yourself as a hybrid… I also work across both fields – or rather I’m a designer who feels that the separation of the design process into two roles – interaction and visual – is somewhat arbitary. Even within a company that does ‘both’, the division can be damaging or at least problematic. I entirely agree that an iterative approach should be introduced when that is the case (I find that the iterative approach comes naturally when both aspects of the design are done by the same designer, much less so when its divided into two roles).

  • http://pulse.yahoo.com/_4CC7NGGYTDWULFDPARE4E7W4KE abhishek gupta

    Interaction designer providing feedback and edits after visual design stage makes a lot of sense

  • Jannis Gundermann

    Great article and a great read.

    What would interest me still is knowing about how a projects budget allows for this type of extensive, iterative approach to designing.

    I work in a relatively boutique design studio as visual designer/front end dev hybrid and find that most of the jobs we work on come into the studio with too little budget to allow for such a seemingly time consuming and costly (user testing) process. Frequently we have perhaps a weeks worth of budget to get from zero to finished design before starting on the code…

    Have you found that the principals of the collaborative design process can be applied to all projects or does one still need to carefully consider the project’s budget before embarking on a collaborative process such as yours? If so is there a more simplified approach you’ve discovered using those same collaborative principals that can be applied to low budget projects?

    • Anonymous

      Hey Jannis,
      When time and budget are challenging you have to be more creative. Inevitably the visual/UX designer is going to be the same person – You. There are lots of quick and dirty testing techniques you can employ to check your designs but don’t neglect the chance for a bit of co-design. An hour spent chucking ideas around with colleagues will pay you back – in co-ownership alone! ^ Martin.

  • George Pytlik

    Great article. My experiences have been the same as described here, and it can be frustrating. One memorable example: the UX specialist insisted on green buttons because they tested better. The brand relied on large amounts of red. Green and red together? Uh, no. But we wasted weeks while I tried to get management to see how silly the Christmas-like outcome would look.

    I respect what the UX designers do. But it needs to work both ways. The real problem, as I see it, is that most visual designers don’t use the same empirical evidence to give weight to their work. It’s hard to convince management to go with your recommendations when it just feels to them as if these are your “ideas” or “concepts” or visual styling. Designers have, in a sense, brought this on themselves by being lazy in selling their services to clients. They’ve relied for years on being the only game in town and now that game is changing.

    It’s time that visual designers also test variations and give those the same kind of scientific value for the client that UX designers are giving. Then they’ll be taken just as seriously.

    • Anonymous

      Ironically, we have had the reverse situation where the red corporate colours were used for the ‘go forward’ options and the ‘cancel/go back’ options were grey.
      The skill of the visual designer is to pretty much always apply the brand in a manner that is sympathetic to the users’ needs. The skill of the UX designer is realising that not every UI problem is black and white (or green and red…) ^M

    • Adeline Salkeld-Blears

      I totally agree with you there. Having to stand up for your design when you don’t have any empirical evidence is incredibly difficult and I’ve had it happen to me on numerous occasions. Hopefully by testing your visual designs it gives you more of a leg to stand on when these kind of discussions come up.

Sign up to our email newsletter

Sign up to receive regular updates on our latest projects, research, and other news in the world of usability.

Email addresses are not sold or given to anyone.

Twitter updates