Art & Design: Digital Design: Icons, UI, and Accessibility Worksheet

Question 1

A weather app needs an icon for a severe storm warning. Describe three visual features that would make the icon easy to recognize at a small size.

Accepted Answer

An effective severe storm icon could use a simple cloud shape, a bold lightning bolt, and a high-contrast warning color such as yellow or red. These features help the icon remain recognizable even when it is small.

Question 2

Explain the difference between an icon that is decorative and an icon that is functional in a user interface.

Accepted Answer

A decorative icon adds visual style but does not perform an important action or communicate necessary information. A functional icon helps the user do something or understand something, such as saving a file, opening a menu, or deleting an item.

Question 3

A designer uses a trash can icon to represent deleting a file. Explain why this is an example of a visual metaphor.

Accepted Answer

The trash can is a visual metaphor because it connects a digital action to a familiar real-world object. Users understand that putting something in the trash means removing or discarding it.

Question 4

Look at a navigation bar with four items: Home, Search, Messages, and Profile. Describe one way to use spacing and alignment to make the navigation easier to use.

Accepted Answer

The four items should be evenly spaced and aligned along the same baseline or center line. Consistent spacing and alignment make the interface look organized and help users predict where to tap or click.

Question 5

A button has dark gray text on a black background. Identify the accessibility problem and suggest an improvement.

Accepted Answer

The accessibility problem is low contrast, which can make the text difficult to read for many users. A better design would use light text on the dark background or a lighter button background with dark text.

Question 6

Explain why relying only on color to show an error in a form can be inaccessible.

Accepted Answer

Relying only on color can be inaccessible because some users may have color vision deficiencies or may not notice the color change. A better design also includes text, an icon, or a clear message explaining the error.

Question 7

A sign-up form has a red outline around a missing email field. Add two additional design choices that would make the error message more accessible.

Accepted Answer

The form should include a written message such as 'Email address is required' and an error icon near the field. These choices make the problem clear without depending only on the red outline.

Question 8

Describe what alt text is and explain why it matters in digital design.

Accepted Answer

Alt text is a written description of an image that can be read by screen readers or shown when an image does not load. It matters because it helps users who cannot see the image understand its purpose or content.

Question 9

Write appropriate alt text for this image: a simple icon showing a magnifying glass used as a search button.

Accepted Answer

Appropriate alt text would be 'Search' or 'Search button.' This is better than describing every visual detail because the icon's function is to help the user search.

Question 10

A mobile app has a menu icon, but the icon has no label. Explain one benefit and one risk of using an unlabeled icon.

Accepted Answer

One benefit is that an unlabeled icon saves space and can make the interface look cleaner. One risk is that users may not understand what the icon means, especially if the symbol is unfamiliar.

Question 11

Explain how hierarchy can guide a user's attention on a home screen.

Accepted Answer

Hierarchy guides attention by making the most important information or actions stand out first. Designers can create hierarchy with size, contrast, color, placement, spacing, and typography.

Question 12

A music app has a bright green 'Play' button and a gray 'Cancel' button. Explain how this color and contrast choice supports user experience.

Accepted Answer

The bright green button draws attention to the main action, while the gray button makes the secondary action less visually dominant. This helps users quickly identify the action they are most likely to take.

Question 13

List three questions a designer should ask when evaluating whether an icon set is consistent.

Accepted Answer

A designer should ask whether the icons use the same line weight, whether they share a similar level of detail, and whether they follow the same style for corners, fills, and proportions. Consistency helps the interface feel unified.

Question 14

A website uses tiny text, crowded buttons, and little space between links. Explain how these choices could affect usability.

Accepted Answer

Tiny text can be hard to read, crowded buttons can be difficult to click or tap, and links placed too close together can cause mistakes. These choices make the site harder to use and less accessible.

Question 15

Choose one app you use often. Describe one icon or interface feature that works well and one improvement that would make it more accessible.

Accepted Answer

A strong answer names a specific app feature, explains why it works well, and suggests a realistic accessibility improvement. For example, a student might say that a large play button is easy to find, but the app could add clearer labels for icons so screen reader users and new users understand them.

Sign in to save

Sign in to save

Art & Design: Digital Design: Icons, UI, and Accessibility

Related Infographics

Related Cheat Sheets

More Art & Design Worksheets

More Grade 9-12 Worksheets