sep 2007pvt ebus325 ctu1 information architecture, the user interface, and site navigation effective...

Sep 2007 PvT EBUS325 CTU 1

Information Architecture, The User Interface, and Site

Navigation

Effective Information Presentation for Web Sites


During the Dot Com Boom Web development teams were made up of software

developers, information architects, search experts, and usability experts along with Visual Designers. Users got used to the conventional Web interface of

links(in all their configurations), pull-down menus, and dialogue boxes. The browser and HTML imposed these limitations which can be

clumsy to some.

.Search is now the dominate technique for large scale Web navigation. (thanks to Google)


First Epoch of Web Design “The first epoch of Web design is over; from now on,

Web pages will be as attractive as print - but more interactive.” Roger Black, Help Me Redesign the Web, Technology Review, May-June 2007.

From the days of sharing documents, web pages have modeled what was available in print (typewriters and offset printing).

Today, Design professionals are turning away from HTML and toward search and multimedia authoring technologies such as Flash and WPF(Windows Presentation Foundation)….. Motion seems to be the name of the game according to Roger

Black…. Emotional Design is also playing a role as we move into

the future…. “Positive emotions are critical to learning, curiosity, and

creative thought…” Don Norman, Emotional Design, 2004.


Information Architecture Intro 1995 - Enter the Information Architect…??

An individual who “…will look at the business’s needs, the end user’s needs, what technology has to offer, and then creates a blueprint for how to organize the web site so that is will meet all these needs.” Information Architecture, Christina Wodtke, 2003.

Information architects are information organizers….they work with project managers, engineers, and marketing folks to make large amounts of information useful to people..


How do they do it? Instead of relying on methodology, most IAs help their

clients develop a toolbox or collection of techniques and principles that they can apply to a problem. Some rules of thumb:

Design for wayfinding Set Expectations and provide feedback Ergonomic design Be Consistent and consider Standards Provide Error Support - prevent, protect, and inform Rely on Recognition rather than recall Provide for people of Varying Skill levels Provide meaningful and contextual help and documentation


User Interface Design While the Information Architect suggests what is needed,

he/she generally does not specify how it will be rendered. On the other hand there are areas that overlap information

architects and the graphic designers. How to accomplish goals that have many steps

Ordering a user configured computer online…. Checking out with purchases

Steps that must be completed in order Registering a product

A task that is seldom performed Getting authorization to return a defective item

Wizards are a way to lead the user down the correct path of actions necessary to accomplish the goal.


IA and Web Page Design Now that the necessary content/pages have

been decided upon, IA architects would advise these rules of thumb: #1 Simplicity and Elegance

Each element on your page should have a purpose. Some are functional (Buttons for navigation) Business related (Banner advertisements) To help the user make sense of the page (groups of related

items, navigation,…)

Design is not decoration. It is communication. Every element on the page has a job to do!


More IA Web Page Principles #2 Proximity and Relevance

Put like items together. Tools for the same task belong in the same visual plane.

Humans will focus intently on the object of their quest and therefore all irrelevant items disappear from their view.

When you design, you are coding each item to be relevant or irrelevant to a given task. The visual design is a message to the user coded in imagery. Placing items far apart or putting a heavy line between them says

these items are not related Placing items in a location typically used by ads, such as the top-

right or rightmost column of a web page often codes those elements as irrelevant.


#2 Proximity and Relevance cont.

Your visual code vocabulary can be: A shared space on the page, such as a box A shared color palette, font, visual weight Placement next to each other Distance from unrelated items(increasing white

space between disparate elements makes the similar ones appear even more together).

……..


IA Page Principle #3, #4 Focus and Feedback

When a user embarks on a task, make sure the layout focuses on helping them succeed in that task. Remove unnecessary items from the screen and make certain

that each action has clear feedback. Checkout only has a Next button.

Hierarchy of Importance, a Hierarchy of Task Establish Visual hierarchy - common tasks higher up

and bigger


IA Principle #5 The right tool for the right Job

Each widget has a meaning and a purpose that your visitor will cling to when trying to navigate your site. The experts state that links should be blue and underlined (this is

how it was in the beginning and how it should always be…). Other conventions are arising…

Using a different color Click Me! Pointers….looks like it should be clickable…the “hand”

cursor shows up when I rollover…therefore it is clickable, buttons.


Universal Icons

Icons are one thing that can guarantee a click….recognizable icons increase the odds even more.

Everyone recognizes the Shopping cart or the email envelope for contacting us.


Site Navigation Intro…Wayfinding

Finding your way around a well-organized site, even an expertly designed web site can be a challenge, especially if you are not familiar with the site.

As the designer of the site, it seems a lot easier to you to navigate the site than it does to anyone else.


Today’s Navigation

How are large sites Navigated? Searching!

Moral…a search interactive form should appear on almost every page….where? Upper right corner by convention with a button labeled

“search” nearby to start the process.* After the search process is complete a page of links to

the “found” pages is presented to the user. Most users expect to search sites today and expect it to

be present. Implementation can be problematic….


Typical Navigation Styles

DW Table with Flash text

FW Popup Menu

DW list of links

Flash Buttons

DW Nested Lists


From an IA viewpoint

The goals of way-finding are to let people know: Where they are…. Where the things they’re looking for are located How to get to those things they seek

Way-finding does these things using signs, architectural cues, and interior design choices.


Global Navigation

When designing the architecture of your content, you probably have two types of stuff: the actual content of your site and the support information. 1.)Support information includes job listings;

information about the company, ways to contact the company, legal information;….things having to do with the web site and company and not aimed at the content of the site.

2.)The top level categories of items that will be the most valuable to users - these are global navigation candidates.


Local Navigation

Local navigation is a way to move within subsections of a web site.

There are generally two local navigation behaviors: Pogosticking - users go to a subcategory and

then back to the parent category to choose a different subcategory.

Crabwalking - navigation to a sibling page and then on to another sibling page.


Techniques for Navigation Navigation systems have the potential to provide a

feeling of high-tech interactivity… Rollovers, image swaps, or pop-up menus. Flash animations Image Maps with hotspots

The bottom line is to communicate…. Where you’re at… where you can go….how to get out! Hints as to What is available and where to look.

In well-designed sites, users do not get trapped in dead-end pages….


Browse and Learn

One of the best ways to get Navigation Scheme ideas is to browse other sites.. As you look around, observe how well the

Navigation scheme… Creates an identity Adds visual interest to each page of the site Provides an understanding to the structure of the site

as well as signposts to the content.


Note the Dominance of Navigation


Graphic Buttons


Tab Navigatio

nhttp://deluxe-tabs.com/templates/?glass-style?affiliateid=26469


Tab and Link Navigation


Pop Down Menu


What not to do!

Make the navigation scheme into a puzzle for the visitor. A New navigation system on each page Lots of variation in appearance Lots of variation in function

Its not nice to disorient the user…. Be conservative, be communicative, and be

consistent.


Browse and Learn

At sites you visit for the first time: How long did it take to figure out how to navigate? As you traverse the site…can you tell where you are? Is is clear how to get back to where you began? Can you see the overall structure of the site? Does the navigation change within the site? Is the navigation used to unify the site?


The Learning Part

How is the information categorized? How is each category visually displayed so each

separate category is clear to the user? What does color tell the user? How is color used to organize information? How does the designer tell the user where they are

at every moment? Use your hard won insights in your own

designs…..


Some Insights Interior page navigation needs to make room for

content and cannot dominate the page as it can on an entry page.

The variation of navigation positioning can add visual interest to a site (as long as it doesn’t also add confusion).

The nature of a site’s content and its established identity may influence the design direction of the navigation scheme. Your client may also specify what visuals work best in

other media


More Insights Beveled and shaded buttons are very common

because of their press-enabled visual queues. Strong color coding of some navigation schemes

helps visitors keep track of where they are. Even if it is only at the subconscious level.

On long pages, provide a “list of contents” with links that take users to the corresponding content farther down the page.


More Research-Based Insights

Do not create pages with no navigation options Pages that disable the browsers back button is a no-no.

Use descriptive labels on all navigation items. Use Site maps on web sites that have many pages. Navigation only pages should be short and totally

fit in the browser window.


Where the things they’re looking for are located…

When designing a navigation system, consider: What do the bulk of the visitors coming to my site want? What do I want them to be able to find easily?

Once you identify what you and your visitors want….keep these items in front of your site’s visitors as they travel around the site. If your selling something, you better keep that fact in

front of your potential customers or you are in trouble.


How to get to those things the user seeks…..

Intelligent navigation design! Links look clickable Labels are clear that set expectations of what

lies beneath Labels are grouped with similar options so that

they gain additional meaning through association and context.


Set Expectations and Provide Feedback

Another underlying principle of IA is to set expectations for every action and clearly present results of those actions. Disappointed users will not stay for the

duration…. Inform your user when things happen or are

in progress. “Has my computer died? Lost the connection?

Is there server down?” IA


Ergonomic Design What does digital space have to do with real

bodies?? On the web, the body parts engaged are hands,

eyes, and ears. Hands are concerned with scrolling distance and

scrolling frequency….use shortcuts to assist with lots of scrolling.

Some innovative designers have observed that Right side navigation provides easier access to the scrollbar for faster navigation and made it easier to concentrate on the content.


Scrolling and Paging A decision should be made early whether to create long pages that

require scrolling, or shorter pages that will require users to move frequently from page to page. What do the primary users desire? Older users scroll more slowly than their younger counterparts and

therefore scrolling has a tendency to slow older folks down in their hunt for information. Reading for comprehension tasks benefit from scrolling vs. remembering where

information is located…use paging. If you cannot make up your mind…use shorter pages with links to long

scrolling pages. Trends: Vertical scroll for long articles meant to be read….Paging for content that is

able to be put into chunks….


Horizontal Scrolling

“Use an appropriate page layout to eliminate the need for users to scroll horizontally.” Comment: “Horizontal scrolling is a slow and tedious

way to view an entire screen. Common page layouts including fluid and left-justified may require some users to scroll horizontally if their monitor resolution or size is smaller than that used by designers.”


Eyes and IA

When designing for the eyes, consider blindness, color blindness, nearsightedness, and farsightedness. Tired older eyes don’t respond well to small

fonts, no matter how elegant. While browsers allow users to resize the font to

a comfortable size, many don’t know how to do this, and code writes can disable it…


Ears and IA

Remember not only deafness, but also people who may be listening in public spaces. Sounds from other’s cubes as you try to concentrate on

that report you’re late with.

Remember in MM class we said that every Multimedia item must serve a purpose for site communication……


IA Principle - Be Consistent

Consider standards of expectations… Your site is probably not the first web site your

visitor has visited… User of the Internet have some expectations as to

what your web site will give them…. Jobs available are usually located at the bottom of the web

site.

Visit your competitors and look for best practices patterns that you can adopt.

Repeat visitors also have expectations…..


Consistency cont.

Consistent labeling and design gives an air of professionalism.

As you design, keep track of conventions that have arisen over the history of the site, break these conventions with caution. Keeping a running style guide of your design

decisions can help you be consistent.


Strong Color-Coding is one way to be Consistent!


IA and Labels

Labels are one of the ways that you can hint at your sites potential to contain the information the user seeks. Just like an iceberg, the label is the tip and over

70% of the ice is underwater. The label should suggest this fact.

Users are searching and the label should give them confidence that they found the right place.


Naming a Label A label is created through several forces: the most

common influences in order…. The companies brand(3) Common conventions in the domain How much space there is on the navigation widget(1) What the user will understand How bored the writer/designer is with current labels(2)

They should be decided upon like this: What the user will understand Common conventions in the domain The companies brand

“A good label is so obvious it’s dull as dirt.”


IA Principle - Rely on Recognition rather than on Recall Computers can remember long strings of characters,

while humans are not as good. Don’t ask humans to do what the computer does better….

Tracking numbers for packages….copy/paste.

Recognition also means that you should constantly be seeking ways to keep information before the visitor’s eyes. Anytime that you can take the burden off the poor user’s

memory and place it on the computer, you are making your site just a bit more valuable to your customers.


Representing Navigation

Doesn’t always have to be represented by “buttony” type objects…use Images and Image maps Flash Text Straight text links… Styled Lists……..>


Image Links


Simplicity Can Be Very Effective

Simple, yet elegant can make a pleasing and unobtrusive navigation design.


Sub-Category Navigation

A big design decision is how much navigation should be visible on the main page, as well as on interior pages. The most common strategy for large sites is to only

show broad categories on the main introduction page with more detail on subsequent pages that apply to a section of the content.

“The trick to having only a few categories is that each category must be clear enough so first time visitors can find what they want easily.” RW.


Previous links…

Going back to the previous page - no matter where the user came from is going to require the page to interact with the previous list that is stored in the browser.. <a href = “javascript:history.go(-1);”> Previous

page…</a> This script acts like the browser’s own back

button.


Where am I at? On the navigation bar, leave a clue as to

where the user is located…..

Other techniques include:

Highlighting the menu item in the navigation section

Make the menu item link to the current page inactive


Where to Locate Navigation

While navigation may be located anywhere, it is a good idea to insure that it is located within the confines of the standard browser window.

It should be easily accessible and not emphasized to much. The most common is the left side….while you could

argue that this is unimaginative, the less the visitor has to figure out simple things like navigation, the more pleasant their experience is at your site.


Going Home

Any navigation design should include a home button… A popular technique is to use a logo on every

page as the home page link……use a rollover on the logo to emphasize this point.


IA Principle - Provide for People of Varying Skill Levels

Users are people in motion over time, changing and learning all the time. Site design should assist users to a competency

level that is satisfactory for them…..not necessarily an expert, but competent enough so that they can operate the site with confidence and have a pleasant experience.


IA Principle - Provide Meaningful and Contextual Help

and Documentation This is an area that is poorly offered around the world.

If you site is even vaguely complex, users will inevitably require help - and resist asking for it for all the usual reasons - being put on hold, being indirectly told that they are stupid,…..

As a designer, you can offer the right help at the right moment in the most unobtrusive way possible. Place information in clearly labeled locations, rather than grouping all

under the generic and menacing “Help” section. Consider using the popup…alt text…


Main Navigation Points

Navigation design should reflect a site’s organizational structure and act as a hint to the site’s main content. Navigation should enable the user to move easily from

any section of the site to any other section.

The graphic appearance of the navigation should add to the site’s visual appeal and enhance the identity and personality of the site.


Navigation System Resourceshttp://www.opencube.com/


Buttons

Buttons are popular and today are easy to make….it is imperative however, that you not get carried away with buttons that result in bad button judgment. Most buttons are used to access information and as

such, most users don’t particularly care about your taste in button design…..so don’t overdo it! Or let the buttons become too emphasized.

Be consistent with the appearance of buttons as these help reinforce site identity.


More Button Advice If you use graphic based buttons, insure the edges are

anti-aliased with the background or you may see artifacts that make the interface between the background and the foreground look unprofessional.


Type on Buttons

Buttons are often small so you can fit in all the navigation options necessary… Making small buttons is not a problem…its the

button label that can be a problem…can you make it small enough to fit on the button and still be readable?

While most text is anti-aliased…this can often make the text on small buttons harder to read.


Button Creativity

Users are pretty well conditioned to click on any lineup of small objects…..


Using Graphic Buttons

Examples from the WebDesign Workshop…RobinWilliams et al


Retro Rubber looking Buttons


Site Index and Searches

“A site index page adds to the ease of navigation and presents a site’s content within a familiar and friendly context - an outline.” RW

Search facilities - such as a text field to do searching for keywords are especially valuable on large sites with lots of information or products to offer. Simple sites that don’t interact with a database can use

free or low cost search solutions www.atomz.com; www.freefind.com; SearchTools.com; ……

http://www.atomz.com/

http://www.freefind.com/


Navigation Wrap The Navigation scheme is a big part of a sites’

perceived user friendliness… The Navigation Style of presentation influences the

whole atmosphere of the web site.. It should be consistent on every web page It should be obvious on every web page The user should be able to locate navigation facilities

easily…. The contents of the navigation give the user guidance as to

the structure of the site both in physical arrangements and in content included.


From Research-Based Web Design & Usability Guidelines

7.1: Provide Feedback on the User’s location…Relative Importance /Strength of evidence: 5/2

7.2: Use a Clickable ‘List of Contents’ on long pages….4/3 7.3: Do not Create Pages with No Navigation Options…4/2 7.4: Differentiate and Group Navigation Elements…4/4 7.5: Use Descriptive Tab Labels….4/3 7.6: Present Tabs Effectively…3/3 7.7: Use Site Maps…3/4 7.8: Use appropriate Menu Types…3/4 7.9: Keep Navigation-only Pages Short….2/4 7.10: Use “’Glosses’ to assist Navigation…1/2…’Glosses’ are short

phrases of information that pop-up when a user places his or her mouse pointer close to a link. These provide preview information as to what the link leads to….these should not substitute for poorly labeled links…..


Information Architecture Wrap What we looked at is only a small part of what this

growing field involves. Other Techniques associated with IA and web design:

Sitepath Diagramming - determining site flow, early interaction design, and workflow design…

Advantages - getting your head around a complicated problem. Trying to see if you’ve forgotten any aspect of the problem. Seeing where there are similar process you can design and reuse.

Disadvantages - Can get messy and become incomprehensible. Topic Mapping - this is good for content architecture design

Advantages - helps you move beyond the content you already have and to think about what might need to exist on a site.

Disadvantages - easy to forget an item. Storyboards, Site Maps, Content Inventory,…..

sep 2007pvt ebus325 ctu1 information architecture, the user interface, and site navigation effective...

Documents

web sitespvt ebus325

information architects

googlepvt ebus325 ctusep

information organizers

web pages

epoch of web designthe

web page designnow

emotional design