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ą użyteczność stron mobilnych. 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ć mobilną stronę pod względem UX?
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:
Użyteczność stron mobilnych
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”
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 UX strony mobilnej 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:
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.
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.
Mobilna strona UX powinna prezentować także gradienty, które wykorzystują w swojej aplikacji Fakty. Zaciemnienie tła znacznie ułatwia odczytanie nagłówków newsów.
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.
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.
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. UX stron na urządzeniach mobilnych jest bardzo ważny.
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.
