Icon Design Icon Design MCQ 2 — Questions and Answers
Question 1: What is the recommended minimum touch target size for icons in mobile UI design?
- 24x24 px
- 32x32 px
- 44x44 px (Correct answer)
- 64x64 px
Correct answer: 44x44 px
Apple HIG and Google Material Design both recommend a minimum touch target of 44x44 pt/dp to ensure usability on touchscreens.
Question 2: Which file format is best suited for icons that need to scale to any size without quality loss?
- PNG
- JPEG
- SVG (Correct answer)
- GIF
Correct answer: SVG
SVG is a vector format that scales infinitely without pixelation, making it ideal for icons across screen resolutions.
Question 3: In icon design, what does 'optical alignment' refer to?
- Aligning icons mathematically to a grid
- Adjusting placement so icons appear visually centered even if not mathematically centered (Correct answer)
- Using the same color for all icons in a set
- Scaling icons to the same pixel dimensions
Correct answer: Adjusting placement so icons appear visually centered even if not mathematically centered
Optical alignment involves minor visual adjustments so shapes appear balanced to the human eye, since geometric center often looks off-center.
Question 4: What is the purpose of a 'keyline grid' in icon design systems like Material Design?
- To define the icon's color palette
- To provide standard geometric shapes that guide consistent icon proportions (Correct answer)
- To determine the icon's animation timing
- To set the maximum file size for icons
Correct answer: To provide standard geometric shapes that guide consistent icon proportions
Keyline grids use standard shapes (circle, square, rectangle) to keep icons visually consistent in weight and proportion across a set.
Question 5: Which stroke cap style gives icons a friendlier, more approachable aesthetic?
- Butt cap
- Square cap
- Round cap (Correct answer)
- Projecting cap
Correct answer: Round cap
Round stroke caps soften the edges of line icons, giving them a warmer and more approachable feel compared to flat butt or square caps.
Question 6: When designing a 'filled' vs 'outlined' icon variant, what is the primary visual difference?
- Filled icons use gradients; outlined icons use flat color
- Filled icons have solid interior shapes; outlined icons use strokes to define the form (Correct answer)
- Filled icons are larger; outlined icons are smaller
- Filled icons are animated; outlined icons are static
Correct answer: Filled icons have solid interior shapes; outlined icons use strokes to define the form
Filled icons use solid shapes to convey form, while outlined icons rely on strokes, making them appear lighter and less visually heavy.
Question 7: What does 'icon affordance' mean in UX design?
- The cost of licensing an icon set
- The ability of an icon to visually communicate its function or meaning (Correct answer)
- The number of colors used in an icon
- The animation speed of an interactive icon
Correct answer: The ability of an icon to visually communicate its function or meaning
Affordance refers to how well an icon signals its purpose—a magnifying glass affords 'search' because users recognize the metaphor.
Icon Design Icon Design MCQ 2
What is the recommended minimum touch target size for icons in mobile UI design?