When we design a system (or product, or interface), there are multiple facets to consider;

• What task the user wants to complete – journey analysis
• What data will be input, processed, and output
• How the user will interact with the system to deal with their tasks and data
• How the system looks

A project scope usually either influences, or simply validates these requirements. For example, if a completed prototype for a website is handed from the client to be usability tested; we will test whether users can complete their journeys effectively, and what they think of the look and feel (validation).

In an Information Architecture project, however, we will actually engineer the interaction for these user journeys, and then test it, giving a much more complete user centric design in which we have been able to feedback our expertise early and often.

Interaction design covers:

• How to navigate around the system
• How novel or traditional the interaction style is
• How to separate novice from advanced controls
• How long it takes to complete a task
• How much information the user has access to
• Whether data entry is flexible or restricted and validated

Visual design influences the customer’s perception of:

• Brand – should it look new or tie in with traditional brand imagery or a specific campaign?
• Trustworthiness – is it a financial or medical product for example
• Excitement – is it a travel or creative product for example

Problems can arise in how to present work back to the stakeholders; whether to develop the look and feel in parallel with the interaction and present them together, or whether to build a solid interaction, then at the last stage to apply a creative layer on top for the look and feel.

Visual and interactive together

If the creative designers are in house, it makes sense to get them talking to the interaction designers early to get a sense of the project; this is more effective than briefing them on what the project is about at the very end of the process. It also allows the client to give feedback on the creative element much earlier.

However, the creative designer won’t be able to get much past mood boards and colour swatches as they won’t know what sort of elements they are designing for until the interaction designer has finished, and if the interaction design changes the visual design will have to change to accommodate, causing wasted time.

Visual and interactive separately

In almost all cases, the way a system works is independent of the way it looks; this means that once the interaction is perfected, it can have many different visual styles applied to it.  We usually design the interaction first, and then apply the creative layer on top.

Presenting back to the stakeholders

What we find most important is that when we present our work, stakeholders must be aware of the distinction between interaction and look and feel. It is not useful to be critical of the way a design looks at a stage where we are only focussing on how it works. In order to remove the temptation to do so, we try to present the interaction design as wireframes (sketchy diagrams showing elements such as drop down menus and their locations, but not their colour or design).

Sometimes clients are very focussed on visual design, as they have images of their site being ‘new’, ‘exciting’, ‘inspiring’ etc. These factors need to be taken into account, but it also needs to be stressed that most of these issues will be addressed later in the project, because if they focussed on earlier it could impact on the fundamental usability of the system. Ways of coping with this include:

• We communicate more frequently – sharing design decisions from an early stage means there are no surprises, and the client can feedback their thoughts sooner
• We use a logical methodological process – we perform user research, conceptual modelling, process flows, sitemaps and wireframe interaction design in logical sequence, feeding back after each stage
• We show the design with as little visual design as possible, until the very end. This helps to focus on the how it works, not how it looks.

By focussing on how the user will interact with and use the interface we are engaging in functional design which is rooted in research, robust, expandable in case of future development, and can have various visual styles applied to it as needed.

Within the information design sphere there is always a need to meet multiple objectives; please your client, please the end user, meet business requirements, and stay within technology limitations. One of the most fundamental questions this can raise is the extent to which your design should be radical, cool, or revolutionary, as opposed to standard, simple and conformist. I think there are two participants to consider when meeting this dilemma:

User needs

The underlying purpose of the design should be to meet the user’s needs; there is no need for a website if no customers or potential customers want to visit it. On the surface, the initial visual impression of a web site can have a big impact on the user. However, over time, the user will become accustomed to the design and lose their passion for it (compare your reaction at first touching an iPod to your 1000^th interaction with it). This is not to say that visual appeal is not important, just that ease of navigation is more important (excluding specialist scenarios like gaming). One of the most memorable quotes I ever heard in a usability test was “Just give me the information I require in a manner I anticipate!”, in response to a wacky design which did not place information in the expected locations.

Client expectations

Some clients see ‘design’ as being equal to ‘creative’. It can be challenging to convey that the aim of information design is to build a taxonomy which gives the greatest information reward with the minimal time and effort expended, and that the output of this (e.g. wireframes) might not look very pretty. We have found that it helps to set expectations for this as early as possible (e.g. in the proposal), and to describe the benefits of good information design.

At One to one Insight we always design the taxonomy, terminology and interactions first, before laying the creative design on top. We help clients to understand that in the long term, users will keep using your interface if it is easy to navigate. Additionally, a wireframe offers more creative scope than may at first meet the eye; portraying a menu horizontally across the top of the page in a wireframe might look bleak and standard, but the creative team can then give that menu shapes, colours, textures and shadows, even making it appear part of a scene or background, as shown on the examples below:



Conclusion

We feel that the underlying structure of a website is at least as important as the visual appeal, and that both of these contributing design factors should be designed separately, to avoid creating dependencies where the visual design dictates, and therefore compromises the information design. Only once the information architect has completed the structure of the site should the creative layer be applied. This creative layer could be radical in its nature, but we believe that standards emerge for a reason. It is beneficial to conform to commonly accepted patterns, such as navigation menus being in a row at the top or column at the left, and beginning the with ‘Home’ link (for example). These standards allow users to learn one pattern and apply it to hundreds of interfaces which ultimately increases usability.