Patrząc na poszczególne elementy strony internetowej, które również pozytywnie wpływają na doświadczenie użytkownika, logo jest budujące markę i zasługuje na własną uwagę. W tym artykule chcę podzielić się z Tobą kilkoma wskazówkami z naszej praktyki agencji, jak zapewnić wysokie doświadczenie użytkownika dla użytkowników Twojej strony internetowej podczas korzystania z logo.

Logo strony internetowej zastępuje punkt menu Start

Logo jest często umieszczone na pasku nawigacyjnym i ZAWSZE powinno być zlinkowane z główną stroną. Użytkownicy oczekują obecnie, że kliknięcie w logo spowoduje powrót do głównej strony. Logo zastępuje więc także link menu "Home", który czasami nadal widnieje na stronach internetowych, aby zlinkować do strony głównej. Nawigacja do strony głównej jako osobny element menu jest zbędna. I przez to oszczędza się także cenną przestrzeń.

Miasto Waren (Müritz) w północnych Niemczech, gdzie zlokalizowana jest nasza firma, zdecydowało się pomóc użytkownikowi, umożliwiając powrót na stronę główną za pomocą ikony domu. Z dwóch powodów prawdopodobnie została tutaj zastosowana: z jednej strony obok logo zostało umieszczone dodatkowe logo, co mogłoby zmniejszyć chęć kliknięcia w logo. Z drugiej zaś strony, być może zakładano, że użytkownicy tej strony internetowej są mniej zaznajomieni z Internetem. Szczerze mówiąc, ta ikona domu tylko nieznacznie zwiększa doświadczenie użytkownika, ponieważ na tej stronie internetowej występuje wiele oczywistych braków pod względem architektury informacji, interfejsu użytkownika oraz dostępności (w szczególności kontrastów przy czytaniu linków i tekstów). Strona internetowa miasta Waren (Müritz) pozostaje zatem przykładem negatywnym.

Responsywne logo: Dostosowanie logo do rozdzielczości urządzenia

Podczas przeglądania na komputerze stacjonarnym dostępna jest duża przestrzeń, dlatego nazwa firmy lub slogan w logu może być uwzględniona, podczas gdy w wersji mobilnej z powodu ograniczonej przestrzeni i uwagi logo powinno być umieszczone w zredukowanej formie.

W przypadku logotypów, podobnie jak w przypadku stron internetowych, od lat obserwuje się trend dostosowywania ich do rozmiaru, medium i otoczenia. Mówi się tu również o Responsywnym logotypie, co oznacza, że logo dostosowuje się do warunków otoczenia, aby perfekcyjnie się prezentować nawet na mniejszych mediach, co może wymagać nieco innej prezentacji. W przeciwieństwie do sztywnych logotypów, które wyglądają tak samo na wszystkich urządzeniach i rozmiarach ekranów, responsywne logotypy dostosowują się do różnych wymagań, zapewniając spójne i zoptymalizowane doświadczenia użytkownika na różnych urządzeniach. Przy czym logo zmniejsza się jedynie w formie, ale nie w swoim przekazie marki.

Pozytywnym przykładem jest szwajcarska firma Victorinox. Dla użytkownika wyświetlane jest duże ikon. Jedyną wadą jest to, że logo jest osadzone jako plik PNG, a nie SVG.

Podczas przewijania wyświetlane jest tylko element graficzny. W tle widoczna jest góra, podkreślająca szwajcarskie pochodzenie. W pierwszym obszarze widocznym jest ważne budowanie marki. Użytkownik powinien zrozumieć. Jesteś dokładnie w odpowiednim miejscu w Victorinox. Jeśli użytkownik przewinie stronę w dół, treści stają się ważne. Logo zmniejsza się, dając głównym treściom więcej miejsca. Nawigacja pozostaje przyklejona na górze, co również z punktu widzenia użyteczności jest bardzo sensowne.

Inny podejście prezentuje strona internetowa Guinness: Logo jest z nazwą firmy. Podczas przewijania logo staje się nieco mniejsze, zachowując widoczną nawigację. Gdy użytkownik zaczyna przewijać w górę, zarówno logo, jak i nawigacja ponownie zwiększają się, ponieważ zakładane jest, że użytkownik chce odwiedzić kolejne strony.

Commerzbank ma rozwiązanie, które nie jest optymalne na swojej stronie internetowej. Logo jest widoczne z nazwą firmy i jest osadzone jako SVG, co jest dobrze rozwiązane. Jednak konkuruje ono bardzo silnie z przylegającymi punktami nawigacji. Podczas przewijania, nawigacja znika całkowicie, a użytkownik musi przewinąć stronę do samego góry, aby zobaczyć nawigację. Lepiej byłoby, gdyby nawigacja pojawiła się natychmiast po rozpoczęciu przewijania, tak jak to zostało zrealizowane w przypadku czasopisma zeit.de.

Bardzo dobrze rozwiązane z punktu widzenia optymalizacji konwersji jest duże zdjęcie z liniami prowadzącymi wzrok dwóch osób. Patrzą one w kierunku przycisku, co automatycznie skupia uwagę odwiedzającego na przycisku. Takie linie prowadzące wzrok do akcji są bardzo skuteczne. Dobrze zrobione, Commerzbank!

Interesujące staje się, gdy przyjrzymy się przykładom w wersji mobilnej.

W wersji mobilnej logo Victorinox jest prezentowane jeszcze mniejsze i umieszczone centralnie, aby lepiej zorganizować możliwości interakcji dla użytkownika. Guiness umieściła tekst z prawej strony logo zamiast poniżej. Dzięki temu harfa ma więcej miejsca, a najwyższy pasek nawigacyjny nie jest zbyt duży. Z kolei Commerzbank po prostu ukrywa tekst w rozdzielczości smartfona.

Rola responsywnych logotypów w doświadczeniu użytkownika jest istotna, ponieważ pomagają utrzymać spójność wizualną i tożsamość marki, niezależnie od tego, w jaki sposób użytkownicy uzyskują dostęp do witryny internetowej.

Jeśli logo nie reaguje na zmieniające się rozdzielczości, może przyciągać zbytnio uwagę użytkownika. W przykładzie Hypovereinsbank bardzo dominujące logo konkurowało z umieszczonym z prawej strony call-to-action – szczególnie w widoku na smartfonie. Punkty nawigacyjne w środkowym szarym kolorze są łatwo pomijane w widoku na komputerze. Ogólnie ta witryna ma kilka dodatkowych błędów UX.

Aby zapewnić responsywne logo, projektanci muszą dostarczyć kilka adaptacji logotypu. Logo musi również dobrze funkcjonować na różnych tłach oraz w różnych rozmiarach. Im mniejsza rozdzielczość, tym bardziej detaliczne zmniejszane jest logo. Jednak nie może stracić podstawowej tożsamości marki. To jest sztuka przy zastosowaniu responsywnych logotypów. Dlatego jeśli zlecasz odnowienie marki, pomyśl już teraz o tym wymaganiu przy użyciu przyszłego logo.

Format pliku logotypu witryny internetowej

Zastosowanie responsywnych logotypów ma sens, ponieważ w zależności od rozdzielczości zostanie załadowany odpowiedni rozmiar. W przypadku mniejszych rozdzielczości, na przykład na smartfonie, zostanie załadowana także tylko mniejsza grafika. To oszczędza czas ładowania. Największy efekt na czas ładowania uzyskasz jednak, gdy:

1. dołączysz logo w prawidłowej rozdzielczości (również z informacjami o wysokości i szerokości). Często logotypy są dodane w zbyt dużej rozdzielczości i są następnie skalowane do widoku.
2. dołączysz logo w formacie wektorowym SVG zamiast PNG lub JPG.

Użycie logotypu witryny internetowej jako favicon

Wykorzystaj zredukowaną formę swojego logotypu, aby użyć go jako favicon. Zrezygnuj również z tekstów lub innych małych elementów, które nie są widoczne w małej rozdzielczości faviconu.

Podczas gdy strona Guinness ze wspomnianego przykładu dobrze wykorzystuje responsywne logo dla witryny, to jako favicon nie jest optymalne. Mały biały tekst Guinness nie jest widoczny i w ramach faviconu zmniejsza ogólny wrażenie. Kontrast jest niski. Wrażenie byłoby lepsze bez tekstu i skupione wyłącznie na harfie loga. Wszystkie inne przykłady z tego artykułu lepiej rozwiązały ten problem niż Guinness.

Jeśli szukasz agencji, która skupia się na responsywnych logotypach, skontaktuj się z nami. Jesteśmy z 4eck Media, specjalistami od doświadczenia użytkownika.

Jeśli zależy ci na profesjonalnej pozycjonowaniu, być może zainteresują cię również następujące pakiety ikonowe i szablony identyfikacji wizualnej: