Ikonograafia. Hea või halb? Nagu alati, sõltub see

Ikoone on igal pool. Laadige Internetist ️ alla üks tuhandetest tasuta vektorikoonide komplektidest ja hakake hamburgerite, kebabide ja suurendusklaaside kujulisi piksleid viskama üle oma tahvlite ja olete ka ise oma kujunduse loonud. Kuid kas olete mõelnud, millal ikooni kasutada ja millal mitte? Millal seda ikooni kasutada?

See tükk jagab SEEK UX-i meeskonna musitseerimist ja uurimistööd ikonograafia osas, mis loodetavasti muudab teid teadlikumaks UX-i keerukusest nende väikeste 8-bitiste kunstiteoste taga.

Ikoonid staatiliste elementidena

Staatilised ikoonid on need, mida kasutatakse dekoratiivsete elementidena diskreetse teabe edastamiseks või tee leidmisel. Nagu kõik, võivad nad olla nii head kui ka halvad.

Ikoonid on head

Hästi kavandatud ja hõlpsasti äratuntavad ikoonid võimaldavad kiirelt edastada teavet, mida kasutaja võib otsida - näiteks skannida lehte otsingutulemite lehel hotellides, kus on WiFi, või kui palju majutusasutuses on magamistube. Me näeme seda juurdepääsetavate parklate sümbolites, vannitubade siltide ja universaalse mürgi sümbolina.

Realestate.com.au ikoonid kinnisvarainformatsiooni magamistubade, vannitubade ja autopindade arvu kohta

Ikoonid säästavad ruumi ja vähendavad kognitiivset koormust, eemaldades vajaduse sama teavet uuesti lugeda iga kirje korral, vähendades hõõrdumist.

Ilma ikoonideta REA kujundus suurendab hõõrdumist

Ikoonid võivad liidese väljanägemist parandada, lisades visuaalset atraktiivsust, mis teadaolevalt suurendab toote (tajutavat) UX-i ja toote kasutatavust. Seda nimetatakse esteetilise kasutatavuse efektiks ja selle kohta saate lugeda siit (NN / G).

Kui ikoonid ühendatakse tekstiga, saab see hõlbustada juurdepääsu, pakkudes teabe edastamiseks alternatiivset mehhanismi - visuaalse vihjega teksti -, mis on kasulik kognitiivsete probleemidega inimestele, vaegnägijatele, kes ei näe ikooni õigesti jne.

NAB-i vestluse ikoon on selge

Ikoonid võivad aidata ka navigeerimisel inimestele, kes räägivad (või loevad) liidese keelt muu kui primaarse keelena (või ei räägi seda üldse). Võimalik, et ma ei suuda seda liidese teksti lugeda, kuid ikoonid annavad mulle mõista, kuidas ringi liikuda või leida seda, mida otsin. See kehtib ka reaalses maailmas ja seetõttu on meil standardiseeritud vannitubade, lennujaamade, liftide jms ikoonid.

Vaatamata oma vaesele katalaanlasele suutsin ma tänu ikoonidele Barcelonas edukalt riideid pesta

Ikoonid on halvad

Halvasti kujundatud ikoonid võivad tekitada segadust, kui me ei tea, mida nad üritavad meile näidata, eriti kui neile pole lisatud teksti ega tööriista näpunäiteid.

Ilma linateoseta kujutab lill spaa- ja tervisekeskust?

Ikoonide jaoks mõeldud ikoonid pakuvad vähe väärtust ja lisavad liidesele müra.

Vasakpoolses kujunduses ei lisa ikoonid mingit väärtust, seega eemaldasime need ja vähendasime müra

Alt-tekstita ikoonid on ekraanilugeja kasutajatele segane. Eriti kui see loeb loendi „Salvesta töö” asemel lihtsalt midagi sellist nagu „Tärn”. Tekstisildid aitavad seda segadust vähendada ka nägevate kasutajate jaoks.

Ikoonid on subjektiivsed. Sama ikoon võib tähendada erinevatel veebisaitidel erinevaid asju (nt tärn „säästmiseks“ ja tärn „reitingu jaoks“). Sama ikoon võib tähendada erinevaid asju erinevates kontekstides (nt nool jagamiseks, vastamiseks, edastamiseks, järgmiseks). Ikoonid võivad olla kirjeldamatud.

Mida tähendavad kõik erinevad pesuikoonid? Allikas

Ikoonide eesmärk võib olla segane

Kas see on staatiline ikoon või interaktiivne element? Mõnikord on ikoonid klõpsatavad ja teostavad toimingu, mis võib olla eriti segane, kui klõpsatavad elemendid asuvad otse mitte klõpsatavate elementide kõrval ja lameda kujundusega.

Tärn on paksem, nii et ma tean, et sellel saab klõpsata - aga kas keskmine kasutaja? See on eraldatud muudest toiminguteta ikoonidest - kas see tähendab keskmise kasutaja klõpsamist?

Peame tagama, et on ilmne, et sellel elemendil on klõpsamine, mida me nimetame soodustamiseks - eriti kui see on lihtsalt ikoon, millel pole teksti.

Ikoonid kui interaktiivsed elemendid

Kas nägite üksust, mille soovite rakendusest või veebisaidilt uuesti hõlpsalt leida? Vajutage lihtsalt käepärasele igavale salvestamise ikoonile! Mis täpselt on salvestamise ikoon?

Milline ikoon, millal?

See oli skeuomorfismi ajastul ketta ikoon - kus tarkvara objekt oli esindatud selle reaalaine vastega, antud juhul disketiga ket. Diskett ei saanud kunagi versiooniuuendust, kui liikusime ketastelt CD-dele USB-dele ja pilve, kuid selle tähendus on endiselt teada. Olete ilmselt kuulnud lapse folkloorset lugu, kes ütles, et kui näete 3 1/2-tollist disketi IRL-i, siis öelge: "Vau, keegi 3-D trükkis salvestamise ikooni!"

Näete seda Microsoft Office'i toodetes endiselt täna.

Microsofti salvestamise ikoon

Airbnb-l kinnisvara tühistamiseks klõpsake südamel

Airbnb Salvesta kinnisvara
Ma armastan seda kohta, võib-olla jään siia!

Ehkki ma ei armasta seda kohta, võib-olla on see lihtsalt asi, mille tahan hilisemaks hindamiseks kõrvale jätta, kuna see võib vastata minu kui reisija vajadustele. Airbnb on tõenäoliselt valinud täheikooni, kuna seda on juba reitingute jaoks kasutatud. Võib-olla tahame distantseerida armastuse säästmisest, eriti kui see pole midagi, mida kasutaja naudib (midagi, mis on hädavajalik, mitte lõbus puhkus) ).

Sellised tooted nagu Twitter hägustavad seda rida - mul võib olla sotsiaalne valideerimine (nt Instagram ja Facebook) või võin seda kasutada enda jaoks salvestamiseks, et seda hiljem hankida. Südame mittekasutamine on eriti tõsi, kui see tähendab juba midagi muud - sarnast või reaktsiooni - näiteks Instagramis ja Facebookis, kes on naasnud skeuomorfse kujunduse juurde ja otsustanud järjehoidja kasuks, mis tähistab „päästa“. Leidke oma koht füüsilise objektiga, nagu te tegite raamatus (või tehke oma Kindle'i abil).

Keskmine järjehoidja lugu hilisemaks jaoks

Aga täht? ️ Kui ma midagi päästmiseks tärniga tähistan, kas see tähendab, et see on minu lemmik? Kui kasutaja tuleb tagasi ja näeb, et loendis on üks üksus, on tärn, kas see tähendab, et soovitame seda neile heaks vasteks? Või päästsid nad selle?

Tähistage sõnum saidil Slack

Amazon on neid probleeme kõik koos vältinud, omades lihtsalt nuppu tekstiga „Lisa loendisse”, sans-ikooni.

Amazon - lisage loendisse

Tekstiga ikoonid ja sobiv pakkumine on selge tegevus ja on paremini kasutatavad. See muudab toimingud ka ekraanilugejaid kasutavatele, vähese tunnetusega inimestele jne palju kättesaadavamaks.

Sildid lisavad ikoonidele konteksti

Ikoonide mõistmine

Lisaks sellele, et ikoonitoimingud on segamini ajavad, on väga vähe ikoone, millest saaks üldiselt aru.

SEEK-is viisime läbi uuringu ikonograafia mõistmise kohta.

Esmalt küsisime osalejatelt, millisel ikoonil nad võiksid klõpsata, et hiljem töö kõrvale jätta (vältisime sõna „salvesta“, kuna me ei soovinud neid juhtida). See oli vabas vormis vastus, kus nad said selgitada, millist sümbolit nad ootavad.

Kujutage ette, et ülaltoodud pildil on must ruut peidetud ikooni (sümbolit või pilti) ja see ikoon on see, mida klõpsaksite, et töö hilisemaks ajaks kõrvale jätta. Millist sümbolit või pilti te ootaksite?

Kõige populaarsemad vastused olid:

  1. Tärnikoon (24%)
  2. „Salvesta” üldise vastusena (15%) *
  3. Diskett (11%)
  4. Arhiivikapp (6%)

* Pole selge, mida vastajad pidasid säästmiseks, kuna paljud ei täpsustanud. Mõni kirjutas vastuseid, näiteks „Disketi salvestamise ikoon” või „Salvestamise ikoon, st diskett”, kuid pole selge, kas kõik „salvesta” vastajad seda mõtlesid.

Samuti kasutatakse SEEK-i veebisaidil tähte, nii et on tõenäoline, et see on viltu, kui vastajad vastavad sellele, mida nad teavad, musta ruudu taga.

Esitasime sama küsimuse nagu Twitteri küsitlus, 4 võimalust ja enamus vastas disketile, et salvestage!

Twitteri küsitlus - milline ikoon tähendab salvestamist?

Diskett võib ikkagi olla universaalselt mõistetav, kuid disaineritena ei taha me, et iidne tehnoloogia segaks meie liideseid, seetõttu oleme liikunud tähe või südame juurde. Kas meil on üldse ikooni vaja? Miks mitte lihtsalt lihtsalt nuppu Salvesta?

Järgmisena näitasime osalejatele 4 liidest eraldatud ja siltideta ikooni ning küsisime, milliseid sõnu või fraase või toiminguid nad ikooniga seostavad.

Milliseid sõnu, fraase või toiminguid te selle ikooniga seostate?

Ühtegi ikooni ei mõistetud üldiselt ja nad olid tõlgendamiseks avatud osalejate varasemate kogemuste ja tehnilise kokkuhoiu põhjal. See näitab, et sildi hoidmine ikoonide kõrval suurendab kasutatavust ja kasutusmugavust. Samuti järgib see juurdepääsetavuse juhiseid, kus me ei peaks tegevuse kirjeldamisel tuginema ainult visuaalsetele vihjetele - kontekst + visuaalsed näpunäited = kasutatavad

Vastajad kajastasid seda meelsust oma vastustes tekstis:

"Enamik veebis leitavaid asju ajab mind segadusse, miks ei saa iga nägemine sama asja tegemiseks kasutada samu kujundeid?"
"Ikoonid võivad pisut segadusse ajada, kuna nad on kasutaja ja olukorra suhtes, milles neid kasutatakse, üsna subjektiivsed"
"Mulle meeldib hoida asju lihtsana - töö otsimine on piisavalt stressirohke, ilma et mul oleks protsessis navigeerimiseks keerulist saiti"

Järjehoidjaikoon oli osalejate jaoks kõige tõenäolisem, kui nad väitsid, et nad ei tea, mida see tegi, kuigi paljud mõistsid, et see jätab selle töö jaoks hilisemaks. Mõni arvas, et see tähendab, et töö / ettevõte oli neile auhinnaline või hea kokkulangevus. Üldiselt tõlgendati seda järgmiselt:

  • Järjehoidja (38%)
  • Ei tea / pole kindel (11%)
  • Kokkuhoid (11%)
  • Lipp (9%)

Südameikooni seostati armastuse ja sotsiaalmeedia postituste äratundmisega (eelteadmised Instagramist või Twitterist). SEEK-iga tuttavad vastajad vastasid, et seda kasutati salvestatud otsingute jaoks. Kuid üldiselt ei seostanud vastajad seda nii tugevalt millegi hilisemaks kõrvale panemisega. Seda seostati rohkem positiivsete emotsioonidega (armastus, nagu õnn). Südameikooni all mõisteti järgmist:

  • Armastus (54%)
  • Meeldib (35%)
  • Lemmik (21%)

Mõnele ei meeldinud südame kasutamise mõte:

“Armastus, ei kehti töökuulutustes”

Täht mõisteti tähistamaks midagi hilisemaks või sama oluliseks. Ent arvati, et see on ka näitaja, et töö sobis neile hästi, või ettevõtte hinnang. Tähte nähti järgmiselt:

  • Lemmik (37%)
  • Kokkuhoid (20%)
  • Tärn (17%)
  • Tähtis (10%)
  • Hinnang (8%)

Jagamise noolt tõlgendati valdavalt valesti, et tähendada „edasi“ järgmisele, kuid seda näidati kontekstist välja:

  • Liikuge edasi (või edastage e-kiri?), Järgmisele või järgmisele lehele (81%)
  • E-kirjale vastamine (10%)
  • Jaga (8%)

Eelteadmised mõjutavad mõistmist

Nagu kõik, mida me kujundame, peame kontrollima oma sihtrühma kasutajatega oma ikoonide mõistmist. Ühe inimese jaoks mõeldud kolmnurk võib olla lihtsalt kolmnurk, kuid füüsiku või matemaatiku jaoks võib olla selge, et see tähendab muutust.

Ma võitsin korra ühe sõnaraamatu mängu, mille allpool toodud kritseldus oli 3 sekundiga. Mida see tähendab? Teile ilmselt mitte midagi. Kuid mulle ja minu sõnaraamatupartnerile on see minu puudel Penny. Meie võistlus ei olnud rahul.

Kas see tähendab teie jaoks Penni?

Kontekst on oluline

Teise suunaga noole kõrval olev nool tähendab tõenäoliselt järgmist, samas kui südame kõrval olev nool võib olla selge, et see tähendab „jaga”. Testi ikoone kontekstis.

Kui teile meeldib, siis peaksite sellele sildi panema

Kui soovite, et enamik kasutajaid saaks aru, mida ikoonid teevad, kasutage silte. Kasutajate testimine leidis, et kasutajad suutsid õigesti ennustada, mis juhtub, kui nad koputavad ikooni, mille silt on 88% ajast. Siltideta ikoonide puhul langes see arv 60% -ni. Eritellimata sildistamata ikoonide puhul langes see veelgi - ainult 34% -ni ajast. Nende uurimistöö kohta saate lugeda siit.

TL; DR- kas ma peaksin kasutama ikoone? Millised ikoonid?

See sõltub.

Küsige endalt, kas siin kasutatakse ikoone:

  • Aidake kasutajal leida seda, mida nad otsivad?
  • Vähendada kognitiivset koormust?
  • Kas lisada toote visuaalne välimus?

Kas valitud ikoon:

  • Kas antud kontekstis kasutajatele mõistetav? Kas selle mõistmist on sihtrühmaga katsetatud?
  • Kas see on selgelt klõpsatav?
  • Kas kasutatavuse ja arusaadavuse suurendamiseks on kaasas tekst?

Kui vastasite eelnevale jaatavalt, võite tõenäoliselt kasutada ikooni.

Ärge kasutage ikoone, kui need:

  • Ilmuvad väärtuseta;
  • Segadusega liides;
  • On tõlgendamiseks avatud.