Interface Design CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From  Web Style Guide,...
Users of web documents don’t just look at information, they interact with it in novel ways that have no precedents in pape...
Wayfinding The elements of the built environment that allow us to navigate successfully through complex spaces like cities...
<ul><li>Orientation: Where am I right now? </li></ul><ul><li>Route decisions: Can I find the way to where I want to go? </...
<ul><li>On the Web there is no sense of scale or compass directions.  </li></ul>Wayfinding Print designers and editors oft...
Paths & Breadcrumbs
In large sites users should be able to readily see when they have passed important regional boundaries. If all the pages l...
As pages get more complex, offering many choices, you risk overwhelming the user with the “Times Square effect” of too man...
Pathfinding Summary <ul><li>Paths: Create consistent, well-marked navigation paths </li></ul><ul><li>Regions: Create a uni...
Interface Design
User interface research shows that about half of web users prefer to browse through menu lists of links to find informatio...
Multiple and complementary “you are here” markers help users stay oriented in complex sites. These landmark and wayfinding...
For sites larger than a few pages, provide search on every page. Be sure to define the scope of the search, ie. the site, ...
 
AVOID PAGES
MINIMIZE STEPS  Users prefer a few pages of carefully organized choices over many layers of oversimplified menu pages
<ul><li>Strong site identity </li></ul><ul><li>Focus on content </li></ul><ul><li>Visible site structure </li></ul><ul><li...
Considerations <ul><ul><ul><li>Functional stability has two components: getting things right the first time as you design ...
 
“ Folder tabs” are ideal when your site has relatively few (five to seven) major navigation categories. Semantically, head...
Information Design
Every webpage needs… <ul><li>An informative title (which also becomes the text of any bookmark to the page) </li></ul><ul>...
also… <ul><li>An organization logo or name near the upper left corner, with a link back to your home page </li></ul><ul><l...
Enterprise interface programs have three primary aims: coherence, symbolism, and positioning. The Enterprise Interface
 
Upcoming SlideShare
Loading in …5
×

4 Interface Design

592 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
592
On SlideShare
0
From Embeds
0
Number of Embeds
170
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • !
  • 4 Interface Design

    1. 1. Interface Design CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 4: Interface Design
    2. 2. 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.
    3. 3. Wayfinding The elements of the built environment that allow us to navigate successfully through complex spaces like cities, towns, and the Web.
    4. 4. <ul><li>Orientation: Where am I right now? </li></ul><ul><li>Route decisions: Can I find the way to where I want to go? </li></ul><ul><li>Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next? </li></ul><ul><li>Closure: Can I recognize that I have arrived in the right place? </li></ul>Wayfinding
    5. 5. <ul><li>On the Web there is no sense of scale or compass directions. </li></ul>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.
    6. 6. Paths & Breadcrumbs
    7. 7. 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.
    8. 8. As pages get more complex, offering many choices, you risk overwhelming the user with the “Times Square effect” of too many competing visual stimuli.
    9. 9. Pathfinding Summary <ul><li>Paths: Create consistent, well-marked navigation paths </li></ul><ul><li>Regions: Create a unique but related identity for each site region </li></ul><ul><li>Nodes: Don’t confuse the user with too many choices on home and major menu pages </li></ul><ul><li>Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented </li></ul>
    10. 10. Interface Design
    11. 11. 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.
    12. 12. 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 .
    13. 13. 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?
    14. 15. AVOID PAGES
    15. 16. MINIMIZE STEPS Users prefer a few pages of carefully organized choices over many layers of oversimplified menu pages
    16. 17. <ul><li>Strong site identity </li></ul><ul><li>Focus on content </li></ul><ul><li>Visible site structure </li></ul><ul><li>Minimize navigation </li></ul>
    17. 18. Considerations <ul><ul><ul><li>Functional stability has two components: getting things right the first time as you design the site, and then keeping things functioning smoothly over time. </li></ul></ul></ul><ul><ul><ul><li>Provide direct links to the Web master. </li></ul></ul></ul><ul><ul><ul><li>Pages should load in less than 10 seconds. </li></ul></ul></ul>
    18. 20. “ 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.
    19. 21. Information Design
    20. 22. Every webpage needs… <ul><li>An informative title (which also becomes the text of any bookmark to the page) </li></ul><ul><li>The creator’s identity (author or institution) </li></ul><ul><li>A creation or revision date </li></ul><ul><li>A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights </li></ul><ul><li>At least one link to a local home page or menu page, in a consistent location on all pages </li></ul><ul><li>The home page url </li></ul>
    21. 23. also… <ul><li>An organization logo or name near the upper left corner, with a link back to your home page </li></ul><ul><li>Navigation links to other major sections of your site </li></ul><ul><li>At least one heading to identify and clarify the page content </li></ul><ul><li>Mailing address and contact information or a link to this information </li></ul><ul><li>Alternate (“alt”) text identifying any graphics on the page </li></ul>
    22. 24. Enterprise interface programs have three primary aims: coherence, symbolism, and positioning. The Enterprise Interface

    ×