21 typowych błędów projektowych interfejsu użytkownika (UI), które mocno kosztują Twoją firmę

Opublikowany: 2022-10-10

Konsumenci są dziś bardziej wymagający niż kiedykolwiek, zwłaszcza jeśli chodzi o świat cyfrowy. Oczekują atrakcyjnie zaprojektowanego, intuicyjnego interfejsu, który ładuje się w ciągu kilku sekund, gdy przeglądają stronę internetową i będą głosować oczami, jeśli znajdą coś, co nie spełnia ich wyśrubowanych standardów.

W rzeczywistości statystyki zebrane w wielu różnych branżach sugerują, że:

  • 38% odwiedzających opuści witrynę, jeśli podstawowy układ lub treść nie będą dla nich atrakcyjne
  • 47% ludzi oczekuje, że strona internetowa załaduje się w mniej niż dwie sekundy;
  • Zdecydowana większość (95%) osób uważa, że ​​najważniejszym elementem każdej strony internetowej jest doświadczenie użytkownika (UX); oraz
  • Jeśli jakość projektowania stron internetowych ulegnie pogorszeniu, 94% ludzi całkowicie przestanie ufać stronie lub jej używać.

Wiele firm, które uważają swoją witrynę internetową za integralny element swojej strategii marketingowej online, może nie zdawać sobie sprawy, że kiepski projekt interfejsu użytkownika może być dla nich bardzo kosztowny pod względem wyświetleń stron, klikalności i współczynników konwersji.

Spis treści

Oto 21 typowych błędów w projektowaniu interfejsu użytkownika

#1. Zaśmiecony układ

Użytkownicy uważają, że strony internetowe, które są zbyt zagracone, są bardzo frustrujące. Brakuje im wizualnego ładu i mogą przytłaczać ludzi, gdy starają się zrozumieć, które są najważniejsze i na czym powinni skupić swoją uwagę. Zazwyczaj strona internetowa może wydawać się zagracona, jeśli:

• Na ekranie jest zbyt dużo treści – zwłaszcza tekstu;
• Nie ma logiki ani porządku w sposobie wyświetlania treści; oraz
• Projekt wizualny jest nieatrakcyjny lub kolory i czcionki za bardzo się ze sobą kłócą.

[Tweet „„Projektowanie stron internetowych to nie tylko tworzenie ładnych układów. Chodzi o zrozumienie wyzwania marketingowego stojącego za Twoją firmą. ― Mohamed Saad ””]

Niewiedza, gdzie lub czego szukać na stronie, może sprawić, że odwiedzający zwrócą się w inną stronę, co oznacza utratę sprzedaży lub potencjalną konwersję.

Zaśmiecony układ
Przykład zagraconego układu (źródło obrazu: http://art.yale.edu/)

„Często spotykam się z błędem polegającym na nieużywaniu autentycznych treści na etapie projektowania. Tekst (jako przykład) odgrywa znaczącą rolę w nowoczesnych projektach, ale po wydaniu produktu doskonałe przykłady tekstowe zastępowane są prawdziwą treścią. Na tym kończy się harmonia i pojawiają się różne problemy: długie zdania, które nie pasują do siebie, źle wyrównane etykiety, przerwy między rzędami i bałagan (a to jeszcze przed podjęciem wyzwań związanych z lokalizacją).”
– Gil Bouhnick jest CTO i współzałożycielem Missbeez oraz właścicielem Mobile Spoon. Śledź go na Twitterze @GilBouhnick

#2. Nieproszone CTA (wezwania do działania)

Prawdopodobnie przyciski CTA (wezwania do działania) są najważniejszym elementem na każdej stronie docelowej. To urządzenie, które zamienia przypadkowego odwiedzającego na stronę internetową w potencjalnego klienta. Dlatego ważne jest, aby przyciski wezwania do działania były widoczne, atrakcyjne i łatwe w użyciu, tak aby odwiedzający mogli bezpośrednio wykonywać czynności, które chcesz im wykonać, niezależnie od tego, czy ma to na celu skierowanie ich do strony produktu, koszyka czy kasy .

[Tweet „„Posłuszeństwo proroczemu wezwaniu do działania przynosi pozytywne korzyści”. ― Sherry K. White, Chodzenie po bogactwie ojca: dobrobyt synostwa”]

Oceniając, czy ich przyciski CTA są skuteczne, firmy muszą zadać sobie następujące pytania:

  • Czy CTA jest jasne i jednoznaczne? Czy jest zorientowany na działanie i wywołuje u odwiedzającego poczucie pilności?
  • Czy przycisk znajduje się we właściwym miejscu na stronie? Czy można go łatwo zlokalizować? oraz
  • Jak łatwy w użyciu? Czy wyróżnia się na tle reszty strony i przyciąga uwagę odwiedzającego.
Przykłady wezwania do działania – min
Przykład dobrych CTA (wezwania do działania) (Źródło obrazu: www.krabisunsetcruises.com/en/)

#3. Nieintuicyjna nawigacja

Strona internetowa powinna być uporządkowana i łatwa w nawigacji. Oznacza to, że powinien mieć hierarchię i logiczny porządek, który jest łatwy do naśladowania, z nagłówkami i podtytułami, które wyraźnie odnoszą się do siebie i są sformułowane w sposób jasny i jednoznaczny,

[Tweet „„Kompas moralny człowieka nie działa jeszcze w światach, w których instynkt kieruje życiem”. ― Toba Beta, mój przodek był starożytnym astronautą”]

Zawsze udostępniaj menu i umieszczaj je tam, gdzie użytkownicy spodziewają się go znaleźć — pionowo po lewej stronie jako pasek boczny lub poziomo u góry strony. I nie umieszczaj w swoim menu zbyt wielu pozycji – sześć lub mniej to zalecana ilość.

Nawigacja musi być intuicyjna dla przeciętnego użytkownika – jeśli uzna, że ​​jest zbyt skomplikowana lub nie wie, gdzie szukać, po prostu pójdzie gdzie indziej.

łatwy w nawigacji-min
Przykład dobrej nawigacji (źródło obrazu: thefairchildgrove.com)

#4. Zdjęcia ogólne

Ogólne obrazy to wykorzystanie zdjęć stockowych i innych oczywiście fałszywych obrazów w celu sprzedaży lub promocji produktów lub usług. Problemy z tego typu obrazami są dwojakie – nie tylko same zdjęcia nie są autentyczne, ale są też ogólne – te same obrazy można znaleźć na wielu stronach internetowych.

Obraz maluje tysiące słów, które wypowiadają, i dobry, przykuwający uwagę obraz, który może być potężnym narzędziem marketingowym, wzbudzającym uczucie lub zaufanie, a nawet dobre samopoczucie u klienta. Ale ogólny obraz natychmiast podważa to zaufanie.

Zdjęcia marki

#5. Brak dowodu społecznego

Dowód społeczny to idea, że ​​ludzie dostosują się do norm, aby być lubianym lub akceptowanym przez społeczeństwo. Konsumenci kupują produkty, które sprawiają, że czują się dobrze, ale szukają powodów, dla których to, co robią, jest właściwe. Oznacza to, że przy podejmowaniu decyzji o zakupie zwracają się do internetowych recenzji produktów, referencji i ikon zaufania.

dowód społeczny
Przykład dobrego dowodu społecznego (źródło obrazu: www.yelp.com)

Badania wykazały, że 85% osób przeczyta recenzje online przed podjęciem decyzji o zakupie. Działają jako cenna część procesu zakupu.

[Tweet „Człowiek jest istotą społeczną; nic dziwnego, że kochamy dowody społecznościowe, szybko sprzedaje się marki” ― Bernard Kelvin Clive”]

Jeśli Twoja witryna nie ma recenzji online ani referencji od wcześniejszych lub obecnych klientów, nie ma dowodu społecznego, a odwiedzający są znacznie mniej skłonni do kontynuowania sprzedaży.

#6. Brak przewodnika po stylu

Przewodnik stylu to zestaw wizualnych standardów formatowania i projektowania strony internetowej. Zapewniają jednolitość projektu w całej witrynie, pomagając uniknąć niespójności, takich jak różne czcionki i rozmiary tekstu, kolory lub rozmiary lub stosowanie różnych stylów.

brak przewodnika po stylu
Przykład złego stylu projektowania (źródło obrazu: www.roverp6cars.com)

Najlepsza praktyka sugeruje, że projektant interfejsu użytkownika powinien stworzyć swój przewodnik po stylach po zrozumieniu wytycznych dotyczących witryny, ale przed rozpoczęciem projektowania poszczególnych stron. Zapewnia to nie tylko spójność, ale także oszczędność czasu – wiele elementów graficznych będzie już istniało i nie trzeba ich tworzyć od zera.

7. Tekst i grafika/współczynnik obrazu

Zbyt dużo tekstu i zbyt mało obrazów lub treści graficznych może negatywnie wpłynąć na wygodę korzystania ze strony internetowej. Nie ma dokładnej formuły określającej właściwą równowagę, chociaż niektórzy eksperci sugerują minimum 60% tekstu i maksymalnie 40% grafiki lub obrazów.

Stosunek obrazu do tekstu i grafiki
(Źródło obrazu: www.att.com)

Najlepsze praktyki sugerują:

  • Znajdź równowagę, która ma sens dla Twojej firmy;
  • Użyj wystarczającej ilości tekstu w treści wiadomości, aby widzowie mogli poznać wszystkie kluczowe punkty bez przytłaczania ich;v
  • Zastosuj powszechniejsze użycie obrazów dla osób przeglądających strony internetowe na urządzeniach mobilnych, ponieważ są one łatwiejsze do wyświetlenia niż ryzy tekstu;
  • Testuj proporcje tekstu do obrazu w sposób ciągły, aby określić optymalną konfigurację dla biznesu.

#8. Wolna prędkość ładowania strony

Bez względu na to, jak dobra jest reszta projektu, jeśli strony internetowe ładują się zbyt długo, automatycznie stracisz dużo ruchu. Badania wykazały, że 47% ludzi oczekuje, że strona internetowa powinna załadować się w ciągu dwóch sekund lub mniej. To samo badanie wykazało również, że firmy kosztują tylko jedną sekundę opóźnienia w ładowaniu strony – o 11% mniej odsłon i 7% mniej konwersji.

ładowanie strony

Ponadto szybkość ładowania strony wpływa również na rankingi w Google i innych wyszukiwarkach.

[Tweet „73% użytkowników internetu mobilnego twierdzi, że napotkali witrynę, która była zbyt wolna, aby się wczytać”. ― Neil Patel”]

#9. Sprawianie, że użytkownik myśli

Celem strony internetowej dla biznesu jest przede wszystkim działanie jako narzędzie marketingowe. Powinna wyjaśniać, co sprzedajesz, ile to kosztuje i jak to uzyskać tak prosto i zwięźle, jak to tylko możliwe. Ostatecznym celem jest jak najszybsze i bezbolesne przekształcenie odwiedzającego stronę internetową w klienta.

Sprawianie, że użytkownik myśli

Jeśli jednak użytkownik musi zastanowić się nad decyzją lub sam coś wymyślić, jest szansa, że ​​zmieni zdanie i pójdzie gdzie indziej. Spraw, aby użytkownik był dla nich płynny i bezproblemowy, aby nie musiał myśleć samodzielnie.

#10. Projektowanie dla siebie

Częstym błędem popełnianym przez wielu projektantów stron internetowych jest projektowanie dla siebie bez zwracania uwagi na użytkownika końcowego. Może to być po prostu pobłażanie sobie i nie spełniać potrzeb i wymagań, jakie będzie miał potencjalny odwiedzający witrynę. Zamiast tego projektant stron internetowych powinien ściśle współpracować z zespołami marketingu i sprzedaży, aby upewnić się, że projekt jest zoptymalizowany przede wszystkim z perspektywy użytkownika. Strony internetowe powinny być następnie testowane na rzeczywistych użytkownikach i modyfikowane zgodnie z ich opiniami.

Projektowanie dla siebie

# 11. Zbyt puste puste stany

W terminologii interfejsu użytkownika pusty stan jest tym, co widzi odwiedzający witrynę, gdy nie ma danych do wyświetlenia na ekranie. Może to mieć różne przyczyny: użytkownik właśnie się zarejestrował; sami usunęli dane lub wystąpił błąd.

Zbyt puste puste stany
(Źródło obrazu: www.amazon.com)

Pusty stan sam w sobie nie jest złą rzeczą – można nimi powiedzieć widzowi, do czego służy, dlaczego to widzi i jak może go wypełnić.

Mogą jednak być frustrujące również dla widzów, jeśli nie zostaną podane wskazówki dotyczące tego, co powinno się wydarzyć dalej. Dlatego zaleca się, aby nie były one zbyt puste, ale wypełnione ilustracją, ikoną lub blokiem tekstu sugerującym dalsze kroki.

#12. Brak hierarchii typografii

W każdym projekcie projektowym ważna jest hierarchia wizualna: mówi ludziom, gdzie i na co patrzeć na ekranie. Hierarchia w typografii porządkuje i porządkuje elementy tekstowe w projekcie. Podpowiada czytelnikowi, co jest ważne i znacznie ułatwia czytanie. Bez niego odwiedzający mogą się zgubić lub rozproszyć i albo przegapić kluczowe wiadomości, albo zdenerwować się i wyjść z witryny.

Typografia
(Źródło obrazu: dribbble.com)

[Tweet „Typografia musi być słyszalna. Typografia musi być wyczuwalna. Trzeba doświadczyć typografii”. — Helmut Schmid, grafik i typograf”]

#13. Za dużo wszystkiego

Jeśli chodzi o projektowanie stron internetowych, czasami mniej znaczy lepiej niż więcej. Dotyczy to zwłaszcza dużych bloków tekstu, ale może również dotyczyć obrazów. Jeśli jest zbyt dużo informacji do przyswojenia, ludzie nie będą się zawracać sobie tym trudem, aby je przeczytać. Utrzymuj proste i zwięzłe informacje, używaj obrazów i grafik zamiast słów tam, gdzie to możliwe, i staraj się nie przeciskać ich zbyt wiele na jednej stronie.

Za dużo wszystkiego

# 14. Projektowanie dla zbyt szerokiego grona odbiorców

Chociaż chcesz, aby Twoje produkty lub usługi były atrakcyjne dla jak najszerszego grona odbiorców, istnieje niebezpieczeństwo, że Twój przekaz będzie zbyt szeroki i nie będzie się podobał żadnej konkretnej grupie lub segmentowi. Przed zaprojektowaniem swojej witryny zbadaj potencjalnych odbiorców i dostosuj materiały i komunikaty marketingowe, które mogą bezpośrednio do nich przemawiać. Dopasowanie treści do grupy docelowej jest o wiele skuteczniejszym sposobem marketingu i zapewni znacznie więcej konwersji niż przyjęcie losowego podejścia typu „spray-gun”.

Projektowanie dla zbyt szerokiego grona odbiorców

#15. Projektowanie tylko dla jednego rozmiaru ekranu

Częstym błędem popełnianym przez wielu projektantów stron internetowych jest to, że projektują swoje witryny tylko na pełny ekran, bez uprzedniego sprawdzania, czy można je wyświetlić na mniejszych ekranach lub urządzeniach mobilnych. To ogromny błąd. Prawie 70% konsumentów korzysta dziś z multimediów lub przegląda strony internetowe najpierw na swoich smartfonach, nawet jeśli później dokonują zakupów na laptopie lub komputerze stacjonarnym. Jeśli Twoja witryna nie jest zoptymalizowana pod kątem wszystkich ekranów, potencjalnie odrzucasz dużą liczbę potencjalnych konwersji.

Projektowanie tylko dla jednego rozmiaru ekranu

#16. Pomijanie testów użytkownika

Testowanie użytkowników ma kluczowe znaczenie dla wysokich współczynników konwersji. Podczas gdy projektanci stron internetowych, personel ds. marketingu i sprzedaży w organizacji mogą mieć dobry pomysł na to, czego mogą chcieć użytkownicy lub jakie będą wrażenia użytkownika, nic nie zastąpi nakłonienia rzeczywistych użytkowników do przetestowania Twojej witryny i jej wydajności oraz do włączenia ich opinie.

spostrzeżenia dotyczące testowania użytkowników
(Źródło obrazu: www.usertesting.com)

W rzeczywistości testowanie użytkowników powinno być procesem ciągłym, nawet po uruchomieniu witryny, aby wydajność witryny była zawsze optymalizowana.

#17. Za dużo wyskakujących okienek

Wyskakujące okienka działają. Badania naukowe wykazały, że witryny korzystające z wyskakujących okienek mogą odnotować nawet 400% wzrost konwersji. Są skuteczne, ponieważ przyciągają uwagę ludzi i mogą przekazywać kluczowe wiadomości w łatwo przyswajalnej formie.

Za dużo wyskakujących okienek
(Źródło obrazu: dribbble.com)

Problem polega jednak na tym, że przeszkadzają projektantom i uniemożliwiają im projektowanie przystępnych i atrakcyjnych stron internetowych. Zajmują miejsce i mogą zakłócać zawartość strony. Jednak główny problem z wyskakującymi okienkami polega na tym, że mogą być bardzo irytujące. Wiele osób woli czytać samemu lub cieszyć się doświadczeniem użytkownika bez ciągłego przypominania o tych obrazach lub podpowiedziach.

Jeśli mają być używane wyskakujące okienka, należy ich używać w sposób odpowiedzialny i oszczędny, aby informować odwiedzających bez przytłaczania lub bombardowania ich.

Jest jeszcze jeden powód, dla którego należy unikać zbyt wielu wyskakujących okienek. Od stycznia 2017 r. Google zaczęło karać witryny, które miały zbyt wiele natrętnych wyskakujących okienek w swoich globalnych rankingach wyszukiwania.

#18. Użyj kopii długiej

Długa kopia jest internetową wersją starej tradycji copywritingu i jest często wykorzystywana jako narzędzie marketingowe do wywierania nacisku na odwiedzających za pomocą takich technik, jak żółte podświetlenie, czerwone nagłówki z galopem i migające strzałki. Może odnieść sukces w pewnych okolicznościach, na przykład sprzedawać zimnym potencjalnym klientom, którzy muszą rozwiązać konkretny problem, ponieważ podkreśla produkt bez żadnych zakłóceń.

Użyj kopii długiej

Techniki te są jednak związane z kampaniami typu „płatność za kliknięcie”, które są nie tylko droższe niż kiedyś, ale także powodują, że odwiedzający witrynę obawiają się klikać wtedy z powodu zwiększonej liczby złośliwego oprogramowania i wirusów w sieci. , A co najważniejsze, długie kopie to agresywna forma reklamy i prawdopodobnie zrazisz więcej odwiedzających niż przyciągniesz.

# 19. Trudne do odczytania czcionki i słaby kontrast kolorów

Niestety nie każdy ma doskonały wzrok i potrafi rozróżniać subtelne odcienie i kolory. W rzeczywistości osoby z zaburzeniami wzroku mają problemy z czytaniem tekstu, który nie kontrastuje z jego tłem. Zwłaszcza mężczyźni często cierpią na niedobory kolorów, zwłaszcza w odróżnianiu czerwieni od zieleni. Oznacza to, że jeśli używasz w witrynie trudnych do odczytania czcionek lub słabych kontrastów kolorów, możesz utrudniać czytanie stron i powodować wzrost współczynnika odrzuceń.

brakuje kontrastu

#20. Prawo użytkownika do prywatności

Strony internetowe nieustannie proszą ludzi o powierzenie im poufnych danych osobowych. Ale im więcej informacji musi ujawnić użytkownik, tym większą wagę projektant i właściciel witryny musi przywiązywać do ochrony danych. Dlatego podczas projektowania strony internetowej lub dowolnego formularza online, który gromadzi prywatne, zastrzeżone informacje, firmy muszą mieć jasne zasady i procedury dotyczące sposobu gromadzenia i przechowywania danych użytkowników. Należy to również przekazać odwiedzającym w formie polityki prywatności i regulaminu witryny.

Prawo użytkownika do prywatności
(Źródło obrazu: www.vocso.com)

To nie jest tylko wymóg prawny. Nieprzestrzeganie obowiązków wynikających z przepisów, takich jak RODO (ogólne rozporządzenie o ochronie danych), może kosztować firmy, tysiące, a nawet setki tysięcy dolarów grzywien i zarzutów karnych przeciwko właścicielom firm.

#21. Zapewnienie zbyt dużego wyboru

Projektowanie strony ze zbyt dużą ilością opcji, zbyt dużą liczbą przycisków do kliknięcia lub przełączenia może prowadzić do paraliżu użytkownika. Nie wiedzą, co dalej robić, więc często nie robią nic. Złotą zasadą projektowania stron internetowych jest to, że mniej znaczy więcej.

Zapewnienie zbyt dużego wyboru

Wniosek

Docenienie wartości dobrze zaprojektowanej witryny internetowej dla Twojej firmy może być trudne – dopóki nie zdasz sobie sprawy, że witryna, która jest źle zaprojektowana lub nie działa dobrze, może bardzo kosztować Twoją firmę lub organizację, jeśli chodzi o utratę sprzedaży i konwersji.

Oznacza to, że Twoja witryna musi być przejrzysta, atrakcyjna, dobrze rozplanowana i zorganizowana oraz łatwa do odczytania i nawigacji. Musi być również szybki, łatwy do załadowania i widoczny na wszystkich urządzeniach lub rozmiarach ekranu. Miej na uwadze swoją grupę docelową, doceniaj dowód społeczny i pamiętaj o ogólnej zasadzie, że mniej znaczy więcej.

Wreszcie, ale na pewno nie mniej ważne, nie zakładaj, że po uruchomieniu strony internetowej, że Twoja praca jest wykonywana. Daleko stąd. Strona internetowa powinna stale się rozwijać, uwzględniać ciągłe opinie klientów i użytkowników, aby zapewnić jej możliwie największą optymalizację oraz uzyskanie jak największej liczby kliknięć i konwersji.