{"id":12088,"date":"2021-06-02T08:55:24","date_gmt":"2021-06-02T06:55:24","guid":{"rendered":"https:\/\/www.nazwa.pl\/blog\/?p=12088"},"modified":"2024-10-29T11:44:11","modified_gmt":"2024-10-29T10:44:11","slug":"witryny-przyjazne-klientom-czyli-co-to-jest-ux","status":"publish","type":"post","link":"https:\/\/www.nazwa.pl\/blog\/witryny-przyjazne-klientom-czyli-co-to-jest-ux","title":{"rendered":"Witryny przyjazne klientom, czyli co to jest UX?"},"content":{"rendered":"

Miar\u0105 sukcesu dobrze wykonanej strony internetowej lub aplikacji jest ich pozytywny odbi\u00f3r przez u\u017cytkownik\u00f3w. W du\u017cym stopniu o powodzeniu projektu IT stanowi jako\u015b\u0107 interakcji, kt\u00f3ra wyst\u0119puje miedzy cz\u0142owiekiem a gotowym rozwi\u0105zaniem, z kt\u00f3rego korzysta. Szukaniem odpowiedzi na pytania, czego ludzie oczekuj\u0105 od oprogramowania komputerowego i stron WWW, w jaki spos\u00f3b si\u0119 po nich poruszaj\u0105, na co zwracaj\u0105 przy korzystaniu z nich uwag\u0119, zajmuj\u0105 si\u0119 projektanci UX, czyli User Experience Designers. Na czym polega ich praca oraz jakie metody dzia\u0142ania stosuj\u0105?<\/p>\n

Czym jest UX?<\/strong><\/h2>\n

Skr\u00f3t UX (user experience) odnosi si\u0119 do sposobu projektowania skoncentrowanego na pozytywnym do\u015bwiadczeniu u\u017cytkownika. Stosuje si\u0119 go zazwyczaj w kontek\u015bcie produkt\u00f3w cyfrowych, takich jak aplikacje czy strony internetowe, co nie oznacza, \u017ce nie jest ono istotne tak\u017ce w przypadku przedmiot\u00f3w w pe\u0142ni analogowych, jak samochody czy nawet szczoteczki do z\u0119b\u00f3w. Nale\u017cy je r\u00f3wnie\u017c odpowiednio zaprojektowa\u0107.<\/p>\n

Gdy ju\u017c wybrali\u015bmy dla naszego projektu domen\u0119 internetow\u0105<\/strong><\/a> czy te\u017c zoptymalizowany hosting pod WordPressa<\/strong><\/a>, warto zadba\u0107 o pozytywne do\u015bwiadczenie u\u017cytkownika. W przypadku produkt\u00f3w cyfrowych nale\u017cy skupi\u0107 si\u0119 na\u00a0okre\u015bleniu celu, jaki stoi przed\u00a0witryn\u0105 czy\u00a0aplikacj\u0105. Wymaga to\u00a0tak\u017ce wiedzy o\u00a0zachowaniach targetu projektu, poniewa\u017c poznanie jego potrzeb jest kluczowe.<\/p>\n

Nast\u0119pnie trzeba zadba\u0107 o\u00a0to, aby droga do\u00a0celu os\u00f3b korzystaj\u0105cych z\u00a0produktu by\u0142a mo\u017cliwie kr\u00f3tka i\u00a0prosta. Osi\u0105ga si\u0119 to\u00a0dzi\u0119ki odpowiednio zaprojektowanej architekturze informacji. Jej stworzenie wymaga dok\u0142adnego okre\u015blenia schematu podr\u00f3\u017cy klienta. Podstawow\u0105 kwesti\u0105 jest tu\u00a0na przyk\u0142ad\u00a0czytelna nawigacja, kt\u00f3ra\u00a0pozwoli u\u017cytkownikowi sprawnie porusza\u0107 si\u0119 po\u00a0serwisie lub aplikacji.<\/p>\n

\"Proces<\/p>\n

Dlaczego zwraca\u0107 uwag\u0119 na UX?<\/strong><\/h2>\n

Pozytywne do\u015bwiadczenie u\u017cytkownika ma\u00a0kolosalne znaczenie dla powodzenia projektu cyfrowego. Mo\u017cna prze\u015bledzi\u0107 to\u00a0na\u00a0przyk\u0142adzie sklepu internetowego<\/strong><\/a>. U\u017cytkownik trafiaj\u0105cy na\u00a0stron\u0119 powinien m\u00f3c z\u00a0\u0142atwo\u015bci\u0105 okre\u015bli\u0107, czy\u00a0sklep ma\u00a0w\u00a0ofercie kategorie produkt\u00f3w, kt\u00f3rymi jest zainteresowany. Nast\u0119pnie musi mie\u0107 mo\u017cliwo\u015b\u0107 szybkiego nawigowania w\u00a0witrynie, aby znale\u017a\u0107 to, czego potrzebuje. Je\u017celi napotka podczas tego procesu przeszkody w\u00a0postaci na przyk\u0142ad nieczytelnej nawigacji, to\u00a0jest du\u017ce prawdopodobie\u0144stwo, \u017ce\u00a0opu\u015bci stron\u0119, zasilaj\u0105c wsp\u00f3\u0142czynnik odrzuce\u0144. Mo\u017ce zrezygnowa\u0107 z obecno\u015bci na niej ju\u017c w\u00a0trakcie nawigowania w\u00a0serwisie, gdy\u00a0trudno b\u0119dzie mu\u00a0odnale\u017a\u0107 konkretny przedmiot.<\/p>\n

Gdy\u00a0potencjalny klient doda produkt do\u00a0koszyka, znaczenie UX jeszcze bardziej wzrasta. U\u017cytkownik \u0142atwo mo\u017ce si\u0119 zniech\u0119ci\u0107 podczas procesu zakupu, je\u017celi jest on\u00a0zbyt skomplikowany i\u00a0wymaga od\u00a0niego zbyt du\u017cej liczby dzia\u0142a\u0144. Zdarza si\u0119, \u017ce\u00a0jest to\u00a0zwi\u0105zane na przyk\u0142ad ze\u00a0zbyt rozbudowanymi formularzami, w\u00a0kt\u00f3rych\u00a0nale\u017cy podawa\u0107 nadmiern\u0105 ilo\u015b\u0107 danych. St\u0105d ju\u017c prosta droga do\u00a0utraty takiego klienta i\u00a0tym samym utraty zam\u00f3wienia.<\/p>\n

\u0179le zaprojektowany UX wyra\u017anie przek\u0142ada si\u0119 na\u00a0ni\u017cszy wsp\u00f3\u0142czynnik konwersji produktu cyfrowego. Warto si\u0119 nad\u00a0nim pochyli\u0107, bo\u00a0czasami nawet niewielkie jego zmiany potrafi\u0105 przynie\u015b\u0107 pozytywne efekty. Wa\u017cne jest nie\u00a0tylko\u00a0stworzenie dobrej jako\u015bci projektu, lecz\u00a0tak\u017ce obserwowanie jego skuteczno\u015bci, by\u00a0ewentualnie wprowadza\u0107 wymagane optymalizacje w\u00a0zakresie User Experience.<\/p>\n

\"Projektowanie<\/p>\n

Jak wygl\u0105da proces projektowania UX?<\/strong><\/h2>\n

Pierwszym etapem pracy nad\u00a0projektem UX jest odpowiednie poznanie produktu oraz\u00a0potrzeb u\u017cytkownika<\/strong>. Po\u00a0trafnym okre\u015bleniu targetu oraz\u00a0analizie konkurencji przeprowadza si\u0119 wywiady z\u00a0reprezentatywnymi osobami. Dzi\u0119ki temu mo\u017cna dowiedzie\u0107 si\u0119 wi\u0119cej o\u00a0ich oczekiwaniach.<\/p>\n

W\u00a0przypadku pracy nad\u00a0dzia\u0142aj\u0105cym ju\u017c na\u00a0rynku produktem du\u017ce znaczenie maj\u0105 informacje zebrane od\u00a0pracownik\u00f3w wsparcia technicznego. Dzi\u0119ki temu uzyskuje si\u0119 wiedz\u0119 o\u00a0problemach i\u00a0potrzebach u\u017cytkownik\u00f3w. Projektant UX musi nast\u0119pnie okre\u015bli\u0107 \u015bcie\u017ck\u0119 w\u0119dr\u00f3wki poznawczej<\/strong> potencjalnego u\u017cytkownika. Tworzy si\u0119 w\u00a0tym celu scenariusze zachowa\u0144 os\u00f3b korzystaj\u0105cych z\u00a0produktu oraz\u00a0przypadk\u00f3w jego u\u017cycia.<\/p>\n

Kolejnym etapem jest zbudowanie architektury informacji<\/strong>. Stanowi ona struktur\u0119 wszystkich tre\u015bci obecnych w\u00a0produkcie cyfrowym. Dzi\u0119ki niej mo\u017cliwe jest ich uporz\u0105dkowanie. Polega to\u00a0na\u00a0kategoryzowaniu informacji, tworzeniu sp\u00f3jnej nawigacji, mapy serwisu czy\u00a0nazywaniu poszczeg\u00f3lnych element\u00f3w. Prace w\u00a0tym zakresie zaczyna si\u0119 od\u00a0audytu tre\u015bci. Dzi\u0119ki temu b\u0119dziemy wiedzie\u0107, jaki content ma\u00a0si\u0119 w\u00a0niej znale\u017a\u0107. Nast\u0119pnie grupujemy informacje i\u00a0nadajemy im\u00a0opisy. Pos\u0142u\u017cy\u0107 si\u0119 mo\u017cna grup\u0105 badawcz\u0105, kt\u00f3ra\u00a0wed\u0142ug swojego rozeznania przyporz\u0105dkuje tre\u015bci do\u00a0okre\u015blonych kategorii.<\/p>\n

Kolejnym etapem jest tworzenie mapy witryny, okre\u015blaj\u0105cej miejsce poszczeg\u00f3lnych stron w\u00a0serwisie. Projektuje si\u0119 tak\u017ce nawigacj\u0119, kt\u00f3ra\u00a0b\u0119dzie mia\u0142a podstawowe znaczenie dla kszta\u0142tu w\u0119dr\u00f3wki poznawczej u\u017cytkownika. Po\u00a0wykonaniu tych czynno\u015bci przychodzi czas na\u00a0prototypowanie<\/strong>. U\u017cywa si\u0119 do\u00a0tego celu specjalnego oprogramowania pozwalaj\u0105cego na\u00a0tworzenie makiet (wireframe). Stanowi\u0105 one wizualny schemat witryny, na\u00a0kt\u00f3rym\u00a0mog\u0105 opiera\u0107 si\u0119 programi\u015bci oraz\u00a0projektanci User Interface (UI, czyli bardziej zaawansowanego wizualnie prototypu witryny).<\/p>\n

Narz\u0119dzia, z\u00a0kt\u00f3rych\u00a0korzystaj\u0105 specjali\u015bci UX, nie\u00a0maj\u0105 na\u00a0celu wiernego odwzorowania wygl\u0105du produktu. Pozwalaj\u0105 na\u00a0tworzenie makiet lo-fi, czyli podstawowego schematu u\u017cyteczno\u015bci. Przypomina to\u00a0rozrysowywanie projektu na\u00a0papierze. Znaczenie maj\u0105 tu\u00a0funkcje kluczowe z\u00a0punktu widzenia do\u015bwiadczenia u\u017cytkownika. Programy tego typu to\u00a0na przyk\u0142ad\u00a0Balsamiq Wireframes, Mockplus czy\u00a0Axure RP. Dzi\u0119ki nim mo\u017cliwe jest szybkie i\u00a0wygodne tworzenie makiet. Pozwalaj\u0105 r\u00f3wnie\u017c na\u00a0wsp\u00f3\u0142prac\u0119 grupow\u0105 nad\u00a0projektem.<\/p>\n

Ostatnim etapem prac bywa tak\u017ce poddanie uko\u0144czonego projektu (wraz z\u00a0interfejsem u\u017cytkownika) ostatecznym badaniom UX. <\/strong>Nale\u017c\u0105 do\u00a0nich na przyk\u0142ad\u00a0testy A\/B. Prezentuje si\u0119 podczas nich dwie wersje projektu r\u00f3\u017cni\u0105ce si\u0119 zazwyczaj poszczeg\u00f3lnym elementem, aby sprawdzi\u0107 skuteczno\u015b\u0107 ka\u017cdego wariantu. Nierzadko prowadzone s\u0105\u00a0r\u00f3wnie\u017c badania eye-trackingowe i\u00a0click-trackingowe. Polegaj\u0105 na\u00a0tworzeniu tak zwanych map cieplnych okre\u015blaj\u0105cych elementy najcz\u0119\u015bciej klikane przez\u00a0u\u017cytkownik\u00f3w oraz\u00a0te, na\u00a0kt\u00f3rych\u00a0koncentruje si\u0119 ich wzrok.\u00a0 Badaniom i\u00a0weryfikacji podlegaj\u0105 r\u00f3wnie\u017c zachowania u\u017cytkownik\u00f3w, kt\u00f3rym\u00a0wyznaczane s\u0105\u00a0konkretne zadania do\u00a0wykonania w\u00a0serwisie. Podlegaj\u0105 oni obserwacji laboratoryjnej lub zdalnej poprzez nagrywanie pulpitu. W\u00a0ten spos\u00f3b mo\u017cna zdiagnozowa\u0107, czy\u00a0nie\u00a0napotykaj\u0105 problem\u00f3w na\u00a0drodze do\u00a0realizacji celu witryny.<\/p>\n

\"UX<\/p>\n

Po pierwsze do\u015bwiadczenie u\u017cytkownika<\/strong><\/h2>\n

Dla ka\u017cdej witryny czy\u00a0aplikacji UX ma\u00a0podstawowe znaczenie. Od\u00a0poziomu pozytywnego do\u015bwiadczenia u\u017cytkownika zale\u017cy, czy\u00a0b\u0119dzie ch\u0119tnie korzysta\u0142 z\u00a0produktu. Przek\u0142ada si\u0119 to\u00a0bezpo\u015brednio na\u00a0sukces przedsi\u0119wzi\u0119cia. Dlatego buduj\u0105c projekt, powinni\u015bmy si\u0119 skupi\u0107 na\u00a0tym aspekcie, poniewa\u017c ewentualne braki dotycz\u0105ce UX sprawi\u0105, \u017ce\u00a0nawet warto\u015bciowa w\u00a0tre\u015bci us\u0142uga nie\u00a0dotrze do\u00a0potencjalnego klienta.<\/p>\n

Je\u017celi korzystaj\u0105c z takich narz\u0119dzi, jak WooComerce<\/strong> i PrestaShop,<\/strong> uruchomisz sklep internetowy<\/strong><\/a>, kt\u00f3ry b\u0119dzie dysponowa\u0142 szerokim i\u00a0interesuj\u0105cym asortymentem oraz\u00a0oferowa\u0142 atrakcyjne ceny, ale\u00a0nawigacja b\u0119dzie w\u00a0nim utrudniona, jego atuty zostan\u0105 zaprzepaszczone. Warto po\u015bwi\u0119ci\u0107 zatem jak najwi\u0119cej czasu na\u00a0zaawansowany projekt UX. Je\u015bli tego nie\u00a0zrobili\u015bmy lub\u00a0dostrzegamy prawdopodobne braki w\u00a0produkcie, mo\u017cemy zdecydowa\u0107 si\u0119 na\u00a0poddanie witryny lub aplikacji ocenie zewn\u0119trznego specjalisty podczas audytu UX. Pomo\u017ce on\u00a0nam zdiagnozowa\u0107 ewentualne niedostatki produktu i\u00a0zaproponuje metody zaradcze.<\/p>\n

Szybki i wydajny hosting<\/strong><\/h2>\n

Buduj\u0105c stron\u0119 w\u00a0oparciu o\u00a0UX, nale\u017cy pami\u0119ta\u0107 o\u00a0odpowiednio dobranej us\u0142udze hostingowej. Ma\u0142o wydajny serwer mo\u017ce sprawi\u0107, \u017ce\u00a0wysi\u0142ki zwi\u0105zane z\u00a0zaprojektowaniem przyjaznej klientom witryny zostan\u0105 zaprzepaszczone. Czytelno\u015b\u0107 strony internetowej mo\u017ce nie\u00a0zosta\u0107 doceniona przez\u00a0u\u017cytkownik\u00f3w, je\u015bli ca\u0142o\u015b\u0107 b\u0119dzie generowa\u0107 si\u0119 bardzo wolno.<\/p>\n

Warto w\u00a0tym celu si\u0119gn\u0105\u0107 po\u00a0CloudHosting z\u00a0CDN nazwa.pl<\/strong><\/a>, kt\u00f3ry\u00a0zapewnia maksymalnie szybkie dzia\u0142anie serwis\u00f3w WWW, niezale\u017cne od\u00a0pory dnia i\u00a0nocy oraz geograficznej lokalizacji odbiorcy. W\u00a0przypadku uruchamiania bardzo zaawansowanych stron i aplikacji Klienci nazwa.pl maj\u0105 do dyspozycji serwery VPS<\/strong><\/a> z systemami operacyjnymi Windows Server i Linux. Co\u00a0istotne, w\u00a0doborze w\u0142a\u015bciwego rozwi\u0105zania, zoptymalizowanego pod\u00a0tworzony przez\u00a0nas projekt, przez\u00a0ca\u0142\u0105 dob\u0119 mo\u017cemy liczy\u0107 na\u00a0pomoc pracownik\u00f3w Dzia\u0142u Obs\u0142ugi Klienta nazwa.pl.<\/p>\n

 <\/p>\n

\n

KONIECZNIE PRZECZYTAJ NA BLOGU:<\/span><\/p>\n