Iconography. Hyvä vai huono? Kuten aina, se riippuu

Kuvakkeet ovat kaikkialla. Lataa yksi tuhansista ilmaisista vektori-kuvakesarjoista Internetistä ™ ️ ja avaa heittää hampurilaisten, kebabien ja suurennuslasien muotoisia pikseleitä taulujen päälle ja olet saanut itsellesi mallin. Mutta oletteko lopettaneet miettimään milloin käyttää kuvaketta ja milloin ei? Milloin mitä kuvaketta käytetään?

Tämä teos jakaa joitain SEEK UX -tiimin muskerointia ja tutkimuksia ikonografian suhteen, mikä toivottavasti saa sinut paremmin tietoiseksi näiden pienten 8-bittisten teosten takana olevista UX-monimutkaisuuksista.

Kuvakkeet staattisina elementeinä

Staattiset kuvakkeet ovat niitä, joita käytetään koriste-elementteinä, erillisen tiedon välittämiseen tai tien löytämiseen. Kuten kaikki, ne voivat olla sekä hyviä että pahoja.

Kuvakkeet ovat hyviä

Hyvin suunnitellut ja helposti tunnistettavat kuvakkeet voivat nopeasti välittää tietoja, joita käyttäjä voi skannata - esimerkiksi skannata hakutulossivun hotelleille, joissa on langaton internetyhteys, tai kiinteistön makuuhuoneiden lukumäärään. Näemme tämän pääsyä varten tarkoitettujen pysäköintialueiden symboliikassa, kylpyhuoneiden kyltteissä ja myrkkyjen yleismerkissä.

Realestate.com.au -kuvakkeet makuuhuoneiden, kylpyhuoneiden ja autopaikkojen lukumäärää varten kiinteistöluettelossa

Kuvakkeet säästävät tilaa ja vähentävät kognitiivista kuormitusta poistamalla tarve lukea sama tieto uudelleen jokaisesta listasta, mikä vähentää kitkaa.

REA-suunnittelu ilman kuvakkeita lisää kitkaa

Kuvakkeet voivat parantaa käyttöliittymän ulkoasua lisäämällä visuaalista vetovoimaa, jonka tiedetään parantavan (havaittua) UX: ta ja tuotteen käytettävyyttä. Tätä kutsutaan esteettiseksi käytettävyysvaikutukseksi ja voit lukea siitä täältä (NN / G).

Kun kuvakkeet yhdistetään tekstiin, se voi parantaa saavutettavuutta tarjoamalla vaihtoehtoinen mekanismi tiedon välittämiselle - teksti visuaalisella vihjeellä - mikä on hyvä henkilöille, joilla on kognitiivisia ongelmia, heikkonäköisille, jotka eivät näe kuvaketta oikein jne.

NAB: n chat-kuvake on selvä

Kuvakkeet voivat auttaa myös navigoinnissa ihmisille, jotka puhuvat (tai lukevat) käyttöliittymän kieltä muuna kuin ensisijaisena kielenä (tai eivät lainkaan). En ehkä pysty lukemaan tekstiä käyttöliittymässä, mutta kuvakkeet voivat antaa minulle ymmärryksen siitä, kuinka liikkua tai löytää etsimäni. Tämä pätee myös todelliseen maailmaan, ja siksi meillä on vakiokuvakkeet kylpyhuoneille, lentokentille, hisseille jne.

Huonosta katalaanilaistaani huolimatta pystyin pesemään onnistuneesti vaatteeni Barcelonassa kuvakkeiden ansiosta

Kuvakkeet ovat huonoja

Huonosti suunnitellut kuvakkeet voivat lisätä sekaannusta, kun emme tiedä, mitä he yrittävät edustaa meille, varsinkin kun niihin ei ole liitetty tekstiä tai työkaluvihjeitä.

Ilmaiseeko kukka 'kylpylä- ja wellness-keskusta'?

Kuvakkeet kuvakkeiden vuoksi tarjoavat vain vähän arvoa ja lisäävät melua käyttöliittymään.

Vasemmalla olevassa kuvakkeessa kuvakkeet eivät lisää arvoa, joten poistimme ne ja vähensimme melua

Kuvakkeet ilman alt-tekstiä ovat hämmentäviä näytönlukijakäyttäjille. Erityisesti jos se vain lukee jotain "Tähti" sijaan "Tallenna työ". Tekstitarrat auttavat vähentämään hämmennystä myös näkevien käyttäjien kannalta.

Kuvakkeet ovat subjektiivisia. Sama kuvake voi tarkoittaa eri asioita eri verkkosivustoilla (esimerkiksi tähti säästölle ja tähti luokitukselle). Sama kuvake voi tarkoittaa eri asioita eri konteksteissa (esim. Nuoli jakoa, vastausta, eteenpäin, seuraavaksi) varten. Kuvakkeet voivat olla salaamattomia.

Mitä kaikki pesulakuvakkeet edes tarkoittavat? Lähde

Kuvakkeiden tarkoitus voi olla hämmentävä

Onko tämä staattinen kuvake vai interaktiivinen elementti? Joskus kuvakkeita voidaan napsauttaa ja ne suorittavat toiminnon, tämä voi olla erityisen hämmentävä, kun napsautettavat elementit ovat suoraan napsautettavien osien vieressä ja litteässä muodossa.

Tähti on paksumpi, joten tiedän, että sitä napsautetaan - mutta onko keskivertokäyttäjä? Se on erotettu muista, toimimattomista kuvakkeista - tarkoittaako se, että keskimääräinen käyttäjä napsauttaa sitä?

Meidän on varmistettava, että on ilmeistä, että tätä elementtiä voidaan napsauttaa, mitä kutsumme saatavuudeksi - etenkin kun se on vain kuvake, jossa ei ole tekstiä.

Kuvakkeet interaktiivisina elementteinä

Oletko nähnyt kohteen, jonka haluat helposti löytää uudelleen sovelluksesta tai verkkosivustolta? Paina vain kätevää dandy-tallennuskuvaketta! Mutta mikä tarkalleen on tallennuskuvake?

Mikä kuvake, milloin?

Aikaisemmin se oli levyn kuvake skeuomorfismin aikakaudella - missä ohjelmistossa oleva esine oli edustettuna reaalimaailman vastakkeen kanssa, tässä tapauksessa levyke . Levyke ei koskaan saanut päivitystä siirryttäessämme levyiltä CD-levyiltä USB-levyille ja pilveen, mutta sen merkitys on edelleen tiedossa. Olet todennäköisesti kuullut lapsen kansanperinteen, joka sanoi: "Vau, joku kolmiulotteinen tulostaa Tallenna-kuvakkeen!", Kun he näkivät 3 1/2-tuumaisen levyke-IRL: n.

Näet tämän edelleen Microsoft Office -tuotteissa.

Microsoft Save -kuvake

Jos haluat varata kiinteistön Airbnb: stä, napsauta sydäntä

Airbnb Tallenna kiinteistö
Rakastan tätä paikkaa, ehkä pysyn täällä!

Vaikka en ehkä rakasta tätä paikkaa, ehkä se on vain jotain, jonka haluan jättää syrjään myöhempää arviointia varten, koska se saattaa vastata matkustajani tarpeisiin. Airbnb on todennäköisesti valinnut tähtikuvakkeen, koska sitä käytetään jo luokituksissa, ja ehkä haluamme etäällä "rakkauden" säästöistä, etenkin jos se ei ole jotain, jota käyttäjä nauttii tekemisestä (jotain, joka on välttämättömyys, ei hauskaa lomaa) ).

Tuotteet, kuten Twitter, hämärtävät tätä riviä - voisin lyödä sydäntä sosiaalisena validointina (kuten Instagram ja Facebook) tai voisin käyttää sitä tallentaakseni itselleni, jotta voin hakea sen myöhemmin. Sydämen käyttämättä jättäminen on erityisen totta, jos se tarkoittaa jo jotain muuta - samanlaista tai reaktiota - kuten Instagramissa ja Facebookissa, jotka ovat palanneet skeuomorfiseen muotoiluun ja päättäneet kirjanmerkin edustamaan 'pelastamaan'. Löydä paikkasi fyysisellä esineellä, kuten teit kirjassa (tai teet Kindle-laitteellasi).

Keskipitkä kirjanmerkki tarinaan myöhempää käyttöä varten

Entä tähti? ️ Jos merkitsen jotain tallennettavaa tähdellä, tarkoittaako se, että se on suosikkini? Jos käyttäjä palaa takaisin ja näkee listalla olevan yhden kohteen tähdellä, tarkoittaako se, että suosittelemme sitä heille hyväksi otteluksi? Vai pelastivatko he sen?

Merkitse viesti Slackiin

Amazon on välttänyt nämä ongelmat yhdessä, yksinkertaisesti pitämällä painike, jossa on teksti Lisää luetteloon, sans-kuvake.

Amazon - Lisää luetteloon

Tekstikuvakkeilla ja sopivalla hinnalla on selkeä toiminta ja ne ovat paremmin käytettäviä. Se tekee toiminnoista myös helpommin saatavissa näytönlukijaa käyttäville, heikosti tunnetulle jne.

Tarrat lisäävät kontekstin kuvakkeisiin

Kuvakkeiden ymmärtäminen

Sen lisäksi, että kuvaketoiminnot ovat hämmentäviä, on olemassa hyvin harvoja yleisesti ymmärrettäviä kuvakkeita.

SEEKissä teimme tutkimuksen ikonografian ymmärtämisestä.

Kysyimme ensin osallistujilta, mitä kuvaketta he odottaisivat napsauttavan laittaakseen työtä sivuun myöhemmin (välttimme sanaa "säästää", koska emme halunneet antaa heille alustan). Tämä oli vapaan tekstin vastaus, jossa he pystyivät selittämään mitä symbolia he odottivat näkevän.

Kuvittele, että yllä olevassa kuvassa on mustalla neliöllä piilotettu kuvake (symboli tai kuva), ja tätä kuvaketta napsautat laittaaksesi työn sivuun myöhemmin. Mitä symbolia tai kuvaa odottaisit?

Suosituimmat vastaukset olivat:

  1. Tähtikuvake (24%)
  2. Tallenna yleisenä vastauksena (15%) *
  3. Levyke (11%)
  4. Arkistokaappi (6%)

* Ei ole selvää, mitä vastaajat tarkoittivat “säästää”, koska monet eivät laatineet. Jotkut kirjoittivat vastauksia, kuten ”Levykkeen tallennuskuvake” tai ”tallennuskuvake eli levyke”, mutta ei ole selvää, tarkoittivatko kaikki ”tallenna” vastaajat.

Tähtia käytetään myös SEEK-verkkosivustolla, joten on mahdollista, että tämä on vääristynyt vastaajien vastaamiseen siihen, mitä he tietävät mustan neliön takana.

Kysyimme saman kysymyksen kuin Twitter-kyselyn, jossa oli 4 vaihtoehtoa, ja suurin osa vastasi levykkeelle tarkoittaa säästää!

Twitter-kysely - mikä kuvake tarkoittaa säästää?

Levyke voi edelleen ymmärtää yleisesti, mutta suunnittelijoina emme halua muinaista tekniikkaa sotkemalla rajapintojamme, joten olemme siirtyneet Tähti tai Sydän -kohtaan. Tarvitsemmeko lainkaan kuvaketta? Miksi ei vain "Tallenna" -painiketta?

Seuraavaksi osoitimme osallistujille 4 kuvakkeita, jotka on eristetty käyttöliittymästä ja ilman etikettejä, ja kysyimme, mitä sanoja tai lauseita tai toimia he yhdistävät kuvakkeeseen.

Mitä sanoja, lauseita tai toimia sinä yhdistät tähän kuvakkeeseen?

Mikään kuvake ei ymmärretty yleisesti ja oli avoin tulkinnalle osallistujien aiempien kokemusten ja teknisen taiton perusteella. Tämä tarkoittaa, että etiketin pitäminen kuvakkeiden vieressä lisää käytettävyyttä ja helppokäyttöisyyttä. Se noudattaa myös saavutettavuusohjeita, joissa meidän ei pidä luottaa vain visuaalisiin johtolankoihin toiminnan kuvaamiseksi - konteksti + visuaaliset vihjeet = käyttökelpoiset

Vastaajat toistivat tämän näkemyksen tekstivastauksissaan:

"Useimmat asiat verkossa hämmentävät minua. Miksi kaikki näkökohdat eivät voi käyttää samoja muotoja tehdä saman asian?"
"Kuvakkeet voivat olla hieman hämmentäviä, koska ne ovat melko subjektiivisia käyttäjälle ja tilanteelle, jossa niitä käytetään"
"Haluan pitää asiat yksinkertaisina - työnhaku on tarpeeksi stressaavaa ilman, että minulla on monimutkaista sivustoa navigoida prosessissa"

Kirjanmerkkikuvake oli osallistujille todennäköisimmin sanottua, että he eivät tienneet mitä se teki, mutta monet ymmärsivätkin, että se jättää työn sivuun myöhemmin. Jotkut katsoivat sen tarkoittavan, että työ / yritys oli palkittu tai hyvä ottelu heille. Kaiken kaikkiaan se tulkittiin tarkoittavan:

  • Kirjanmerkki (38%)
  • En tiedä / en ole varma (11%)
  • Säästää (11%)
  • Lippu (9%)

Sydänkuvake liitettiin rakkauteen ja sosiaalisen median viestien tunnistamiseen (ennakkotiedot Instagramista tai Twitteristä). Vastaajat, jotka tunsivat SEEKin, vastasivat, että sitä käytettiin tallennettuihin hakuihin. Kaiken kaikkiaan vastaajat eivät kuitenkaan yhdistäneet tätä yhtä vahvasti jonkin syrjinnän myöhempää käyttöä varten. Se liitettiin enemmän positiivisiin tunteisiin (rakkaus, kuten onnellisuus). Sydänkuvakkeen ymmärrettiin tarkoittavan:

  • Rakkaus (54%)
  • Tykkää (35%)
  • Suosikki (21%)

Jotkut eivät todellakaan pitäneet ajatuksen käyttämisestä sydämessä:

”Rakkaus, ei sovelleta työpaikkailmoitukseen”

Tähti ymmärrettiin merkitsevän jotain myöhemmin tai yhtä tärkeänä. Pidettiin kuitenkin myös indikaattorina sitä, että työ sopi heille hyvin, tai yrityksen luokitus. Tähti nähtiin:

  • Suosikki (37%)
  • Säästää (20%)
  • Tähti (17%)
  • Tärkeää (10%)
  • Arvosana (8%)

Osakenuoli tulkitettiin valtaosin väärin tarkoittaen ”eteenpäin” seuraavaan, mutta se kuitenkin osoitettiin kontekstin ulkopuolella:

  • Siirry eteenpäin (vai siirrätkö sähköpostia?), Seuraavalle tai seuraavalle sivulle (81%)
  • Sähköpostiin vastaaminen (10%)
  • Osuus (8%)

Aikaisempi tieto vaikuttaa ymmärrykseen

Kuten minkä tahansa suunnittelemme, meidän on testattava kuvakkeiden ymmärtämistä kohdekäyttäjiemme kanssa. Yhden hengen kolmio voi olla vain kolmio, mutta fyysikolle tai matemaatikolle voi olla selvää, että se tarkoittaa muutosta.

Voitin kerran pelin sanakirjasta, jossa alla oleva kritiikki oli 3 sekunnissa. Mitä tämä tarkoittaa? Sinulle luultavasti mitään. Mutta minulle ja sanakirjan kumppanilleni se on villakoirani Penny. Kilpailumme ei ollut onnellinen.

Tarkoittaako tämä sinulle Penny?

Asiayhteys on tärkeä

Toisen nuolen vieressä oleva nuoli toiseen suuntaan tarkoittaa todennäköisesti seuraavaa, kun taas jos se olisi sydämen vieressä, voi olla selvää, että se tarkoittaa ”jaa”. Testaa kuvakkeita yhteydessä.

Jos pidät siitä, sinun tulee laittaa siihen etiketti

Jos haluat, että suurin osa käyttäjistä ymmärtää kuvakkeiden tehtävät, käytä etikettejä. Käyttäjätestausten avulla löydetyt käyttäjät pystyivät oikein ennustamaan, mitä tapahtuisi, kun he napauttavat kuvaketta, jonka etiketti on 88% ajasta. Kuvakkeissa, joissa ei ole tarroja, tämä luku laski 60%: iin. Mukautettujen merkitsemättömien kuvakkeiden kohdalla tämä laski edelleen vain 34 prosenttiin ajasta. Lue lisää heidän tutkimuksestaan ​​täältä.

TL; DR- Pitäisikö minun käyttää kuvakkeita? Mitkä kuvakkeet?

Se riippuu.

Kysy itseltäsi, käyttääkö täällä kuvakkeita:

  • Auttaa käyttäjää löytämään etsimänsä?
  • Vähennä kognitiivista kuormitusta?
  • Lisää tuotteen ulkoasu?

Onko valittu kuvake:

  • Ymmärrettävä käyttäjille tietyssä yhteydessä? Onko se ymmärretty kohderyhmän kanssa?
  • Selvästi napsautettavissa?
  • Tekstin mukana lisäämään käytettävyyttä ja ymmärrettävyyttä?

Jos vastasit kyllä ​​yllä olevaan kysymykseen, voit todennäköisesti käyttää kuvaketta.

Älä käytä kuvakkeita, kun ne:

  • Näyttää antamatta arvoa;
  • Sotkea rajapinta;
  • Ovat avoimia tulkinnalle.