Ikony to słownik, a nie dekoracja

Ikony interfejsu zachowują się jak język – a dane o ich rozumieniu uczą pokory. Słownik, który użytkownicy rozpoznają niezawodnie bez etykiety, to mniej więcej tuzin symboli: lupa, koło zębate, kosz, plus, krzyżyk, domek, strzałka powrotu. Wszystko poza tym tuzinem jest w najlepszym razie dialektem regionalnym, a w najgorszym prywatnym wynalazkiem. Reguły rzemiosła wynikają z tego wprost: domyślnie należy łączyć ikonę z etykietą, budżet na ikonę bez podpisu wydawać wyłącznie na prawdziwe uniwersalia, każdy glif rysować w jednej rodzinie na jednej siatce, jedną metaforę wiązać z jedną akcją w całym produkcie – a gdy dla pojęcia nie istnieje rozpoznawalny symbol, użyć słowa. Etykieta nie jest porażką projektową. Jest nią wypuszczenie zagadki. {.answer-block}

TL;DR

• Uniwersalny słownik ikon liczy mniej więcej tuzin symboli. Szukanie, ustawienia, usuwanie, dodawanie, zamykanie, ekran główny, cofnięcie, odtwarzanie – te niosą znaczenie same z siebie. Niemal wszystko poza nimi wymaga tekstu, bo użytkownicy zgadują niespójnie albo wcale.
• Ikona z etykietą to ustawienie domyślne; sama ikona jest przywilejem, na który trzeba zasłużyć. Ikonę bez podpisu usprawiedliwia prawdziwa uniwersalność albo wysoka częstotliwość użycia w ciasnej przestrzeni (pasek narzędzi obsługiwany codziennie), a nie to, jak czysto wygląda na makiecie.
• Jedna rodzina, jedna siatka, jedna grubość kreski. Wymieszany zestaw ikon czyta się jako usterkę, zanim użytkownik zdąży nazwać przyczynę – dokładnie tak jak akapit złożony trzema krojami pisma.
• Jedna metafora na akcję, jedna akcja na metaforę. Jeśli ołówek edytuje na jednym ekranie, ołówek edytuje wszędzie; a jeśli edytuje ołówek, nic innego już nie edytuje.
• Gdy symbolu nie ma, trzeba użyć słowa. Pojęcia abstrakcyjne – „stan synchronizacji”, „obszar roboczy”, „insighty” – nie mają ikony, którą użytkownicy rozpoznają, a wymyślanie jej produkuje zagadkę tam, gdzie etykieta nie kosztowałaby nic.

Ile ikon użytkownicy naprawdę rozpoznają?

Założycielskim złudzeniem ikonografii jest przekonanie, że obrazki są językiem uniwersalnym. Stulecie pracy nad piktogramami mówi co innego: symbole stają się uniwersalne powoli, przez masową i wielokrotną ekspozycję, a zbiór, który przekroczył ten próg w interfejsach, jest niewielki. Lupa znaczy „szukaj”. Koło zębate znaczy „ustawienia”. Kosz usuwa, plus dodaje, krzyżyk zamyka, domek prowadzi na ekran główny, trójkąt odtwarza. Garstka kolejnych – ołówek, kłódka, dzwonek, strzałka do tacki oznaczająca pobieranie – plasuje się tuż poniżej, rozpoznawana przez większość w kontekście.

Potem jest urwisko. Symbol udostępniania nie jest jednym symbolem: Apple rysuje prostokąt ze strzałką w górę, Android trzy połączone kropki i żaden z nich nie czyta się niezawodnie dla kogoś, kto żyje na drugiej platformie. Serce, gwiazdka i zakładka znaczą wszystkie „zachowaj to, w pewnym sensie”, a każdy produkt definiuje to inaczej – dodanie do ulubionych, polubienie, odłożenie do przeczytania – więc sam symbol nie powie użytkownikowi, w jaką umowę właśnie wchodzi. Menu hamburgerowe stało się rozpoznawalne dzięki latom wszechobecności, a mimo to niezawodnie tłumi zaangażowanie, właśnie dlatego, że ukrywa, zamiast pokazywać. A za tymi spornymi przypadkami zaczyna się otwarte morze: nie istnieje rozpoznawany przez użytkowników symbol dla „pulpitu”, „integracji”, „obszaru roboczego” ani dla żadnego pojęcia, które produkt wymyślił w zeszłym kwartale.

Uczciwe pytanie projektowe o dowolną ikonę nie brzmi „czy ten rysunek wyraża pojęcie?” – dla autora wyraża je każdy rysunek. Brzmi ono: „jaka część osób widzących interfejs po raz pierwszy powie, co to znaczy, bez etykiety, i wszystkie powiedzą to samo?”. A to pytanie da się przetestować w jedno popołudnie: wystarczy pokazać sam glif, pozbawiony kontekstu, na jakieś pięć sekund, zapytać „co to zrobi?” i policzyć jako rozpoznanie wyłącznie odpowiedzi zbieżne. Klasyczny próg zrozumiałości dla symboli publicznych to mniej więcej dwie trzecie zgodnych wskazań, a większość wymyślonych ikon interfejsu wraca jako rozsypka domysłów – i to jest sposób, w jaki test mówi, żeby użyć słowa. Dla tuzina symboli odpowiedź jest wysoka – a najostrzejsze badania rozpoznawalności twierdzą, że nawet tuzin to hojna ocena. Dla całej reszty należy projektować tak, jakby odpowiedź była niska, bo taka właśnie jest.

Reguła etykiety

Domyślna kompozycja to ikona plus widoczna etykieta tekstowa. Ikona kupuje szybkie rozpoznanie i łatwość przeglądania wzrokiem, etykieta niesie właściwe znaczenie, a razem obsługują zarówno wprawnego stałego użytkownika, jak i osobę, która przyszła po raz pierwszy. Nawigacja bez etykiet ma swoją nazwę – „mystery meat”, mięso niewiadomego pochodzenia – i zamienia interfejs w test pamięci, w którym każde błędne zgadnięcie kosztuje jedną podróż tam i z powrotem.

Sama ikona to budżet, który wydaje się rozmyślnie, a uprawnione zakupy są dwa. Prawdziwe uniwersalia na konwencjonalnych pozycjach: lupa w nagłówku, krzyżyk na panelu, który da się zamknąć – tutaj etykietą jest sama konwencja. Narzędzia o wysokiej częstotliwości w ciasnej przestrzeni: pasek formatowania obsługiwany kilkadziesiąt razy dziennie, gdzie etykiety zjadłyby obszar roboczy, a powtarzanie uczy całego zestawu w ciągu jednej sesji – zawsze z nazwami dostępnymi dla technologii asystujących i z dymkami podpowiedzi wszędzie tam, gdzie istnieje wskaźnik myszy. Na ekranie dotykowym nie ma najechania kursorem, więc rozwiązaniem awaryjnym dla pierwszego użycia jest etykieta albo długie przytrzymanie odsłaniające znaczenie, bo „można się nauczyć przez powtarzanie” opisuje dziesiąte użycie, a nie pierwsze.

Czego nigdy nie usprawiedliwia sama ikona, to estetyka. Rząd glifów bez podpisów wygląda czyściej na zrzucie do portfolio, bo oglądający zrzut z portfolio niczego nie próbuje osiągnąć. Użytkownik próbuje. To ten sam kompromis, który przewija się przez całą tę serię – ruch służący prezentacji zamiast użytkownikowi, pola formularza istniejące dlatego, że łatwo było zapytać – wypolerowanie dla obserwatora, opłacone tarciem dla uczestnika.

Jedna rodzina, jedna siatka

Zestaw ikon to typografia dla obrazków i podlega tej samej dyscyplinie. Każdy glif w produkcie pochodzi z jednej rodziny: jedna siatka (najczęściej 24 px), jedna grubość kreski, jedno potraktowanie narożników, jedna polityka wypełnienia kontra kontur. Użytkownicy nie potrafią nazwać niespójności ikon, ale rejestrują ją natychmiast – gruby, wypełniony kosz obok koła zębatego o włoskowatym konturze czyta się jako „coś jest nie tak z tym produktem”, czyli wizualny odpowiednik literówki.

Dyscyplina ma trzy części. Rysować na siatce, umieszczać na celu: glif żyje na swojej siatce 24 px, a otaczające go pole dotyku trzyma minimum platformy (44 pt na iOS, 48 dp w Material), dokładnie tak, jak przyciski i pola respektują minimalne rozmiary celu – mały glif jest w porządku, pole dotyku wielkości glifu już nie. Wyrównywać optycznie, nie geometrycznie: trójkąt odtwarzania wyśrodkowany według prostokąta obejmującego widocznie odstaje od środka, bo jego masa wizualna przechyla się w lewo; przesunięcie go w prawo jest słuszne w tym samym sensie, w jakim słuszne są optyczne korekty odstępów – oko stoi wyżej niż linijka. Znaczenie nieść stanami, a nie stylami: wypełnienie kontra kontur może kodować zaznaczone kontra nieaktywne (uzasadniona konwencja w paskach zakładek), ale wtedy koduje wyłącznie to – nie może gdzie indziej dorabiać jako wybór dekoracyjny bez zepsucia sygnału.

We własnych aplikacjach na iOS rodziną są SF Symbols w jednej grubości, wymuszone na warstwie design kitu – glify skalują się według tych samych ról typograficznych co tekst, więc zabłąkany import nie trafi na produkcję, nie kłócąc się widocznie z systemem. Taka jest ogólna postać tej reguły: wybrać jedną bibliotekę, używać wyłącznie jej, a gdy brakuje potrzebnego glifu, narysować go na siatce rodziny i w grubości rodziny – nigdy nie importować obcego glifu z drugiego zestawu tylko dlatego, że był o jedno wyszukiwanie dalej.

Jedna metafora na akcję

Słownik działa tylko wtedy, gdy jest konsekwentny. Jeśli ołówek znaczy „edytuj” na ekranie profilu, ołówek znaczy „edytuj” wszędzie – a nie „napisz” w jednym rogu i „zmień nazwę” w drugim. Przyporządkowanie jest przy tym wzajemnie jednoznaczne: jeśli edytuje ołówek, żaden inny symbol już nie edytuje; koło zębate otwierające „edycję ustawień” obok ołówka otwierającego „edycję szczegółów” zmusza użytkowników do trzymania w głowie dwóch haseł na jeden czasownik.

Ta sama konsekwencja rządzi dialektami platform. Na iOS udostępnianie to prostokąt ze strzałką, na Androidzie glif trzech połączonych kropek, a produkt webowy wybiera konwencję pod swoją publiczność i się jej trzyma. Strzałki powrotu wskazują w lewo w językach pisanych od lewej do prawej i odwracają się w pisanych od prawej do lewej – natomiast sterowanie odtwarzaniem się nie odwraca, bo trójkąt odtwarzania jest konwencją zaczerpniętą z przesuwu taśmy, a nie z kierunku czytania. To nie są ciekawostki: to różnica między mówieniem dialektem użytkownika a zmuszaniem go do nauki własnego.

Utrzymanie tego przyporządkowania wymaga księgowości: glosariusz ikon w systemie projektowym – ten symbol, to znaczenie, nigdzie indziej – egzekwowany tak samo jak tokeny odstępów i role typograficzne. Bez glosariusza każda nowa funkcja negocjuje własne metafory, a trzy kwartały później produkt ma cztery strzałki, z których każda znaczy co innego.

Kiedy wygrywa słowo

Najmocniejszym ruchem w ikonografii, podobnie jak najmocniejszym ruchem w projektowaniu formularzy, bywa usunięcie. Strona ustawień nie potrzebuje dedykowanego glifu przy każdym wierszu; wiersze są już opisane, a ikony dokładają koloru, rozcieńczając przy tym sygnał tych kilku symboli, które wykonują prawdziwą pracę. Sekcja „insighty” na pulpicie nie ma symbolu – żarówka? wykres? iskierka? – bo pojęcie nie ma konwencji piktograficznej, a każdy kandydat jest rzutem monetą, który różni użytkownicy rozstrzygają różnie.

Test jest symetryczny wobec reguły etykiety: ikona zasługuje na swoje miejsce wtedy, gdy rozpoznanie wygrywa z czytaniem – gdy symbol rozstrzyga się szybciej niż jego słowo, co jest prawdą właśnie dla uniwersalnego tuzina i dla wyuczonych narzędzi o wysokiej częstotliwości. Wszędzie indziej słowo nie jest rozwiązaniem awaryjnym. Jest projektem.

Często zadawane pytania

Czy ikony interfejsu powinny zawsze mieć etykiety?

Domyślnie tak. Ikony bez podpisu są uzasadnione w dwóch przypadkach: przy symbolach naprawdę uniwersalnych na konwencjonalnych pozycjach (lupa w nagłówku wyszukiwania, krzyżyk na panelu, który da się zamknąć) oraz przy narzędziach o wysokiej częstotliwości, których znaczenia szybko uczy powtarzanie – zawsze z nazwami dostępnymi dla technologii asystujących i z dymkami podpowiedzi dla osób korzystających ze wskaźnika. Wszędzie indziej ikona z etykietą obsługuje zarówno nowych, jak i powracających użytkowników.

Ile ikon użytkownicy rozpoznają bez etykiet?

Niezawodnie mniej więcej tuzin: szukanie, ustawienia, usuwanie, dodawanie, zamykanie, ekran główny, cofnięcie, odtwarzanie oraz kilka niemal uniwersalnych, jak ołówek i kłódka. Poza tym zbiorem rozpoznawalność gwałtownie spada i zależy od platformy – samo udostępnianie ma niekompatybilne konwencje Apple i Androida – więc każdą ikonę spoza rdzenia należy traktować jako wymagającą tekstu.

Czy interfejs może mieszać ikony z różnych bibliotek?

Nie – zestaw ikon produktu powinien pochodzić z jednej rodziny, o jednej siatce, jednej grubości kreski i jednym potraktowaniu narożników. Wymieszane rodziny czyta się jako wizualną niespójność, którą użytkownicy wyczuwają od razu, nawet jeśli nie umieją jej nazwać. Gdy brakuje potrzebnego glifu, należy narysować go zgodnie ze specyfikacją rodziny, zamiast importować z drugiej biblioteki.

Kiedy w projekcie lepiej użyć etykiety tekstowej niż ikony?

Zawsze wtedy, gdy pojęcie nie ma powszechnie rozpoznawanego symbolu – a to obejmuje większość abstrakcyjnych pojęć produktowych, takich jak obszary robocze, integracje czy insighty. Ikona zasługuje na swoje miejsce wtedy, gdy rozpoznanie wygrywa z czytaniem; jeśli użytkownicy musieliby symbolu się uczyć albo go zgadywać, słowo jest szybsze, jaśniejsze i nie jest porażką projektową.