Jak i dlaczego ikony potrafią usprawnić stronę internetową?

Nawet nie zdajesz sobie sprawy z tego, jak często spotykasz ikony w swoim codziennym życiu. Możesz je znaleźć w dowolnym interfejsie, na znakach drogowych, klawiaturach itd.

Dlaczego?

Ikony pomagają nam lepiej zrozumieć i zinterpretować informacje, nie tylko w codzienności, ale także podczas przeglądania stron internetowych.

Dlatego bardzo ważne jest to, aby zrozumieć, jak i dlaczego ikony potrafią usprawnić stronę internetową i nie tylko.

Pokażę Ci dzisiaj kilka przykładów i wyjaśnię, jak skutecznie używać ikon na stronach internetowych.

Ikony wspierają treść

Zwykle nie mamy problemów z tym, aby odróżnić dobrą stronę internetowej od kiepskiej.

Jednakże trudno jest nam powiedzieć, dlaczego jedna jest lepsza, a druga gorsza. Często się zdarza, że diabeł tkwi w szczegółach.

Kiedy patrzymy na treść strony internetowej, to wszystko tak naprawdę sprowadza się do czytelności.

Czytelność to po prostu szybkie zrozumienie głównych podpunktów oraz łatwość przetwarzania dalszych informacji przez każdego użytkownika.

Jak w prosty sposób osiągnąć czytelność i usprawnić stronę internetową?

Używając odpowiednich ikon, które mogą pomóc nam na kilka sposobów:

1. Zbiorą całą treść w jedną, zrozumiałą pigułkę.
2. Zwrócą uwagę użytkowników.
3. Zwiększą ogólną czytelność Twoich treści.

Rozwińmy teraz każdy punkt.

1. Ikony zbierają cały tekst w jedną pigułkę.

Dzięki ikonom można szybko podsumować to, o czym jest cały tekst.

Czasami nawet kilka ikon i małych grafik może szybciej przekazać większość informacji zawartych w treści, co sprawia, że użytkownik nie potrzebuje czytać dodatkowego i niepotrzebnego tekstu.

Pamiętaj, że trzeba podejść do ikon tak, jak do metafor.

Moim zdaniem, jedną z najważniejszych rzeczy dotyczących ikon jest to, że my jako ludzie jesteśmy wzrokowcami i czasami wystarczy jeden obrazek, aby przekazać „tysiąc słów”.

Przykładowo:

• – każdy z nas zrozumie, że ikona ta oznacza koszyk w sklepie internetowym
• – wiemy, że po kliknięciu tej ikony będziemy mogli zobaczyć kalendarz lub wybrać datę
• – większość z nas wie, że ikona odnosi się do jakieś formy kontaktu, najczęściej e-maila

Jeżeli uważasz, że mała ikona nie przekazuje wystarczająco dużej ilości informacji, możesz dodatkowo używać małych zdjęć lub zrzutów ekranu.

Dobrym przykładem jest opis możliwości platformy Brand24:

2. Ikony zwracają uwagę użytkowników.

Jak już wcześniej wspominałem, jedno zdjęcie może być warte „tysiąc słów”. To samo odnosi się do ikon.

W dzisiejszych czasach strony internetowe bez ikon i grafik mogą nam się wydawać bardzo nudne i brzydkie.

Wyobraź sobie zwykłą gazetę z samym tekstem – bez zdjęć ani banerów. Nuda.

Oprócz chwytliwych nagłówków, naszą uwagę przyciągają właśnie kolorowe zdjęcia, grafiki czy ikony.

Dlatego na początku zawsze spoglądasz na artykuł wyróżniający się ładną oprawą graficzną, mimo że treść nie jest dla Ciebie interesująca (ponieważ jeszcze o tym nie wiesz).

Pamiętaj, że bardzo ważne jest, aby dopasować i zintegrować wybrane ikony i grafiki z daną oprawą graficzną oraz całym designem, tak aby wszystko pasowało do siebie i tworzyło jedność.

Nie wystarczy wybrać kilka darmowych ikon i po prostu wrzucić je na swoją stronę internetową.

Ikony nie tylko przyciągną uwagę użytkowników, ale jednocześnie pomogą stworzyć strukturę strony oraz oddzielą różne funkcje lub usługi.

Przykładowo, możesz spojrzeć na usługi Positionly:

Każda ikona jest przypisana do innej funkcji, dodatkowo tworzą one zgrabną strukturę strony, co potrafi usprawnić stronę internetową.

Innym przykładem, do którego chciałbym się odwołać, jest sklep internetowy naszej rodzimej firmy x-kom.

x-kom również używa ikony, aby zwrócić uwagę na ważny tekst lub link.

Czasami sklepy internetowe wykorzystują te same lub podobne ikony w różnych miejscach.

Przykładowo, możemy użyć dwóch różnych ikon koszyków internetowych w różnych miejscach sklepu. Obie ikony są związane z zakupem jakichś przedmiotów, ale mogą mieć różne funkcje.

Ich funkcje stają się jasne poprzez odpowiednie usytuowanie lub dodanie tekstu obok albo pod spodem ikony.

Tutaj wchodzimy już w świat UX / UI i nie mogę nie wspomnieć o zasadzie bliskości.

Zasada bliskości mówi o tym, że powiązane ze sobą elementy należy pogrupować blisko siebie, tak aby tworzyły zorganizowany układ. Elementy niezwiązane ze sobą powinny być umieszczone dalej od siebie, aby podkreślić ich brak związku.

Wobec tego, gdy ikonka wózka sklepowego jest umieszczona blisko cen lub zdjęcia produktu, to wtedy wiemy, że te elementy tworzą całość i współgrają ze sobą, czyli np. klikając wózek obok danego produktu, dodajemy do naszego właśnie ten produkt, a nie inny.

Jeżeli ikonka wózka sklepowego jest umieszczona w menu z dala od jakichkolwiek produktów, to wiemy, że oznacza ona podgląd całego naszego koszyka.

Jeżeli będziesz kiedykolwiek używać zasady bliskości w swoim sklepie internetowym, upewnij się, że ikony mają jednolitą wielkość oraz marginesy.

Pamiętaj, żeby nie umieszczać ich byle jak, ponieważ klienci pomyślą, że Twój sklep jest zaprojektowany niechlujnie i nie będą chcieli dokonać zakupu.

W dalszej części artykułu szczegółowo opiszę zasady łączenia tekstu oraz ikon.

3. Ikony zwiększają ogólną czytelność Twoich treści.

Wylistowanie ważnych treści może zwiększyć czytelność Twoich artykułów. Jednak standardowe „kropki” mogą być już dla nas dosyć nudne.

Zamiast używać standardowego listowania, skorzystaj z atrakcyjnych ikon, aby zwrócić uwagę na dany punkt lub blok treści.

Przykład użycia ikony zamiast standardowej listy. Źródło: Moz.

Wylistowane podpunkty wyglądają nie tylko „czysto”, ale i stwarzają nam skojarzenia z poprawnością.

Jest bardzo mało ikon, które mogą istnieć samodzielnie

Dla niedoświadczonych użytkowników internetu zrozumienie i rozróżnienie poszczególnych ikon może być bardzo trudne.

Ze swoich doświadczeń wiem, że starsze osoby nie są w stanie pokazać mi różnic między ikonami, a nawet mają trudność, aby zrozumieć, co one wyrażają.

Co miało być tak proste i intuicyjne w rzeczywistości, nie jest tak łatwe do zrozumienia, a dla niektórych jest to po prostu koszmar.

Dla mnie, jako twórcy strony internetowych, wszystkie ikony są oczywiste, ale jeżeli prowadzisz sklep internetowy, jak sam się przekonasz, wielu z Twoich klientów nie zrozumie, dlaczego znacznik na mapce Google ma taki kształt, a dodatkowo jest umieszczony wszędzie tam, gdzie znajduje się Twój adres fizyczny.

Prostym rozwiązaniem tego problemu może być połączenie ikony oraz tekstu.

W ten sposób użytkownicy mogą przeczytać tekst i zapamiętać, co znaczy dana ikonka.

Jeżeli rozwijasz np. aplikację internetową, to dla doświadczonych już użytkowników możesz zaimplementować funkcję, która będzie pokazywała same ikonki bez tekstu.

Warto pamiętać, że wspomniana wcześniej zasada bliskości działa tak samo z ikonami i tekstem.

Porównanie panelu administratora z ikonami i bez

Na koniec chciałbym Ci pokazać, jak różnie wygląda panel WordPress z ikonami i bez nich.

Pomyśl – czy zwykłe ikony potrafią usprawnić stronę internetową, czy nie?

Panel administratora strony internetowej WordPress z ikonami.

Panel administratora strony internetowej WordPress bez ikon.

Jak oceniasz czytelność tych dwóch paneli administratora?

Usuwając ikony, tak naprawdę usunąłem część funkcjonalności – trudno jest mi teraz znaleźć cokolwiek i zabiera to więcej czasu.

Jak i dlaczego ikony potrafią usprawnić stronę internetową – podsumowanie

Ikony odgrywają istotną rolę w tworzeniu stron internetowych. Choć mogą one być bardzo małe i tak naprawdę niezauważalne, to dzisiaj są dla nas niezbędne i potrafią znacznie usprawnić stronę internetową.

Ikony mogą być świetnym sposobem, aby uwypuklić i uwidocznić zasadniczą część tekstu.

Dodatkowo są świetnym „przyciągaczem” uwagi w dobie tzw. skanowania treści.

Podczas korzystania z ikon dla własnego projektu, upewnij się, że wyrażają odpowiednie metafory, które użytkownicy z łatwością zrozumieją. Pamiętaj, aby każdą ikonę jednak opisać, aby uniknąć wszelkich nieporozumień.