Nowa nawigacja dla TVN24


Wszystkie mockupy, które zobaczysz poniżej nie są ostateczną wersją produktu. Są tylko prezentacją rozwiązania, bez ostatecznego UI

W tym projekcie pełniłam rolę UX Designera

Moją rolą było wymyślenie nowej nawigacji i jej funkcjonowania

Tło projektu

W TVN powstaje właśnie nowa aplikacja frontowa o nazwie Zoltan, która będzie odpowiadać za wyświetlanie treści stron internetowych. Jednym z punktów na roadmapie jest stworzenie nowej nawigacji, która zostanie wdrożona na stronach newsowych z rodziny TVN24 oraz na stronach rozrywkowych stacji TVN . Do projektu trzeba było podejść globalnie, zapewniając uniwersalne rozwiązanie możliwe do zastosowania dla każdej z tych stron. Wyzwaniem było też przekonanie do rozwiązania stakeholderów czyli redakcję tvn24 i redakcję rozrywki TVN oraz zespół techniczny, co nie było łatwym zadaniem.

Cele nowej nawigacji

  • intuicyjna dla użytkowników
  • uniwersalna – możliwa do zastosowania na stronach newsowych i rozrywkowych
  • pokazująca ekosystemowość (przykład: aby na stronie np. ‘TVN Warszawa’ wiadomo było, że strona pochodzi z ekosystemu TVN24)
  • spełniająca warunki SEO

Zaczęłam od przeanalizowania architektury informacji obecnych stron z ekosystemu TVN24 na mobile i desktop. Wzięłam pod lupę 11 serwisów z rodziny TVN24. Strony rozrywkowe już znałam ze względu na wcześniejsze projekty, ale nawigacja miała być też wspólna dla nich.

Tak to widzi użytkownik:

DEKTOP

MOBILE

Zrzut ekranu 2023-02-6 o 14.55.41

Architektura informacji TVN24 na desktop

Liczba elementów dostępnych na pasku zależy od szerokości ekranu, do analizy wzięłam rozdzielczość laptopa czyli 1440px. Opcje nie mieszczące się w pasku schowane są pod ikoną trójkąta. W pasku nawigacji widzimy też przyciski do social mediów, ikonkę ludzika do logowania. Pod ikoną kółka z kropkami w środku widzimy mega-menu.

Zachowanie tej samej nawigacji na mobile:

Wnioski z mojej analizy:

MNIEJ ZNACZY LEPIEJ, CZYLI LICZBA ELEMENTÓW

Na stronie w wersju desktop jest zbyt dużo elementów w menu. Ma się poczucie nieładu. Im więcej opcji jest dostępnych dla usera, tym większy trud decyzyjny i mniejsze prawdopodobieństwo, że user kliknie w którąkolwiek z opcji, tzw. paradoks wyboru.

NIELOGICZNY UKŁAD ELEMENTÓW

Elementy w menu ułożone są w nielogiczny sposów. Nie można tu w łatwy sposób rozpoznać zbiorów. Obok siebie znajdują się programy telewizyjne (których stacja ma sporo) razem z serwisami online oraz innymi elementami. Zalecane badanie card-sorting oraz pytanie do redakcji – czy chcą promować programy tv, bo brakuje tu takiego zbioru. Podobnie rzecz się ma z serwisami.

KONTO

Na desktopie i mobile promowane jest konto użytkownika. Ikonka ludzika zabiera cenne miejsce w obu przypadkach. Zrobiłam test i założyłam konto aby sprawdzić, jakie korzyści daje. Prawda okazała się zaskakująca- nie ma żadnych korzyści. Brakuje funkcjonalności pozwalających np. na zapisanie materiału do przeczytania na później lub opcji personalizowania treści. Z tego powodu do momentu rozwoju tych ficzerów schowałabym ikonkę konta do menu.

TAJEMNICZY TRÓJKĄT - CZYLI OPCJA 'WIĘCEJ"

Na hover pod tym trójkątem mieszczą się opcje, które nie zmieściły się w menu na pasku głównym. Ikona trójkąta, przez to że sąsiaduje z ikonami social mediów sprawia, że można ją odebrać jako jedna z ikon social mediów. Wg mnie lepszym rozwiązaniem będzie słowo “Więcej”.

TEMATY NA CZASIE WPLECIONE W KLASYCZNE MENU

Brak pomysłu na umieszczanie tzw. hot tematów na stronie. Hot tematy umieszczane są w dowolnych miejscach przed redakcję w menu. To powoduje że user musi być cały czas uważny i nioe może działać na pamięć. A przecież zależy nam żeby  zasada “nie każ mi myśleć” ułatwiała życie userom.

POTRZEBA WZMOCNIENIA EKOSYSTEMOWOŚCI

Nie wszystkie strony z obszaru TVN24 wyglądają jak pochodzące z jednego ekosystemu. Na niektórych eksponowane jest logo serwisu-córki, na innych nie. Strona Kontakt24 odbiega wizualnie od reszty pod każdym względem, podobnie jak strona Faktów. 

MENU NA MOBILE

Pasek z menu nie pokazuje się od razu po wejściu na stronę (pierwszy screen). Trzeba najpierw przescrollować trochę treści w górę, by go zobaczyć (sdrugi screen), po czym ponownie znika i pojawia się przy scrollu back. User raczej nie przepada za znikającymi elementami. Czuje się bezpieczniej gdy nie ma aż tak silnej dynamizacji. Zależy to oczywiście od wieku usera.

Dane z Google Analytics

Niestety nie miałam dostępu do dokładnych danych, gdyż google analytics zostało uruchomione tylko do płatnej części serwisu, czyli do TVN24 GO. Nie do końca można się posiłkować tymi danymi, gdyż wielu użytkowników zakup subskrypcji woli obsługiwać za pośrednictwem desktopu, chociaż zmienia się to w miarę rozwoju aplikacji, które są coraz bardziej user-friendly i nie pozwalają zabłądzić. Dane za ostatnie 30 dni (07.01.-05.02. 2023):

Poniżej dane ze wszystkich stron tvn (agregat), jednak tylko stron rozrywkowych. Ostatnie 30 dni (07.01.-05.02. 2023) :

Wnioski a analizy GA

Ruch mobilny na stronach rozrywkowych to aż 91% a na na stronie tvn24 GO 62%.  Z całą pewnością focus trzeba położyć na to, aby nawigacja była dobrze zaprojektowana na mobile i od niej w pierwszej kolejności należy zacząć prace projektowe.

Benchmark

Kolejnym krokiem był benchmarak i tutaj wzięłam pod uwagę witryny 5-ciu największych telewizji newsowych na świecie (FOX News, CNN, NBC News, BBC News i CBS News). Z zagranicznych wydawców newsowych nie będących telewizją do analizy wykorzystałam The New York Times i Die Welt.  Z naszego podwórka wzięłam dwie telewizje newsowe (TVPInfo, Polsat News), wydawców: Wp, Onet, Interia oraz radia: Polskie Radio, Radio Zet, RMF 24. 

♥️ Moim ulubieńcem okazał się serwis FOX News

pobrane (13)
pobrane (20)

Jakich cech dotyczył benchamark?

*do każdego opisywanego poniżej elementu mam przykłady zawarte w prezentacji Power Point, jednak tu je pominę ze względu na rozległość tego materiału.

PRZYCISK 'LIVE'

Przycisk “LIVE” najczęściej był umieszczany w belce głównej, również na mobile. Dobrze robi to Fox News, CBS News, NBC News. 

STREAMING NA ŻYWO

Telewizje umieszczały też streaming treści na żywo. Taki zabieg widziałam na stronie FOX News, TVPInfo, CBS News.

WIDGETY

Najczęściej dotyczyły kursów walut, notowań giełdy, pogody i stanu powietrza. Wydawcy umieszczali go w belce głównej menu (FOX News, The New York Times) lub blisko belki nawigacyjnej. Na mobile część wydawców z ogóle zrezygnowała z umieszczenia gdziekolwiek widgetu, który na desktopie był.

Celem umieszczania przez wydawców widgetu jest budowanie powracalności użytkowników na stronę. Wiedzą, że dany widget interesuje userów i będą dla niego wracać. Dobrym przykładem są tu chociażby horoskopy.

GORĄCE TEMATY

6 na 8 zagranicznych serwisów podkreśla gorące tematy w pasku nawigacji lub blisko niej. Wg mnie dobrze robi to FOX News bo umieszają do w dodatkowym pasku poniżej głównego menu. Polskie serwisy nie posiadają hot topics w belce nawigacyjnej. Najważniejsze lub najnowsze artykuły oznaczają etykietą ‘ważne’, ‘pilne’.

EKOSYSTEMOWOŚĆ

Serwisy aby podkreślić ekosystemowość swoich stron najczęściej żonglowały elementami:

– kolory pasków nawigacji

– do loga głównego dodawały coś extra

– menu nawigacyjne strony-matki czasami znikało, a czasami stale było na górze strony

– przyciskiem ‘back to main website;

– strony-córki czasami zawierały key visual, a na nim menu

 

DOLNA BELKA NAWIGACYJNA

Dolna belka nawigacyjna to raczej cecha aplikacji mobilnych. Jednak pod tym kątem podejście polskich vs zagranicznych serwisów mocno się różni. Polscy wydawcy często stosowali dolną belkę nawigacyjną, zagraniczni prawie wcale. Dlaczego? Z ciekawości pobrałam aplikacje Fox News czy CNN i tam oczywiście dolna belka się pojawiała. Polscy wydawcy nie posiadali własnej aplikacji, więc ten zabieg wykorzystali na stronie.

Jakie elementy wydawcy umieszczali w belce dolnej?

-akwizycja do strony głównej

– hot tematy (mundial, skoki narciarskie)

– pogoda

– poczta

– notowania giełdowe

– plotki

– spis wszystkich kategorii menu na stronie

– ofert pracy

– CTA do produktu (np. do tuby radia)

 

LOGOWANIE DO KONTA

Większość zagranicznych serwisów (7 na 8) umieszczała logowanie do konta na stronie głównej. Polskie serwisy nie były już do tego tak skore, przy czym pomijamy tutaj możliwość założenia e-maila. Założenie konta musi nieść pewne korzyści dla użytkownika. Obecnie na stronie TVN założenie konta praktycznie niczego nie daje, dlatego warto przemyśleć sens dawania tego wysoko.

 

Moje wnioski po przeprowadzonych analizach:

powinniśmy:

  • uporządkować kategorie menu w logiczne zbiory (programy, serwisy itp.)
  • ograniczyć liczbę widocznych elementów na start dla zachowania lepszej przejrzystości
  • akcentować to, że jesteśmy telewizją poprzez live stream i sam przycisk ‘na żywo’
  • wprowadzić widgety z informacjami o pogodzie, stanie powietrza itp. aby user miał bieżące informacje pod ręką
  • na stronach-córkach umieścić przycisk powrotu do strony głównej TVN24 (celem biznesowym redakcji jest zwiększenie liczby odsłon)
  • spróbować wykorzystać belkę dolną jako element nawigacji na mobile (to też element realizujący cel zwiększenia odsłon na stronie głownej TVN24, w belce dolnej znalazłaby się akwizycja do niej)
  • ‘tematy na czasie’ umieścić w osobnej belce, aby nie mieszały się ze stałymi elementami menu
  • przyciski social media + logowanie do konta umieścić w menu
  • przebudować stopkę
  • na stronach-córkach zagrać kolorem tego serwisu

Czas na przedstawienie mojego projektu nowej nawigacji dla TVN24

Nawigacja na desktop:

Nawigacja na TVN24 (przed zmianą)

Moja propozycja nawigacji:

Co zawiera propozycja?

1. Nowy układ elementów na pasku głównym menu. Wcześniej kategorie umieszczone na całej dostępnej szerokości, było ich za dużo, ułożone były w losowy sposób. Kategorii jest mniej i zostały pogrupowane w logiczne zbiory takie jak Regiony, Serwisy, Programy. Pozostałe elementy menu zostały umieszczone pod Więcej, widoczne na hover.

2. Na Żywo – pojawił się nowy ‘call to action’. Wcześniej nie było w ogóle wiadomo, że jesteśmy na stronie największej telewizji newsowej w Polsce. Teraz dzięki streamingowi na żywo można zobaczyć materiał prosto z anteny. Oczywiście transmisja powinna zostać przerwana po około 3 minutach i zachęcić do Subskrypcji. Przy odświeżeniu strony user trafiałby na reklamy. Benchmark też wskazał na to, że jest taki trend aby podkreślać dostępność streamingu na żywo. Wcześniej TVN24 też miał streaming na żywo, ale krył się on pod jeszcze dość mało znanym brandem w świadomości użytkowników -“TVN24 GO”. No i od razu trzeba było wykupić pakiet, nie dostawaliśmy nic na zachętę w postaci paru minut materiału na żywo.

3. Tematy na czasie przestały się mieszać w menu z innymi kategoriami. Zostały wydzielone do osobnej belki pod menu. Przyzwyczajenia usera nazywaliśmy w tym projekcie roboczo ‘pamięcią mięśniową’. User przyzwyczaja się do stałego układu menu.  Do tej pory cały czas był zaskakiwany nowym układem treści i musiał ‘myśleć’.

4. Ikony social mediów – zostały przerzucone do menu znajdującego się pod hamburgerem. Stały za tym trzy argumenty. 

  • Pierwszy jest taki, że nie chcemy tracić zbyt szybko usera ze strony na rzecz naszych kont na social mediów i chodzi tu głównie o zysk z reklam.
  • Drugi, to social mediów prowadzonych aktywnie przez TVN24 jest łącznie 4 a nie 2, tak jak to zostało pokazane na stronie. Umieszczanie ich wszystkich w pasku menu- trochę strata cennego miejsca i poczucia porządku. W innymi miejscu (w menu) można pokazać je wszystkie.
  • Trzeci, to taki że kierunek przepływu ruchu jest raczej odwrotny- userzy przychodzą do nas z social mediów klikając w post który przenosi ich do artykułu który chcą przeczytać, obejrzeć film, nie odwrotnie.

5. Logowanie do konta – ikonkę ludzika przeniosłam do menu. Zalogowanie się nadal nie daje żadnych korzyści dla usera, więc szkoda zabierać miejsce ikonką na stronie. Z małym wyjątkiem- po zalogowaniu się pojawi się ludzik na stronie głównej z zieloną kulką świadczącą o byciu online. Ta kuleczka pojawia się też dziś, więc potencjalnie user powinien ją znać.

6. Pogoda zamiast Meteo – ta zamiana słów jest trochę ryzykowna. Dla usera bardziej znajomo brzmi pogoda niż Meteo czyli nazwa własna produktu. Nie upieram się przy tej zmianie, bo marka TVN Meteo traci przy budowaniu świadomości usera o tym brandzie.

7. Regiony – wcześniej nazwą zbioru był jednocześnie jeden z jej elementów, czyli Warszawa. Podczas benchmarku sprawdzałam jak robią to inni i to rozwiązanie wydało się najbardziej słuszne. (RMF FM 24 poszło tym samym kluczem)

8. Ikona menu– zamieniłam kółko z trzema kropkami w środku na lepiej rozpoznawalnego ‘hamburgera’ i tam ukryłam całe mega menu dla dobrego pozycjonowania w google (zabieg pod SEO)

 

Sprawdźmy, co kryło się pod przyciskiem hamburgera (mega menu)

Mega-menu TVN24 przed zmianą:

Moja propozycja mega-menu i nowej stopki na TVN24:

Komentarz:

1. Widoczne menu – wcześniej user tracił z oczu dostęp do głównego paska nawigacji. Wg mnie lepiej aby miał cały czas do niego dostęp, a co więcej- stacji zależy na dużej liczbie odsłon strony głównej, więc dostęp do logo (CTA do strony głównej) zostaje tutaj zapewniony.

Social media + Konto – umieściłam w menu pod hamburgerem zamiast na stronie głównej. Powody – wspomniałam o tym wcześniej – nie chcemy tracić usera ze strony głównej na rzecz kont na social mediach (brak zysków z reklam). Zalogowanie do konta nie daje userowi póki co żadnych korzyści.

3 i 4. TVN24 i jego kategorie – uszczupliłam je, wcześniej znajdowały się tam miasta Polski, ale wydzieliłam je do osobnej kategorii Regiony. Nazwę Pomorze zamieniłam na Trójmiasto, skoro już wymieniamy miasta. Pomorze to bardziej region Polski.

5, 6 i 7 . Serwisy, Programy, Podcasty – serwisy zostały zebrane w jednym miejscu. Dodatkowo w żadnym miejscu na stronie nie można było znaleźć programów emitowanych na TVN24. Tutaj spis programów ‘robi dobrą robotę’ pod SEO. Podcasty- nie miałam pojęcia że aż tyle ich jest. Warto się nimi chwalić

8. Inne – w tym zbiorze umieściłam resztę kategorii która nie pasowała do żadnego utworzonego zbioru.

9. Stopka – w stopce umieściłam dane adresowe i kontaktowe które wcześniej były ukryte pod linkiem (dodatkowy przeklik) do dość archicznie wyglądającej strony Kontakt24. Ze stopki usunęłam też nazwy programów, bo umieściłam je w menu.

 

Card sorting

Na pewno kolejnym krokiem będzie badanie z użytkowikami wykorzystując metodę card sorting. 

 

BEFORE:

AFTER:

porównaj używając suwaka 'prawo-lewo' na środku

Rozwinięcie podsekcji na hover

Group 2560

Gdy jesteśmy na stronie podsekcji a hoverujemy się na inną podsekcję, to pojawiają się pionowe kreseczki.

Group 2561

Hover na elemencie z belki “Tematy na czasie” - pojawia się kreseczka

Frame 2464

Nawigacja na stronie- córce (Serwis TVN24 Binzes)

Zrzut ekranu 2023-02-14 o 16.39.22

Belka "Pilne"

Zrzut ekranu 2023-02-14 o 16.42.48

Widgety

To element który pojawiał się blisko nawigacji na innych stronach newsowych. Jest to świetny element wspierający powracalność użytkownika na stronę. Działa w taki sposób, że spis najważniejszych informacji w formie widgetów prezentowany jest wysoko, blisko nawigacji w łatwo zauważalnym miejscu. Przygotowałam 2 wersje widgetów:

1) Widgety w pasku nawigacji:

2) Widgety poza paskiem nawigacji - można przedstawić więcej widgetów

MOBILE

Zobaczmy jak nawigacja będzie wyglądać i zachowywać się na mobile

Strona główna:

rsz_1zrzut_ekranu_2023-02-14_o_120438

Opis belki dolnej:

Zrzut ekranu 2023-02-14 o 12.18.04

Zachowanie po wejściu w menu:

Zrzut ekranu 2023-02-14 o 12.40.48

Wygląd innych serwisów-córek:

Zrzut ekranu 2023-02-14 o 12.54.52

Zachowanie nawigacji na stronie głównej:

rsz_zrzut_ekranu_2023-02-14_o_145245
rsz_zrzut_ekranu_2023-02-14_o_150217

Zachowanie nawigacji podczas przeglądania artykułu:

Zrezygnowałam na artykule z nawigacji na belce dolnej z powodu ograniczonego miejsca w view port, który jest ‘zjadany’ przez video, które przykleja się na górze ekranu.

rsz_1zrzut_ekranu_2023-02-14_o_154245

Widgety

Zobaczmy, jak widgety mogłyby się prezentować na mobile:

OPCJA 1:

OPCJA 2:

DZIEŃ DOBRY TVN

DESKTOP

Ta sama nawigacja miała zostać w kolejnych miesiącach zaimplelentowana w serwisie Dzień Dobry TVN.

Zobaczmy czy to się udało:

BEFORE:

AFTER:

porównaj używając suwaka 'prawo-lewo' na środku

Szczegółowy opis zmian w nawigacji:

Menu przed i po zalogowaniu:

MOBILE

KONIEC