Art & Design: Digital Design: Icons, UI, and Accessibility
Designing clear icons and inclusive user interfaces
Art & Design: Digital Design: Icons, UI, and Accessibility
Designing clear icons and inclusive user interfaces
Art & Design - Grade 9-12
- 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.
Think about shape, contrast, and how much detail can be seen on a phone screen.
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. - 2
Explain the difference between an icon that is decorative and an icon that is functional in a user interface.
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. - 3
A designer uses a trash can icon to represent deleting a file. Explain why this is an example of a visual metaphor.
A visual metaphor uses one image to stand for an idea or action.
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. - 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.
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. - 5
A button has dark gray text on a black background. Identify the accessibility problem and suggest an improvement.
Text should stand out clearly from its background.
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. - 6
Explain why relying only on color to show an error in a form can be inaccessible.
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. - 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.
Give users more than one way to notice and understand the problem.
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. - 8
Describe what alt text is and explain why it matters in digital design.
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. - 9
Write appropriate alt text for this image: a simple icon showing a magnifying glass used as a search button.
For functional icons, describe the action or purpose, not just the appearance.
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. - 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.
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. - 11
Explain how hierarchy can guide a user's attention on a home screen.
The most important item should usually be easiest to notice.
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. - 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.
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. - 13
List three questions a designer should ask when evaluating whether an icon set is consistent.
Compare the icons as a group, not just one at a time.
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. - 14
A website uses tiny text, crowded buttons, and little space between links. Explain how these choices could affect usability.
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. - 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.
Use a real example and connect your improvement to accessibility.
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.