trendy mobile 2020 ux strony internetowej

 

Różne typy stron internetowych rządzą się swoimi prawami. Inaczej podejdziemy do zaprojektowania statycznej strony internetowej kancelarii prawnej, inaczej do bloga urodowego, a w jeszcze inny sposób do portalu z newsami, na którym wpisy pojawiają się nawet parę razy dziennie. Serwisy informacyjne to specyficzny rodzaj stron – w tym wpisie zdradzamy tajniki User Experience w kanale mobile.

 

Po przyjrzeniu się kilku stronom z newsami, zauważyliśmy, że pewne powtarzalne elementy kreują korzystne doświadczenia czytelnika. Te elementy są wdrożone przez największe serwisy internetowe w takich obszarach jak:

  • Strona główna / Landing Page
  • Menu i nawigacja
  • Wyszukiwarka
  • Strona z kategoriami
  • Strona artykułu
  • Zapis do subskrypcji / rejestracja / logowanie.

Jak zaprojektować widok mobilny serwis internetowego?

 

Widok mobilny serwisu internetowego to bardzo ważny czynnik. Ilość użytkowników korzystających z kanału mobile z roku na rok rośnie. To, w jaki sposób nasz widok mobilny zostanie zaprojektowany, wpływa na długość i jakość czasu spędzonego na naszej stronie. W tym artykule przyjrzymy się pierwszemu elementowi z wyliczenia powyżej:

UX serwisu internetowego na stronie głównej

 

Przyjrzyjmy się tej tabelce, w której określiliśmy element, jego znaczenie oraz KPI, czyli główny wskaźnik, za pomocą którego mierzona jest efektywność tego działania.

 

Strona główna Siła wpływu KPI
Pojedynczy hot news i usunięcie automatycznie generowanej karuzeli z newsami (lub slidera) Wysoka Wskaźnik odrzuceń
Dodatkowe CTA poniżej zakładki Średnia CVR
Mało inwazyjne reklamy display Wysoka Wskaźnik odrzuceń
Treści w formie łatwej do skanowania Wysoka Czas spędzony na stronie, liczba stron
Newsy skategoryzowane ze względu na kategorie  Średnia Czas spędzony na stronie, liczba stron

 

Pamiętaj, że wszystkie rekomendacje powinny być najpierw sprawdzone w testach A/B, aby finalnie na stronę wdrożyć najlepsze rozwiązania!

 

1. Wprowadź oznaczenie „top news”

 

ux strony internetowej trendy mobile 2020

 

Na stronie zrezygnuj z karuzel wpisów lub sliderów. Postaw na wyróżnienie jednego lub kilku najważniejszych wpisów. The Guardian oraz ABC News poprawnie wyróżniają topowe wpisy. Dzięki temu widok jest przejrzysty, a uwaga czytelnika kierowana jest tam, gdzie potrzeba.

 

Dlaczego warto unikać karuzel wpisów?

 

  • Użytkownicy przeważnie omijają tego typu treści. Mało kto przewija stronę lewo-prawo, przeważnie widząc tego typu wpisy po prostu scrollują dalej. Co najwyżej zobaczą pierwszy wpis zamieszczony w karuzeli, a następne zostaną odruchowo pominięte.

 

  • Zamieszczając kilka wpisów w karuzeli żaden z nich nie zyskuje rangi newsu dnia lub najważniejszego wpisu w danej kategorii. Łatwiej jest zarządzać uwagą czytelnika poprzez dodanie tylko jednego najważniejszego artykułu.

 

2. Zadbaj, aby widok strony był łatwy do wzrokowego skanowania

 

Ekran telefonu komórkowego nie jest duży. Nie można sobie pozwolić na tak wiele sposobów prezentacji treści jak na desktopie. Widok mobilny musi być prosty i czytelny. Zobacz, jak robią to światowi liderzy:

 

ux portal internetowy trendy mobile 2020

 

Jak widzisz, zastosowano tu różne sposoby prezentacji treści, jednak tekstu nie jest za wiele. Dużą rolę odgrywają zdjęcia. Jeśli Twoje nagłówki są długie rekomendujemy stosowanie widoku listy, czyli zdjęcie + tekst po prawej stronie.

 

trendy mobile 2020

 

Widok listy: Uwaga maleje z góry na dół – na pierwszym miejscu powinny znaleźć się bardziej odpowiednie / najnowsze wiadomości.

 

Widok siatki: Uwaga rozkłada się bardziej równomiernie – najlepiej nadaje się do treści wizualnych.

 

Tzw. grid view, czyli widok siatki, jest często stosowany w różnego rodzaju aplikacjach mobilnych, ale raczej nie sprawdzi się w przypadku portalu internetowego z newsami. Jeśli chcesz możesz oczywiście w niektórych obszarach zastosować taki sposób prezentowania treści, jednak pamiętaj o tym, że musisz zachować przejrzystość. Dobrym sposobem jest nałożenie tekstu na aplę, czyli kryjący lub pół-kryjący obszar, dzięki któremu tekst zyska na widoczności i nie „zleje się” ze zdjęciem.

 

Atrakcyjnie prezentują się także gradienty, które wykorzystują w swojej aplikacji Fakty. Zaciemnienie tła znacznie ułatwia odczytanie nagłówków newsów. 

 

trendy mobile 2020

 

3. Wyświetlaj wpisy według kategorii

 

Na swoim portalu na pewno posiadasz wiele kategorii tematycznych. Na widoku mobilnym treści także powinny wyświetlać się uporządkowane oraz dobrze oznaczone. Czytelnik musi wiedzieć, w jakim miejscu na stronie się aktualnie znajduje i z jaką kategorią ma do czynienia. Dobrze widoczna nazwa kategorii to konieczność – dzięki temu użytkownik może łatwo nawigować po stronie.

 

trendy-mobile-2020

 

Czytelnicy powinni zawsze wiedzieć, co czytają. W ten sposób mogą łatwiej zdecydować, czy jest to coś, co ich interesuje, a także kliknąć kategorię / sekcję, aby przejrzeć jeszcze więcej podobnych wiadomości. Pamiętaj o tym i zaprojektuj serwis tak, aby nazwy kategorii były „klikalne”.

 

4.Dodatkowe, klikalne CTA poniżej linii foldu

 

Poniżej linii foldu odnosi się do części strony internetowej, która jest widoczna dopiero po przewinięciu w dół głównego widoku. W marketingu utarło się, że to co widzimy powyżej linii foldu zyskuje większą uwagę, a zatem jest cenniejsza niż zawartość powyżej. Nie oznacza to jednak, że to co znajduje się w dalszych (albo raczej tych położonych niżej) miejscach na stronie jest nieistotne.

 

Czytelnicy serwisów newsowych zazwyczaj spędzają na stronie więcej czasu niż inni internauci. Dłużej czytają treści na stronie i scrollują w dół, więc jest znacznie bardziej prawdopodobne, że dotrą do treści, które przedstawisz im niżej.

 

Zamieść tam (np. pod artykułem) dobrze widoczne CTA, z poziomu którego zachęcisz ludzi do wykupienia subskrypcji Twojego serwisu lub innej pożądanej czynności takiej jak np. dołączenie do grupy.

 

trendy mobile 2020

 

5. Nie przytłaczaj reklamami

 

Reklamy stają się coraz bardziej wszechobecne i natrętne. To nie jest tylko nasza osobista opinia (choć absolutnie się z tym zgadzamy); potwierdza to wiele badań. Jednak ludzie na ogół nie nienawidzą reklam, nienawidzą złych reklam.

 

Aż 77% zgadza się ze stwierdzeniem „Chciałbym, aby istniał sposób na filtrowanie reklam zamiast całkowitego blokowania reklam”. – Ankieta HubSpot. Oto kilka wskazówek do rozważenia przy wdrażaniu reklam w witrynie z wiadomościami:

  • Nie ustawiaj automatycznego odtwarzania filmów.
  • Nie wprowadzaj ludzi w błąd.
  • Jeśli korzystasz z wyskakujących okienek, bądź rozsądny.

 

Spójrz na te reklamy zamieszczone na portalach The Washington Post i Huff Post. Są widoczne, ale nie „kłują w oczy”. Ich kolorystyka, rozmiar i umiejscowienie są dobrane tak, że nie przytłaczają użytkownika.

 

trendy mobile 2020