Projektowanie stron internetowych to delikatny temat. I mamy tu na myśli to, że należy przetestować wszystko, co się dodaje, usuwa lub przeprojektowuje, zanim nowa wersja zostanie upubliczniona.

Istnieje wiele błędów w projektowaniu stron internetowych, które możesz i powinnaś / powinieneś zacząć naprawiać już dziś, ponieważ są one dość powszechne. Wszystkie mają negatywny wpływ na wrażenia użytkowników, jakie zapewnia Twoja witryna.

Przyjrzyjmy się, które błędy były bardziej powszechne w 2021 roku:

• Używanie zbyt wielu wyskakujących okienek i nakładek na witrynie
• Powolny czas reakcji
• Używanie mylących linków lub oczekiwań
• Niski kontrast lub drobny tekst
• Nieelastyczne dane wejściowe na stronie internetowej
• Brak możliwości zaznaczania i kopiowania tekstów
• Używanie ikon bez etykiet
• Wygląd strony przesuwa się podczas ładowania strony
• Używanie tylko obrazu bohatera nad zagięciem
• Wykorzystanie wzornictwa mobilnego na dużych ekranach

Używanie zbyt wielu wyskakujących okienek lub nakładek na witrynie

Najczęstszym błędem popełnianym obecnie na stronach internetowych jest zbyt duża liczba wyskakujących okienek. I nie mamy tu na myśli wszystkich witryn, które ich używają. Okazjonalne wyskakujące okienka mogą przynieść wspaniałe rezultaty. Jednak niektóre witryny mają tendencję do nadużywania tych narzędzi.

Czy kiedykolwiek odwiedziłeś witrynę internetową, która wykorzystuje mnóstwo wyskakujących okienek? Prawdopodobnie były to niesamowite oferty, biuletyny, zgody na pliki cookie, a może nawet powiadomienia push.

Dlaczego są one szkodliwe dla doświadczenia użytkownika? Otóż blokują one użytkownikowi lub odwiedzającemu dostęp do tego, czego chce. Może to być treść, którą są zainteresowani, ale nadmierne korzystanie z wyskakujących okienek i nakładek nie pozwala im dotrzeć do celu.

Powolny czas reakcji

Ludzie są zajęci i chcą, aby wszystko działo się szybko. Dlatego za każdym razem, gdy klikają element lub łącze na stronie internetowej, reakcja musi być bardzo szybka, poniżej 1 sekundy.

Jeśli będzie to trwało dłużej, spowolni to pracę użytkownika.

Wolny czas odpowiedzi sprawi, że użytkownicy będą rzadziej odwiedzać stronę, ponieważ oczekiwanie na jej załadowanie jest nieprzyjemnym doświadczeniem.

Oznacza to mniejszą użyteczność i mniejszą liczbę użytkowników odwiedzających witrynę.

Używanie mylących linków lub oczekiwań

Inną częstą pułapką, w którą wpadają strony internetowe, jest umieszczanie na nich mylących linków lub tworzenie mylnych oczekiwań klientów.

Zasadniczo oznacza to, że jeśli dodajesz na swojej stronie link, który sygnalizuje rezultat lub nagrodę za kliknięcie tego linku, powinien on zawierać dokładnie to samo.

Jeśli obiecujesz, że za linkiem kryje się film lub wpis na blogu, to powinno to być tylko to i nic więcej. Obiecywanie wideo i kierowanie użytkowników do pokazu slajdów może wzbudzić w nich nieufność.

Niski kontrast lub drobny tekst

Czy byłeś już kiedyś na badaniu wzroku? Prawdopodobnie pamiętasz, że musisz włożyć nieco więcej wysiłku w czytanie mniejszych liter niż w przypadku większego i grubszego tekstu. Niektórzy muszą nawet mrużyć oczy.

Nawet jeśli masz wzrok orła, to i tak musisz się nieco bardziej skupić, aby rozpoznać litery.

Dotyczy to także Twojej strony internetowej. Cienki tekst może być bardzo trudny do odczytania dla użytkowników, zwłaszcza tych bardziej dojrzałych. Wzrok ma tendencję do pogarszania się dość szybko.

Oto artykuł o tym, że cały tekst powinien mieć co najmniej 16px, ze względu na to, jak czytamy tekst drukowany.

Ponadto niski kontrast między tekstem a tłem może powodować bałagan. Użytkownicy nie są w stanie odczytać, co się tam znajduje.

Nieelastyczne dane wejściowe na stronie internetowej

Innym częstym problemem jest to, że witryny ustalają bardzo rygorystyczne zasady formatowania w przypadku, gdy użytkownicy muszą wprowadzić jakiekolwiek informacje o sobie. Doskonałym przykładem są formularze zamówień.

Jeśli musisz wprowadzić informacje o karcie kredytowej, numery telefonów lub kody pocztowe, zazwyczaj możesz je wprowadzić w częściach. Szczególnie w przypadku 16-cyfrowego numeru karty kredytowej.

Jeśli klient musi wprowadzić dane karty w jednym dużym wierszu, jest bardziej podatny na błędy. Poprawianie ich może być jeszcze większym kłopotem.

Użytkownicy powinni być odpowiedzialni za sposób wprowadzania informacji. Jeśli chcą kopiować i wklejać informacje do formularzy, witryna powinna to umożliwiać i formatować je na podstawie wprowadzonych danych (np. usuwać spacje, jeśli to konieczne).

Brak możliwości zaznaczania i kopiowania tekstów

Dużym błędem w projektowaniu stron internetowych jest nieumożliwienie odwiedzającym wybierania i kopiowania informacji z Twojej strony.

Kopiuj i wklej to jedne z najbardziej podstawowych poleceń wykonywanych codziennie przez użytkowników. Ograniczając możliwość korzystania z tych poleceń, bardzo utrudniasz użytkownikom korzystanie z informacji zawartych na Twojej stronie w innych aplikacjach.

Co się stanie, jeśli odwiedzający Twoją witrynę będą chcieli:

• Skorzystaj z Google, zanim zdecydują się na zakup.
• Udostępnianie wszelkich informacji swoim znajomym i kolegom.
• Rób notatki na wypadek, gdyby w przyszłości musieli podjąć taką decyzję.

Mają jednak trudności z wykonywaniem tych czynności, ponieważ teksty nie mogą być zaznaczane i kopiowane.

Jeśli nie pozwalasz ludziom zaznaczać tekstów i kopiować ich, prawdopodobnie nie będą oni również poświęcać czasu na ich ręczne zapisywanie.

W zamian możesz stracić potencjalnych klientów, którzy rozważali Twoją działalność, ale napotkali na przeszkodę.

Używanie ikon bez etykiet

Ikony nadają kontekst temu, co chcesz przekazać. Samotna ikona umieszczona w nagłówku lub stopce witryny może wywołać wiele pytań:

"Co się stanie, jeśli to kliknę?". - Twoi użytkownicy, jeśli nie oznaczysz swoich ikon.

Bez odpowiedniej etykiety klienci muszą zgadywać. Niechętnie klikają lub przechodzą dalej, dlatego etykieta informująca, do czego służy dana ikona lub przycisk, zapewnia bardziej przejrzystą komunikację.

Jest to szczególnie duży problem, gdy za ikonami kryją się bardziej złożone akcje lub polecenia albo gdy do opisania tych akcji używana jest bardziej niejasna lub abstrakcyjna ikonografia.

W miarę możliwości należy unikać pomyłek.

Jak to ujął Jakob Nielsen: zdjęcia są dobre, słowa są dobre, ale te dwa elementy razem są naprawdę wspaniałe!

Wygląd strony przesuwa się podczas ładowania strony

Czasami, gdy witryna korzysta z elementów pochodzących z różnych usług w chmurze, ładowanie elementów może trochę potrwać. Zmuszanie użytkowników do czekania już jest złym znakiem, ale zmiana układu strony po załadowaniu wszystkich elementów może ich dodatkowo rozwścieczyć.

Ludzie są niecierpliwi. Chcą szybko załatwić sprawy związane z witryną.

Może chcą gdzieś kliknąć, ale wszystkie elementy nie zostały jeszcze załadowane. Może najechać kursorem na coś ważnego, ale nagle układ strony się zmienia. Użytkownik klika nowy element, ale zostaje przeniesiony na niewłaściwą stronę.

Zmieniające się układy stron stanowią problem zarówno pod względem użyteczności, jak i estetyki. Po pierwsze, klikanie przez użytkowników na zmieniające się elementy, których nie zamierzali zmieniać, może być dla nich frustrujące. Szczególnie wtedy, gdy muszą nacisnąć przycisk "Wstecz" i czekać na ponowne załadowanie strony.

Po drugie, nie jest to estetyczne, gdy układ strony buduje się sam w miarę jej ładowania. A odwiedzający musi czekać, aż to nastąpi, aby upewnić się, że kliknął właściwe łącze.

Używanie tylko obrazu bohatera nad zagięciem

Nie jest to poważny błąd, ale wciąż jeden z najczęstszych. Niektóre strony internetowe mają tendencję do stosowania tylko jednego dużego obrazka lub wideo nad fałdą.

Jeśli użytkownik wejdzie na Twoją stronę i zobaczy tylko ten ogromny obrazek-bohatera, może odnieść wrażenie, że to cała zawartość strony.

Nawet jeśli istnieje możliwość przewinięcia strony poniżej, aby przeczytać lub zobaczyć więcej, nasz duży obrazek-bohater nie sygnalizuje tego odwiedzającemu. W takiej sytuacji użytkownicy mogą zdecydować się na opuszczenie strony po zapoznaniu się z treścią.

Wykorzystanie wzornictwa mobilnego na dużych ekranach

Projektowanie poszczególnych stron internetowych w taki sposób, aby pasowały do różnych wyświetlaczy, zawsze było skomplikowane. Prowadziło to do problemów z niekompatybilnymi projektami i ekranami. 

Od lat panuje przekonanie, że projekty z dużymi wyświetlaczami nie pasują do telefonów komórkowych. Wciśnięcie projektu desktopowego do urządzenia mobilnego po prostu nie działa. 

Temat ten jest oczywiście ważny ze względu na rosnącą popularność urządzeń mobilnych.

Jest to również powód, dla którego dyskusja przenosi się na temat mobile-first. Tworząc stronę internetową, należy myśleć o mobile-first. To jednak spowodowało odwrócenie problemu, który opisaliśmy powyżej.

Duże ekrany zostały zaniedbane, a projekty mobilne są po prostu używane na większych wyświetlaczach, co powoduje, że projekty mobilne nie działają dobrze na przykład na komputerach stacjonarnych.

Badania pokazują również, że ludzie nie są tak chętni do korzystania z menu na komputerach stacjonarnych, jak w przypadku urządzenia mobilne.

Używanie tego samego hamburger menu na ekranie urządzenia mobilnego na komputerze stacjonarnym powoduje, że odwiedzający muszą pokonać jeszcze jeden niepotrzebny krok w nawigacji.

Dlatego projektując swoją stronę internetową, stronę docelową lub jakąkolwiek inną stronę internetową, należy myśleć o mobile-first, ale nie należy zaniedbywać również projektowania na dużym ekranie. Samo powiększenie projektu mobilnego, aby pasował do większego ekranu, spowoduje problemy z user experience.

Inspiracją do napisania tego wpisu była książka Jacoba Nielsensa 10 największych błędów w projektowaniu stron internetowych w roku 2021 przemówienie inauguracyjne.