\u201eSzczypta animacji tutaj<\/span>! Odrobina wzoru w c\u0119tki tam<\/span>!\u201d<\/p>\n\n\n\n Ale, jak to cz\u0119sto bywa z rzeczami, kt\u00f3re b\u0142yszcz\u0105, \u0142atwo jest przesadzi\u0107 \u2014 zw\u0142aszcza je\u015bli twoja kreatywno\u015b\u0107 obni\u017ca funkcjonalno\u015b\u0107 twojej strony.<\/p>\n\n\n\n Niezale\u017cnie od tego, czy chcesz sprzeda\u0107 produkt, czy udost\u0119pnia\u0107 wpisy na blogu<\/a><\/span>, budujesz stron\u0119 nie dla siebie. To odwiedzaj\u0105cy Twoj\u0105 stron\u0119 musz\u0105 by\u0107 zadowoleni z projektu i interfejsu u\u017cytkownika. Tutaj kluczowe znaczenie ma Do\u015bwiadczenie U\u017cytkownika (UX). Skupienie si\u0119 na UX podczas tworzenia strony powinno przynie\u015b\u0107 wy\u017csze konwersje i ni\u017cszy wsp\u00f3\u0142czynnik odrzuce\u0144.<\/p>\n\n\n\n W tym artykule przedstawi\u0119 Ci podstawy UX i wyja\u015bni\u0119, czym zajmuje si\u0119 projektant UX. Nast\u0119pnie om\u00f3wimy kilka wskaz\u00f3wek, jak rozpozna\u0107 dobre UX, gdy si\u0119 z nim spotkasz. Na ko\u0144cu poka\u017c\u0119 Ci, jak u\u017cywa\u0107 UX do stworzenia lepszej strony internetowej<\/a> dla Twojej publiczno\u015bci. Zapraszam do przej\u015bcia od razu do sekcji, kt\u00f3ra jest dla Ciebie najbardziej korzystna!<\/p>\n\n\n\n Gotowy, aby porozmawia\u0107 o strategii UX? Zacznijmy!<\/p>\n\n\n\n Prosto m\u00f3wi\u0105c, User Experience (UX) to jak interakcje z technologi\u0105 wp\u0142ywaj\u0105 na uczucia u\u017cytkownika. UX dotyczy ka\u017cdej technologii, od aplikacji po konsol\u0119 do gier.<\/p>\n\n\n\n Je\u015bli chodzi o strony internetowe, projektowanie UX polega na optymalizacji interakcji mi\u0119dzy u\u017cytkownikiem a stron\u0105. Strona zbudowana na solidnych zasadach UX powinna sprawi\u0107, \u017ce u\u017cytkownik poczuje, \u017ce osi\u0105gn\u0105\u0142 to, co zamierza\u0142 zrobi\u0107, bez frustracji.<\/p>\n\n\n\n To mo\u017ce sk\u0142oni\u0107 ci\u0119 do zainwestowania w pe\u0142ne rozmachu wizualne opracowanie strony. Mo\u017ce to obejmowa\u0107 efektowne animacje oraz ogromne karuzele obraz\u00f3w<\/a>. Je\u015bli pami\u0119tasz MySpace, prawdopodobnie nadal masz koszmary o animowanych b\u0142yskotkach i wersjach MIDI piosenek Blink-182 . . . oj<\/span>.<\/p>\n\n\n Ale projektowanie UX ma du\u017co mniej wsp\u00f3lnego z tym, jak wygl\u0105da strona, ni\u017c z tym, jak jest u\u017cywana. Aby by\u0142o skuteczne, Twoja strona internetowa powinna by\u0107 kompletnym do\u015bwiadczeniem \u2014 nie tylko s\u0142owami i obrazami na stronie.<\/p>\n\n\n\n U\u017cytkownicy mog\u0105 zapomnie\u0107 dane, takie jak kwota, kt\u00f3r\u0105 zap\u0142acili za zam\u00f3wione produkty. Jednak\u017ce, do\u015bwiadczenie zwi\u0105zane z zamawianiem powinno by\u0107 przyjemne i bezproblemowe. To do\u015bwiadczenie pozostanie z nimi, zwi\u0119kszaj\u0105c szanse, \u017ce b\u0119d\u0105 kupowa\u0107 u Ciebie wielokrotnie.<\/p>\n\n\n\n Je\u015bli Twoja strona oferuje s\u0142abe UX, mo\u017cesz zauwa\u017cy\u0107 przeciwny efekt. U\u017cytkownicy, kt\u00f3rzy staj\u0105 si\u0119 zestresowani lub zdenerwowani podczas korzystania z Twojej strony, prawdopodobnie przejd\u0105 na stron\u0119 jednego z Twoich konkurent\u00f3w. Maj\u0105 wiele opcji i nie maj\u0105 powodu, by wraca\u0107 na stron\u0119, kt\u00f3ra jest trudna w u\u017cyciu.<\/p>\n\n\n\n Je\u015bli nadal nie jeste\u015b przekonany, \u017ce UX ma znaczenie dla Twojej strony internetowej, oto kilka kluczowych statystyk:<\/p>\n\n\n\n To wszystko s\u0142u\u017cy zilustrowaniu znaczenia dobrego projektowania UX podczas tworzenia strony internetowej.<\/p>\n\n\n UX jest tak wa\u017cne, \u017ce istnieje ca\u0142y zaw\u00f3d po\u015bwi\u0119cony jego optymalizacji. Codzienne zadania projektanta UX b\u0119d\u0105 si\u0119 r\u00f3\u017cni\u0107 w zale\u017cno\u015bci od rodzaju projekt\u00f3w, nad kt\u00f3rymi pracuje. Jednak cel jest zazwyczaj ten sam. Zadaniem projektanta UX jest optymalizacja do\u015bwiadcze\u0144 u\u017cytkownika<\/span> podczas interakcji z technologi\u0105 cyfrow\u0105, maj\u0105c tak\u017ce na uwadze dobro firmy.<\/p>\n\n\n\n Aby osi\u0105gn\u0105\u0107 ten balans, projektant UX stosuje proces kt\u00f3ry przek\u0142ada si\u0119 na wiele <\/a><\/span>rezultat\u00f3w<\/a><\/span>.<\/p>\n\n\n\n Zanim zacznie si\u0119 w\u0142a\u015bciwe projektowanie, nale\u017cy wykona\u0107 wiele bada\u0144 UX. Dlatego projektant mo\u017ce najpierw stworzy\u0107 jedn\u0105 lub wi\u0119cej person audiencji<\/a><\/span>. Pozwala to projektantowi zrozumie\u0107 potrzeby u\u017cytkownika.<\/p>\n\n\n\n Nast\u0119pnie projektant UX mo\u017ce przedstawi\u0107 potencjalny diagram przep\u0142ywu u\u017cytkownika, aby zbada\u0107 mo\u017cliwe sposoby interakcji u\u017cytkownika ze stron\u0105 internetow\u0105. Mog\u0105 nast\u0119pnie przekszta\u0142ci\u0107 te informacje w prototyp. Prototypy mog\u0105 by\u0107 tak podstawowe jak szkic<\/a><\/span> wireframe<\/a><\/span>, czyli wst\u0119pny zarys tego, jak mo\u017ce wygl\u0105da\u0107 ostateczna strona internetowa. Projektant mo\u017ce r\u00f3wnie\u017c stworzy\u0107 bardziej wizualnie rozbudowany prototyp lub nawet taki, z kt\u00f3rym mo\u017cna interaktywnie wsp\u00f3\u0142dzia\u0142a\u0107.<\/p>\n\n\n Obowi\u0105zki projektanta UX nie ko\u0144cz\u0105 si\u0119 na finalnym projekcie. Po uruchomieniu strony mog\u0105 przeprowadzi\u0107 testy u\u017cyteczno\u015bci lub przeanalizowa\u0107 dane analityczne u\u017cytkowania, aby zidentyfikowa\u0107 i rozwi\u0105za\u0107 potencjalne problemy.<\/p>\n\n\n\n Innymi s\u0142owy, s\u0105 zaanga\u017cowani we wszystkie etapy tworzenia i uruchamiania strony internetowej.<\/p>\n\n\n Je\u015bli samodzielnie zajmujesz si\u0119 projektowaniem UX, to Twoim obowi\u0105zkiem jest reprezentowanie swojej publiczno\u015bci, jednocze\u015bnie dbaj\u0105c o to, aby Twoja strona spe\u0142nia\u0142a Twoje oczekiwania. Aby to osi\u0105gn\u0105\u0107, pierwszym krokiem jest nauczenie si\u0119 rozpoznawania solidnego projektowania UX.<\/p>\n\n\n\n Maj\u0105c to na uwadze, przyjrzyjmy si\u0119 kilku przyk\u0142adom UX w praktyce. Istniej\u0105 cztery kluczowe elementy, na kt\u00f3re b\u0119dziesz chcia\u0142 zwr\u00f3ci\u0107 szczeg\u00f3ln\u0105 uwag\u0119.<\/p>\n\n\n\n S\u0142aba nawigacja mo\u017ce uczyni\u0107 ka\u017cd\u0105 stron\u0119 internetow\u0105 bezu\u017cyteczn\u0105. Przemieszczanie si\u0119 po stronie powinno by\u0107 p\u0142ynne i intuicyjne. Menu nawigacyjne powinno by\u0107 r\u00f3wnie\u017c dost\u0119pne, bez wzgl\u0119du na to, jakiego urz\u0105dzenia u\u017cywa odwiedzaj\u0105cy.<\/p>\n\n\n\n Nawigacja typu Breadcrumb<\/a><\/span> jest jednym ze sposob\u00f3w, w jaki projektanci zapobiegaj\u0105 zgubieniu si\u0119 u\u017cytkownik\u00f3w, szczeg\u00f3lnie gdy strona internetowa ma wiele stron.<\/p>\n\n\n Jest r\u00f3wnie\u017c wa\u017cne, aby zwr\u00f3ci\u0107 uwag\u0119 na linki. Projektanci stron internetowych, kt\u00f3rzy stosuj\u0105 silne UX, dbaj\u0105 o to, by\u015b m\u00f3g\u0142 rozpozna\u0107 linki, kiedy je zobaczysz. Cz\u0119sto oznacza to ich podkre\u015blenie i u\u017cycie innego koloru tekstu. B\u0119d\u0105 r\u00f3wnie\u017c u\u017cywa\u0107 znacz\u0105cego tekstu kotwicznego<\/a><\/span>, aby\u015b wiedzia\u0142, dok\u0105d link prowadzi<\/a> przed klikni\u0119ciem na niego.<\/p>\n\n\n Znacz\u0105c\u0105 cz\u0119\u015bci\u0105 udanego UX jest zrozumienie, jak ludzie wchodz\u0105 w interakcj\u0119 z r\u00f3\u017cnymi cz\u0119\u015bciami strony internetowej. Na przyk\u0142ad, wi\u0119kszo\u015b\u0107 ludzi nie czyta normalnie tre\u015bci na stronach internetowych. Skanuj\u0105 je<\/a><\/span> i zatrzymuj\u0105 si\u0119, aby czyta\u0107, je\u015bli znajd\u0105 co\u015b interesuj\u0105cego.<\/p>\n\n\n\n Tre\u015b\u0107 jest skanowalna, je\u015bli u\u017cytkownik mo\u017ce szybko przejrze\u0107 wpis na blogu lub stron\u0119 sprzeda\u017cow\u0105 i wyj\u015b\u0107 z jasnym pomys\u0142em, co komunikuje.<\/p>\n\n\n Utrzymywanie kr\u00f3tkich akapit\u00f3w to jeden ze sposob\u00f3w na tworzenie tre\u015bci przyjaznych do skanowania. Akapity te powinny by\u0107 cz\u0119sto podzielone za pomoc\u0105 nag\u0142\u00f3wk\u00f3w, list i obraz\u00f3w. Projektanci mog\u0105 r\u00f3wnie\u017c wykorzysta\u0107 cytaty wyr\u00f3\u017cnione, pogrubiony tekst i podobne elementy.<\/p>\n\n\n Animacja to skuteczny spos\u00f3b, aby wyr\u00f3\u017cni\u0107 si\u0119 z t\u0142umu stron internetowych i przyci\u0105gn\u0105\u0107 uwag\u0119 u\u017cytkownika<\/a><\/span>. Dodaje element zabawy i mo\u017ce przyczyni\u0107 si\u0119 do stworzenia niezapomnianego do\u015bwiadczenia dla u\u017cytkownika.<\/p>\n\n\n\n Jednak istnieje w\u0142a\u015bciwy i niew\u0142a\u015bciwy spos\u00f3b na jego implementacj\u0119.<\/p>\n\n\n\n Subtelna animacja mo\u017ce dostarcza\u0107 informacji zwrotnej<\/a><\/span> podczas oczekiwania na zako\u0144czenie transakcji. Animacja mo\u017ce r\u00f3wnie\u017c ci\u0105gle si\u0119 powtarza\u0107, podczas gdy masz trudno\u015bci z koncentracj\u0105 na czytaniu opisu produktu. Te podej\u015bcia tworz\u0105 dwie bardzo r\u00f3\u017cne do\u015bwiadczenia. Nadu\u017cywanie animacji mo\u017ce r\u00f3wnie\u017c wp\u0142yn\u0105\u0107 na UX na urz\u0105dzeniach mobilnych.<\/p>\n\n\n\n Optymalizacja witryny dla u\u017cytkownik\u00f3w mobilnych<\/a><\/span> jest konieczno\u015bci\u0105. Je\u015bli jeste\u015b jak wi\u0119kszo\u015b\u0107 os\u00f3b, zazwyczaj korzystasz z telefonu<\/a><\/span> do dost\u0119pu do Internetu. Je\u015bli natrafisz na stron\u0119, kt\u00f3rej u\u017cywanie na Twoim urz\u0105dzeniu sprawia trudno\u015bci, prawdopodobnie po prostu j\u0105 opu\u015bcisz.<\/p>\n\n\n\n Poza wyborem responsywnego motywu<\/a><\/span>, mo\u017cesz podj\u0105\u0107 dodatkowe kroki, aby zapewni\u0107, \u017ce Twoja strona dzia\u0142a dobrze na wszystkich ekranach. Na przyk\u0142ad, mo\u017cesz przetestowa\u0107 swoj\u0105 stron\u0119 za pomoc\u0105 Narz\u0119dzia do Testowania Stron Mobilnych Google<\/a><\/span>.<\/p>\n\n\n To narz\u0119dzie powiadomi Ci\u0119 o problemach, kt\u00f3re uniemo\u017cliwiaj\u0105 Twojej stronie bycie przyjazn\u0105 dla urz\u0105dze\u0144 mobilnych. Mo\u017cesz odkry\u0107, \u017ce na przyk\u0142ad dany kr\u00f3j czcionki jest zbyt trudny do odczytania na ma\u0142ym ekranie, lub \u017ce przyciski s\u0105 zbyt ma\u0142e, aby \u0142atwo je naciska\u0107.<\/p>\n\n\n Teraz, gdy wiesz, co to jest dobre UX, jak zastosowa\u0107 je na swojej stronie?<\/p>\n\n\n\n Prawdopodobnie nie b\u0119dziesz przeprowadza\u0107 intensywnych bada\u0144 rynkowych ani prototypowa\u0107 z wysokiej jako\u015bci szkicami. Jednak za\u0142o\u017cenie kapelusza projektanta UX mo\u017ce pom\u00f3c Ci stworzy\u0107 stron\u0119, kt\u00f3r\u0105 Ty i Twoja publiczno\u015b\u0107 pokochacie.<\/p>\n\n\n\n Najpierw wa\u017cne jest, aby jasno okre\u015bli\u0107, dlaczego masz stron\u0119 internetow\u0105 i co chcesz, aby robi\u0142a. Na przyk\u0142ad, czy ty:<\/p>\n\n\n\n Nast\u0119pnie poznaj swojego idealnego u\u017cytkownika lub potencjalnego klienta. <\/a>Tworzenie persony u\u017cytkownika<\/a><\/span> pomo\u017ce Ci wyobrazi\u0107 sobie, jak Twoja docelowa grupa odbiorc\u00f3w mo\u017ce wchodzi\u0107 w interakcje z Twoj\u0105 stron\u0105 internetow\u0105. Ta persona mo\u017ce by\u0107 tak prosta jak to, kim jest osoba, czego chce i co przeszkadza jej w osi\u0105gni\u0119ciu tego. Kluczowe jest, aby zidentyfikowa\u0107, czego u\u017cytkownik potrzebuje, aby odnie\u015b\u0107 sukces na Twojej stronie.<\/p>\n\n\n\n Pami\u0119taj, \u017ce dost\u0119pno\u015b\u0107 jest integraln\u0105 cz\u0119\u015bci\u0105 UX<\/span>. Mo\u017cesz mie\u0107 odwiedzaj\u0105cych korzystaj\u0105cych z technologii wspomagaj\u0105cych, dlatego rozwa\u017c priorytetowe traktowanie dost\u0119pno\u015bci<\/a><\/span> podczas budowania swojej strony.<\/p>\n\n\n\n Mo\u017cesz r\u00f3wnie\u017c sprawdzi\u0107 strony swoich konkurent\u00f3w<\/a>, aby zobaczy\u0107, co dla nich dzia\u0142a. Czy ikona koszyka zawsze znajduje si\u0119 w prawym g\u00f3rnym rogu? Mo\u017ce twoja te\u017c powinna by\u0107. Mo\u017cesz by\u0107 kreatywny, nie wymy\u015blaj\u0105c ko\u0142a na nowo; u\u017cytkownicy nie powinni musie\u0107 zgadywa\u0107, jak dzia\u0142a Twoja strona, aby osi\u0105gn\u0105\u0107 swoje cele.<\/p>\n\n\n Ostatecznie, wydajno\u015b\u0107 strony<\/a><\/span> ma znaczenie dla UX. Wolne strony sprawi\u0105, \u017ce odwiedzaj\u0105cy opuszcz\u0105 stron\u0119<\/a><\/span> zanim zd\u0105\u017cy si\u0119 za\u0142adowa\u0107. Istnieje wiele sposob\u00f3w na przyspieszenie Twojej strony, chocia\u017c najlepszym rozwi\u0105zaniem jest rozpocz\u0119cie od jako\u015bciowego hostingu<\/a><\/span>.<\/p>\n\n\n\n\n W tym momencie prawdopodobnie zrozumia\u0142e\u015b, \u017ce projektowanie UX to nie jest co\u015b, co mo\u017cna zoptymalizowa\u0107 za jednym razem. W tej dziedzinie jest znacznie wi\u0119cej ni\u017c mo\u017cemy om\u00f3wi\u0107 w jednym artykule.<\/p>\n\n\n Na szcz\u0119\u015bcie istnieje wiele wysokiej jako\u015bci zasob\u00f3w UX, do kt\u00f3rych mo\u017cesz si\u0119 odwo\u0142a\u0107, gdy kontynuujesz ulepszanie swojej strony internetowej<\/a>:<\/p>\n\n\n\n Je\u015bli po\u0142\u0105czysz te zasoby z badaniami i praktyk\u0105, powiniene\u015b w kr\u00f3tkim czasie zacz\u0105\u0107 stosowa\u0107 dobre praktyki do\u015bwiadczenia u\u017cytkownika.<\/p>\n\n\n\n Nie musisz by\u0107 profesjonalnym projektantem UX, aby stworzy\u0107 stron\u0119, z kt\u00f3r\u0105 Twoi odbiorcy b\u0119d\u0105 ch\u0119tnie wchodzi\u0107 w interakcje. Wystarczy troch\u0119 zrozumienia, co u\u0142atwi \u017cycie Twoim go\u015bciom i ch\u0119\u0107 zbudowania strony, kt\u00f3ra zapewni takie do\u015bwiadczenie.<\/p>\n\n\n\n UX opisuje, jakie wra\u017cenia towarzysz\u0105 u\u017cytkownikom podczas interakcji z Twoj\u0105 stron\u0105. Optymalizacja UX Twojej strony oznacza zapewnienie, \u017ce ma ona przejrzyst\u0105 nawigacj\u0119, tworzenie tre\u015bci \u0142atwych do przegl\u0105dania, testowanie responsywno\u015bci i wi\u0119cej. Jest wiele do nauczenia si\u0119, ale dost\u0119pnych jest r\u00f3wnie\u017c wiele przydatnych zasob\u00f3w i do\u015bwiadczonych projektant\u00f3w, kt\u00f3rzy mog\u0105 pom\u00f3c.<\/p>\n\n\n\n\n
<\/a>Wprowadzenie do do\u015bwiadczenia u\u017cytkownika (UX) i dlaczego ma to znaczenie<\/span><\/h2>\n\n\n\n
![\"Profil](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/6b708057-701f-400a-a361-338e99be9977_dh-what-is-ux-5.jpg\")
<\/figure><\/div>\n\n\n\n
<\/a>Rola Projektanta UX<\/span><\/h2>\n\n\n\n
![\"Podstawowy](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/b8af0872-4f45-4c9e-875b-b33249d5346f_dh-what-is-ux-1.jpg\")
<\/a>Jak rozpozna\u0107 dobre projektowanie UX<\/span><\/h2>\n\n\n\n
1. Nawigacja<\/h3>\n\n\n\n
![\"Strona](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/e9db2b0f-8fd6-4c8e-9a30-2ec3dd58b0a2_dh-what-is-ux-4.jpg\")
<\/figure><\/div>\n\n\n2. Tre\u015b\u0107<\/h3>\n\n\n\n
![\"Tre\u015b\u0107](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/ff4a85e0-503f-4fa1-a6df-f6562ea1c60e_dh-what-is-ux-3.jpg\")
<\/figure><\/div>\n\n\n3. Animacja<\/h3>\n\n\n\n
4. Reaktywno\u015b\u0107<\/h3>\n\n\n\n
![\"Przyk\u0142adowe](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/3a63f433-6f6b-4615-8e3c-2a4ee5b2cc0f_dh-what-is-ux-2.jpg\")
<\/figure><\/div>\n\n\n<\/a>Jak u\u017cy\u0107 UX do projektowania strony dla Twojej publiczno\u015bci<\/span><\/h2>\n\n\n\n
\n
![\"Przyk\u0142adowe](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/97d495ea-4402-48c2-ba2d-08c28adf3cb1_dh-what-is-ux-7.jpg\")
<\/figure><\/div>\n\n\n![\"Ad](\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\"){kind=spacer}
<\/div>\n\n\n\n\n <\/a>Zasoby UX<\/span><\/h2>\n\n\n\n
![\"Strona](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/30b88ca7-c692-4741-b779-c00397bbd7ed_dh-what-is-ux-6.jpg\")
<\/figure><\/div>\n\n\n\n
Projektuj \u015awietne Do\u015bwiadczenie U\u017cytkownika<\/span><\/h2>\n\n\n\n