Ikonografija. Geras ar blogas? Kaip visada, tai priklauso

Piktogramos yra visur. Atsisiųskite vieną iš tūkstančių nemokamų vektorinių piktogramų rinkinių iš „Internet ™ ️“ ir pradėkite mėtyti mėsainių, kebabų ir didinamųjų akinių pavidalo taškus ant savo lentų ir gaukite sau savo dizainą. Bet ar nesustojai galvoti, kada naudoti piktogramą, o kada nenaudoti? Kada naudoti kurią piktogramą?

Šis kūrinys dalijasi tam tikrais SEEK UX komandos sumanymais ir tyrimais, susijusiais su ikonografija, kurie, tikiuosi, padės geriau suvokti UX sudėtingumą, atsirandantį dėl šių mažų 8 bitų kūrinių.

Piktogramos kaip statiniai elementai

Statinės piktogramos yra tokios, kurios naudojamos kaip dekoratyviniai elementai, norint perduoti atskirą informaciją ar padėti surasti kelią. Kaip ir viskas, jie gali būti ir geri, ir blogi.

Ikona yra gera

Gerai suprojektuotos ir lengvai atpažįstamos piktogramos gali greitai perduoti informaciją, kurią vartotojas gali nuskaityti - pavyzdžiui, nuskaityti viešbučių, kuriuose veikia „WiFi“, paieškos rezultatų puslapį arba miegamųjų kambarių skaičių nuosavybėje. Tai matome prieinamų automobilių stovėjimo aikštelių simbolikoje, vonios ženklų ir universaliame nuodų simbolyje.

Realestate.com.au miegamųjų, vonios ir automobilių vietų skaičiaus piktogramos nekilnojamojo turto sąraše

Piktogramos taupo vietą ir sumažina pažintinę apkrovą pašalindamos poreikį iš naujo perskaityti tą pačią informaciją kiekviename sąraše ir taip sumažinti trintį.

REA dizainas be piktogramų padidina trintį

Piktogramos gali pagerinti sąsajos išvaizdą, pridedant vaizdinį patrauklumą, kuris, kaip žinoma, padidina (suvokiamą) UX ir produkto tinkamumą. Tai vadinama estetinio naudojimo galimybe ir apie ją galite perskaityti čia (NN / G).

Kai piktogramos suporuojamos su tekstu, tai gali pagerinti prieinamumą suteikiant alternatyvų informacijos perdavimo mechanizmą - tekstą su vaizdiniu užuominu - tai yra naudinga asmenims, turintiems pažinimo problemų, silpnaregiams, kurie negali tinkamai matyti piktogramos ir pan.

NAB pokalbių piktograma aiški

Piktogramos taip pat gali padėti naršyti žmonėms, kurie sąsajos kalbą (arba skaito) kaip ne pagrindinę kalbą (arba jos visai nekalba). Galbūt negalėčiau perskaityti sąsajos teksto, tačiau piktogramos gali suprasti, kaip naršyti ar rasti tai, ko ieškau. Tai galioja ir realiame pasaulyje, todėl standartizuotas vonios kambarių, oro uostų, liftų ir kt.

Nepaisant vargano katalono, dėl piktogramų Barselonoje galėjau sėkmingai nusiplauti drabužius

Piktogramos yra blogos

Blogai suprojektuotos piktogramos gali sukelti painiavą, kai nežinome, ką jos bando mums parodyti, ypač kai jų nėra prie teksto ar įrankio patarimo.

Ar be teksto gėlė reiškia „SPA ir sveikatingumo centrą“?

Piktogramų piktogramos suteikia mažai vertės ir prideda triukšmą prie sąsajos.

Kairėje esančioje konstrukcijoje piktogramos neprideda jokios vertės, todėl jas pašalinome ir sumažėjome triukšmas

Piktogramos be kito teksto yra klaidinančios ekrano skaitytuvo vartotojams. Ypač tuo atveju, jei vietoje „Išsaugoti darbą“ tiesiog skaitomas kažkas „Žvaigždė“. Teksto etiketės padeda sumažinti šią sumaištį ir regintiems vartotojams.

Piktogramos yra subjektyvios. Ta pati piktograma gali reikšti skirtingus dalykus skirtingose ​​svetainėse (pvz., Žvaigždutė „taupymui“ ir žvaigždė „įvertinimas“). Ta pati piktograma gali reikšti skirtingus dalykus skirtinguose kontekstuose (pvz., Rodyklė dalijimui, atsakymui, pirmyn, kitai). Piktogramos gali būti neišdildomos.

Ką net reiškia visos skirtingos skalbinių piktogramos? Šaltinis

Piktogramų paskirtis gali būti klaidinanti

Ar tai statinė piktograma, ar interaktyvus elementas? Kartais piktogramas galima spustelėti ir jas atlikti, tai gali būti ypač painu, kai spustelėjami elementai yra tiesiai šalia elementų, kurių negalima spustelėti, ir yra plokščio dizaino.

Žvaigždė yra storesnė, todėl aš žinau, kad ją galima spustelėti, bet ar paprastas vartotojas? Jis atskirtas nuo kitų neveikimo piktogramų - ar tai reiškia, kad paprastą vartotoją galima spustelėti?

Turime įsitikinti, kad akivaizdu, kad šį elementą galima spustelėti, vadinamą prieinamumu, ypač kai tai tik piktograma be teksto.

Piktogramos kaip interaktyvūs elementai

Matėte elementą, kurį norite vėl lengvai rasti programoje ar svetainėje? Tiesiog paspauskite patogią „dandy“ „išsaugojimo“ piktogramą! Bet kas tiksliai yra išsaugojimo piktograma?

Kuri piktograma, kada?

Skuomorfizmo amžiuje ji buvo disko piktograma - kai programinės įrangos objektas buvo pavaizduotas su jo realaus pasaulio atitikmeniu, šiuo atveju diskeliu . Diskeliai niekada nebuvo atnaujinti, kai mes perėjome iš diskų į kompaktinius diskus prie USB ir debesies, tačiau jo reikšmė vis dar žinoma. Tikriausiai girdėjote folkloro istoriją apie vaiką, kuris sakė: „Oho, kažkas 3-D atspausdino išsaugojimo piktogramą!“, Pamatę 3 1/2 colio diskelį IRL.

Šiandien vis tiek tai matysite „Microsoft Office“ produktuose.

„Microsoft“ išsaugojimo piktograma

Norėdami atiduoti „Airbnb“ turtą, spustelėkite širdį

„Airbnb“ išsaugokite nuosavybę
Aš myliu šią vietą, galbūt liksiu čia!

Nors gal ir nemėgstu šios vietos, galbūt tai yra kažkas, ką noriu atidėti vėlesniam laikui, kad galėčiau toliau įvertinti, nes tai gali patenkinti mano, kaip keliautojo, poreikius. „Airbnb“ greičiausiai pasirinko žvaigždės piktogramą, nes ji jau naudojama reitingams, ir galbūt mes norime atskirti „meilę“ nuo taupymo, ypač tais atvejais, kai tai nėra kažkas, kas vartotojui patiks (kažkas, kas yra būtinybė, o ne smagios atostogos) ).

Produktai, tokie kaip „Twitter“, nubloškia šią eilutę - man galėtų pataikyti į širdį kaip socialinis patvirtinimas (pvz., „Instagram“ ir „Facebook“) arba galėčiau naudoti tai norėdamas išsaugoti sau, kad galėčiau vėliau nusipirkti. Nenorėjimas naudoti širdies yra ypač aktualus ten, kur tai jau reiškia ką nors kita - panašų ar reakciją - pvz., „Instagram“ ir „Facebook“, kurie grįžo prie skeuomorfinio dizaino ir nusprendė sukurti žymą, kad atstovautų „išsaugoti“. Raskite savo vietą fiziniame objekte, kaip tai padarėte knygoje (arba darykite „Kindle“).

Vidutiniškai pažymėkite istoriją vėlesniam laikui

O kaip žvaigždė? ️ Jei aš kažką pažymiu žvaigždute, ką reikia išsaugoti, ar tai reiškia, kad jis yra mano mėgstamiausias? Jei vartotojas grįžta ir mato vieną įrašo elementą pažymėtą žvaigždute, ar tai reiškia, kad mes jį rekomenduojame kaip gerą atitiktį? O gal jie tai išgelbėjo?

Pažymėkite pranešimą „Slack“

„Amazon“ išvengė šių problemų kartu, tiesiog turėdama mygtuką su tekstu „Pridėti į sąrašą“, „sans“ piktogramą.

„Amazon“ - įtraukti į sąrašą

Piktogramos su tekstu ir tinkamos kainos yra aiškios ir yra labiau naudojamos. Tai taip pat daro veiksmus žymiai prieinamesnius tiems, kurie naudojasi ekrano skaitytuvais, mažai pažįstamiems žmonėms ir pan.

Etiketės prideda kontekstą prie piktogramų

Piktogramų supratimas

Be to, kad piktogramų veiksmai yra painūs, yra labai mažai visuotinai suprantamų piktogramų.

SEEK mes atlikome tyrimus, susijusius su ikonografijos supratimu.

Pirmiausia dalyvių paklausėme, kokią piktogramą jie tikėsis spustelėti, kad atidėtų darbą vėlesniam laikui (vengėme žodžio „taupyti“, nes nenorėjome jiems prisistatyti). Tai buvo atsakymas laisvu tekstu, kur jie galėjo paaiškinti, kokį simbolį jie tikėsis pamatyti.

Įsivaizduokite, kad aukščiau esančiame paveikslėlyje yra juodas kvadratas paslėpta piktograma (simbolis arba paveikslėlis), ir šią piktogramą jūs spustelėtumėte, kad atidėtumėte darbą vėlesniam laikui. Kokio simbolio ar paveikslėlio tikėtumėtės?

Populiariausi atsakymai buvo:

  1. Žvaigždės piktograma (24%)
  2. „Išsaugoti“ kaip bendrą atsakymą (15%) *
  3. Diskelis (11%)
  4. Dokumentų byla (6%)

* Neaišku, ką respondentai turėjo omenyje „taupyti“, nes daugelis jų nepatikslino. Kai kurie žmonės rašė atsakymus, tokius kaip „Diskelio išsaugojimo piktograma“ arba „Įrašymo piktograma, t. Y. Diskelis“, tačiau neaišku, ar visi „išsaugoti“ respondentai tai turėjo omenyje.

Be to, žvaigždutė naudojama SEEK svetainėje, todėl gali būti, kad respondentai pasisako už tai, kas, jų žiniomis, yra už juodo kvadrato.

Mes uždavėme tą patį klausimą kaip „Twitter“ apklausoje su 4 galimybėmis, o dauguma atsakė į diskelį - tai sutaupyti!

„Twitter“ apklausa - kuri piktograma reiškia sutaupyti?

Disketas vis dar gali būti visuotinai suprantamas, tačiau mes, kaip dizaineriai, nenorime, kad senovės technologijos užgriozdintų mūsų sąsajas, todėl perėjome prie žvaigždės ar širdies. Ar mums išvis reikia piktogramos? Kodėl ne tik mygtukas „Išsaugoti“?

Tada dalyviams parodėme 4 piktogramas, atskiras nuo sąsajos ir be etikečių, ir paklausėme, kokius žodžius ar frazes ar veiksmus jie sieja su piktograma.

Kokius žodžius, frazes ar veiksmus jūs siejate su šia piktograma?

Nei viena iš piktogramų nebuvo visuotinai suprantama ir jas buvo galima aiškinti remiantis ankstesne dalyvių patirtimi ir technikos taupumu. Tai rodo, kad etiketę laikant šalia piktogramų, padidės patogumas ir patogumas. Taip pat laikomasi prieinamumo gairių, kur apibūdindami veiksmą turėtume ne tik pasikliauti vizualiais įkalčiais - kontekstas + vaizdiniai užrašai = tinkami naudoti

Respondentai pakartojo šį požiūrį savo atsakymuose į tekstą:

„Dauguma dalykų internete mane supainioja, kodėl ne kiekvienas žvilgsnis gali naudoti tas pačias formas, kad padarytų tą patį?“
„Piktogramos gali šiek tiek painioti, nes jos yra gana subjektyvios vartotojui ir situacijai, kurioje jos naudojamos“.
„Man patinka, kad viskas būtų paprasta - darbo paieška yra pakankamai įtempta, neturint sudėtingos svetainės, kurioje būtų galima naršyti“

Žymelės piktograma buvo tikėtina, kad dalyviai teigė, kad nežinojo, ką tai padarė, tačiau daugelis suprato, kad tai atidės darbą vėlesniam laikui. Kai kurie manė, kad tai reiškia, kad darbas / įmonė laimėjo apdovanojimus arba buvo gerai suderinti. Apskritai jis buvo aiškinamas taip:

  • Žymė (38%)
  • Nežinau / nežinote (11%)
  • Sutaupykite (11%)
  • Vėliava (9%)

Širdies piktograma buvo siejama su meile ir socialinės žiniasklaidos įrašų atpažinimu (išankstinės žinios iš „Instagram“ ar „Twitter“). Respondentai, susipažinę su SEEK, atsakė, kad ji buvo naudojama išsaugotoms paieškoms. Vis dėlto respondentai to nesiejo taip stipriai, kad kažką atidėtų vėlesniam laikui. Tai buvo daugiau siejama su teigiamomis emocijomis (meile, pavyzdžiui, laime). Širdies piktograma buvo suprantama kaip:

  • Meilė (54%)
  • Patinka (35%)
  • Mėgstamiausias (21%)

Kai kuriems labai nepatiko mintis, kad naudojama širdis:

„Meilė, netaikoma darbo reklamai“

Žvaigždė buvo suprantama kaip kažkas žyminti vėliau arba kaip svarbu. Tačiau taip pat manyta, kad tai yra rodiklis, rodantis, kad darbas jiems gerai atitiko, ar įmonės reitingas. Žvaigždė buvo vertinama kaip:

  • Mėgstamiausias (37%)
  • Sutaupykite (20%)
  • Žvaigždė (17%)
  • Svarbu (10%)
  • Įvertinimas (8%)

Akcijų rodyklė buvo labai klaidingai interpretuojama, kad reiškė „pirmyn“ į „kitą“, tačiau buvo parodyta iš konteksto:

  • Pirmyn (ar persiųsti el. Laišką?), Šalia arba į kitą puslapį (81%)
  • Atsakymas į el. Laišką (10%)
  • Dalis (8%)

Ankstesnės žinios daro įtaką supratimui

Kaip ir viską, ką mes kuriame, turime išbandyti savo piktogramų supratimą su tiksliniais vartotojais. Vienam asmeniui trikampis gali būti tiesiog trikampis, tačiau fizikui ar matematikui gali būti aišku, kad tai reiškia „pokyčius“.

Aš vieną kartą laimėjau žodyno žaidimą su žemiau esančiu įbrėžimu per 3 sekundes. Ką tai reiškia? Tau turbūt nieko. Bet man ir mano žodyno partneriui tai yra mano pūdelis Penny. Mūsų varžybos nebuvo laimingos.

Ar tai jums reiškia „Penny“?

Kontekstas yra svarbus

Rodyklė šalia kitos rodyklės, nukreipta priešingai, greičiausiai reiškia „kitą“, tuo tarpu jei ji būtų šalia širdies, gali būti aišku, kad tai reiškia „dalytis“. Tikrinti piktogramas kontekste.

Jei jums tai patinka, tuomet turėtumėte užklijuoti etiketę

Jei norite, kad kuo daugiau vartotojų suprastų, ką daro piktogramos, naudokite etiketes. Naudotojų bandymai nustatė, kad vartotojai galėjo teisingai nuspėti, kas nutiks, kai bakstelės piktogramą su etikete 88% laiko. Piktogramose be etikečių šis skaičius sumažėjo iki 60%. Dėl specialiai nepažymėtų piktogramų šis skaičius sumažėjo tik iki 34% laiko. Daugiau apie jų tyrimus skaitykite čia.

TL; DR - ar turėčiau naudoti piktogramas? Kurios piktogramos?

Priklauso.

Paklauskite savęs, ar čia naudojamos piktogramos:

  • Padėkite vartotojui rasti tai, ko ieško?
  • Sumažinti pažintinį krūvį?
  • Pridėkite vaizdinį produkto patrauklumą?

Ar pasirinkta piktograma:

  • Ar vartotojams suprantama atsižvelgiant į kontekstą? Ar jis buvo patikrintas su tiksline grupe siekiant suprasti?
  • Aiškiai spustelėjamas?
  • Kartu su tekstu padidinsite patogumą ir suprantamumą?

Jei atsakėte teigiamai į tai, kas išdėstyta aukščiau, tikriausiai galite naudoti piktogramą.

Nenaudokite piktogramų, kai jos:

  • Atrodo, kad neturi vertės;
  • Užteršti sąsają;
  • Jie gali būti aiškinami.