Description: When a potential customer makes it to one of your pages, what will they do? Do you want them to sign up, share knowledge, buy something, or dive deeper into your content? Don’t leave these decisions to chance. Learn how people scan web pages and how to guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. Multiple before and after examples will be shown.
What makes a great presentation?
Visual Organization: Communicate relationship between elements, Enable interaction design, Information design.
Quickly communicate: What, how and why.
Often the presentation layer doesn't communicate how to use the application.
Examples: Take a data application and make it a CRM tool. Keep a database of clients, default is edit mode.
The way you change the focus changes the way people will use it and understand it.
Adding hierarchy can highlight key functions and help people understand what to do.
That's why it matters so how do we construct a hierarchy?
How do we see things? We look for differences. Then we group things and give them meaning.
Several principles: We group things that are close and look the same.
There are many ways to create contrast: Colour, texture, shape, direction, size. The more types of contrast you add the more things seem different.
Use visual relationships to add more or less weight. Pictures have lots of weight, big bold type has less weight.
Visual weight guides you through. Example poster: Title then picture then price.
Lots of white space and big type with a picture catches your attention.
If everything is screaming for your attention you're overwhelmed and nothing gets your attention. Same as if nothing is screaming for your attention.
People don't read online, they click.
Apple website is a great example of effecive hierarchy. There's a reason it has barely changed in years.
Visual communication is part visual organization and part personality.
Visual hierarchy is deliberate prioritization of visual weight enabled by the manipulation of visual relationships to create meaning for users.
Answer what is it, how I can use it and why should I care right away.
Hierarchy becomes super important when you think about content aggregators: facebook notes, RSS feeds, Twitter links, Digg, Del.icio.us, etc...
Sometimes content gets forgotten about. Some sites are 15% content and 85% overhead (ads, header, sidebar).
If people come from a search engine give them what they came for first, then try to get them to do whatever you want then to do.
Form messaging: Errors are the most important thing on the page, draw attention to the error with common colours then tell them how to fix it right beside where they fix it.
People only want what's on the other side of the form. They wanna fill it out as fast as possible and hit submit.
Put visual emphasis on the data.
As opposed to the borders around the data (for example).
Visual communication is more than making things look pretty, it's how things are grouped, how to use an application, etc...
Matt
Copyright 2012 Scribble Technologies Inc. All Rights Reserved.
