“Projekt User Experience (UX, UXD, UED lub XD) to proces zwi\u0119kszania zadowolenia u\u017cytkownika z produktu poprzez popraw\u0119 jego u\u017cyteczno\u015bci, dost\u0119pno\u015bci i przyjemno\u015bci w interakcji z produktem<\/em>.”<\/p>\n Korzystamy z r\u00f3\u017cnych formularzy na naszych stronach internetowych w niemal ka\u017cdej cz\u0119\u015bci. Od formularzy opinii do Zam\u00f3wienie Page<\/a> wszystko ma sw\u00f3j cel, a je\u015bli nie s\u0105 zaprojektowane wed\u0142ug tego, do czego s\u0105 przeznaczone, nie spe\u0142ni\u0105 swojego zadania.<\/p>\n W tym po\u015bcie wyja\u015bni\u0119 6 takie b\u0142\u0119dy w projekcie strony internetowej, kt\u00f3rego nigdy nie powiniene\u015b pope\u0142nia\u0107, je\u015bli chcesz unikn\u0105\u0107 odbi\u0107 i najgorszych do\u015bwiadcze\u0144 u\u017cytkownik\u00f3w na twojej stronie.<\/p>\n “40% os\u00f3b opuszcza witryn\u0119, kt\u00f3rej za\u0142adowanie zajmuje wi\u0119cej ni\u017c 3 sekund.<\/em>"-Kissmetrics<\/a>. To jest, gdy witryna zwolni\u0142a przez 1 s, wyobra\u017a sobie, jaka by\u0142aby reakcja, je\u015bli witryna marnuje znacznie wi\u0119cej czasu, po prostu prosz\u0105c niepotrzebne szczeg\u00f3\u0142y, aby wype\u0142ni\u0107 formularze.<\/p>\n Nie tra\u0107cie wi\u0119c czasu i nawr\u00f3cenia, prosz\u0105c o "ma\u0142o wa\u017cne" informacje. Nale\u017cy pami\u0119ta\u0107, \u017ce istnieje r\u00f3\u017cnica mi\u0119dzy "niepotrzebnymi" informacjami a "nieistotnymi" informacjami.<\/p>\n Informacje takie jak "Pochodzenie etniczne" lub "Miejsce urodzenia" danej osoby mog\u0105 zosta\u0107 uznane za niepotrzebne w przypadku witryny eCommerce, ale mo\u017ce to by\u0107 istotne dla strony internetowej partii politycznej. Jest to r\u00f3wnie\u017c dyskusyjne i subiektywne, ale wierz\u0119, \u017ce wpad\u0142e\u015b na ten pomys\u0142.<\/p>\n Pola "Nie tak wa\u017cne" mog\u0105 by\u0107:<\/p>\n Nawet je\u015bli potrzebujesz tych danych, nie musisz pyta\u0107 za jednym razem, zawsze mo\u017cesz da\u0107 u\u017cytkownikowi opcj\u0119 aktualizacji swojego profilu. My\u015bl jak Linkedin lub Facebook, \u017ce nie pytaj\u0105 o wszystko za jednym zamachem, zamiast tego najpierw rejestruj\u0105 si\u0119 przy pomocy p\u00f3l 3-5, a nast\u0119pnie daj\u0105 mo\u017cliwo\u015b\u0107 p\u00f3\u017aniejszego zaktualizowania swojego profilu.<\/p>\n Chodzi przede wszystkim o prezentacj\u0119, wi\u0119c powiniene\u015b zada\u0107 tylko najwa\u017cniejsze informacje, kt\u00f3re potrzebujesz: Je\u015bli u\u017cywasz formularza do wyra\u017cenia opinii, zapytaj o ich opinie i komentarze, zanim zadasz imiona lub identyfikator e-mail. Podobnie, je\u015bli jest to formularz zam\u00f3wienia i masz ju\u017c pewne informacje o u\u017cytkowniku, nie pytaj o nie ponownie, zamiast tego popro\u015b o wype\u0142nienie formularza. Na przyk\u0142ad mo\u017cesz wst\u0119pnie wype\u0142ni\u0107 informacje z adresu rozliczeniowego, aby automatycznie wype\u0142ni\u0107 formularz adresu dostawy, je\u015bli oba adresy s\u0105 takie same.<\/p>\n [Caption id = "attachment_4154" align = "aligncenter" width = "509"] Etykiety s\u0105 u\u017cywane w formularzach witryny, aby u\u0142atwi\u0107 u\u017cytkownikowi wype\u0142nienie wymaganych informacji. Dlatego upewnij si\u0119, \u017ce etykiety s\u0105 umieszczone we w\u0142a\u015bciwej pozycji, kt\u00f3ra nie wprowadza u\u017cytkownika w b\u0142\u0105d, co nale\u017cy wype\u0142ni\u0107. Prawid\u0142owe wyr\u00f3wnanie etykiety jest zasadniczo wymagane podczas projektowania responsywnego formularza, kt\u00f3ry obs\u0142uguje r\u00f3\u017cne rozmiary ekranu. Upewnij si\u0119, \u017ce etykiety s\u0105 prawid\u0142owo wyr\u00f3wnane na wszystkich rozmiarach ekranu, na kt\u00f3rych otwierany jest formularz.<\/p>\n [Caption id = "attachment_4155" align = "aligncenter" width = "291"] U\u017cytkownicy na urz\u0105dzeniach mobilnych korzystaj\u0105 z funkcji zoom, aby wyra\u017anie zobaczy\u0107 etykiety na formularzach, aby wype\u0142ni\u0107 prawid\u0142owe informacje. Jednak, jak pokazano na powy\u017cszym obrazku, je\u015bli zachowamy to samo wyr\u00f3wnanie zar\u00f3wno w wersji na komputery, jak i na urz\u0105dzeniu mobilnym, ukryje ona wszystkie etykiety podczas klikania formularza w trybie powi\u0119kszenia. Zmusza u\u017cytkownika do pomniejszenia formularza za ka\u017cdym razem, gdy przechodzi do nast\u0119pnego wpisu.<\/p>\n Lepszym rozwi\u0105zaniem by\u0142oby u\u017cycie dw\u00f3ch r\u00f3\u017cnych dopasowa\u0144 w wersji na komputery i urz\u0105dzenia mobilne. Ustaw etykiety wyr\u00f3wnane do g\u00f3ry w wersjach dla urz\u0105dze\u0144 przeno\u015bnych i zachowaj je r\u00f3wno na pulpicie.<\/p>\n W HTML 5 symbol zast\u0119pczy w atrybucie tekstowym by\u0142 warto\u015bciowym dodatkiem. S\u0105 one skutecznie stosowane w celu zapewnienia kr\u00f3tkiej wskaz\u00f3wki na temat oczekiwanej warto\u015bci w terenie.<\/p>\n [Caption id = "attachment_4157" align = "aligncenter" width = "620"] Zazwyczaj symbol zast\u0119pczy pozostaje widoczny do momentu klikni\u0119cia przez u\u017cytkownika w polu. Gdy u\u017cytkownik kliknie w polu, aby co\u015b wpisa\u0107, symbol zast\u0119pczy zniknie. Wykorzystanie symboli zast\u0119pczych w projektowaniu stron internetowych jest bardzo mylone z etykietami. Wielu projektant\u00f3w u\u017cywa tych symboli zast\u0119pczych zamiast etykiet, aby opisa\u0107 pola wej\u015bciowe, maj\u0105c nadziej\u0119 na uzyskanie czystszego projektu. Jest to du\u017cy b\u0142\u0105d, kt\u00f3ry zagra\u017ca u\u017cytkownikowi.<\/p>\n Skorzystajmy z sytuacji, gdy u\u017cytkownik wype\u0142ni d\u0142ug\u0105 form\u0119, tak\u0105 jak formularz kasy. Po wype\u0142nieniu formularza mo\u017ce chcie\u0107 przejrze\u0107 szczeg\u00f3\u0142y, zanim b\u0119dzie m\u00f3g\u0142 przes\u0142a\u0107 formularz. Teraz, je\u015bli w formularzu nie ma etykiety, po prostu wpadnie w zak\u0142opotanie z powodu szczeg\u00f3\u0142\u00f3w, kt\u00f3re wype\u0142ni\u0142.<\/p>\n [Caption id = "attachment_4158" align = "aligncenter" width = "529"] Dlatego zawsze u\u017cywaj etykiety. Nie u\u017cywanie etykiet mo\u017ce by\u0107 oszcz\u0119dno\u015bci\u0105 miejsca, ale zaskoczy Ci\u0119, jak \u0142atwo ludzie zapominaj\u0105 o tym, co by\u0142o etykiet\u0105 po wype\u0142nieniu informacji w terenie.<\/p>\n Kolejnym du\u017cym b\u0142\u0119dem, kt\u00f3ry pope\u0142niamy w projektowaniu formularzy jest umieszczenie zbyt wielu element\u00f3w na jednej stronie. Im wi\u0119cej element\u00f3w na jednej stronie, tym wi\u0119cej konkurencji w\u015br\u00f3d nich przyci\u0105ga uwag\u0119.<\/p>\n Rozwi\u0105zaniem jest pozostawienie pewnej przestrzeni do oddychania mi\u0119dzy elementami poprzez zachowanie bia\u0142ych przestrzeni. Odpowiedni przep\u0142yw dla u\u017cytkownik\u00f3w b\u0119dzie zapewniony tylko wtedy, gdy zachowasz wystarczaj\u0105c\u0105 odleg\u0142o\u015b\u0107 mi\u0119dzy polami i r\u00f3\u017cnymi sekcjami.<\/p>\n Ten pojedynczy formularz kasy pokazuje, jak r\u00f3\u017cne sekcje mog\u0105 by\u0107 segregowane, nawet je\u015bli na jednej stronie znajduje si\u0119 zbyt wiele element\u00f3w. Formularz wykorzystuje etykiety sekcji do oddzielania r\u00f3\u017cnych sekcji, takich jak Opcje logowania, Adres rozliczeniowy, Potwierd\u017a zam\u00f3wienie, Metoda wysy\u0142ki i Metoda p\u0142atno\u015bci. Co wi\u0119cej, uk\u0142ad trzech kolumn sprawia, \u017ce \u200b\u200bformularz jest jeszcze czystszy.<\/p>\n [Caption id = "attachment_4159" align = "aligncenter" width = "648"] Podczas wype\u0142niania formularzy witryny istniej\u0105 pewne szanse, \u017ce u\u017cytkownicy pope\u0142ni\u0105 pewne b\u0142\u0119dy, z powodu kt\u00f3rych formularz nie zostanie przes\u0142any. B\u0142\u0119dy mog\u0105 wyst\u0105pi\u0107 w wyniku braku wpisu lub wype\u0142nienia nieprawid\u0142owych informacji. Aby rozwi\u0105za\u0107 ten problem, projektanci u\u017cywaj\u0105 sprawdzania danych wej\u015bciowych wy\u015bwietlaj\u0105cych komunikat o b\u0142\u0119dzie podczas przesy\u0142ania formularza. U\u017cywaj\u0105 sprawdzania poprawno\u015bci po stronie serwera, kt\u00f3re zazwyczaj czekaj\u0105 na odpowied\u017a serwera, aby sprawdzi\u0107 b\u0142\u0119dy w formularzu. Jest to wi\u0119kszy b\u0142\u0105d, kt\u00f3ry mo\u017ce nawet frustru\u0107 u\u017cytkownika, gdy po przes\u0142aniu formularza zobaczy komunikat o b\u0142\u0119dzie.<\/p>\n Zamiast tego mo\u017cna u\u017cy\u0107 walidacji wstawianej po stronie u\u017cytkownika, kt\u00f3ra m\u00f3wi na miejscu, je\u015bli u\u017cytkownik wype\u0142nia nieprawid\u0142owy wpis w polu. W ten spos\u00f3b u\u017cytkownicy nie przegapi\u0105, je\u015bli wprowadzili co\u015b niew\u0142a\u015bciwego w polu.<\/p>\n [Caption id = "attachment_4160" align = "aligncenter" width = "648"] Co wi\u0119cej, nie u\u017cywaj myl\u0105cych stwierdze\u0144 w komunikatach sprawdzania poprawno\u015bci. Wystarczy wyja\u015bni\u0107, dlaczego wpis jest nieprawid\u0142owy, opisuj\u0105c, jak powinien wygl\u0105da\u0107 prawid\u0142owy wpis.<\/p>\n Captchas s\u0105 wykorzystywane przez strony internetowe w celu zapobiegania atakom spamowym poprzez odr\u00f3\u017cnianie bota od ludzi. Zak\u0142ada si\u0119, \u017ce te captcha stanowi\u0105 wyzwanie, kt\u00f3re by\u0142oby \u0142atwe dla ludzi, podczas gdy boty nie mog\u0105 ich pokona\u0107. W przypadku zapobiegania spamowi, czasami projektanci staj\u0105 si\u0119 tak zdesperowani, \u017ce integruj\u0105 captcha, kt\u00f3re stanowi\u0105 wyzwanie nawet dla ludzi.<\/p>\n [Caption id = "attachment_4161" align = "aligncenter" width = "319"] Rozumiem, \u017ce zapobieganie spamowi jest wa\u017cne, ale captcha mo\u017ce by\u0107 myl\u0105cy i trudny do odkodowania przez u\u017cytkownik\u00f3w. Mo\u017cesz u\u017cy\u0107 alternatywnego rozwi\u0105zania tzw. Google re-Captcha, kt\u00f3re jest bardziej zaawansowan\u0105 i prost\u0105 wersj\u0105. Nowy re-Captcha Google po prostu prosi u\u017cytkownika o klikni\u0119cie w pole wyboru, a weryfikacja odbywa si\u0119 bez napotykania trudnych do wy\u015bwietlenia wiadomo\u015bci tekstowych.<\/p>\n [Caption id = "attachment_4162" align = "aligncenter" width = "319"] W ko\u0144cu<\/strong>,<\/p>\n Doskonalenie do\u015bwiadczenia u\u017cytkownika jest ci\u0105g\u0142ym procesem, kt\u00f3ry mo\u017cna osi\u0105gn\u0105\u0107 tylko dzi\u0119ki regularnym aktualizacjom przy u\u017cyciu najlepszych dost\u0119pnych metod. Mam nadziej\u0119, \u017ce wskazanie tych b\u0142\u0119d\u00f3w projektowych pomo\u017ce ci osi\u0105gn\u0105\u0107 t\u0119 popraw\u0119, nie pope\u0142niaj\u0105c tych b\u0142\u0119d\u00f3w na \u017cadnym formularzu, kt\u00f3rego u\u017cywasz na swojej stronie.<\/p>\n Powi\u0105zane historie:<\/strong><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Interfejs u\u017cytkownika (UI) i UX (User Experience) odgrywaj\u0105 wa\u017cn\u0105 rol\u0119 w projektowaniu stron przyjaznym dla konwersji. Interfejs u\u017cytkownika sprawia, \u017ce \u200b\u200btwoja strona jest pi\u0119kna, a UX koncentruje si\u0119 na u\u017cyteczno\u015bci i prostocie witryny. Je\u015bli kt\u00f3rykolwiek z tych dw\u00f3ch element\u00f3w nie ma lub nie jest zr\u00f3wnowa\u017cony, wynikiem jest odbijanie klient\u00f3w. Projektowanie formularzy stron internetowych to cz\u0119\u015b\u0107 […]<\/p>\n","protected":false},"author":1,"featured_media":4165,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[3231],"tags":[],"class_list":["post-19192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce-pl"],"acf":[],"yoast_head":"\n1. \u017b\u0105danie zbyt du\u017cej ilo\u015bci informacji od u\u017cytkownika<\/h2>\n
\n
![\"informacje](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/drupal-commerce-shipping-copy-profile-info-checkou.png\")
<\/a> Prepopulacja informacji z jednej formy do drugiej mo\u017ce zaoszcz\u0119dzi\u0107 czas i wysi\u0142ek u\u017cytkownik\u00f3w [\/ caption]<\/p>\n2. Niejednoznaczne lub niereaguj\u0105ce pozycjonowanie etykiet-<\/h2>\n
![\"Mobilny](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/1-291x300.jpeg\")
<\/a> Mobilny formularz kontaktowy [\/ caption] ![\"rozmiar](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/yyy-300x221.jpeg\")
Wi\u0119kszo\u015b\u0107 formularzy na stronach u\u017cywa tych samych miejsc docelowych etykiet we wszystkich rozmiarach ekranu, co nie jest zalecanym wyborem [\/ caption]<\/p>\n3. Wymiana etykiet z elementami zast\u0119pczymi-<\/h2>\n
![\"podpowied\u017a](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/3.png\")
<\/a> Symbole zast\u0119pcze stanowi\u0105 kr\u00f3tk\u0105 wskaz\u00f3wk\u0119 dotycz\u0105c\u0105 oczekiwanych warto\u015bci w polu formularza [\/ caption]<\/p>\n![\"placeholders\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/4.png\")
<\/a> U\u017cywanie symboli zast\u0119pczych zamiast etykiet utrudni klientom szczeg\u00f3lnie d\u0142ugie formularze [\/ caption]<\/p>\n4. Niewystarczaj\u0105ce odst\u0119py i zniekszta\u0142cony uk\u0142ad<\/h2>\n
![\"segregowanie-zapobieganie-za\u015bmiecaniu\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/5-1024x863.png\")
<\/a> Podzia\u0142 na r\u00f3\u017cne sekcje pozwoli unikn\u0105\u0107 ba\u0142aganu mi\u0119dzy r\u00f3\u017cnymi sekcjami [\/ caption]<\/p>\n5. Niepewne komunikaty o b\u0142\u0119dach i sprawdzenia poprawno\u015bci danych wej\u015bciowych<\/h2>\n
![\"Sprawdzanie](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/6-1024x486.jpeg\")
<\/a> Sprawdzanie poprawno\u015bci inline i pokazywanie b\u0142\u0119d\u00f3w na miejscu zapobiega wysy\u0142aniu formularza post\u00f3w frustracyjnych [\/ caption]<\/p>\n6. U\u017cywanie Captcha, kt\u00f3re nie s\u0105 przeznaczone dla ludzi<\/h2>\n
![\"Zapobiegaj](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/8.jpeg\")
<\/a> Captcha zapobiegaj\u0105ce spamowi, ale frustruj\u0105ce dla ludzi [\/ caption]<\/p>\n![\"Google](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/9.png\")
<\/a> Google ponownie Captcha jest stosunkowo bardziej przyjazny dla u\u017cytkownika, mimo \u017ce jest twardy na botach [\/ caption]<\/p>\n\n