Ikonografija. Dobro ali slabo? Kot vedno je odvisno

Ikone so povsod. Prenesite enega od tisoč brezplačnih kompletov ikon za vektorje z interneta ™ ️ in začnite metati piksle v obliki hamburgerjev, kebabov in povečevalnih stekel po svojih umetniških ploščah in si sami oblikovali. Ali ste nehali razmišljati, kdaj uporabiti ikono in kdaj ne uporabljati? Kdaj uporabiti katero ikono?

Ta del deli nekaj razmišljanja in nekaj raziskav ekipe SEEK UX v zvezi z ikonografijo, ki upa, da boste bolj seznanjeni z UX-ovimi zapletenostmi teh majhnih 8-bitnih umetnin.

Ikone kot statični elementi

Statične ikone so tiste, ki se uporabljajo kot dekorativni elementi za sporočanje diskretnih informacij ali za pomoč pri iskanju. Kot vse je lahko tudi dobro in slabo.

Ikone so dobre

Dobro zasnovane in lahko prepoznavne ikone lahko hitro sporočijo podatke, za katere uporabnik morda išče, na primer skeniranje strani z rezultati iskanja za hotele, ki imajo WiFi, ali število spalnic v nepremičnini. To vidimo v simboliki za dostopna parkirišča, znake za kopalnice in univerzalni simbol za strup.

Realestate.com.au ikone za število spalnic, kopalnic in avtomobilskih prostorov za seznam nepremičnin

Ikone prihranijo prostor in zmanjšajo kognitivno obremenitev, tako da odstranijo potrebo po ponovnem branju istega podatka ob vsakem uvrstitvi na seznam, kar zmanjša trenje.

Zasnova REA brez ikon poveča trenje

Ikone lahko izboljšajo videz vmesnika in dodajo vizualno privlačnost, za katero je znano, da izboljšuje (zaznan) UX in uporabnost izdelka. To je znano kot učinek estetske uporabnosti in o njem lahko preberete tukaj (NN / G).

Ko so ikone združene z besedilom, lahko izboljša dostopnost z alternativnim mehanizmom za prenašanje informacij - besedilo z vizualnim namigom - kar je dobro za posameznike s kognitivnimi težavami, slabovidnost, ki ikone ne vidijo pravilno itd.

Ikona klepeta NAB je jasna

Ikone lahko pomagajo tudi pri navigaciji za ljudi, ki govorijo (ali berejo) jezik vmesnika kot neosnovni jezik (ali sploh ne). Besedila v vmesniku morda ne bom mogel prebrati, vendar lahko ikone razumejo, kako se premikati po njem ali kako najti tisto, kar iščem. To velja tudi v resničnem svetu in zato imamo standardizirane ikone za kopalnice, letališča, dvigala itd.

Kljub slabemu katalonskemu mojemu uspehu sem lahko opral oblačila v Barceloni zahvaljujoč ikonam

Ikone so slabe

Slabo oblikovane ikone lahko dodajo zmedo, kadar ne vemo, kaj nam skušajo predstavljati, še posebej, če jih ne spremlja besedilo ali namig orodja.

Ali cvet brez besedila predstavlja „spa in wellness center“?

Ikone zaradi ikon zagotavljajo malo vrednosti in dodajajo hrup vmesniku.

V levi zasnovi ikone ne dodajo nobene vrednosti, zato smo jih odstranili in zmanjšali hrup

Ikone brez alt-besedila so za uporabnike bralnikov zaslona zmede. Še posebej, če samo prebere nekaj, kot je "Zvezda", namesto "Shrani Job". Besedilne nalepke pomagajo zmanjšati to zmedo tudi za vidne uporabnike.

Ikone so subjektivne. Ista ikona lahko pomeni različne stvari na različnih spletnih mestih (npr. Zvezda za »varčevanje« in zvezdica za »oceno«). Ista ikona lahko pomeni različne stvari v različnih kontekstih (npr. Puščica za skupno rabo, odgovor, posredovanje naprej). Ikone so lahko nerazločljive.

Kaj sploh pomenijo različne ikone perila? Vir

Namen ikon je lahko zmeden

Je to statična ikona ali interaktivni element? Včasih se ikone lahko kliknejo in izvedejo dejanje, kar je lahko še posebej zmedeno, če so elementi, ki jih je mogoče klikniti, neposredno poleg elementov, ki jih ni mogoče klikniti, in v ploskvi.

Zvezda je debelejša, zato vem, da jo je mogoče klikniti - a ali povprečen uporabnik? Ločena je od drugih ikon, ki niso v akciji - ali to pomeni, da jih je povprečen uporabnik mogoče klikniti?

Poskrbeti moramo, da je očitno, da je ta element mogoče klikniti, kar imenujemo privoščitev, še posebej, če gre le za ikono brez besedila.

Ikone kot interaktivni elementi

Si že videl izdelek, ki ga želite preprosto najti v aplikaciji ali spletnem mestu? Samo pritisnite priročno ikono "shrani"! Toda kaj točno je ikona za shranjevanje?

Katera ikona, kdaj?

Včasih je bila ikona diska v dobi skeuomorfizma - kjer je bil predmet programske opreme predstavljen s svojim dejanskim svetom, v tem primeru disketa . Disketa ni nikoli dobila nadgradnje, saj smo z diskov prehajali na CD-je na USB-je in v oblak, vendar je njen pomen še znan. Verjetno ste že slišali folklorno zgodbo otroka, ki je rekel: "Vau, nekdo je 3-D natisnil ikono za varčevanje!"

To boste še vedno videli v izdelkih Microsoft Office.

Ikona Microsoft Save

Če želite odložiti nepremičnino na Airbnb, kliknite srce

Airbnb Shrani nepremičnino
Všeč mi je to mesto, morda bom ostal tukaj!

Čeprav morda ne maram tega kraja, je morda to nekaj, kar želim dati na stran za nadaljnje vrednotenje, saj morda izpolnjuje moje potrebe popotnika. Airbnb je verjetno izbral ikono zvezd, saj se že uporablja za ocenjevanje, in morda želimo 'ljubezen' oddaljiti od varčevanja, zlasti v primerih, ko uporabnik ne bo užival v početju (nekaj, kar je nujno, ne zabavne počitnice ).

Izdelki, kot je Twitter, zameglijo to vrstico - srce bi mi lahko prizadel kot vrednotenje družbe (na primer Instagram in Facebook) ali pa bi ga lahko uporabil, da bi ga shranil zase, da bi ga pozneje dobil. Če ne želite uporabljati srca, še posebej velja, če to že pomeni nekaj drugega - podobno ali reakcijo - na primer na Instagramu in Facebooku, ki so se vrnili k skeuomorfnemu oblikovanju in se odločili za zaznamek, da bo predstavljal "shrani". Poiščite svoje mesto s fizičnim predmetom, kot ste ga naredili v knjigi (ali na svojem Kindleu).

Srednji zaznamek zgodba za pozneje

Kaj pa zvezda? ️ Če si privoščim, da shranim nekaj, ali to pomeni, da mi je to najljubše? Če se uporabnik vrne in zagleda en element v seznamu z zvezdico, ali to pomeni, da ga priporočamo zanje kot dobro ujemanje? Ali pa so ga rešili?

Označi sporočilo na Slack

Amazon se je vsem tem težavam izognil tako, da je preprosto pritisnil gumb s besedo "Dodaj na seznam", ikono sans.

Amazon - Dodaj na seznam

Ikone z besedilom in ustreznim privoščenjem imajo očitno delovanje in so bolj uporabne. Dejanja so tudi veliko bolj dostopna tistim, ki uporabljajo bralnike zaslonov, ljudem z nizko kognicijo itd.

Oznake dodajo kontekst ikonam

Razumevanje ikon

Poleg tega, da so ikone zmede, obstaja zelo malo ikon, ki so splošno razumljive.

V SEEK-u smo izvedli del raziskav o razumevanju ikonografije.

Udeleženke smo najprej vprašali, kakšno ikono bodo pričakovali, da kliknejo, da bi opravilo odložili za pozneje (izognili smo se besedi "shrani", saj jih nismo želeli pripraviti na prvo mesto). To je bil odgovor v prostem besedilu, kjer so lahko pojasnili, kakšen simbol bodo pričakovali.

Predstavljajte si, da je na zgornji sliki črni kvadrat skrit s ikono (simbol ali sliko) in ta ikona je tisto, kar bi kliknili, da bi opravilo odložili pozneje. Kakšen simbol ali sliko bi pričakovali?

Najbolj priljubljen odziv je bil:

  1. Zvezdna ikona (24%)
  2. »Shrani« kot splošen odgovor (15%) *
  3. Disketa (11%)
  4. Datoteka / vložek (6%)

* Ni jasno, kaj so anketiranci mislili pod "varčevanje", saj mnogi niso pojasnili. Nekateri so zapisali odgovore, kot sta "ikona za shranjevanje diskete" ali "ikona shranjevanja, tj. Disketa", vendar ni jasno, ali so to mislili vsi anketiranci.

Na spletni strani SEEK je uporabljena tudi zvezda, zato je možno, da so to nagnjeni k anketirancem, ki odgovarjajo, kaj vedo, da stoji za črnim kvadratom.

Zastavili smo isto vprašanje kot anketa na Twitterju s štirimi možnostmi, večina disket pa je odgovorila, prihranite!

Anketa na Twitterju - katera ikona pomeni varčevanje?

Disketni disk je še vedno mogoče razumeti na splošno, vendar kot oblikovalci ne želimo, da bi starodavna tehnologija prekrivala naše vmesnike, zato smo se preselili v zvezdo ali srce. Ali sploh potrebujemo ikono? Zakaj ne samo preprosto gumb 'Shrani'?

Nato smo udeležencem prikazali 4 ikone, izolirane iz vmesnika in brez nalepk, ter vprašali, katere besede ali stavke ali dejanja povezujejo z ikono.

Katere besede, stavke ali dejanja povezujete s to ikono?

Nobena ikona ni bila splošno razumljena in je bila odprta za interpretacijo na podlagi predhodnih izkušenj in tehnološke spretnosti udeležencev. To kaže, da bo ohranitev nalepke poleg ikon povečala uporabnost in enostavnost uporabe. Prav tako sledi smernicam o dostopnosti, kjer se ne smemo zanašati le na vizualne namige za opisovanje dejanja - kontekst + vizualni nakazi = uporabna

Anketiranci so to besedilo povzeli v svojih besedilnih odgovorih:

"Večina stvari na spletu me zmede, zakaj ne more vsak vidik sic uporabljati iste oblike, da bi storil isto stvar?"
"Ikone so lahko nekoliko zmedene, saj so za subjekta precej subjektivne in glede na situacijo, v kateri se uporabljajo."
"Všeč mi je, da so stvari preproste - iskanje dela je dovolj stresno, ne da bi imeli zapleteno spletno mesto za krmarjenje v tem procesu"

Ikona zaznamkov je najbolj verjetno, da so udeleženci izjavili, da ne vedo, kaj je storilo, vendar so mnogi razumeli, da bo to delo odložilo za pozneje. Nekateri so mislili, da to pomeni, da je delo / podjetje zanje nagrajeno ali dobro tekmo. Na splošno je to razlagalo tako, da pomeni:

  • Zaznamek (38%)
  • Ne vem / nisem prepričan (11%)
  • Prihranite (11%)
  • Oznaka (9%)

Ikona Srca je bila povezana z ljubeznijo in prepoznavanjem objav v družbenih medijih (predhodno znanje iz Instagrama ali Twitterja). Anketiranci, ki so bili seznanjeni s SEEK, so odgovorili, da je bila uporabljena za shranjene iskalne poizvedbe. Vendar na splošno anketiranci tega niso povezali tako močno s tem, da bi nekaj odložili za kasneje. Povezana je bila bolj s pozitivnimi čustvi (ljubezen, kot, sreča). Ikona srca je bilo mišljeno, da pomeni:

  • Ljubezen (54%)
  • Všeč mi je (35%)
  • Najljubši (21%)

Nekaterim ni bila všeč ideja, kako se srce uporablja:

"Ljubezen, ne velja za oglaševanje na delovnem mestu"

Zvezda je bila razumljena, da nekaj označi za kasneje ali kot pomembno. Vendar pa je šlo tudi za pokazatelj, da je delo zanje dobro ujemanje ali pa ocena podjetja. Na zvezdo je bilo videti:

  • Najljubši (37%)
  • Prihranite (20%)
  • Zvezdice (17%)
  • Pomembno (10%)
  • Ocena (8%)

Puščica za deleže je bila napačno razlagana tako, da je pomenila "naprej" na "naslednji", vendar je bila prikazana zunaj konteksta:

  • Pojdite naprej (ali posredujete e-poštno sporočilo?), Do naslednje strani ali do naslednje strani (81%)
  • Odgovor na e-sporočilo (10%)
  • Delež (8%)

Predznanje vpliva na razumevanje

Kot vse, kar oblikujemo, moramo tudi pri ciljnih uporabnikih preizkušati razumevanje svojih ikon. Trikotnik za eno osebo je lahko samo trikotnik, toda fiziku ali matematiku je lahko jasno, da pomeni "sprememba".

Enkrat sem v 3 sekundah dobil igro Pictionary s spodnjo črko. Kaj to pomeni? Tebi, verjetno nič. Ampak meni in mojemu partnerju Pictionary, to je moja pudlica Penny. Naša konkurenca ni bila vesela.

Ali to pomeni za vas Penny?

Kontekst zadeve

Puščica poleg druge puščice, ki je obrnjena proti drugemu, verjetno pomeni »naslednja«, če pa bi bila zraven srca, je lahko jasno, da pomeni »deliti«. Preizkusite ikone v kontekstu.

Če vam je všeč, potem nanjo postavite etiketo

Če želite, da večina uporabnikov razume, kaj počnejo ikone, uporabite nalepke. Uporabniško testiranje je našlo uporabnike, da so lahko pravilno predvideli, kaj se bo zgodilo, ko bodo v 88% časa dotaknili ikono z nalepko. Za ikone brez nalepk je ta številka padla na 60%. Pri sprejetih neoznačenih ikonah se je to znižalo le na 34% časa. Več o njihovih raziskavah si preberite tukaj.

TL; DR- Ali naj uporabim ikone? Katere ikone?

Odvisno.

Vprašajte se, ali tukaj uporabljate ikone:

  • Pomagajte uporabniku pri iskanju tega, kar išče?
  • Zmanjšajte kognitivno obremenitev?
  • Dodaj vizualni privlačnosti izdelka?

Ali je izbrana ikona:

  • Uporabniki, v danem kontekstu razumljivi? Ali je bil s ciljno skupino preizkušen za razumevanje?
  • Je mogoče klikniti?
  • Vas spremlja besedilo za večjo uporabnost in razumljivost?

Če ste na zgornje odgovorili pritrdilno, lahko verjetno uporabite ikono.

Ne uporabljajte ikon, ko:

  • Na videz ne zagotavljajo nobene vrednosti;
  • Krči vmesnik;
  • So odprte za razlago.