Transcript Designing the User Interface - Northern Illinois University
Navigation
copyright Penny McIntire, 2010
Introduction
• • •
Information architecture
the site. : The organization of the information within 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?
2 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?.” 3 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 process we all use to find what we want, whether on a web page or in the Mall of America.
wayfinding
, the 4 copyright Penny McIntire, 2010
Introduction
• • Jakob Nielsen calls the process “following the scent.” Principles of Navigation… 5 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.
6 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 labels.
all 7 copyright Penny McIntire, 2010
Principle 1. Create Simple, Visible, Consistent Navigation
• Don’t remove the
current link
menu – doing so results in the menu changing from page to page, and visitors lose their places.
from the – 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.
8 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.
9 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.
10 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. 11 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.
12 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. 13 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. 14 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 15 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 16 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 17 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.
18 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 (importance) to the user.
salience
19 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. 20 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. 21 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.
22 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.
23 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. 24 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.
25 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.
26 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? 27 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.
28 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 menus and bars). (the browser 29 copyright Penny McIntire, 2010
Navigation Required on Every Page
• As appropriate: – Local navigation (also called cross-over or sub-navigation bookmarks.
) for subsections under the current page or even the page’s – – – A search function for larger sites.
Site-wide utilities, such as “Store Locator” or “Checkout.” Footer, especially
fat footers,
http://www.w3.org
. as on 30 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… 31 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.
32 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.
33 copyright Penny McIntire, 2010
Link Functions
•
Internal links:
own site. – – – links that stay within our “load this next page” links Internal bookmarks that move to a different spot in the same page. Action links, like “go,” “search,”, “print,” “submit.” 34 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" background.
• ) so that our original window is patiently waiting in the Downside: violates accessibility guidelines and clutters the visitor’s screen.
35 copyright Penny McIntire, 2010
Link Functions
– Alternative: open in a new, named window ( target="myWindowName" throughout the site. ) and continue to reuse that window for external links • 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.
36 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.
37 copyright Penny McIntire, 2010
Link Functions
• •
Download links
be large files. – warning. , to download files like doc’s, pdf’s or mp3’s, all of which can It’s helpful to display the file size next to the link, as a “Just how patient are you?”
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. 38 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. 39 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 information. for further 40 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.
41 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). 42 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.
43 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.
44 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. 45 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.
46 copyright Penny McIntire, 2010
Link States
• You don’t need to use all link state indicators, but be consistent in those you do use.
47 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
Navigational Tools
• Navigational tools – – Navigational text Navigational graphics 49 copyright Penny McIntire, 2010
Navigational Text
• Text links are a good thing: – Individual text links are much update than graphic links.
• easier to 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.
50 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.
51 copyright Penny McIntire, 2010
Navigational Text
• • Later, we will look at how you can use CSS to change the styling, which can isolate
active
(rollover). ,
visited
, and
hover
For now, we’ll just look at the principles of text link design.
52 copyright Penny McIntire, 2010
Navigational Text: Affordances
• Text link
affordances
ness), all using CSS.
– – – – (indicators of link Text style change, like boldface, italics, font size, text color, or typeface.
Background color change.
Style change on rollover. Underline...
53 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?
54 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.
55 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.
56 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.
57 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.
58 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. 59 copyright Penny McIntire, 2010
Navigational Graphics
• Navigational graphics include buttons, image maps, and icons.
60 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.
61 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.
63 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.
64 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).
65 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.
66 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.
67 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. 68 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.
69 copyright Penny McIntire, 2010
Navigational Graphics: Rollover Effects
•
Remote rollover/mouseover:
– js08.html
rolling over a link (text or graphic) changes the display of an image elsewhere. – 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.
70 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.
71 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. 72 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.
73 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.
– To implement a link with a tagalong graphic, insert a graphic rollover, then put the text within the …, too.
74 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. 75 copyright Penny McIntire, 2010
Navigational Graphics: Icons
•
Icons
: small, stylized pictures or symbols designed to occupy minimal screen real estate.
– Even common symbols, like 6 or 1 (Wingdings2) (Wingdings) can be misunderstood. – – The remedy? Text accompaniment, which defeats the purpose of the icon.
At the very least, use title and alt attributes.
76 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
• • 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. 77 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.
78 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.
79 copyright Penny McIntire, 2010
Navigational Graphics: Sliced Images
Make as a link, with some graphic effect like glow.
80 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.
81 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 82 copyright Penny McIntire, 2010
Menus
• Double purpose: – – Navigation.
Illumination of the structure of the site.
83 copyright Penny McIntire, 2010
Menus: Item Groupings
• Menu item groupings – What’s wrong with this?
84 copyright Penny McIntire, 2010
Menus: Item Groupings
– What’s right with these?
85 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.
86 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.
87 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.
88 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).
89 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…
Bad Good
90 copyright Penny McIntire, 2010
• Menu size: menus can be narrow but deep, with only a few choices at each level,
Menus: Size
or broad but shallow, with lots of choices at each level.
91 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. 92 copyright Penny McIntire, 2010
Menus: Size
• Minimize “broad but shallow” confusion by
chunking
hierarchies.
the elements into categories, using the inherent human propensity of intuitively grasping 93 copyright Penny McIntire, 2010
Menus: Expandable Menus
• • For large sites, consider using expandable menus for links. Two types: – – Jump menus using
94 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.
95 copyright Penny McIntire, 2010
Menus: Dropdown Menus
• Pop-up/dropdown/flyout menus show a small
Menus: Dropdown Menus
97 copyright Penny McIntire, 2010
Menus: Dropdown Menus
• • • • Implemented by show/hide on
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.
98 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
. – – 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.
99 copyright Penny McIntire, 2010
Menus: Sequential Menus
• Sequential Menus – Nice to indicate number of pages, too. 100 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.
101 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