4 interface design
DESCRIPTION
TRANSCRIPT
© 2004 Ken Baldauf, All rights reserved.
Interface Design
CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida State University
From Web Style Guide, Chapter 4: Interface Design
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
Wayfinding
The elements of the built environment that allow us to navigate successfully through complex spaces like cities, towns, and the Web.
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
Paths & Breadcrumbs
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
As pages get more complex, offering many choices, you risk overwhelming the user with the “Times Square effect” of too many competing visual stimuli.
© 2010 Ken Baldauf, All rights reserved.
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
© 2004 Ken Baldauf, All rights reserved.
Interface Design
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
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?
© 2010 Ken Baldauf, All rights reserved.
© 2010 Ken Baldauf, All rights reserved.
AVOID
PAGES
© 2010 Ken Baldauf, All rights reserved.
MINIMIZESTEPS
Users prefer a few pages of carefully organized choices
over many layers of oversimplified menu pages
© 2010 Ken Baldauf, All rights reserved.
• Strong site identity• Focus on content• Visible site structure• Minimize navigation
© 2010 Ken Baldauf, All rights reserved.
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.
© 2010 Ken Baldauf, All rights reserved.
© 2010 Ken Baldauf, All rights reserved.
“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.
© 2004 Ken Baldauf, All rights reserved.
Information Design
© 2010 Ken Baldauf, All rights reserved.
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
© 2010 Ken Baldauf, All rights reserved.
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
© 2004 Ken Baldauf, All rights reserved.
Enterprise interface programs have three primary aims: coherence, symbolism, and positioning.
The Enterprise Interface
© 2010 Ken Baldauf, All rights reserved.