Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
IvanBurmistrov ▪ TatianaZlokazova
AnnaIzmalkova ▪ AnnaLeonova
Flat design vs
rich design:
Experimental
comparison
Lomonoso...
Flat design dominance in
modern UI design
Introduced by Microsoft in
their Windows Phone (2010)
and Windows 8 (2012)
opera...
Flat design principles
• elimination of all UI features that remind real world
3D objects: no shadows, embossing, gradient...
Mixed reaction to flat style
• Flat design was enthusiastically hailed by graphic
designers who began to speak about “flat...
Experts’ criticism of flat style
• Flat design lacks visual affordances
that allow users to differentiate
between interact...
Experiment
“Traditional” series
Experimental task 1:
Search for a target word in a text 1/2
“Flat” series
Fonts used for “traditional” and “flat” tasks
Experimental task 1:
Search for a target word in a text 2/2
“Traditional” fo...
Realistic series
Experimental task 2:
Search for a target icon in a matrix of icons
Flat series
Traditional series
Experimental task 3:
Clicking all clickable objects on a webpage
Flat series
Traditional series
9 subseries of 3 tasks in each
Flat series
9 subseries of 3 tasks in each
• Half of subjects began from...
EyeLink 1000 eyetracker for
measuring cognitive load indicators:
• fixation duration
• saccadic amplitude
• saccadic peak ...
• 20 university students
• age 18-28 (M = 21,2)
• 19 female, 1 male
• all were experienced web,
smartphone and tablet user...
Results
• no statistically significant
difference in search time
• higher cognitive load in case of flat
design:
 increase in fix...
• search time for flat icons was almost
two times longer than search for
realistic icons (p < 0,001)
• higher cognitive lo...
• performance time per screen area was
higher for flat webpages (p = 0,002)
• more errors in case of flat design
(p < 0,00...
Conclusions
• Our experiment showed that flat design means
higher cognitive load, longer performance times
and more errors
• Flat desi...
Thank you!
Contact:
ivan@interux.com
Upcoming SlideShare
Loading in …5
×

Flat design vs rich design: Experimental comparison

3,234 views

Published on

Presentation at the INTERACT 2015 Conference (Bamberg, Germany, September 14–18, 2015)

Article:

Burmistrov I., Zlokazova T., Izmalkova A., Leonova A. (2015) Flat design vs traditional design: Comparative experimental study, pp. 106-114 in: J. Abascal, S. Barbosa, M. Fetter, T. Gross, P. Palanque, M. Winckler (Eds.) Human-Computer Interaction – INTERACT 2015: 15th IFIP TC 13 International Conference (Bamberg, Germany, September 14–18, 2015): Proceedings, Part II, Cham: Springer | DOI: 10.1007/978-3-319-22668-2_10

Article download: http://bit.ly/1MTL4gD

Published in: Design
  • @Antoine Viau -- Thank you very much for your comment! I agree that our experiment was not ideal but how could we obtain two sets of the same 729 icons and where might we find 9 pairs of the same websites designed in flat and traditional styles? However, it is absolutely obvious to us usability experts that flat design “cuts out too much” and that this is a terribly harmful trend in UI design. I can send you some links to academic research, usability testing results and reports of failed designs showing that flat doesn’t work. (I don’t say “unprofessional flat design doesn’t work”, I say “flat design doesn’t work in principle because it ignores principally three-dimensional nature of human perception”.) We will see the complete decline of flat style in 2016…
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi, I was anxious to read the conclusion even though I knew how the research was oriented. Starting with a negative quote about flat design just made me more carefull about biais. Design is a major factor in usability but it can be more about quality than trend. To my eye, Flat design takes away most of the unnecessary visual information. But its always a matter of how much you cut. Most of the experiments present a flat design already alterated in contrast. That's just bad design and it makes the samples useless and incomparable. The other bias is that the 2 comparables are not the same. You should have done the experiment with the same sets of icons and same site for Flat and Skeuomophism. Third, we don't use condensed typo on the screen, We're more prompt to use wide opended counterforms and spaces. My conclusion is that Flat design is still new and experimental. Contrast ratio is often an issue but it's been explorative because of the resolution and contrast specs of the modern screens. I agree that there are issues with flat design, but I can't agree with the methodology used in that search. The results are irrelevant to me.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Flat design vs rich design: Experimental comparison

  1. 1. IvanBurmistrov ▪ TatianaZlokazova AnnaIzmalkova ▪ AnnaLeonova Flat design vs rich design: Experimental comparison Lomonosov Moscow State University
  2. 2. Flat design dominance in modern UI design Introduced by Microsoft in their Windows Phone (2010) and Windows 8 (2012) operating systems, flat design became the predominant visual style of all digital products: desktop applications, websites and mobile apps
  3. 3. Flat design principles • elimination of all UI features that remind real world 3D objects: no shadows, embossing, gradients • minimalism, simplification of UI elements • focus on typography: large font sizes, unusual typefaces, ALL CAPS, ultralight and condensed fonts, low contrast • focus on color: bright, pure colors • intense use of negative space: low density of UI objects on screen
  4. 4. Mixed reaction to flat style • Flat design was enthusiastically hailed by graphic designers who began to speak about “flat revolution” and “flat design era” • Many users liked flat design too but others did not • However, reaction of HCI/usability experts was mostly negative
  5. 5. Experts’ criticism of flat style • Flat design lacks visual affordances that allow users to differentiate between interactive (clickable) and non-interactive (non-clickable) UI objects • “Childish” look of flat Uis • Flat style is boring and all websites now look the same “I really do hate it” - Jakob Nielsen
  6. 6. Experiment
  7. 7. “Traditional” series Experimental task 1: Search for a target word in a text 1/2 “Flat” series
  8. 8. Fonts used for “traditional” and “flat” tasks Experimental task 1: Search for a target word in a text 2/2 “Traditional” fonts Helvetica Neue Normal Arial Normal Tahoma Normal “Flat” fonts Helvetica Neue Condensed Normal Helvetica Neue Light Helvetica Neue UltraLight
  9. 9. Realistic series Experimental task 2: Search for a target icon in a matrix of icons Flat series
  10. 10. Traditional series Experimental task 3: Clicking all clickable objects on a webpage Flat series
  11. 11. Traditional series 9 subseries of 3 tasks in each Flat series 9 subseries of 3 tasks in each • Half of subjects began from traditional series, another half began from flat series • 54 tasks in total Scheme of the experiment Webpage Icon Text Webpage Icon Text Webpage Icon Text • • • Webpage Icon Text Webpage Icon Text Webpage Icon Text • • •
  12. 12. EyeLink 1000 eyetracker for measuring cognitive load indicators: • fixation duration • saccadic amplitude • saccadic peak velocity Morae screen recording software for measuring performance times and recording mouse clicks Equipment and data registration
  13. 13. • 20 university students • age 18-28 (M = 21,2) • 19 female, 1 male • all were experienced web, smartphone and tablet users • experiment was conducted in November 2014, so flat design was already familiar to all participants Subjects
  14. 14. Results
  15. 15. • no statistically significant difference in search time • higher cognitive load in case of flat design:  increase in fixation duration (p < 0,001)  decrease in saccadic amplitude (p < 0,001)  decrease in saccadic peak velocity (p < 0,001) Text search vs
  16. 16. • search time for flat icons was almost two times longer than search for realistic icons (p < 0,001) • higher cognitive load in case of flat icons Icon search vs 0 5 10 15 20 Flat Realistic
  17. 17. • performance time per screen area was higher for flat webpages (p = 0,002) • more errors in case of flat design (p < 0,001): Webpages: clickable objects search 1/2 vs Misses False alarms Traditional Flat 26% 36% 17% 28%
  18. 18. Conclusions
  19. 19. • Our experiment showed that flat design means higher cognitive load, longer performance times and more errors • Flat design approach should be reconsidered in favor of the design principles developed over decades of research and practice of HCI and usability engineering • Of course, this is from usability, not aesthetics point of view Conclusions
  20. 20. Thank you! Contact: ivan@interux.com

×