Widok i UX sklepu internetowego

Istotnym elementem strony internetowej jest, jak w przypadku każdej formy publikacji, jej projekt układu graficznego (ang. layout). W odniesieniu zaś do publikacji www ― jej graficzny interfejs użytkownika jako wszystko to, co odwiedzający widzi przed oczami. Warto od razu przy jej tworzeniu skupić się na odczuciach użytkowników serwisu i pracować nad użytecznością internetową.

Dla wielu właścicieli firm jest to najważniejsza część budowy serwisu. Pewnie i ty chcesz, żeby twoja strona była znakiem marki w sieci, z odpowiednim logo, grafiką, zdjęciami, może filmem. Chcesz, żeby twoi klienci docierając w Internecie do strony www nabierali zaufania do oferty, aby ich uwaga była odpowiednio zaangażowana i aby chcieli kupić produkty, skontaktować się z tobą. W przeciwnym razie opuszczą stronę bez zamiaru powrotu, a telefony pozostaną milczące.

Najlepsze zasady tworzenia widoków stron www

Layout strony, czyli jej grafika, musi być spójna wobec wszystkich podstron. Na tę spójność składają się:

  • jednolita kolorystyka strony;
  • użyta czcionka, jej rozmiar;
  • formatowanie treści: relacja tytułów do śródtytułów, związane z nią pogrubienia;
  • wyróżnienia (np. linków) na stronie;
  • czytelność, prostota i realizacja najważniejszych funkcji (rejestracja, zakupy, obsługa);
  • ujednolicona forma nazewnictwa;
  • logo w odpowiednich miejscach;
  • unikalna cecha oferty (Unique Sell Proposition) ukazana w odpowiednich miejscach;
  • wyświetlana ścieżka konsumenta w sklepie, czyli tzw. okruszki chleba lub tzw. ślad z okruszków (ang. breadcrumbs).

Okruszki pomagają w zachowaniu orientacji w obszarze strony internetowej. Dzięki nim użytkownik lub robot internetowy sprawniej identyfikują kategorie, menu i podstrony. Łatwiej zdefiniować połączenia pomiędzy stronami i określić strukturę wewnętrzną.

Okruszki można podzielić wg sposobu, w jaki powstały:

  • wg atrybutów stron ― ponieważ powstają w przypadku użycia filtrów podczas wyszukiwania produktów na sklepie i tworzona jest wówczas dynamicznie ich ścieżka wg wyszukiwanych parametrów;
  • wg miejsca w serwisie ― ponieważ popularna i obecna w większości serwisów nawigacja w górnym pasku wyświetla ścieżkę odwiedzanych stron i pozwala na przejście do poprzednich podstron po kliknięciu;
  • wg aktywności użytkownika ― ponieważ nawigacja okruszkowa dynamicznie tworzy ścieżkę, którą przebywa użytkownik i wyświetla ją najczęściej w górnej części strony pod menu, a to pozwala nie tylko prześledzić drogę przebytą w obszarze serwisu, ale również łatwo wrócić w dowolne odwiedzane miejsce.

Nawigacja okruszkowa jest ważnym czynnikiem SEO. Google wyświetla ślady z okruszków w wynikach wyszukiwania, więc dobrze wdrożone generowanie okruszków poprawia linkowania wewnętrzne i strukturę strony.

Responsive Web Design i aplikacje mobilne.

Czy wiesz, że projektowanie każdej strony sklepu powinno się zacząć od szablonu na urządzenia mobilne?

Nawet Google wyróżnia dwa osobne indeksy dla wersji mobilnej (mobile), a preferuje strony użyteczne i sprawnie działające w tej wersji. Jak istotne są strony responsywne (możliwe do wyświetlenia na różnych urządzeniach), niech mówi fakt, że są kraje i branże, w których ilość transakcji na urządzeniach mobilnych przerasta te stacjonarne.

Strona mobilna nie może zawierać tylu informacji, co strona przeznaczona na urządzenia stacjonarne. Możesz spróbować takiego eksperymentu, ale wzbudzisz tylko irytację nadmiarem wyświetlanych informacji. Pamiętaj też, że w przypadku np. telefonów komórkowych częste przewijanie treści kciukiem i szybkie przeglądanie przekreśla  wartość  wszystkich technik marketingowych i USP, które działają na pulpicie.

RWD (Responsive Web Design) to taka forma projektowania strony mobilnej, żeby automatycznie dopasowywała się ona do urządzenia użytkownika, który ją przegląda. W efekcie twojego dostosowania się do wymogów RWD twój sklep musi mieć kilka swych wersji graficznych. Zazwyczaj to wersja na komputery stacjonarne, telefony komórkowe oraz laptopy. Każde z tych urządzeń ma inną powierzchnię widoku i rozdzielczość, i w inny sposób jest obsługiwane przez użytkownika. Na przykład laptop to zazwyczaj myszka lub touchpad, tablet obsługujemy rękoma, a telefon kciukiem lub palcem wskazującym. Idealnym rozwiązaniem jest wynajęcie doświadczonego eksperta UX/ UI, który zaprojektuje osobno każdą ze stron dla konkretnych urządzeń. Podobnie strony produktów, kategorii i podstrony statyczne. A jeśli korzystasz z gotowych szablonów graficznych, to zazwyczaj rozwiązania RWD mają one już wdrożone, więc musisz jedynie skupić się na udoskonaleniu i optymalizacji tych szablonów z punktu widzenia swoich potrzeb.

Jak każde rozwiązanie, tak i RWD posiada zarówno wady, jak i zalety.

Zalety RWD:

  • Oszczędność czasu,
  • Większa wydajność,
  • Komunikacja w obrębie jednej domeny,
  • Niższe koszty utrzymania jednej wersji witryny,
  • Lepsza indeksacja witryny,
  • Kompleksowe śledzenie ruchu na witrynie,
  • Analogiczna nawigacja i architektura informacji na każdym urządzeniu.

Wady RWD:

  • Dodatkowe koszty na początku projektu (dostosowanie jednego projektu do różnych wersji),
  • Zbędny transfer po stronie użytkownika,

Aplikacje mobilne.

Aplikacja mobilna to program, który instaluje się na urządzeniu mobilnym (np. telefon komórkowy czy też tablet) i który realizuje określone funkcje. Przykładem mogą być gry, czy też banki, które tworzą dedykowane aplikacje instalowane bezpośrednio na naszych telefonach. Domyślnie na każdym telefonie zainstalowanych jest kilka aplikacji mobilnych. Np. przeglądarka czy też poczta.

W zasadzie większość funkcji realizowanych przez aplikacje mobilne możemy wykonać za pośrednictwem przeglądarki, ale dzięki dopasowaniu aplikacji do konkretnych wymagań (np. banku, portalu aukcyjnego, mediów społecznościowych).

Aplikacje tego typu dzielą się na:

  • Działające bez dostępu do Internetu
  • Internetowe, czyli wymagające dostęp do sieci online
  • Wykonane na potrzeby klienta, np. portali aukcyjnych, banków
  • Gry internetowe – działające zarówno online jak i bez dostępu do sieci,

Aplikacja mobilna powinna być użyteczna, łatwa w obsłudze i angażować użytkownika. Aplikacja powinna być dostępna na najbardziej popularne systemy operacyjne – iOS dla Apple oraz Android dla Samsunga i innych marek.

Rodzaje aplikacji mobilnych:

  • Związane z obsługą klienta np. banki
  • Do komunikacji np. WhatsApp, Messenger.
  • Serwisy społecznościowe – Facebook, Instagram, Twitter.
  • Nawigacja np. Google Maps.
  • Mobilne narzędzia zakupowe np. Allegro, Zalando.
  • Aplikacje pogodowe np. Accuweather.
  • Wyszukiwarki produktów np. Rossmann.
  • Aplikacje sportowe np. Endomondo.
  • Aplikacje muzyczne np. Spotify.
  • Skanery kodów np. SeeMore.
  • Aplikacje lojalnościowe np. Rossmann, Starbucks.
  • Aplikacje do robienia i obróbki zdjęć np. Retrica.
  • Gry np. Bubble Shooter.

Co lepsze? Serwis mobilny czy aplikacja?

Nie ma jednoznacznej odpowiedzi na to pytanie. To zależy. Aby dokonać stosownego wyboru (albo zdecydować się na dwa rozwiązania), należy dokładnie przeanalizować podobieństwa i różnice, oraz wady i zalety każdego z rozwiązań.

Serwis mobilny zawsze wymaga przeglądarki i połączenia z internetem. Jeśli łącze jest zbyt wolne, strona może się długo ładować, co z kolei może zniechęcić użytkowników i porzucą daną stronę. Z drugiej strony, serwis mobilny ma ograniczoną funkcjonalność i nie ma znaczenia, z jakiej przeglądarki, czy z jakiego smartfonu użytkownik korzysta. Ponadto koszty zaprojektowania wersji mobilnej serwisu są stosunkowo niskie.

Aplikację mobilną użytkownik musi najpierw zainstalować na swoim urządzeniu, aby mieć do niej dostęp. Korzystanie z niej nie wymaga stałego dostępu do internetu, aczkolwiek wiele funkcji i dostęp do bieżących informacji wymaga połączenia z siecią. Koszty stworzenia aplikacji są znacznie większe, niż mobilnej wersji witryny.

Na koniec podsumujmy najważniejsze informacje na temat serwisów oraz aplikacji mobilnych pod kątem różnic między nimi:

Serwisy mobilne:

  • Niższe wymagania sprzętowe,
  • Niższy koszt projektu,
  • Większe bezpieczeństwo danych,
  • Brak dodatkowych opłat i prowizji od operatorów i platform,
  • Możliwość stworzenia jednego projektu dla wszystkich urządzeń mobilnych i przeglądarek,
  • Łatwość aktualizacji,
  • Pozycjonowanie – łatwość odnalezienia przez wyszukiwarki mobilne.

Aplikacje mobilne:

  • Szybki dostęp,
  • Powiadomienia aplikacji o nowościach,
  • Trzeba stworzyć oddzielne projekty dla poszczególnych systemów,
  • Możliwość zarabiania na aplikacjach,
  • Łatwość instalacji i późniejszego dostępu.
  • Reklama w urządzeniach mobilnych

Related posts