Czy wszystkie trendy są tego warte? 5 najczęstszych błędów UX, które popełniają projektanci stron internetowych

„Elegancję osiąga się, gdy wszystko, co zbędne, zostaje odrzucone, a człowiek odkrywa prostotę i koncentrację: im prostsza i bardziej trzeźwa postawa, tym piękniejsza”. -Paulo Coelho

Misją projektanta stron internetowych jest tworzenie angażujących doświadczeń użytkowników, pomaganie odwiedzającym witrynę w wykonywaniu zadań i zwiększanie konwersji. W tym procesie często skupiają się tylko na estetyce, idą na skróty i ostatecznie opierają się na różnych powszechnych wzorcach i trendach projektowych. Niebezpieczeństwo polega na tym, że mogą zostać zboczeni przez popularne trendy, a w konsekwencji popełniane są typowe błędy UX, ponieważ trendy są niewłaściwie wdrażane.

Jeśli chodzi o internet, ludzie nie chcą się czegoś uczyć , chcą coś robić . Istnieje wiele przykładów w Internecie, w których projektanci zdecydowali się skupić tylko na atrakcyjności wizualnej, a tym samym poświęcili użyteczność. Zakładali, że „moment wow”, który napędzał projekt, sam w sobie będzie wystarczająco silny, aby zaangażować użytkownika. Niestety, użytkownicy mają trudności ze zrozumieniem interfejsu użytkownika, mają prawdziwe trudności z korzystaniem z witryny, a współczynniki odrzuceń witryny gwałtownie wzrosły.

Jak stwierdziła Kate Rutter: „Brzydkie, ale użyteczne atuty ładne, ale bezcelowe”. Kluczem do skutecznego wykorzystania wzorców i trendów w projektowaniu stron internetowych jest znalezienie równowagi między tym, co wygląda estetycznie, a tym, co stanowi wartość dodaną.

Przyjrzyjmy się kilku typowym błędom UX.

Typowy błąd UX w projektowaniu stron internetowych nr 1: Duże, stałe nagłówki

Na stronach internetowych pojawia się coraz więcej wysokich przyklejonych nagłówków. „Bloki marki” i menu nawigacyjne, które mają stałą pozycję i zajmują dużo miejsca. Pozostają przyklejone do górnej części okna przeglądarki („przyklejony nagłówek”) i często blokują zawartość podczas przewijania pod nimi.

Niektóre nagłówki w witrynach dużych marek mają ponad 150 pikseli wysokości. Gdzie jest ich wartość? Stałe elementy, takie jak przyklejone nagłówki, mogą przynieść realne korzyści, ale projektanci stron internetowych powinni zachować ostrożność przy ich używaniu — należy wziąć pod uwagę kilka ważnych kwestii związanych z UX.

Nagłówek Sticky Nav może być zbyt duży dla wygody

Jeśli decyzja o skorzystaniu z nagłówka Sticky Nav została już podjęta, najlepiej przetestować ją z użytkownikami. Częstym błędem UX jest przesadzanie i zapychanie lepkiego nagłówka nawigacyjnego treścią. Dzięki stałemu nagłówkowi przeglądanie powinno być nadal wygodne dla odwiedzających. Brak odpowiedniej równowagi może spowodować pozostawienie niewielkiej ilości miejsca na główną treść i duszne, klaustrofobiczne wrażenia z witryny dla odwiedzających.

Czasami istnieje proste obejście z CSS: dzięki temu, że przyklejony nagłówek jest nieco przezroczysty, ludzie nadal mogą widzieć przez niego zawartość podczas przewijania, co sprawia, że ​​obszar zawartości wydaje się bardziej znaczący.

Oto przykład wysokiego, przyklejonego nagłówka: Strona profilu gracza ATP na Roger Federer.

Przyklejony nagłówek tej witryny ma wysokość ponad 180 pikseli! To ponad 30% całej wysokości strony na niektórych laptopach: słabe wrażenia użytkownika, których można uniknąć.

Nie biorąc pod uwagę problemu UX Sticky Nav Header na urządzeniach mobilnych

Niektóre osoby mogą używać dużych wyświetlaczy komputerowych o wysokiej rozdzielczości, na których przyklejony nagłówek nawigacyjny może przyspieszyć interakcje, ale co z urządzeniami mobilnymi? Bez wątpienia znaczna liczba odwiedzających witrynę będzie uzyskiwać dostęp do witryny z urządzenia mobilnego, więc stały nagłówek może nie być najlepszym pomysłem. Na szczęście techniki projektowania responsywnego umożliwiają projektowanie różnych rozwiązań dla różnych platform i trzymanie się nagłówka Sticky Nav — kalambur przeznaczony dla przeglądarek komputerowych.

Witryna Coffee with a Cop również ma stały nagłówek, ale znacznie mniejszy — ma mniej niż 80 pikseli wysokości.

W tym przypadku nawigacja nagłówka jest prawdopodobnie właściwym rozwiązaniem dla ekranów o wysokiej rozdzielczości, ponieważ umożliwia bardziej wydajną nawigację. Na ekranach o mniejszej rozdzielczości nagłówek jest również stały, ale zajmuje dużo miejsca. Doskonałą alternatywą dla przyklejonego nagłówka nawigacyjnego na urządzeniach mobilnych jest wszechobecne menu hamburgerów. Chociaż ten wzór nie jest uniwersalnym rozwiązaniem problemów, zwalnia znaczną ilość miejsca.

Web Design Powszechny błąd UX nr 2: cienkie, lekkie czcionki

W dzisiejszych czasach cienkie, jasne czcionki są wszechobecne w wielu aplikacjach mobilnych i witrynach internetowych. Wraz z postępem technologii ekranowej i ulepszonym renderowaniem, wielu projektantów używa ich, ponieważ są eleganckie, czyste i modne. Jednak cienkie kroje pisma mogą powodować problemy z użytecznością, a tym samym utrudniać UX.

Celem każdego tekstu na stronie jest czytelność, a cienka czcionka może poważnie wpłynąć na czytelność. Nie wszyscy odwiedzający będą oglądać witrynę na wyświetlaczu, który dobrze wyświetla cienką czcionkę. Niektóre rodzaje światła są trudne do odczytania na iPhonie lub iPadzie z wyświetlaczem Retina.

Przede wszystkim tekst musi być czytelny. Jeśli użytkownicy nie mogą odczytać słów w Twojej aplikacji, nie ma znaczenia, jak piękna jest typografia.

Wytyczne Apple dotyczące interfejsu ludzkiego

Apple odnosi się do aplikacji mobilnych, ale ta sama zasada dotyczy stron internetowych. Czytelność jest obowiązkowa, a nie opcjonalna dla dobrej użyteczności. Nie ma sensu umieszczać treści na stronie, jeśli jest ona nieczytelna.

Oto kilka typowych błędów UX, które należy wziąć pod uwagę przed użyciem cienkiego pisma:

Używanie cienkich i lekkich czcionek, ponieważ jest modny

Czcionki powinny nie tylko dobrze wyglądać, ale także być czytelne. Aby uzyskać odpowiedni kontrast i czytelność, projektanci powinni dążyć do optymalnego połączenia w swoich projektach: rozmiaru, wagi i koloru.

Najlepiej przetestować witrynę na różnych urządzeniach i rozmiarach ekranu, aby upewnić się, że cały tekst witryny jest czytelny.

Co prowadzi nas do kolejnego powszechnego błędu UX:

Brak testowania czytelności tekstu na wszystkich głównych urządzeniach

Cienki, lekki typ może dobrze wyglądać na drogich, precyzyjnie dostrojonych monitorach wielu projektantów, ale należy również wziąć pod uwagę przeciętnego użytkownika, który często widzi nasze projekty na tańszych, niespełniających norm wyświetlaczach. Najlepszą praktyką jest sprawdzenie, jak czcionki wyglądają na wszystkich głównych urządzeniach: komputerach stacjonarnych, laptopach, tabletach i smartfonach.

Na przykład, testując projekt mobilny, poproś uczestników, aby korzystali z witryny na urządzeniach mobilnych w świetle dziennym — użytkownicy w świecie rzeczywistym nie zawsze będą mieli doskonałe warunki przeglądania i oświetlenia. Jeśli używasz cienkiej czcionki w witrynie, istnieje prosty sposób na dostosowanie się do użytkowników mobilnych: określ grubszą czcionkę na urządzeniu mobilnym, aby zapewnić lepszą czytelność.

Web Design Powszechny błąd UX nr 3: tekst o niskim kontraście

Używanie elementów o niskim kontraście kolorów stało się również modne w nowoczesnym projektowaniu interfejsu użytkownika. Wyrósł z minimalistycznego trendu w projektowaniu, ponieważ zmniejszając kontrast w niektórych obszarach, projekt wydawałby się „minimalistyczny”. Projektanci nie mogli ograniczyć złożoności informacji, które należało przedstawić, więc bawili się niskim kontrastem w projekcie.

Omówiliśmy już cienkie czcionki, ale jest jeszcze większa pułapka: połączenie lekkiego kroju z niskim kontrastem, które poważnie utrudnia UX ze względu na kiepską czytelność. Projektanci powinni zrobić wszystko, co w ich mocy, aby uniknąć tej pułapki użyteczności.

Niski kontrast tekstu w treści kopii

Cool Springs Financial używa cienkiego wariantu Helvetica do tekstu podstawowego na swojej stronie internetowej. Chociaż wygląda elegancko i przyczynia się do estetycznego interfejsu użytkownika, jest trudny do odczytania na kilku platformach. Chociaż niski kontrast niekoniecznie jest zły, może mieć negatywny wpływ na użyteczność witryny internetowej, utrudniając czytanie tekstu.

Nie testuję kontrastu tekstu

Istnieje sprytne narzędzie do sprawdzania kontrastu w Internecie o nazwie Colorable, które pomoże projektantom ustawić prawidłowy kontrast tekstu zgodnie z wytycznymi dotyczącymi dostępności treści internetowych. Gdy projektanci wiedzą, że używają odpowiedniego kontrastu tekstu, mogą dostosować inne kolory na swojej stronie internetowej i przeprowadzić szybkie testy wielu urządzeń/użytkowników, aby upewnić się, że tekst jest czytelny.

Web Design Powszechny błąd UX nr 4: Przejmowanie zwojów

Innym trendem wysokiego ryzyka, który zyskuje popularność w sieci, jest „przechwytywanie przewijania”. Witryny, które wdrażają ten trend, przejmują kontrolę nad przewijaniem strony (zwykle za pomocą JavaScript). Kiedy ludzie go napotykają, nie mają już kontroli nad przewijaniem strony i nie są w stanie przewidzieć jego zachowania, co może łatwo prowadzić do zamieszania i frustracji. To ryzykowny eksperyment, który może zaszkodzić użyteczności witryny, a w najgorszym przypadku wywołać „wściekłość komputerową”.

Niektóre strony internetowe mogą ujść na sucho z przejmowaniem przewijania, ale to nie znaczy, że każdy może. Na przykład wielu projektantów stron internetowych śledzi witryny Apple za pomocą funkcji przejmowania przewijania, efektów paralaksy i obrazów różnych produktów w wysokiej rozdzielczości. Apple ma swój rynek docelowy, unikalną koncepcję i ekskluzywne treści na swojej stronie internetowej. Ponieważ każda witryna ma unikalne problemy, musi również mieć unikalne rozwiązania dostosowane do tych problemów.

Nie testuje z rzeczywistymi użytkownikami

Pożyczając modne pomysły lub wzorce interfejsu użytkownika, najlepiej przetestować prototyp strony internetowej na rzeczywistych użytkownikach, aby uniknąć problemów z UX. Proste testy użyteczności ujawnią, czy implementacja na przykład przejęcia funkcji scrollowania jest możliwa, czy nie. Bez testów projektanci nie mają możliwości sprawdzenia, czy przechwytywanie przewijania zadziała, a przyjmowanie założeń jest często kosztowne.

Tumblr, popularna witryna z osobistymi blogami, wykorzystuje przejmowanie przewijania na swojej stronie głównej. Chociaż może to być ryzykowne, można bezpiecznie założyć, że dobrze znają swoją grupę docelową i fajne, modne wrażenia użytkownika, które chcą zaprezentować. Kiedy odwiedzający witrynę zaczynają się przewijać, zwój jest przejmowany, a ludzie są przenoszeni do następnej sekcji.

Długa przewijana strona podzielona jest na kilka sekcji, które wyróżnia duża dawka nasyconych kolorów i wyraźne kropki wskaźnikowe po lewej stronie okna. W rezultacie strona główna Tumblra przypomina dużą pionową karuzelę, nad którą użytkownicy mają kontrolę, a nie nieprzyjemną, eksperymentalną witrynę z własnym rozumem.

Web Design Powszechny błąd UX nr 5: Karuzele

Karuzele — pokaz slajdów do obracania różnych treści — są bardzo popularne w Internecie, zwłaszcza na stronach docelowych i stronach głównych. Chociaż mogą być przydatne, mają wiele problemów z użytecznością i dlatego kwalifikują się jako kolejny powszechny błąd UX. Według Nielsen Norman Group: „ ludzie często natychmiast przewijają te duże obrazy i pomijają całą ich zawartość ”. Może to negatywnie wpłynąć na UX, ponieważ odwiedzający mogą nie widzieć wartościowych treści na niektórych obracających się slajdach.

Karuzele witryn internetowych mogą nie zapewniać użytkownikom wartości

Jeśli zrobisz to dobrze, karuzela może przyciągnąć użytkowników dużymi, uderzającymi obrazami. Problem polega na tym, że karuzele często nie dodają żadnej dodatkowej wartości, ale są po prostu przeznaczone do dekoracji i są włączane tylko dlatego, że wszyscy inni ich używają. Sposób na sprawdzenie, czy karuzela witryny ma sens: wypisz trzy korzyści, jakie karuzela zapewnia odwiedzającemu. Jeśli nie można znaleźć trzech znaczących korzyści, nie dodaje to żadnej wartości.

Poprzednie i następne strzałki mają niską wykrywalność

Ważne informacje w karuzeli witryny mogą pozostać ukryte, jeśli nie można wykryć następnej i poprzedniej strzałki. Elementy sterujące powinny być również kompatybilne z urządzeniami mobilnymi.

Często nie ma strzałek do sterowania karuzelą; tylko kropki wskaźnika slajdów są włączone do przesuwania slajdów. Jednak często charakteryzują się niskim kontrastem, niską wykrywalnością i brakiem wystarczająco dużego obszaru, który można kliknąć lub dotknąć. Małe klikalne cele mogą prowadzić do słabego UX, sfrustrowanego użytkownika witryny i szybkiego wyjścia ze strony.

Na przykład witryna Fundacji Floresta Longo ma na swojej stronie głównej obracającą się karuzelę obrazów. Jest ustawiony na autoodtwarzanie i obraca się przez pięć zdjęć. Strzałki poprzednia i następna są jednak małe i przezroczyste, co sprawia, że ​​są trudne do zauważenia i trudne do kliknięcia. Nie ma żadnych wskaźników wskazujących, że osoby odwiedzające slajd są włączone, ani etykiet wskazujących, co przedstawiają obrazy. Obrazy nie są linkami i działają jako czysta dekoracja. Chociaż ten rodzaj karuzeli może mieć pewną wartość, jeśli chodzi o zaangażowanie odwiedzających, ogólnie pozostawia wiele do życzenia.

Wniosek

Trendy w projektowaniu stron internetowych, jeśli nie zostaną rozważone i wdrożone z ostrożnością, mogą prowadzić do kilku typowych błędów UX. Projektanci UX powinni kierować się własnym osądem i nie bać się wprowadzać innowacji, ale aby zapewnić doskonałą użyteczność witryny, dobrze byłoby im dokładnie przetestować swój projekt z rzeczywistymi użytkownikami.

W szalonej obfitości trendów w projektowaniu stron internetowych modne rzeczy przychodzą i odchodzą. W tym chaosie zrównoważone wykorzystanie estetyki, wydajności i użyteczności odgrywa znaczącą rolę w wyróżnieniu trendów UX, które okazały się najsilniejsze i zdobyły największą akceptację użytkowników.

Projektanci stron internetowych mogą wymyślić najfajniejszy schemat kolorów, najbardziej wymyślną animację przewijania lub najbardziej fantastyczne efekty paralaksy, ale jeśli w wyniku tego ucierpi ludzka interakcja, UX będzie słaby, a ludzie szybko pójdą dalej. Inna witryna jest w zasięgu jednego kliknięcia.

Dalsza lektura na blogu Toptal Design:

• Projektowanie responsywne — najlepsze praktyki i uwagi
• Podchodzenie do procesu projektowania strony internetowej z poziomu przeglądarki
• Kodowanie dla projektantów – ile powinniśmy wiedzieć?
• Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy