Ikony w świecie UX. Symbole o wielkim znaczeniu.

Ikony odgrywały ważną rolę w przekazywaniu informacji już od starożytności. Na przykład hieroglify, które były używane w starożytnym Egipcie, składały się ze znaków wizualnych, takich jak obrazy i symbole, które służyły do przekazywania informacji. W starożytnej Grecji i Rzymie również używano inskrypcji i rzeźb, np. do przedstawienia bogów i herosów. Przeszliśmy, więc razem bardzo długą drogę, zatem jak to jest z tymi ikonami dzisiaj i dlaczego są tak istotne w świecie projektowania UX?

Ikony są z definicji wizualną reprezentacją obiektu lub akcji następującej np. po kliknięciu danego przycisku. Co istotne — jeśli element ten nie jest od razu jasny dla użytkowników, zostanie zredukowany do przyjemnego dodatku, jednocześnie frustrującego i utrudniającego użytkownikom wykonanie konkretnego zadania.

Jakie, więc zalety płyną ze świadomego korzystania z ikon?

• Ikony radzą sobie w każdej przestrzeni: są wystarczająco duże, aby można je było łatwo obsłużyć palcem na ekranie dotykowym, tak samo dobrze działają z kursorem myszy.
• Oszczędzają miejsce: mogą być na tyle małe, że paski narzędzi, dashboardy itp. mogą wyświetlać wiele ikon na stosunkowo małej przestrzeni.
• Ikony można szybko rozpoznać na pierwszy rzut oka (jeśli są dobrze zaprojektowane) — szczególnie dotyczy to standardowych i uniwersalnych wersji, których ludzie używają od lat.
• Nie ma potrzeby tłumaczenia ikon dla użytkowników międzynarodowych, pod warunkiem że ikony uwzględniają różnice kulturowe. Na przykład skrzynki pocztowe wyglądają odmiennie w różnych krajach, podczas gdy koperty są identyczne, dlatego to koperta stała się standardową ikoną do akcji wysyłania.
• Ikony mogą być przyjemne wizualnie i poprawiać estetykę projektu.

Jednak pomimo powyższych plusów, ikony często powodują problemy z użytecznością, gdy są zaprojektowane bez uwzględnienia ich wielu potencjalnych niebezpieczeństw.

Na pewno uniwersalne?

Jest kilka ikon, które cieszą się powszechnym uznaniem użytkowników. W przypadku typowych funkcji trzymajmy się ikon standardowo rozpoznawanych przez użytkowników. Oto kilka przykładów powszechnie rozumianych symboli:

• Kosz: usuwanie lub odrzucanie.
• Lupa: wyszukiwanie.
• Koperta: wysyłanie.
• Koło zębate: ustawienia lub personalizacja.
• Zegar: czas lub harmonogram.
• Kalendarz: data lub planowanie.
• Dom: strona główna.

Kłopoty pojawiają się, gdy zaimplementujemy z pozoru powszechnie znany element wizualny, który może mieć różne znaczenia. Serce i gwiazda to doskonałe przykłady. Według badań User Testing z 2017 roku, ikona serca dla użytkowników oznacza najczęściej dodanie do ulubionych lub listy zakupów, z kolei gwiazda bywa też zakładką oraz systemem oceny. W rezultacie bywa tak, że na pierwszy rzut oka, ikony te są trudne do precyzyjnej interpretacji. Nawet w kontekście pojedynczej aplikacji symbole te mogą być bardzo mylące, gdy użytkownik oczekuje jednego wyniku, a otrzymuje inny.

Wspomnieć można jeszcze o dwóch strzałkach w formie koła, która mogą przedstawiać repostowanie, powtórzenie, ale też odświeżenie strony. Z kolei strzałka w lewo dla niektórych może być udostępnieniem, przyciskiem wstecz, a dla innych cofnięciem zmian.

Ikony lubią etykiety tekstowe

Aby pomóc przezwyciężyć dwuznaczność, z którą borykają się prawie wszystkie ikony, obok elementu (lub pod) możemy umieścić etykietę tekstową, wyjaśniającą jej znaczenie w danym kontekście. Jeśli nawet używamy standardowej ikony, często bezpieczniej jest dołączyć etykietę, zwłaszcza jeśli nieznacznie zmieniliśmy oryginał, aby dopasować ją do swoich preferencji estetycznych lub ograniczeń.

Pamiętajmy, że labelki ikon powinny być widoczne przez cały czas, bez jakiejkolwiek interakcji ze strony użytkownika. W przypadku ikon nawigacyjnych etykiety są szczególnie ważne. Nie polegajmy na tooltipach, które nie tylko zwiększają koszt interakcji, ale także nie skalują się dobrze na urządzeniach dotykowych. Ikony wraz z etykietami ułatwiają wyszukiwanie i skanowanie informacji, o ile są umieszczone we właściwym miejscu. Warto umieszczać je zgodnie z naturalną kolejnością czytania, czyli ikona po lewej stronie etykiety, aby użytkownicy widzieli ją jako pierwszą.

Wspomniane powyżej badanie UserTesting wykazało także, że w przypadku ikon z labelkami użytkownicy byli w stanie prawidłowo przewidzieć co się stanie, gdy dotkną danego symbolu w 88% przypadków. W przypadku ikon bez etykiet liczba ta spadła do 60%. W przypadku nieoznaczonych ikon, które są unikalne dla aplikacji, użytkownicy poprawnie przewidzieli co się stanie tylko w 34% przypadków.

Z kolei, jeśli z jakiegoś powodu nie chcemy używać etykiet tekstowych towarzyszących ikonom, upewnijmy się, że zaimplementowaliśmy odpowiednie znaczniki alt, aby ich funkcja była nadal dostępna dla osób korzystających z czytników ekranu.

Urządzenie ma znaczenie

Na początku drogi projektanta/tki łatwo oprzeć się pokusie, według której ikona działająca dobrze w projekcie mobilnym (np. hamburger), świetnie przełoży się także na web. Otóż tak nie jest. Na ekranach mobilnych jest mniej elementów, które konkurują o uwagę użytkowników (zwyczajnie dlatego, że ekran jest mniejszy i mieści mniej informacji). Ekrany komputerów stacjonarnych są natomiast większe i zwykle zawierają dużo treści; użytkownicy mogą łatwo przegapić niektóre z nich w zależności od tego, która część ekranu przyciąga ich uwagę. Jeśli jedynymi elementami widocznymi obecnie w telefonie są logo, nagłówek, pojedynczy obraz i ikona menu, to ta ikona menu ma znacznie większe szanse na zauważenie przez użytkownika niż ta sama ikona wyświetlana w górnym rogu strony webowej pełnej atrakcyjnych treści.

Weźmy również pod uwagę względny rozmiar ikony w porównaniu z innymi elementami wizualnymi prezentowanymi na ekranie. W typowym nagłówku witryny mobilnej ikona menu zajmuje około 20–25% dostępnej szerokości ekranu. Gdy ten projekt zostanie powiększony na większym urządzeniu, rozmiar ikony zasadniczo pozostaje mniej więcej taki sam. W rezultacie na urządzeniach stacjonarnych (i większych tabletach, zwłaszcza w orientacji poziomej) ikona będzie mniejsza i mniej widoczna w porównaniu z innymi elementami na ekranie. Tego problemu można uniknąć na większych ekranach (gdzie zwykle jest dużo miejsca), po prostu wyświetlając nawigację zamiast zwijania jej pod ikoną. W ten sposób nie tylko opcje menu będą łatwiejsze do odnalezienia, ale można także uniknąć wielu problemów związanych z użytecznością, które wynikają z ukrywania globalnej nawigacji.

Na marginesie, nawiązując jeszcze do ikony hamburgera, to ciekawe, że te trzy poziome kreski zrobiły tak zawrotną karierę i stały się konwencją przycisku menu głównego. Jednak przy podejmowaniu decyzji o użyciu tego symbolu, weźmy pod uwagę dwa ważne czynniki:

• Testy A/B na podstawie artykułu Jona Rundle’a pokazały korelację między poprawną identyfikacją funkcji ikony hamburgera a wiekiem użytkowników. Ta ikona nie jest znana starszym użytkownikom. Dlatego z perspektywy użyteczności warto zadać sobie pytanie, kim jest większość naszych użytkowników.
• Badania przeprowadzone przez Nielsen Norman Group wykazały, że ikona hamburgera nadal wymaga etykiety dla pełnej przejrzystości. Inne testy przeprowadzone przez Jamesa Fostera wyraźnie potwierdziły, że ikona hamburgera nie jest tak czytelna, jak proste słowo „Menu”. Dlatego użycie słowa „Menu” (i nadanie mu wyglądu przycisku) może być bardziej użyteczne dla odwiedzających.

Specyfika mobilek

Przy okazji tematu ikon na ekranach mobilnych pamiętajmy, że elementy te muszą być wystarczająco duże, aby rejestrować działania wykonywane opuszkami palców, bez sfrustrowania użytkowników nie zamierzonymi działaniami. Szerokość przeciętnego palca dorosłego wynosi około 11 milimetrów, podczas gdy palec dziecka ma 8 mm; z kolei niektórzy koszykarze mają palce szersze niż 19 mm, jak widać pełna różnorodność. Warto zatem przytoczyć zalecenia Apple i Google dotyczące ich platform, w kontekście urządzeń mobilnych:

• Apple zaleca minimalny rozmiar elementu na poziomie 44 × 44 pikseli. Ponieważ fizyczny rozmiar piksela różni się w zależności od gęstości, specyfikacje Apple dotyczące pikseli najlepiej odnoszą się do 3,5-calowego wyświetlacza iPhone’a o rozdzielczości 320 × 480 pikseli.
• Google zaleca z kolei, aby przyciski miały co najmniej 48 × 48 pikseli niezależnych od gęstości (DP). Dotykowy cel o wymiarach 48 × 48 DP daje fizyczny rozmiar około 9 mm, niezależnie od rozmiaru ekranu.

Ważny jest jednak nie tylko rozmiar docelowy; istotna jest również wystarczająca przestrzeń między elementami. Głównym powodem utrzymywania minimalnej odległości między przyciskami jest uniemożliwienie użytkownikom dotknięcia niewłaściwej ikony i wywołania niewłaściwej akcji. Staje się to niezwykle ważne, gdy ikony takie jak „Zapisz” i „Anuluj” znajdują się tuż obok siebie. Co najmniej 2 mm wypełnienia między celami jest w takich przypadkach wartością zalecaną.

Własne ikony

Pamiętajmy — jeśli zdecydujemy się umieścić ikony w swoim interfejsie, najpierw przeprowadźmy porządne badania. Zapoznajmy się z ikonami używanymi przez konkurencję oraz z ikonami powszechnie używanymi na platformach, ponieważ będą one najbardziej rozpoznawalne dla Twoich użytkowników. Jeśli musimy już zaprojektować nowe ikony, zróbmy wszystko, aby były łatwe do zrozumienia i zapamiętania, postępując zgodnie z poniższymi wskazówkami:

• Postarajmy się, aby nasz projekt był prosty i schematyczny. Warto zmniejszyć ilość szczegółów graficznych, skupiając się na podstawowych cechach obiektu (skomplikowane szczegóły są trudne do odróżnienia przy mniejszych rozmiarach).
• Wykorzystajmy metodę 5 sekund: jeśli wymyślenie odpowiedniej ikony do czegoś zajmuje więcej niż 5 sekund, jest mało prawdopodobne, aby ikona skutecznie przekazała to znaczenie wielu użytkownikom.
• Zawsze sprawdzajmy rozpoznawalność ikon: zapytajmy ludzi, czego od nich oczekują.
• Jeśli chodzi o ikonografię, nie próbujmy wymyślać koła na nowo. Jasne, unikalne, kreatywne ikony mogą zwiększyć atrakcyjność wizualną interfejsu użytkownika, ale jeśli użytkownicy ich nie rozumieją, zaszkodzimy ogólnemu doświadczeniu użytkownika.
• Upewnijmy się, że nasze ikony wyglądają dobrze niezależnie od rozmiaru, w jakim są wyświetlane.
• W podobny sposób sprawdźmy, czy ikony mają wystarczający kontrast i czy są wystarczająco duże, aby zadbać o dostępność.
• Zgodnie z ogólnymi wzorcami ikony powinny być jednokolorowe. Ponadto nie używajmy różnych kolorów dla każdej z ikon, chyba że bezpośrednio przyczyni się to do zwiększenia ich użyteczności. W większości przypadków możemy jednak użyć innego koloru do wskazania aktywnej ikony, podczas gdy reszta ma inny kolor.
• W przypadku tworzenia niestandardowych ikon pamiętajmy tworzyć je w formacie obrazu wektorowego. W ten sposób można je łatwo skalować bez utraty przejrzystości i wyrazistości. 
• Gdy korzystamy z zestawu ikon, wszystkie elementy powinny mieć jednolity styl i rozmiar. Używanie ikon, które nie mają spójnego stylu, dezorientuje użytkowników i sprawi, że interfejs będzie wyglądał niechlujnie. Używanie symboli, które nie mają tego samego rozmiaru, będzie miało podobny efekt.

Możemy skorzystać z pomocy

Poza ręcznym tworzeniem graficznych elementów, co często może zająć dużo czasu, w znanej nam wszystkim Figmie dostępnych jest wiele wtyczek dot. ikon, za pomocą których możemy szybko i łatwo wstawiać gotowe ikony do swoich projektów. Osobiście, z czystym sumieniem poleciłbym trzy z nich:

• Material Design Icons, jest jedną z najlepszych i najbardziej użytecznych, z jakich kiedykolwiek korzystałem. Powód, dla którego ten konkretny pakiet ikon jest tak przydatny, związany jest z dużą liczbą ikon, łatwością w ich zrozumieniu i dbałością o spójność całego projektu.
• Icons8 zawiera ponad 6000 ikon w ramach 29 kategorii, od interfejsu użytkownika, przez media społecznościowe, nawigację i wiele więcej.
• Font Awesome to prawdopodobnie jeden z najpopularniejszych pakietów ikon do tworzenia stron internetowych. Podobnie jak Icons8, Font Awesome ma również ogromną liczbę ikon i ponad 50(!) kategorii.

Nie bagatelizujmy tematu

Żyjemy w świecie nasyconym informacjami wizualnymi. Często dokonujemy wielu wyborów w ciągu zaledwie kilku chwil. Do głowy przychodzą mi np. podróże i pobyt na dworcach czy lotniskach. Jak dostać się do naszej bramki? Gdzie znajduje się postój taksówek? Ikony pomagają nam przebrnąć przez bałagan, zdecydować, co jest ważne i zrozumieć otoczenie (niczym wspomniane hieroglify w starożytności). Ponadto sprawiają, że jesteśmy szczęśliwi i zaangażowani w produkty, których używamy na co dzień, a kiedy działają dobrze, nakręcają zadowolenie z marki.

Często bywa niestety tak, że ikony nie wykorzystują swojego całego potencjału. Źle zaprojektowane ikony utrudniają bowiem korzystanie z produktu, irytują użytkowników i szkodzą lojalności wobec marki.

Kiedy ikony poprawiają wrażenia użytkownika, a nie na odwrót, osiągają główny cel każdego przedsięwzięcia projektowego; poprawiają jakość korzystania z danego narzędzia. Pamiętajmy, że ikony mają na celu doprowadzić nas do celu, bez niepotrzebnego zastanawiania się. Nie jest to proste, ale jest to możliwe dzięki starannemu planowaniu, metodycznemu procesowi i badaniu naszych użytkowników.