Presentation is loading. Please wait.

Presentation is loading. Please wait.

copyright Penny McIntire, 2010 Navigation 2 copyright Penny McIntire, 2010 Introduction Information architecture: The organization of the information.

Similar presentations


Presentation on theme: "copyright Penny McIntire, 2010 Navigation 2 copyright Penny McIntire, 2010 Introduction Information architecture: The organization of the information."— Presentation transcript:

1

2 copyright Penny McIntire, 2010 Navigation

3 2 copyright Penny McIntire, 2010 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?

4 3 copyright Penny McIntire, 2010 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?.”

5 4 copyright Penny McIntire, 2010 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.

6 5 copyright Penny McIntire, 2010 Introduction Jakob Nielsen calls the process “following the scent.” Principles of Navigation…

7 6 copyright Penny McIntire, 2010 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.

8 7 copyright Penny McIntire, 2010 Principle 1. Create Simple, Visible, Consistent Navigation 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.

9 8 copyright Penny McIntire, 2010 Principle 1. Create Simple, Visible, Consistent Navigation 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 tag and using some visual change. Old school – gray out the link. New school – emphasize it.

10 9 copyright Penny McIntire, 2010 Principle 1. Create Simple, Visible, Consistent Navigation 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.

11 10 copyright Penny McIntire, 2010 Principle 1. Create Simple, Visible, Consistent Navigation Use consistent terminology: “participant information” versus “member information.” Remember, a link is a promise, and we shouldn’t make misleading promises.

12 11 copyright Penny McIntire, 2010 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.

13 12 copyright Penny McIntire, 2010 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.

14 13 copyright Penny McIntire, 2010 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.

15 14 copyright Penny McIntire, 2010 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.

16 15 copyright Penny McIntire, 2010 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

17 16 copyright Penny McIntire, 2010 Principle 4. Minimize Visitor Effort –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

18 17 copyright Penny McIntire, 2010 Principle 4. Minimize Visitor Effort –Better: –Bedding > Choose color > Choose size > Quantity selection page:  Set including top sheet, bottom sheet, and pillowcase(s)  Top sheets  Bottom sheets  Pillow cases

19 18 copyright Penny McIntire, 2010 Principle 4. Minimize Visitor Effort 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.

20 19 copyright Penny McIntire, 2010 Principle 4. Minimize Visitor Effort 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.

21 20 copyright Penny McIntire, 2010 Principle 4. Minimize Visitor Effort 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.

22 21 copyright Penny McIntire, 2010 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.

23 22 copyright Penny McIntire, 2010 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.

24 23 copyright Penny McIntire, 2010 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.

25 24 copyright Penny McIntire, 2010 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.

26 25 copyright Penny McIntire, 2010 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.

27 26 copyright Penny McIntire, 2010 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.

28 27 copyright Penny McIntire, 2010 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?

29 28 copyright Penny McIntire, 2010 Navigation Required on Every Page 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.

30 29 copyright Penny McIntire, 2010 Navigation Required on Every Page 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).

31 30 copyright Penny McIntire, 2010 Navigation Required on Every Page 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

32 31 copyright Penny McIntire, 2010 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…

33 32 copyright Penny McIntire, 2010 Organizing the Navigational Structure –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.

34 33 copyright Penny McIntire, 2010 Organizing the Navigational Structure –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.

35 34 copyright Penny McIntire, 2010 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.”

36 35 copyright Penny McIntire, 2010 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.

37 36 copyright Penny McIntire, 2010 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.

38 37 copyright Penny McIntire, 2010 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.

39 38 copyright Penny McIntire, 2010 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.

40 39 copyright Penny McIntire, 2010 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.

41 40 copyright Penny McIntire, 2010 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.

42 41 copyright Penny McIntire, 2010 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.

43 42 copyright Penny McIntire, 2010 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).

44 43 copyright Penny McIntire, 2010 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.

45 44 copyright Penny McIntire, 2010 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.

46 45 copyright Penny McIntire, 2010 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.

47 46 copyright Penny McIntire, 2010 Link States Current: the link that would simply reload the current page. –Important: disable it by removing the 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.

48 47 copyright Penny McIntire, 2010 Link States You don’t need to use all link state indicators, but be consistent in those you do use.

49 48 copyright Penny McIntire, 2010 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 )

50 49 copyright Penny McIntire, 2010 Navigational Tools Navigational tools –Navigational text –Navigational graphics

51 50 copyright Penny McIntire, 2010 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.

52 51 copyright Penny McIntire, 2010 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.

53 52 copyright Penny McIntire, 2010 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.

54 53 copyright Penny McIntire, 2010 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...

55 54 copyright Penny McIntire, 2010 Navigational Text: Affordances 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?

56 55 copyright Penny McIntire, 2010 Navigational Text: Affordances 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.

57 56 copyright Penny McIntire, 2010 Navigational Text: Affordances 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.

58 57 copyright Penny McIntire, 2010 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.

59 58 copyright Penny McIntire, 2010 Navigational Text: as Graphic Navigation Backup Provides a backup if the visitor clicks the Stop button before a button or image map fully loads.

60 59 copyright Penny McIntire, 2010 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.

61 60 copyright Penny McIntire, 2010 Navigational Graphics Navigational graphics include buttons, image maps, and icons.

62 61 copyright Penny McIntire, 2010 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

64 63 copyright Penny McIntire, 2010 Navigational Graphics: Affordances –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.

65 64 copyright Penny McIntire, 2010 Navigational Graphics: Affordances 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.

66 65 copyright Penny McIntire, 2010 Navigational Graphics: Affordances 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).

67 66 copyright Penny McIntire, 2010 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.

68 67 copyright Penny McIntire, 2010 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.

69 68 copyright Penny McIntire, 2010 Navigational Graphics: Rollover Effects –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.

70 69 copyright Penny McIntire, 2010 Navigational Graphics: Rollover Effects –Similarly, both the swapped and the swappee images should be the same size, with height and width on the 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.

71 70 copyright Penny McIntire, 2010 Navigational Graphics: Rollover Effects 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.

72 71 copyright Penny McIntire, 2010 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.

73 72 copyright Penny McIntire, 2010 Navigational Graphics: Alternatives –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.

74 73 copyright Penny McIntire, 2010 Navigational Graphics: Alternatives 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.

75 74 copyright Penny McIntire, 2010 Navigational Graphics: Alternatives See my website www.pennymcintire.com – only two rollover “buttons” in the whole site, which means only four images.www.pennymcintire.com To implement a link with a tagalong graphic, insert a graphic rollover, then put the text within the …, too.

76 75 copyright Penny McIntire, 2010 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.

77 76 copyright Penny McIntire, 2010 Navigational Graphics: Icons Icons: small, stylized pictures or symbols designed to occupy minimal screen real estate. –Even common symbols, like  (Wingdings2) or  (Wingdings) can be misunderstood. –The remedy? Text accompaniment, which defeats the purpose of the icon. –At the very least, use title and alt attributes.

78 77 copyright Penny McIntire, 2010 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/win gdingChart.rtf http://www.cs.niu.edu/~mcintire/webbook/win gdingChart.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.

79 78 copyright Penny McIntire, 2010 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.

80 79 copyright Penny McIntire, 2010 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.

81 80 copyright Penny McIntire, 2010 Navigational Graphics: Sliced Images Make as a link, with some graphic effect like glow.

82 81 copyright Penny McIntire, 2010 Navigational Graphics: Sliced Images –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 tag code around the piece you want to use as a link or rollover.

83 82 copyright Penny McIntire, 2010 Navigation Organization Tools Menus Internal search Embedded text links Teasers Breadcrumbs Site maps, tables of contents, site indexes, and directories Frames Favicons

84 83 copyright Penny McIntire, 2010 Menus Double purpose: –Navigation. –Illumination of the structure of the site.

85 84 copyright Penny McIntire, 2010 Menus: Item Groupings Menu item groupings –What’s wrong with this?

86 85 copyright Penny McIntire, 2010 Menus: Item Groupings –What’s right with these?

87 86 copyright Penny McIntire, 2010 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.

88 87 copyright Penny McIntire, 2010 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.

89 88 copyright Penny McIntire, 2010 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.

90 89 copyright Penny McIntire, 2010 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).

91 90 copyright Penny McIntire, 2010 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… BadGood

92 91 copyright Penny McIntire, 2010 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.

93 92 copyright Penny McIntire, 2010 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.

94 93 copyright Penny McIntire, 2010 Menus: Size Minimize “broad but shallow” confusion by chunking the elements into categories, using the inherent human propensity of intuitively grasping hierarchies.

95 94 copyright Penny McIntire, 2010 Menus: Expandable Menus For large sites, consider using expandable menus for links. Two types: –Jump menus using boxes. –Dynamic menus.

96 95 copyright Penny McIntire, 2010 Menus: Jump Menus Jump menu using HTML. –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.

97 96 copyright Penny McIntire, 2010 Menus: Dropdown Menus Pop-up/dropdown/flyout menus show a small window over the top of the existing page.

98 97 copyright Penny McIntire, 2010 Menus: Dropdown Menus

99 98 copyright Penny McIntire, 2010 Menus: Dropdown Menus Implemented by show/hide on 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. www.javascriptsource.com

100 99 copyright Penny McIntire, 2010 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.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.

101 100 copyright Penny McIntire, 2010 Menus: Sequential Menus Sequential Menus –Nice to indicate number of pages, too.

102 101 copyright Penny McIntire, 2010 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.

103 102 copyright Penny McIntire, 2010 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 and the relevant content. (Google is a good model.)

104 103 copyright Penny McIntire, 2010 Embedded Text Links Links embedded in body text –Function like footnotes. –Don’t underline the entire page – use judiciously.

105 104 copyright Penny McIntire, 2010 Teasers Teasers: Rather than embedding links in the body text, provide a “See also…” teaser off to the side or at the bottom.

106 105 copyright Penny McIntire, 2010 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.

107 106 copyright Penny McIntire, 2010 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…

108 107 copyright Penny McIntire, 2010 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).

109 108 copyright Penny McIntire, 2010 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.

110 109 copyright Penny McIntire, 2010 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.

111 110 copyright Penny McIntire, 2010 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.

112 111 copyright Penny McIntire, 2010 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.

113 112 copyright Penny McIntire, 2010 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…

114 113 copyright Penny McIntire, 2010 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.irfanview.com –www.webdevelopersjournal.com/articles/fa vicon.htmlwww.webdevelopersjournal.com/articles/fa vicon.html –www.favicon.comwww.favicon.com

115 114 copyright Penny McIntire, 2010 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):

116 115 copyright Penny McIntire, 2010 Favicons

117 116 copyright Penny McIntire, 2010 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.

118 117 copyright Penny McIntire, 2010 Linkrot You can create your own “Page not found 404” page :

119 118 copyright Penny McIntire, 2010 Linkrot Creative 404 page (www.sailing issues.com):

120 119 copyright Penny McIntire, 2010 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.

121 120 copyright Penny McIntire, 2010 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.

122 121 copyright Penny McIntire, 2010 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.

123 122 copyright Penny McIntire, 2010 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.

124 123 copyright Penny McIntire, 2010 Navigation and Accessibility 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.

125 124 copyright Penny McIntire, 2010 Navigation and Accessibility 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.

126 125 copyright Penny McIntire, 2010 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


Download ppt "copyright Penny McIntire, 2010 Navigation 2 copyright Penny McIntire, 2010 Introduction Information architecture: The organization of the information."

Similar presentations


Ads by Google