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

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

Related Books

Free with a 30 day trial from Scribd

See all

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

    Be the first to comment

    Login to see the comments

  • astuanax

    Sep. 22, 2015
  • DanieleFerrari

    Oct. 9, 2015
  • yaroslavperevalov39

    Oct. 20, 2015
  • ssuser0097e7

    Oct. 21, 2015

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

Views

Total views

4,575

On Slideshare

0

From embeds

0

Number of embeds

1,568

Actions

Downloads

21

Shares

0

Comments

0

Likes

4

×