Ikonografia. Dobry czy zły? Jak zawsze to zależy

Ikony są wszędzie. Pobierz jeden z tysięcy darmowych zestawów ikon wektorowych z Internetu ™ ️ i zacznij rzucać pikselami w kształcie hamburgerów, kebabów i lupek nad swoimi obszarami roboczymi, a sam masz projekt. Ale czy zastanawiasz się, kiedy użyć ikony, a kiedy nie? Kiedy używać której ikony?

Ten kawałek dzieli się przemyśleniami i badaniami zespołu SEEK UX w zakresie ikonografii, co, mam nadzieję, sprawia, że ​​jesteś bardziej świadomy złożoności UX stojących za tymi małymi 8-bitowymi dziełami sztuki.

Ikony jako elementy statyczne

Ikony statyczne to te, które są używane jako elementy dekoracyjne, do przekazywania dyskretnych informacji lub do pomocy w znalezieniu drogi. Jak wszystko, mogą być zarówno dobre, jak i złe.

Ikony są dobre

Dobrze zaprojektowane i łatwo rozpoznawalne ikony mogą szybko przekazywać informacje, które użytkownik może skanować - na przykład skanuje stronę wyników wyszukiwania hoteli z WiFi lub liczby sypialni w nieruchomości. Widzimy to w symbolice dostępnych parkingów, znaków do łazienek i uniwersalnego symbolu trucizny.

Ikony Realestate.com.au dla liczby sypialni, łazienek i miejsc samochodowych na liście nieruchomości

Ikony oszczędzają miejsce i zmniejszają obciążenie poznawcze, eliminując potrzebę ponownego czytania tej samej informacji dla każdej listy, zmniejszając tarcie.

Projekt REA bez ikon zwiększa tarcie

Ikony mogą poprawić wygląd interfejsu, dodając atrakcyjności wizualnej, o której wiadomo, że poprawia (postrzegane) UX i użyteczność produktu. Jest to znane jako efekt użyteczności estetycznej i możesz przeczytać o tym tutaj (NN / G).

Gdy ikony są sparowane z tekstem, może poprawić dostępność, zapewniając alternatywny mechanizm przekazywania informacji - tekst ze wskazówką wizualną - co jest dobre dla osób z problemami poznawczymi, niedowidzenia, które nie widzą prawidłowo ikony itp.

Ikona czatu NAB jest wyraźna

Ikony mogą również pomóc w nawigacji osobom, które mówią (lub czytają) język interfejsu jako język inny niż podstawowy (lub wcale). Być może nie będę w stanie odczytać tekstu w interfejsie, ale ikony mogą pomóc mi zrozumieć, jak się poruszać i jak znaleźć to, czego szukam. Dotyczy to również realnego świata i dlatego mamy standardowe ikony łazienek, lotnisk, wind itp.

Pomimo mojej biednej katalońki mogłem z powodzeniem prać moje ubrania w Barcelonie dzięki ikonom

Ikony są złe

Źle zaprojektowane ikony mogą wprowadzać zamieszanie, gdy nie wiemy, co próbują nam przedstawić, zwłaszcza gdy nie towarzyszy im tekst lub podpowiedź.

Czy bez tekstu kwiat reprezentuje „centrum spa i odnowy biologicznej”?

Ikony dla ikony mają niewielką wartość i powodują hałas w interfejsie.

W projekcie po lewej ikony nie dodają żadnej wartości, więc je usunęliśmy i zmniejszyliśmy hałas

Ikony bez tekstu alternatywnego są mylące dla użytkowników czytników ekranu. Zwłaszcza jeśli po prostu odczytuje coś takiego jak „Gwiazdka” zamiast „Zapisz pracę”. Etykiety tekstowe pomagają zmniejszyć zamieszanie również dla widzących użytkowników.

Ikony są subiektywne. Ta sama ikona może oznaczać różne rzeczy w różnych witrynach (np. Gwiazdka za „oszczędzanie” i gwiazdka za „ocenę”). Ta sama ikona może oznaczać różne rzeczy w różnych kontekstach (np. Strzałka do udostępniania, odpowiedzi, przesyłania dalej, dalej). Ikony mogą być nieczytelne.

Co w ogóle oznaczają wszystkie różne ikony prania? Źródło

Cel ikon może być mylący

Czy to jest ikona statyczna czy element interaktywny? Czasami ikony są klikalne i wykonują akcję, co może być szczególnie mylące, gdy klikalne elementy znajdują się bezpośrednio obok nieklikalnych elementów i mają płaski kształt.

Gwiazda jest grubsza, więc wiem, że można ją kliknąć - ale czy przeciętny użytkownik? Jest oddzielony od innych, niedziałających ikon - czy to oznacza, że ​​zwykły użytkownik może go kliknąć?

Musimy upewnić się, że jest oczywiste, że ten element można kliknąć, co nazywamy afordancją - szczególnie, gdy jest to tylko ikona bez tekstu.

Ikony jako elementy interaktywne

Widziałeś przedmiot, który chcesz łatwo znaleźć w aplikacji lub witrynie? Wystarczy nacisnąć praktyczną ikonę „zapisz” dandysa! Ale czym właściwie jest ikona zapisu?

Która ikona kiedy?

Kiedyś była ikoną dysku w epoce skeuomorfizmu - w którym obiekt w oprogramowaniu był reprezentowany swoim odpowiednikiem w świecie rzeczywistym, w tym przypadku dyskietką . Dyskietka nigdy nie otrzymała uaktualnienia, ponieważ przenieśliśmy się z dysków na płyty CD na USB i do chmury, ale jej znaczenie jest nadal znane. Prawdopodobnie słyszałeś historię folkloru dziecka, które powiedziało „Wow, ktoś 3-D wydrukował ikonę Zapisz!” Po zobaczeniu IRL dyskietki 3 1/2 cala.

Nadal zobaczysz to w produktach Microsoft Office.

Ikona Microsoft Save

Aby odłożyć własność na Airbnb, kliknij serce

Airbnb Zapisz nieruchomość
Uwielbiam to miejsce, może zostanę tutaj!

Chociaż może nie uwielbiam tego miejsca, może jest to coś, co chcę odłożyć na później, aby poddać dalszej ocenie, ponieważ może zaspokoić moje potrzeby jako podróżnika. Airbnb najprawdopodobniej wybrał ikonę gwiazdki, ponieważ jest już używana do oceniania, a może chcemy odciąć miłość od oszczędzania, szczególnie w przypadkach, gdy użytkownik nie lubi tego robić (coś, co jest koniecznością, a nie zabawnym świętem ).

Produkty takie jak Twitter zacierają tę linię - mógłbym uderzać w serce w ramach walidacji społecznościowej (jak Instagram i Facebook) lub mógłbym użyć go, aby zapisać go dla siebie, aby odzyskać później. Nie chęć użycia serca jest szczególnie prawdziwa, gdy oznacza to już coś innego - na przykład lub reakcję - na przykład na Instagramie i Facebooku, którzy wrócili do skeuomorficznego projektowania i zdecydowali się na zakładkę reprezentującą „zapisz”. Znajdź swoje miejsce za pomocą fizycznego obiektu, takiego jak w książce (lub zrób na Kindle).

Średnia zakładka do opowiadania na później

Co z gwiazdą? ️ Jeśli dodam „gwiazdkę” do zapisania, czy to oznacza, że ​​jest to moja ulubiona? Jeśli użytkownik wróci i zobaczy, że jeden element na liście ma gwiazdkę, czy to oznacza, że ​​zalecamy go dla niego jako dobrego dopasowania? A może to uratowali?

Oznacz wiadomość gwiazdką w serwisie Slack

Amazon uniknął tych problemów razem, po prostu przycisk z tekstem „Dodaj do listy”, ikona sans.

Amazon - Dodaj do listy

Ikony z tekstem i odpowiednią afordanią mają wyraźne działanie i są bardziej użyteczne. Sprawia również, że czynności są znacznie bardziej dostępne dla osób korzystających z czytników ekranu, osób z niskim poziomem poznania itp.

Etykiety dodają kontekst do ikon

Zrozumienie ikon

Oprócz mylących działań na ikonach, istnieje bardzo niewiele ikon, które są powszechnie rozumiane.

W SEEK przeprowadziliśmy badanie dotyczące zrozumienia ikonografii.

Najpierw zapytaliśmy uczestników, jakiej ikony chcieliby kliknąć, aby odłożyć pracę na później (uniknęliśmy słowa „zapisz”, ponieważ nie chcieliśmy ich zalewać). To była odpowiedź tekstowa, w której mogli wyjaśnić, jakiego symbolu oczekują.

Wyobraź sobie, że ikona (symbol lub obraz) jest ukryta przez czarny kwadrat na powyższym obrazku, a ta ikona jest tym, co możesz kliknąć, aby odłożyć zadanie na później. Jakiego symbolu lub obrazu można się spodziewać?

Najpopularniejsze odpowiedzi to:

  1. Ikona gwiazdki (24%)
  2. „Zapisz” jako ogólną odpowiedź (15%) *
  3. Dyskietka (11%)
  4. Szafka na akta / kartoteki (6%)

* Nie jest jasne, co respondenci rozumieli przez „oszczędzanie”, ponieważ wielu nie opracowało. Niektóre napisały odpowiedzi, takie jak „Ikona zapisu dyskietki” lub „Ikona zapisu, tj. Dyskietka”, jednak nie jest jasne, czy wszyscy respondenci „zapisu” mieli na myśli to.

Gwiazdka jest również używana na stronie SEEK, więc możliwe, że jest to wypaczone dla respondentów odpowiadających za to, co wiedzą za czarnym kwadratem.

Zadaliśmy to samo pytanie, co w ankiecie na Twitterze, z 4 opcjami, a większość odpowiedzi na dyskietkę oznacza oszczędność!

Ankieta na Twitterze - która ikona oznacza oszczędzać?

Dyskietka nadal może być powszechnie rozumiana, ale jako projektanci nie chcemy, aby starożytne technologie zaśmiecały nasze interfejsy, dlatego przenieśliśmy się na Gwiazdę lub Serce. Czy w ogóle potrzebujemy ikony? Dlaczego nie po prostu przycisk „Zapisz”?

Następnie pokazaliśmy uczestnikom 4 ikony odizolowane od interfejsu i bez etykiet oraz zapytaliśmy, jakie słowa, frazy lub działania kojarzą z ikoną.

Jakie słowa, frazy lub działania kojarzysz z tą ikoną?

Żadna z ikon nie była powszechnie rozumiana i była otwarta na interpretację na podstawie wcześniejszych doświadczeń uczestników i umiejętności technicznych. Sugeruje to, że trzymanie etykiety obok ikon zwiększy użyteczność i łatwość użycia. Jest również zgodny ze wskazówkami dotyczącymi dostępności, w których nie powinniśmy polegać jedynie na wskazówkach wizualnych do opisania akcji - kontekst + wskazówki wizualne = użyteczne

Respondenci powtórzyli to zdanie w swoich odpowiedziach tekstowych:

„Większość rzeczy w Internecie wprawia mnie w zakłopotanie, dlaczego każdy widok nie może używać tych samych kształtów, aby robić to samo?”
„Ikony mogą być nieco mylące, ponieważ są dość subiektywne dla użytkownika i sytuacji, w której są używane”
„Lubię upraszczać sprawy - poszukiwanie pracy jest wystarczająco stresujące bez konieczności posiadania skomplikowanej witryny do nawigacji”

Ikona zakładki była najbardziej prawdopodobna dla uczestników, którzy stwierdzili, że nie wiedzieli, co ona zrobiła, jednak wielu zrozumiało, że odłoży to zadanie na później. Niektórzy uważali, że oznacza to, że praca / firma jest dla nich nagradzana lub dobrze pasuje do nich. Ogólnie rzecz biorąc, interpretowano to w ten sposób:

  • Zakładka (38%)
  • Nie wiem / nie jestem pewien (11%)
  • Oszczędź (11%)
  • Flaga (9%)

Ikona Serca była związana z miłością i rozpoznawaniem postów w mediach społecznościowych (wcześniejsza wiedza z Instagrama lub Twittera). Respondenci, którzy znali SEEK, odpowiedzieli, że został wykorzystany do zapisanych wyszukiwań. Jednak ogólnie rzecz biorąc, respondenci nie kojarzyli tego tak mocno z odkładaniem czegoś na później. Wiązało się to bardziej z pozytywnymi emocjami (miłość, jak, szczęście). Przez ikonę serca rozumiano:

  • Miłość (54%)
  • Lubię (35%)
  • Ulubiony (21%)

Niektórym naprawdę nie podobał się pomysł użycia serca:

„Miłość, nie dotyczy ogłoszeń o pracę”

Gwiazda została zrozumiana jako oznaczenie czegoś na później lub jako ważne. Jednak uważano również, że jest to wskaźnik, że praca jest dla nich dobrym dopasowaniem lub ocena firmy. Gwiazda była postrzegana jako:

  • Ulubiony (37%)
  • Oszczędź (20%)
  • Gwiazdka (17%)
  • Ważne (10%)
  • Ocena (8%)

Strzałka udostępniania została w przeważającej mierze błędnie zinterpretowana jako „naprzód” do „dalej”, jednak została pokazana poza kontekstem:

  • Idź naprzód (lub e-mail?), Obok lub na następnej stronie (81%)
  • Odpowiadanie na wiadomość e-mail (10%)
  • Udostępnij (8%)

Wcześniejsza wiedza wpływa na zrozumienie

Jak wszystko, co projektujemy, musimy testować zrozumienie naszych ikon z naszymi docelowymi użytkownikami. Trójkąt dla jednej osoby może być tylko trójkątem, ale dla fizyka lub matematyka może być jasne, że oznacza „zmianę”.

Kiedyś wygrałem grę Pictionary z poniższą bazgrołą w 3 sekundy. Co to znaczy? Dla ciebie prawdopodobnie nic. Ale dla mnie i mojego partnera Pictionary to mój pudel Penny. Nasza konkurencja nie była szczęśliwa.

Czy to oznacza dla ciebie Penny?

Kontekst ma znaczenie

Strzałka obok innej strzałki skierowanej w drugą stronę prawdopodobnie oznacza „następny”, natomiast jeśli znajdowałaby się obok serca, może być jasne, że oznacza „udostępnianie”. Testuj ikony w kontekście.

Jeśli ci się podoba, powinieneś umieścić na nim etykietę

Jeśli chcesz, aby większość użytkowników mogła zrozumieć, co robią ikony, użyj etykiet. Testy użytkowników wykazały, że użytkownicy byli w stanie poprawnie przewidzieć, co się stanie, gdy klikną ikonę z etykietą w 88% przypadków. W przypadku ikon bez etykiet liczba ta spadła do 60%. W przypadku niestandardowych ikon bez etykiety spadło to dalej tylko do 34% czasu. Przeczytaj więcej o ich badaniach tutaj.

TL; DR- Czy powinienem używać ikon? Które ikony?

To zależy.

Zadaj sobie pytanie, czy używasz tutaj ikon:

  • Pomóc użytkownikowi w znalezieniu tego, czego szuka?
  • Zmniejszyć obciążenie poznawcze?
  • Dodać do atrakcyjności wizualnej produktu?

Czy wybrana ikona:

  • Zrozumiałe dla użytkowników w danym kontekście? Czy testowano go z grupą docelową pod kątem zrozumienia?
  • Czy można kliknąć?
  • Towarzyszy Ci tekst zwiększający użyteczność i zrozumiałość?

Jeśli odpowiedziałeś twierdząco na powyższe, prawdopodobnie możesz użyć ikony.

Nie używaj ikon, gdy:

  • Wydają się nie dostarczać żadnej wartości;
  • Zaśmiec interfejs;
  • Są otwarte na interpretację.