Boxes And Arrows : The Design Behind the Design

Article Idea:

Managing visual identity? How and when?

suggested by Chris Roast on 2006/08/02

Visual consistency is a common objective for a site, the benefits are obvious, site users become familiar with the page layout and features, helping them navigate, read , understand and trust the site. The same reasons of user familiarity and trust mean that it is often useful for sections within a site to be given their own visually distinctive character. At the level of the site visual identity is important to maintain a brand, but also to ensure that the boundaries to the site themselves are clear – can the “edge” of a site be recognised as such by users.

Within a site design, visual identity can be given by the IA representations defining layout, styles and appearance, and with sections within a site having specified variations. If the site and its structure are well suited to users’ activities, then they may never question their location or the direction that they need to go. In this case the visual consistency is simply a secondary support for users’ expectations – “it looks like you are where you think you are”. If we consider cases where the user is less at one with the site architecture, visual consistency provides simple indications of boundaries within the site, for instance moving from one color scheme to another may indicate that you’ve moved departments or functions. Hence, the risk of poor visual consistency is that users will mis-understand where they are and may have to interpret other clues/evidence about their location. As a negative user experiences go, being lost or uncertain must be one of the most disarming.

However, how is visual identity managed? The above view is very neat but it does not necessarily reflect the reality of web design – designers commonly work holistically conscious of the fact that the devil is the detail and each stage of adds detail. In implementing a design, that is, moving from wireframes, style illustrations, etc. through to the reality of data entry, coding, scripting and dynamic html, the potential for slips is high. Hence, although a site design may be “signed-off”, most designers will monitor quality, assessing whether the implementation is still on target. “Unforeseens” can arise at many points in the process: poor data integrity, such as when a text turns out to include html; poorly coded scripts; and content not fitting an expected style. Of course there is the human slips also, arising from unsuitable workflows, poor quality assurance and limited budgets. There are fixes for problems like these, including numerous aids to help to deal with the complexity of web implementation, content management tools, validators and link-checkers, and so forth. However, these are all technology facing tools controlling or identifying technology grounded issues, and as such they only deal with half the problem. Little can be done to check that the implemented site has kept to planned visual design.

To help address problems associated with managing visual identity, we’ve developed a prototype tool (GIST) that analyzes the visual features of a site based strictly upon page appearance. From a collection of page images GIST identifies those that are visually distinctive and those that are visually similar. From this an interactive scatter plot of the pages is generated to show visual groupings of pages and outlying pages. Conventional visual design would suggest that groups of visually similar pages belong to a coherent logical group, where as outlying pages are worth checking in detail. Unlike the approach taken by technology facing analyzes, whether or not a visual design is correct is a decision that only a designer can make, and thus the output from GIST highlights potential issues worthy of consideration. GIST analysis can be customized to known design characteristics, so that it is primed to, say, specific layouts or color schemes. GIST can also be configured as a web-spider to collect other pages (both internal and external) and include them in its analysis.

We’ve employed GIST in-house, with a couple of clients, and with some sample sites. Initial reactions to GIST seem positive, though it can throw-up more issues than expected and raise questions about the details of a site’s visual design that in our experience are rarely well defined. For any site that demands a strong visual branding and that is too large to be reviewed by hand, GIST should provide a valuable addition to reviewing quality.