Organizing Content for the Best Results

Question 1

When should you avoid using slideshows in you design?

Answer 1

When an image refer to content is very abstract.

Question 2

Why is a combination of both automatic and user-controlled movement recommended when implementing slideshows?

Answer 2

Because it shows all images, while providing users a sense of autonomy

Question 3

What is banner blindness?

Answer 3

web user behavior: The automatic response the brain has developed of ignoring webpage banners..

it describes people’s tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads.

Question 4

When should you use a slideshow?

Answer 4

1. Only use slideshows when your message can be delivered through unambiguous images.
2. Arrange images horizontally and within a uniform section.
3. Place slideshows just below the global navigation area to avoid ‘banner blindess’.
4. Allow both manual navigation through the slideshow, and automatic movement.
5. Deliver the images at an appropriate speed.
6. Include a call to action, if that fits the purpose of the slideshow.

Question 5

What is a slideshow used for?

Answer 5

• It grabs the user’s attention

* You can show a range of products or inspire users

Question 6

When would the two-panel selector be an appropriate design pattern to implement?

Answer 6

When the user needs to view information while keeping an overview of the structure

It helps them keep an overview and dive into the details at the same time. It also greatly improves efficiency and reduces cognitive load.

Question 7

Why would users need two-panel selectors?

Answer 7

When their tasks require them to switch between overall items and specific content multiple times while they’re performing a task.

Question 8

Why would you choose a two-panel selector design pattern?

Answer 8

Allows viewers to switch their attention from the contents of one item to other potential selections, without having to carry out any intermediate steps or interactions.

Users can view each item’s contents simply by clicking on the region of space occupied in the list, or by clicking on a specific point.

Question 9

How to Implement Two-Panel Selectors

Answer 9

1. Placing the list in your design depends on your primary user. eg.) In America, panel lists are usually on the top or left of the panel.
2. Place the contents of an item immediately in the second panel.
3. The selected option in the first panel must be distinguished from the rest to provide users with a means of instantly determining which item contents they are viewing.
   4.

Question 10

How many items are humans capable of remembering in an active state?

Answer 10

9

Question 11

list inlay

Answer 11

allows the user to view the contents of all items in a list, from one screen, by simply clicking on the item.

Typically, the list shows clear labels or brief descriptions of the contents; then, upon the user’s clicking on an individual item, more in-depth details are shown beneath the corresponding label.

Question 12

Archive lists

Answer 12

consolidate data sets into broad categories, listed by the day, week, month or year in which the information items were uploaded or edited.

Question 13

scrolling list

Answer 13

makes all options available on the page, window or panel, with items further down the list accessed by scrolling. Scrolling lists are often used in user interface designs where there are a number of options that open in a separate section of the dialog box, window, page, or in another panel. Typically, scrolling lists consist of a column of options, arranged in alphabetical order, or some other meaningful sequence. The user can move back and forth (up and down) through these options by clicking the arrows, pressing the directional keys on the computer keyboard, swiping a touchscreen or scrolling a mouse.

Question 14

With the implementation of a list inlay, the length of the entire list can become enormous when a user opens multiple list items. What is a suitable solution to this problem?

Answer 14

Automatically closing one list item when another is opened

Question 15

vertical dropdown menu

Answer 15

allows you to display a list of contents, navigation points, and functions without flooding the user with lots of options all at once.

Question 16

dropdown menus

Answer 16

each list of options is assigned a content-defining title, and these are placed horizontally along the top of the screen or panel.

Question 17

Horizontal dropdown menu

Answer 17

are an addition to vertical dropdown menus, which help save the user from having to go to separate sections of the user interface at each stage of an option-selection sequence.

Question 18

Mega dropdown menus (also referred to as ‘fat menus’)

Answer 18

consolidate all of the different sections of the site, application, or system into one long list, which is further broken down into sub-categories and accessed from a navigation bar, such as the Asos homepage example below.

Question 19

Mega dropdown menus present the user with lots of different options. If the individual options are not clearly distinguishable, then users will have to scan a large number of options before identifying their favored one. Which of the following design patterns should you use to help users find their preferred option within a mega dropdown menu?

Answer 19

Titled sections

Question 20

Mega dropdown menus are also referred to as…?

Answer 20

Fat menus

Question 21

Which of the following is good advice for designing dropdown menus?

Answer 21

Use background color to show which option will be selected according to the cursor position.

Question 22

card stack pattern

Answer 22

labeled ‘cards’ or tabs help to structure content into separate sets of links

Question 23

Navigation tabs

Answer 23

almost exclusively placed along the top-level navigation bar of websites, offering small, clickable labels that open content in a new webpage.

Question 24

module tabs

Answer 24

present information on the same page, usually within a fixed panel, allowing the user to operate without having to navigate to other separate sections of the user interface.

Question 25

How to Implement Navigation and Module Tabs

Answer 25

1. establish how the site contents will be divided
2. arrange all of these labels horizontally
3. distinguish the currently selected tab from the rest.
4. ensure the same design is maintained across all the different pages

Question 26

Pagination

Answer 26

process of splitting the contents of a website, or a section of contents from a website, into discrete pages

Pagination in web applications is usually controlled by a code, which typically orders dataset items from newest to oldest.

Question 27

How to Implement Pagination

Answer 27

1. dividing the overall dataset into smaller groups of items
2. Determine how much control the user should have over the way the items are grouped or ordered, or the number of items displayed on one page.
3. Add pagination controls to allow the user to move forwards and backwards through the different pages, such as east- and west-facing arrows.
4. When the user has visited a page, and the page numbers of visited pages are visible, the color of the link number should change.

Question 28

When do you list inlays?

Answer 28

When the user needs to zoom in on a specific category of items, without losing sight of the overall categories.

Question 29

When do you use scrolling lists?

Answer 29

Designed to give access to larger lists without cluttering the page too much.

Question 30

When do you use archive lists?

Answer 30

In situations where users search for items based on dates.

Question 31

With the implementation of a list inlay, the length of the entire list can become enormous when a user opens multiple list items. What is a suitable solution to this problem?

a. Automatically closing one list item when another is opened.
b. Implementing a scrolling list within a list inlay for each item
c. Using an archive list instead of a list inlay design pattern

Answer 31

a. Automatically closing one list item when another is opened.

Question 32

What is a Mega dropdown menu?

Answer 32

Also referred to as “fat menus”) consolidate all of the different sections of the site, application, or system into one long list. Which is further broken down into sub-categories and accessed from a navigation bar.

As the name suggests, mega dropdown menus are used to show large groups of options, categories, data sets, or other types of related content at once

Question 33

When should you not use dropdown menus?

Answer 33

1. When you want to show the users where they are in the website. When providing the user with contextual information, use navigation tabs.
2. The user would benefit from seeing the content of the individual menus together
3. When a category contains only one item

Question 34

What are the 7 steps to implementing a dropdown menu?

Answer 34

1. Identify what your categories or dropdown menu titles are
2. Assign a logical and fitting title to each category
3. place the menu titles in a row and determine how to order them
4. include some visual indicator
5. add some visual features that will help the user choose the intended option
6. use headers and dividers
7. choose the interactive elements of the design

Question 35

Automatically removing the menu from the screen when the cursor is moved to another region of the user interface can be infuriating. What are some ways around this problem?

Answer 35

1. You could implement a time lag of approximately 200–300 milliseconds between the user’s moving the cursor from the space occupied by the list of options and the removal of the menu.
2. You could make the margins around the menu options larger, so unintentional or inaccurate movements are less likely to cause the menu to disappear.
3. You could alter the cursor icon that appears when positioned over a tab (e.g., switching from an arrow to a pointing hand); this helps to inform users that they are within an interactive area of the user interface and moving away from this region will cause the removal of the associated content.

Question 36

Mega dropdown menus present the user with lots of different options. If the individual options are not clearly distinguishable, then users will have to scan a large number of options before identifying their favored one. Which of the following design patterns should you use to help users find their preferred option within a mega dropdown menu?

a. Movable pieces
b. Responsive enabling
c. Titled sections

Answer 36

c. Titled sections

Question 37

Mega dropdown menus are also referred to as…?

a. Fat menus
b. Fly-out lists
c. Fake tabs

Answer 37

a. Fat menus

Question 38

Which of the following is good advice for designing dropdown menus?

a. Give each category an appropriate and logical title, regardless of character length.
b. Use background color to show which option will be selected according to the cursor position.
c. Design dropdown menus so users know where they are within the application or website.

Answer 38

b. Use background color to show which option will be selected according to the cursor position.

Question 39

What is a tabbed document interface(module tab pattern)?

Answer 39

Also referred to as ‘card stack pattern’. In this pattern, labeled ‘cards’ or tabs help to structure content into a separate set of links.

Question 40

What is ROCI?

Answer 40

Return on Click Investment refers to the amount of effort expended versus the pay-off when they arrive at their intended location.

Question 41

What is the ideal achievement on ROCI?

Answer 41

Where the user has to carry out the fewest number of interactions possible, while the new location provides that user with all of the sought information in an easy-to-digest fashion.

Question 42

When should you not use tabs?

Answer 42

1. When the user would benefit from seeing the contents of multiple sections on the same page.
2. When dealing with data that is content-specific
3. If there is only a small amount of information in a number of tabs.

Question 43

What is the most compelling argument for determining the maximum number of tabs that can be used in a webpage design?

a. The amount of information to be presented with each tab
b. The guideline of having no more than ten tabs on page
c. The space needed for understandable tab descriptions

Answer 43

c. The space needed for understandable tab descriptions

Question 44

In which of the following cases should you use tabs?

a. When a user is searching for dated contents
b. When a user needs to compare multiple data sets
c. When a user wants to go straight to a specific page

Answer 44

c. When a user wants to go straight to a specific page

Question 45

What is the best option to minimize the following problem with pagination: Users cannot return to items they previously viewed when searching for a new party dress in an online shop, because they can’t remember where they saw it?

a. Filtering search results
b. Creating a “recently seen” list
c. Viewing all items at once

Answer 45

b. Creating a “recently seen” list

The best option is the one that requires less effort from the user searching for what they are looking for.