Visual Hierarchy

Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual characteristics—e.g., menu icons—so users can understand information easily. By laying out elements logically and strategically, designers influence users’ perceptions and guide them to desired actions.

-interaction-design.org

Visual heirarchies saves us preprocessing by organizing and prioritizing content for us.

Visual heirarchy should follow three rules:

• The more important, the more prominent
• Things related logically should be related visually
• Things are “nested” visually to show what’s part of what

Avoid visual noise. Three kinds:

• Shouting: Where the items are screaming for attention. Not everything can be important or nothing is
• Disorganization: Things are all over the place. No use of grids.
• Clutter: There is just too much stuff

Links

Make choices obvious but if not possible give guidance:

• Brief: give the smallest amount of information that will help
• Timely: Placed so I encounter it exactly when I need it
• Unavoidable: Formatted in a way that ensures that I’ll notice.

Make it obvous what is clickable (a door handle tells us to push or pull)

Minimize Text

Format text to support scanning:

• Use plenty of headings. It is an informal outline. You want to use more than you think. Be sure level of headings is obvious, size change for example. Avoid floating headlines. They should be closer to the content they represent.
• Keep paragraphs short. users find them daunting. Doesn’t follow same rules as written type (doesn’t have to have same structure)
• Use bulleted lists. Anything that can be bulleted should. Be sure to have spaces between list items.
• Highlight key terms. Users are usually scanning for specific keywords, hightlight them to make it easier for them. Don’t do it too much or it loses effectiveness.

Reduce Text

Omit “extra” text.

• it reduces noise level of the page
• it makes the useful content more prominent
• it makes the page shorter, allowing users to see more of each page at a glance without scrolling.

Obviously some types of writing should be verbose like webmd or times

Avoid happy talk. Stuff that is small talk. Self-congratulatory. Contains no real content. Most user do not have time for small talk.

Avoid instructions. No one reads them (unless multiple muddling attempts fail).

You can avoid instructions by making everything self-explanatory

If instructions, cut them to bare minimum

Navigation

The menu system used to “travel” from page to page on a site. Navigation is extremely important. Not just a feature. It is often the primary functional component.

We call it web navigation and not store navigation or library navigation. It implies we have to “figure out where we are.”

Interaction

You user navigates a site like they navigate real-world counterparts. You are usually trying to “find” something.

Use a mall (or store) as an example. You see the stores name, then departments, then aisle, then product. If you can’t find you may ask a clerk.

You decide whether to ask first or browse first. (search-dominant or link-dominant users). You will make your way through the hierarchy, if you can’t find what you are looking for, you’ll leave (like a store).

It feels like moving through a store when you browse a site, except:

• No sense of scale. There is no way to really know how large the site is. A store you can physically see it. This makes it difficult to know if you have seen everything
• No sense of direction. There is no left, right, up/down. There is just “levels” of specificity. We teleport to areas and rely on conceptual hierarchies instead.
• No sense of location. We use the space to orient ourselves and remember where things are. Physical spaces have conventions. Road signs, page numbers, chapters, etc.

Purpose

The primary purpose of navigation is obviously to direct users to the pages they want but it should also:

• It tells us what’s here. By making it a hierarchy visible, it tells us what the site contains. Navigation reveals content.
• It tells us how to use the site. It should implicitly tell you where to begin. It is the instructions. People won’t use your website if they can’t find their way around it.
• It gives us confidence in the people who built it. You are constantly asking if these people who built it knew what they were doing. It creates a good impression.

Formatting

Clear, simple, and consistent (that is all). 

• Basic navigation convention dictates site ID at most top left, sections below that (with you are here indicator), utilities at top right. Page name is usually in the middle top below the other items. Local navigation is typically left side. Footer navigation is at the most bottom of the page
• Persistent navigation or global navigation describes the navigation elements that exist on every page.
• Persistent navigation is not necessary on pages with forms (maybe a simplified version).
• It is necessary so that we know we are still on the right site.
• Site ID should be the highest most prominent element. This means either larger or use it to frame everything. It shouldn’t be the largest.
• Site ID should look like a site ID. That means it should contain branding
• Sections, sometimes called primary navigation. Sometimes there are subsections
• Utilities are links to things that are outside the main hierarchy. Usually sign in, search, contact, shopping cart, etc. Should be limited to 4-5
• Site ID and a home button should exist so that the user feels like they have a way back.
• Search should be included

Pages should have:

• Every page needs a name. It should be prominently displayed
• The name needs to be in the right place. Much like the site id it should frame the other elements.
• The name should be prominent. Should be obvious it is the heading for the entire page.
• The name needs to match what I clicked. Basically, be the same as in the navigation.
• You should include a “you are here” indicator in the navigation. Let’s the user know where they are. It is more important on the web since there are no physical indicators.

Ask these Questions

Should be able to answer:

• What site is this
• What page am I on
• What are the major sections of this site
• What are my options at this level
• Where am I in the scheme of things
• How can I search

From a distance should be able to see:

• Site id
• Page name
• Sections (primary navigation)
• Local navigation
• “you are here” indicators
• Search

Original App Design Project

The app project will be to create an app mockup much like we produced in the last three labs. It should be an original idea, complete with your own content. Text and graphics will be highly criticized.