First impressions really matter. We know this intuitively, and you may also have seen the stats that say it takes web visitors less than two-tenths of a second to form a first impression, and just 2.6 seconds for a user’s eyes to land on that area of a website that most influences their first impression. Visitors make their decisions on whether to stay or leave in 10 seconds or less.
Visual design – the photography, graphics, typography and layout on a page — has a lot to do with initial first impressions that your visitors have. While it’s not the only thing, paying attention to visuals in the right places can have an important impact on how you connect and engage with visitors to your web and mobile experiences.
Last week I was on an interesting panel that included some colleagues in digital design from other companies: A well known express shipper, a major wireless provider, a cutting edge design firm. We talked a lot about what makes visual designs work. Then, we talked even more about other factors beyond visuals that are required to make an experience effective.
Where Strong Visuals Matter
Strong visual designs are immensely important in attracting attention and engaging users, especially where they’re new to your brand and company or organization. At Cisco, we have examples of this in our home page, immersive experiences around specific topics such as Internet of Everything and many other places.
Good and consistent visual design does great things: It helps to quickly establish trust with your brand. It orients people. It keeps your visitors engaged. A good visual design can lead users to the right places on the page, and help them make decisions.
Simplicity Counts
Visual designs don’t need to be extreme or snazzy to be effective: You can use good simple visual design to lead users to a key call to action. For instance, one of our panel members pointed out that good adherence to visual scanning principles makes sure that button and other key elements are obvious, raising the probably that users will engage. Another follows a strategy of using visual and interactivity and make sure the online experience is enjoyable, fun and efficient.
One of our panelists pointed out that users tend to scan a page in an “F” pattern, looking across the top, down the left side, and the slightly lower and horizontally on the page again. This remains true even with tablets, and probably works the same way even in the horizontal themes that are emerging, such as Wired.co.uk’s new home page design.
OK, but something all of us panelists emphasized is that visuals are just a piece of the digital experience. We all also have many important “boring” pages where visuals are more muted but where principles of good design are essential.
For instance, the visual treatment of this simple search results box below, while perhaps aesthetically “boring,” results in a very effective design that collects the most important information around a product all in one place, lays it out in a very scannable format, and makes it obvious how to connect with someone at Cisco to find out more information.
While simple, this is an effective design for our customers and partners who are often working on problems on deadline and need information quickly, unencumbered with fancy visuals or other distractions.
Some Tips From Our Panel
That simple search results design above gets to the heart of the matter: “Design” is much more than bold visuals, and in any design project you should tune your visual design to the user’s goals and the task at hand. Here are some points for the panel:
Design end to end – When you’re design a new experience, think about the entire experience from someone searching on Google or Bing to landing on a mobile page to the offline interactions they may have in between. This experience should “designed” end to end and not just a screen at a time.
Design for actual people – Use personas or other techniques to design for real types or users who are completing real tasks.
Do Some Wireframing and IA up front – Use basic wireframes (simple diagrams of your pages/screens) or concept drawings to articulate the basics of an experience before you dive into an extensive visual design. (but see the next item)
But, visual comps can help – A corollary to the notion of wireframing is to have some strong visual comps on hand that you can show to your sponsors or decision makers. Sadly, black and white wireframes won’t convey the fireworks they’re expecting.
Don’t throw away common sense visual design rules: With today’s poster-oriented page layouts, often assembled with mix-and-match panels, it’s tempting to allow a random quilt to emerge on pages rather than a holistic design. But, with a good visual system, you can balance fidelity of the visuals: Create a design system with a good strong blend of iconography, infographics, photos and the information itself. Avoid blending incompatible styles and leverage modules and patterns to make things easier on your designers and agencies.
Embrace change, prototype quickly, be agile – With almost every project now, we create quick prototypes to understand how the designs will work. These are also good tools for testing with users, and demonstrating ideas to our stakeholders.
Test and learn – As you have protoypes ready or finished live implementations online, test and tune your designs. And then test some more to optimize. There are a number of tools at your disposal for this, including well-crafted A/B tests (including control groups), usability testing through online self-service or facilitate sessions, five second tests, and other techniques.
Finally: Don’t create a monster you can’t feed – This is perhaps the most important rule of all, and one that it’s hard to convince teams about until they’ve lived through a few projects: You may have the most splendorous design in the world, but if it is hard to update or expensive to maintain, it will quickly go stale and obsolete. To use a real estate analogy, don’t build a 30-room mansion if you can only afford to maintain a small bungalow. Think through the ongoing costs of production, localization, management and other factors when you create a new design. It’s important not only that a design look good and work well, but that it’s maintainable.
Above all, beware of projects that start out with the main requirement to “do something cool.” If you focus on the true business and user outcomes you want – and follow the advice above – you will like end up with something not only cool but useful.
What have been your experiences?
Some references:
Digital Information World: Infographic on attention spans online
Missouri Science & Technology: First impressions form quickly on the web
Wired UK: How Wired built the new Wired.co.uk homepage
CONNECT WITH US