Interfejs użytkownika (UI) i UX (User Experience) odgrywają ważną rolę w projektowaniu stron przyjaznym dla konwersji. Interfejs użytkownika sprawia, że twoja strona jest piękna, a UX koncentruje się na użyteczności i prostocie witryny. Jeśli którykolwiek z tych dwóch elementów nie ma lub nie jest zrównoważony, wynikiem jest odbijanie klientów. Projektowanie formularzy stron internetowych to część projektu strony internetowej, która zapewnia bezproblemowe generowanie leadów i gromadzenie informacji z odpowiednią satysfakcją użytkowników na stronie internetowej. Na tym blogu skupimy się głównie na UX, ponieważ interfejs użytkownika jest czymś bardzo subiektywnym i będzie definiowany przez wytyczne firmy dotyczące marki lub wybór kolorów, banerów i czcionek.
Wikipedia mówi:
“Projekt User Experience (UX, UXD, UED lub XD) to proces zwiększania zadowolenia użytkownika z produktu poprzez poprawę jego użyteczności, dostępności i przyjemności w interakcji z produktem.”
Korzystamy z różnych formularzy na naszych stronach internetowych w niemal każdej części. Od formularzy opinii do Zamówienie Page wszystko ma swój cel, a jeśli nie są zaprojektowane według tego, do czego są przeznaczone, nie spełnią swojego zadania.
W tym poście wyjaśnię 6 takie błędy w projekcie strony internetowej, którego nigdy nie powinieneś popełniać, jeśli chcesz uniknąć odbić i najgorszych doświadczeń użytkowników na twojej stronie.
1. Żądanie zbyt dużej ilości informacji od użytkownika
“40% osób opuszcza witrynę, której załadowanie zajmuje więcej niż 3 sekund."-Kissmetrics. To jest, gdy witryna zwolniła przez 1 s, wyobraź sobie, jaka byłaby reakcja, jeśli witryna marnuje znacznie więcej czasu, po prostu prosząc niepotrzebne szczegóły, aby wypełnić formularze.
Nie traćcie więc czasu i nawrócenia, prosząc o "mało ważne" informacje. Należy pamiętać, że istnieje różnica między "niepotrzebnymi" informacjami a "nieistotnymi" informacjami.
Informacje takie jak "Pochodzenie etniczne" lub "Miejsce urodzenia" danej osoby mogą zostać uznane za niepotrzebne w przypadku witryny eCommerce, ale może to być istotne dla strony internetowej partii politycznej. Jest to również dyskusyjne i subiektywne, ale wierzę, że wpadłeś na ten pomysł.
Pola "Nie tak ważne" mogą być:
- Dodatkowy identyfikator e-mail
- Dodatkowy numer telefonu
- Data urodzenia
- Numer faksu
- Pytanie bezpieczeństwa i odpowiedź
- Numer ubezpieczenia społecznego itp.
Nawet jeśli potrzebujesz tych danych, nie musisz pytać za jednym razem, zawsze możesz dać użytkownikowi opcję aktualizacji swojego profilu. Myśl jak Linkedin lub Facebook, że nie pytają o wszystko za jednym zamachem, zamiast tego najpierw rejestrują się przy pomocy pól 3-5, a następnie dają możliwość późniejszego zaktualizowania swojego profilu.
Chodzi przede wszystkim o prezentację, więc powinieneś zadać tylko najważniejsze informacje, które potrzebujesz: Jeśli używasz formularza do wyrażenia opinii, zapytaj o ich opinie i komentarze, zanim zadasz imiona lub identyfikator e-mail. Podobnie, jeśli jest to formularz zamówienia i masz już pewne informacje o użytkowniku, nie pytaj o nie ponownie, zamiast tego poproś o wypełnienie formularza. Na przykład możesz wstępnie wypełnić informacje z adresu rozliczeniowego, aby automatycznie wypełnić formularz adresu dostawy, jeśli oba adresy są takie same.
[Caption id = "attachment_4154" align = "aligncenter" width = "509"]
Prepopulacja informacji z jednej formy do drugiej może zaoszczędzić czas i wysiłek użytkowników [/ caption]
2. Niejednoznaczne lub niereagujące pozycjonowanie etykiet-
Etykiety są używane w formularzach witryny, aby ułatwić użytkownikowi wypełnienie wymaganych informacji. Dlatego upewnij się, że etykiety są umieszczone we właściwej pozycji, która nie wprowadza użytkownika w błąd, co należy wypełnić. Prawidłowe wyrównanie etykiety jest zasadniczo wymagane podczas projektowania responsywnego formularza, który obsługuje różne rozmiary ekranu. Upewnij się, że etykiety są prawidłowo wyrównane na wszystkich rozmiarach ekranu, na których otwierany jest formularz.
[Caption id = "attachment_4155" align = "aligncenter" width = "291"]
Mobilny formularz kontaktowy [/ caption] 
Większość formularzy na stronach używa tych samych miejsc docelowych etykiet we wszystkich rozmiarach ekranu, co nie jest zalecanym wyborem [/ caption]
Użytkownicy na urządzeniach mobilnych korzystają z funkcji zoom, aby wyraźnie zobaczyć etykiety na formularzach, aby wypełnić prawidłowe informacje. Jednak, jak pokazano na powyższym obrazku, jeśli zachowamy to samo wyrównanie zarówno w wersji na komputery, jak i na urządzeniu mobilnym, ukryje ona wszystkie etykiety podczas klikania formularza w trybie powiększenia. Zmusza użytkownika do pomniejszenia formularza za każdym razem, gdy przechodzi do następnego wpisu.
Lepszym rozwiązaniem byłoby użycie dwóch różnych dopasowań w wersji na komputery i urządzenia mobilne. Ustaw etykiety wyrównane do góry w wersjach dla urządzeń przenośnych i zachowaj je równo na pulpicie.
3. Wymiana etykiet z elementami zastępczymi-
W HTML 5 symbol zastępczy w atrybucie tekstowym był wartościowym dodatkiem. Są one skutecznie stosowane w celu zapewnienia krótkiej wskazówki na temat oczekiwanej wartości w terenie.
[Caption id = "attachment_4157" align = "aligncenter" width = "620"]
Symbole zastępcze stanowią krótką wskazówkę dotyczącą oczekiwanych wartości w polu formularza [/ caption]
Zazwyczaj symbol zastępczy pozostaje widoczny do momentu kliknięcia przez użytkownika w polu. Gdy użytkownik kliknie w polu, aby coś wpisać, symbol zastępczy zniknie. Wykorzystanie symboli zastępczych w projektowaniu stron internetowych jest bardzo mylone z etykietami. Wielu projektantów używa tych symboli zastępczych zamiast etykiet, aby opisać pola wejściowe, mając nadzieję na uzyskanie czystszego projektu. Jest to duży błąd, który zagraża użytkownikowi.
Skorzystajmy z sytuacji, gdy użytkownik wypełni długą formę, taką jak formularz kasy. Po wypełnieniu formularza może chcieć przejrzeć szczegóły, zanim będzie mógł przesłać formularz. Teraz, jeśli w formularzu nie ma etykiety, po prostu wpadnie w zakłopotanie z powodu szczegółów, które wypełnił.
[Caption id = "attachment_4158" align = "aligncenter" width = "529"]
Używanie symboli zastępczych zamiast etykiet utrudni klientom szczególnie długie formularze [/ caption]
Dlatego zawsze używaj etykiety. Nie używanie etykiet może być oszczędnością miejsca, ale zaskoczy Cię, jak łatwo ludzie zapominają o tym, co było etykietą po wypełnieniu informacji w terenie.
4. Niewystarczające odstępy i zniekształcony układ
Kolejnym dużym błędem, który popełniamy w projektowaniu formularzy jest umieszczenie zbyt wielu elementów na jednej stronie. Im więcej elementów na jednej stronie, tym więcej konkurencji wśród nich przyciąga uwagę.
Rozwiązaniem jest pozostawienie pewnej przestrzeni do oddychania między elementami poprzez zachowanie białych przestrzeni. Odpowiedni przepływ dla użytkowników będzie zapewniony tylko wtedy, gdy zachowasz wystarczającą odległość między polami i różnymi sekcjami.
Ten pojedynczy formularz kasy pokazuje, jak różne sekcje mogą być segregowane, nawet jeśli na jednej stronie znajduje się zbyt wiele elementów. Formularz wykorzystuje etykiety sekcji do oddzielania różnych sekcji, takich jak Opcje logowania, Adres rozliczeniowy, Potwierdź zamówienie, Metoda wysyłki i Metoda płatności. Co więcej, układ trzech kolumn sprawia, że formularz jest jeszcze czystszy.
[Caption id = "attachment_4159" align = "aligncenter" width = "648"]
Podział na różne sekcje pozwoli uniknąć bałaganu między różnymi sekcjami [/ caption]
5. Niepewne komunikaty o błędach i sprawdzenia poprawności danych wejściowych
Podczas wypełniania formularzy witryny istnieją pewne szanse, że użytkownicy popełnią pewne błędy, z powodu których formularz nie zostanie przesłany. Błędy mogą wystąpić w wyniku braku wpisu lub wypełnienia nieprawidłowych informacji. Aby rozwiązać ten problem, projektanci używają sprawdzania danych wejściowych wyświetlających komunikat o błędzie podczas przesyłania formularza. Używają sprawdzania poprawności po stronie serwera, które zazwyczaj czekają na odpowiedź serwera, aby sprawdzić błędy w formularzu. Jest to większy błąd, który może nawet frustruć użytkownika, gdy po przesłaniu formularza zobaczy komunikat o błędzie.
Zamiast tego można użyć walidacji wstawianej po stronie użytkownika, która mówi na miejscu, jeśli użytkownik wypełnia nieprawidłowy wpis w polu. W ten sposób użytkownicy nie przegapią, jeśli wprowadzili coś niewłaściwego w polu.
[Caption id = "attachment_4160" align = "aligncenter" width = "648"]
Sprawdzanie poprawności inline i pokazywanie błędów na miejscu zapobiega wysyłaniu formularza postów frustracyjnych [/ caption]
Co więcej, nie używaj mylących stwierdzeń w komunikatach sprawdzania poprawności. Wystarczy wyjaśnić, dlaczego wpis jest nieprawidłowy, opisując, jak powinien wyglądać prawidłowy wpis.
6. Używanie Captcha, które nie są przeznaczone dla ludzi
Captchas są wykorzystywane przez strony internetowe w celu zapobiegania atakom spamowym poprzez odróżnianie bota od ludzi. Zakłada się, że te captcha stanowią wyzwanie, które byłoby łatwe dla ludzi, podczas gdy boty nie mogą ich pokonać. W przypadku zapobiegania spamowi, czasami projektanci stają się tak zdesperowani, że integrują captcha, które stanowią wyzwanie nawet dla ludzi.
[Caption id = "attachment_4161" align = "aligncenter" width = "319"]
Captcha zapobiegające spamowi, ale frustrujące dla ludzi [/ caption]
Rozumiem, że zapobieganie spamowi jest ważne, ale captcha może być mylący i trudny do odkodowania przez użytkowników. Możesz użyć alternatywnego rozwiązania tzw. Google re-Captcha, które jest bardziej zaawansowaną i prostą wersją. Nowy re-Captcha Google po prostu prosi użytkownika o kliknięcie w pole wyboru, a weryfikacja odbywa się bez napotykania trudnych do wyświetlenia wiadomości tekstowych.
[Caption id = "attachment_4162" align = "aligncenter" width = "319"]
Google ponownie Captcha jest stosunkowo bardziej przyjazny dla użytkownika, mimo że jest twardy na botach [/ caption]
W końcu,
Doskonalenie doświadczenia użytkownika jest ciągłym procesem, który można osiągnąć tylko dzięki regularnym aktualizacjom przy użyciu najlepszych dostępnych metod. Mam nadzieję, że wskazanie tych błędów projektowych pomoże ci osiągnąć tę poprawę, nie popełniając tych błędów na żadnym formularzu, którego używasz na swojej stronie.
Powiązane historie:
- Elementy strony 5, które mogą rozczarować klientów e-commerce
- 5 – najpewniejsze sposoby zbierania danych e-mail w twoim sklepie internetowym
- 6 Strona kasowa Błędy, które mogą zabijać twoje konwersje
- Wskazówki 6 do tworzenia skutecznej kampanii promocyjnej na Prestashop
- 6 Powody, dla których potrzebujesz aplikacji mobilnej Magento do swojego Fashion Store
