Ostatnio na jednym forum pojawiła się reklama VOoDoODESIGN.pl. Postanowiłem więc przyjrzeć się tej stronie nieco bliżej.
Działanie
Pierwsze, co rzuca się w oczy, to niestandardowy kursor myszy. Nie jest on jednak zaimplementowany jako kursor, ale po prostu obrazek, który śledzi natywny kursor myszy. Z kolei natywny kursor jest ukryty przy pomocy cursor: none. To sprawia dwa zasadnicze problemy. Pierwszym jest wydajność. Tego typu kursor ewidentnie zacina się przy szybszym poruszaniu. Drugi problem to fakt, że gdy JS nie zadziała, to użytkownik zostanie bez kursora. Drugi z problemów można rozwiązać, ukrywając natywny kursor dopiero wówczas, gdy mamy pewność, że zadziała ten zaimplementowany w JS. Niemniej to i tak nie rozwiązuje wszystkich problemów z niestandardowym kursorem, bo wciąż np. nie uwzględnia on personalizacji dokonanych przez użytkownika. Kursora nie powinno się zmieniać na całkowicie niestandardowy, bo oprócz bombastycznego wyglądu przynosi to jedynie problemy z UX. Jednym z problemów powodowanych przez ten kursor jest niższa widoczność linków i innych elementów interaktywnych. Nie jest to spowodowane wyłącznie brakiem łapki, ale także tym, że kursor po najechaniu na link zmienia się na czarną, nieprzezroczystą kropkę, skutecznie ukrywającą tekst, na jaki najechaliśmy. Tym samym kursor taki może całkowicie przesłonić linki zawierające mało tekstu.
Linki i inne elementy interaktywne są mało widoczne także z innego powodu: nie mają praktycznie żadnych stylów na :hover. To oznacza, że można je odkryć wyłącznie przez zmianę kursora. A to nie jest takie proste, bo kursor często ma za niski kontrast, np. na niebieskim tle. Inne elementy, jak np. miniaturki w sekcji Portfolio na stronie głównej, nie zmieniają kursora po najecnaniu, przez co praktycznie nie sposób się zorientować, że są to elementy klikalne.
Nawigacja przy pomocy klawiatury również jest niemal niemożliwa, bo wskaźnik focusu jest praktycznie niewidoczny.
Strona dodatkowo nie respektuje ustawień użytkownika dotyczących ograniczenia ruchu. Jest to dość spory problem, bo strona zawiera bardzo dużo animacji i ruszających się elementów. Dodatkowo znajdują się tutaj także elementy migające.
Strona działa także tylko częściowo na Firefoksie, np. na podstronie Jak działamy? opis procesu tworzenia strony jest pokazany w formie książki, którą można otworzyć i przewracać strony. Na Firefoksie jednak książki nie da się otworzyć w ogóle.
A skoro już przy książce jesteśmy, to wszystkie strony są obrazkami tekstu, ale ich tekst alternatywny w żaden sposób tego nie odzwierciedla. Informuje jedynie (i to w języku angielskim), która to jest strona książki. Podobnie sprawa ma się z tekstami alternatywnymi projektów na podstronie Portfolio – z tym, że tam atrybuty [alt] są po prostu puste.
Formularz kontaktowy ma źle przypiętą część etykiet do pól. Jednak największym problemem z nim jest fakt, że… treść wiadomości jest opcjonalna. Tym samym można bez żadnego problemu wysłać pustą wiadomość, podając jedynie wymyślony naprędce e-mail.
Najciekawiej robi się jednak na podstronie O nas, na której znajduje się link do podstrony Certyfikaty. A tam czeka na nas „Lorem ipsum”.
Z kolei na urządzeniach mobilnych strona wygląda na zepsutą, np. podstrona O nas jest całkowicie pusta, a na podstronie Jak działamy? znajduje się jedynie książka na samym dole, po sporej ilości pustego miejsca.
Kod
Z kodu tak naprawdę chciałbym przytoczyć tylko jeden fragment:
<!-- This site was created in Webflow. http://www.webflow.com -->Okazuje się więc, że strona jest wygenerowana w narzędziu Webflow. I to, niestety, widać po jakości wygenerowanego kodu. Tego typu narzędzia wciąż nie są w stanie generować wystarczająco semantycznego i dostępnego kodu i najczęściej o wiele lepiej się wyjdzie, pisząc kod samemu.
Podsumowanie
Strona w obecnym stanie wygląda po prostu na niedokończoną lub wręcz popsutą. Nie ma tutaj też zwracania większej uwagi na sprawy użyteczności czy dostępności. Nacisk położony jest przede wszystkim na wygląd strony. Dziwi także niepoprawne działanie części strony na Firefoksie. Wydaje mi się, że gdyby strona była zrobiona ręcznie, nie przy użyciu narzędzia pokroju Webflowa, to jej jakość byłaby wyższa.
„Podobnie sprawa ma się z tekstami alternatywnymi projektów na podstronie Portfolio – z tym, że tam atrybuty [alt] są po prostu puste.”
No i dobrze, to tylko dekoracyjne grafiki.
Mnie bardziej martwią bezsensowne taget=”_blank”.
„Formularz kontaktowy ma źle przypiętą część etykiet do pól. Jednak największym problemem z nim jest fakt, że… treść wiadomości jest opcjonalna.”
I co w tym złego? Dlaczego to niby jest „największy problem”? Sama tak robię.
To jest formularz kontaktowy. Jak sama nazwa mówi, służy do kontaktu. A do kontaktu nie potrzeba nic więcej, niż email. Nie ma sensu wymagać więcej danych, niż jest rzeczywiście potrzebne.
„Tym samym można bez żadnego problemu wysłać pustą wiadomość, podając jedynie wymyślony naprędce e-mail.”
I co by zmieniło wymaganie treści wiadomości? Z tym polem jest nawet łatwiej, bo można wpisać cokolwiek, nie tylko email…
Ale jak tak już się czepiamy, to ta strona (WebKrytyk) nie spelnia wymagań RODO. Nie zbierasz odpowiednich zgód, a potrzebujesz ich choćby na ładowanie fontów z Google.
RODO obowiązuje już od trzech lat, wcześniej były dwa lata na przygotowanie. Brak przestrzegania RODO to nie niewiedza, a zwykła ignorancja…
PS Wierzcie lub nie, ale z VOoDoODESIGN.pl nie mam nic wspólnego. Dowiedziałam się o nich właśnie z tego wpisu.
Uwierzyłbym bardziej, gdybyś o tym tak nie zapewniała 😉
Nie uznałbym tego za dekoracyjne grafiki. Stanowią zdecydowaną większość zawartości strony i IMO powinny być opisane.
Bo to jest utrudnianie komunikacji sobie i osobie korzystającej z formularza, bo wydłuża cały proces komunikacji – i to całkowicie niepotrzebnie.
Brak przestrzegania podstawowych zasad dostępności to nie niewiedza, a zwykła ignorancja ¯\_(ツ)_/¯
Formularz kontaktowy – nie można twierdzić, że to jest złe.
Z dostępnością nie ma to nic wspólnego, kwestia podejścia.
Jak najbardziej można, bo wartościowanie wskazuje na to, że to opinia.
Nie ma i nigdzie nie napisałem, że ma. Niemniej ma już wspólnego z UX.
Pseudo-specjaliści od stronek www robionych w WYSYWIG – mający szumnie brzmiące „certyfikaty” z czasopisma komputerowego CHIP, Enter lub inne tego typu nic nie warte „kursy fotoszopa” – to jest żenujące.
Wstyd by mi było coś takiego robić, a co dopiero się tym chwalić.
@Comandeer; Jak sensownie sprawdzić właśnie możliwość poruszania się po stronie za pomocą klawiatury. Pytam z perspektywy, osoby która dobrze widzi i naturalnie porusza się po stronie z wykorzystaniem myszki czy palców (mobile).
A przez to tylko wie co to jest czytnik ekranowy, czy możliwości poruszania się po stronie klawiaturą. Ale w praktyce, jako osoba nie korzystająca z takiego sposobu interakcji nie wiem, jak to ma działać w tym działać dobrze.
PS. Moje poruszanie się po stronie z klawiaturą ogranicza się do TAB przy formularzach.
Najbardziej podstawowy sposób to właśnie sprawdzenie, czy da się przejść TAB-em przez wszystkie elementy interaktywne (linki, przyciski, inne klikalne elementy itd.). Każde naciśnięcie TAB-a powinno przenieść nas do kolejnego elementu interaktywnego – w takiej kolejności, w jakiej wyświetlają się na ekranie (żeby nie było sytuacji, że np. pierwsze podświetli się logo, po czym nagle jest przeskok gdzieś do treści, a potem lądujemy w nawigacji itd.) – sekwencja powinna być sensowna. No i przy okazji warto sprawdzić, czy mamy sensowne style focusu, żeby użytkownik zawsze wiedział, gdzie się znajduje na stronie.
Yeah man, you are right and on point! I think we as web developers are better at web UX and web UI than many designers!
Imagine writing for web. It’s the same thing. Who can know better other than people who develop for the web and the internet?