Przykłady interfejsów, gdzie coś poszło nie tak

Dziś pokażę Ci kilka przykładów interfejsów (niekoniecznie źle wykonanych), gdzie można by poprawić nieco kilka elementów.

👉 PKP

https://rozklad-pkp.pl

Pierwszym przykładem będzie oficjalna strona PKP. Przed wejściem na stronę, wyłącz proszę Adblocka, by zrozumieć o czym piszę.

Zauważ, że ktoś tutaj pomyślał, o stworzeniu dostępnego projektu
o czym może świadczyć tryb ciemny (sam oceń jak im to wyszło, musisz przyznać, że ich tryb ciemny to specyficzny twór 😉 oraz możliwość dostosowania wielkości fontów.

Ale nie rozumiem idei tworzenia dostępnego projektu, który ma ułatwiać poruszanie się po interfejsie np. niedowidzącym użytkownikom i tym samym umieszczenia tylu bannerów reklamowych.

W trybie ciemnym, treść witryny staje się ciemna, a reklamy nadal są białe, co utrudnia korzystanie z witryny bardzo mocno. Nie mówiąc o tym, że reklamy sponsorowane Adsense na stronie publicznej, to lekkie faux pas.

Zastanawia mnie też tekst pisany wielkimi literami na całej stronie, przy jednocześnie źle dobranym kerningu. No i nie rozumiem jaka jest idea zarabiania na reklamach na stronie, której celem jest konwersja ze sprzedaży biletów?

👉 Gov pl

Spójrz na ten formularz i zwróć uwagę jak często powtarza się słowo “Nazwa użytkownika”.

  • tytuł – “Zaloguj się za pomocą nazwy użytkownika lub adresu e-mail”
  • etykieta – “Nazwa użytkownika lub adres e-mail”
  • dane wejściowe – “Wpisz nazwę użytkownika lub adres e-mail”

Jak widzisz mamy tu trzy razy prawie identyczny tekst. Trzykrotne powtórzenie słów “za pomocą nazwy użytkownika lub adresu e-mail”, niepotrzebnie zaśmieca formularz. Z tego formularza mogą korzystać osoby z jakimś stopniem niepełnosprawności, więc nie powinien być zaśmiecony przez etykiety, które nic nie wnoszą. Zwiększa to tylko przeciążenie poznawcze.

Jak mogłoby to wyglądać?

  • tytuł – powinien opisywać, gdzie loguje się użytkownik. W tytule można napisać “Zaloguj się do profilu zaufanego”. Lub jeśli nie chcesz powtarzać słów login, logowanie, zaloguj się – to można opisać tylko miejsce “Twój profil zaufany”. Dzięki temu można skrócić słowa oraz górny nagłówek, od razu zrobi się mniej elementów.
  • etykieta “Nazwa użytkownika” brzmi mało konwersacyjnie, lecz bardziej technicznie. Zamiast “Nazwa użytkownika lub adres e-mail” → “Login lub adres e-mail”.
  • dane wejściowe – jeśli możesz, to wewnątrz pola formularza stosuj przykładowy zapis danych: “jankowalski@gov.pl”

W tym wypadku mamy możliwość logowania loginem oraz adresem e-mail. “Nazwa użytkownika lub adres e-mail” → “Wpisz login lub adres e-mai”.

Widzimy tam też “Nie pamiętam nazwy użytkownika” co może być mylące i sugerować, że można odzyskać tylko nazwę użytkownika. Tymczasem górna etykieta mówi nam, że można logować się też e-mailem. Zatem trafniejsze by było coś w stylu: “Przypomnij moje dane logowania”.

Błędem jest też fakt, że jak ktoś wybierze logowanie za pomocą banku, to formularz nie ostrzega użytkownika tekstem w stylu “Zostaniesz przekierowany na stronę swojego banku”. Użytkownik nie wie czy będzie następny krok, czy od razu strona banku czy coś innego. Ostrzeganie i łagodzenie obaw, to wyznacznik dobrego formularza.

👉 Filmweb

Wiem, że ten portal ma małą konkurencję, ale na Boga…kilka okienek, które należy zamknąć na dzień dobry, to lekka przesada.

Na wejściu przywita Cię

  • informacje o plikach cookies na całą stronę ( a jak!)
  • reklama filmu w tle lub na całą stronę
  • powiadomienia push
  • nowi użytkownicy otrzymują jeszcze dymki samouczków.

A może zainteresują Cię…

Ebook przeprojektowani

Naucz się projektować interfejsy biorąc pod uwagę ich wygląd oraz użyteczność.

Ebook idealny landing page

Jak zwiększyć konwersję strony docelowej poprawiając ux/ui oraz webwriting.

Książka + ebook o formularzach

Łatwe, przyjemne, dostępne, konwertujące. Takie mogą być Twoje formularze.

Zestaw UX writing

Twórz mikrokopię, którą pokochają użytkownicy. Ebook, framework, kurs.

Ebook WCAG + UX

Praktyczna wiedza o dostępności i doskonaleniu wrażeń użytkownika.

Ebook o pisaniu

Opowiadaj. Pokaż problemy. Podaj rozwiązania. Zachęć do działania.

Rzuć też okiem na:

Menu