Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00105 004153 21517723 na godz. na dobę w sumie
UX w projektowaniu witryn internetowych - książka
UX w projektowaniu witryn internetowych - książka
Autor: , Liczba stron: 272
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4701-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook, audiobook).

Wrażenia użytkownika, czyli User Experience (UX), to jeden z najważniejszych czynników, które decydują o sukcesie produktu cyfrowego. Ostatnio UX staje się szeroką dyscypliną, która wykracza daleko poza tworzenie prostych w obsłudze, estetycznych interfejsów użytkownika. Obecnie uważa się, że o wrażeniach użytkownika decyduje rozbudowany zbiór wielu powiązanych ze sobą komponentów. Najważniejszym z nich jest użyteczność, ale trzeba też uwzględniać kompleksowość funkcjonalności, w odpowiedni sposób zaprojektować interakcje z użytkownikiem, zapewniając również dostępność produktu dla osób o szczególnych potrzebach.

Ta książka jest praktycznym przewodnikiem po metodykach UX dla witryn internetowych, dzięki któremu łatwiejsze staje się zrozumienie zachowań i potrzeb użytkownika. Pokazano tu, jak można zdobyć zaufanie użytkownika. Opisano metodyki UX potrzebne podczas badań, projektowania, tworzenia i testowania produktów. Konsekwentne stosowanie tych metodyk pozwala na zwiększenie współczynnika retencji użytkowników. Opisano wdrażanie zasad UX przy projektowaniu przepływów zadań, szkieletów i prototypów oraz techniki wykrywania luk w ścieżkach wędrówek użytkowników. Omówiono także konwencjonalne standardy dostępności witryn dla wszystkich użytkowników.

Najważniejsze zagadnienia:

UX: użytkownicy pokochają Twoją witrynę!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: UX for the Web Tłumaczenie: Maksymilian Gutowski ISBN: 978-83-283-4701-4 Copyright © Packt Publishing 2017. First published in the English language under the title ‘UX for the Web – (9781787128477)’ Polish edition copyright © 2018 by Helion SA All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz HELION SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. HELION SA ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/uxproj Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci O autorkach O recenzencie Wst(cid:218)p Rozdzia(cid:239) 1. Podstawy UX UX na pocz(cid:200)tku XX wieku UX od ka(cid:285)dej strony My(cid:258)lenie projektowe i projektowanie zorientowane na cz(cid:239)owieka (HCD) UX i dziedziny projektowania Cechy UX i UI Podsumowanie Rozdzia(cid:239) 2. Wyró(cid:285)nij si(cid:218) na tle konkurencji Wspó(cid:239)czesne kreowanie marki Studium przypadku — to(cid:285)samo(cid:258)(cid:202) a wizerunek marki — Jeep Kreowanie marki — motywy graficzne Kreowanie marki — osobowo(cid:258)(cid:202) Kreowanie marki — relacja W jaki sposób UX pozwala wyró(cid:285)ni(cid:202) mark(cid:218) na tle konkurencji? Przeprowadzenie analizy UX konkurencji B2B kontra B2C Studium przypadku — B2C i UX Studium przypadku — B2B i UX Podsumowanie 8 10 11 15 16 19 20 26 27 28 31 31 32 34 38 39 41 42 50 53 55 59 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 3. Tworzenie wi(cid:218)zi emocjonalnej z u(cid:285)ytkownikiem Tworzenie cyfrowej to(cid:285)samo(cid:258)ci, z któr(cid:200) u(cid:285)ytkownik mo(cid:285)e nawi(cid:200)za(cid:202) relacj(cid:218) Pos(cid:239)ugiwanie si(cid:218) jasnym j(cid:218)zykiem Utrzymywanie odpowiedniego tonu Poka(cid:285) ludzk(cid:200) twarz Nagrody wizualne Mikrointerakcje w UI Eksploracja UI i zach(cid:218)ty Kierowanie poprzez przewidywanie zachowa(cid:241) u(cid:285)ytkownika Podawanie u(cid:285)ytecznych informacji Budowanie zaufania i wiarygodno(cid:258)ci Podsumowanie Rozdzia(cid:239) 4. Zapewnianie u(cid:285)yteczno(cid:258)ci interfejsu u(cid:285)ytkownika (UI) Wprowadzenie do tematyki UI Psychologia koloru Ko(cid:239)o barw Barwy ciep(cid:239)e i zimne Symbolika barw Kolor a dost(cid:218)pno(cid:258)(cid:202) Najlepsze praktyki projektowe Wytyczne Material Design firmy Google iOS Human Interface Guidelines Studium przypadku — projektowanie UI witryn internetowych J(cid:218)zyk i semiotyka Najlepsze praktyki tworzenia czytelnej ikonografii Podsumowanie Rozdzia(cid:239) 5. Badania i analiza — solidny fundament Kategoryzacja i definiowanie rodzajów bada(cid:241) Badania ilo(cid:258)ciowe a jako(cid:258)ciowe Wybór etapu prac odpowiedniego do prowadzenia bada(cid:241) Opis metod bada(cid:241) UX Przygotowanie planu bada(cid:241) Sformu(cid:239)owanie pytania badawczego Przegl(cid:200)d aktualnego stanu wiedzy i literatury Wybór metod i planowanie logistyczne Prowadzenie bada(cid:241) Analiza danych Przedstawienie wyników Analizy eksperckie Analiza heurystyczna Audyt tre(cid:258)ci Techniki jako(cid:258)ciowe Wywiady Obserwacja 4 61 62 64 64 64 65 65 65 66 67 67 69 71 71 74 76 77 77 80 81 82 84 85 89 89 92 93 94 98 100 101 105 106 107 109 114 114 115 115 116 119 121 121 122 Poleć książkęKup książkę Spis tre(cid:286)ci Analiza materia(cid:239)u badawczego Przyk(cid:239)adowe badania etnograficzne — portal brokerski Techniki ilo(cid:258)ciowe Wykorzystanie statystyk Wybór testów statystycznych Podsumowanie Rozdzia(cid:239) 6. Przygotuj strategi(cid:218) UX — u(cid:285)ytkownicy i tre(cid:258)(cid:202) Tworzenie person kieruj(cid:200)cych strategi(cid:200) UX Charakterystyka u(cid:285)ytecznej persony Tworzenie solidnej architektury informacji Sortowanie kart Tworzenie mapy witryny Tworzenie w(cid:218)drówek u(cid:285)ytkownika Kluczowe komponenty w(cid:218)drówki u(cid:285)ytkownika Tworzenie przep(cid:239)ywów zada(cid:241) Kluczowe komponenty poprawnego przep(cid:239)ywu zada(cid:241) Podsumowanie Rozdzia(cid:239) 7. Wdro(cid:285)enie strategii UX za pomoc(cid:200) szkieletów i prototypów Tworzenie moodboardów i scenorysów Moodboardy Tworzenie moodboarda Scenorysy Tworzenie scenorysu Studium przypadku — tworzenie scenorysu Co, kiedy i jak prototypowa(cid:202)? Co i kiedy prototypowa(cid:202)? Jak prototypowa(cid:202)? Tworzenie szkieletów i prototypów interaktywnych Narz(cid:218)dzia do prototypowania Tworzenie szkieletu Tworzenie prototypu interaktywnego System kontroli wersji Tworzenie biblioteki wzorców Projektowanie z my(cid:258)l(cid:200) o responsywno(cid:258)ci i dost(cid:218)pno(cid:258)ci Podsumowanie 123 124 125 125 126 127 129 129 130 131 132 138 140 141 144 144 145 147 148 148 150 151 153 154 155 157 158 159 159 162 173 177 178 179 180 Znaczenie projektowania opartego na responsywno(cid:258)ci, dost(cid:218)pno(cid:258)ci i uniwersalno(cid:258)ci Projektowanie dla zró(cid:285)nicowanych technologii Rozdzia(cid:239) 8. Tworzenie produktu — urz(cid:200)dzenia, przegl(cid:200)darki i technologie asystuj(cid:200)ce 181 182 186 186 188 192 193 195 197 Projektowanie z my(cid:258)l(cid:200) o danych wej(cid:258)ciowych i wyj(cid:258)ciowych Responsywno(cid:258)(cid:202) Projektowanie na potrzeby ró(cid:285)nych przegl(cid:200)darek i systemów operacyjnych Projektowanie z my(cid:258)l(cid:200) o dost(cid:218)pno(cid:258)ci i technologiach asystuj(cid:200)cych Testowanie projektów z uwzgl(cid:218)dnieniem wielu technologii Podsumowanie 5 Poleć książkęKup książkę Spis tre(cid:286)ci Maksymalizacja warto(cid:258)ci testów u(cid:285)yteczno(cid:258)ci Planowanie, prowadzenie i analiza wyników testów u(cid:285)yteczno(cid:258)ci Rozdzia(cid:239) 9. Optymalizacja strategii UX za pomoc(cid:200) iteracyjnych testów u(cid:285)yteczno(cid:258)ci 199 200 202 204 221 224 228 230 233 234 Planowanie testów u(cid:285)yteczno(cid:258)ci Prowadzenie testów u(cid:285)yteczno(cid:258)ci Analizowanie i raportowanie wyników testów Inne formy testów u(cid:285)yteczno(cid:258)ci Skuteczna analityka — konstrukcja przydatnego testu A/B Wykorzystanie danych analitycznych w testach A/B Podsumowanie Rozdzia(cid:239) 10. Podstawy dost(cid:218)pno(cid:258)ci i p(cid:239)yn(cid:200)ce z niej korzy(cid:258)ci Definicja dost(cid:218)pno(cid:258)ci witryn internetowych Zaspokajanie tymczasowych i trwa(cid:239)ych szczególnych potrzeb Niepe(cid:239)nosprawno(cid:258)(cid:202) wzrokowa Niepe(cid:239)nosprawno(cid:258)(cid:202) s(cid:239)uchowa Niepe(cid:239)nosprawno(cid:258)(cid:202) motoryczna (ruchowa) Niepe(cid:239)nosprawno(cid:258)(cid:202) poznawcza (intelektualna) Niepe(cid:239)nosprawno(cid:258)(cid:202) neurologiczna Korzy(cid:258)ci p(cid:239)yn(cid:200)ce z zapewnienia dost(cid:218)pno(cid:258)ci produktu Prawne skutki niezapewnienia dost(cid:218)pno(cid:258)ci Technologie asystuj(cid:200)ce i ich rola w projektowaniu z my(cid:258)l(cid:200) o dost(cid:218)pno(cid:258)ci Testowanie dost(cid:218)pno(cid:258)ci Podsumowanie Rozdzia(cid:239) 11. Praktyczny przewodnik po dost(cid:218)pno(cid:258)ci Od czego zacz(cid:200)(cid:202)? Praktyczne wytyczne analizy dost(cid:218)pno(cid:258)ci witryny Przegl(cid:200)d WCAG 2.0 Percepcja Funkcjonalno(cid:258)(cid:202) Zrozumia(cid:239)o(cid:258)(cid:202) Rzetelno(cid:258)(cid:202) Przegl(cid:200)d WAI-ARIA Role W(cid:239)a(cid:258)ciwo(cid:258)ci i statusy Wymagania z zakresu dost(cid:218)pno(cid:258)ci z perspektywy projektowej Studium przypadku — analiza Booking.com pod k(cid:200)tem wymaga(cid:241) WCAG 2.0 Zanim si(cid:218) po(cid:285)egnamy Podsumowanie Skorowidz 6 235 236 237 238 239 239 239 240 240 241 242 244 245 247 247 248 250 250 253 255 256 257 257 257 258 260 262 263 265 Poleć książkęKup książkę 2 Wyró(cid:285)nij si(cid:218) na tle konkurencji Kreowanie marki zaistnia(cid:239)o wraz z pocz(cid:200)tkiem handlu. Marka by(cid:239)a pierwotnie symbolem repre- zentuj(cid:200)cym osob(cid:218) lub firm(cid:218), takim jak charakterystyczne logo lub chwytliwe has(cid:239)o. Rozwojowi nowoczesnego handlu towarzyszy(cid:239) jednocze(cid:258)nie rozwój marek. Ich kreowanie przesta(cid:239)o dotyczy(cid:202) samego wizualnego przedstawienia, a zacz(cid:218)(cid:239)o obejmowa(cid:202) sum(cid:218) komponentów decyduj(cid:200)cych o zadowalaj(cid:200)cej interakcji klienta z mark(cid:200). UX odgrywa kluczow(cid:200) rol(cid:218) w zapewnieniu sukcesu marki w(cid:239)a(cid:258)nie w odniesieniu do tej sumy komponentów. W tym rozdziale omówimy kontekst, w jakim UX oddzia(cid:239)uje na te komponenty, oraz wyja(cid:258)nimy, jak odró(cid:285)ni(cid:202) mark(cid:218) od marek konku- rencyjnych. Oto krótka lista tematów poruszonych w tym rozdziale: (cid:81) to(cid:285)samo(cid:258)(cid:202) a wizerunek marki; (cid:81) wizualno(cid:258)(cid:202), osobowo(cid:258)(cid:202) i relacje marki; (cid:81) rola UX w doskonaleniu to(cid:285)samo(cid:258)ci marki; (cid:81) jak wyró(cid:285)ni(cid:202) si(cid:218) na tle konkurencji; (cid:81) ró(cid:285)nice mi(cid:218)dzy B2B i B2C. Wspó(cid:239)czesne kreowanie marki Tradycyjne kreowanie marki oparte jest na osi(cid:200)gni(cid:218)ciu idealnej równowagi mi(cid:218)dzy to(cid:285)samo(cid:258)ci(cid:200) a wizerunkiem marki. To(cid:285)samo(cid:258)(cid:202) marki obejmuje widoczne elementy wizualne marki, takie jak jej nazwa, logo, typografia, kolorystyka oraz elementy graficzne wyró(cid:285)niaj(cid:200)ce j(cid:200) spo(cid:258)ród innych marek w my(cid:258)lach u(cid:285)ytkownika. Wizerunek marki jest natomiast po(cid:239)(cid:200)czeniem takiego wyobra(cid:285)e- nia z do(cid:258)wiadczeniami u(cid:285)ytkownika wyniesionymi z interakcji z mark(cid:200), a tak(cid:285)e z jego stosunkiem do to(cid:285)samo(cid:258)ci i warto(cid:258)ci wyznawanych przez mark(cid:218). Poleć książkęKup książkę UX w projektowaniu witryn internetowych We wspó(cid:239)czesnej epoce cyfrowej liczba interakcji odbiorców z ogólnodost(cid:218)pnymi markami zna- cz(cid:200)co wzros(cid:239)a ze wzgl(cid:218)du na nieograniczony dost(cid:218)p do informacji cyfrowej. Po raz pierwszy w historii u(cid:285)ytkownicy maj(cid:200) tak szeroki dost(cid:218)p do ró(cid:285)norakich informacji o marce. U(cid:285)ytkownik mo(cid:285)e przejrze(cid:202) wszystko, od reklam, przez wpisy blogowe, recenzje produktów, po innego rodzaju tre(cid:258)ci, na swoim komputerze lub telefonie. Ta rozleg(cid:239)a przestrze(cid:241) styczno(cid:258)ci u(cid:285)ytkownika z mark(cid:200) daje mu mo(cid:285)liwo(cid:258)(cid:202) formowania marek, z którymi wchodzi w interakcj(cid:218). Definicja marki musi si(cid:218) zmieni(cid:202) odpowiednio do owych przemian, tak aby uwzgl(cid:218)dnia(cid:239)a wra(cid:285)enia klienta, które staj(cid:200) si(cid:218) coraz istotniejszym aspektem samej marki. Oto definicja marki wed(cid:239)ug Nielsen and Norman Group: Marka jest subiektywnym postrzeganiem warto(cid:258)ci, opartym na sumie do(cid:258)wiadcze(cid:241) jednostki z produktem lub firm(cid:200), ostatecznie wp(cid:239)ywaj(cid:200)cym na jej nastawienie i decyzje konsumenckie. Widz(cid:200)c dojrza(cid:239)o(cid:258)(cid:202), z jak(cid:200) u(cid:285)ytkownik prowadzi interakcj(cid:218) z mark(cid:200), trzeba doj(cid:258)(cid:202) do wniosku, (cid:285)e marka nie jest okre(cid:258)lana wy(cid:239)(cid:200)cznie poprzez cz(cid:218)(cid:258)(cid:202) wspóln(cid:200) swojego wizerunku i to(cid:285)samo(cid:258)ci — tak jak sugerowa(cid:239)oby tradycyjne podej(cid:258)cie — lecz obejmuje te(cid:285) wszystkie elementy, które sk(cid:239)adaj(cid:200) si(cid:218) na wra(cid:285)enia klienta. U(cid:285)ytkownik postrzega mark(cid:218) poprzez motywy graficzne, takie jak logo, charakterystyczna typografia itp. Ponadto u(cid:285)ytkownik odnosi si(cid:218) do marki, kieruj(cid:200)c si(cid:218) jej osobowo(cid:258)ci(cid:200), czyli m.in. tonem, jaki przyjmuje w komunikacji. Istotna jest te(cid:285) relacja pomi(cid:218)dzy u(cid:285)ytkownikiem a mark(cid:200). Jak marka traktuje u(cid:285)ytkownika, kiedy ten wchodzi do sklepu lub dzwoni na infolini(cid:218)? Studium przypadku — to(cid:285)samo(cid:258)(cid:202) a wizerunek marki — Jeep Wszystkie marki maj(cid:200) (lub powinny mie(cid:202)) wytyczne dotycz(cid:200)ce u(cid:285)ywania marki, obejmuj(cid:200)ce podstawowe zasady zwi(cid:200)zane z kszta(cid:239)towaniem to(cid:285)samo(cid:258)ci i osobowo(cid:258)ci. Wytyczne mog(cid:200) dotyczy(cid:202) m.in. kolorystyki, typografii, ikonografii, ogólnego charakteru materia(cid:239)ów graficznych, g(cid:239)osu 32 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji (tonu, w jakim utrzymane s(cid:200) teksty i has(cid:239)a reklamowe) oraz warto(cid:258)ci marki (co jest dla niej wa(cid:285)ne). Sformu(cid:239)owanie ich pozwala zagwarantowa(cid:202), (cid:285)e marka zawsze b(cid:218)dzie reprezentowana spójnie i profesjonalnie, a ponadto sprawia, (cid:285)e wyobra(cid:285)enie u(cid:285)ytkownika o marce przystaje do jej to(cid:285)sa- mo(cid:258)ci. Oto kilka przyk(cid:239)adów z wytycznych markowych Jeepa: (cid:81) Wytyczne kolorystyczne: (cid:81) Logo prezentowane jest wy(cid:239)(cid:200)cznie w kolorach Jeep green i Jeep black; ka(cid:285)dy z nich okre(cid:258)lony jest warto(cid:258)ciami Pantone, heksadecymalnymi i RGB. (cid:81) Kolorystyka logo mo(cid:285)e by(cid:202) odwrócona, tj. bia(cid:239)e logo na tle Jeep green lub Jeep black. (cid:81) Wytyczne dotycz(cid:200)ce logo: (cid:81) Logo zawsze musi by(cid:202) prezentowane z symbolem znaku towarowego ®. (cid:81) Logo nie mo(cid:285)e by(cid:202) prezentowane z cieniem, przezroczysto(cid:258)ci(cid:200) lub jako element powtarzaj(cid:200)cego si(cid:218) wzoru. Oto warto(cid:258)(cid:202) marki Jeep podana na witrynie internetowej firmy: Nasze podstawowe warto(cid:258)ci s(cid:200) zapisane w DNA ka(cid:285)dego Jeepa. W(cid:239)a(cid:258)ciciele Jeepów od dawna wiedz(cid:200), (cid:285)e maksyma Go Anywhere. Do Anything® („Jed(cid:283), gdzie chcesz. Rób, co chcesz”) to nie tylko has(cid:239)o, ale sposób (cid:285)ycia. Has(cid:239)o „Go Anywhere. Do Anything” zach(cid:218)ca u(cid:285)ytkownika do stawiania sobie coraz nowszych wyzwa(cid:241) i uwierzenia, (cid:285)e nie ma (cid:285)adnych ogranicze(cid:241), a z Jeepem wszystko jest mo(cid:285)liwe. Dosko- nale ilustruj(cid:200) je towarzysz(cid:200)ce mu zdj(cid:218)cia Jeepów w dzikim terenie, które sugeruj(cid:200), (cid:285)e Jeepem mo(cid:285)na pojecha(cid:202), gdzie si(cid:218) tylko chce. Teren mo(cid:285)e by(cid:202) nieprzyjazny, ale nic nie powstrzyma klienta przed prze(cid:285)yciem wspania(cid:239)ej przygody. 33 Poleć książkęKup książkę UX w projektowaniu witryn internetowych Jasne jest, (cid:285)e wytyczne graficzne musz(cid:200) odzwierciedla(cid:202) warto(cid:258)ci marki, ale to zaledwie wierz- cho(cid:239)ek góry lodowej. Aktywno(cid:258)(cid:202) marki w mediach spo(cid:239)eczno(cid:258)ciowych i w (cid:285)yciu spo(cid:239)ecznym w ogóle te(cid:285) musi by(cid:202) z nimi zgodna. Przyk(cid:239)adowo: oferowane przez firm(cid:218) pakiety wycieczkowe z wyprawami offroad oraz znakomita obs(cid:239)uga klienta dodatkowo ugruntowuj(cid:200) wizerunek marki i wyobra(cid:285)enie klienta o niej. Kreowanie marki — motywy graficzne W ramach tworzenia wytycznych korzystania z marki nale(cid:285)y dopilnowa(cid:202), aby wszystkie ich aspekty — logo, typografia, kolorystyka, ikonografia itd. — uwzgl(cid:218)dnia(cid:239)y wszystkie mo(cid:285)liwe media, w jakich marka b(cid:218)dzie si(cid:218) pojawia(cid:202). We wspó(cid:239)czesnej epoce cyfrowej musimy mie(cid:202) pew- no(cid:258)(cid:202), (cid:285)e wytyczne b(cid:218)d(cid:200) elastyczne i przystosowane do ci(cid:200)gle zmieniaj(cid:200)cych si(cid:218) (cid:258)rodowisk, w któ- rych marka mo(cid:285)e (cid:285)y(cid:202). W dziedzinie wizualno(cid:258)ci UX d(cid:200)(cid:285)y do tego, aby marka by(cid:239)a wizualnie dostosowana do wszystkich mo(cid:285)liwych scenariuszy i platform, w jakich mo(cid:285)e wyst(cid:200)pi(cid:202): (cid:81) Logo. Podstawowe wytyczne projektowania logo bior(cid:200) pod uwag(cid:218) ró(cid:285)ne media — drukowane i cyfrowe — w których logo ma si(cid:218) pojawia(cid:202). Kolejnym czynnikiem jest kolor. Czy logo ma wykorzystywa(cid:202) pe(cid:239)n(cid:200) palet(cid:218) barw, czy sk(cid:239)ada(cid:202) si(cid:218) jedynie z koloru dodatkowego? Czy powinno sk(cid:239)ada(cid:202) si(cid:218) z jednolitych kolorów, czy zawiera(cid:202) gradienty? Wszystkie te czynniki s(cid:200) wa(cid:285)ne, ale uwzgl(cid:218)dnijmy jeszcze pewne kwestie UX: Czy logo jest wystarczaj(cid:200)co proste lub mo(cid:285)na je dodatkowo upro(cid:258)ci(cid:202), aby s(cid:239)u(cid:285)y(cid:239)o jako favicon? Favicon to ma(cid:239)e logo widoczne u góry karty w przegl(cid:200)darce, kiedy strona jest w niej otwarta. Favicon ma wymiary 16×16 pikseli lub 32×32 piksele, czyli do(cid:258)(cid:202) niewielkie. Zbyt szczegó(cid:239)owe logo mo(cid:285)e si(cid:218) w takiej skali rozmywa(cid:202) lub by(cid:202) wr(cid:218)cz nierozpoznawalne. Oto przyk(cid:239)ad czterech powszechnie rozpoznawalnych marek i ich standardowych logo: Oto jak przekszta(cid:239)cono je w favicony do u(cid:285)ycia w witrynach internetowych: 34 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji Przyjrzyjmy si(cid:218) im bli(cid:285)ej: (cid:81) Amazon poradzi(cid:239) sobie (cid:258)wietnie, (cid:239)(cid:200)cz(cid:200)c elementy w(cid:239)a(cid:258)ciwego logo — czarny tekst z pomara(cid:241)czow(cid:200) strza(cid:239)k(cid:200) — w prosty favicon, który od razu kojarzy si(cid:218) z mark(cid:200). Zawarcie tych elementów w bia(cid:239)ym polu dodatkowo wzmacnia charakter marki. (cid:81) Logo Microsoftu jest wystarczaj(cid:200)co proste, aby mo(cid:285)na go by(cid:239)o u(cid:285)y(cid:202) jako faviconu. Idealnym rozwi(cid:200)zaniem jest umieszczenie w logo ikony lub elementu typograficznego, którego mo(cid:285)na u(cid:285)y(cid:202) jako odr(cid:218)bnego, rozpoznawalnego elementu, tak jak w przypadku czterech kwadratów Microsoftu. (cid:81) Logo Starbucksa jest interesuj(cid:200)ce i charakterystyczne, ale zbyt skomplikowane, aby mo(cid:285)na je by(cid:239)o upro(cid:258)ci(cid:202) na potrzeby ni(cid:285)szych rozdzielczo(cid:258)ci. Favicon jest rozmyty i ma(cid:239)o rozpoznawalny, co zreszt(cid:200) wida(cid:202) na rysunku. Mo(cid:285)na natomiast stworzy(cid:202) uproszczon(cid:200) wersj(cid:218) obecnego logo na potrzeby faviconów, logo aplikacji i innych zastosowa(cid:241), np. u(cid:285)ywaj(cid:200)c samej gwiazdki na zielonym polu, tak jak na kolejnym rysunku. (cid:81) Logo Adidasa nadaje si(cid:218) zupe(cid:239)nie dobrze do wykorzystywania w mniejszych rozdzielczo(cid:258)ciach, jednak nie zosta(cid:239)o ono w(cid:239)a(cid:258)ciwie przystosowane do u(cid:285)ytkowania w sieci. Wystarczy u(cid:285)y(cid:202) trzech pasków, tak charakterystycznych dla tej marki, aby uzyska(cid:202) przejrzysty i rozpoznawalny favicon, tak jak na poni(cid:285)szym rysunku: Czy logo mo(cid:285)e si(cid:218) zmie(cid:258)ci(cid:202) w kwadratowym polu? Je(cid:258)li Twoja marka ma w(cid:239)asn(cid:200) aplikacj(cid:218) lub mo(cid:285)e tak(cid:200) mie(cid:202) w przysz(cid:239)o(cid:258)ci, to logo musi by(cid:202) skalowalne, tak aby mog(cid:239)o by(cid:202) sensownie wy(cid:258)wietlane na urz(cid:200)dzeniach u(cid:285)ywaj(cid:200)cych systemów iOS i Android, jako (cid:285)e wszystkie aplikacje uruchamia si(cid:218) poprzez dotkni(cid:218)cie ich ikon. Rozwi(cid:200)zanie jest jednakowe jak w przypadku faviconów, które równie(cid:285) musz(cid:200) by(cid:202) kwadratowe. (cid:81) Typografia. Typografia jest silnie zakorzeniona w drukarstwie, wobec czego od dawna zak(cid:239)adano, (cid:285)e litery maj(cid:200) pojawia(cid:202) si(cid:218) na fizycznej powierzchni i by(cid:202) odpowiednio du(cid:285)e z uwagi na czytelno(cid:258)(cid:202). We wspó(cid:239)czesnej erze cyfrowej musimy natomiast skoncentrowa(cid:202) si(cid:218) na mniejszych literach, które wy(cid:258)wietlane s(cid:200) na ekranach komputerów i urz(cid:200)dze(cid:241) mobilnych. Ze wzgl(cid:218)du na czas, jaki sp(cid:218)dzamy, korzystaj(cid:200)c z takich urz(cid:200)dze(cid:241), wspó(cid:239)czesna typografia stara si(cid:218) dopracowa(cid:202) czytelno(cid:258)(cid:202) tekstu i zadba(cid:202) o to, by oczy u(cid:285)ytkownika nie m(cid:218)czy(cid:239)y si(cid:218) nadmiernie. 35 Poleć książkęKup książkę UX w projektowaniu witryn internetowych Nale(cid:285)y u(cid:285)ywa(cid:202) prostych krojów pisma. Wi(cid:218)kszo(cid:258)(cid:202) ludzi patrzy w ekran komputera lub telefonu 3 – 10 godzin dziennie. Czytanie tekstu z ekranu mo(cid:285)e zatem nadmiernie m(cid:218)czy(cid:202) wzrok, je(cid:258)li krój pisma jest zbyt szczegó(cid:239)owy lub je(cid:258)li tekst jest za ma(cid:239)y na danym urz(cid:200)dzeniu. Kroje dziel(cid:200) si(cid:218) na dwa g(cid:239)ówne rodzaje: szeryfowe i bezszeryfowe. Poni(cid:285)ej widnieje jasny przyk(cid:239)ad ró(cid:285)nic pomi(cid:218)dzy tymi dwoma typami wraz z krótkim omówieniem tego, który lepiej si(cid:218) sprawdza w druku, a który na ekranie: Dobr(cid:200) praktyk(cid:200) jest korzystanie z webfontów tych krojów, których u(cid:285)ywasz w witrynie internetowej. Webfont jest fontem, który nie jest zainstalowany na komputerze u(cid:285)ytkownika przegl(cid:200)daj(cid:200)cego stron(cid:218), lecz który zostaje pobrany z podanego odno(cid:258)nika, gdy u(cid:285)ytkownik wchodzi na stron(cid:218). Stosowanie webfontów pozwala na wykorzystanie ró(cid:285)norakich krojów pisma, innych ni(cid:285) podstawowy Arial i Verdana, które zazwyczaj s(cid:200) domy(cid:258)lnie dost(cid:218)pne na komputerach osobistych. (cid:165)wietnym (cid:283)ród(cid:239)em niezliczonych webfontów jest serwis Google Fonts: https://fonts.google.com. (cid:81) Paleta barw. Paleta barw w wytycznych korzystania z marki jest prawdopodobnie tym elementem, który najtrudniej stworzy(cid:202). W zale(cid:285)no(cid:258)ci od medium, w którym marka b(cid:218)dzie prezentowana, zastosowane kolory mog(cid:200) mie(cid:202) du(cid:285)y wp(cid:239)yw na komunikaty, które trafiaj(cid:200) do u(cid:285)ytkownika. Czy Twoja paleta barw uwzgl(cid:218)dnia kolory przeznaczone dla powiadomie(cid:241) i ostrze(cid:285)e(cid:241) systemowych, takich jak komunikaty o b(cid:239)(cid:218)dach, które pojawiaj(cid:200) si(cid:218), gdy u(cid:285)ytkownik wype(cid:239)ni formularz niepoprawnie? Wydaje si(cid:218) to proste — komunikaty o b(cid:239)(cid:218)dach zwykle wy(cid:258)wietlaj(cid:200) si(cid:218) na czerwono. Co jednak, je(cid:258)li jednym z g(cid:239)ównych kolorów marki jest czerwony, tak jak w przypadku Virgin Atlantic? Na poni(cid:285)szym zrzucie formularz Check in (odprawa lotnicza) znajduje si(cid:218) w kontenerze o ró(cid:285)nych odcieniach czerwieni: 36 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji (cid:81) Ikony i tekst komunikatu o b(cid:239)(cid:218)dzie te(cid:285) s(cid:200) czerwone, przez co sam komunikat nie wyró(cid:285)nia si(cid:218) spo(cid:258)ród elementów formularza. A je(cid:258)li paleta barw sk(cid:239)ada si(cid:218) z wielu kolorów, takich jak czerwony, zielony, niebieski, pomara(cid:241)czowy i (cid:285)ó(cid:239)ty? Czy powiadomienia mog(cid:200) si(cid:218) jako(cid:258) wyró(cid:285)nia(cid:202) w UI? Czy u(cid:285)ytkownik z (cid:239)atwo(cid:258)ci(cid:200) zauwa(cid:285)y taki komunikat, czy zupe(cid:239)nie si(cid:218) on zgubi w(cid:258)ród wszystkich widocznych kolorów? Poni(cid:285)ej widnieje przyk(cid:239)ad formularza logowania Taco Bell, który sk(cid:239)ada si(cid:218) z czarnego, niebieskiego, szarego, turkusowego, ró(cid:285)owego i czerwonego. Jak wida(cid:202), komunikaty o b(cid:239)(cid:218)dach zupe(cid:239)nie si(cid:218) nie wyró(cid:285)niaj(cid:200) (zobacz rysunek na nast(cid:218)pnej stronie). Czy paleta barw sprzyja dost(cid:218)pno(cid:258)ci? Czy kolory s(cid:200) zgodne ze standardami Web Content Accessibility Guidelines (WCAG)? Zagadnienie projektowania z my(cid:258)l(cid:200) o dost(cid:218)pno(cid:258)ci omówimy szczegó(cid:239)owo w pó(cid:283)niejszych rozdzia(cid:239)ach. (cid:81) Ikonografia. Czy wykorzystana ikonografia jest zrozumia(cid:239)a dla wszystkich u(cid:285)ytkowników witryny, niezale(cid:285)nie od kompetencji kulturowych i technicznych? Nie b(cid:218)dziemy si(cid:218) ponownie zag(cid:239)(cid:218)bia(cid:202) w szczegó(cid:239)y, poniewa(cid:285) omówili(cid:258)my ju(cid:285) ten temat w poprzednim rozdziale. By(cid:239)o to zaledwie kilka zwi(cid:200)zanych z wizualno(cid:258)ci(cid:200) kwestii, które podkre(cid:258)laj(cid:200) istotno(cid:258)(cid:202) UX dla marki. Warstwa prezentacyjna marki jest wa(cid:285)na, a wra(cid:285)enia u(cid:285)ytkownika z interakcji z mark(cid:200) mog(cid:200) zdecydowa(cid:202) o sile relacji pomi(cid:218)dzy nimi. 37 Poleć książkęKup książkę UX w projektowaniu witryn internetowych Kreowanie marki — osobowo(cid:258)(cid:202) O marce stanowi jej esencja, czyli fundamentalne warto(cid:258)ci oraz wizja, czym ona w(cid:239)a(cid:258)ciwie jest i co obiecuje zapewni(cid:202) swoim klientom. Te cechy esencji marki s(cid:200) w istocie to(cid:285)same z w(cid:239)a(cid:258)ciwo- (cid:258)ciami opisanymi w propozycji warto(cid:258)ci produktu cyfrowego. O ile esencja marki dotyczy kwestii stosunkowo ogólnych i odnosi si(cid:218) do fundamentalnych warto(cid:258)ci osobowo(cid:258)ci marki, propozycj(cid:218) warto(cid:258)ci mo(cid:285)na sformu(cid:239)owa(cid:202) z my(cid:258)l(cid:200) o konkretnych zakresach marki, np. obietnicy warto(cid:258)ci, jak(cid:200) infolinia b(cid:200)d(cid:283) produkt (witryna internetowa lub aplikacja mobilna) zapewni u(cid:285)ytkownikowi. Mo(cid:285)e zatem istnie(cid:202) kilka propozycji warto(cid:258)ci, odnosz(cid:200)cych si(cid:218) do ró(cid:285)nych sposobów, w jakie obszary te — witryna internetowa, aplikacja mobilna b(cid:200)d(cid:283) infolinia — mog(cid:200) zaspokoi(cid:202) potrzeby u(cid:285)ytkowników. W dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki szczegó(cid:239)owo omówimy, jak stworzy(cid:202) propozycj(cid:218) war- to(cid:258)ci, oraz wska(cid:285)emy, jakie wynikaj(cid:200) z tego korzy(cid:258)ci. Na razie jednak nale(cid:285)y pami(cid:218)ta(cid:202), (cid:285)e esencja marki i propozycja warto(cid:258)ci produktu cyfrowego s(cid:200) istotne dla siebie nawzajem. Te dwa obszary powinny obejmowa(cid:202) mo(cid:285)liwie pokrywaj(cid:200)ce si(cid:218) zakresy, tak aby marka zachowa(cid:239)a autentyczno(cid:258)(cid:202), a wszystkie dzia(cid:239)y firmy pracowa(cid:239)y na rzecz osi(cid:200)gni(cid:218)cia wspólnego celu. 38 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji Marka jest osobowo(cid:258)ci(cid:200) maj(cid:200)c(cid:200) swoje fundamentalne warto(cid:258)ci oraz wizj(cid:218), obietnice warto(cid:258)ci, zdoln(cid:200) do interakcji z u(cid:285)ytkownikiem na ró(cid:285)nych poziomach. Podobnie jak ludzie w ró(cid:285)ny sposób komunikuj(cid:200) si(cid:218) ze sob(cid:200) w ró(cid:285)nych warunkach, marka ró(cid:285)nie zachowuje si(cid:218) w odniesieniu do u(cid:285)ytkownika w zale(cid:285)no(cid:258)ci od kontekstu. Kreowanie marki — relacja Relacja (cid:239)(cid:200)cz(cid:200)ca mark(cid:218) z u(cid:285)ytkownikiem rozci(cid:200)ga si(cid:218) od (cid:258)wiata cyfrowego po interakcje w rze- czywistym (cid:258)wiecie. Zbiór punktów kontaktu, czyli wszystkich mo(cid:285)liwych punktów, w których klient b(cid:218)dzie mia(cid:239) styczno(cid:258)(cid:202) z mark(cid:200) — np. witryny internetowej lub sklepu, w którym nab(cid:218)dzie produkt — okre(cid:258)la ogólne wra(cid:285)enia klienta (ang. customer experience — CX), przywo(cid:239)uje emocjonaln(cid:200) wi(cid:218)(cid:283) i wspomaga budowanie lojalnej relacji. W nast(cid:218)pnym rozdziale przyjrzymy si(cid:218) kwestii nawi(cid:200)zywania relacji emocjonalnych z u(cid:285)ytkownikami bardziej szczegó(cid:239)owo. Zachowa- nie marki w (cid:258)wiecie cyfrowym obejmuje interakcje z u(cid:285)ytkownikami na przestrzeni witryny, komunikacji e-mailowej i mediów spo(cid:239)eczno(cid:258)ciowych. Sposób, w jaki witryna dzieli si(cid:218) informa- cjami poprzez wykorzystanie obrazów, wytycznych marki i animacji UI, a tak(cid:285)e to, jak perso- nalizuje e-maile, utrzymuje okre(cid:258)lony ton komunikatów i cz(cid:218)stotliwo(cid:258)(cid:202) ich wysy(cid:239)ania, sk(cid:239)adaj(cid:200) si(cid:218) na ca(cid:239)o(cid:258)ciowy charakter relacji marki z klientem. Dzia(cid:239)alno(cid:258)(cid:202) w mediach spo(cid:239)eczno(cid:258)ciowych jest szczególnie skutecznym sposobem na tworzenie takich relacji, poniewa(cid:285) jest ona publiczna, a ponadto daje u(cid:285)ytkownikowi mo(cid:285)liwo(cid:258)(cid:202) bezpo(cid:258)redniego komunikowania si(cid:218) z mark(cid:200) na bardziej osobistym poziomie, tak jak z krewnymi i znajomymi. Zachowanie marki w rzeczywistym (cid:258)wiecie musi wspiera(cid:202) internetow(cid:200) osobowo(cid:258)(cid:202) marki oraz jej fundamentalne warto(cid:258)ci w ka(cid:285)dym mo(cid:285)liwym punkcie kontaktu u(cid:285)ytkownika z mark(cid:200). Apple jest zdecydowanie jednym z najlepszych przyk(cid:239)adów marki, która wyra(cid:283)nie dba o wra(cid:285)enia klienta i bardzo powa(cid:285)nie traktuje budowanie relacji z u(cid:285)ytkownikiem. Apple wie, (cid:285)e najmniej- szy szczegó(cid:239) mo(cid:285)e zdecydowa(cid:202) o dobrych wra(cid:285)eniach i zach(cid:218)ci(cid:202) u(cid:285)ytkownika do utrzymywania kontaktu. Przyjrzyjmy si(cid:218) cyklowi towarzysz(cid:200)cemu nabyciu produktu Apple i drobnym szczegó- (cid:239)om, które sk(cid:239)adaj(cid:200) si(cid:218) na „do(cid:258)wiadczenie Apple”: 39 Poleć książkęKup książkę UX w projektowaniu witryn internetowych 1. Sklepy iSpot Apple zwracaj(cid:200) na siebie uwag(cid:218). Ich wn(cid:218)trza s(cid:200) jasne, futurystyczne, a po bli(cid:285)szym przyjrzeniu si(cid:218) wida(cid:202), (cid:285)e ich kolorystyka sk(cid:239)ada si(cid:218) g(cid:239)ównie z neutralnych barw, takich jak biele i szaro(cid:258)ci. Biel symbolizuje doskona(cid:239)o(cid:258)(cid:202) i czysto(cid:258)(cid:202), co wywo(cid:239)uje u cz(cid:239)owieka pod(cid:258)wiadome zainteresowanie. Wystrój obejmuje te(cid:285) nieliczne niebieskie i fioletowe elementy, które odpowiednio uspokajaj(cid:200) i kojarz(cid:200) si(cid:218) z luksusem. Kolory te s(cid:200) te(cid:285) widoczne na standardowych obrazach t(cid:239)a urz(cid:200)dze(cid:241). Przebywanie w iSpot jest bardzo przyjemne. 2. Abstrahuj(cid:200)c od samego wygl(cid:200)du sklepu, personel iSpota jest pomocny i przyjazny. Pracownicy nie musz(cid:200) przekonywa(cid:202) klientów do zakupu produktów Apple, poniewa(cid:285) i tak ju(cid:285) ciesz(cid:200) si(cid:218) one wyj(cid:200)tkow(cid:200) reputacj(cid:200). Zadaniem pracownika jest jedynie pomóc klientowi sprawnie i przyjemnie dokona(cid:202) zakupu. 3. Po nabyciu urz(cid:200)dzenia „do(cid:258)wiadczenie Apple” przenosi si(cid:218) do domu. Opakowanie produktu jest nie tylko estetyczne, ale i bardzo praktyczne. Ka(cid:285)dy kabel, z(cid:239)(cid:200)cze i instrukcja znajduj(cid:200) si(cid:218) we w(cid:239)asnym zag(cid:239)(cid:218)bieniu lub kopercie. Ju(cid:285) samo rozpakowywanie produktu jest przyjemne. 4. Jako(cid:258)(cid:202) w(cid:239)a(cid:258)ciwego produktu jest od razu widoczna i namacalna. Jego obudowa jest przyjemna dla oka, stworzony jest z wyra(cid:283)nie trwa(cid:239)ych materia(cid:239)ów i jest wr(cid:218)cz aksamitny w dotyku. Ogólne wra(cid:285)enia z samej fizycznej styczno(cid:258)ci z produktem s(cid:200) pozytywne. 5. Wreszcie produkt jest funkcjonalny i (cid:239)atwy w u(cid:285)yciu. Kiedy uruchamiasz swojego nowego MacBooka po raz pierwszy, instalator przeprowadza Ci(cid:218) p(cid:239)ynnie przez wszystkie zwi(cid:200)zane z tym kroki. Nie potrzeba instalowa(cid:202) niczego dodatkowo, a ca(cid:239)y proces trwa mniej ni(cid:285) kwadrans. Obs(cid:239)uga systemu operacyjnego jest bezproblemowa. Jasne jest, (cid:285)e ka(cid:285)dy punkt kontaktu wp(cid:239)ywa na ogólne wra(cid:285)enia i relacj(cid:218) z mark(cid:200). Niemniej jed- nak w obliczu olbrzymiej konkurencyjno(cid:258)ci w bran(cid:285)y marka musi wyró(cid:285)nia(cid:202) si(cid:218) na tle konkurencji nie tylko pod wzgl(cid:218)dem samych produktów, które oferuje. To w(cid:239)a(cid:258)nie w tym zakresie UX pomaga markom wyró(cid:285)ni(cid:202) si(cid:218) na tle konkurencji. Sposób, w jaki u(cid:285)ytkownik wchodzi w kontakt z mark(cid:200), jest o wiele cenniejszy od cho(cid:202)by i najlepszego produktu. Z przegl(cid:200)du punktów styczno(cid:258)ci, które wymienili(cid:258)my w cyklu zakupu produktu Apple, jasno wynika, (cid:285)e ka(cid:285)dy z nich koncentruje si(cid:218) na wykorzystaniu konkretnego zmys(cid:239)u lub emocji, aby wp(cid:239)yn(cid:200)(cid:202) na wra(cid:285)enia klienta ze styczno(cid:258)ci z mark(cid:200). Co za tym idzie, dobry UX (wra(cid:285)enia u(cid:285)ytkownika z interakcji z produktem) wspiera dobry CX (wra(cid:285)enia klienta z punktów styczno(cid:258)ci w toku zakupu produktu), a to (cid:239)(cid:200)cznie przek(cid:239)ada si(cid:218) na pozytywne odczucia klienta zwi(cid:200)zane z mark(cid:200) (ang. brand experience — BX), które mog(cid:200) zapewni(cid:202) marce znakomite mo(cid:285)liwo(cid:258)ci rozwoju i niema(cid:239)y zysk (zobacz rysunek na nast(cid:218)pnej stronie). Cho(cid:202) w tej ksi(cid:200)(cid:285)ce zajmujemy si(cid:218) wy(cid:239)(cid:200)cznie produktami cyfrowymi, a konkretnie UX produktów internetowych, to zawsze nale(cid:285)y pami(cid:218)ta(cid:202), (cid:285)e UX przejawia si(cid:218) we wszystkim, co robisz dla u(cid:285)ytkownika. 40 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji W jaki sposób UX pozwala wyró(cid:285)ni(cid:202) mark(cid:218) na tle konkurencji? Analiza SWOT jest tradycyjn(cid:200) metod(cid:200) marketingow(cid:200), wykorzystywan(cid:200) w strategicznym planowa- niu biznesowym w celu wskazywania zarówno wewn(cid:218)trznych, jak i zewn(cid:218)trznych czynników, które mog(cid:200) mie(cid:202) wp(cid:239)yw na cele firmy; mo(cid:285)na je podzieli(cid:202) na mocne strony (ang. strengths), s(cid:239)abe strony (ang. weaknesses), szanse (ang. opportunities) i zagro(cid:285)enia (ang. threats). Pierwsze dwa czynniki wi(cid:200)(cid:285)(cid:200) si(cid:218) z wewn(cid:218)trznymi zasobami, takimi jak finanse, pracownicy, patenty i prawa autorskie, dzi(cid:218)ki którym firma mo(cid:285)e rozwija(cid:202) swoje mocne strony i niwelowa(cid:202) s(cid:239)abe. Ostatnie dwa czynniki wi(cid:200)(cid:285)(cid:200) si(cid:218) z wp(cid:239)ywami zewn(cid:218)trznymi, takimi jak trendy rynkowe, demografia czy przepisy dotycz(cid:200)ce ochrony (cid:258)rodowiska i dzia(cid:239)alno(cid:258)ci gospodarczej, które wp(cid:239)ywaj(cid:200) na wszystkie przedsi(cid:218)biorstwa (zobacz rysunek na nast(cid:218)pnej stronie). Tradycyjna analiza SWOT s(cid:239)u(cid:285)y za podstaw(cid:218) analizy w dziedzinie UX, gdzie odpowiednio podstawia si(cid:218) poszczególne komponenty. Mocne i s(cid:239)abe strony mog(cid:200) na przyk(cid:239)ad odnosi(cid:202) si(cid:218) do witryny, której funkcja wyszukiwania jest (cid:239)atwa w u(cid:285)yciu i zwraca trafne wyniki, ale która jedno- cze(cid:258)nie nie jest responsywna, co wp(cid:239)ywa niekorzystnie na ogólne wra(cid:285)enia z jej u(cid:285)ytkowania. S(cid:239)abo(cid:258)(cid:202) konkurenta daje Ci szans(cid:218), aby si(cid:218) wybi(cid:202) i zapewni(cid:202) lepsze wra(cid:285)enia, na przyk(cid:239)ad poprzez zapewnienie zgodno(cid:258)ci witryny ze standardami dost(cid:218)pno(cid:258)ci, a tym samym danie szerszej grupie odbiorców mo(cid:285)liwo(cid:258)ci korzystania z niej. Jednocze(cid:258)nie mocne strony konkurencji mog(cid:200) by(cid:202) dla Ciebie realnym zagro(cid:285)eniem. Je(cid:258)li na przyk(cid:239)ad Twoja witryna (cid:239)aduje si(cid:218) powoli, to u(cid:285)yt- kownicy ch(cid:218)tniej przejd(cid:200) do witryny konkurenta. 41 Poleć książkęKup książkę UX w projektowaniu witryn internetowych Przeprowadzenie analizy UX konkurencji Tradycyjna analiza konkurencji w dziedzinie marketingu koncentruje si(cid:218) na dostosowaniu stra- tegii marketingowej do wizji rozwoju biznesowego poprzez okre(cid:258)lenie zakresu i charakteru bran(cid:285)y, wskazanie bezpo(cid:258)rednich i po(cid:258)rednich konkurentów, a tak(cid:285)e okre(cid:258)lenie, jakie najwa(cid:285)- niejsze komponenty powinny by(cid:202) porównywane. Porównania mog(cid:200) dotyczy(cid:202) lokalizacji (umiejscowienia sklepów detalicznych), cen, jako(cid:258)ci produktów lub us(cid:239)ug b(cid:200)d(cid:283) wygody korzy- stania z oferty. Analiza UX konkurencji ró(cid:285)ni si(cid:218) od tradycyjnej analizy pod takim wzgl(cid:218)dem, (cid:285)e nie skupia si(cid:218) na zasobach zewn(cid:218)trznych i wewn(cid:218)trznych, ale raczej na ogólnym porównaniu konkurentów pod k(cid:200)tem ogólnych wra(cid:285)e(cid:241) u(cid:285)ytkownika i spe(cid:239)niania standardów u(cid:285)yteczno(cid:258)ci. Nie sprowadza si(cid:218) to jednak do samego porównywania witryn i oceniania zró(cid:285)nicowania b(cid:200)d(cid:283) przyst(cid:218)pno(cid:258)ci projektów, ale raczej do okre(cid:258)lenia, w jaki sposób witryna jest u(cid:285)ytkowana oraz czy interakcja sprawia u(cid:285)ytkownikowi przyjemno(cid:258)(cid:202). Pami(cid:218)taj, (cid:285)e trzeba te(cid:285) wzi(cid:200)(cid:202) pod uwag(cid:218) g(cid:239)(cid:218)bsze interakcje u(cid:285)ytkowników z witryn(cid:200), takie jak uczestnictwo w obiegu informacji zwi(cid:200)- zanym z wype(cid:239)nianiem formularzy, subskrybowaniem newsletterów, korzystaniem z chatbotów i tym podobnymi czynno(cid:258)ciami. Wszystkie te interaktywne komponenty sk(cid:239)adaj(cid:200) si(cid:218) na u(cid:285)ytecz- no(cid:258)(cid:202) witryny i wra(cid:285)enia zwi(cid:200)zane z korzystaniem z niej. Podczas analizy konkurencji kusz(cid:200)ce mo(cid:285)e si(cid:218) wyda(cid:202) bezpo(cid:258)rednie skopiowanie projektu i funkcjonalno(cid:258)ci witryny konkurenta lub jego strategii. Taka imitacja na pierwszy rzut oka wydaje si(cid:218) nieszkodliwa, ale niezwykle wa(cid:285)ne jest, aby d(cid:200)(cid:285)y(cid:202) do zapewnienia unikatowego UX. Rozwi(cid:200)zania, które sprawdzaj(cid:200) si(cid:218) w witrynie innej marki, mog(cid:200) wcale nie odpowiada(cid:202) Twojej witrynie. 42 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji Typowa analiza UX konkurencji obejmuje 2 – 4 konkurentów; wi(cid:218)ksza ich liczba mo(cid:285)e skompli- kowa(cid:202) ca(cid:239)y proces analityczny, co przek(cid:239)ada si(cid:218) na uzyskanie niewiarygodnych wyników. Kon- kurentów mo(cid:285)na podzieli(cid:202) na dwie kategorie: (cid:81) konkurenci bezpo(cid:258)redni: o takich samych produktach, us(cid:239)ugach lub u(cid:285)ytkownikach; (cid:81) konkurenci po(cid:258)redni: o podobnych produktach i us(cid:239)ugach, ale skierowanych do innych u(cid:285)ytkowników. Kryteria wykorzystywane w analizie UX konkurencji ró(cid:285)ni(cid:200) si(cid:218) w zale(cid:285)no(cid:258)ci od marki i poszuki- wanych informacji, wobec czego niekiedy wystarczy ogólna analiza, a kiedy indziej konieczne jest przeprowadzenie szczegó(cid:239)owej analizy, skoncentrowanej na najdrobniejszych interakcjach konkretnego komponentu. Tak czy inaczej poni(cid:285)sza lista kryteriów powinna s(cid:239)u(cid:285)y(cid:202) za podstaw(cid:218) ka(cid:285)dej analizy UX konkurencji: 1. Tre(cid:258)(cid:202). Tre(cid:258)(cid:202) witryny musi by(cid:202) u(cid:285)yteczna i ustrukturyzowana tak, aby u(cid:285)ytkownik móg(cid:239) z (cid:239)atwo(cid:258)ci(cid:200) znale(cid:283)(cid:202) to, czego szuka. Dotyczy to rozmieszczenia stron w obr(cid:218)bie witryny, uk(cid:239)adu menu nawigacyjnych i nazewnictwa nag(cid:239)ówków oraz oznacze(cid:241) linków i formularzy. 2. Estetyka. Estetyka witryny musi by(cid:202) zgodna z to(cid:285)samo(cid:258)ci(cid:200) marki, a zarazem by(cid:202) nowatorska i atrakcyjna. 3. Heurystyka. Dziesi(cid:218)(cid:202) heurystyk projektowania UI Norman and Nielsen Group odnosi si(cid:218) do kluczowych aspektów u(cid:285)yteczno(cid:258)ci, które nale(cid:285)y uwzgl(cid:218)dni(cid:202) w analizie. S(cid:200) to mi(cid:218)dzy innymi spójno(cid:258)(cid:202), widoczne powiadomienia systemowe, zapobieganie wyst(cid:218)powaniu b(cid:239)(cid:218)dów i zapewnienie u(cid:285)ytkownikowi kontroli. Pe(cid:239)n(cid:200) list(cid:218) dziesi(cid:218)ciu heurystyk omówimy bardziej szczegó(cid:239)owo w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki, a tymczasem mo(cid:285)esz je przejrze(cid:202) na stronie Norman and Nielsen Group: https://www.nngroup.com/articles/ten-usability-heuristics/. 4. Mikrointerakcje. Mikrointerakcjami nie nazywamy tandetnych animacji, które niczemu w rzeczywisto(cid:258)ci nie s(cid:239)u(cid:285)(cid:200), lecz sposoby, w jakie witryna reaguje na dzia(cid:239)ania u(cid:285)ytkownika. Przyk(cid:239)adowo: czy panele nawigacyjne wysuwaj(cid:200) si(cid:218) p(cid:239)ynnie? Czy po prostu nagle pojawiaj(cid:200) si(cid:218) na ekranie? 5. Obs(cid:239)uga klienta. Jak szybko obs(cid:239)uga odpowiada na wys(cid:239)any przez klienta formularz z pro(cid:258)b(cid:200) o wycen(cid:218) us(cid:239)ugi? Niektóre witryny maj(cid:200) komponent chatowy w prawym dolnym rogu ekranu. Jak bardzo pomocna jest osoba odpowiadaj(cid:200)ca na pytania zadawane przez u(cid:285)ytkownika tym kana(cid:239)em? Jednym z czynników, które mog(cid:200) zniekszta(cid:239)ci(cid:202) wyniki analizy UX konkurencji, jest powierzenie przeprowadzenia analizy osobie o ograniczonej znajomo(cid:258)ci rynku lub marki. Przydzielenie wi(cid:218)cej ni(cid:285) jednej osoby do przeprowadzenia ewaluacji pozwala na uwzgl(cid:218)dnienie ró(cid:285)nych punktów widzenia i unikni(cid:218)cie wyst(cid:200)pienia tendencyjnych rezultatów. Warto te(cid:285) wzi(cid:200)(cid:202) pod uwag(cid:218), (cid:285)e bran(cid:285)a ci(cid:200)gle si(cid:218) rozwija. Marki ci(cid:200)gle doskonal(cid:200) swoje produkty i us(cid:239)ugi, wymy(cid:258)laj(cid:200) coraz to nowsze sposoby na ich promowanie, rozpoczynaj(cid:200) kolejne kampanie reklamowe i tak dalej. Analizy UX konkurencji trzeba zatem prowadzi(cid:202) regularnie, aby zebrane informacje pozostawa(cid:239)y aktualne. 43 Poleć książkęKup książkę UX w projektowaniu witryn internetowych Studium przypadku — analiza UX konkurencji w bran(cid:285)y fastfoodowej W tym studium przypadku zajmiemy si(cid:218) bran(cid:285)(cid:200) fastfoodow(cid:200). Zosta(cid:239)e(cid:258) w(cid:239)a(cid:258)nie zatrudniony przez McDonald’s, aby przeprowadzi(cid:202) analiz(cid:218) UX witryny firmowej. Musisz mi(cid:218)dzy innymi okre(cid:258)li(cid:202), czy witryna McDonald’s mo(cid:285)e si(cid:218) mierzy(cid:202) z witrynami konkurentów. 1. Wska(cid:285) konkurentów. Poni(cid:285)ej widniej(cid:200) zrzuty ekranu ze stron g(cid:239)ównych witryn konkurentów uwzgl(cid:218)dnionych w analizie. Pami(cid:218)taj, (cid:285)e od napisania tej ksi(cid:200)(cid:285)ki do jej wydania min(cid:218)(cid:239)o troch(cid:218) czasu, wi(cid:218)c przedstawione tutaj projekty mog(cid:239)y ulec zmianie. Cho(cid:202) mogliby(cid:258)my uwzgl(cid:218)dni(cid:202) wielu ró(cid:285)nych konkurentów, postanowili(cid:258)my skoncentrowa(cid:202) si(cid:218) na Burger Kingu jako konkurencie bezpo(cid:258)rednim i KFC jako konkurencie po(cid:258)rednim. Burger King jest konkurentem bezpo(cid:258)rednim, poniewa(cid:285) zarówno Burger King, jak i McDonald’s oferuj(cid:200) praktycznie takie same dania, czyli hamburgery wo(cid:239)owe i z kurczaka z frytkami i napojami. 44 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji KFC jest konkurentem po(cid:258)rednim, poniewa(cid:285) jest sieci(cid:200) fastfoodow(cid:200) z ofert(cid:200) skierowan(cid:200) do tego samego klienta, ale serwuje jedynie dania z kurczaka, bez wo(cid:239)owiny. 2. Tre(cid:258)(cid:202) i nawigacja. G(cid:239)ówna nawigacja McDonald’s obejmuje wiele stosunkowo ma(cid:239)ych oznacze(cid:241), które mog(cid:200) by(cid:202) dezorientuj(cid:200)ce dla u(cid:285)ytkownika. Bia(cid:239)y tekst na czarnym tle jest ma(cid:239)o czytelny, wobec czego trudno odró(cid:285)ni(cid:202) od siebie poszczególne linki. Po klikni(cid:218)ciu odno(cid:258)nika przegl(cid:200)darka wczytuje now(cid:200) stron(cid:218), na której trzeba poczeka(cid:202) na wczytanie si(cid:218) obrazków, co utrudnia poruszanie si(cid:218) po witrynie. G(cid:239)ówna nawigacja Burger Kinga jest czytelna i przejrzysta. Typografia pasuje do to(cid:285)samo(cid:258)ci marki, a poruszanie si(cid:218) po witrynie nie sprawia problemów. Tre(cid:258)(cid:202) witryny KFC jest jasno skategoryzowana, a ka(cid:285)dy produkt ma w(cid:239)asn(cid:200) stron(cid:218) z istotnymi informacjami. Ró(cid:285)nica kolorystyczna linków w zale(cid:285)no(cid:258)ci od ich aktywno(cid:258)ci i nieaktywno(cid:258)ci (czarny i szary) jasno wskazuje, gdzie u(cid:285)ytkownik si(cid:218) znajduje. 45 Poleć książkęKup książkę UX w projektowaniu witryn internetowych 3. Estetyka i styl. Kolorystyka witryny McDonald’s nie wzmacnia wizerunku marki. Strona g(cid:239)ówna jest do(cid:258)(cid:202) bezbarwna i jedynie logo jest kolorowe. Ponadto po wej(cid:258)ciu na stron(cid:218) u(cid:285)ytkownik w pierwszej kolejno(cid:258)ci widzi napoje, a nie soczystego hamburgera. Hero image (obrazek g(cid:239)ówny) móg(cid:239)by by(cid:202) bardziej zach(cid:218)caj(cid:200)cy. Niemniej jednak produkty s(cid:200) zaprezentowane do(cid:258)(cid:202) apetycznie. Promocje od razu s(cid:200) widoczne i przedstawione nietuzinkowo. W witrynie Burger Kinga kolorystyka jest wykorzystana znakomicie. Marka jest widoczna, a hero image jest jasny i zach(cid:218)caj(cid:200)cy. Hamburgery sfotografowane s(cid:200) pod nieco innym k(cid:200)tem ni(cid:285) zwykle, aby mo(cid:285)na by(cid:239)o zobaczy(cid:202) ich sk(cid:239)adniki. Produkty wy(cid:258)wietlane s(cid:200) na bia(cid:239)ym tle, dzi(cid:218)ki czemu bardziej si(cid:218) wyró(cid:285)niaj(cid:200). 46 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji Promocje ukazane s(cid:200) w tradycyjnym, „ulotkowym” stylu i przedstawiaj(cid:200) zapisan(cid:200) du(cid:285)ym tekstem cen(cid:218) wraz z wezwaniem do dzia(cid:239)ania (ang. call to action — CTA). To(cid:285)samo(cid:258)(cid:202) marki KFC wspieraj(cid:200) elementy wizualne. Paleta kolorystyczna jest trafna i pomaga w ukazaniu pe(cid:239)nego wachlarza oferowanych produktów. KFC równie(cid:285) przedstawia swoje produkty na bia(cid:239)ym tle, ale promocje nie s(cid:200) tak wyra(cid:283)nie wyeksponowane jak u konkurencji — s(cid:200) ukryte w g(cid:239)ównym pasku nawigacyjnym. 47 Poleć książkęKup książkę UX w projektowaniu witryn internetowych 4. Heurystyka. Walidacja formularza McDonald’s obejmuje zrozumia(cid:239)e powiadomienia, które wskazuj(cid:200) u(cid:285)ytkownikowi, co zrobi(cid:239) nie tak i jakie informacje powinien poda(cid:202). Niemniej jednak uk(cid:239)ad witryny nie jest prosty, a nadmiar elementów graficznych mo(cid:285)e odci(cid:200)ga(cid:202) u(cid:285)ytkownika od tego, czego szuka. Witryna Burger Kinga jest prosta i w przewa(cid:285)aj(cid:200)cej mierze spójna, wobec czego u(cid:285)ytkownik zawsze wie, gdzie si(cid:218) znajduje i na co patrzy. Nie ma (cid:285)adnych punktów, w których u(cid:285)ytkownik móg(cid:239)by wyj(cid:258)(cid:202) poza ograniczenia narzucone przez system interakcji, wobec czego nie wy(cid:258)wietlaj(cid:200) si(cid:218) (cid:285)adne powiadomienia systemowe. Interakcja z witryn(cid:200) KFC jest do(cid:258)(cid:202) spójna, cho(cid:202) akurat tam, gdzie pojawiaj(cid:200) si(cid:218) powiadomienia w rodzaju komunikatów o b(cid:239)(cid:218)dach w formularzach, to ich tre(cid:258)(cid:202) i stylizacja mog(cid:239)yby by(cid:202) ja(cid:258)niejsze. Dobrym rozwi(cid:200)zaniem by(cid:239)oby wy(cid:258)wietlenie komunikatu „Wpisz swoje imi(cid:218)” zamiast „This is a mandatory field” („To pole jest obowi(cid:200)zkowe”), który brzmi bardzo bezosobowo. 5. Animacje UI. W witrynie McDonald’s nie ma praktycznie (cid:285)adnych animacji UI poza rozszerzeniem g(cid:239)ównego menu nawigacyjnego. Uk(cid:239)ad witryny „skacze”, kiedy u(cid:285)ytkownik porusza si(cid:218) po stronach, i brakuje p(cid:239)ynnych przej(cid:258)(cid:202) pomi(cid:218)dzy nimi. 48 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji Animacji UI nie ma te(cid:285) w witrynie Burger Kinga, z wyj(cid:200)tkiem karuzeli na stronie g(cid:239)ównej. Przej(cid:258)cie mi(cid:218)dzy stronami nast(cid:218)puje nagle i strony w zwi(cid:200)zku z tym „przeskakuj(cid:200)”. KFC ma najlepsze animacje UI spo(cid:258)ród wszystkich marek. Zak(cid:239)adki z ró(cid:285)nymi produktami otwieraj(cid:200) si(cid:218) w przewidywalnej kolejno(cid:258)ci, a je(cid:258)li pobieranie obrazów trwa nieco d(cid:239)u(cid:285)ej, pojawia si(cid:218) ekran (cid:239)adowania. Na podstawie omówionych powy(cid:285)ej ogólnych kategorii mo(cid:285)na sporz(cid:200)dzi(cid:202) tabel(cid:218), która widnieje poni(cid:285)ej. Pami(cid:218)taj, (cid:285)e wszystkie te kategorie mo(cid:285)na omówi(cid:202) o wiele bardziej szczegó(cid:239)owo, a tutaj mamy jedynie do czynienia ze studium przypadku, którego zadaniem jest pokaza(cid:202) Ci, jak samo- dzielnie rozpocz(cid:200)(cid:202) analiz(cid:218) konkurencji. Poni(cid:285)sza lista s(cid:239)u(cid:285)y do obliczenia wyników w tabeli. Mo(cid:285)esz zatem samodzielnie rozrysowa(cid:202) tabel(cid:218) i okre(cid:258)li(cid:202) w(cid:239)asn(cid:200) punktacj(cid:218) na potrzeby osób od- powiedzialnych za przeprowadzenie ewaluacji: (cid:81) 1 – 3: (cid:81) 1: (cid:191)aden z elementów nie jest obecny u konkurenta. (cid:81) 2: U konkurenta obecnych jest 20 wymaganych elementów, ale zosta(cid:239)y s(cid:239)abo wykonane. (cid:81) 3: U konkurenta obecnych jest 20 wymaganych elementów, które zosta(cid:239)y dobrze wykonane. (cid:81) 4 – 7: (cid:81) 4: U konkurenta obecnych jest 30 – 45 wymaganych elementów, których wykonanie jest cz(cid:218)(cid:258)ciowo bez zarzutu, ale cz(cid:218)(cid:258)ciowo pozostawia nieco do (cid:285)yczenia. (cid:81) 5: U konkurenta obecnych jest 45 – 60 wymaganych elementów, których wykonanie jest cz(cid:218)(cid:258)ciowo bez zarzutu, ale cz(cid:218)(cid:258)ciowo pozostawia nieco do (cid:285)yczenia. (cid:81) 6: U konkurenta obecnych jest 60 – 70 wymaganych elementów, których wykonanie jest cz(cid:218)(cid:258)ciowo bez zarzutu, ale cz(cid:218)(cid:258)ciowo pozostawia nieco do (cid:285)yczenia. (cid:81) 7: U konkurenta obecnych jest 70 – 80 wymaganych elementów, których wykonanie jest cz(cid:218)(cid:258)ciowo bez zarzutu, ale cz(cid:218)(cid:258)ciowo pozostawia nieco do (cid:285)yczenia. (cid:81) 8 – 10: (cid:81) 8: U konkurenta obecnych jest 80 wymaganych elementów, których wykonanie pozostawia nieco do (cid:285)yczenia. (cid:81) 9: U konkurenta obecnych jest 90 wymaganych elementów, które zosta(cid:239)y dobrze wykonane. (cid:81) 10: U konkurenta obecne s(cid:200) wszystkie wymagane elementy i zosta(cid:239)y dobrze wykonane. 49 Poleć książkęKup książkę UX w projektowaniu witryn internetowych McDonald’s Burger King Tre(cid:258)(cid:202) i nawigacja Estetyka i styl Heurystyka Animacja UI 5 6 5 3 4,7 9 9 5 2 6,2 KFC 9 9 5 8 7,7 Jak wida(cid:202) w wytycznych punktacyjnych, w tym studium przypadku dobrze wykonane elementy oceniali(cid:258)my wy(cid:285)ej ni(cid:285) elementy liczniejsze, ale wykonane s(cid:239)abiej. W kontek(cid:258)cie UX jako(cid:258)(cid:202) jest wa(cid:285)niejsza od ilo(cid:258)ci. Lepiej wprowadzi(cid:202) mniej funkcji, ale wdro(cid:285)y(cid:202) je poprawnie, zamiast stwo- rzy(cid:202) wiele funkcji, które nie dzia(cid:239)aj(cid:200) w(cid:239)a(cid:258)ciwie i niekorzystnie wp(cid:239)ywaj(cid:200) na wra(cid:285)enia u(cid:285)ytkownika. B2B kontra B2C Jedn(cid:200) z pierwszych rzeczy, które nale(cid:285)y uwzgl(cid:218)dni(cid:202) podczas projektowania witryny handlu elektronicznego, jest docelowy odbiorca. Czy oferta ma by(cid:202) skierowana do firm, czy do indywidu- alnych konsumentów? Projektowanie z my(cid:258)l(cid:200) o B2B (ang. business-to-business) ró(cid:285)ni si(cid:218) od pro- jektowania na potrzeby sprzeda(cid:285)y B2C (ang. business-to-consumer). W ostatecznym rozrachunku obydwa rodzaje nabywców to ludzie, wobec czego i tak nale(cid:285)y przestrzega(cid:202) tych samych, podsta- wowych zasad UX. Konieczne jest natomiast dostosowanie ró(cid:285)nych aspektów UX odpowied- nio do tego, czy u(cid:285)ytkownik jest w rzeczywisto(cid:258)ci grup(cid:200) osób (B2B), czy jednostk(cid:200) (B2C): (cid:81) W(cid:239)a(cid:258)ciwo(cid:258)ci B2C: (cid:81) W przypadku B2C jedna osoba odpowiada za podj(cid:218)cie decyzji i na ogó(cid:239) nie trwa to d(cid:239)ugo. (cid:81) Zakup B2C jest zazwyczaj silnie umotywowany emocjonalnie, poniewa(cid:285) u(cid:285)ytkownik kupuje produkt lub us(cid:239)ug(cid:218) dla siebie lub dla kogo(cid:258) znajomego. Wizerunek marki odgrywa zatem kluczow(cid:200) rol(cid:218), wp(cid:239)ywaj(cid:200)c na emocje u(cid:285)ytkownika i jego decyzj(cid:218). (cid:81) Produkt jest zazwyczaj nieskomplikowany i (cid:239)atwo dost(cid:218)pny. (cid:81) W przypadku (cid:239)atwo dost(cid:218)pnych produktów struktura cenowa jest zazwyczaj prosta. Kszta(cid:239)towanie cen jest przejrzyste, a u(cid:285)ytkownik wie z góry, ile dany produkt lub us(cid:239)uga b(cid:218)dzie kosztowa(cid:202). Dodatkowe koszty, na przyk(cid:239)ad zwi(cid:200)zane z dostaw(cid:200), zawsze s(cid:200) widoczne w sklepach internetowych, a ponadto u(cid:285)ytkownik mo(cid:285)e dobra(cid:202) do swojego zakupu dodatki, takie jak torba przy zakupie laptopa. Wi(cid:218)ksze wydatki pozwalaj(cid:200) te(cid:285) na skorzystanie z rabatów lub do(cid:239)(cid:200)czenie do programu lojalno(cid:258)ciowego. U(cid:285)ytkownik wie z wyprzedzeniem, ile dany artyku(cid:239) b(cid:218)dzie kosztowa(cid:202), kiedy podejmuje decyzj(cid:218). (cid:81) Przebieg zakupów jest nieskomplikowany. U(cid:285)ytkownik wybiera produkt lub us(cid:239)ug(cid:218), podaje dane osobowe, takie jak adres dostawy, i dokonuje op(cid:239)aty. 50 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji Poniewa(cid:285) u(cid:285)ytkownik B2C mo(cid:285)e skorzysta(cid:202) z ró(cid:285)norakich serwisów, na jego decyzj(cid:218) w sprawie dokonania zakupu w jednym konkretnym sklepie bardzo silnie wp(cid:239)ywaj(cid:200) czynniki takie jak marka, ceny i UX witryny. U(cid:285)ytkownicy nie wracaj(cid:200) do serwisów z czasoch(cid:239)onnymi i nadmiernie rozbudowanymi procesami potwierdzenia zakupu ani nie zamierzaj(cid:200) p(cid:239)aci(cid:202) wi(cid:218)cej za co(cid:258), co mog(cid:200) dosta(cid:202) taniej w innym serwisie, je(cid:258)li marka danej witryny nie jest solidna. Lojalno(cid:258)(cid:202) wobec marki odgrywa wa(cid:285)n(cid:200) rol(cid:218) w procesie decyzyjnym u(cid:285)ytkownika B2C i zazwyczaj idzie rami(cid:218) w rami(cid:218) z UX. (cid:81) W(cid:239)a(cid:258)ciwo(cid:258)ci B2B: (cid:81) W przypadku B2B to grupa jednostek odpowiada za podj(cid:218)cie ostatecznej decyzji, a trwa to o wiele d(cid:239)u(cid:285)ej ni(cid:285) w przypadku B2C, poniewa(cid:285) decyzja musi przej(cid:258)(cid:202) przez firmowe kana(cid:239)y obiegu informacji i zosta(cid:202) zatwierdzona przez wi(cid:218)cej ni(cid:285) jedn(cid:200) osob(cid:218). Ta grupa jednostek dzieli si(cid:218) na wybieraj(cid:200)cych i u(cid:285)ytkowników. U(cid:285)ytkownicy to ci pracownicy organizacji, którzy b(cid:218)d(cid:200) korzysta(cid:202) z produktu lub us(cid:239)ugi, podczas gdy wybieraj(cid:200)cy decyduj(cid:200) o tym, czy zakup rzeczywi(cid:258)cie jest konieczny, i zatwierdzaj(cid:200) go. Na ogó(cid:239) to u(cid:285)ytkownik musi uzasadni(cid:202) potrzeb(cid:218) zakupienia produktu lub us(cid:239)ugi, wobec czego nale(cid:285)y dopilnowa(cid:202), aby w witrynie znalaz(cid:239)y si(cid:218) tre(cid:258)ci skierowane zarówno do u(cid:285)ytkowników, jak i wybieraj(cid:200)cych. (cid:81) Zakup B2B nie jest umotywowany emocjonalnie o tyle, (cid:285)e nie wynika z osobistych preferencji czy impulsywnej konsumpcji, lecz opiera si(cid:218) raczej na poczuciu odpowiedzialno(cid:258)ci z uwzgl(cid:218)dnieniem tego, w jaki sposób decyzja wp(cid:239)ynie na zespó(cid:239). (cid:81) Produkt lub us(cid:239)uga zazwyczaj cechuj(cid:200) si(cid:218) du(cid:285)(cid:200) z(cid:239)o(cid:285)ono(cid:258)ci(cid:200). Jednym z czynników decyduj(cid:200)cych o z(cid:239)o(cid:285)ono(cid:258)ci takich produktów jest liczba osób, które b(cid:218)d(cid:200) z nich korzysta(cid:202), co wp(cid:239)ywa te(cid:285) na cen(cid:218) licencji. Cena jednej licencji mo(cid:285)e by(cid:202) inna w przypadku 5 – 10 u(cid:285)ytkowników, 30 u(cid:285)ytkowników i nieograniczonej liczby u(cid:285)ytkowników. Innym wa(cid:285)nym czynnikiem jest czas. Jak d(cid:239)ugo takie licencje maj(cid:200) by(cid:202) wa(cid:285)ne? Miesi(cid:200)c? Rok? Przez nieograniczony czas? W przypadku wi(cid:218)kszo(cid:258)ci produktów i us(cid:239)ug u(cid:285)ytkownik B2B mo(cid:285)e zdecydowa(cid:202) si(cid:218) na zakup dodatkowej obs(cid:239)ugi i us(cid:239)ug konserwacyjnych, co komplikuje sprawy. (cid:81) Struktura cenowa musi zatem uwzgl(cid:218)dnia(cid:202) te wszystkie komponenty produktów i us(cid:239)ug, co sprawia, (cid:285)e jest ona do(cid:258)(cid:202) skomplikowana, pomijaj(cid:200)c sam fakt, (cid:285)e produkty B2B s(cid:200) z regu(cid:239)y znacznie dro(cid:285)sze. (cid:81) W przypadku z(cid:239)o(cid:285)onych systemów cenowych proces nabywczy musi uwzgl(cid:218)dnia(cid:202) wszystkie kombinacje, z których u(cid:285)ytkownik B2B mo(cid:285)e skorzysta(cid:202) w celu sformu(cid:239)owania odpowiedniej dla siebie oferty. Ponadto konieczne jest podanie dodatkowych informacji, takich jak dane do faktury, numery ewidencyjne i tym podobne, co sprawia, (cid:285)e zatwierdzanie zakupu jest o wiele bardziej rozbudowanym procesem ni(cid:285) w przypadku B2C. U(cid:285)ytkownikowi B2B zale(cid:285)y g(cid:239)ównie na przyst(cid:218)pnych wycenach i jako(cid:258)ci produktu lub us(cid:239)ugi, co oznacza, (cid:285)e mo(cid:285)liwo(cid:258)(cid:202) sformu(cid:239)owania dostosowanej do w(cid:239)asnych potrzeb i zasobów finanso- wych oferty jest istotnym czynnikiem, wp(cid:239)ywaj(cid:200)cym na decyzj(cid:218). (cid:191)adna firma nie zgodzi si(cid:218) zaku- pi(cid:202) us(cid:239)ugi, z której nie b(cid:218)dzie korzysta(cid:202) w stu procentach. Lojalno(cid:258)(cid:202) wobec marki te(cid:285) odgrywa istotn(cid:200) rol(cid:218) w procesie decyzyjnym, lecz wygl(cid:200)da to inaczej ni(cid:285) w przypadku u(cid:285)ytkownika B2C. 51 Poleć książkęKup książkę UX w projektowaniu witryn internetowych Dla u(cid:285)ytkownika B2B istotne jest prowadzenie interesów z mark(cid:200), która oferuje elastyczno(cid:258)(cid:202) w doborze produktów i us(cid:239)ug, a tak(cid:285)e znakomit(cid:200) obs(cid:239)ug(cid:218) klienta. Oto kilka kluczowych kwestii, które nale(cid:285)y uwzgl(cid:218)dni(cid:202) przy zamieszczaniu w witrynie tre(cid:258)ci pomocnych dla zainteresowanego zakupem klienta B2B: (cid:81) Pomocne tre(cid:258)ci. U(cid:285)ytkownikowi, który dopiero zaczyna rozgl(cid:200)da(cid:202) si(cid:218) za produktem lub us(cid:239)ug(cid:200), bardzo przydatne mog(cid:200) si(cid:218) okaza(cid:202) opisy oferowanych rozwi(cid:200)za(cid:241) wraz z dodatkowymi tre(cid:258)ciami w rodzaju studiów przypadków, dokumentów technicznych i poradników nabywcy. (cid:81) Tre(cid:258)ci analityczne. Przedstaw konkretne informacje i dane analityczne, aby umo(cid:285)liwi(cid:202) u(cid:285)ytkownikowi porównanie Twoich produktów i us(cid:239)ug z ofert(cid:200) konkurencji. (cid:81) Wspó(cid:239)dzielenie tre(cid:258)ci. Poniewa(cid:285) za podj(cid:218)cie decyzji o nabyciu odpowiada ca(cid:239)a grupa decydentów, u(cid:285)ytkownik prawdopodobnie b(cid:218)dzie musia(cid:239) podzieli(cid:202) si(cid:218) z nimi istotnymi informacjami, aby przekona(cid:202) ich do korzy(cid:258)ci p(cid:239)yn(cid:200)cych z zakupu danego produktu lub us(cid:239)ugi. Daj mu mo(cid:285)liwo(cid:258)(cid:202) udost(cid:218)pnienia innym informacji o produktach, recenzji i zawarto(cid:258)ci koszyka. Skoro ju(cid:285) wskazali(cid:258)my g(cid:239)ówne cechy u(cid:285)ytkowników B2C i B2B, przyjrzyjmy si(cid:218) podej(cid:258)ciom w(cid:239)a- (cid:258)ciwym do projektowania z my(cid:258)l(cid:200) o ich potrzebach. Projektowanie dla B2C: (cid:81) Strategia tre(cid:258)ci powinna koncentrowa(cid:202) si(cid:218) na chwytliwych has(cid:239)ach i braku nadmiarowych tre(cid:258)ci. U(cid:285)ytkownik nie chce za du(cid:285)o czyta(cid:202) o produktach. Je(cid:258)li zachodzi potrzeba podania du(cid:285)ych ilo(cid:258)ci informacji, to nale(cid:285)y je uj(cid:200)(cid:202) w przyst(cid:218)pnej formie w UI w akordeonach. 52 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Wyró(cid:298)nij si(cid:266) na tle konkurencji (cid:81) Jako (cid:285)e produkt skierowany do u(cid:285)ytkownika B2C prawdopodobnie dost(cid:218)pny jest tak(cid:285)e w innych serwisach, estetyka i u(cid:285)yteczno(cid:258)(cid:202) witryny s(cid:200) kluczowymi czynnikami. (cid:81) Cho(cid:202) proces zatwierdzania zakupu B2C jest z gruntu nieskomplikowany, (cid:239)atwo mo(cid:285)na wpa(cid:258)(cid:202) w pu(cid:239)apk(cid:218), polegaj(cid:200)c(cid:200) na wprowadzeniu zbyt du(cid:285)ej liczby niepotrzebnych pól lub niedostarczeniu u(cid:285)ytkownikowi informacji potrzebnych do sfinalizowania transakcji. Zapewnij u(cid:285)ytkownikowi mo(cid:285)liwo(cid:258)(cid:202) (cid:239)atwego zatwierdzania zakupu poprzez utworzenie profilu online, w ramach którego wszelkie przysz(cid:239)e transakcje b(cid:218)dzie móg(cid:239) zatwierdzi(cid:202) jednym klikni(cid:218)ciem. Projektowanie dla B2B: (cid:81) Cena produktów i us(cid:239)ug jest wy(cid:285)sza, wobec czego u(cid:285)ytkownik B2B musi mie(cid:202) dost(cid:218)p do jak najwi(cid:218)kszej ilo(cid:258)ci inform
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

UX w projektowaniu witryn internetowych
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: