Affording Fluid Navigation

Question 1

global (or top-level) navigation bar

Answer 1

will include broad category titles that navigate the user directly to the associated content when clicked.

Question 2

Why Choose a Top-Level Navigation Design Pattern?

Answer 2

the vast majority of users will know how to interact with this user interface design pattern—in order to navigate freely through the contents of the design—without the need for instruction or eye-catching visuals to draw their attention to this facility.

Secondly, when you are dealing with a group of categories that are unlikely to change and are easily represented with a short title or label, top-level navigation bars can accommodate as many as twelve categories (the recommended maximum number) without occupying too much of the user interface.

Question 3

What is the maximum recommended categories for a navigation bar?

Answer 3

12

Question 4

How to Implement Global Navigation

Answer 4

1. Establish your groups of content
2. Assign each of the groups of content a fitting title
3. Arrange these category titles in a logical order
4. Implement the same top-level navigation bar in all regions of the user interface.
5. Inform the users of their current position
6. Include a number of other small touches to help the user identify this functionality.

Question 5

Users might overlook top-level navigation bars due to their use of a cognitive heuristic (rule of thumb) referred to as…?

Answer 5

Satisficing

Question 6

breadcrumbs represent _____ not the actual steps taken

Answer 6

the hierarchy of a website or application.

Question 7

How do you implement breadcrumbs?

Answer 7

1. Assign a label to each of the individual pages within the hierarchy.
2. Arrange the breadcrumbs in the order they appear
3. Separate each of these breadcrumbs with a greater than sign > or some other symbol that helps space the links.
4. Hyperlink all of the breadcrumb labels
5. The users current position should always be represented as the last breadcrumb
6. Provide users with the facility to navigate between the different breadcrumbs with the tab key

Question 8

breadcrumb labels must clearly describe the _____ of a page.

Answer 8

contents

Question 9

Why might the term ‘breadcrumbs’ be misleading for the type of navigation afforded by this particular user interface design pattern?

Answer 9

Because the pattern indicates the user’s location within the hierarchy rather than the user’s previous navigational steps

Question 10

Search box

Answer 10

graphical user interface design element, one which allows the user to enter letters, words, and terms in a web search engine, database, website, archive, or list of options.

Question 11

How to implement search boxes

Answer 11

1. Outline the input field and make sure the internal color of the box contrasts with the surrounding color.
2. Position search boxes at the highest point on a page
3. Automatically place the cursor within the search box
4. The search term should still appear above the results or contents
5. Include a word to show the user the search field is editable
6. Visualize previous search terms in a dropdown menu from the search box
7. provide the user with a clearly visible ‘submit’ button
8. display them in order of relevance to the term

Question 12

What is the most appropriate location within a webpage for a search box, to maximize findability?

Answer 12

The global navigation bar

Question 13

How could you improve the user experience of a search box on a website where users return often to find information on related issues?

Answer 13

By suggesting search terms while the user is typing.

Question 14

T or F: Since users don’t want to pause, you should make search boxes very obvious to them.

Answer 14

True

Question 15

What is a tag cloud?

Answer 15

Are visual representations of keyword data from a website to allow users to identify important terms.

Question 16

How to implement a tag cloud.

Answer 16

1. Decide on tag cloud placement and size
2. Choose whether to use font size, color, or a combination of the two to represent importance
3. Decide how the tags will be arranged
4. Define the weighting of tags

Question 17

In tag clouds, relative importance is represented with

Answer 17

font size or color

Question 18

As the number of tags increases, the ease with which keywords can be identified and selected decreases. This usability problem is referred to as…?

Answer 18

Keyword Stuffing

Question 19

T or F: Users can click on hyperlinked keywords and jump directly to the content associated with those words.

Answer 19

True

Question 20

How to implement inline linking?

Answer 20

1. Identify the words
2. Conventionally, inline links are blue and underlined
3. Use the tooltop to indicate what the users will find if they click on the inline link
   4.

Question 21

What is inline linking?

Answer 21

A user interface design pattern that designers use to help users find additional information on terms they are either interested in or confused about.

Question 22

Why are inline links a useful addition to large bodies of text?

Answer 22

Because they provide more information, without taking up too much space in an interface

Question 23

Site map footer

Answer 23

Include a sitemap in the footer of every webpage, so when your users reach the end of the contents, there is a highly visible and instantly accessible navigation tool waiting to help them move freely around the website, or at the very least to jump to another level within the site hierarchy.

Ability to minimize the efforts users need to take in navigating through a website.

Question 24

How to implement sitemap footers

Answer 24

1. Deciding which features you wish to offer users.
2. Create a page-wide footer
3. Organize all of the feature links
4. Arrange the links
5. Place any necessary copyright and website information

Question 25

Why would you place a sitemap at the bottom of the page (footer)?

Answer 25

Because it helps users who have reached the end of a page navigate further

Question 26

Why is the name 'breadcrumbs' somewhat misleading?

Answer 26

Breadcrumbs do not represent actual steps taken but rather the hierarchy of a website or application. The name 'breadcrumbs' is misleading as it doesn’t represent actual steps taken but rather the hierarchy of a website or application. The users do not have to follow the exact order so as to return to their starting position; instead, they can skip steps in between and navigate directly to a specific page.

Question 27

What is the most appropriate location within a webpage for a search box, to maximize findability? a. A dropdown menu b. The global navigation bar c. The webpage footer

Answer 27

b. The global navigation bar

Question 28

How could you improve the user experience of a search box on a website where users return often to find information on related issues? a. By allowing the search box to pop up with Cmd-F b. By giving lists and categories of common search terms c. By suggesting search terms while the user is typing

Answer 28

c. By suggesting search terms while the user is typing

Question 29

Which of the following is good advice for designing search boxes? a. Since it’s a problem-free design pattern, you can and should use it anywhere on a screen. b. Since users don’t want to pause, you should make search boxes very obvious to them. c. Since users want to be free to enter their own terms, leave search boxes blank for them.

Answer 29

b. Since users don’t want to pause, you should make search boxes very obvious to them.

Question 30

Which of the following is true about tag clouds? a. Tag clouds should appear on the left-hand side of a homepage. b. Users can click on hyperlinked keywords and jump directly to the content associated with those words. c. Bolder and more vibrant colors are used to accentuate tags that users might otherwise overlook.

Answer 30

b. Users can click on hyperlinked keywords and jump directly to the content associated with those words.

Question 31

Why would you use inline linking design pattern?

Answer 31

1. They reduce screen clutter by keeping web page information specific to a certain thread or topic without veering off onto other topics mid-sentence 2. They afford instant and fluid navigation to other web pages that contain more specific and detailed content

Question 32

When the user hovers the cursor over inline links, a number of design features can be included to provide informative feedback. Of the following options, which one is NOT typically used to show that inline links are 'interactive'? a. Changing the font style of the words from regular to underlined b. Changing the font size of the words from regular to large c. Changing the mouse pointer symbol from an arrow to a finger

Answer 32

b. Changing the font size of the words from regular to large

Question 33

Why are inline links a useful addition to large bodies of text? a. Because they allow users to scan the text for important sections of information b. Because they give suggestions to users as to what actions they can perform on the page c. Because they provide more information, without taking up too much space in an interface

Answer 33

c. Because they provide more information, without taking up too much space in an interface

Question 34

what would users want to do when they reach the end of a webpage?

Answer 34

They will probably want to navigate to another section that interests them or return to a section they were reading before they dived into a specific task.

Question 35

What is the design problem of not having a footer?

Answer 35

Users will have to return to the top of the page to use the navigation options available on the top. This will add to the effort needed from the user, especially if he or she has to negotiate thumbing back to the top on a smartphone with a dwindling battery.

Question 36

What is a possible solution to help users navigate a page when they've reached the bottom?

Answer 36

Include a sitemap in the footer of every webpage, so when your users reach the end of the contents, there is a highly visible and instantly accessible navigation tool waiting to help them move freely around the website, or at the very least to jump to another level within the site hierarchy.

Question 37

What are sitemap footers? \

Answer 37

Sitemap footers are what we designers use to provide users with links to sections of the website, or outside websites/webpages, that are important to all users regardless of their current position within the site hierarchy. In this respect, they act in a similar way to the global navigation section of a webpage. The larger the website, the more navigation points the user will require; forcing everything into one user interface design pattern will likely overload the screen and the user, so sitemap footers tend to relieve the pressure on top-level or global navigation bars.

Question 38

What are the best practices of implementing a sitemap footer?

Answer 38

1. Decide which features you wish to offer users. 2. Create a page-wide footer 3. Organize all of the feature links, such as 'Contact Us' and 'Our Partners', into clearly labeled categories. 4. Arrange the links: so there is no confusion about which category they belong to. 5. Place any necessary copyright and website information, such as the 'year established', at the very bottom of the sitemap.

Question 39

Sitemap footers are used to provide users with links to sections of the website, or outside websites, that are important to all users regardless of their current position within the site hierarchy. What other design pattern does this resemble?

Answer 39

Global navigation

Question 40

Why would you place a sitemap at the bottom of the page (footer)?

Answer 40

Because it helps users who have reached the end of a page navigate further