Trochę było ostatnio lajfstajlowych materiałów, to czas wrócić do projektowania. Pogadajmy o ikonach, piktogramach w interfejsie (UI). I nie tylko, bo część z zagadnień będzie pokrywać się ze stosowaniem ikon również w druku, infografikach, w prezentacjach czy grafikach na portale społecznościowe. Tym bardziej, że piktogramy projektowaliśmy na długo przed pojawieniem się komputerów.
Jest też wersja video tego materiału na moim kanale na YouTube.
Ikony w interfejsie – po co o tym gadać?
Możecie zadać pytanie – po co w ogóle gadać o ikonach, co to za filozofia stosowanie czy projektowanie ikon? Tymczasem ten drobny element interfejsów potrafi bardzo szybko pokazać, czy projekt został przygotowany przez doświadczone osoby, czy raczej początkujących. Jak już dobrze wiecie, diabeł tkwi w szczegółach. I to jak dobierzemy ikony, ich rozmiar oraz ułożenie względem innych elementów może zdradzić czy mamy do czynienia z kimś, kto wie co robi.
Dodanie ikon do projektu może też pomóc zrozumieć interfejs lub wręcz przeciwnie – zupełnie zaburzyć nam zrozumienie jak działa.
Jakie są funkcje ikon w interfejsach?
W zasadzie możemy mówić o dwóch głównych celach w jakich stosuje się ikony.
Ikona jako dekoracja
Dekoracyjne ikony to takie, których głównym zadaniem jest dodanie ciekawego elementu do warstwy wizualnej. Czasami mogą pomóc w zrozumieniu jakiegoś konceptu, ale gdyby ich nie było, nie stracilibyśmy sensu informacji. Za to mogą pomóc zrozumieć kontekst.
Na przykład – jeśli mamy podsumowanie zamówienia w sklepie internetowym, informacje o dacie i adresie dostawy, można wpisać po prostu tekstem. Ale zdarza się, że dodajemy do tego tekstu drobne ikony, np. kalendarz obok daty. Bez tego kalendarza, przy odpowiednim formatowaniu tekstu, zrozumiemy, że patrzymy na datę i tę datę zrozumiemy bez ikony. Ale dodanie ikon w tym miejscu, zwłaszcza w kontekście całego komunikatu, sprawia, że ten element może przyciągnąć naszą uwagę szybciej i łatwiej nam będzie znaleźć te informacje.
Ikony stosujemy też często w web designie żeby wyróżnić wizualnie jakieś obszary na stronie, odciążyć trochę projekt od samych tekstów. I tak dość popularnych schematem są np. trzy obszary z ikonami nad tekstem i drobnym podpisem pod.
Ikona, która reprezentuje funkcję
No i tu robi się trochę poważniej. Jeśli stosujemy ikony, które mają częściowo lub w całości zastąpić informację tekstową, musimy mieć pewność, że odpowiednio dostosujemy jej wygląd do funkcji, którą ma spełniać. Większość interaktywnych ikon będzie właśnie ikonami funkcji.
Takimi funkcyjnymi ikonami są np. krzyżyki do zamykania okienek czy łapka w górę pod YouTubowym filmem. Obok takich ikon pojawiają się też teksty lub inne elementy interaktywne, jak np. pola formularza.
I tutaj założenie jest takie, że stosowanie ikon zamiast tekstów pomaga nam zaoszczędzić dużo miejsca lub zastąpić wiele słów jednym znakiem. Więc jeśli mamy ekrany mobilne lub systemy bardzo bogate w funkcje, zamiana tekstów na ikonki może pomóc nam wszystko zmieścić w mniejszych obszarze. Ale to rodzi również pewne zagrożenia.
Mystery meat navigation
I tu przechodzimy do ciekawego zjawiska, nazwanego mystery meat navigation (stworzyłam o tym już cały post na blogu). Termin został ukuty przez projektanta Vincenta Flandersa, który już w latach 90. naśmiewał się z webowych potworków.
Mystery meat navigation to taka nawigacja, w której cel każdego łącza jest niewidoczny lub niejasny, dopóki użytkownik nie wskaże na niego kursorem albo nie kliknie. Czyli na pierwszy rzut oka, nie jest zrozumiałe do czego kieruje nawigacja.
I tutaj taki jeden z moich ulubionych przykładów, który to pokazuje, to np. strona muzeum manggha (w wersji desktopowej). Gdzie poza ukrywaniem głównej nawigacji pod tak zwanych hamburger menu – o tym też pisałam już, dlaczego najlepiej tak nie robić – pojawiają się ikony, które swoim wyglądem nie mówią za bardzo, co oznaczają. I to takie ćwiczenie, które robiłam z moimi studentkami i studentami na zajęciach. Ciekawostka – nie znalazła się ani jedna osoba, która odgadła przeznaczenie obu tych ikon.
I tu jeszcze muszę dodać tego mema Luka Wroblewskiego – tak, to jest mem. Bo autor w nawiązaniu do terminu mystery meat navigation i rosnącej popularności hamburgerów i innych dziwnych ikonek w urządzeniach mobilnych, zaproponował prześmiewczo nazwy ikon nawiązujące do jedzenia – tak jak hamburger menu. I zaskakujące jest to jak wiele osób, pozbawione tego kontekstu komentarza i nie rozumiejących terminu mystery meat navigation, stworzyło na podstawie tego obrazka eksperckie treści pokazujące jak powinniśmy nazywać takie typy nawigacji. Więc tu doskonały przykład tego jak powstają w projektowaniu specjalistyczne treści.
Wracając do tematu – miałam okazję spotkać się w jakieś aplikacji z tą sytuacją podwójnego hamburgera i to jest bardzo problematyczne. Bo wymaga się wtedy od użytkowników, by zapamiętali co się gdzie znajduje. A to już dość duże obciążenie poznawcze, którego można się pozbyć zmieniając ikony lub dodając do nich etykiety tekstowe.
Problem z taką nawigacją polega też na tym, że jeżeli nie rozumiemy przeznaczenia jakichś ikon, czasami mogą wydawać się nam nawet nieinteraktywne, to jest duża szansa, że w nie nie klikniemy. No bo nie spodziewamy się, że znajdziemy tam coś wartościowego, coś czego szukamy. To wszystko można też dopasować do innego pojęcia zwanego zapachem informacji.
W tym materiale nie będę się już tym zajmować, ale możecie zerknąć na artykuł z nngroup.com na ten temat, a ja postaram się opowiedzieć o tym trochę więcej kiedy indziej.
Projektowanie ikon – czy ktoś to jeszcze robi?
Wspomniałam na początku o projektowaniu ikon, ale powiedzmy sobie szczerze – rzadziej spotkamy teraz osoby, które zupełnie od początku projektują całe zestawy ikon do każdego projektu. Przy tak popularnych teraz bazach, stronach z ikonami czy całymi, rozbudowanymi zestawami ikon do kupienia, dużo łatwiej i szybciej jest po prostu dopasować gotowe rozwiązania do naszych projektów.
Realia tworzenia produktów – czy w agencjach czy w firmach produktowych, rzadko pozwalają na poświęcenie wielu godzin na to by dopracować tak drobne elementy. Częściej kupuje się więc zestawy i dorabia do nich ewentualnie brakujące ikony korzystając z podobnych siatek i zestawów zasad.
Ale tak, ikony się projektuje, nawet jeśli nie są to całe zestawy, to pojedyncze znaki można doprojektować w biegu. I do tego celu będziemy potrzebować programu, aplikacji, które pozwolą nam na projektowanie wektorowe. Możemy zaprojektować nasze ikony w Figmie lub Sketchu, ale widzę, że wciąż sporo osób sięga po produkty Adobe i tutaj najlepszym z nich do takich celów jest Adobe Illustrator. W większości przypadków będzie to jednak przerost formy i jeśli robimy cały projekt w Figmie, to w tej Figmie tworzyłabym już ikonki.
Zadbajcie o dostępność ikon
Osoby, które mają trudności ze zrozumieniem języka, uczeniem się lub czytaniem, mogą polegać na ikonach, aby zrozumieć treść i dotrzeć do poszukiwanych informacji. Miałam taki przypadek wczoraj, korzystając z holenderskiej aplikacji i nie znając jeszcze na tyle języka by znać wszystkie słowa. Dotarłam do funkcji szerowania, której nazwy nie rozumiałam. Ale ikonka pomogła mi namierzyć to, czego szukałam.
Ale trzeba wziąć też pod uwagę osoby, które mogą mieć problem ze zrozumieniem ikon lub po prostu ich nie zobaczą – bo nie widzą. Wtedy szczególnie musimy zadbać o współpracę z osobami, które wdrożą nasze projekty tak, by mieć pewność, że projekt, który przygotowujemy będzie zrozumiały bez kontekstu obrazka. Tutaj kluczowe będą choćby teksty alternatywne – na ten temat poczytacie trochę w tym wpisie na blogu Kinaole.
Od wizualnej strony, klasycznie, musimy zadbać o odpowiednie kontrasty kolorystyczne i wielkości ikon. Szczególnie istotny jest obszar kliknięcia/tapnięcia by swobodnie trafić palcem lub kursorem w obszar ikony. Dobrą praktyką jest zadbanie o minimum 45-48 px szerokości i wysokości takiego obszaru – i oczywiście zadbanie by w tym obszarze nie pojawiły się inne interaktywne elementy. Oprócz zadbania o rozmiar takiej ikony, co przełoży się na jej czytelność, musimy mieć pewność, że będzie ona też zrozumiała.
W zależności od tego w jakiej kulturze się wychowaliśmy, skąd pochodzimy, ile mamy lat, jakie jest nasze wykształcenie, możemy ikony rozumieć na różne sposoby. Dlatego jeśli projektujecie własne, niestandardowe ikony, zawsze trzeba je przetestować z grupą docelową. Zdziwilibyście jak często, coś co nam wydaje się oczywiste, wcale nie jest takie dla innych osób.
Pogadajmy o wyglądzie
Dużo czasu poświęciłam na obszar użyteczności ikon, ale wróćmy jeszcze na chwilę do kwestii wizualnych.
W gruncie rzeczy to nie jest jakieś rocket science. Jeżeli zajmujecie się projektowaniem graficznym, to na jakimś etapie projektowaliście pewnie znaki, piktogramy, jakieś uproszczone formy. Najłatwiej będą miały osoby, które przychodzą z tłem w projektowaniu krojów pisma i logo.
Różnica będzie przede wszystkim w wielkości, a co za tym idzie, czytelności znaku, bowiem ikony w interfejsach stosujemy czasem naprawdę bardzo małe. I formacie wyjściowym – najpopularniejszym teraz jest .svg.
Patrzenie, analizowanie, kopiowanie, praca, praca, praca – żeby nauczyć się projektowania ikon musicie po prostu zacząć je projektować. Z pewnością niezbędna będzie umiejętność pracy na siatkach i zrozumienie zagadnień korekty optycznej. Super o tym opowiada książka Projektowanie ikon i piktogramów (Tania Quindós, Elena Gonzales-Miranda), którą już na blogu polecałam. Sporo materiałów na ten temat znajdziecie też w sieci, na końcu wpisu podrzucam jeszcze trochę linków.
Spójność w projektowaniu i dobieraniu ikon
Spójność to słowo klucz. I tu patrzymy na najmniejsze detale. Takie jak grubość linii, white space (czyli przestrzeń negatywowa), poziom szczegółowości, czy stosujemy więcej niż jeden kolor, jakie zaokrąglenia rogów wybieramy, czy forma to linearna ikona czy z wypełnieniem. Tworzymy zestaw zasad, którego pilnujemy tworząc kolejne ikony.
I byłoby idealnie, gdyby ten zestaw zasad był spójny ze stylem pozostałych elementów. Np. jeżeli stosujemy obłości, zaokrąglenia rogów np. w tłach kart albo notyfikacji, w przyciskach. To pewnie nasze ikony też jakieś obłości powinny wykorzystywać. To kluczowe gdy korzystamy z gotowców i dobieramy ikony np. od dwóch różnych twórców – widać często, że ikony nie są z jednego zestawu.
Ze spójnością można oczywiście też poszaleć w drugą stronę i sprawić, że ikony będą zbyt podobne do siebie, a przez to nierozpoznawalne na pierwszy rzut oka. I tutaj kilka lat temu, Google zaszczycił nas redesignem ikon produktów i faktycznie gdy ustawiamy je obok siebie to można skomentować to tym memem powyżej (źródło obrazka). Na szczęście w produktach Googla nie wszystkie ikony zostały zmienione, w dodatku mają podpisy pod obrazkami, więc efekt nie jest taki dramatyczny jak mógłby być gdyby wszystkie wyglądały podobnie i nie miały podpisów.
Projektując ikony trzeba wziąć pod uwagę, że występują pośród innych elementów jak teksty i przyciski, pola formularzy, nagłówki, komunikaty błędów i tak dalej. To istotne żeby móc odpowiednio dobrać formę, kształty i ułożenie na siatce. Jeżeli o to nie zadbamy, a z ikon postanowimy złożyć np. przyciski to ułożenie ikony obok tekstu sprawi, że będzie nam się wydawało, że ikona lewituje zbyt wysoko względem linii tekstu.
Jeden czy więcej zestawów ikon?
Jeżeli mamy bardzo małą stronę czy prosty produkt, często wykorzystanie tylko jednego zestawu, jednego stylu ikon nam wystarczy. Ale im bardziej będziemy treści i funkcje w produkcie rozbudowywać, tym większa szansa, że trzeba nam będzie kilku rodzajów ikon. Popularne jest rozdzielanie ikon wg zastosowania w komponentach UI lub wg kategorii funkcji czy produktu.
I na przykład jeżeli mamy jakieś panele opcji, toolbary, gdzie musimy zmieścić dużo różnych funkcji, często stosujemy tam bardzo małe ikony. Przykładem są panele w Wordzie. Zobaczcie nawet co robi Google Docs – panel narzędzi wykorzystuje małe ikony w jednym stylu. Ale już z boku, gdzie znajdziemy połączenie z innymi produktami tej firmy, ikony wyglądają inaczej, są trochę większe i są wielokolorowe.
Na ikonozę zachorował na pewno Facebook i tu możecie zobaczyć jak wiele różnych rodzajów ikon jest zastosowanych na jednej stronie. Ale zwróćcie uwagę, że każdy z obszarów, gdzie stosowane są różne ikony, stosuje je spójnie. Czyli mamy w produkcie X zestawów, ale mają swoje ograniczone zastosowanie.
Powszechne jest w większych produktach rozdzielanie stylu ikon np. w głównej nawigacji, nawigacji bocznej najczęściej od ikonek, które są stosowane np. na listach i w tabelach. Tutaj różnice często dotyczą stopnia szczegółowości – bo w tabeli najczęściej wykorzystujemy jakieś strzałki, lupki, ikony edycji, usuwania czy wyświetlania większej ilości informacji. Takie rozbudowane ikony po prostu w małym rozmiarze mogłyby być nieczytelne.
Z ikonami w interfejsie nie ma co przesadzać
Pokazywałam wam już przykład Facebooka. Łatwo tutaj stracić spójność w obszarze całego produktu. Im więcej stylów mamy, np. w design systemie, tym większa jest szansa, że ktoś weźmie ikony ze złego zestawu i zacznie stosować je wbrew pierwotnym założeniom. Utrzymywanie tak rozbudowanych bibliotek jest trudne i też przeszukiwanie ich, odnalezienie właściwego glifu gdy projektujemy, zwiększa czas, który na to poświęcamy.
Ostrożnie też z boczną nawigacją i ikonami. To jest bardzo powszechne żeby dodawać do etykiet głównych, czasem nawet podrzędnych stron, ikonkę, najczęściej z lewej strony tekstu (dla języków, które czytamy od lewej do prawej). I o ile jest to wizualnie atrakcyjne i jak mamy prosty, mały produkt, dość proste, to w momencie kiedy ten produkt zacznie rosnąć, a nam przybywać kolejnych stron, może pojawić się problem z dopasowaniem ikon do treści.
I miałam taki przypadek w produkcie finansowym, gdzie w pewnym momencie ikony obok tekstów zupełnie nic nie mówiły. To połączenie obrazu i tekstu było tak abstrakcyjne, że właściwie bardziej przeszkadzało, a czasami nawet wprowadzało w błąd – bo można było zupełnie inaczej zinterpretować obrazek do tekstu.
Ikony mogą pomóc nadać charakter produktu
Zastosowanie oryginalnych, ciekawych, niestandardowych ikon w projekcie może dać nam wizualną przewagę nad konkurencją. Zwłaszcza gdy stosujemy je jako dekoracje. Pamiętajcie jednak, że jeśli zaczynamy używać ich do reprezentowania funkcji, niestandardowe rozwiązania warto najpierw przetestować. Inaczej ryzykujemy tym, że ktoś po prostu nie będzie używać części produktu, bo nie ogarnie jak tam dotrzeć.
Wiem, że przypominam o tym któryś raz, ale szkoda by było się napracować i miałoby się okazać, że nasza praca idzie na marne 😀
Gotowe zestawy ikon do UI
No dobra. A skąd brać wspomniane przeze mnie gotowce? Do wyboru mamy darmowe ikony, na różnych licencjach i płatne rozwiązania, które z reguły dają nam licencje do komercyjnego użytku.
Jeżeli pracujecie w Figmie, dobrym miejscem do startu jest Figma Community, gdzie od niedawna macie do wyboru zarówno darmowe, jak i płatne pliki. W tym całą masę ikon.
Jedną z moich ulubionych stron jest flaticon.com, zwłaszcza od kiedy poszerzyli swoją bazę też o animowane ikony i coś, co nazywają naklejkami – czyli bardziej ilustracje, niż ikonki. W wersji darmowej ikonki są dostępne w formacie png i wymagana jest licencja atrybucji, czyli w projekcie musimy wspomnieć o autorstwie ikon. Co jest średnio wygodne, ale nadaje się np. do prezentacji.
Natomiast wersja płatna to 90 euro za rok i mnogość formatów, w tym .svg i nie trzeba dodawać przypisów. Więc za dostęp do dużej bazy, wydaje mi się dość sensowną ceną.
Na licencjach darmowych macie też:
Font Awesome – w darmowej wersji to ponad 2 000 ikon, w płatnej ponad 26 000. Nie wiem co chcecie robić z tyloma ikonami, ale jeżeli potrzebujecie ich dużo, to tutaj je znajdziecie 😛
Phosphor icons z biblioteką do Figmy – na licencji MIT, dostępny w różnych wariantach i zawierający całkiem ciekawe, niestandardowe glify
Ionicons – zestaw składa się z ponad 700 darmowych ikon w 3 stylach — konturowym, wypełnionym i “sharp”, czyli bez zaokrąglonych rogów. Zawierają także przydatne ikony logosów portali społecznościowych.
Majesticony – przydatny zestaw ikon stworzony przez Gerrita Halfmanna. Składają się z 720 darmowych ikon licencji MIT w dwóch stylach – liniowym i wypełnionym.
Feather – 287 ikon open source. Każda ikona została zaprojektowana na siatce 24×24, z naciskiem na prostotę, spójność i czytelność.
Material Symbols – ponad 3 tysiące ikon z Material Design dostępnych w formie fonta
United UI Icons – podobno największy zestaw ikon do Figmy (przynajmniej tak o sobie piszą). Wersja darmowa jest bardzo obszerna i różni się od płatnej detalami, które mogą być istotne dla większych zespołów
Doodle Icons – ikony w stylu odręcznych rysunków, więc nie sprawdzą się do każdego projektu, ale warto je mieć pod ręką
Ikonowa specjalizacja?
Na koniec chciałam jeszcze pokazać, że z ikon można zrobić specjalizację. Jest trochę osób, które zajmują się właśnie projektowaniem ikon – i tu mam na myśli głównie duże zestawy przygotowane do design systemów. Można zrobić z tego ścieżkę zawodową. I taką postacią, którą obserwuję online jest Bonnie Kate Wolf, której prace możecie zobaczyć na jej stronie. I jak popatrzycie na projekty i to jak je prezentuje, to zobaczycie też opcje dostosowania ikon. Na zasadzie – wielkości, palety kolorów, inwersje itd. Właśnie po tych opcjach dostosowania widać ile to jest pracy, żeby taki system przygotować. No i projektowała dla takich marek jak Netflix, Meta, lyft czy Airbnb, więc to też robi wrażenie.
Sprawdźcie też Helenę Zhang, która tworzy doskonałe artykuły o projektowaniu ikon i jest współautorką jednego z takich dużych zestawów do kupienia, który już podlinkowałam we wpisie (Phosphor icons).
Na koniec
Mam nadzieję, że komuś choć trochę przydał się ten wpis. Nie jest to dokładna instrukcja jak kreska po kresce rysować ikony – linki do tutoriali zostawiam w polecajkach poniżej. Ale chciałam zwrócić waszą uwagę przede wszystkim na kwestie użyteczności rozwiązania. Byśmy ostatecznie tworzyli nie tylko piękne, ale przyjazne projekty!
Garść linków
materiały o projektowaniu i doborze ikon:
Accordion Icons: Which Signifiers Work Best? – plusiki czy strzałki? A jeśli strzałki to kierujące w bok czy w gół? O tym opowiada tekst od nngroup.com
artykuły od wspomnianej Heleny Zhang o projektowaniu ikon (wymaga Medium Membership)
6 Easy Steps To Better Icon Design – kilka wskazówek jak lepiej projektować ikony
Icon as part of great user experience – o stosowaniu ikon w interfejsie, również z garścią badań
Yes, Icons Need Text Labels – krótkie video od nngroup.com o tym dlaczego ikony powinny mieć podpisy
dostępność:
Use ccons that help the user – krótki materiał od W3C o tym na co zwrócić uwagę stosując ikony
Accessible Icons: How to Make Them for Your Website – i trochę dłuższy artykuł pokazujący o co trzeba zadbać
