Duda vs Trzaskowski - kto wygrywa w mobile?!

Autor: Joanna Ossowska Ikona zegara

10 lipca 2020

Według raportu UKE (Urząd Komunikacji Elektronicznej) z listopada 2019 r., 70% Polaków korzysta z Internetu a 91,2% ma dostęp do Internetu mobilnego. Obecnie, w czasach lawinowego przyrostu informacji, kiedy toczy się walka o stanowisko prezydenta Polski, również strony internetowe, aplikacje i innej produkty cyfrowe konkurują ze sobą. Postanowiliśmy sprawdzić jak radzą sobie kandydaci mobilnie. Prześwietliliśmy mobilną wersję strony Andrzeja Dudy (www.andrzejduda.pl), która po wpisaniu w Google „Andrzej Duda” pojawia się już na 5 pozycji i Rafała Trzaskowskiego (trzaskowski2020.pl), która po wpisaniu „Rafał Trzaskowski” pojawiła się dopiero na 4 stronie wyników wyszukiwania.

Audyt oparliśmy na 10 heurystykach Jakoba Nielsena.

#1 Status systemu

Czy przyszli wyborcy będą zorientowani gdzie się znajdują? Menu dostępne w pasku nawigacyjnym na urządzeniach mobilnych u obu kandydatów jest rozwijane za pomocą ikony “hamburgera”, która obecnie jest jedną z popularniejszych metod i najbardziej popularną wersją menu w wersji mobilnej. U kandydata Trzaskowskiego po prawej stronie, u prezydenta Andrzeja Dudy po lewej. Na obu stronach podświetla, w jakim miejscu się znajdujemy.

Czy menu powinno znajdować się po lewej czy prawej stronie? To kwestia dyskusyjna, dużo zależy od preferencji – lecz osobom praworęcznym, menu po prawej stronie będzie wygodniejsze w użyciu.

Prezydent Duda posiada również menu na dole w stopce, lecz nie jest w pełni kompatybilne i może wprowadzać w błąd. Wyboldowane napisy nie przenoszą nas do wybranej kategorii, przenoszą dopiero te pod spodem.

#2 Zgodność pomiędzy systemem a rzeczywistością

Zarówno język na jednej jak i drugiej stronie jest prosty i zrozumiały dla przeciętnego użytkownika. Założyliśmy, że wchodząc na stronę, użytkownicy będą szukać programu wyborczego kandydata.

Po włączeniu strony internetowej Pana Trzaskowskiego od razu pokazuje nam się informacja o programie i możliwość kliknięcia w przycisk CTA – tam sprawdzimy program wyborczy w formie filmu. Z tego miejsca możemy przejść do pełnego Programu Wyborczego. Na wstępie pojawia nam się spis treści z którego możemy automatycznie przejść do treści, która nas interesuje. Następnie pojawia nam się możliwość pobrania programu w PDF. Następnie możemy scrollować cały program na stronie internetowej, jeżeli chcemy wrócić do początku mamy strzałkę, która z dowolnego miejsca programu przeniesie nas prosto do spisu treści. Niestety występuje ona tylko w programie wyborczym.

Na stronie Pana Andrzeja Dudy, od razu widzimy hasło “Działać w służbie wszystkich Polaków”, które za bardzo nic nam nie mówi. Użytkownicy mają dwie opcje: scrollować w dół, aby znaleźć program wyborczy lub przejść przez menu znajdujące się po lewej stronie. Po kliknięciu w program nie mamy możliwości wybrania fragmentu, który nas interesuje tylko musimy przeglądać od początku do końca. Brakuje też opcji pobrania PDF-a i przycisku ułatwiającego powrót do początku programu wyborczego.

Zdecydowanie łatwiejszy dostęp do swojego programu wyborczego zapewnił Pan Trzaskowski.

#3 Daj użytkownikowi pełną kontrolę

Jedyna opcja cofnięcia swoich działań oprócz standardowego przejścia przez menu lub kliknięcia w logo. Andrzej Duda zadbał o to, aby menu było dostępne cały czas podczas przeglądania podstron. U Rafała Trzaskowskiego menu dostępne jest jedynie, gdy jesteśmy na górze strony.

#4 Trzymaj się standardów i zachowaj spójność

Obie strony utrzymują standardy takie jak np. kilkalne logo, zawsze wiemy jak wrócić na stronę główną. Zachowują spójność kolorystyczną, oraz wykorzystują symbole znane powszechnie użytkownikom np. ikony social mediów. U obu kandydatów na stronach w wersji mobilnej zabrakło etykiet graficznych jak np. ikony w globalnym menu nawigacji czy ikony kontaktowe np. telefonu czy e-mail. Warto zauważyć, że obie strony zadbały o certyfikat SSL na stronach.

#5 Nie wprowadzaj w błąd

Strony są stylistycznie podobne i niewiele elementów mogłoby wprowadzić w błąd. Może jedynie nie w pełni funkcjonalne menu w stopce na stronie Andrzeja Dudy [patrz punkt 1].

#6 Pozwalaj wybierać zamiast zmuszać do pamiętania

Użytkownicy obu stron w prosty i logiczny sposób za pomocą menu głównego mogą dotrzeć do wszystkich strony i podstron serwisu. Ikony graficzne mogłyby ułatwić zapamiętywanie treści, co, jak i gdzie znajduje się na stronie.

#7 Zapewnij elastyczność i efektywność

W obu serwisach zabrakło nam wyszukiwarki, aby zapewnić elastyczność i możliwość wyboru dowolnego sposobu przeszukiwania informacji.

#8 Dbaj o estetykę i umiar

W obu projektach zarówno interfejs graficzny, kolorystyka, fonty jak i design są spójne. Obaj kandydaci w odpowiednich miejscach podkreślają najważniejsze rzeczy jak np. wyróżnienia przycisków CTA.

#9 Zapewnij skuteczną obsługę błędów

Strona Andrzeja Dudy została bardziej dopracowana pod tym kątem. Po wyświetleniu błędu (strona 404) mamy możliwość powrotu do strony głównej oraz wybrania odpowiedniego polecenia z menu. Chociaż dopracowania wymaga jeszcze tytuł “root” w tytule podstrony. Na stronie Rafała Trzaskowskiego mamy możliwość jedynie powrotu do strony startowej, a strona błędu 404 nie jest spójna z całością wyglądu serwisu.

#10 Zadbaj o pomoc i dokumentację

Ani jedna ani druga strona nie zaproponowała użytkownikom zakładki pomoc, FAQ, lub mapy strony z której mogliby skorzystać w razie problemów. Materiały do pobrania Andrzej Duda oferuje jedynie w zakładce kontakt, natomiast materiały kontrkandydata Rafała Trzaskowskiego znajdziemy w zakładce Program.

Na koniec sprawdziliśmy jak strony kandydatów wypadły w narzędziu Page Speed Insights, które służy do mierzenia prędkości i optymalizacji strony zarówno na telefony i komputery.

Wyniki mobile:

Andrzej Duda:

Pierwsza wyrenderowana treść: 1,7s
Największe wyrenderowanie treści (LCP) 2,6s
Opóźnienie od pierwszej interakcji: 22ms
Skumulowane przesunięcie układu (CLS) 0s

Rafał Trzaskowski:

Pierwsza wyrenderowana treść: 1,7s
Największe wyrenderowanie treści (LCP) 2,6s
Opóźnienie od pierwszej interakcji: 236 ms
Skumulowane przesunięcie układu (CLS) 0,01 s

Wyniki desktop:

Andrzej Duda:

Pierwsza wyrenderowana treść: 1,3s
Największe wyrenderowanie treści (LCP) 2,4s
Opóźnienie od pierwszej interakcji: 2ms
Skumulowane przesunięcie układu (CLS) 0s

Rafał Trzaskowski:

Pierwsza wyrenderowana treść: 1,2s
Największe wyrenderowanie treści (LCP) 2s
Opóźnienie od pierwszej interakcji: 2ms
Skumulowane przesunięcie układu (CLS) 0,42s

Każdy z kandydatów zadbał o dostęp do social mediów, lecz zastanawia nas tylko jedno, czemu Andrzej Duda nie podlinkował swojego Tik Toka?

Warto dodać, że analiza została przeprowadzona jedynie na własnych spostrzeżeniach. Do pełnego badania warto byłoby przeprowadzić testy z użytkownikami. Nie chcemy sugerować, który kandydat ma lepszą stronę, dlatego wnioski proponujemy wyciągnąć sami. Jeżeli nie jesteście jeszcze pewni na kogo głosować, polecamy kilka mobilnych stron, na których możecie sprawdzić, który kandydat jest bliższy waszym preferencjom: