Strona WWW jest wizytówką organizacji i w dobie powszechnego korzystania z Internetu jest jednym z najważniejszych mediów kontaktu i promocji. Każdy poważny błąd projektu stron powoduje zniechęcenie klientów i może wpływać na renomę organizacji. Oprócz błędów ściśle technicznych, związanych z niewłaściwym programowaniem kodu HTML i JavaScript, bardzo ważne są pomyłki na etapie projektu funkcjonalności danej strony lub aplikacji webowej.

Nieczytelne formatowanie

Epoka czcionek Arial, Times New Roman i Courier New dawno się skończyła, webmasterzy korzystają z wielu możliwości formatowania tekstu, w tym różnych czcionek. Nie zawsze jednak ciekawy wygląd idzie w parze z czytelnością. Należy zadbać, by czcionki były czytelne, miały właściwą wielkość (przeglądarki umożliwiają powiększenie tekstu, ale nie wszyscy użytkownicy chcą z tej opcji korzystać), odpowiedni kontrast i rozmieszczenie.

Tekst powinien być podzielony na bloki ze śródtytułami, które można łatwo przejrzeć. Jeśli materiał zawiera listę, warto użyć wypunktowań, skorzystać z podziału na ramki, wprowadzone cytaty oznaczać za pomocą innego formatowania. Jeśli jest to wypowiedź istotnej osoby, warto umieścić jej zdjęcie lub grafikę. Internet znacząco różni się od tekstu pisanego i tę różnicę należy uwzględnić przy projektowaniu układu strony oraz formatowania. Należy przy tym unikać stosowania grafiki zamiast nawigacji tekstowej. Należy również sprawdzić jak wygląda strona, gdy się ją ogląda z wyłączonym JavaScriptem - formatowanie musi być czytelne także bez wtyczek i skryptów. O tak oczywistej sprawie jak właściwe kodowanie polskich liter nie trzeba nawet wspominać - błędy są niedopuszczalne.

Zablokowanie przewijanie

Okno przeglądarki składa się z kilku elementów – przycisków nawigacyjnych, paska adresu oraz dużego okna, w którym użytkownicy korzystają ze strony – czytają ją, przewijają i klikają. Podstawowy błąd polega na ingerencji w tę funkcjonalność, na przykład przez zablokowanie przewijania zawartości strony lub wprowadzanie własnych elementów przewijających.

Przykładem złego podejścia do nawigacji może być interfejs Sharepointa 2010, w którym styl CSS blokuje pasek przewijania. Wprowadzony własny pasek przewijania sprawia, że użytkownicy nie będą mogli przewijać zawartości, dopóki nie zostanie załadowany i uruchomiony cały kod JavaScript (czasami zajmuje to nawet kilka sekund). Jeśli JavaScript nie zostanie załadowany lub będzie interpretowany inaczej, niż zaplanowali twórcy, użytkownik nie przewinie zawartości strony. To bardzo poważny błąd.

Wielokrotne wysyłanie formularzy

Formularze są standardowym składnikiem stron WWW. Użytkownicy używają ich cały czas do logowania, rejestracji, składania zamówień, wprowadzania i aktualizacji danych. Mimo to, że są to najważniejsze czynności prowadzone w wielu aplikacjach webowych, nadal pojawia się problem związany z nawigacją – użycie przycisku Wstecz, a następnie powrót do strony lub choćby jej przeładowanie powoduje wyświetlenie znanego ostrzeżenia o ponownym wysyłaniu danych formularza. Irytujący problem odstręcza wielu użytkowników, którzy albo wysyłają formularz ponownie (co może powodować błędy i ponowne wprowadzanie tych samych rekordów) albo opuszczają stronę. Problem można rozwiązać poprzez oddzielenie skryptów wysyłających formularz, a następnie poprzez przekierowanie przeglądarki na stronę docelową. W ten sposób można uniknąć wielokrotnego wysyłania formularza.

Brak obsługi klawiatury

Przy obsłudze formularza nie wolno pomijać najważniejszego elementu interakcji człowieka z komputerem – klawiatury. Naturalnym działaniem doświadczonych użytkowników jest użycie klawisza Enter po wprowadzeniu kompletu danych oraz nawigacja za pomocą klawiszy strzałek i tabulatora. Należy także opracować umieszczanie kursora w odpowiednich miejscach aplikacji webowej, w tym tak krytycznych miejscach, jak formularze logowania. Aplikacja musi umożliwiać wprowadzenie najważniejszych informacji we właściwe pola za pomocą klawiatury, nawigacji klawiszami strzałek i tabulatorem, a klawisz Enter powinien spowodować wysłanie formularza. Nie wolno blokować wyświetlania menu podręcznego.

Brak informacji zwrotnej

Aplikacje webowe były projektowane pod kątem interaktywnej obsługi. Każde działanie użytkownika (kliknięcie, wybór opcji, przejście do następnej strony) powodowało przeładowanie strony lub jej fragmentu, takiego jak ramka, co tworzyło utarty schemat interakcji między użytkownikiem, a aplikacją. W dobie technologii AJAX pojawia się zła tendencja polegająca na tym, że aplikacja wykonuje pewne czynności na żądanie użytkownika, ale nie sygnalizuje w ogóle ich wykonania lub błędu.

Podobny problem można zaobserwować na Facebooku po wyłączeniu interfejsu sieciowego przy próbie dodania listy do ulubionych. Poprawnie napisana aplikacja powinna zasygnalizować problem braku połączenia, ale strony Facebooka wykonane z użyciem technologii AJAX nie zawsze ten problem zgłaszają. Brak informacji zwrotnej sprawia, że użytkownik jest przekonany o tym, że aplikacja wykonała jakąś czynność, podczas gdy w rzeczywistości tego nie zrobiła, choćby z powodu niezasygnalizowanych problemów z połączeniem. Nigdy nie wolno zakładać, że użytkownik będzie dysponował niezawodnym łączem internetowym.

Obiekty, które same się przemieszczają

Jednym z najbardziej zniechęcających trendów są wszelkie samoczynnie wyskakujące okienka i podobne obiekty. Oczywiście najgorsze pod tym względem są reklamy – im bardziej są dokuczliwe, tym skuteczniej użytkownicy będą je blokować (polscy Internauci należą do ścisłej czołówki pod względem używania Adblocka na świecie).

To samo dotyczy wszystkich opcji samoczynnie uruchamiających się po pewnym czasie oraz po wskazaniu kursorem wybranego miejsca (przykład: digg.com) – właśnie po to powstał dodatek Element hiding helper for Adblock Plus. Użytkownicy nie życzą sobie podobnych interakcji, dlatego je blokują. Animowane menu, rozwijane opcje oraz „podjeżdżające” ramki z różną zawartością należy traktować jak przeżytek, który przynosi więcej szkód, niż korzyści. Użytkownicy oczekują aplikacji, która robi tylko to, co się jej każe.

Stałe elementy strony na każdym ekranie

Stały obiekt jest częścią strony, która pozostaje w swoim miejscu mimo przewijania strony. Ta prosta technika CSS umożliwia usprawnienie przeglądania, ale wymaga ekranu o odpowiednio wysokiej rozdzielczości. W dobie urządzeń mobilnych nie można wymagać od użytkownika, by zawsze korzystał z przeglądarki na pececie, ze zmaksymalizowanym oknem. Obecnie większość połączeń przychodzi z urządzeń mobilnych, w tym smartfonów, tabletów, konsol do gry, a nawet paneli w lodówkach. Dobrze zaprojektowana aplikacja sama wykryje, czy umieszczanie stałych obiektów na stronie ma sens (można to osiągnąć za pomocą prostego kodu jQuery).

Wyskakujące okna

Wyskakujące okna były pierwszą niedogodnością, którą użytkownicy zapragnęli niezwłocznie zablokować. Dziś, gdy przeglądanie w kartach jest czymś zupełnie normalnym a CSS/AJAX umożliwia praktycznie dowolny podział przestrzeni okna, wyskakujące okienka nie mają sensu. Jest to technologia, która pochodzi jeszcze z ubiegłego stulecia i obecnie nie należy z niej w ogóle korzystać, gdyż niemal wszystkie przeglądarki domyślnie ją blokują.

Przykładem aplikacji, która nadal ma problemy z wyskakującymi okienkami jest edytor TinyMCE, często wykorzystywany w różnych aplikacjach webowych. Coraz więcej projektantów i programistów decyduje się na wybranie innego edytora, który w ogóle nie korzysta z wyskakujących okienek, takiego jak CKEditor.

Dźwięki, filmy, animacje

Na początku rozwoju Internetu wielu twórców stron chciało wzbogacić swoje statyczne strony za pomocą dźwięku. Być może w okresie narodzin multimediów dodawanie muzyki miało sens, obecnie użytkownicy bardzo niechętnie patrzą na obiekty dźwiękowe i filmy, które są uruchamiane automatycznie po wejściu na stronę i coraz częściej je blokują za pomocą dodatków takich jak NoScript czy FlashStopper lub Adblock Plus. Jeśli dźwięk lub film jest niezbędny, powinien być odtwarzany dopiero na życzenie użytkownika. Wprowadzanie automatycznie odtwarzanych reklam z dźwiękiem sprawia, że użytkownik albo na tę stronę nie wróci, albo zablokuje głośną reklamę za pomocą Adblocka.

Jeszcze piętnaście lat temu animowana strona WWW była czymś niezwykłym. Z czasem coraz większa liczba stron korzystała z możliwości, jakie dawały przeglądarki obsługujące animacje. Obecnie animowane GIFy oraz fantazyjnie rozwijane menu stanowią relikt przeszłości. Animacje obiektów należy wprowadzać bardzo ostrożnie – coś, co pasuje dla młodego pokolenia, niekoniecznie będzie dobrze odebrane przez osobę w średnim wieku, która może mieć inne oczekiwania.

Flash i tylko Flash

Najgorszą praktyką stosowana przez niektórych twórców stron jest przeniesienie całej funkcjonalności do obiektów Flash. Strona taka jest niedostępna dla urządzeń mobilnych, nie podlega indeksowaniu przez wyszukiwarki i nie da się jej obejrzeć w trybie bezpiecznym, z wyłączonymi wtyczkami. Obiekty Flash zazwyczaj dość mocno obciążają procesor i opóźniają załadowanie strony, dlatego coraz więcej użytkowników omija strony napisane we Flashu. Jeśli strona nie posiada wersji alternatywnej, którą można przeczytać bez wtyczek i skryptów, użytkownicy będą omijać cały serwis.

Przypomnijmy: firma Adobe wycofała się z rozwoju Flasha dla Androida od wydania Ice Cream Sandwich, firma Apple od początku była przeciwnikiem wtyczki Flash i konsekwentnie uniemożliwia wprowadzenie jej do iPhone'ów oraz iPadów.

Przykrywanie tekstu warstwą lub reklamami

Reklamodawcy zachęceni krótkoterminowym zyskiem oczekują wymuszenia na użytkownikach oglądania reklam. Z kolei użytkownicy korzystający ze stron WWW oczekują zawartości, po którą przyszli. Wprowadzanie nachalnych reklam oraz przykrywanie zawartości warstwami zawierającymi różne komunikaty prowadzi w bardzo krótkim czasie do zniechęcenia czytelników, którzy skorzystają z narzędzi do blokowania reklam. Właśnie po to powstał dodatek Element Hiding Helper, który ułatwia użytkownikom usunięcie niepożądanej warstwy. Bardzo silny opór użytkowników objawia się także tym, że podział tekstu na wiele stron (przeprowadzany w celu zwiększenia oglądalności kreacji reklamowych) spowodował powstanie dodatku, który taką paginację usuwa – jest to bardzo popularny „Eliminator Slajdów”. Żeby w dłuższej perspektywie utrzymać zaufanie użytkowników, nie wolno ich lekceważyć ani zniechęcać, a zatem należy unikać nachalnych reklam, osadzania reklam wewnątrz tekstu oraz przykrywania tekstu obcą zawartością.

Wymuszanie rejestracji i zgody reklamowej

Ograniczenie dostępu do części zawartości dla zarejestrowanych użytkowników jest normalną praktyką, która umożliwia nakierowanie czytelników na właściwą dla nich zawartość oraz generowanie leadów. Nie należy jednak oczekiwać od każdego użytkownika natychmiastowej rejestracji – przynajmniej część zawartości powinna być dostępna bez rejestracji, dotyczy to przede wszystkim materiałów, które czytelnicy mogą znaleźć w innym medium. Oczekiwanie rejestracji do każdego dostępu sprawi, że użytkownicy albo znajdą sposób na obejście ograniczeń albo zrezygnują z odwiedzania danej strony.