V eni izmed Nielsenovih študij iz leta 2016 so v testiranjih ugotovili, da uporabniki pri uporabi spletnih mest 37% hitreje najdejo rešitev, če tekst spremlja tudi ikona. Primerjali so obarvan tekst in tekst z ikono in ugotovili, da je prepoznavnost večja, če vsebuje tudi ikono.
Harley, 2016 (https://www.nngroup.com/articles/visual-indicators-differentiators/).

Vizualni identifikatorji oz. tako imenovani ‘markerji’ kot so ikone, pomagajo uporabnikom hitreje najti rešitev, saj vsebujejo razlike, ki jih je mogoče lažje ločiti od preostalih, podobnih objektov.

Problem

Pred časom pa sem se med delom soočila z dilemo glede ikon oz. vizualnih identifikatorjev za razvrščanje podatkov. Ugotovila sem, da vsi uporabniki njihovega pomena ne interpretirajo enako in imajo v bistvu pri prepoznavanju teh ikon pogoste težave.

I’ve done usability tests on this. There does not appear to be a consistent interpretation among users on what the arrows mean. I seem to recall that even each user was not consistent, thinking the arrow down meant ascending in one case and descending in another.
(https://stackoverflow.com/questions/338166/which-direction-should-the-arrows-point-in-a-sorted-table)

Razvrščanje podatkov v seznamih in tabelah

Klasični način razvrščanja oz. sortiranja podatkov, ki ga uporabljamo pri razvoju aplikacij in spletnih mest, zajema razvrščanje po sistemu naraščajoče/padajoče (angl. ascending/descending).

Pri čemer naraščajoče pomeni increasing in size or importance.
In padajoče pomeni moving or sloping downwards.

Posledično je torej logično sklepati, da bo naraščajoče pomenilo pot navzgor, padajoče pa pot navzdol, kar lahko nazorno ponazorimo s smernimi puščicami:

↑ naraščajoče          ↓ padajoče

Pri številkah torej naraščajoče pomeni razvrščanje od 0-9 (od najmanjše proti največji), pri črkovnem razvrščanju pa od A-Ž (alfabetično). Pri podatkih, ki vsebujejo številko in črke, pa se te pri naraščajočem sortiranju razvrstijo najprej po številki in šele nato po črki.

Pri datumih je zadeva malce bolj kompleksna, saj višja letnica pomeni tisto bližje sedanjosti in se torej vrednosti sortirajo od najnovejše proti najstarejši; najprej se oziramo na leto, nato mesec in nazadnje dan.

Is ascending up or down? An arrow pointing up usually means larger or getting larger, so that should be used for Ascending order. An arrow pointing downwards usually means something is smaller or getting smaller and it should be used for Descending order.(https://stackoverflow.com/questions/338166/which-direction-should-the-arrows-point-in-a-sorted-table)

Za vizualno ponazoritev smeri sortiranja pogosto uporabljamo ikone puščic. Po spletu pa se pojavlja seveda še mnogo drugih variacij ikon.

Primer ikon za razvrščanje

Vzamimo za primer ikono naraščajoče, ki poleg puščice vsebuje tudi niz različno širokih črtic, nanizanih vertikalno.

Na materialdesignicons.com postavijo pri obeh ikonah (naraščajoče in padajoče) puščico desno od črtic. Pri obeh sortiranjih obdržijo smer črtic in le obrnejo smer puščice. Kar je zanimivo, je to, da pri ikoni za naraščajoče uporabijo puščico navzdol, pri ikoni za padajoče pa navzgor. Torej nasprotno od tega, kar smo ugotovili prej.

Na fontawesome.com ponudijo dve rešitvi:
1. V prvi rešitvi uporabijo identično rešitev kot je materialdesignicons.com.
2. Pri drugi rešitvi za ikono naraščajoče uporabijo puščico navzgor in za padajoče navzdol. Pri tej rešitvi je seveda nujno obrniti smer naraščanja dolžine črtic.

Rešitev

Glede na zgornje je seveda logično sklepati, da je najboljša rešitev zadnja – torej tista, ki za naraščajoče uporabi puščico navzgor in za padajoče puščico navzdol.

Pa je to res najboljša rešitev?

V tej točki pridemo do konflikta, saj je smer branja vedno od leve proti desni in od zgoraj navzdol. Izbrana rešitev pa nas sili k temu, da beremo oz. prepoznavamo ikono iz smeri od spodaj navzgor.

For me the down pointing arrow/triangle should represent the way I usually read things (from top to bottom – from a to z) and the up pointing arrow is backwards from the way I read things (from z to a).(https://stackoverflow.com/questions/338166/which-direction-should-the-arrows-point-in-a-sorted-table)

Katera rešitev je torej ustreznejša?

Bolje se je vprašati, katera kombinacija rešitev je najustreznejša.

Prvi korak do rešitve bi seveda bilo preverjanje, kako posamezne rešitve prepoznavajo uporabniki. V ta namen se lahko izdela prototip več različnih rešitev in testira, kakšna je prepoznavnost ikon pri posameznih ali celo primera varjante po sistemu A/B testiranja različnih rešitev.

1. Najprej bi na uporabnikih naredila hiter test intuitivnosti in sicer tako, da bi jim predložila slike ikon. Sami bi morali povedati, kaj pomeni katera od ikon.

2. V drugem koraku bi izdelala prototipe rešitev na dejanskih primerih in ugotavljala, katere rešitve so tiste, ki vzamejo najmanj časa in napak pri uporabnikih.

Znotraj postopka iskanja rešitve bi uporabila tehniko testiranja uporabnosti, s katero bi ugotovila, kako uporabnik v določenem kontekstu dejansko razume in uporablja ikone sortiranja in jo združila s tehniko ‘think-aloud’, da bi pridobila čim več informacij.

V primeru študije na dejanskem primeru bi želela uporabnika prepričati, da se njegove interakcije s spletno ali mobilno rešitvijo snemajo. Tako bi jih bilo mogoče identificirati in klasificirati za nadalnje raziskave.

Sklep

Najustreznejša je tista rešitev, pri kateri so uporabniki najhitreje ustrezno prepoznali ikono. Vsekakor pa se lahko konfliktu vedno izognemo z uporabo enostavnejših ikon, kot je samo puščica brez drugih grafičnih elementov. Manj je več, pravijo, in pri prepoznavnosti ikon je vsekakor najboljša tista pot, ki je najbolj nedvoumna.