How can you ensure the design of your website reflects your visitors' needs and organisation's 'personality'? Identify visitor key tasks and key words to describe your personality, include them in your design brief, and use them as criteria to assess the options.
I'm working on a couple of projects where I need to help clients evaluate new designs for their websites. Reviewing options for a design 'refresh' can be fun and exciting but also confusing and frustrating (for both clients and designers). It's my job to help them through it.
Evaluating design can an 'interesting' process. An individual's opinion of what good design is can be subjective, intuitive and instinctive. Diverse views can make it hard to reach consensus. The ingredients for great design can seem intangible and magical!
When presenting design options to a group, feedback often starts with comments around colour, typeface and imagery. Would it be better to have a structured way to assess design that ensures it reflects visitor needs and your organisation's values and personality? Instead of leaving it to up to the taste of the most influential people in the room?
Identify key TASKS that describe why visitors come to your website
Put yourself in the shoes of visitors to your website and define the 3-5 most common reasons for their visit. Visitors are task focused so have come to your website to do something specific eg:
- find out who you are and what you do
- find out where you are and how to contact you
- register for an event
- purchase a product/service.
Define the visual hierarchy of page content
Visual hierarchy in web design is how you arrange and present content on a page to reflect what's important. Content related to visitor key tasks should be prominent.
For websites that promote an organisation I recommend the following hierarchy:
- Who we are and what we do introduction and imagery (including logo).
- Key task highlight areas eg, boxes and buttons.
- Main navigation list.
- Why you should care information eg, testimonials.
For other types of websites the hierarchy will vary eg, for Google.com the order is:
- Search field and buttons.
- Utility menu.
Google is a household name so they don't need to provide information on who they are and what they do. Accessing the search engine and other useful tools are the key tasks for visitors.
For more information view Luke Wroblewski's presentation—Communicating with visual hierarchy—on www.lukew.com.
Create a list of key words that describe your organisation's personality
Your organisation's personality should also shine through in the design. Z Energy's Fran Drager talked about the importance of 'identifying your values' and 'discovering your personality' in her workshop on Brand for Volunteer Wellington and the Community Comms Collective.
Z's shared values inform how they work and communicate (internally and externally) and their personality informs how they present themselves. Both contribute to their culture.
Imagine if you bumped into someone on the street who was a representation of your organisation. What are your first impressions? What do they look like? How do they behave? What's their general demeanour? Create a list of 3-5 key words that describe this personality.
Include this information in your design brief and use as criteria for assessment
Now you can give your design team your content visual hierarchy and personality key words, and use them to help you assess the options produced.
You can determine if the design is effective by doing the following.
- Compare your content visual hierarchy with the order you (and other assessors) actually notice elements on the page.
- Ask assessors to pick key words (from a list of around 20 that includes yours) that best describe the designs and compare their choices with your personality key words.
If the comparisons match, or are close, you're on to a winner!