{"id":258361,"date":"2023-03-04T10:38:00","date_gmt":"2023-03-04T07:38:00","guid":{"rendered":"https:\/\/inform.click\/10-najwazniejszych-trendow-projektowania-ui-ux-dla-biznesu-e-commerce\/"},"modified":"2023-03-04T10:38:00","modified_gmt":"2023-03-04T07:38:00","slug":"10-najwazniejszych-trendow-projektowania-ui-ux-dla-biznesu-e-commerce","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/10-najwazniejszych-trendow-projektowania-ui-ux-dla-biznesu-e-commerce\/","title":{"rendered":"10 najwa\u017cniejszych trend\u00f3w projektowania UI\/UX dla biznesu e-commerce"},"content":{"rendered":"<p>\n  Rok 2019 ju\u017c si\u0119 sko\u0144czy\u0142 i musimy mu podzi\u0119kowa\u0107 za wiele trend\u00f3w, kt\u00f3re utrzyma\u0142y si\u0119 w tym roku. W szczeg\u00f3lno\u015bci istnieje jeden trend, kt\u00f3ry pozostanie na d\u0142u\u017csz\u0105 met\u0119. Przynajmniej w e-commerce.\n<\/p>\n<p>\n  To do\u015bwiadczenie u\u017cytkownika.\n<\/p>\n<p>\n  Coraz wi\u0119cej marek e-commerce stawia na pierwszym miejscu inwestowanie w interfejs u\u017cytkownika i projektowanie, a nie jest to ju\u017c tylko kaprys. To konieczno\u015b\u0107.\n<\/p>\n<p>\n  Oto, co m\u00f3wi\u0105 statystyki. Wed\u0142ug Sagipla:\n<\/p>\n<ul>\n<li>82% ze 100 najlepszych stron internetowych Alexy korzysta z adaptacyjnego projektu. Tak wi\u0119c Twoja inwestycja w projektowanie UI i UX jest warunkiem wst\u0119pnym zachowania konkurencyjno\u015bci.\n  <\/li>\n<li>Kupuj\u0105cy opuszczaj\u0105 stron\u0119 internetow\u0105 po 0,05 sekundy, je\u015bli uznaj\u0105 j\u0105 za nieciekaw\u0105 lub maj\u0105 problem z interfejsem \u2013 problem, kt\u00f3ry mo\u017ce rozwi\u0105za\u0107 projekt UX.\n  <\/li>\n<li>Poniewa\u017c coraz wi\u0119cej kupuj\u0105cych woli kupowa\u0107 produkty z urz\u0105dze\u0144 mobilnych (67%), posiadanie Twojej strony internetowej\/us\u0142ugi, brak przyjaznej dla u\u017cytkownika strony internetowej\/aplikacji mo\u017ce kosztowa\u0107 ponad po\u0142ow\u0119 Twoich odbiorc\u00f3w.\n  <\/li>\n<\/ul>\n<p>\n  W handlu elektronicznym w tym roku ustanowiono kilka wa\u017cnych trend\u00f3w w projektowaniu interfejs\u00f3w u\u017cytkownika i UX. Trendy te dotycz\u0105 tworzenia bezproblemowego do\u015bwiadczenia u\u017cytkownika i zwi\u0119kszania zaanga\u017cowania, ruchu, konwersji, sprzeda\u017cy i przyci\u0105gania w rezultacie wysokiej jako\u015bci lead\u00f3w.\n<\/p>\n<p>\n  Te trendy b\u0119d\u0105 si\u0119 utrzymywa\u0107, a pod\u0105\u017canie za nimi jest niezb\u0119dne, je\u015bli chcesz, aby Tw\u00f3j biznes e-commerce pozosta\u0142 konkurencyjny.\n<\/p>\n<p>\n  Przyjrzyjmy si\u0119 bli\u017cej tym trendom i przeanalizujmy kilka przyk\u0142ad\u00f3w marek e-commerce.\n<\/p>\n<h5>\n  1 Wezwanie do minimalizmu<br \/>\n<\/h5>\n<p>\n  Trend, kt\u00f3ry nabra\u0142 rozp\u0119du w tym roku, pokazuje rosn\u0105c\u0105 tendencj\u0119 do tworzenia stron internetowych bardziej minimalistycznych.\n<\/p>\n<p>\n  Dlaczego minimalizm?\n<\/p>\n<p>\n  Ten trend w projektowaniu UI i UX jest reakcj\u0105 na z\u0142o\u017cone i \u201ewypchane&#8221; projektowanie. A poniewa\u017c istnieje rosn\u0105ca tendencja do upraszczania interfejsu u\u017cytkownika, minimalizm oferuje wszystko, aby to osi\u0105gn\u0105\u0107.\n<\/p>\n<p>\n  Sp\u00f3jrzmy na przyk\u0142ad du\u0144skiej strony internetowej producenta mebli Iskos:\n<\/p>\n<p>\n  Ju\u017c na pierwszy rzut oka wida\u0107 g\u0142\u00f3wne atrybuty minimalistycznego projektowania stron internetowych, a mianowicie:\n<\/p>\n<ul>\n<li>Przestrze\u0144 ujemna \u2013 bia\u0142a przestrze\u0144 lub t\u0142o strony g\u0142\u00f3wnej\n  <\/li>\n<li>P\u0142aska tekstura \u2013 wszystkie obrazy i elementy interfejsu u\u017cytkownika nie wykorzystuj\u0105 3D ani innych technik, aby si\u0119 wyr\u00f3\u017cni\u0107, poniewa\u017c ju\u017c to robi\u0105 dzi\u0119ki negatywnej przestrzeni.\n  <\/li>\n<li>Kontrastowe (twarde) obrazy \u2013 zamiast jasnych kolor\u00f3w t\u0142a i element\u00f3w interfejsu, minimalistyczny projekt wykorzystuje obrazy, aby wyr\u00f3\u017cni\u0107 istotne elementy (w tym przypadku producent wy\u015bwietla swoje produkty).\n  <\/li>\n<li>Minimalistyczna typografia \u2013 ta strona jest doskona\u0142ym przyk\u0142adem minimalistycznego designu, poniewa\u017c u\u017cywa rozs\u0105dnego rozmiaru czcionki i spokojnego, ale kontrastowego koloru czcionki.\n  <\/li>\n<\/ul>\n<p>\n  Mo\u017cna r\u00f3wnie\u017c zauwa\u017cy\u0107 og\u00f3lnie ograniczon\u0105 kolorystyk\u0119. Takie podej\u015bcie tworzy \u015bwietny interfejs u\u017cytkownika, poniewa\u017c zwraca uwag\u0119 u\u017cytkownika bezpo\u015brednio na sedno.\n<\/p>\n<p>\n  Witryna jest podzielona na sekcje tylko za pomoc\u0105 prostego nag\u0142\u00f3wka i zdj\u0119\u0107 produktu.\n<\/p>\n<p>\n  Kontrastuj\u0105cym elementem interfejsu u\u017cytkownika na tej stronie jest wyskakuj\u0105ce okienko menu w rogu ekranu:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971020218.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971020218.webp\" alt=\"\" \/><\/a><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839713995bc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839713995bc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Nie ma potrzeby dodawania kolejnych sekcji do tego menu, poniewa\u017c wszystkie znajduj\u0105 si\u0119 ju\u017c na stronie g\u0142\u00f3wnej, wi\u0119c to menu s\u0142u\u017cy jako dodatkowe \u017ar\u00f3d\u0142o informacji dla u\u017cytkownika, kt\u00f3ry chce wi\u0119cej wchodzi\u0107 w interakcje z mark\u0105.\n<\/p>\n<p>\n  Takie projekty, z prost\u0105 nawigacj\u0105 i produktem jako g\u0142\u00f3wnym punktem centralnym, s\u0105 idealne do osi\u0105gni\u0119cia doskona\u0142o\u015bci w projektowaniu UI\/UX.\n<\/p>\n<h5>\n  2 Nacisk na branding<br \/>\n<\/h5>\n<p>\n  Kolejnym trendem w projektowaniu UI i UX jest wzmacnianie zwi\u0105zku mi\u0119dzy do\u015bwiadczeniem u\u017cytkownika a brandingiem.\n<\/p>\n<p>\n  Do\u015bwiadczenie u\u017cytkownika jest definiowane przez to, jak blisko u\u017cytkownik mo\u017ce zbli\u017cy\u0107 si\u0119 do marki, i to sta\u0142o si\u0119 punktem, na kt\u00f3rym skupili si\u0119 projektanci UI i UX. Poza tym design skoncentrowany na brandingu sprawia, \u017ce \u200b\u200bka\u017cdy krok user experience skupia si\u0119 na zapoznaniu u\u017cytkownika z mark\u0105.\n<\/p>\n<p>\n  \u015awietnym przyk\u0142adem k\u0142adzenia nacisku na branding w projektowaniu UI i UX jest Unsubscribe, marka e-commerce produkt\u00f3w do piel\u0119gnacji w\u0142os\u00f3w.\n<\/p>\n<p>\n  Ich strona internetowa to arcydzie\u0142o \u0142\u0105cz\u0105ce do\u015bwiadczenie u\u017cytkownika i branding na ka\u017cdym kroku. Przewijaj\u0105c t\u0119 \u200b\u200bwitryn\u0119, u\u017cytkownik natknie si\u0119 na r\u00f3\u017cne elementy, kt\u00f3re pomagaj\u0105 osi\u0105gn\u0105\u0107 pe\u0142n\u0105 interakcj\u0119 z mark\u0105:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839716c52bd.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839716c52bd.webp\" alt=\"\" \/><\/a><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971a248cc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971a248cc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Opr\u00f3cz tego, \u017ce w swoich sloganach widz\u0105 s\u0142owo \u201ewypisz si\u0119&#8221;, kt\u00f3re koresponduje z nazw\u0105 marki, stawiaj\u0105 r\u00f3wnie\u017c sw\u00f3j cel za g\u0142\u00f3wny punkt strony internetowej, czyli pomaganie aktywnym ludziom lepiej dba\u0107 o w\u0142osy:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  I oczywi\u015bcie strona internetowa jest wykonana z najlepszymi minimalistycznymi praktykami, pomagaj\u0105c stworzy\u0107 prosty, ale wszechstronny interfejs u\u017cytkownika i og\u00f3lnie pozytywne wra\u017cenia u\u017cytkownika.\n<\/p>\n<h5>\n  3 Odwa\u017cniej<br \/>\n<\/h5>\n<p>\n  W tym roku projektanci zaobserwowali rosn\u0105cy trend odwa\u017cniejszych, ale prostszych czcionek. Tendencja ta pokrywa si\u0119 ze wspomnianym wy\u017cej nurtem minimalizmu.\n<\/p>\n<p>\n  W e-commerce pogrubiona czcionka s\u0142u\u017cy do skupienia uwagi u\u017cytkownika na wiadomo\u015bci, kt\u00f3ra zwykle znajduje si\u0119 na \u015brodku strony. Oto przyk\u0142ad Limnia, marki e-commerce sprzedaj\u0105cej bi\u017cuteri\u0119:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Mimo, \u017ce na stronie wykorzystano wideo przedstawiaj\u0105ce modelk\u0119 prezentuj\u0105c\u0105 produkt w tle, nasz\u0105 uwag\u0119 przyci\u0105ga nie ono, a komunikat umieszczony na \u015brodku strony, pogrubionym drukiem.\n<\/p>\n<p>\n  W\u015br\u00f3d najcz\u0119\u015bciej u\u017cywanych czcionek projektanci UI i UX preferuj\u0105 Helvetica, Sans i Univers. Nie mo\u017cesz jednak losowo wybra\u0107 czcionki do projektowania UI\/UX. Wyb\u00f3r ten zale\u017cy od kilku r\u00f3\u017cnych czynnik\u00f3w, a mianowicie:\n<\/p>\n<ul>\n<li>Poziom \u015bmia\u0142o\u015bci w przeciwie\u0144stwie do reszty projektu.\n  <\/li>\n<li>Rozmiar czcionki i spos\u00f3b, w jaki jest postrzegana w por\u00f3wnaniu z reszt\u0105 projektu.\n  <\/li>\n<li>Rodzaj, stopie\u0144 pogrubienia, rozmiar i kolor czcionki w odniesieniu do estetyki Twojej marki.\n  <\/li>\n<\/ul>\n<p>\n  Wszystkie te czynniki wp\u0142ywaj\u0105 na to, jak u\u017cytkownik postrzega i wchodzi w interakcj\u0119 z Twoj\u0105 mark\u0105, wi\u0119c wyb\u00f3r czcionek powinien przyczyni\u0107 si\u0119 do sp\u00f3jno\u015bci projektu UI i UX.\n<\/p>\n<h5>\n  4 Dostosowanie do urz\u0105dze\u0144 mobilnych<br \/>\n<\/h5>\n<p>\n  We wst\u0119pie do tego artyku\u0142u wspomnieli\u015bmy, \u017ce ponad po\u0142owa Twoich klient\u00f3w preferuje zakupy przez urz\u0105dzenia mobilne. A poniewa\u017c marki e-commerce dzia\u0142aj\u0105 g\u0142\u00f3wnie online (tylko niekt\u00f3re z nich maj\u0105 fizyczne showroomy), inwestowanie w projektowanie mobilnego UX jest obowi\u0105zkowe.\n<\/p>\n<p>\n  Wed\u0142ug Interaction Design Foundation, do\u015bwiadczenie u\u017cytkownika mobilnego ma na celu tworzenie pozytywnych do\u015bwiadcze\u0144 mobilnych za po\u015brednictwem stron internetowych, aplikacji i innych us\u0142ug u\u017cywanych na urz\u0105dzeniach mobilnych. Kluczowymi celami mobilnego UX s\u0105 wydajno\u015b\u0107 i wykrywalno\u015b\u0107.\n<\/p>\n<p>\n  Dla marki e-commerce mobile UX to przede wszystkim pe\u0142na dost\u0119pno\u015b\u0107 do wszystkich element\u00f3w serwisu oraz prostota interfejsu.\n<\/p>\n<p>\n  \u015awietnym przyk\u0142adem dostosowania strony internetowej zar\u00f3wno do urz\u0105dze\u0144 stacjonarnych, jak i mobilnych jest Boria, francuska marka e-commerce zajmuj\u0105ca si\u0119 sprzeda\u017c\u0105 wyposa\u017cenia wn\u0119trz:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Mobilna wersja strony internetowej Borii ma mniej element\u00f3w graficznych. Zachowuje jednak wszystkie kluczowe sekcje niezb\u0119dne klientom do robienia zakup\u00f3w za po\u015brednictwem urz\u0105dze\u0144 mobilnych:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Inwestycja w mobilny UX to nie tylko warunek dobrego do\u015bwiadczenia u\u017cytkownika. Jest to r\u00f3wnie\u017c wa\u017cne dla rankingu SEO Twojej marki e-commerce.\n<\/p>\n<p>\n  Google bardzo wysoko ocenia marki z wysokiej jako\u015bci witrynami dostosowanymi do urz\u0105dze\u0144 mobilnych. Istnieje jednak kilka zasad, kt\u00f3re sprawiaj\u0105, \u017ce witryna mobilna jest \u015bwietna. Dlatego w 2015 roku Google opublikowa\u0142 wskaz\u00f3wki dotycz\u0105ce projektowania mobilnego UX dla programist\u00f3w, regularnie aktualizuj\u0105c te wskaz\u00f3wki w miar\u0119 pojawiania si\u0119 nowych trend\u00f3w. W\u015br\u00f3d tych wskaz\u00f3wek mo\u017cna znale\u017a\u0107:\n<\/p>\n<ul>\n<li>\n    <strong>Zbadaj zanim zbudujesz prototyp<\/strong>. Poniewa\u017c projektanci UX s\u0105 stronniczy, Google radzi, aby nie zaczyna\u0107 od razu prototypowania, ale najpierw zbada\u0107 grup\u0119 docelow\u0105 za pomoc\u0105 analizy heurystycznej i test\u00f3w AB.\n  <\/li>\n<li>\n    <strong>Pracuj nad celami dotykowymi<\/strong>. Nawet je\u015bli interfejs strony mobilnej jest przyjazny dla u\u017cytkownika, a strona \u0142aduje si\u0119 szybko na urz\u0105dzeniach mobilnych, u\u017cytkownicy i tak opuszcz\u0105 stron\u0119, je\u015bli zawiera ona elementy, kt\u00f3re nie reaguj\u0105 na ich dotyk. Oznacza to, \u017ce te elementy maj\u0105 zbyt ma\u0142e cele dotykowe, a Google zaleca, aby mia\u0142y one szeroko\u015b\u0107 co najmniej 7-10 mm.\n  <\/li>\n<li>\n    <strong>Mniej ba\u0142aganu<\/strong>. Ta wskaz\u00f3wka, b\u0119d\u0105ca synonimem trendu minimalizmu w projektowaniu interfejs\u00f3w i interfejs\u00f3w u\u017cytkownika, wskazuje, \u017ce Google zajmuje ni\u017csz\u0105 pozycj\u0119 za\u015bmieconych witryn mobilnych, poniewa\u017c s\u0105 one trudne w interakcji.\n  <\/li>\n<\/ul>\n<p>\n  Innymi s\u0142owy, marki e-commerce powinny zwraca\u0107 tak\u0105 sam\u0105 uwag\u0119 na funkcjonalno\u015b\u0107 swoich witryn zar\u00f3wno na komputerach stacjonarnych, jak i urz\u0105dzeniach mobilnych, aby zapewni\u0107 pe\u0142ne do\u015bwiadczenie marki.\n<\/p>\n<h5>\n  5 Skupienie si\u0119 na szybko\u015bci<br \/>\n<\/h5>\n<p>\n  Na pocz\u0105tku artyku\u0142u wspomnieli\u015bmy r\u00f3wnie\u017c, \u017ce klienci podejmuj\u0105 decyzj\u0119 o wej\u015bciu w interakcj\u0119 z Twoj\u0105 mark\u0105 w ci\u0105gu pierwszych 0,05 sekundy wizyty na Twojej stronie.\n<\/p>\n<p>\n  W przypadku marek e-commerce niska pr\u0119dko\u015b\u0107 \u0142adowania strony mo\u017ce by\u0107 szkodliwa. Poniewa\u017c jest to bardzo konkurencyjna bran\u017ca, u\u017cytkownik nie ma problemu ze znalezieniem innej marki e-commerce z podobnym produktem, ale z szybko \u0142aduj\u0105c\u0105 si\u0119 stron\u0105.\n<\/p>\n<p>\n  Wydajno\u015b\u0107 jest r\u00f3wnie\u017c cz\u0119\u015bci\u0105 do\u015bwiadczenia u\u017cytkownika i wiele m\u00f3wi o tym, jak cenisz swoich go\u015bci jako mark\u0119 e-commerce.\n<\/p>\n<p>\n  Jaki jest wi\u0119c cel projektanta UX, je\u015bli chodzi o idealn\u0105 szybko\u015b\u0107 \u0142adowania strony?\n<\/p>\n<p>\n  Wed\u0142ug Unbounce \u0142adowanie strony docelowej zajmuje \u015brednio 15,3 sekundy. To jednak jest ju\u017c bardzo d\u0142ugie, je\u015bli Twoim celem jest stworzenie pozytywnego do\u015bwiadczenia u\u017cytkownika.\n<\/p>\n<p>\n  Dlatego Unbounce twierdzi, \u017ce najlepsza pr\u0119dko\u015b\u0107 \u0142adowania strony wynosi od 2,4 do 3,21 sekundy, ale strony, kt\u00f3re \u0142aduj\u0105 si\u0119 w pi\u0119\u0107 sekund, r\u00f3wnie\u017c uzyskuj\u0105 d\u0142u\u017csze \u015brednie sesje (70% d\u0142u\u017csze wed\u0142ug \u017ar\u00f3d\u0142a).\n<\/p>\n<p>\n  Dlatego ostatecznym celem pozytywnego do\u015bwiadczenia u\u017cytkownika jest osi\u0105gni\u0119cie \u015bredniej szybko\u015bci \u0142adowania strony wynosz\u0105cej 3 sekundy.\n<\/p>\n<h5>\n  6 Tworzenie wra\u017ce\u0144 z szatni<br \/>\n<\/h5>\n<p>\n  Przejd\u017amy teraz od technicznej cz\u0119\u015bci naszej dyskusji do trend\u00f3w w us\u0142ugach, kt\u00f3re marki e-commerce mog\u0105 oferowa\u0107 w celu poprawy do\u015bwiadczenia u\u017cytkownika i interakcji u\u017cytkownika z mark\u0105.\n<\/p>\n<p>\n  Jednym z rosn\u0105cych trend\u00f3w w projektowaniu UI i UX w tym roku by\u0142o wprowadzenie wirtualnych garder\u00f3b.\n<\/p>\n<p>\n  Internetowa garderoba pojawi\u0142a si\u0119 jako odpowied\u017a na rosn\u0105ce wymagania konsument\u00f3w dotycz\u0105ce cz\u0119stszej interakcji z produktami i przymierzania ich. Wszyscy wiemy, \u017ce kupujemy kota w worku, je\u015bli nie mo\u017cemy fizycznie dotkn\u0105\u0107 produktu. Jest to szczeg\u00f3lnie prawdziwe, je\u015bli chodzi o marki e-commerce, kt\u00f3re sprzedaj\u0105 ubrania lub akcesoria.\n<\/p>\n<p>\n  Jedn\u0105 z takich marek e-commerce jest Warby Parker, internetowa firma zajmuj\u0105ca si\u0119 sprzeda\u017c\u0105 okular\u00f3w, kt\u00f3ra odpowiedzia\u0142a na ten problem, uruchamiaj\u0105c aplikacj\u0119 mobiln\u0105, w kt\u00f3rej u\u017cytkownicy mog\u0105 przymierzy\u0107 r\u00f3\u017cne kszta\u0142ty okular\u00f3w, po prostu robi\u0105c zdj\u0119cie:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ta aplikacja by\u0142a bardzo pomocna dla klient\u00f3w, kt\u00f3rzy chc\u0105 kupi\u0107 okulary, ale wahaj\u0105 si\u0119, jaki kszta\u0142t okular\u00f3w b\u0119dzie pasowa\u0142 do ich twarzy.\n<\/p>\n<p>\n  Trend ten polega na po\u0142\u0105czeniu UX i AR (rzeczywisto\u015b\u0107 rozszerzona), poniewa\u017c klienci wchodz\u0105 w interakcj\u0119 z rzeczywistymi obiektami, kt\u00f3re s\u0105 ulepszane przez generowane komputerowo modalno\u015bci sensoryczne, aby uzyska\u0107 pe\u0142ne do\u015bwiadczenie u\u017cytkownika z mark\u0105.\n<\/p>\n<h5>\n  7 Opowiadanie historii za pomoc\u0105 element\u00f3w wizualnych<br \/>\n<\/h5>\n<p>\n  Kolejnym trendem, kt\u00f3ry ma na celu popraw\u0119 do\u015bwiadczenia u\u017cytkownika poprzez zawarto\u015b\u0107 serwisu, jest storytelling wizualny.\n<\/p>\n<p>\n  Rola storytellingu w marketingu jest ogromna. Badania pokazuj\u0105, \u017ce komunikaty marketingowe dostarczane w formie historii s\u0105 do 22 razy bardziej wci\u0105gaj\u0105ce i zapadaj\u0105ce w pami\u0119\u0107. Opowiadanie historii oznacza wi\u0119ksz\u0105 warto\u015b\u0107, dlatego z powodzeniem migrowa\u0142o do projektowania UX i sta\u0142o si\u0119 wizualnym opowiadaniem historii.\n<\/p>\n<p>\n  Dla marki e-commerce storytelling wizualny jest niezb\u0119dny dla do\u015bwiadczenia u\u017cytkownika, poniewa\u017c przybli\u017ca klient\u00f3w do marki i oferuje im wy\u0142\u0105czny udzia\u0142 w definiowaniu tej marki.\n<\/p>\n<p>\n  Jedn\u0105 z marek, kt\u00f3ra z powodzeniem \u0142\u0105czy wizualne opowiadanie historii i pozytywne do\u015bwiadczenia u\u017cytkownik\u00f3w, jest Always, marka P&G zajmuj\u0105ca si\u0119 higien\u0105 osobist\u0105:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Wykorzystuj\u0105c wizualne opowiadanie historii, Always opowiada, w jaki spos\u00f3b marka uczestniczy w wielu akcjach spo\u0142ecznych, ujawniaj\u0105c historie, w jaki spos\u00f3b ludzie wchodz\u0105 w interakcje z mark\u0105 i jej produktem z ich osobistego punktu widzenia:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Istnieje jednak problem z rozmieszczeniem tre\u015bci, je\u015bli chodzi o wizualne opowiadanie historii w projektowaniu UX. W zale\u017cno\u015bci od tego, jakim j\u0119zykiem pos\u0142uguj\u0105 si\u0119 odbiorcy docelowi iw jakim kierunku czytaj\u0105 (od lewej do prawej lub od prawej do lewej), tre\u015b\u0107 b\u0119dzie inaczej umieszczona.\n<\/p>\n<p>\n  Na przyk\u0142ad dla odbiorc\u00f3w, kt\u00f3rzy czytaj\u0105 od lewej do prawej, tre\u015b\u0107 powinna by\u0107 umieszczona na \u015brodku lub po lewej stronie i zawiera\u0107 oko\u0142o 75 znak\u00f3w w wierszu:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Visual storytelling to podstawowa metodologia projektowania UX, kt\u00f3ra jest niezb\u0119dna dla marek e-commerce, poniewa\u017c opieraj\u0105 ca\u0142e swoje do\u015bwiadczenie z klientem na do\u015bwiadczeniach online.\n<\/p>\n<h5>\n  8 Dokonywanie p\u0142atno\u015bci bez wysi\u0142ku<br \/>\n<\/h5>\n<p>\n  Innym trendem w\u015br\u00f3d wymagaj\u0105cych klient\u00f3w jest u\u0142atwienie realizacji transakcji. Bezproblemowa realizacja transakcji jest r\u00f3wnie\u017c jednym z najwi\u0119kszych wyzwa\u0144 w projektowaniu UX.\n<\/p>\n<p>\n  Wed\u0142ug ostatnich statystyk InvestCRO \u015bredni wska\u017anik porzuce\u0144 koszyka wynosi 65,23%, na co znacz\u0105cy wp\u0142yw maj\u0105 nast\u0119puj\u0105ce przyczyny:\n<\/p>\n<ul>\n<li>14% \u2013 brak opcji wymeldowania go\u015bcia\n  <\/li>\n<li>11% \u2013 z\u0142o\u017cony proces kasowy\n  <\/li>\n<li>7% \u2013 za ma\u0142o opcji p\u0142atno\u015bci\n  <\/li>\n<\/ul>\n<p>\n  Poniewa\u017c dokonywanie p\u0142atno\u015bci i realizacja transakcji nale\u017c\u0105 do do\u015bwiadczenia u\u017cytkownika, projektant UX powinien zadba\u0107 o to, aby by\u0142o to \u0142atwiejsze.\n<\/p>\n<p>\n  Je\u015bli strona boryka si\u0119 z wysokim wska\u017anikiem porzuce\u0144 koszyk\u00f3w, zadaniem projektanta UX jest:\n<\/p>\n<ul>\n<li>Dowiedz si\u0119, dlaczego tak si\u0119 dzieje, za pomoc\u0105 test\u00f3w u\u017cyteczno\u015bci (poprzez wywiady z u\u017cytkownikami i dane otrzymane od obs\u0142ugi klienta).\n  <\/li>\n<li>Mapuj podr\u00f3\u017c klienta z uwzgl\u0119dnieniem danych zebranych z test\u00f3w u\u017cyteczno\u015bci.\n  <\/li>\n<li>Wykonaj testy AB, aby zobaczy\u0107, jak dzia\u0142a rozwi\u0105zanie.\n  <\/li>\n<\/ul>\n<p>\n  Poniewa\u017c sukces marki e-commerce zale\u017cy w du\u017cej mierze od do\u015bwiadczenia klienta z kas\u0105, uproszczenie tego procesu dzi\u0119ki projektowi UX jest wa\u017cnym wk\u0142adem w pozytywne wra\u017cenia u\u017cytkownika.\n<\/p>\n<h5>\n  9 Koncentracja na spersonalizowanych ofertach<br \/>\n<\/h5>\n<p>\n  Personalizacja to trend, kt\u00f3ry zostanie. A UX mo\u017ce przenie\u015b\u0107 to na inny poziom, projektuj\u0105c spersonalizowane oferty.\n<\/p>\n<p>\n  Wiele marek e-commerce ju\u017c teraz \u015bwietnie to wykorzystuje.\n<\/p>\n<p>\n  Na przyk\u0142ad Thinx, marka e-commerce sprzedaj\u0105ca bielizn\u0119 i produkty higieny osobistej, opracowa\u0142a ankiet\u0119, kt\u00f3ra pomaga wybra\u0107 produkty odpowiadaj\u0105ce potrzebom u\u017cytkownika:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Kieruj\u0105c si\u0119 wynikami ankiety, marka tworzy spersonalizowane oferty, kt\u00f3re s\u0105 idealne dla nowych klient\u00f3w.\n<\/p>\n<p>\n  Inna firma, Tobi, marka handlu elektronicznego sprzedaj\u0105ca ubrania, skupi\u0142a si\u0119 na inkluzywno\u015bci, projektuj\u0105c wyskakuj\u0105ce okienko, aby pom\u00f3c osobom niepe\u0142nosprawnym dostosowa\u0107 witryn\u0119 internetow\u0105, aby interfejs u\u017cytkownika by\u0142 dla nich wygodniejszy:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ten wk\u0142ad w projektowanie interfejsu u\u017cytkownika i interfejsu u\u017cytkownika ma na celu spersonalizowanie do\u015bwiadczenia ka\u017cdego u\u017cytkownika z mark\u0105, z uwzgl\u0119dnieniem unikalnych cech i zachowa\u0144 ka\u017cdego u\u017cytkownika.\n<\/p>\n<h5>\n  10 Rozmowa z klientem<br \/>\n<\/h5>\n<p>\n  W e-commerce chatboty odgrywaj\u0105 wa\u017cn\u0105 rol\u0119, zapewniaj\u0105c obs\u0142ug\u0119 klienta. S\u0105 r\u00f3wnie\u017c cz\u0119\u015bci\u0105 do\u015bwiadczenia u\u017cytkownika, bez wzgl\u0119du na to, czy u\u017cywaj\u0105 graficznego projektu interfejsu u\u017cytkownika, czy projektu interfejsu g\u0142osowego.\n<\/p>\n<p>\n  Projektowanie interfejsu u\u017cytkownika oferuje markom e-commerce du\u017c\u0105 wszechstronno\u015b\u0107, je\u015bli chodzi o tworzenie chatbot\u00f3w. Na przyk\u0142ad MeUndies, marka e-commerce sprzedaj\u0105ca bielizn\u0119, u\u017cywa swojego chatbota w witrynie, aby odpowiedzie\u0107 na najcz\u0119\u015bciej wyszukiwane pytania:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973c90de8.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973c90de8.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Niekt\u00f3re marki wybieraj\u0105 bardziej interaktywne chatboty. Na przyk\u0142ad zawsze zamienia rozmow\u0119 z chatbotem w realistyczn\u0105 interakcj\u0119 z cz\u0142owiekiem:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973fc0224.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973fc0224.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Wyb\u00f3r chatbota zale\u017cy od tego, jak chcesz, aby reprezentowa\u0142 Twoj\u0105 mark\u0119. Ale nie mo\u017cna zaprzeczy\u0107, \u017ce trend chatbot\u00f3w pozostanie cz\u0119\u015bci\u0105 projektowania UI i UX, poniewa\u017c ma bezpo\u015bredni wp\u0142yw na jako\u015b\u0107 do\u015bwiadczenia u\u017cytkownika.\n<\/p>\n<h5>\n  Nie zapomnij o warto\u015bci<br \/>\n<\/h5>\n<p>\n  Ka\u017cdy trend, o kt\u00f3rym m\u00f3wili\u015bmy w tym artykule, ma silny nacisk na dostarczanie warto\u015bci dla klienta. Koncentruj\u0105 si\u0119 na projekcie, kt\u00f3ry nie szkodzi, ale zamiast tego k\u0142adzie nacisk na warto\u015b\u0107. Trendy te maj\u0105 r\u00f3wnie\u017c na celu przybli\u017cenie klientom Twojej marki e-commerce poprzez wizualne opowiadanie historii, konwersacyjne projektowanie sztucznej inteligencji i branding UX.\n<\/p>\n<p>\n  Nad\u0105\u017canie za tymi trendami UI\/UX mo\u017ce pom\u00f3c markom e-commerce wysun\u0105\u0107 na pierwszy plan do\u015bwiadczenia u\u017cytkownik\u00f3w, zapewniaj\u0105c im sukces w tej wysoce konkurencyjnej bran\u017cy.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  \u0179r\u00f3d\u0142o nagrywania: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2020\/05\/12\/ecommerce-ui-ux-design-trends\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Rok 2019 ju\u017c si\u0119 sko\u0144czy\u0142 i musimy mu podzi\u0119kowa\u0107 za wiele trend\u00f3w, kt\u00f3re utrzyma\u0142y si\u0119 w tym roku. W szczeg\u00f3lno\u015bci istnieje jeden trend, kt\u00f3ry pozostanie na d\u0142u\u017csz\u0105 met\u0119. Przynajmniej w e-commerce. To do\u015bwiadczenie u\u017cytkownika. Coraz wi\u0119cej marek e-commerce stawia na pierwszym miejscu inwestowanie w interfejs u\u017cytkownika i projektowanie, a nie jest to ju\u017c tylko kaprys. To konieczno\u015b\u0107. Oto, co m\u00f3wi\u0105 statystyki. Wed\u0142ug Sagipl: 82% ze 100 najlepszych stron internetowych Alexy wykorzystuje projektowanie adaptacyjne. Tak wi\u0119c Twoja inwestycja w projektowanie UI i UX jest warunkiem wst\u0119pnym zachowania konkurencyjno\u015bci. Kupuj\u0105cy opuszczaj\u0105 witryn\u0119\u2026<\/p>\n","protected":false},"author":1,"featured_media":211003,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[201,58],"tags":[],"class_list":["post-258361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-projektowanie-stron","category-web-i-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/comments?post=258361"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media\/211003"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media?parent=258361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/categories?post=258361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/tags?post=258361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}