Graphic designand UI efficiency

Andrei Balkanskii, Artem Smolin PhD, Yury SolonitsynITMO University, Saint Petersburg

UXCampEurope 16, Berlin2016

AuthorsITMO University, Saint Petersburg:• Andrei Balkanskii — senior teacher, Chair of Graphic Technologies;• Artem Smolin, PhD — Head of the Chair of Graphic Technologies;• Yury Solonitsyn — practicing interaction designer with background in

graphic design, technical writing and web development … a master student of the Chair of Graphic Technologies ;)

Problem to be investigated• Now “Flat UI” style is popular;• But some well-known industry experts (e.g. Nielsen Norman) say,

that such graphic decoration reduces UI efficiency [1, 2];• UI efficiency is critical. Especially in enterprise systems, financial

solutions, medicine and transportation [3, 4].

Some examples

UI fragment, decorated in “traditional” style(“Heroes of Might and Magic III – HD Edition”, 3DO/UbiSoft, 1999)

UI fragment, “Flat UI” style(Windows Phone Maps, HERE/Microsoft corp., 2016)

Flat UI — More examples

Piotr Kubicki, Szczecin Airport | redesign concept,https://www.behance.net/gallery/37478667/Szczecin-Airport-redesign-concept

David Perger, FADE APP UI KIT | FREEBIE, https://www.behance.net/gallery/36367535/FADE-APP-UI-KIT-FREEBIE-

Roma Smirnov, Yandex.Electrichkihttps://www.behance.net/gallery/36466693/jandekselektrichki

Why should we care about?• UI efficiency depends on both UI logic (structure) & UI graphics;• UI efficiency = Time;• Time = Money.

$$$ :)

Just one example … of many

Tickets terminal, S-Bahn station, Schonefeld Airport … more than 20 minutes in line.

Pressing all and anything on the screen, trying to figure out, how to deal with it.

Boring academic stuff — Definitions• Cognitive load — the phenomenon, causing progressive growth of

mental efforts spent by user to operate the UI [3];• NASA HCI research group consider the cognitive load as one of the

serious threats for the adequate human-to-machine interaction and for the mission success [3];• Information load — amount of data or factors user is to process to

complete the given task;• The combined effect of cognitive and informational load leads to

decreased work efficiency [1, 2, 3, 4].

Boring academic stuff — Analogues• Publications: Burmistrov et al [5], Fabio et al [6];• Burmistrov et al:

• detailed review of the research method and results;• but the test tasks have an artificial nature.

• Fabio et al:• detailed methodology, information load measured;• but results are mostly fundamental.

• Both projects — incorporated limited amount of respondents(about 20 persons each, all university students).

Analogues — ExamplesBurmistrov et al [5]: Fabio et al [6]:

Our approach to the experiment• Involve as much users as possible via special experimental web-site;• Ensure maximum compatibility of this web site;• Use social networks to spread a link to the site;• Metrics of the HCI effectiveness:

• type I () errors — amount of “inactive objects” considered to be an active element … or just “tries”;• type II () errors — amount of “active element not found” errors;• task completion time.

Results — Respondents

Russia

Ukraine

Germany

Belaru

s

Austria

Estonia

Israe

lUSA

Australi

a

Bulgaria

Swed

en

Thail

and

The Neth

erlan

ds

Afghanist

an

Azerbaij

an

Czech Rep

ublic

Finlan

dFra

nce

Honduras

Hungary

Irelan

dJap

an

Lithuan

ia

Montenegro

Switz

erlan

d UK0

50

100

150

200

250

12-14 15-18 18-25 25-35 35-45 45-65 More than 65

020406080

100120140160180200

Total respondents: 571;Complete records: 356.

Survey: 20 May — 19 June 2016.

Please, notice:These are preliminary results, based on raw data.Our project will continue with data processing and interpretation.If you are running an academic project, we can share the raw data with you. We are also interested in exchanging results with teams, running similar researches.Contact address: Yury Solonitsyn, solonitsyn.yury@adesignlab.ru

Results — “Select a button” task

0

50

100

150

200

250

300

0123456789

10

Style:

Button selected,times:

Average time, s:

Results — “Find a given button” task

00.05

0.10.15

0.20.25

0.30.35

0.4

0

1

2

3

4

5

6

Average errors:

Average time, s:

Style:

“Buttons vs distractions” & “ Digits” tasks

Results — “Buttons vs distractions”, “Digits”

0

0.1

0.2

0.3

0.4

0.5

0.6

0

1

2

3

4

5

6

7

3x3 5x5 7x7

Average errors:

Matrix size:

Average time, s:

Respondents:Buttons:• 3x3: 397 (128/140/129);• 5x5: 389 (119/144/126);• 7x7: 382 (127/130/125);

Digits:• 3x3: 380;• 5x5: 378;• 7x7: 373.

Style:

Style:

Results — “Buttons vs dictractions2” task

00.5

11.5

22.5

33.5

0123456789

10

Average errors:

Average time, s:

Respondents: 118 134 117

Thank you!Any questions?

Andrei Balkanskii abalkanskij@yandex.ruArtem Smolin, PhD artikus@inbox.ruYury Solonitsynsolonitsyn.yury@adesignlab.ru

ITMO UniversitySaint Petersburg, Russia

References1. J. Nielsen. Windows 8 – Disappointing Usability for Both Novice

and Power Users. Nielsen Norman Group. Published on: 19 November 2012. Accessed on: 05 December 2015. Web: http://www.nngroup.com/articles/windows-8-disappointing-usability/.

2. K. Whitenton. Minimize Cognitive Load to Maximize Usability. Nielsen Norman Group. Published on: 22 December 2013. Accessed on: 17 November 2015. Web: http://www.nngroup.com/articles/minimize-cognitive-load/.

3. K. Holden, N. Ezer, G. Vos. Risk of Inadequate Human-Computer Interaction. NASA Johnson Space Center. Published on: 26 December 2013. Accessed on: 16 November 2015.Web: https://humanresearchwiki.jsc.nasa.gov/index.php?title=Risk_of_Inadequate_Human-Computer_Interaction.

4. The human-machine interface as an emerging risk. European Agency for Safety and Health at Work. Published in ~2006. Accessed on: 16 November 2015. Web: https://osha.europa.eu/en/tools-and-publications/publications/literature_reviews/HMI_emerging_risk.

5. I. Burmistrov, T. Zlokazova, A. Izmalkova, A. Leonova (Laboratory of Work Psychology, Lomonosov Moscow State University, Moscow, Russia; InterUX Usability Engineering Studio, Tallinn, Estonia). “Flat Design vs Traditional Design. Comparative Experimental Study”, IFIP International Federation for Information Processing 2015; J. Abascal et al. (Eds.): INTERACT 2015, Part II, LNCS 9297, pp. 106-114, 2015.

6. A. Errante, R. A. Fabio, C. Incorpora, N. Mohammadhasni, T. Caprì, C. Carrozza, A. Falzone. :The Influence of Cognitive Load and Amount of Stimuli on Entropy through Eye tracking measures”, EuroAsian Joint Conference on Cognitive Science. September 25-27, 2015. Torino, Italy.