\n Identyfikacja profili osobowo\u015bci odbiorc\u00f3w jest zniech\u0119caj\u0105cym zadaniem. Na szcz\u0119\u015bcie Michael King napisa\u0142 o tym doskona\u0142y artyku\u0142<\/a>. Zasadniczo m\u00f3wi o przeprowadzeniu segmentacji marketingowej, aby przedstawi\u0107 reprezentacj\u0119 odwiedzaj\u0105cych witryn\u0119, co pomo\u017ce poprawi\u0107 podr\u00f3\u017c Twoich klient\u00f3w.\n<\/p>\n \n Wa\u017cne jest, aby pami\u0119ta\u0107, \u017ce tworz\u0105c person\u0119 klienta, powiniene\u015b r\u00f3wnie\u017c wiedzie\u0107, sk\u0105d pochodz\u0105 Twoi odbiorcy. Wiedza o tym da ci bardziej szczeg\u00f3\u0142owe wyobra\u017cenie o zainteresowaniach odwiedzaj\u0105cych przed udaniem si\u0119 na twoj\u0105 stron\u0119. Google Analytics jest oczywistym narz\u0119dziem do wykorzystania w tym zakresie. Aby to sprawdzi\u0107, przejd\u017a do profilu Google Analytics swojej witryny. Kliknij Odbiorcy > Zainteresowania > Segmenty na rynku:\n<\/p>\n \n Spowoduje to przej\u015bcie do tego wykresu danych.\n<\/p>\n \n Te dane reprezentuj\u0105 kategorie witryn, kt\u00f3re odwiedzali wcze\u015bniej u\u017cytkownicy. Poniewa\u017c chodzi o tworzenie person klient\u00f3w, poszukaj kategorii, kt\u00f3re otrzymuj\u0105 wysokiej jako\u015bci ruch. Okre\u015blenie jako\u015bci ruchu zale\u017cy od cel\u00f3w witryny. Oznacza to u\u017cycie metryk lub kombinacji metryk, kt\u00f3re pasuj\u0105 do standardu, dla kt\u00f3rego cele s\u0105 dostosowane. Zwykle te dane obejmuj\u0105 wsp\u00f3\u0142czynnik odrzuce\u0144, nowe wizyty i \u015bredni czas trwania witryny. Wa\u017cnym punktem do rozwa\u017cenia jest filtrowanie danych. U\u017cywanie niefiltrowanych danych z ruchu odsy\u0142aj\u0105cego do tworzenia person klient\u00f3w skomplikuje spraw\u0119, wi\u0119c b\u0105d\u017a ostro\u017cny. Zapoznaj si\u0119 z tym artyku\u0142em dotycz\u0105cym<\/a> filtrowania fa\u0142szywych skierowa\u0144 w Google Analytics.\n<\/p>\n \n Po zidentyfikowaniu w\u0142a\u015bciwych \u017ar\u00f3de\u0142 ruchu odsy\u0142aj\u0105cego te, kt\u00f3re kieruj\u0105 znaczn\u0105 cz\u0119\u015b\u0107 ruchu do Twojej witryny, uruchamiaj\u0105 adresy URL niekt\u00f3rych popularnych narz\u0119dzi do sprawdzania witryn dost\u0119pnych online. Te powszechnie u\u017cywane to Podobneweb<\/a> i Alexa<\/a>, ale s\u0105 te\u017c inne, kt\u00f3re r\u00f3wnie\u017c robi\u0105 to samo. Mog\u0105 da\u0107 ci przegl\u0105d witryn, kt\u00f3re chcesz sprawdzi\u0107 w swoich bezp\u0142atnych wersjach, ale aby pozna\u0107 wi\u0119cej szczeg\u00f3\u0142\u00f3w, mo\u017cesz mie\u0107 mo\u017cliwo\u015b\u0107 uaktualnienia do ich kont premium.\n<\/p>\n \n Oto przegl\u0105d danych demograficznych w sieci podobnej.\n<\/p>\n \n Alexa:\n<\/p>\n \n Por\u00f3wnywanie i uzupe\u0142nianie danych z tych 3 narz\u0119dzi da bardziej szczeg\u00f3\u0142owe oszacowanie danych odwiedzaj\u0105cych.\n<\/p>\n \n Po zidentyfikowaniu person klient\u00f3w nast\u0119pnym krokiem jest dostosowanie ich do cel\u00f3w witryny wed\u0142ug etap\u00f3w podr\u00f3\u017cy. Etapy podr\u00f3\u017cy w witrynie mo\u017cna zobaczy\u0107 w przep\u0142ywie zachowa\u0144 w Google Analytics. Zachowanie > Przebieg zachowania:\n<\/p>\n \n Wizualny wykres poka\u017ce \u015bcie\u017ck\u0119 odwiedzaj\u0105cego w witrynie. Pocz\u0105wszy od strony g\u0142\u00f3wnej (i innych stron kategorii), przep\u0142yw b\u0119dzie mia\u0142 wiele punkt\u00f3w kontaktowych przed osi\u0105gni\u0119ciem celu witryny.\n<\/p>\n \n *Pami\u0119taj, \u017ce cele witryny musz\u0105 by\u0107 ustawione w profilu Analytics, aby uzyska\u0107 pe\u0142ny obraz \u015bcie\u017cki konwersji u\u017cytkownika.\n<\/p>\n \n Zwr\u00f3\u0107 uwag\u0119 na strony, na kt\u00f3rych wyst\u0119puje wi\u0119kszo\u015b\u0107 porzuce\u0144. Istnieje wiele powod\u00f3w, dla kt\u00f3rych odwiedzaj\u0105cy wyje\u017cd\u017caj\u0105. Niekt\u00f3re z typowych powod\u00f3w to:\n<\/p>\n \n Na razie skupimy si\u0119 tylko na kwestii projektowania, ale poniewa\u017c wszystkie te czynniki s\u0105 ze sob\u0105 \u015bci\u015ble powi\u0105zane, poruszymy je r\u00f3wnie\u017c w odniesieniu do projektowania.\n<\/p>\n \n W artykule UXMag przedstawiono scenariusze, kt\u00f3re prowadz\u0105 do stwierdzenia, \u017ce \u200b\u200bprojektowanie stron internetowych jest martwe. Prawie wszystkie z tych punkt\u00f3w dotycz\u0105 pojawiania si\u0119 nowych technologii i innowacji w projektowaniu stron internetowych, kt\u00f3re nie s\u0105 konieczne do zaanga\u017cowania odbiorc\u00f3w. Ostatecznie jednak artyku\u0142 nie pogrzeba\u0142 projektowania stron internetowych jako zawodu, ale jest raczej wezwaniem dla projektant\u00f3w stron internetowych do dostosowania si\u0119 do obecnego krajobrazu. Podczas gdy wi\u0119kszo\u015b\u0107 przedstawionych rzeczy jest trafna, istnieje jedna przes\u0142anka przedstawionego argumentu, kt\u00f3ra mog\u0142a by\u0107 niew\u0142a\u015bciwa, a mianowicie automatyzacja i sztuczna inteligencja us\u0142ug projektowania stron internetowych. Chocia\u017c automatyzacja jest mile widzianym wytchnieniem dla projektant\u00f3w stron internetowych, nie by\u0142aby tak pomocna w og\u00f3lnym obrazie, je\u015bli chodzi o realizacj\u0119 cel\u00f3w witryny. Posiadanie zaplanowanej koncepcji projektowej maj\u0105cej na celu osi\u0105gni\u0119cie cel\u00f3w witryny nadal le\u017cy w gestii ludzi.\n<\/p>\n \n U\u017cyteczno\u015b\u0107 i design id\u0105 w parze. Chocia\u017c obie s\u0105 odr\u0119bnymi dyscyplinami, jedna uzupe\u0142nia drug\u0105 na niezliczone sposoby, \u017ce czasami trudno jest odr\u00f3\u017cni\u0107 jedn\u0105 od drugiej. Aby ponownie podkre\u015bli\u0107 sens korzystania z projektu w celu zminimalizowania porzucania stron i poprawy podr\u00f3\u017cy klienta, oto niekt\u00f3re z typowych b\u0142\u0119d\u00f3w u\u017cyteczno\u015bci w projektowaniu stron internetowych:\n<\/p>\n \n Tre\u015b\u0107 nie przekazuje wiadomo\u015bci:\n <\/p>\n \n Tre\u015b\u0107 jest cz\u0119\u015bci\u0105 projektowania stron internetowych. Jest to powszechnie okre\u015blane jako kopia internetowa. Grafika i wizualizacje zrobi\u0105 dobre wra\u017cenie na odwiedzaj\u0105cych, ale lubi\u0105 te\u017c czyta\u0107 tekst. B\u0142\u0119dy projektowe pojawiaj\u0105 si\u0119, gdy odwiedzaj\u0105cy s\u0105 rozpraszani innymi elementami strony.\n <\/p>\n \n Typografia jest r\u00f3wnie\u017c czynnikiem projektowania stron internetowych. Nie zawsze chodzi o nag\u0142\u00f3wki i czcionki tekstu. U\u017cyteczno\u015b\u0107 zawsze powinna by\u0107 wa\u017cniejsza ni\u017c estetyka, aby tre\u015b\u0107 by\u0142a czytelna.\n <\/p>\n<\/li>\n \n Odwiedzaj\u0105cy nie maj\u0105 mo\u017cliwo\u015bci skontaktowania si\u0119 z Tob\u0105:\n <\/p>\n \n Podr\u00f3\u017c klienta powinna by\u0107 interaktywna i wci\u0105gaj\u0105ca. Je\u015bli tre\u015b\u0107 Twojej witryny przyci\u0105gnie czytelnik\u00f3w, b\u0119d\u0105 chcieli by\u0107 z Tob\u0105 w kontakcie. Formularze kontaktowe powinny by\u0107 funkcjonalne. \u0141adny projekt to tak\u017ce bonus, ale nie nale\u017cy go stawia\u0107 przed u\u017cyteczno\u015bci\u0105.\n <\/p>\n<\/li>\n \n Brak funkcji wyszukiwania:\n <\/p>\n \n Osoby odwiedzaj\u0105ce strony internetowe maj\u0105 w g\u0142owie okre\u015blone zadanie. Najcz\u0119\u015bciej chc\u0105 uzyska\u0107 informacje. Witryny z du\u017c\u0105 ilo\u015bci\u0105 tre\u015bci potrzebuj\u0105 funkcji wyszukiwania, aby odwiedzaj\u0105cy zaoszcz\u0119dzili czas na nawigacj\u0119. W przypadku witryn e-commerce ludzie b\u0119d\u0105 chcieli pozna\u0107 opisy produkt\u00f3w. Witryna pozbawiona funkcji wyszukiwania mo\u017ce zmniejszy\u0107 jej nawigacj\u0119.\n <\/p>\n<\/li>\n \n D\u0142ugi proces rejestracji:\n <\/p>\n \n Nic nie mo\u017ce by\u0107 bardziej frustruj\u0105ce ni\u017c ch\u0119\u0107 zarejestrowania si\u0119 w witrynie tylko po to, aby zobaczy\u0107 d\u0142ugi formularz kontaktowy z wieloma niepotrzebnymi szczeg\u00f3\u0142ami. Sp\u00f3jrz na formularz rejestracyjny Reddita.\n <\/p>\n \n Prostota formularza rejestracyjnego znacznie u\u0142atwia nowym u\u017cytkownikom do\u0142\u0105czenie do serwisu. Wspania\u0142\u0105 rzecz\u0105 jest to, \u017ce podanie adresu e-mail jest opcjonalne. Nie oznacza to, \u017ce ka\u017cda witryna nie powinna prosi\u0107 o e-maile, ale nale\u017cy zaprzesta\u0107 proszenia u\u017cytkownik\u00f3w o niepotrzebne informacje.\n <\/p>\n<\/li>\n \n Niesp\u00f3jno\u015b\u0107 w projekcie:\n <\/p>\n \n Jedn\u0105 z zasad projektowania (nie tylko stron internetowych) jest sp\u00f3jno\u015b\u0107. Projekt strony g\u0142\u00f3wnej powinien by\u0107 taki sam jak pozosta\u0142ych stron. Je\u015bli motyw kolorystyczny strony g\u0142\u00f3wnej jest bia\u0142y, na przyk\u0142ad strona z informacjami nie powinna odwr\u00f3ci\u0107 skryptu i przej\u015b\u0107 na inny kolor, na przyk\u0142ad czarny. Nie chodzi tylko o kolor, ale tak\u017ce o uk\u0142ad. Sp\u00f3jno\u015b\u0107 jest kluczem.\n <\/p>\n<\/li>\n<\/ul>\n \n Punkty styku to wa\u017cne strony witryny. W przypadku witryn o du\u017cej zawarto\u015bci, takich jak blogi, s\u0105 to strony kategorii, strony kontaktowe i strony o nas. Strony te s\u0142u\u017c\u0105 jako brama dla odwiedzaj\u0105cych do tre\u015bci. Witryny e-commerce maj\u0105 r\u00f3\u017cne punkty styku. S\u0105 to g\u0142\u00f3wnie strony katalogowe oraz opisy produkt\u00f3w. Aby dowiedzie\u0107 si\u0119 wi\u0119cej o punktach styku, wr\u00f3\u0107 do przep\u0142ywu zachowa\u0144 w Google Analytics.\n<\/p>\n \n Punkt styku witryny powinien przemawia\u0107 do docelowych u\u017cytkownik\u00f3w witryny. Faza projektowania b\u0119dzie musia\u0142a rezonowa\u0107 z zamierzonymi odbiorcami. W tym miejscu utworzona persona klienta b\u0119dzie s\u0142u\u017cy\u0107 jako przewodnik podczas projektowania (lub przeprojektowywania) stron.\n<\/p>\n \n Aby poprawi\u0107 do\u015bwiadczenie u\u017cytkownika w punktach styku, projektanci musz\u0105 zidentyfikowa\u0107 luki informacyjne. Sprawdzanie, czego brakuje na stronach i wype\u0142nianie niezb\u0119dnych element\u00f3w, aby zminimalizowa\u0107 liczb\u0119 porzuce\u0144. Luki to brak informacji mi\u0119dzy oczekiwaniami odwiedzaj\u0105cych na stronach a informacjami dost\u0119pnymi na stronie.\n<\/p>\n \n Istniej\u0105 r\u00f3wnie\u017c aspekty techniczne, kt\u00f3re mog\u0105 poprawi\u0107 i zmniejszy\u0107 problemy ze stronami. SEO na stronie (optymalizacja pod k\u0105tem wyszukiwarek) mo\u017ce identyfikowa\u0107 i naprawia\u0107 te problemy, zapewniaj\u0105c lepsz\u0105 wygod\u0119 u\u017cytkownika.\n<\/p>\n \n Szybko\u015b\u0107 witryny\/strony:\n <\/p>\n \n Powinno to by\u0107 priorytetem w tworzeniu i projektowaniu stron internetowych. Pami\u0119taj, \u017ce funkcjonalno\u015bci nie nale\u017cy odk\u0142ada\u0107 na zb\u0119dne ozdoby. Du\u017ce pliki, kt\u00f3rych \u0142adowanie zajmuje du\u017co czasu, nale\u017cy skompresowa\u0107 i ustawi\u0107 w kolejno\u015bci \u0142adowania, aby skr\u00f3ci\u0107 czas \u0142adowania. Aby uzyska\u0107 bardziej szczeg\u00f3\u0142owy przewodnik dotycz\u0105cy poprawy szybko\u015bci witryny, zapoznaj si\u0119 z tym artyku\u0142em<\/a> na temat szybko\u015bci witryny.\n <\/p>\n<\/li>\n \n Przekierowania 301 i 302:\n <\/p>\n \n Przekierowania strony s\u0105 niezb\u0119dne. Istnieje wiele powod\u00f3w, dla kt\u00f3rych webmasterzy przekierowuj\u0105 strony. Najcz\u0119stszym jest przekierowanie ze starej strony na now\u0105 i zaktualizowan\u0105 ze \u015bwie\u017c\u0105 tre\u015bci\u0105. R\u00f3\u017cnica mi\u0119dzy nimi polega na tym, \u017ce 301 jest sta\u0142ym przekierowaniem, podczas gdy 302 jest tylko tymczasowym.\n <\/p>\n<\/li>\n \n Kody nag\u0142\u00f3wka HTTP:\n <\/p>\n \n 301 i 302 to przyk\u0142ady kod\u00f3w nag\u0142\u00f3wka. Jest ich ca\u0142kiem sporo, ale ograniczymy si\u0119 do tych najpopularniejszych.\n <\/p>\n \n 200 Sukces \u2013 strona zosta\u0142a za\u0142adowana pomy\u015blnie.\n <\/p>\n \n 404 Nie znaleziono strony \u2013 nie mo\u017cna za\u0142adowa\u0107 strony.\n <\/p>\n \n 500 Wewn\u0119trzny b\u0142\u0105d serwera \u2013 og\u00f3lna strona b\u0142\u0119du. nie podano zbyt wielu szczeg\u00f3\u0142\u00f3w, dlaczego tak si\u0119 sta\u0142o.\n <\/p>\n \n Opr\u00f3cz kod\u00f3w stanu 301 i 302 wa\u017cne jest, aby zminimalizowa\u0107 wyst\u0119powanie stron 404, poniewa\u017c nie jest to dobre dla u\u017cytkownik\u00f3w. Prostym rozwi\u0105zaniem jest utworzenie niestandardowej strony 404, kt\u00f3ra przyci\u0105gnie ich z powrotem na w\u0142a\u015bciwe strony.\n <\/p>\n<\/li>\n<\/ol>\n \n Hierarchia wizualna jest jedn\u0105 z najwa\u017cniejszych zasad projektowania stron internetowych. Hierarchia wizualna przekazuje odbiorcom wiadomo\u015b\u0107 i zawarto\u015b\u0107 witryny. Istniej\u0105 filary w hierarchii internetowej, kt\u00f3re nale\u017cy wzi\u0105\u0107 pod uwag\u0119.\n<\/p>\n \n Uzbrojeni w wiedz\u0119 o docelowych odbiorcach witryny i informacje o uzupe\u0142nieniu luk potrzebnych do poprawy do\u015bwiadczenia nawigacyjnego u\u017cytkownika, nadszed\u0142 czas na zbudowanie witryny internetowej, kt\u00f3ra zaspokoi potrzeby odbiorc\u00f3w. Twoja strona internetowa b\u0119dzie najwa\u017cniejszym elementem wizualnym, kt\u00f3rego b\u0119dziesz u\u017cywa\u0107. Bez wzgl\u0119du na to, ile zidentyfikowa\u0142e\u015b os\u00f3b, odwiedzaj\u0105cy witryn\u0119 zawsze b\u0119d\u0105 mieli jaki\u015b cel. B\u0119d\u0105 chcieli;\n<\/p>\n \n Powody mog\u0105 by\u0107 r\u00f3\u017cne, ale celem witryny jest rozszerzenie Ciebie, Twojej firmy i Twojej firmy, niezale\u017cnie od przypadku. B\u0105d\u017a jasny, zwi\u0119z\u0142y i sp\u00f3jny z przekazem oraz stale aktualizuj tre\u015b\u0107, aby dostarcza\u0107 im \u015bwie\u017cych informacji.\n<\/p>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-249175-63821f10ad402.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-249175-63821f131576b.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-249175-63821f150655e.webp\")
<\/a><\/p>\n\n Wyr\u00f3wnanie celu
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-249175-63821f1910317.webp\")
<\/a><\/p>\n\n
\n
\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-249175-63821f1d2f81f.webp\")
<\/a><\/p>\n\n Punkty styku
\n<\/h5>\n\n
\n Hierarchia wizualna
\n<\/h5>\n\n
\n
\n
\n
\n
\n K\u0142ad\u0105c wszystko razem
\n<\/h5>\n\n