4 interface design

© 2004 Ken Baldauf, All rights reserved.

Interface Design

CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida State University

From Web Style Guide, Chapter 4: Interface Design


Users of web documents don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design.


Wayfinding

The elements of the built environment that allow us to navigate successfully through complex spaces like cities, towns, and the Web.


1. Orientation: Where am I right now?

2. Route decisions: Can I find the way to where I want to go?

3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?

4. Closure: Can I recognize that I have arrived in the right place?

Wayfinding


On the Web there is no sense of scale or compass directions.

Wayfinding

Print designers and editors often chafe at the heavy interface framing of web pages—do we really need such a burden of headers and footers and buttons and links? Well, yes, we do. Without that navigation interface, and all the “you are here” markers it provides, we’d all be back to that lost-in-space feeling that was so common in the early days of the web.


Paths & Breadcrumbs


In large sites users should be able to readily see when they have passed important regional boundaries. If all the pages look identical, it’s hard to tell where you are within a large site.


As pages get more complex, offering many choices, you risk overwhelming the user with the “Times Square effect” of too many competing visual stimuli.


Pathfinding Summary

Paths: Create consistent, well-marked navigation paths

Regions: Create a unique but related identity for each site region

Nodes: Don’t confuse the user with too many choices on home and major menu pages

Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented


Interface Design


User interface research shows that about half of web users prefer to browse through menu lists of links to find information, and the other half will go straight to the search box to enter keywords for search.

Supporting both navigation paradigms is important to user interface design.


Multiple and complementary “you are here” markers help users stay oriented in complex sites. These landmark and wayfinding elements are especially important to users who navigate by searching - who may never even see your home page.


For sites larger than a few pages, provide search on every page.Be sure to define the scope of the search, ie. the site, the department, the entire organization, the entire Web?


AVOID

PAGES


MINIMIZESTEPS

Users prefer a few pages of carefully organized choices

over many layers of oversimplified menu pages


• Strong site identity• Focus on content• Visible site structure• Minimize navigation


Considerations

Functional stability has two components: getting things right the first time as you design the site, and then keeping things functioning smoothly over time.

Provide direct links to the Web master. Pages should load in less than 10 seconds.


“Folder tabs” are ideal when your site has relatively few (five to seven) major navigation categories.

Semantically, header navigation lists should always be marked up as html lists, even if what appears on the page looks more like a collection of folder tab graphics.


Information Design


Every webpage needs…

An informative title (which also becomes the text of any bookmark to the page)

The creator’s identity (author or institution) A creation or revision date A copyright statement, Creative Commons

statement, or other statement of ownership to protect your intellectual property rights

At least one link to a local home page or menu page, in a consistent location on all pages

The home page url


also…

An organization logo or name near the upper left corner, with a link back to your home page

Navigation links to other major sections of your site At least one heading to identify and clarify the page

content Mailing address and contact information or a link to

this information Alternate (“alt”) text identifying any graphics on the

page


Enterprise interface programs have three primary aims: coherence, symbolism, and positioning.

The Enterprise Interface

4 interface design

Documents

user interface design

site navigation

navigation interface

web designers

entire web

science of interface

half of web users

web pagesdo