A language of visual design – the grammar of digital engagement

A language of visual design – the grammar of digital engagement

Researching for a county council led me to look at other local government websites. I was especially interested to see if there was a structure to their visual design, if they used a visual language.

Unlike Gov.uk which is very uniform and accessible, local authority sites vary a lot.
I guess that might be because of –

  • diverse requirements – organisational, political, and user (from reporting a pothole to calculating mum’s financial contribution to her care)
  • numerous owners/stakeholders/agencies,
  • legacy issues (these sites have been around a long time)
  • scarce resources
  • digital teams deriving from IT, print and corporate comms’

And although citizens often come with well known, specific purposes (transactional and informational), they bring with them widely differing-

  • mental models
  • digital skills and capabilites
  • accessibility and literacy needs
  • devices and IP connections (e.g. public library, pay as you go, pstn)

Watching people try to use a “difficult” site, reminds me of ordering from an unfamiliar menu written in a different language.

Without delving too far into semiotics and semantics, sites can frustrate because they fail to communicate in a recognisable way. People are often busy, impatient, easily distracted, first-timers, restricted to pointing and swiping on their phones, so is it fair or reasonable to expect them to learn a new language?  Arguably the triumph of Apple was making the Iphone accessible to so many, people straight out the box; a computer many times more powerful than those used to launch the Apollo moon shots. Achieving that level of usability takes skill, dedication, and user centred design.

 

Nature.com – “Mosaic”

Mosaic, visual language
The first implementation of Mosaic – nature.com’s first visual language

Whilst working for a scientific publisher we introduced a visual language for digital that was quite different to the conventions and workflows used for analogue (print and telephone).
A creative agency were commissioned to produce a new look and feel which the UX and design team subsequently applied and refined across the domain. We knew the header, top level navigation and some page layouts, but not the detail –
e.g. the complete IA, navigational patterns, typography and how content should respond across viewport sizes.

We didn’t know how a published article should be presented in full, summarised in front of the pay-wall,  precised in a “rolled-up” section, or referenced in a news email on a phone.
As we implemented and iterated, we created a pattern library and style guide, the basis of a visual language (vocabulary and grammar):  a set of formatted elements (content containers) and rules for such things as –

  • presenting content in different contexts
  • “responsiveness”
  • typography, breakpoints and imagery
  • the information architecture
  • the “voice”
  • accessibility
  • naming and formatting conventions,
  • SEO mark-up…

Structure

The discrete structure of the language suggests a modular approach. A pattern library of “atomics” is analogous to words with each entry defined and with examples of how it is to be used, just as some dictionaries do.As the old joke goes:
“How do you eat an elephant?”
“One spoonful at a time”.

But the power of a visual language goes beyond this to define and “articulate” typical journeys analogous to phrases.

Going about a visual language a visual
Launching Nature.com’s visual language to the internal audience

Five years after Nature Plants was launched, the visual language is still evolving and being deployed. The former because that’s just what living languages do, the latter because it exists in a complex environment with legacy systems. By now there’s a well trodden path for migrating journals.

If visual design and content are, structured, straightforward, consistent and conventional, users can focus on their task. Simple heuristics, such as the logo positioned in the top left hand corner and linking to the homepage, are a starting point, perhaps similar to the first words learnt from a tourist phrase book. But visual languages can be rich and complex e.g. in medieval religious paintings where symbols and conventions communicated complex narratives and abstract concepts to illiterate audiences. The challenge is for the language to be so straightforward and familiar it’s intuitive –  in Steve Krug’s famous words, “Don’t make me think“.

It might seem a luxury to take time out to create an abstracted guide, but from experience it quickly repays the investment. One is evident in East Sussex county council’s site. (go beyond the landing page) and is perhaps why GDS have a pattern library and look to be getting more involved with local authorities.