Prepoznavnost ikon sortiranja

3 weeks ago  •  By  •  0 Comments

Pred časom sem se soočila z dilemo glede ikon oz. vizualnih identifikatorjev, ki se uporabljajo za razvrščanje podatkov oz. zadetkov v seznamih in tabelah. Ugotovila sem, da vsi uporabniki ne interpretirajo enako razvrščanja in imajo v bistvu pri prepoznavanju 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.

Zakaj uporaba ikon

V eni izmed Nielsenovih študij iz leta 2016 so v testiranjih ugotovili, da uporabniki v 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.

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 abecedi 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 najstarejše proti najnovejš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.

ascending-descending-icons-primerjava

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.

ascending-descending-icons-primerjava-materialdesignicons

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.

ascending-descending-icons-primerjava-fontawesome

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.

ascending-descending-icons-primerjava-fonawesome-2nd

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.

Testiranje prepoznavnosti ikon

Testiranja bi se lotila v dveh korakih:

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 naredila prototipe rešitev na dejanskih primerih in ugotavljala, katere rešitve so tiste, ki vzamejo najmanj časa in napak pri uporabnikih.

Sklep

Samo tista rešitev, pri kateri so uporabniki najhitreje ustrezno prepoznali ikono, je najustreznejša. 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.

Submit a Comment