Dziś pokażę Ci kilka przykładów interfejsów (niekoniecznie źle wykonanych), gdzie można by poprawić nieco kilka elementów.
👉 PKP
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.
