Ikony na stronie firmowej: jak sprawić, żeby obrazek znaczył to, co trzeba

Strzałka, chmurka, tajemnicza gwiazdka. Interfejs nie musi urządzać klientowi małych kalamburów. Ikona pomaga, gdy odbiorca rozpoznaje działanie albo otrzymuje obok czytelną etykietę. Jeśli zgaduje, czy kliknięcie otworzy szczegóły, pobierze plik czy zabierze go na inną stronę, obrazek zwiększa wysiłek. Sprawdźmy, gdzie symbol skraca drogę, a gdzie dwa zwykłe słowa wykonają lepszą robotę.

Zacznij od listy funkcji, nie od przeglądania bibliotek. Rozdziel ikony uruchamiające działanie, przekazujące informację oraz dekoracyjne. Potem zapisz dla każdej znaczenie, potrzebny opis i sposób sprawdzenia. Taki porządek pozwala zachować charakter wizualny bez przerabiania kontaktu, menu i oferty na test znajomości symboli, którego klient nie zamawiał.

Ustal rolę obrazka w konkretnym miejscu

Ten sam rysunek może pełnić różne funkcje. Koperta obok podpisu „Napisz do nas” wspiera widoczny tekst. Koperta bez podpisu jako jedyna zawartość przycisku musi samodzielnie zapowiadać działanie. Koperta w tle sekcji może być wyłącznie ozdobą. Każdy z tych przypadków potrzebuje innego traktowania, choć plik graficzny pozostaje ten sam.

W3C opisuje obrazy funkcjonalne jako elementy inicjujące działanie i zaleca, by ich tekstowa alternatywa objaśniała cel, a nie sam wygląd. Dla przycisku drukowania istotne jest więc działanie, nie informacja, że przedstawia drukarkę. To praktyczne rozróżnienie warto przenieść do opisu ikon w projekcie.

Nie każda ilustracja usługi jest kontrolką. Jeśli symbol przy opisie analizy jest dekoracją, nie powinien zachowywać się jak przycisk ani zajmować miejsca w kolejności przechodzenia klawiaturą. Jeśli otwiera szczegóły, odbiorca musi móc to rozpoznać przed kliknięciem. Podobne elementy wizualne nie powinny raz działać, a raz tylko udawać działanie.

W hipotetycznej firmie doradczej trzy ikony mogą oznaczać badanie, rekomendację i wdrożenie. Same rysunki lupy, żarówki i koła zębatego nie wyjaśnią granic tych usług. Nazwy i krótkie opisy nadal wykonują zasadniczą pracę. Ikona może pomóc zapamiętać podział, ale nie powinna go tworzyć zamiast treści.

Zapisz znaczenie jako zdanie, które można sprawdzić

Dla każdej kontrolki dokończ zdanie: „Po wybraniu tego elementu użytkownik…”. Otworzy menu, rozwinie odpowiedź, pobierze program albo przejdzie do formularza. Jeśli zespół nie potrafi uzgodnić jednego zakończenia, wybór rysunku jest przedwczesny. Najpierw rozstrzygnij działanie. Jeżeli strzałki mają zmieniać kolejność, sprawdź przestawianie elementów i alternatywę dla przeciągania, aby nazwa oraz symbol opisywały rzeczywisty wynik.

Strzałka w prawo jest dobrym przykładem niejednoznaczności. Może prowadzić do następnego kroku, oznaczać odnośnik albo po prostu sugerować kierunek czytania. Ustal znaczenie w całym serwisie i sprawdź sąsiedztwo. Ta sama strzałka w karcie i formularzu może być zrozumiała, jeśli tekst objaśnia różnicę; sama konsekwencja kształtu jej nie wyjaśni.

W mobilnym menu strony B2B szczególnie ważne jest odróżnienie przejścia do kategorii od rozwinięcia podmenu. Jeżeli wiersz wykonuje jedną czynność, a mała ikona drugą, oba cele trzeba wyraźnie rozdzielić i sprawdzić na telefonie. Przypadkowe otwarcie kolejnego poziomu nie powinno być ceną za próbę przeczytania nazwy usługi.

Zapis znaczenia pomaga także podczas zmian. Nowa osoba w zespole nie musi odgadywać, dlaczego wybrano konkretny znak. Może sprawdzić, czy planowana funkcja nadal odpowiada zapisanej roli. Warto dodać takie decyzje do rejestru decyzji projektowych, zamiast polegać na pamięci autora pierwszego projektu.

Widoczna etykieta i dostępna nazwa rozwiązują różne potrzeby

Etykieta widoczna na ekranie pomaga osobie, która nie zna symbolu. Dostępna nazwa to informacja, dzięki której między innymi czytnik ekranu może nazwać kontrolkę. Jedna nie zawsze automatycznie zapewnia drugą. W dobrze przygotowanym przycisku tekstowym często wykorzystuje się ten sam tekst, ale przy samej ikonie trzeba zaplanować nazwę świadomie.

Dokumentacja MDN o aria-label opisuje nadawanie dostępnej nazwy elementom, które mogą ją otrzymać, w tym przyciskom z ikoną. Zaleca pierwszeństwo powiązania z istniejącą widoczną etykietą tam, gdzie jest dostępna. Nie jest to uniwersalna poprawka polegająca na dopisaniu ukrytego tekstu do wszystkiego.

Przykładowo przycisk oznaczony krzyżykiem może otrzymać nazwę „Zamknij okno”. W przypadku kilku okien kontekst może wymagać doprecyzowania. Z kolei ikona obok widocznego słowa „Kontakt” nie powinna powodować odczytania dwa razy tej samej informacji. Poproś wykonawcę o sprawdzenie rzeczywistej nazwy w narzędziach przeglądarki i w próbie obsługi.

Nie traktuj krótkiego opisu pojawiającego się po najechaniu jako jedynego wyjaśnienia nieznanego znaku. Telefon nie zapewnia tego samego sposobu wskazywania, a obsługa klawiaturą potrzebuje własnej drogi. Podstawy sprawdzania opisów oraz kontrolek omawia dostępność strony firmowej.

Sprawdź rozpoznawalność przed oceną urody

Przygotuj kilka ikon w rzeczywistym otoczeniu, z tymi samymi etykietami co na stronie. Poproś osobę spoza projektu, by powiedziała, co się stanie po ich wybraniu. Nie pytaj jedynie, czy wyglądają znajomo. Ktoś może rozpoznawać rysunek pudełka i nadal nie wiedzieć, czy oznacza archiwizację, ofertę pakietową czy pobranie materiału.

Następnie wykonaj małą próbę bez podpisów, jeśli rozważasz ich usunięcie. Zapisz różne interpretacje i porównaj je z oczekiwanym działaniem. To ćwiczenie nie dowodzi uniwersalnego zrozumienia przez wszystkich użytkowników. Pozwala jednak szybko ujawnić niejednoznaczność, której nie zauważa zespół oglądający ikonę od początku projektu.

Jeśli odpowiedzi się rozchodzą, najpierw rozważ etykietę, dopiero potem kolejny wariant symbolu. Niektóre pojęcia nie mają wygodnego jednoznacznego obrazka. „Zakres odpowiedzialności” trudno zmieścić w dwudziestu kilku pikselach bez utraty znaczenia. W takich miejscach tekst nie jest porażką projektu, tylko właściwym narzędziem.

Zachowaj wyniki próby przy briefie strony premium. Zamiast zapisu „ikony mają być intuicyjne” otrzymasz konkret: odbiorcy mylą pobranie z otwarciem szczegółów, więc kontrolka potrzebuje podpisu. Taki wniosek łatwiej wdrożyć i odebrać niż ogólną deklarację nowoczesności.

Zbuduj zestaw o wspólnej logice, nie tylko kresce

Spójny zestaw powinien mieć zbliżoną grubość linii, sposób zaokrągleń i optyczną wielkość. Nie oznacza to, że każdy znak należy wcisnąć w identyczny kształt. Koło i wąski symbol mogą wymagać różnych korekt, aby obok siebie wyglądały równie wyraźnie. Oceniaj je w rzeczywistym rozmiarze, a nie tylko na powiększonej planszy.

Wybierz ograniczony zestaw znaczeń. Jeśli ten sam rodzaj pobrania raz oznacza strzałka w dół, raz dyskietka, a raz kartka, odbiorca uczy się niepotrzebnych wariantów. Z kolei jeden znak dla kilku odmiennych działań tworzy pozorną spójność. Uporządkuj zarówno wygląd, jak i słownik funkcji.

W okruszkach nawigacyjnych separator może przypominać strzałkę, ale nie musi być samodzielnym przyciskiem. W innych miejscach podobny znak faktycznie prowadzi dalej. Różnicę powinno wyjaśniać otoczenie oraz sposób zachowania, bez wymagania od klienta, żeby badał każdy element kursorem.

Zadbaj o źródła plików i zasady wprowadzania nowych znaków. Osoba dodająca usługę nie powinna wybierać przypadkowej ikony z innego zestawu tylko dlatego, że najlepiej opisuje temat. Lepiej mieć krótki proces dopasowania nowej potrzeby do istniejącego języka niż po roku odkryć, że strona mówi trzema alfabetami graficznymi naraz.

Stan działania powinien być czytelny bez zgadywania koloru

Ikona może zmieniać się po rozwinięciu sekcji, zapisaniu ustawienia lub rozpoczęciu zadania. Zapisz stany przed działaniem, w trakcie oraz po nim. Jeżeli plus zamienia się w minus, kontrolka nadal potrzebuje informacji o tym, czego dotyczy i czy sekcja jest otwarta. Sam rysunek nie zastępuje całej obsługi. W rozwijanym systemie zapisz także role kolorów i odstępów jako tokeny projektowe, aby te same stany kontrolek miały wspólne zasady na kolejnych ekranach.

Sprawdź fokus klawiatury, czyli wskazanie aktualnie obsługiwanego elementu, a także naciśnięcie i ewentualną niedostępność. Element, którego nie można aktualnie użyć, powinien mieć zrozumiały powód, jeśli wpływa to na zadanie klienta. Szara ikonka bez wyjaśnienia może wyglądać jak dekoracja albo błąd wczytania. Ważne znaczenie warto przekazywać także tekstem lub strukturą kontrolki.

W formularzu kontaktowym znak powodzenia nie powinien być jedynym potwierdzeniem wysłania. Podobnie ostrzeżenie przy polu wymaga wskazania problemu i sposobu poprawy. Symbol przyspiesza rozpoznanie kategorii komunikatu, a tekst wyjaśnia, co zrobić. Ich role się uzupełniają.

Ruch dopracuj dopiero po stanach. Mikrointerakcje strony powinny pomagać rozpoznać zmianę, bez opóźniania działania. Obracająca się strzałka nie naprawi niejasnej funkcji, choć może bardzo elegancko pokazać, że nadal nie wiadomo, co się wydarzyło.

Rozmiar rysunku nie jest rozmiarem miejsca do naciśnięcia

Niewielki symbol może znajdować się w wygodnym przycisku z odpowiednim odstępem dookoła. Duży rysunek może natomiast reagować tylko na wąskim fragmencie. Dlatego w odbiorze poproś o pokazanie rzeczywistego obszaru działania, a nie wyłącznie wymiarów pliku. To szczególnie ważne dla zamknięcia okna, rozwijania menu i sąsiadujących opcji.

W3C objaśnia minimalny rozmiar celu w kryterium 2.5.8, uwzględniając również odstępy oraz określone wyjątki. Nie sprowadzaj oceny do stwierdzenia, że każda mała ikona jest błędem albo każdy duży przycisk jest poprawny. Trzeba sprawdzić rzeczywisty cel, jego otoczenie i sposób użycia.

Własną próbę wykonaj jedną ręką na telefonie: otwórz menu, wybierz podkategorię, zamknij panel i przejdź do kontaktu. Zapisz przypadki uruchomienia sąsiedniej czynności. Nie traktuj tego jako pomiaru sprawności konkretnej osoby. Szukasz miejsc, w których układ wymaga niepotrzebnie precyzyjnego trafienia.

Uważaj też na nakładające się obszary. Karta może prowadzić do opisu, a ikona w jej rogu otwierać dodatkową akcję. Obie funkcje muszą być rozpoznawalne i nie powinny przypadkowo przejmować tego samego naciśnięcia. Jeżeli nie da się ich wygodnie rozdzielić, rozważ prostszy układ z osobnym, opisanym przyciskiem.

Przetłumacz znaczenie, nie sam podpis pod plikiem

Wersja językowa powinna zachować zarówno widoczną etykietę, jak i dostępną nazwę kontrolki. Zdarza się, że tłumacz otrzymuje tylko tekst widoczny w projekcie, a ukryte nazwy pozostają w poprzednim języku. Ujmij je w liście treści do przygotowania i sprawdź podczas odbioru razem z zachowaniem ikon.

Nie zakładaj również, że metafora jest czytelna w każdej sytuacji. Symbol może być rozpoznawalny, lecz sugerować inne działanie w danym otoczeniu. Jeśli nie masz podstaw do oceny, zachowaj wyraźną etykietę i sprawdź scenariusz z odbiorcą danej wersji. To użyteczniejszy krok niż pewność oparta na samym wyglądzie biblioteki.

Przy zmianie języka nie zmieniaj przypadkiem funkcji. Ikona pobrania obok nazwy pliku powinna nadal prowadzić do właściwego materiału, a nie do jego ogólnego opisu. Pomocne są wspólne próby wersji językowych strony, obejmujące nazwy, cele i rzeczywisty wynik działania.

Obejrzyj ikony w trudniejszych warunkach

Sprawdź zestaw na telefonie, przy powiększonym tekście i w obu paletach, jeśli strona oferuje tryb ciemny. Cienkie linie i delikatne obrysy mogą stracić wyrazistość. Nie oceniaj tego wyłącznie na dużym, jasnym monitorze, na którym powstał projekt.

Przetestuj długą etykietę i inną wersję językową. Ikona nie powinna wypychać tekstu poza przycisk ani odrywać się od właściwej nazwy. Sprawdź odstępy przy dwóch sąsiadujących kontrolkach. Równa odległość na planszy nie dowodzi, że klient nie wybierze sąsiedniej akcji podczas zwykłej obsługi telefonu.

Jeśli plik się nie wczyta, dostępna funkcja nie powinna zamienić się w puste miejsce bez opisu. Wybór sposobu osadzania oraz zachowania awaryjnego należy do wykonawcy, ale możesz zamówić konkretną próbę. Ważniejsze od formatu pliku jest to, czy użytkownik nadal rozpoznaje czynność i potrafi ją wykonać.

Przy kilku jednakowych ikonach sprawdź, czy ich nazwy odróżniają właściwe obiekty. Trzy kontrolki opisane wyłącznie jako „Pobierz” mogą utrudniać wybór dokumentu w spisie elementów interfejsu. Nazwa powinna pozwalać rozpoznać, czego dotyczy czynność, przy zachowaniu zrozumiałej etykiety widocznej na ekranie. Przećwicz to na programie warsztatu, opisie usługi i katalogu, zamiast na trzech identycznych plikach testowych.

Na koniec sporządź krótką listę: znaczenie, widoczna etykieta, dostępna nazwa, stany i wynik próby. Jeśli chcesz uporządkować taki zestaw w serwisie, zobacz zakres Aeneia Design.