Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

UX: UI Design Patterns > Affording Fluid Navigation > Flashcards

Affording Fluid Navigation Flashcards

1
Q

global (or top-level) navigation bar

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Why Choose a Top-Level Navigation Design Pattern?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the maximum recommended categories for a navigation bar?

A

12

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How to Implement Global Navigation

A
  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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

Satisficing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

breadcrumbs represent _____ not the actual steps taken

A

the hierarchy of a website or application.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do you implement breadcrumbs?

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

breadcrumb labels must clearly describe the _____ of a page.

A

contents

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Search box

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How to implement search boxes

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

The global navigation bar

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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 suggesting search terms while the user is typing.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is a tag cloud?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How to implement a tag cloud.

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

In tag clouds, relative importance is represented with

A

font size or color

18
Q

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

A

Keyword Stuffing

19
Q

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

A

True

20
Q

How to implement inline linking?

A
  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.
21
Q

What is inline linking?

A

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

22
Q

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

A

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

23
Q

Site map footer

A

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.

24
Q

How to implement sitemap footers

A
  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
25
Q

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

A

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

26
Q

Why is the name ‘breadcrumbs’ somewhat misleading?

A

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.

27
Q

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

A

b. The global navigation bar

28
Q

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

A

c. By suggesting search terms while the user is typing

29
Q

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.

A

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

30
Q

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.

A

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

31
Q

Why would you use inline linking design pattern?

A
  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
32
Q

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

A

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

33
Q

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

A

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

34
Q

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

A

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.

35
Q

What is the design problem of not having a footer?

A

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.

36
Q

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

A

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.

37
Q

What are sitemap footers?

\

A

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.

38
Q

What are the best practices of implementing a sitemap footer?

A
  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.
39
Q

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?

A

Global navigation

40
Q

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

A

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

UX: UI Design Patterns (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions