Lost in translation: Bridging the gap between interaction & visual design
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…
-
http://twitter.com/pete_love Pete Love
-
http://pulse.yahoo.com/_4CC7NGGYTDWULFDPARE4E7W4KE abhishek gupta
-
Jannis Gundermann
-
Anonymous
-
George Pytlik
-
Anonymous
-
Adeline Salkeld-Blears

