Ikonografie. Dobrý alebo zlý? Ako vždy, záleží

Ikony sú všade. Stiahnite si jednu z tisícok bezplatných vektorových súprav ikon z internetu ™ a začnite hádzať pixely v tvare hamburgerov, kebabov a zväčšovacích okien na vaše kresliace plátna a sami si vytvoríte dizajn. Ale prestali ste premýšľať, kedy použiť ikonu a kedy ju nepoužiť? Kedy použiť ktorú ikonu?

Táto skladba zdieľa istý prieskum a tím prieskumu tímu SEEK UX v oblasti ikonografie, ktorý vás, dúfajme, lepšie oboznámi s komplexnosťou UX za týmito malými 8-bitovými umeleckými dielami.

Ikony ako statické prvky

Statické ikony sú tie, ktoré sa používajú ako ozdobné prvky na komunikáciu diskrétnej informácie alebo na pomoc pri hľadaní cesty. Rovnako ako všetko môžu byť dobré aj zlé.

Ikony sú dobré

Správne navrhnuté a ľahko rozoznateľné ikony dokážu rýchlo komunikovať informácie, ktoré môže používateľ vyhľadávať - ​​napríklad skenovanie stránky s výsledkami vyhľadávania pre hotely, ktoré majú Wi-Fi alebo počet spální vo vlastníctve. Vidíme to v symbolike prístupných parkovísk, značiek pre kúpeľne a univerzálneho symbolu pre jed.

Realestate.com.au ikony pre počet spální, kúpeľní a automobilových priestorov pre zoznam nehnuteľností

Ikony šetria miesto a znižujú kognitívne zaťaženie odstránením potreby opakovaného čítania tých istých informácií oproti každému záznamu, čím znižujú trenie.

Dizajn REA bez ikon zvyšuje trenie

Ikony môžu vylepšiť vzhľad rozhrania a pridať vizuálnu príťažlivosť, o ktorej je známe, že zvyšuje (vnímané) UX a použiteľnosť produktu. Toto je známe ako efekt estetickej použiteľnosti a o ňom si môžete prečítať tu (NN / G).

Ak sú ikony spárované s textom, môže to zlepšiť prístupnosť poskytnutím alternatívneho mechanizmu prenosu informácií - text s vizuálnou stopou - čo je dobré pre jednotlivcov s kognitívnymi problémami, slabým zrakom, ktorí ikonu nevidia správne atď.

Ikona rozhovoru NAB je jasná

Ikony môžu tiež pomôcť s navigáciou pre ľudí, ktorí hovoria (alebo čítajú) jazyk rozhrania ako iný ako primárny jazyk (alebo vôbec nie). Možno nebudem schopný prečítať text na rozhraní, ale ikony mi môžu pomôcť pochopiť, ako sa pohybovať v okolí alebo ako nájsť to, čo hľadám. Platí to aj v skutočnom svete, a preto máme štandardizované ikony pre kúpeľne, letiská, výťahy atď.

Napriek môjmu úbohému katalánčine sa mi podarilo ikony prať v Barcelone vďaka ikonám

Ikony sú zlé

Nesprávne navrhnuté ikony môžu spôsobiť zmätok, keď nevieme, čo sa nám týkajú, najmä ak nie sú sprevádzané textom alebo tipom na nástroj.

Predstavuje kvet bez textu text „kúpeľné a wellness centrum“?

Ikony pre ikony poskytujú malú hodnotu a zvyšujú šum rozhrania.

V dizajne vľavo ikony neprinášajú žiadnu hodnotu, preto sme ich odstránili a znížili sme tak hluk

Ikony bez alt-textu sú pre používateľov čítačky obrazovky mätúce. Obzvlášť ak to len prečíta niečo ako „Star“ namiesto „Save Job“. Textové štítky pomáhajú zmenšiť tento zmätok aj pre zrakovo postihnutých používateľov.

Ikony sú subjektívne. Rovnaká ikona môže znamenať rôzne veci na rôznych webových stránkach (napr. Hviezdička pre „uloženie“ a hviezdička pre „hodnotenie“). Rovnaká ikona môže znamenať rôzne veci v rôznych kontextoch (napr. Šípka na zdieľanie, odpoveď, posielanie ďalej, ďalej). Ikony môžu byť nerozlúštiteľné.

Čo znamenajú všetky rôzne ikony bielizne? zdroj

Ikony účel môže byť mätúci

Je to statická ikona alebo interaktívny prvok? Niekedy je možné kliknúť na ikony a vykonať akciu, môže to byť obzvlášť mätúce, keď sú klikateľné prvky priamo vedľa prvkov, na ktoré nie je možné kliknúť, a sú v plochom prevedení.

Hviezda je hrubšia, takže viem, že je na ňu možné kliknúť - ale je to priemerný používateľ? Oddeľuje sa od ostatných ikon, ktoré sa netýkajú akcií - znamená to, že na neho môže kliknúť priemerný používateľ?

Musíme sa ubezpečiť, že je zrejmé, že na tento prvok sa dá kliknúť, čo nazývame dovolenkou - najmä ak ide iba o ikonu bez textu.

Ikony ako interaktívne prvky

Vidíte položku, ktorú chcete znova ľahko nájsť v aplikácii alebo na webe? Stačí kliknúť na praktickú ikonu „uložiť“ šikovného dandyho! Čo je to však ikona uloženia?

Ktorá ikona, kedy?

Bola to ikona disku vo veku skeuomorfizmu - kde bol v softvéri reprezentovaný objekt so svojím náprotivkom v skutočnom svete, v tomto prípade disketa disketa . Disketa nikdy nedostala upgrade, pretože sme sa presúvali z diskov na disky CD na USB a do cloudu, ale ich význam je stále známy. Pravdepodobne ste už počuli folklórny príbeh dieťaťa, ktoré povedalo: „Páni, niekto 3-D vytlačil ikonu uloženia!“, Keď videl IRL diskety s diskom 1 1/2 palca.

Toto sa v produktoch balíka Microsoft Office stále zobrazuje.

Ikona Microsoft Save

Ak chcete na Airbnb odložiť nehnuteľnosť, kliknite na srdce

Uložte nehnuteľnosť
Milujem toto miesto, možno tu zostanem!

Aj keď možno toto miesto nemilujem, možno je to len niečo, čo chcem odložiť na ďalšie hodnotenie, pretože to môže uspokojiť moje potreby cestujúceho. Airbnb si pravdepodobne vybrala ikonu hviezdy, pretože sa už používa na hodnotenie, a možno by sme chceli vzdialiť „lásku“ od šetrenia, najmä v prípadoch, keď to nie je niečo, čo si užívateľ bude robiť (niečo, čo je nevyhnutnosťou, nie zábavná dovolenka). ).

Výrobky ako Twitter rozostrujú tento riadok - mohol by som zasiahnuť srdce ako sociálne overenie (napríklad Instagram a Facebook) alebo by som ho mohol použiť na uloženie, aby som ho neskôr získal. Nechceli používať srdce, je to najmä vtedy, keď už to znamená niečo iné - napríklad reakciu alebo reakciu - ako napríklad na stránkach Instagram a Facebook, ktorí sa vrátili k skeuomorfickému dizajnu a rozhodli sa pre záložku, ktorá bude predstavovať „ušetriť“. Nájdite svoje miesto s fyzickým objektom, ako ste to urobili v knihe (alebo na Kindle).

Stredná záložka príbeh na neskôr

A čo hviezda? „Ak označím hviezdičkou niečo, čo je potrebné uložiť, znamená to, že je to môj najobľúbenejší? Ak sa používateľ vráti a vidí jednu položku v zozname s hviezdičkou, znamená to, že ju odporúčame ako dobrú zhodu? Alebo to uložili?

Označte správu hviezdičkou na Slackovi

Spoločnosť Amazon sa týmto problémom úplne vyhýbala jednoduchým stlačením tlačidla s textom „Pridať do zoznamu“, ikona sans.

Amazon - Pridať do zoznamu

Ikony s textom a primeraná podpora majú jasnú akciu a sú použiteľnejšie. Taktiež robí akcie oveľa dostupnejšie pre tých, ktorí používajú čítačky obrazovky, pre ľudí s nízkym poznaním atď.

Štítky pridávajú kontext ikonám

Pochopenie ikon

Okrem toho, že akcie ikon sú mätúce, existuje len veľmi málo ikon, ktoré sú všeobecne známe.

V SEEK sme vykonali výskum týkajúci sa porozumenia ikonografie.

Najprv sme sa účastníkov opýtali, na akú ikonu by podľa očakávania klikli, aby odložili prácu na neskoršiu dobu (vyhli sme sa slovu „uložiť“, pretože sme ich nechceli pripraviť). Bola to voľná textová odpoveď, kde mohli vysvetliť, aký symbol očakávajú.

Predstavte si, že je na čiernom štvorci na obrázku hore skrytá ikona (symbol alebo obrázok) a touto ikonou by ste kliknutím odložili úlohu na neskoršie použitie. Aký symbol alebo obrázok by ste očakávali?

Najobľúbenejšie reakcie boli:

  1. Ikona hviezdičky (24%)
  2. „Uložiť“ ako všeobecnú odpoveď (15%) *
  3. Disketa (11%)
  4. Kartotéka / kartotéka (6%)

* Nie je jasné, čo respondenti mysleli pod pojmom „zachrániť“, pretože mnohí to nespracovali. Niektoré napísali odpovede, ako napríklad „ikona uloženia diskety“ alebo „ikona uloženia, t. J. Disketa“, nie je však jasné, či to všetci „respondenti“ ukladajú.

Hviezda sa tiež používa na webových stránkach SEEK, takže je možné, že respondenti odpovedajú, čo vedia, za čiernym štvorcom.

Rovnakú otázku sme položili ako anketu Twitter, so 4 možnosťami a väčšina odpovedaných diskiet znamená uložiť!

Anketa Twitter - ktorá ikona znamená uložiť?

Disketu možno stále chápeme všeobecne, ale ako dizajnéri nechceme, aby naše rozhrania rušili starú technológiu, takže sme sa presťahovali do Hviezdy alebo Srdca. Potrebujeme vôbec ikonu? Prečo nielen tlačidlo „Uložiť“?

Ďalej sme účastníkom ukázali 4 ikony izolované z rozhrania a bez štítkov a opýtali sme sa, aké slová alebo frázy alebo akcie spájajú s ikonou.

Aké slová, frázy alebo akcie spájate s touto ikonou?

Žiadna z ikon nebola všeobecne pochopená a bola otvorená interpretácii na základe predchádzajúcich skúseností a technologickej dôvtipnosti účastníkov. To naznačuje, že ponechanie štítku vedľa ikon zvýši použiteľnosť a jednoduchosť použitia. Postupuje tiež podľa pokynov na prístupnosť, kde by sme sa pri opise akcie nemali spoliehať iba na vizuálne kľúče - kontext + vizuálne narážky = použiteľné

Respondenti opakovali tento sentiment vo svojich textových odpovediach:

"Väčšina vecí online ma zmiasť, prečo nemôže každý pohľad [sic] použiť rovnaké tvary na to isté?"
„Ikony môžu byť trochu mätúce, pretože sú dosť subjektívne pre používateľa a situáciu, v ktorej sa používajú.“
„Rád by som veci udržal jednoduchý - hľadanie práce je dosť stresujúce bez toho, aby sa v tomto procese muselo pohybovať komplikovanou stránkou.“

Ikona záložky bola pre účastníkov najpravdepodobnejšou skutočnosťou, že nevedeli, čo urobili, avšak mnohí pochopili, že to odloží prácu na neskôr. Niektorí si mysleli, že to znamenalo, že práca / spoločnosť pre nich získala ocenenie alebo dobrý zápas pre nich. Celkovo sa to interpretovalo ako:

  • Záložka (38%)
  • Neviem / nie ste si istí (11%)
  • Ušetrite (11%)
  • Vlajka (9%)

Ikona Srdca bola spojená s láskou a rozpoznávaním príspevkov v sociálnych médiách (predchádzajúce znalosti z Instagramu alebo Twitteru). Respondenti, ktorí sa oboznámili so SEEKom, odpovedali, že sa použili na uložené vyhľadávania. Celkovo sa však respondenti neprihlásili tak silno k tomu, že by niečo odložili na neskôr. Bolo to spojené skôr s pozitívnymi emóciami (láska, ako, šťastie). Pod ikonou srdca sa rozumie:

  • Láska (54%)
  • Páči sa mi (35%)
  • Obľúbené (21%)

Niektorým sa naozaj nepáčila myšlienka použitia srdca:

„Láska, neplatí pre reklamu na prácu“

Hviezda bola chápaná tak, že niečo označila na neskôr alebo ako dôležité. Tiež sa však považovalo za indikátor toho, že práca pre nich bola dobrým zápasom alebo hodnotenie spoločnosti. Hviezda bola videná ako:

  • Obľúbené (37%)
  • Ušetrite (20%)
  • Hviezda (17%)
  • Dôležité (10%)
  • Hodnotenie (8%)

Šípka akcií bola prevažne nesprávne vykladaná tak, že znamená „dopredu“ na „ďalší“, ukázalo sa však z kontextu:

  • Pokračovať (alebo poslať e-mail ďalej), vedľa alebo na nasledujúcu stránku (81%)
  • Odpoveď na e-mail (10%)
  • Podiel (8%)

Predchádzajúce znalosti ovplyvňujú porozumenie

Rovnako ako čokoľvek, čo navrhujeme, aj my musíme testovať pochopenie našich ikon s našimi cieľovými používateľmi. Trojuholník pre jednu osobu môže byť iba trojuholník, ale pre fyzika alebo matematika môže byť zrejmé, že to znamená „zmena“.

Raz za 3 sekundy som vyhral hru Pictionary s nižšie načmáraným písmom. Čo to znamená? Pravdepodobne nič. Ale pre mňa a môjho partnera pre fikcie je to môj pudlík Penny. Naša konkurencia nebola spokojná.

Znamená to pre vás Penny?

Kontextové záležitosti

Šípka vedľa inej šípky smerujúcej k inému spôsobu pravdepodobne znamená „nablízku“, zatiaľ čo ak bola vedľa srdca, môže byť zrejmé, že znamená „zdieľať“. Testujte ikony v kontexte.

Ak sa vám to páči, mali by ste naň umiestniť štítok

Ak chcete, aby väčšina používateľov vedela, čo ikony robia, použite štítky. Testovanie používateľov zistilo, že používatelia boli schopní správne predpovedať, čo sa stane, keď klepnú na ikonu s menovkou 88% času. V prípade ikon bez štítkov toto číslo kleslo na 60%. V prípade neznačených ikon na mieru to kleslo ďalej na iba 34% času. Viac informácií o ich výskume nájdete tu.

TL; DR- Mám používať ikony? Ktoré ikony?

Záleží.

Opýtajte sa sami seba, používa tu ikony:

  • Pomôžte používateľovi nájsť to, čo hľadajú?
  • Znížiť kognitívne zaťaženie?
  • Pridajte k vizuálnej príťažlivosti produktu?

Je zvolená ikona:

  • V danom kontexte pre používateľov pochopiteľné? Bolo testované s cieľovou skupinou na pochopenie?
  • Jasne kliknuteľný?
  • Spolu s textom na zvýšenie použiteľnosti a zrozumiteľnosti?

Ak ste na vyššie uvedené odpovedali áno, pravdepodobne môžete použiť ikonu.

Nepoužívajte ikony, keď:

  • Zdá sa, že neposkytuje žiadnu hodnotu;
  • Neporiadok v rozhraní;
  • Sú otvorené výkladu.