Web Application Hierarchy - Luke Wroblewski - An Event Apart Boston 2008
- 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 at 6/23/2008 4:23:49 PM
- What makes a great presentation?by Matt at 6/23/2008 4:24:23 PM
- Visual Organization: Communicate relationship between elements, Enable interaction design, Information design.by Matt at 6/23/2008 4:25:09 PM
- Quickly communicate: What, how and why.by Matt at 6/23/2008 4:25:26 PM
- Often the presentation layer doesn't communicate how to use the application.by Matt 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 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 at 6/23/2008 4:28:45 PM
- Adding hierarchy can highlight key functions and help people understand what to do.by Matt at 6/23/2008 4:32:18 PM
- That's why it matters so how do we construct a hierarchy?by Matt 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 at 6/23/2008 4:36:56 PM
- Several principles: We group things that are close and look the same.by Matt 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 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 at 6/23/2008 4:40:32 PM
- Visual weight guides you through. Example poster: Title then picture then price.by Matt at 6/23/2008 4:41:11 PM
- Lots of white space and big type with a picture catches your attention.by Matt 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 at 6/23/2008 4:43:52 PM
- People don't read online, they click.by Matt 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 at 6/23/2008 4:45:43 PM
- Visual communication is part visual organization and part personality.by Matt 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 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 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 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 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 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 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 at 6/23/2008 5:06:09 PM
- Put visual emphasis on the data.by Matt at 6/23/2008 5:10:02 PM
- As opposed to the borders around the data (for example).by Matt 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 at 6/23/2008 5:13:01 PM
- Who's Blogging
-
Matt
- Translate
- Options
-
Comments
Turn viewer comments off and on.
Turn comments off
- Share
