Skip to main content

Flat Design vs Traditional Design

Comparative Experimental Study​

Introduction​

This paper presents a comparative experimental study on flat and traditional design, analyzing their impact on visual search effectiveness. The authors investigate how users perform on tasks using flat design elements—such as fonts, icons, and clickable areas—compared to traditional, skeuomorphic design elements. The study measures cognitive load through eye-tracking data and explores the usability challenges posed by the flat design, which has gained popularity despite criticism from HCI (Human-Computer Interaction) experts.

Target​

The findings are relevant to UX/UI designers, software developers, and usability researchers who aim to optimize interface designs for both efficiency and ease of use, particularly when choosing between flat and traditional design styles.

Key Insights​

  • Higher Cognitive Load with Flat Design:
    • Tasks involving flat design elements (e.g., text search, icon recognition) show higher cognitive load, with users experiencing longer fixation times and shorter saccadic movements.
    • The lack of depth cues in flat design increases the difficulty of identifying interactive elements, as users spend more time determining what is clickable.
  • Task-Specific Performance Issues:
    • Text Search: Users found it more challenging to search for words in flat text due to condensed, light fonts, which resulted in higher cognitive load.
    • Icon Recognition: Users took nearly twice as long to locate flat icons compared to realistic icons, with higher error rates.
    • Clickable Object Identification: In flat design, participants made more errors, such as missing clickable areas or falsely identifying non-clickable areas as clickable.
  • Increased Error Rates:
    • Flat design led to higher rates of "false alarms" (clicking on non-clickable elements) and "misses" (failing to click on clickable elements), particularly on web pages, suggesting that flat design may be less intuitive for quick navigation.

Supporting Data​

  • Eye-Tracking Metrics:
    • Text and icon search tasks in flat designs showed significant differences in oculomotor indicators (e.g., fixation duration, saccadic amplitude) that are associated with increased cognitive load.
    • In the clickable objects task, flat websites had nearly double the false alarm rate (28%) compared to traditional designs, with participants taking longer per screen area.
  • Performance Times:
    • Mean task times for icon searches were significantly higher in flat design, with average search times nearly doubling, highlighting usability concerns with flat iconography.

Other Insights​

  • Limitations of Flat Aesthetics:
    • The authors note that while flat design is aesthetically pleasing and perceived as modern, it lacks affordances—visual cues that guide user interaction—leading to frequent usability issues.
  • Impact on User Scanning Patterns:
    • Traditional designs allowed for more systematic and efficient scanning, while flat designs led to a "chaotic" search pattern, negatively affecting user experience.

Practical Applications​

  • Rethink Flat Design for Usability: Designers should reconsider flat design elements, particularly in functional areas like navigation and task-oriented interfaces, where depth and affordances support user efficiency.
  • Use Hybrid Approaches: Consider a hybrid style that incorporates minimalistic design with subtle cues (e.g., shadows, borders) to improve interaction clarity without compromising aesthetics.
  • Optimize for Clickability Recognition: Enhance clickable elements in flat designs with visual differentiation, ensuring users can intuitively identify interactive areas without additional cognitive load.

Reference​

Burmistrov, I., Zlokazova, T., Izmalkova, A., & Leonova, A. 2015. Flat Design vs Traditional Design: Comparative Experimental Study. Proceedings of the INTERACT 2015, LNCS 9297, 106–114.