copyright Penny McIntire, 2010 Navigation 2 copyright Penny McIntire, 2010 Introduction Information...

copyright Penny McIntire, 2010

Navigation

2


Introduction

• Information architecture: The organization of the information within the site.

• Navigation design is a critical aspect of information architecture.

• After all, what good is well-organized information if no one can find it through the navigation schema?

3


Introduction• Navigation should:

– Provide a conceptual map of the site.– Give feedback as to current location:

“You are here.” – Remind the visitor of how he or she

got there: “You were here.”– Help the visitor find what he or she

wants: “You want to go here.”– Make the visitor aware of other

offerings on your site: “May I entice you to go here?.”

4


Introduction

• Think of navigation as the table of contents of a magazine, which serves to guide readers to what they know they want, plus shows them other stuff they might like.

• Navigation facilitates wayfinding, the process we all use to find what we want, whether on a web page or in the Mall of America.

5


Introduction

• Jakob Nielsen calls the process “following the scent.”

• Principles of Navigation…

6


Principle 1. Create Simple, Visible,

Consistent Navigation

• Make it clear where visitors should click to move on – don’t force them to move the cursor all over the screen to find an unidentified hot spot: “mystery meat” navigation.

7




• Don’t unnecessarily vary the look, feel, terminology, or placement of navigation from page to page or button to button.– For instance, the size and color of

buttons and/or text links should be consistent.

– Use different colored buttons only if meaning is attached to the color.

– Use the same size font on all buttons in the group – don’t use smaller font for longer labels. Instead, use the smaller font for all labels.

8




• Don’t remove the current link from the menu – doing so results in the menu changing from page to page, and visitors lose their places.– Instead, disable the link to the current

page by removing the <a> tag and using some visual change.• Old school – gray out the link.• New school – emphasize it.

9




• Consistent navigation and an easy to understand navigation hierarchy helps visitors make a mental map of the site.

• That’s why we often use the “Back” button instead of clicking on links; we are tracing up the hierarchy in our mind, too, so that we don’t get lost.

10




• Use consistent terminology: “participant information” versus “member information.”

• Remember, a link is a promise, and we shouldn’t make misleading promises.

11


Principle 2. Take Advantage of What Visitors Already Know.

• On roads in the US, all stop signs are red octagons. What if Illinois decided to use blue rectangles?

• Visitors will have a better shot at understanding our navigation if it has at least some characteristics of navigation they’ve seen before.

12


Principle 2. Take Advantage of What Visitors Already Know.

• For example, visitors recognize:– Common menu styles

• Links listed vertically down the left side or horizontally across the top.

– Common navigation affordances (indicators) like underlined text or “buttonness” – e.g. a rounded rectangle with 3-D shading and a label.

13


Principle 3. Orient Visitors with “You are Here” Markers

• Make it clear where the visitor is in the site at all times– site banner, page header, page title, disabled current link in the menu, etc.

• A search engine might drop the visitor into the middle of site, not the home page.

14


Principle 3. Orient Visitors with “You are Here” Markers

• Breadcrumbs: a “hot linked” trail that shows where the visitor is in the hierarchy and provides a way to traverse back up the hierarchy.– Products > Computer Accessories >

Data Storage > Thumb Drives– Particularly useful on large, complex

sites.

15


Principle 4. Minimize Visitor Effort

• “The click annoyance factor” – estimated to be three or so clicks.– That means that visitors need to be

able to get where they are going in three clicks or less, or at least be reassured that they are close to goal.

– “More than one-third of online shoppers who have trouble finding a product just give up altogether.” Zona Research

16



– Bad example: on Lands End site, to buy a set of matching sheets, I had to go through the following navigation (12 page loads plus “back” clicks):• Bedding > Choose top sheets > Choose

full size > Choose color • Back, back• Bedding > Choose bottom sheets >

Choose full size > Choose color• Back, back• Bedding > Choose pillowcases > Choose

full size > Choose color

17



–Better: – Bedding > Choose color > Choose size

> Quantity selection page:

Set including top sheet, bottom sheet, and pillowcase(s)

Top sheets

Bottom sheets

Pillow cases

18



• For each extra click visitors must perform, the chance of potential visitors leaving a site increases by 50%.– Even at best, looker-to-buyer

conversion rates average around 2%.• Don’t make people load extra

pages (with the resulting wait) unnecessarily.

19



• However, visitors are often willing to click multiple times if each click is unambiguous and it’s clear that progress is being made, or,

• The information has high salience (importance) to the user.

20



• If you force visitors to log-in, or fill in any information first, you might just lose them.

• Don’t force the visitor to download 15 different plug-ins to use the site.– Less common than in the past,

because many plugins like Flash are built into the browsers.

21


Principle 5. Provide Multiple Ways

to Access Information

• Give users multiple ways to find things, based on how they think…– Amazon: by title, by author, by

subject/category… similar to a library card catalog.

22


Principle 5. Provide Multiple Ways

to Access Information

• Also, consider providing a search function.

• For larger sites, provide a “hot” (linked) site map.– Best in outline/text format, for ease of

maintenance. – Graphic maps a pain to maintain! – If divisions of your site are somehow

color-coded, do the same for the site map.

23


Principle 6. Provide for Visitors with Varied Skill Levels.

• Remember that not everyone visiting your site is necessarily experienced on the web.

• Make sure your navigation is crystal clear to everyone.

24


Principle 7. Provide Feedback.

• If the visitor request will take a long time (like a file download or a long search), provide feedback that something is indeed happening.

25


Principle 7. Provide Feedback.

– Show a bouncing ball or a progress bar or some other animation that proves that the browser isn’t locked up.

– A long wait in which something, anything, appears to be happening is perceived as shorter.

26


Principle 8. Make Sure the Site is

Flexible and Expandable.

• Let’s say you need five main links on the home page, so you create a Flash animation that rotates, with five balls, each a link.

• What if next month you need to add a sixth link? A difficult task.

• Contrast with how easy it would be to add a sixth link on a text menu.

27


Navigation Required on Every Page

• Remember, your visitor might be dropped into the middle of your site from a search engine, called deep linking. So…

• Site identification (logo, title line in browser, organization name).

• Page identification (students often forget a page title)– what page in the site is the visitor currently viewing?

28



• Contact information or a link to a contact page. – Include phone numbers, not just

email addresses.• An explicit home page link in

addition to linking the banner.

29



• Links to the main pages, termed persistent global navigation (PGN). – You must have a very good reason if

you choose to omit PGN. Example: displaying a larger version of an image in a small window with no chrome (the browser menus and bars).

30



• As appropriate:– Local navigation (also called cross-

over or sub-navigation) for subsections under the current page or even the page’s bookmarks.

– A search function for larger sites.– Site-wide utilities, such as “Store

Locator” or “Checkout.” – Footer, especially fat footers, as on

http://www.w3.org .

http://www.w3.org/

31


Organizing the Navigational Structure

• Navigation models:– Hierarchic: following links up and

down the hierarchy – the most pervasive, and the one human beings understand intuitively.• Whenever possible, we naturally organize

into hierarchies :– Taxonomies of plants and animals.– Genealogy charts.– Organizational charts.– Tables of contents of books and magazines.– And so on…

32



– Sequental: some sites (or sections of sites) are organized to be read one page after another. Examples: • A long article spaced over several pages,

with page numbers and “previous” and “next” links.

• Google’s search results pages.

33



– Random access: picking individual, unrelated topics randomly from a menu.• Chaos, not organization. • Acceptable only as a form of

entertainment, such as in gaming sites when figuring out the navigation is a part of the game.

34


Link Functions

• Internal links: links that stay within our own site. – “load this next page” links– Internal bookmarks that move to a

different spot in the same page. – Action links, like “go,” “search,”,

“print,” “submit.”

35


Link Functions• External links: links that leave our

site. – Can allow us to leverage content

produced by others. – But careful – we don’t really want

visitors to leave our site, do we?– One option: open in a new window

(target="blank") so that our original window is patiently waiting in the background.• Downside: violates accessibility

guidelines and clutters the visitor’s screen.

36


Link Functions– Alternative: open in a new, named

window (target="myWindowName") and continue to reuse that window for external links throughout the site. • Upside: our original page is still waiting,

and we’re not cluttering the visitor’s screen quite so much.

• Downsides: – Still violating accessibility guidelines.– The window doesn’t always come to the front

– it may be buried behind other open windows.

37


Link Functions– Get permission to use external links.

• As amazing as this seems, some organizations don’t want you linking to them, e.g. Ticketmaster.

38


Link Functions• Download links, to download files

like doc’s, pdf’s or mp3’s, all of which can be large files. – It’s helpful to display the file size next

to the link, as a “Just how patient are you?” warning.

• Auto-email links, to pull up a blank email addressed to the “linkee.” – The link can have a text description,

but it’s also useful to display the email address.

39


Link Functions

• Note links, the web equivalent of a footnote – peripheral information that would disrupt the flow of the main content if included there. – Usually a smaller window with

browser controls disabled; the only action allowed is dismissing the window.

– Examples: a window to show a larger version of a thumbnail, or a small window to show a definition of a term in the text.

40


Link Labels• Be concise, precise, and

descriptive, ideally using a single word.

• Don’t ever say “Click here.” – Instead, link with a descriptive phrase

so that visitors can tell where they are going even if they don’t read the rest of the sentence.

– Bad: Click here to go to Penny’s Page for further information.

– Good: Check out Penny’s Page for further information.

41


Link Labels• Careful with clever…• Example: a restaurant’s site

– “The Dining Room,” “Soup’s On,” “From Your Place to Ours,” “Your Usual Table,” “Moveable Feasts”

Versus– “Home,” “Menu,” “Directions,”

“Reservations,” “Catering.”• Moral: Metaphors can be cute, but

also dangerous.

42


Link States

• Link state possibilities:– Available, at rest: the default when

the page is first loaded, no mouseover.

– Available, mouseover/rollover/hover: when the mouse is positioned over it. • Use CSS to get text rollover effects.• Use JavaScript to get graphic rollover

effects (Dreamweaver can do this for you).

43


Link States

• Active: a link that was just clicked, showing briefly before the new page loads and briefly upon return. – Gives feedback that the click was

recognized, even if the destination page takes a while to load.

– Red is the default color.

44


Link States

• Visited: recently visited. – Important only when there’s a list of

links that would be explored systematically and visited only once, as in a search engine results page.

– Purple is the default color.– Downside: extra visual clutter.– Use subtle styling to avoid visual

clutter.

45


Link States– Disable the visited styling for links

that are likely to be used repeatedly, such as main navigation. • How? Style the visited links just like

available/at rest links. • If you don’t style them, they will show as

the default purple.

46


Link States

• Current: the link that would simply reload the current page.– Important: disable it by removing the

<a> tag, so it’s not really a link at all, but…

– Keep it in the menu structure as a “you are here” indicator.

– If using drop-down menus or server-side includes for the menu system, cannot easily disable.

47


Link States

• You don’t need to use all link state indicators, but be consistent in those you do use.

48


Interactive Navigation

• These days, visitors expect to see interactive navigation:– Text link rollovers/mouseovers

(exceedingly easy to do with CSS). – Graphic rollovers/mouseovers to

show, for instance, depressed buttons on rollover (alternating images).

– Interactive menu systems on rollover/mouseover (done using show/hide on a <div>)

49


Navigational Tools

• Navigational tools– Navigational text– Navigational graphics

50


Navigational Text

• Text links are a good thing:– Individual text links are much easier

to update than graphic links.• Changing the color of 50 graphic links,

complete with rollovers, would require changing and exporting 100 images, FTPing them out to the site, and testing all 50 links.

• Changing the color of 50 text links, complete with rollovers, would require changing one line of code in a CSS file.

51


Navigational Text– Non-graphic menus are also easier to

update – no repositioning needed when a new link is added or an old link is deleted.

– Text links present a compact, clean, and simple visual effect.

– Text links don’t increase download times the way graphic links do.

– Rollover effects are easily implemented site-wide with CSS.

52


Navigational Text

• Later, we will look at how you can use CSS to change the styling, which can isolate active, visited, and hover (rollover).

• For now, we’ll just look at the principles of text link design.

53


Navigational Text: Affordances

• Text link affordances (indicators of link-ness), all using CSS.– Text style change, like boldface,

italics, font size, text color, or typeface.

– Background color change.– Style change on rollover. – Underline...

54



• Link underline versus no underline– Always underline?– Underline at rest, no underline on

mouseover?– No underline at rest, underline on

mouseover? (less visual clutter)– No underlines at all? If so, what other

affordances will be recognized?

55



• Link color– Standard colors versus colors that

match the page?– Can use CSS to change the color of

either the text or the text background on rollover.

– Do make sure that all link states are styled to match your color scheme. • Don’t allow visited and active links to

default to purple and red unless your color scheme includes purple and red.

56



• Regardless of the affordances you use, avoid using them on non-link text. – E.g., if purple links, avoid using purple

on headers. • Careful with an affordance that

changes the size of the text – the page may bobble.

57


Navigational Text: as Graphic Navigation Backup

• Even if you are using graphic links, provide text links, too.

• The text shows up before the graphics finish downloading, which allows visitors to click on the text link and be on their way faster without waiting for graphics.

• Often backup text links are at the bottom of the page.

58


Navigational Text: as Graphic Navigation Backup

• Provides a backup if the visitor clicks the Stop button before a button or image map fully loads.

59


Navigational Text: Styled Like Buttons

• Mimic graphic buttons by using table cell background colors/images and or table borders. – Use CSS to style text links to look like

buttons, using background-color, border (inset, outset), etc. CSS3 offers rounded corners, too.

60


Navigational Graphics

• Navigational graphics include buttons, image maps, and icons.

61


Navigational Graphics: Affordances

• Navigational graphic affordances (indicators of link-ness): – Symmetrical shape (rounded

rectangle, oval, rectangle, circle). – Text label on the image.– 3-D bevel.– Drop shadow.– Rollover effect.

63



– Some affordances represent real-world buttons, levers, etc.

– Other affordances:• Real-world pictures/icons, like a printer on

a print button.• Autonomy of the symbol (like a “go”

button) or presence in a menu structure.

64



• Use consistent affordances, and don’t use those affordances on non-navigational graphics.– Avoid using regular graphics that look

like buttons but aren’t.– Specifically, symmetrical shapes

(circles, rectangles, ovals) with 3-D bevels and/or drop shadows.

65



• If not using standard affordances, you must be particularly clear what is and what is not a link.

• And it must add so much “wow” factor that it’s worth it to the user to have a steeper learning curve.

• (An aside – ditto on moving the menus somewhere non-standard).

66


Navigational Graphics: Clarity

• Use concise wording (just like text links), or buttons will be too big and clunky.

• Use alt and title attributes to clarify where the button will lead.– Required for accessibility reasons,

too.• In all cases, make sure visitors are

clear as to where they are going when they click on a button or image map.

67


Navigational Graphics: Rollover Effects

• On image links, rollover effects are expected these days: glow, depressed button, change of color, etc.– Accomplished by using JavaScript to

alternate two images (one for the graphic at rest, one for the graphic on rollover).

– Dreamweaver can write the JavaScript for you; see my tutorial (on my web page) for creating a rollover/mouseover button.

– You’ll code yourself later in the course.

68



– Important: on rollover, only the effects you have chosen should change:• The text shouldn’t move on the button

even a single pixel if the rollover effect is just to change the button color.

• Nor should the button itself move, unless it’s a deliberate movement.

69



– Similarly, both the swapped and the swappee images should be the same size, with height and width on the <img> tag. • Otherwise, the page will bobble, as in

js07.html– Could use an animated GIF, Flash

animation, or brief audio on rollover – far less irritating than persistent animation or continuous audio.

70



• Remote rollover/mouseover: rolling over a link (text or graphic) changes the display of an image elsewhere. – js08.html– How to write the JavaScript later in

course.– Shortcut:

• Insert a rollover on the image itself, using Dreamweaver.

• Pick up the image and move it elsewhere on the page.

• Replace the image with a text link.

71


Navigational Graphics: Alternatives

• Lots of buttons, each with different text label, are a maintenance nightmare.– 50 at rest buttons plus 50 rollover

effects = 100 images to update and to FTP just to change the button color.

72



– Alternatives to lots of image buttons:• As mentioned earlier, use CSS to style

text links to look like buttons, using background-color, border (inset, outset), etc.

73



• For large menus especially, use text links with a single “tag-along” graphic for all links, like an arrow on the left that does something on mouseover.

Original image is a transparent

gif.

74



• See my website www.pennymcintire.com – only two rollover “buttons” in the whole site, which means only four images.

• To implement a link with a tagalong graphic, insert a graphic rollover, then put the text within the <a>…</>, too.

http://www.pennymcintire.com/

75


Navigational Graphics: When to Use

• But if you do use buttons,– Use for common, generic actions (Go,

Search, Submit, Clear, Back, Reset) rather than just to load another page.

– Minimal text, or the navigation takes up too much space on the page, and looks clunky.

76


Navigational Graphics: Icons

• Icons: small, stylized pictures or symbols designed to occupy minimal screen real estate.– Even common symbols, like 6

(Wingdings2) or 1 (Wingdings) can be misunderstood.

– The remedy? Text accompaniment, which defeats the purpose of the icon.

– At the very least, use title and alt attributes.

77


Navigational Graphics: Icons– Symbol fonts (like Wingdings,

Shapes1, Arrows1, etc.) are a good place to find ready-made icons.• See keyboard equivalent chart on my

book’s website for icon ideas http://www.cs.niu.edu/~mcintire/webbook/wingdingChart.rtf

• A row that looks generic (i.e., no real symbols) means you don’t have that font on your computer.

• Can easily select a row and change the font, for any font that’s not listed but that you have on your computer.

http://www.cs.niu.edu/~mcintire/webbook/wingdingChart.rtf

http://www.cs.niu.edu/~mcintire/webbook/wingdingChart.rtf

78


Navigational Graphics: Image Maps

• Image Maps– Both Fireworks and Dreamweaver can

help you to create by drawing on the screen.

– The HTML is more complicated than independent images, so avoid image maps if there is any easier way to get the same effect.

79


Navigational Graphics: Sliced Images

• Sliced images with hotspots (links)– Slicing an image up into pieces,

reassembling it seamlessly in the browser (usually in table cells with no cellpadding or cellspacing), and then making some of the pieces into links.

80



Make as a link, with some graphic effect

like glow.

81



– In image editors like Photoshop and Fireworks, you can draw the slicing lines, then export to HTML – the editor writes all the table code and inserts the pieces where they belong.

– Then you add the <a> tag code around the piece you want to use as a link or rollover.

82


Navigation Organization Tools

• Menus• Internal search• Embedded text links• Teasers• Breadcrumbs• Site maps, tables of contents, site

indexes, and directories• Frames• Favicons

83


Menus

• Double purpose:– Navigation.– Illumination of the structure of the

site.

84


Menus: Item Groupings

• Menu item groupings– What’s wrong with this?

85


Menus: Item Groupings– What’s right with these?

86


Menus: Item Groupings

• Menu items within a single menu should be mutually exclusive.– In this case, “user type” should be

separated from “product type.”– The menu purposes are so clear we

don’t even need titles on the menus to know how they’re organized.

– Do be careful with splitting into multiple menus – the different purposes must be clear.

87


Menus: Location

• Menu location:– Inverted “L” – prime real estate

Main nav at top, local/sub

navigation on left.

Main nav at left, “utility” nav across

top.

88


Menus: Location

• Menu location:– Horizontal navigation across top

Main nav across top, local/sub just

below.

Main nav across top, dropdowns for

local/sub nav.

89


Menus: Appearance

• Menu appearance:– Menus that are on all pages should be

structurally identical:• Same links• Same order• Same position: should not move/“bobble”

even a single pixel from page to page (common student error).

90


Menus: Appearance– Indicate menus by:

• Position (expected placement).• Containing within a border and/or block of

background color. • Placing in a vertically aligned, bulleted

list…

Bad Good

91


Menus: Size

• Menu size: menus can be narrow but deep, with only a few choices at each level,

or broad but shallow, with lots of choices at each level.

92


Menus: Size

• “Narrow but deep” follows the traditional “Rule of Seven” – most humans can easily grasp only seven ideas or items at a time.

• Unfortunately, on the web, that means more clicks and more page loads, with the resulting wait, so “broad but shallow” is usually preferred.

93


Menus: Size

• Minimize “broad but shallow” confusion by chunking the elements into categories, using the inherent human propensity of intuitively grasping hierarchies.

94


Menus: Expandable Menus

• For large sites, consider using expandable menus for links.

• Two types:– Jump menus using <select> boxes.– Dynamic menus.

95


Menus: Jump Menus• Jump menu using

HTML <select>.– Uses JavaScript to

open an new window based upon the chosen option.

– In Dreamweaver, choose Insert > Form > Jump Menu, then use “+” to add each new menu item.

– Downside: Can’t easily disable current link.

96


Menus: Dropdown Menus

• Pop-up/dropdown/flyout menus show a small <div> window over the top of the existing page.

97



98



• Implemented by show/hide on <div>s.

• Downside: Can’t easily disable current link.

• Dreamweaver can write for you: search Dreamweaver Help for “Spry Menu.”

• Code available on sites like www.javascriptsource.com or using JQuery, but don’t try to debug if problems – just get a new script.

http://www.javascriptsource.com/

99


Menus: Cascading Menus• A third “dynamic” menu type (or

so it appears)…• Cascading dropdown menus insert

subcategories by appearing to push the following menu items toward the bottom; see www.cs.niu.edu. – Accomplished by a whole new menu

structure on the new page(s).– This isn’t a dynamic menu at all – it’s

static; just different on different pages.

http://www.cs.niu.edu/

100


Menus: Sequential Menus

• Sequential Menus

– Nice to indicate number of pages, too.

101


Menus: Drill-down Menu Pages

• Pages that contain nothing but links.– Best avoided, unless a portal site with

links as its only purpose (MSN, Yahoo, etc.).

– Better to give some content as well, so the visitor doesn’t feel cheated.

102


Internal Search Function

• Particularly useful for larger sites, either informational or product-driven.

• There’s an art to tailoring a search function to the site – very time consuming to do well.

• Search engine results page (SERP) – display page <title> and the relevant content. (Google is a good model.)

103


Embedded Text Links

• Links embedded in body text– Function like footnotes. – Don’t underline the entire page – use

judiciously.

104


Teasers

• Teasers: Rather than embedding links in the body text, provide a “See also…” teaser off to the side or at the bottom.

105


Breadcrumbs• Breadcrumbs: as mentioned

earlier, a trail that shows where the visitor is in the hierarchy and provides a way to traverse back up the hierarchy.– Products > Computer Accessories >

Data Storage > Thumb Drives– Particularly useful on large, complex

sites.

106


Site Maps and Directories

• Site maps, tables of contents, site indexes, and directories.– Most important for larger sites.– Should be hot linked, like Google’s…

107


Frames

• Each frame can display a different HTML file, which is, in theory, useful.

• The use of frames is controversial, as noted in the HTML lectures.

• We can pretty much use CSS to do much of what frames used to do (although not necessarily bullet-proof yet).

108


Frames

• Advantage of frames: – You have more control over what is

always on display on the page; for instance, you can make sure the page title and menu system is always visible.

– If the menu is in a separate frame, the menu is not downloaded every time a page loads.

109


Frames

• Disadvantages: – Multiple pages take longer to load.– Frames have unique security issues;

each frame can potentially have different permission levels.

– Can’t easily disable the current link.– Can bookmark only the frameset.

110


Frames– Search engines can have problems

indexing sites with frames.– Can’t print an entire page of frames.– Users don’t often know how to print a

single frame that they want to print.– The visitor can bookmark only the

frameset.

111


Frames– Can experience navigational

problems if one frame errors off.• For instance, what if the menu frame

doesn’t load?• Moral of story: Make sure each page in

each frame has at least a home page link of its own.

• Just say no: You will loose points if you use frames in this class.

112


Favicons

• Favicon: the icon that appears on some sites, next to the name in the url line of the browser. Also appears in the visitor’s favorites menu…

113


Favicons

• Usually 16x16 pixels.• May not appear in the visitor’s

favorites menu if created after bookmarking.

• See – www.irfanview.com (offers a free

favicon editor)– www.webdevelopersjournal.com/articl

es/favicon.html– www.favicon.com

http://www.irfanview.com/

http://www.webdevelopersjournal.com/articles/favicon.html

http://www.webdevelopersjournal.com/articles/favicon.html

http://www.favicon.com/

114


Favicons

• .png files will work only in some browsers.

• Can be implemented by editing a utility text on the server, or

• Cross-browser code in the head to implement a favicon (need both):<link rel="icon" href="image.ico" type="image/x-icon"><link rel="shortcut icon" href="image.ico" type="image/x-icon">

115


Favicons

116


Linkrot

• Linkrot: a terminal web design with the presenting symptom of dead links.

• Recheck your links (on the server!) after every update as well as periodically.

• Remember that if you move or rename a page on your site to a different directory, you could be causing linkrot in a visitor’s favorites menu.

117


Linkrot

• You can create your own “Page not found 404” page :

118


Linkrot

• Creative 404 page(www.sailingissues.com):

119


Linkrot

• Check with your server administrator for the name and location you should use for a custom 404 page.

• You’ll probably also have to edit a standard utility text file on the server, to point it at the page.

120


Splash Pages

• Splash page – a page that loads before (or while) the home page loads.

• Usually has some flashy Flash graphics.

• Supposed purposes (which I question):– To keep the visitor amused while the

main page loads.– To stall while the site gathers

information about the visitor: browser, available plug-ins, cookies, etc.

121


Splash Pages

• If you use a splash page, make sure the visitor knows what to do to bypass it on his or her 15th time on the page.

• A splash page is good only if– The splash page has an artistic sense

that adds to the character of the site, and

– It downloads quickly, and– It can be easily bypassed.

122


Navigation and Accessibility

• Include alt and title attribute on all navigation images, and make sure instructions are color insensitive.– Bad: “Click the red button.”– Good: “Click the ‘Go’ button.”

• Make sure that color is not the only navigation affordance.

123



• Include a text symbol like “|” or “*” between adjacent text links, so that screen readers can tell when one ends and another one begins.

• Provide an invisible “skip navigation” link just prior to the navigation menu: a transparent 1x1px gif, with the alt text “skip navigation”. Link to a bookmark at the beginning of the content.

124



• If implementing a Flash-based site:– Flash is not particularly accessibility

friendly – check the latest version, because each version has made improvements.

– If still problematic, you should implement an alternative version of the site in HTML.

125


Site Navigation Summary

• Bottom line: visitors want their on-line experience to be easy, predictable, and fast.

• To tune your appreciation of good versus bad interface design in general (not specifically computer interfaces), check out www.baddesigns.com

copyright Penny McIntire, 2010 Navigation 2 copyright Penny McIntire, 2010 Introduction Information...

Documents

Transcript of copyright Penny McIntire, 2010 Navigation 2 copyright Penny McIntire, 2010 Introduction Information...