Icon IQ: Test Your Icon Knowledge with a Quiz

Are the icons in your designs working hard or hardly working? Effective icons help our designs achieve a host of benefits that optimize usability, such as enhanced clarity, increased findability, and greater visual appeal. Bad icons, however, drag down UIs by creating confusion and clutter.

New Research to Drive Better Icon Design (and a New NN/g Book!)

In the NN/g training Designing Complex Applications for Specialized Domains, we often discuss common “icon crimes” — UX-design transgressions such as redundant icons, icons that break established conventions, or absurd visual metaphors used to represent concepts within UIs.

This conversation naturally leads to a fun debate: Are there universal icons? Which ones (if any) are generally “safe” to use? And, most importantly, are there icons that users consistently understand?

Frustrated by the lack of data-driven answers to these questions, I embarked on a research journey that ultimately led to the first publication of NN/g Press: Digital Icons That Work: A Comprehensive Guide to Enhancing User Experience with Effective Iconography.

Through rigorous studies involving both quantitative and qualitative research, I explored how people notice, recognize, and interpret icons. All the resulting data, insights, and guidelines are shared in the comprehensive book — plus a chapter on the visual design of icons by Kelley Gordon.

This quiz draws from that research, offering a taste of the insights you’ll find in the book.

Icon Quiz: Test Your Knowledge

1. Which of the following icons do users associate most strongly with location?
   1.  Compass
   2.  Map
   3.  Location pin
   4.  Globe

   Reveal answer

    

2. Why could it be problematic if a design used both the flame and trendline arrow icons?

   

   1. The icons depict physically similar objects, so users might struggle to distinguish between their shapes.
   2. Both icons are associated with popularity, leading to ambiguous interpretations.
   3. The flame icon generally represents something good, while the trendline icon represents something bad.
   4. Both icons represent something intense, so users might not know which one is more important.

   Reveal answer

    

3. What is the primary challenge for users who encounter the gift icon?

   

   1. It is often too complex to be recognized by users who cannot make out the small design details within the symbol.
   2. It suggests that the interface needs updating, because most users perceive the concept of physical gifts as outdated.
   3. It is often unclear whether the icon suggests that a gift is available for the user or that the user can give a gift to someone else.
   4. It is often mistaken for a shopping cart, which can lead to frustration when users cannot find items in their carts.

   Reveal answer

    

4. What action do users most often associate with the circular arrow icon?

   

   1. Refreshing or reloading content
   2. Sharing content with others
   3. Exporting files to a different format
   4. Going back to a previous page or screen

   Reveal answer

    

5. What did survey respondents most strongly associate this globe icon with?

   

   1. Language settings
   2. Regional locations
   3. Internet connectivity
   4. Eco-friendly policies

   Reveal answer

    

6. Which of the following do most users associate with help and support?
   1.  Lifesaver
   2.  Question mark
   3.  Open book
   4.  Pencil and document

   Reveal answer

    

7. When designing a user interface for a financial application, what icon would be most appropriate to indicate a secure transaction?
   1.  Credit card
   2.  Eye
   3.  Closed lock
   4.  Lightning bolt

   Reveal answer

    

8. What is a potential risk of using the icon below to represent a menu?

   

   1. It is likely to be interpreted as a way to adjust settings or preferences due to its visual structure.
   2. It may be recognized as an air filter due to its visual similarity with common household air filters.
   3. It could be mistaken for an expand or collapse control because it is similar to icons used in accordion patterns.
   4. It may be interpreted as a document because lines within a border are a powerful indicator of text or writing.

   Reveal answer

    

9. How can you adapt icons for mobile interfaces?
   1. Increase the padding around icons
   2. Decrease icon size to conserve space
   3. Use smaller touch targets to be responsive
   4. Make icons larger to adhere to Fitts’s Law

   Reveal answer

    

10. Which file type is considered the standard for exporting icons due to its scalability and ease of manipulation?
    1. JPEG
    2. PNG
    3. SVG
    4. GIF

    Reveal answer

     

Discover More in the Book Digital Icons That Work

If you enjoyed this quiz and want to deepen your understanding of icon design, Digital Icons That Work offers a wealth of icon-design guidelines based on my recent icon research.

What’s in the Book

Whether you’re refining your skills or starting from scratch, this book provides insights into creating icons that resonate with users. The practical advice and techniques will help you:

• Unlock Icon Psychology: Gain insights into the psychology of icons for meaningful design.
• Master Icon Recognition: Discover the keys to ensuring your icons are recognized and interpreted correctly.
• Avoid Confusion: Identify symbols that are widely recognized versus those that may cause confusion.
• Craft Effective Icons: Acquire practical strategies for creating understandable and user-friendly icons.

To explore more research insights and discover strategies to create effective iconography that enhances UX, get your copy here.