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.
by Matt McCausland at 6/23/2008 4:23:49 PM
What makes a great presentation?
by Matt McCausland at 6/23/2008 4:24:23 PM
Visual Organization: Communicate relationship between elements, Enable interaction design, Information design.
by Matt McCausland at 6/23/2008 4:25:09 PM
Quickly communicate: What, how and why.
by Matt McCausland at 6/23/2008 4:25:26 PM
Often the presentation layer doesn't communicate how to use the application.
by Matt McCausland at 6/23/2008 4:26:36 PM
Examples: Take a data application and make it a CRM tool. Keep a database of clients, default is edit mode.
by Matt McCausland at 6/23/2008 4:28:27 PM
The way you change the focus changes the way people will use it and understand it.
by Matt McCausland at 6/23/2008 4:28:45 PM
Adding hierarchy can highlight key functions and help people understand what to do.
by Matt McCausland at 6/23/2008 4:32:18 PM
That's why it matters so how do we construct a hierarchy?
by Matt McCausland at 6/23/2008 4:35:29 PM
How do we see things? We look for differences. Then we group things and give them meaning.
by Matt McCausland at 6/23/2008 4:36:56 PM
Several principles: We group things that are close and look the same.
by Matt McCausland at 6/23/2008 4:37:18 PM
There are many ways to create contrast: Colour, texture, shape, direction, size. The more types of contrast you add the more things seem different.
by Matt McCausland at 6/23/2008 4:39:21 PM
Use visual relationships to add more or less weight. Pictures have lots of weight, big bold type has less weight.
by Matt McCausland at 6/23/2008 4:40:32 PM
Visual weight guides you through. Example poster: Title then picture then price.
by Matt McCausland at 6/23/2008 4:41:11 PM
Lots of white space and big type with a picture catches your attention.
by Matt McCausland at 6/23/2008 4:42:32 PM
If everything is screaming for your attention you're overwhelmed and nothing gets your attention. Same as if nothing is screaming for your attention.
by Matt McCausland at 6/23/2008 4:43:52 PM
People don't read online, they click.
by Matt McCausland at 6/23/2008 4:44:48 PM
Apple website is a great example of effecive hierarchy. There's a reason it has barely changed in years.
by Matt McCausland at 6/23/2008 4:45:43 PM
Visual communication is part visual organization and part personality.
by Matt McCausland at 6/23/2008 4:46:29 PM
Visual hierarchy is deliberate prioritization of visual weight enabled by the manipulation of visual relationships to create meaning for users.
by Matt McCausland at 6/23/2008 4:49:21 PM
Answer what is it, how I can use it and why should I care right away.
by Matt McCausland at 6/23/2008 4:52:53 PM
Hierarchy becomes super important when you think about content aggregators: facebook notes, RSS feeds, Twitter links, Digg, Del.icio.us, etc...
by Matt McCausland at 6/23/2008 5:01:49 PM
Sometimes content gets forgotten about. Some sites are 15% content and 85% overhead (ads, header, sidebar).
by Matt McCausland at 6/23/2008 5:01:49 PM
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.
by Matt McCausland at 6/23/2008 5:01:50 PM
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.
by Matt McCausland at 6/23/2008 5:02:28 PM
People only want what's on the other side of the form. They wanna fill it out as fast as possible and hit submit.
by Matt McCausland at 6/23/2008 5:06:09 PM
Put visual emphasis on the data.
by Matt McCausland at 6/23/2008 5:10:02 PM
As opposed to the borders around the data (for example).
by Matt McCausland at 6/23/2008 5:11:26 PM
Visual communication is more than making things look pretty, it's how things are grouped, how to use an application, etc...
by Matt McCausland at 6/23/2008 5:13:01 PM