Autorzy:

Michał Koralewski, Piotr Nowak

Instytut Logistyki i Magazynowania (ILiM)

http://www.ilim.poznan.pl/

Korekta:

Michał Koralewski

Wydawca:

Polska Agencja Rozwoju Przedsiębiorczości (PARP)

ul. Pańska 81/83

00-834 Warszawa

www.parp.gov.pl

Wydanie I

Publikacja bezpłatna

Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Rozwoju Regionalnego

Wspieramy e-biznes www.web.gov.pl

Copyright © by Polska Agencja Rozwoju Przedsiębiorczości Warszawa 2012. Wszelkie prawa zastrzeżone. Żaden fragment nie może być wykorzystywany w jakiejkolwiek formie ani przekładany na język mechaniczny bez zgody PARP.

Spis treści

1          Wprowadzenie. 3

2          Użyteczność (usability) 5

2.1   Postaw na slogan (tagline) 5

2.2   Pamiętaj o wyszukiwarce. 6

2.3   Nadmiar kolorów i grafik utrudnia korzystanie ze strony. 7

2.4   Użytkownicy nie czytają tekstów – skanują je wzrokiem.. 8

2.5   Elementy interfejsu nie mogą wprowadzać użytkowników w błąd. 8

2.6   Inne wytyczne, o których warto pamiętać. 9

3          Dostępność (accessibility) 10

3.1   Krótki czas ładowania strony. 10

3.2   Wyświetlanie strony w różnych przeglądarkach. 10

3.3   Dostępność dla osób niepełnosprawnych. 11

4          Funkcjonalność (usefulness) 14

5          Atrakcyjność (desirability) 16

6          Znajdowalność (findability) 22

6.1   Przekaz ustny (marketing szeptany) 22

6.2   Odpowiednia nazwa strony lub usługi 22

6.3   Budowanie świadomości marki 23

6.4   Strategia marketingowa. 23

6.5   Strategia w wyszukiwarkach internetowych. 23

7          Wiarygodność (credibility) 25

8          Podsumowanie. 28

9          Słownik. 29

1           Wprowadzenie

Projektowanie oparte na wywoływaniu pozytywnych wrażeń u użytkowników określa się terminem „user experience design” (stosując czasami także skrót UX design, lub po prostu UX). Termin ten pojawił się w prasie naukowej pod koniec lat siedemdziesiątych ubiegłego wieku, a jego definicja ewoluowała aż do formy zaproponowanej przez Jakoba Nielsena oraz Dona Normana – dwóch najważniejszych postaci w tej dyscyplinie:

 „User experience” obejmuje wszystkie aspekty interakcji użytkownika z firmą, jej usługami i produktami. Pierwszym z wymogów doskonałego user experience jest spełnienie potrzeb konsumenta bez zbędnych przeszkód i kłopotów. Następnym jest prostota i elegancja produktów, których posiadanie jest przyjemnością, przyjemnością użytkowania. Prawdziwe user experience przekracza dawanie konsumentom tego, o czym mówią, że tego chcą, lub tylko produktu z listą niezbędnych cech. Aby osiągnąć wysokiej jakości user experience firmowej oferty konieczne jest płynne przenikanie się wielu dyscyplin, takich jak technologia, marketing, projektowanie graficzne i użytkowe, czy projektowanie interfejsów.

Na tej podstawie wyróżnia się sześć najważniejszych wymiarów user experience:

Tabela 1. Wymiary user experience design

Użyteczność (usability) | Zbiór cech danego produktu, czy – jak w tym przypadku – strony internetowej, dzięki którym kontakt z nią jest dla użytkownika wygodny i łatwy.
Dostępność (accessibility) | Dostosowanie strony do obsługi w różnych przeglądarkach, przez różne systemy komputerowe, w różnych rozdzielczościach, a także ułatwienie obsługi strony osobom niepełnosprawnym.
Funkcjonalność (usefulness) | Spełnienie przez produkt prawdziwych potrzeb użytkowników (czy strona internetowa daje użytkownikowi to, po co na nią wszedł?).
Atrakcyjność (desirability) | Wartość wizerunkowa strony, jej estetyka i efektowność.
Znajdowalność (findability) | Możliwość odnalezienia strony internetowej przez użytkownika, odpowiednia komunikacja marketingowa i nazewnictwo.
Wiarygodność (credibility) | Upewnienie użytkownika, że przedstawiony produkt jest najlepszą odpowiedzią na jego potrzeby oraz wzbudzenie w użytkowniku zaufania do jego sprzedawcy.

Źródło: opracowanie na podstawie User Experience Design, Peter Morville, http://semanticstudios.com/publications/semantics/000029.php

W różnych publikacjach można przeczytać, że UX jest synonimem użyteczności, ale jest to błędne uproszczenie. Użyteczność jest w znacznej mierze częścią składową user experience i odgrywa w tej dyscyplinie kluczową rolę, ale nie wolno też zapominać o architekturze informacyjnej, czynniku ludzkim, uwarunkowaniach psychologicznych itp., które wykraczają poza pojęcie „użyteczność”, a które są równie ważne w projektowaniu opartym na pozytywnych wrażeniach użytkowników. Podsumowując - użyteczność mówi o przyjaznym i efektywnym interfejsie, podczas gdy UX mówi o tym, co odczuwa użytkownik, gdy z niego korzysta.   

Oparcie swojego produktu o zasady UX jest inwestycją w przyszłość. Konsumenci, którzy będą zadowoleni z produktu i będą odczuwali przyjemność z jego korzystania, chętniej powrócą do sprzedawcy, dłużej pozostaną na jego stronie internetowej i chętniej podzielą się dobrymi wrażeniami ze swoimi znajomymi. Wiedząc o tym, powinniśmy większą uwagę poświęcać naszym projektom internetowym, tworzyć je z myślą o użytkowniku, zmniejszając w ten sposób współczynnik odrzuceń i zatrzymując go na naszej stronie dłużej.

Rysunek 1. Schemat podziału pojęcia user experience

W kolejnych rozdziałach postaramy się przybliżyć poszczególne wymiary user experience, pokazując jednocześnie konkretne przykłady ich zastosowania w projektowaniu popularnych stron internetowych.

2           Użyteczność (usability)

Użyteczność określa, czy produkt jest wygodny i łatwy w użyciu, a przez to przyjazny dla użytkownika. W normie ISO 9241 definiuje się ją jako stopień, w jakim produkt może zostać użyty przez określonych użytkowników dla osiągnięcia zdefiniowanych przez nich celów, przy założonej przez nich efektywności, skuteczności i satysfakcji oraz w odniesieniu do specyficznego kontekstu użycia. Z kolei termin „usability engineering” odnosi się do badania, w jakim stopniu i z jaką efektywnością użytkownik może wykonać dane zadanie w aplikacji, czy korzystając z serwisu internetowego.

Jakob Nielsen, o którym już wspominaliśmy we wstępie, zdefiniował pojęcie użyteczności jako miary wzajemnie oddziałujących na siebie cech, do których należą:

·         nauczalność (learnability) – mówiąca o tym, jak łatwo jest wykonać proste zadania przy pierwszym kontakcie z produktem,

·         efektywność (efficiency) – informująca o szybkości korzystania z produktu przez użytkowników, którzy już wcześniej mieli z nim kontakt,

·         zapamiętywalność (memorability) – dzięki której użytkownicy łatwo przypominają sobie zasady działania produktu po długiej przerwie w korzystaniu,

·         błędy (errors) - wskaźnik mówiący o tym, jak często użytkownicy je popełniają w kontakcie z produktem i czy potrafią sami je rozwiązać,

·         satysfakcja (satisfaction) – czyli przyjemność w korzystaniu z produktu.

Użyteczność stawia na ergonomię i funkcjonalność stron internetowych i aplikacji, które za ich pośrednictwem są udostępniane użytkownikom. Budując nowy projekt warto korzystać ze sprawdzonych rozwiązań i powszechnie przyjętych standardów, minimalizując w ten sposób zniecierpliwienie i irytację użytkownika. Rewolucyjne podejście do projektu może, co prawda, wzbudzić nagłe zainteresowanie internautów i błyskawicznie podnieść atrakcyjność wizualną strony, ale na dłuższą metę będzie to przysłowiowy strzał w stopę. Wszelkie odstępstwa od standardów utrudniają poruszanie się i zrozumienie zasad działania projektu.

Poniżej przedstawiamy kilka istotnych wytycznych, o których warto pamiętać podczas projektowania stron internetowych.

2.1          Postaw na slogan (tagline)

Zadaniem krótkiego, kilkuwyrazowego hasła reklamowego, które znajduje się w górnej części strony internetowej tuż przy logotypie, jest jak najkonkretniej wyjaśnić użytkownikowi, co znajdzie na stronie, lub czym zajmuje się firma. Pamiętajmy o tym, że mamy zaledwie kilka sekund na to, aby nakłonić internautę do dłuższego pozostania na witrynie. Tagline idealnie się do tego nadaje, szczególnie wtedy, gdy nazwa firmy i jej logotyp niewiele mówią o zakresie świadczonych usług czy sprzedawanych produktów.

Ilustracja 1. Zastosowanie sloganu ułatwia zrozumienie działalności firmy

Kilka innych przykładów dobrych, prostych sloganów, które można znaleźć na stronach internetowych firm: „tworzenie stron WWW”, „serwis sprzętu RTV”, „części samochodowe”.

Dobry slogan nie dość, że w kilku słowach przestawia zakres działania firmy, to jeszcze odróżni ją od setek innych, podobnych firm, eksponując jakąś unikalną cechę – np. dużą liczbę dostępnych produktów.

Ilustracja 2. Slogan eksponujący unikalną cechę.

Czy są slogany, które nie przedstawiają wartości z punktu widzenia użyteczności strony? Oczywiście! Przykładem niech będą takie hasła jak „Najlepsi w Polsce”, albo „100% satysfakcji”. Te hasła nic nie mówią o tym, co użytkownik znajdzie na stronie, poza tym czy jest sprzedawca, który nie gwarantuje kupującemu satysfakcji? Jednak jeszcze gorszym rozwiązaniem jest całkowite pominięcie hasła tagline. Na jego brak mogą sobie pozwolić tylko te firmy, które mają bardzo wysoką pozycję w branży i już sama ich nazwa stanowi synonim ich oferty. Każdy z nas wie, co znajdzie na stronie takich firm jak Google, Adidas czy Apple.

2.2          Pamiętaj o wyszukiwarce

Większość użytkowników podczas pierwszego kontaktu ze stroną internetową sprzedawcy produktów lub usług, szuka jednego z najważniejszych elementów strony – wyszukiwarki, do której będzie mógł wpisać swoje zapytanie, oczekując uzyskania trafnej odpowiedzi, bez konieczności nawigowania po stronie, czytania opisów i ręcznego przeszukiwania zasobów strony. Nawiązując do wyników badań przeprowadzonych przez Jakoba Nielsena, okienko wyszukiwarki powinno mieć szerokość 27 znaków, dzięki czemu będzie widoczne i wygodne w użyciu. Najlepszym miejscem dla modułu wyszukiwarki jest górna część strony, a samo okienko powinno posiadać przycisk z napisem „Szukaj”.

Ilustracja 3. Prawidłowe umiejscowienie wyszukiwarki

Na stronach internetowych można znaleźć różne opisy zastosowane na przycisku „Szukaj”. Czasami jest to “Dalej”, “Idź” lub “Wyślij”, czasami też stosowane są piktogramy – lupy, strzałki, kropki lub nawet gwiazdki. Nie stosujmy rozwiązań innych, niż te powszechnie przyjęte, ponieważ każdy taki „drobiazg”, o którym często się zapomina podczas projektowania stron, może spowodować, że użytkownik błędnie zrozumie działanie takiego elementu. Jeśli jest na to miejsce należy używać słowa „Szukaj”, jeśli miejsca na tekst jest za mało to symbol lupy będzie najlepszą z pozostałych propozycji.

2.3          Nadmiar kolorów i grafik utrudnia korzystanie ze strony

Grafika wykorzystana w projekcie powinna wspomagać stronę, służyć jej użyteczności, a nie tylko ozdobie. Im mniej elementów rozpraszających uwagę tym lepiej. Zresztą – sami porównajcie poniższe dwie strony.

Ilustracja 4. Minimalizm w stosowaniu kolorów ułatwia znalezienie poszukiwanych informacji

Ilustracja 5. Nadmiar elementów graficznych tworzy wrażenie bałaganu

Warto mieć na uwadze, że umiejętne operowanie białym kolorem poprawia zrozumienie tekstu i innych elementów, które na takim tle są eksponowane. Stosując kolory na stronie należy trzymać się powszechnie przyjętych standardów, przykładowo - kolor niebieski jest najlepszym kolorem dla oznaczania linków. Jednocześnie nie powinno się stosować tego koloru w innych miejscach, aby nie wprowadzać użytkowników w błąd. Linki, które użytkownik odwiedził już wcześniej powinny być oznaczane kolorem fioletowym.

Ilustracja 5. Najlepszym kolorem dla linków jest niebieski, dla linków odwiedzonych – fioletowy

2.4          Użytkownicy nie czytają tekstów – skanują je wzrokiem

Testy użyteczności pokazują, że zdecydowana większość internautów przebiega wzrokiem przez widoczną na stronie treść, intuicyjnie poszukując tytułów, pogrubień i kursyw, wypunktowań, nowych akapitów itp., szukając odpowiedzi na swoje pytania. Bardzo niewielki odsetek użytkowników czyta cały opis produktu. Dlatego projektując stronę internetową pamiętajmy o tym, żeby publikowane teksty były krótkie, lecz treściwe, przyciągały dobrym tytułem i atrakcyjnym (lecz nie rozpraszającym) formatowaniem. Jakob Nielsen radzi, żeby strukturę treści wzorować na artykułach z gazet papierowych, gdzie dziennikarze najpierw przyciągają czytelnika chwytliwym tytułem, a następnie utrzymują jego ciekawość dostarczając mu najważniejsze informacje w pierwszych dwóch akapitach artykułu. Wszystko, co jest mniej ważne powinno się pojawić w dalszej części artykułu. Nielsen nazywa to organizacją treści na kształt odwróconej piramidy. Ta sama organizacja znakomicie sprawdza się też w przypadku publikacji treści na stronach internetowych.

Ilustracja 6. Chwytliwy tytuł, najważniejsze informacje w pierwszych akapitach – teksty na stronie WWW powinny być konstruowane na wzór artykułów prasowych.

2.5          Elementy interfejsu nie mogą wprowadzać użytkowników w błąd

Projektując stronę WWW należy unikać wykorzystywania elementów grafiki, które użytkownik mógłby wziąć za taką część strony, z którą może wejść w interakcję. Przykładowo – wstawiając tekst w ramkę, która będzie wyglądała jak przycisk (ale nim nie będzie), możemy sprawić, że użytkownik uzna, że strona przestała działać (bo klika na taki guzik-nie guzik i nie wywołuje to żadnej reakcji ze strony systemu) i zrezygnuje z dalszego jej przeglądania. Podobny negatywny efekt można osiągnąć stosując podkreślenia wyrazów w tekście, co użytkownik odbiera jako linki, choć nimi nie są. W tym punkcie zawiera się także konieczność uspójnienia poszczególnych części interfejsu, takich jak zakładki, przyciski, linki, elementy menu itp. Dobrym przykładem spójności elementów interfejsu może być strona internetowa Skody (http://www.skoda-auto.pl), gdzie wszystkie przyciski wyglądają tak samo, każdy element menu rozwija się w podobny sposób, linki są odpowiednio wyróżnione i podkreślone, gdy najedzie się na nie wskaźnikiem myszy.

Ilustracja 7. Dobry przykład spójności elementów interfejsu

2.6          Inne wytyczne, o których warto pamiętać

·         Udostępnij mapę strony, która ułatwi poruszanie się po stronie internetowej, a także przyspieszy i lepiej zorganizuje indeksakcję podstron w wyszukiwarkach.

·         Podpowiadaj użytkownikowi, co może zrobić na stronie, wyjaśnij mu, co powinien wpisać w formularzu zgłoszeniowym i poinstruuj jak ma wrócić do strony głównej, gdy natrafi na błąd 404.

·         Jeśli użytkownik wypełnia formularz, a wcześniej się już zarejestrował, zostawiając swoje dane osobowe, niech system wypełni elementy formularza, takie jak imię, nazwisko, adres itp. za niego.

·         Zminimalizuj liczbę elementów wykonanych w technologii Flash na swojej stronie, a jeśli możesz zrezygnuj z nich całkowicie. Nie wszyscy użytkownicy mają zainstalowaną najnowszą wersję przeglądarki. Nie wszystkie urządzenia, które pozwalają na dostęp do Internetu, mają możliwość wyświetlania elementów w tej technologii.

3           Dostępność (accessibility)

Ten wymiar odnosi się do dostępności treści na stronach WWW poprzez wyeliminowanie przejawów dyskryminacji wobec osób niepełnosprawnych. Dostępność stron WWW, zgodnie z definicją, oznacza stopień, w jakim mogą one być przeglądane, nawigowane i zrozumiane przez użytkowników niezależnie od ich cech i upośledzeń, ale również niezależnie od wykorzystywanego sprzętu i oprogramowania. Dostępność sieci obejmuje wszystkie formy upośledzeń, które mogą wpływać na dostęp do sieci, w tym wzrokowe, słuchowe, wymowy oraz wady fizyczne, jak również upośledzenia poznawcze i neurologiczne. Ze zwiększonej dostępności strony WWW mogą czerpać korzyści także w pełni sprawni ludzie, dotknięci tylko czasowo jakąś formą niesprawności lub tracący pełnię sprawności z wiekiem. Poniżej prezentujemy najważniejsze zasady charakteryzujące ten wymiar projektowania UX.

3.1          Krótki czas ładowania strony

Czas potrzebny do załadowania strony powinien być możliwie najkrótszy. Idealnie, jeśli cała strona internetowa ładuje się w mniej niż jedną sekundę. Wyniki dwu-trzy sekundowe też są akceptowalne, ale jeśli użytkownik czeka dziesięć lub więcej sekund, aż strona się otworzy, to można mieć pewność, że w większości wypadków zrezygnuje z korzystania z takiej strony (chyba, że nie ma takiej możliwości, bo przykładowo jest to jedyny kanał dostępu do obsługi jego wirtualnego konta bankowego. Ale z pewnością jego satysfakcja i pozytywne wrażenia z kontaktu ze stroną będą niewielkie). Im więcej ciężkich grafik i rozbudowanych elementów Flash zamieścimy na stronie, tym dłuższy będzie czas jej ładowania. W tym przypadku znaczenie ma także serwer, na którym hostowana jest strona, warto zadbać o to zaplecze zanim duży ruch w widoczny sposób spowolni działanie strony albo uniemożliwi korzystanie z niej (pamiętacie początki Naszej-Klasy i pana Gąbkę, który pojawiał się kilka razy dziennie?). W Sieci dostępne są darmowe narzędzia, które pozwalają monitorować czas ładowania strony internetowej. Przykładem może być narzędzie WatchScript.pl (http://test.watchscript.pl/).

Ilustracja 8. Przed uruchomieniem strony WWW warto przetestować szybkość jej ładowania

3.2          Wyświetlanie strony w różnych przeglądarkach

Projekt internetowy nie może zmuszać użytkownika do korzystania z jednej, konkretnej przeglądarki. Użytkownicy korzystają z takich przeglądarek jak Firefox, Chrome, Internet Explorer, Opera i innych (nie mówiąc już o rosnącej liczbie przeglądarek mobilnych, zainstalowanych na smartfonach i tabletach). Brak kompatybilności z tymi przeglądarkami może spowodować irytację u użytkowników, a w skrajnych przypadkach nawet brak możliwości korzystania ze strony.

Ilustracja 9. Brak możliwości wyświetlenia fragmentu strony na tablecie

To, jak wygląda strona w różnych przeglądarkach (a także różnych jej wersjach i w różnych systemach operacyjnych), można sprawdzić na stronie BrowserShots (http://www.browsershots.org).

Ilustracja 10. BrowserShots to praktyczne narzędzie, dzięki któremu można sprawdzić poprawność wyświetlania strony WWW w różnych przeglądarkach internetowych.

3.3          Dostępność dla osób niepełnosprawnych

Uczyń swoją stronę dostępną dla osób niepełnosprawnych. Oni też mogą być Twoimi klientami i korzystać z rozwiązań, które dostarczasz przez Internet. Ponieważ ich kontakt ze stroną może odbywać się za pomocą innych urządzeń (takich jak np. czytnik tekstu dla osób niedowidzących), warto pamiętać o kilku ważnych zasadach podczas projektowania strony WWW:

·         Nie umieszczaj ważnych informacji w postaci elementów Flash.

·         Używaj stylów kaskadowych (CSS), aby mieć większą kontrolę nad szablonem strony.

·         Używaj atrybutów „alt” do wszystkich grafik (dzięki temu czytniki stron będą potrafiły „przeczytać” zawartość obrazka.

·         Zadbaj o logiczny układ architektury informacyjnej na swojej stronie.

·         W nawigacji strony (np. elementy menu) opieraj się na tekście, nie na ikonach.

·         Dostosuj stronę, aby mogła być obsługiwana także za pomocą samej klawiatury.

·         Przetestuj stronę przynajmniej w jednym z darmowych narzędzi online do sprawdzania dostępności strony dla osób z niepełnosprawnościami (takim narzędziem jest np. WAVE (http://wave.webaim.org/).

·         Unikaj stosowania komunikatów głosowych na swoich stronach, a jeśli takie masz, zadbaj o to, by była możliwość zapoznania się z komunikatem także w postaci tekstowej. Nie tylko ułatwi to odbiór strony osobom niedosłyszącym, ale także ludziom słyszącym, którzy mają po prostu wyłączone głośniki.

·         Odpowiedni kontrast takich elementów strony, jak tekst, przyciski menu czy formularze ułatwi korzystanie ze strony osobom z zaburzeniami widzenia kolorów. To, czy strona będzie dostępna dla tych osób, można sprawdzić w narzędziu VisCheck (http://www.vischeck.com/).

·         Pamiętaj o tym, żeby ułatwić czytanie tekstu osobom o słabszym wzroku poprzez wprowadzenie możliwości powiększania liter. Tym samym unikaj wstawiania tekstu w formie elementów graficznych, których użytkownik nie będzie mógł powiększyć.

Ilustracja 11. Płynne powiększanie tekstu bardzo poprawia dostępność strony WWW dla osób niedowidzących.

Dostosowanie strony internetowej do jej obsługi przez osoby z niepełnosprawnościami jest w wielu krajach wymagane zapisami prawa. Pomijając fakt, że ułatwiając im dostęp do zasobów strony docieramy do dużej grupy odbiorców i potencjalnych konsumentów świadczonych na stronie usług, to jeszcze spełniając wymogi prawa unika się kar finansowych i negatywnych opinii.

Inne, bezpłatne narzędzia, za pomocą których można sprawdzić poziom dostępności strony internetowej:

·         aDesigner (http://www.research.ibm.com/trl/projects/acc_tech/adesigner_e.htm)

·         EvalAccess (http://sipt07.si.ehu.es/evalaccess2/)

·         WebAnywhere (http://webanywhere.cs.washington.edu/wa.php)

·         Colour Contrast Analyser (http://juicystudio.com/services/luminositycontrastratio.php)

·         Web Accessibility Toolbar (http://www.visionaustralia.org.au/ais/toolbar/)

4           Funkcjonalność (usefulness)

Funkcjonalność oznacza, że strona WWW, na którą trafił użytkownik sieci, realizuje zadania, których użytkownik od niej oczekuje, w możliwie najprostszy sposób. W praktyce oznacza to, że strona powinna być czytelna, doprowadzać do pożądanej informacji przy możliwie najmniejszej liczbie kliknięć, być kompatybilna z przeglądarką użytkownika i przedstawiać unikalną zawartość w porównaniu z innymi stronami w Sieci.

Jeśli użytkownik odwiedza konkretną stronę, to robi to po to, aby uzyskać informację, której szuka. W związku z tym, tworząc stronę internetową, należy zadać sobie kilka bardzo ważnych pytań, takich jak: czemu ma służyć strona i jakich informacji ma dostarczać użytkownikowi, w jaki sposób będzie prowadziła użytkownika do celu, co jest tym celem i czym strona się będzie wyróżniała spośród innych, które już funkcjonują na rynku?

Strony internetowe takich usług i produktów jak np. rachunkowość online, sklep z częściami samochodowymi, gry Flash czy lokalizacja konkretnych firm na mapie miasta, będą się od siebie różniły i ich funkcjonalności też muszą być odmienne, a co za tym idzie – odmienny musi być ich projekt i strategia działania. Wchodząc na konkretną stronę użytkownicy oczekują funkcjonalności im przypisanym. Nie ma sensu budować strony internetowej, na której użytkownik będzie mógł zrobić „wszystko” – od zamówienia worka cementu, poprzez zagranie w gry online, a skończywszy na sprawdzeniu stanu wód w Wiśle i kursu Jena. Projektując stronę należy przede wszystkim skupić się na jej podstawowej funkcjonalności i udzieleniu tych informacji, których użytkownik będzie tam szukał. A do tego potrzebna jest wiedza o tym użytkowniku i jego potrzebach.

Ilustracja 12. Wchodząc na stronę poświęconą produktom finansowym, użytkownicy oczekują znalezienia narzędzi związanych z tą branżą.

Funkcjonalna strona to taka, po której nawigowanie daje przyjemność: menu jest czytelne i zrozumiałe, linki prowadzą w odpowiednie miejsca, czas ładowania strony jest krótki i wszystko na niej działa tak, jak oczekuje tego internauta. Przed oficjalnym uruchomieniem strony warto zrobić test jej kompatybilności z różnymi przeglądarkami internetowymi, żeby już na starcie nie zrazić do siebie użytkowników mniej popularnych przeglądarek, jak np. Safari czy Camino. Ważnym elementem funkcjonalności jest odróżnienie się od konkurencji. Wpływa to zarówno na zawartość merytoryczną strony, jak i jej wygląd graficzny. Strona powinna łatwo zapadać użytkownikowi w pamięć i zachęcać go do ponownego odwiedzenia, a jednocześnie sprawiać, by internauta wybierał tę właśnie stronę zamiast witryn konkurencyjnych firm. W jaki sposób można to osiągnąć? Projektując stronę w sposób estetyczny, spójny graficznie, dostarczając prostych odpowiedzi na trudne pytania użytkownika i wyróżniając stronę jakąś cechą unikalną, czymś, czego konkurencja jeszcze nie ma. Czyli po prostu tworząc stronę atrakcyjną.

5           Atrakcyjność (desirability)

Atrakcyjność odnosi się do tych cech produktu/usługi, które wywołują w nas pozytywne emocje, niekiedy nawet nieświadomie i poprzez to wpływają na zachowanie nabywcy. Inaczej mówiąc, we wzbudzaniu pożądania chodzi nie tyle o sprzedaż produktu, co o stworzenie okoliczności, w których sprzeda się on niejako sam. Omawiany element „user experience” wiąże się z takimi cechami jak wyczucie trendów i ich rozwoju w czasie oraz umiejętność przyciągania uwagi w większym stopniu niż konkurencja. W celu poprawy desirability należy stworzyć całościowy obraz emocjonalnych potrzeb użytkownika i jego ukrytych motywacji. Poprzez zrozumienie emocjonalnych źródeł oddziaływania na użytkownika można zaproponować takie rozwiązania, które dostarczą wymaganego emocjonalnego wsparcia i zwiększą w ten sposób stopień pożądania produktu lub usługi.

Sama użyteczność i funkcjonalność nie wystarczą, żeby produkt dobrze się sprzedawał. Potrzebne jest coś, co wzbudzi w kliencie pragnienie posiadania właśnie tego konkretnego produktu, korzystania z tej, a nie innej usługi. Pragnienie to może być efektem innowacyjnego podejścia do produktu, jego wyjątkowej estetyki wizualnej, niezwykłej użyteczności czy też po prostu sprawnego marketingu. Przykładowo komputery, tablety czy odtwarzacze MP3 jednej z firm mogą być łatwiejsze w obsłudze, integrujące się płynniej między sobą i oferujące stabilniejsze oprogramowanie niż urządzenia o podobnej funkcjonalności firm konkurencyjnych. Dodatkowo mogą być także dopracowane w najmniejszym szczególe, z ogromną dbałością o estetykę wizualną, przez co są dla klientów atrakcyjne i wyróżniające się spośród innych.

Ilustracja 13. Na atrakcyjność produktu w dużej mierze wpływa ich wygląd zewnętrzny.

Co sprawia, że ludzie stoją po kilka godzin w kolejce, żeby kupić nowego iPada lub jadą nocą do Niemiec, żeby tuż po otwarciu sklepu kupić iPhone’a, choć tydzień później bez problemów mogliby go kupić w Polsce? Co sprawia, że Instagram (serwis społecznościowy służący dzieleniu się zdjęciami) przekroczył już liczbę 80 milionów użytkowników, gdy serwisom konkurencyjnym (o takiej samej, a czasem nawet lepszej funkcjonalności) ledwie udaje się zdobyć kilkanaście-kilkadziesiąt tysięcy użytkowników? Odpowiedzią jest to, co określamy mianem „desirability”. Ten element UX jest najtrudniejszy do uzyskania, ponieważ w największym stopniu zależny jest od ludzkich emocji. Budując użyteczną, funkcjonalną i atrakcyjną wizualnie stronę internetową tworzymy środowisko, w którym będzie dopiero można zasiać ziarno tych emocji. Wiele lat temu Edward Bernays, ojciec Public Relations, powiedział: “stwórz odpowiednie środowisko dla pragnień, a produkty będą sprzedawały się same”.

„Atrakcyjność” w ujęciu user experience design to nie tylko ładnie wyglądające produkty. Produkt, który jest przez użytkowników pożądany, może wcale nie charakteryzować się wyjątkową atrakcyjnością wizualną, ale być np. wyjątkowo prosty w obsłudze i użyteczny. Wyszukiwarka Google to wyjątkowo minimalistyczny przykład designu strony i spokojnie można by znaleźć kilka konkurencyjnych wyszukiwarek, które od strony wizualnej biją Google na głowę. A jednak zdecydowana większość użytkowników korzysta właśnie z wyszukiwarki firmy z Mountain View.

Ilustracja 14. Atrakcyjnością wyszukiwarki Google jest łatwość jej obsługi.

Podobnie rzecz się ma z arkuszem kalkulacyjnym Excel firmy Microsoft, który raczej nie wygra w rankingach atrakcyjności graficznej, ale jego cechą wyróżniającą jest to, że praca na nim jest niezwykle łatwa i intuicyjna, jest także częścią większego ekosystemu, w którego skład wchodzi także edytor tekstu, program do tworzenia prezentacji i inne, co dla użytkowników jest wystarczająco atrakcyjne, by w wielu przypadkach decydowali się właśnie na ten program.

Jak wobec tego stworzyć stronę, która będzie wzbudzała takie emocje wśród użytkowników? Nie ma jednego słusznego schematu postępowania, który będzie odpowiedni dla wszystkich i który zapewni sukces w tej materii. Napisano setki książek o tym, jak wzbudzić pożądanie na dany produkt u klientów, a i tak udaje się to nielicznym. Możemy jedynie zaprezentować kilka najbardziej podstawowych zasad, o których warto pamiętać podczas projektowania strony internetowej:

·         Stosuj odpowiedni schemat kolorystyczny i umiejętnie operuj kontrastem.

Kolorystyka strona powinna odpowiadać jej zawartości, wzbudzając w użytkowniku pozytywne emocje i skojarzenia. Sklep z piłami elektrycznymi i młotami pneumatycznymi, którego strona internetowa będzie utrzymywana w odcieniach różu, może powodować konsternację u jej użytkowników. Podobnie jak mieszanka kolorów zupełnie nieprzystających do siebie lub zbyt krzykliwych (przykład na następnej stronie).

Ilustracja 15. Krzykliwą kolorystyką strony WWW można odstraszyć użytkownika

·         Korzystaj z różnych mediów.

Zdjęcia, pliki wideo, podcasty, dodatkowe materiały w plikach PDF itp. uatrakcyjniają stronę internetową, o ile tylko stosowane są z umiarem i rozwagą. Dzięki zastosowaniu różnych form przekazu można także wywołać w użytkowniku poczucie przekonania o profesjonalizmie sprzedawcy.

Ilustracja 16. Elementy multimedialne uatrakcyjniają przekaz.

·         Stosuj elementy graficzne, aby wyróżnić najważniejsze treści.

Kolory, przyciski, dodatkowe linie oddzielające fragmenty tekstu można z powodzeniem wykorzystać, aby przyciągnąć uwagę użytkownika strony do tego jej fragmentu, na którym nam najbardziej zależy, lub wyróżnić najważniejszy fragment tekstu. Pamiętajmy jednak o zasadzie, która mówi, że „im mniej tym lepiej”.

Ilustracja 17. Przykład wyróżnienia oferty banku,

·         Typografia jest ważna!

Nie warto zmniejszać czcionki na stronie za bardzo, starając się upchnąć jak najwięcej tekstu, bo ludzie przestaną czytać to, co zostało nią napisane. Warto też pamiętać, że treść napisana za pomocą samych dużych liter jest powszechnie traktowana jako krzyk, co znów może wywołać u użytkownika frustrację i zniechęcić go do dalszego przeglądania strony. Litery powinny być czytelne, a cała typografia strony spójna. Wszelkie próby uatrakcyjnienia tekstu za pomocą zmiany kroju czcionki, jej wielkości, kolorystyki czy też stosowania kolorowego tła pod literami wywołuje u internautów negatywne wrażenia i prędzej czy później będzie skutkowało porzuceniem takiej strony przez niego.

Ilustracja 19. Delikatne formatowanie tekstu poprawia jego czytelność.

6           Znajdowalność (findability)

Znajdowalność oznacza możliwość odszukania strony WWW (także aplikacji lub usługi) przez użytkownika w momencie pojawienia się takiej potrzeby. Innymi słowy jest to łatwość zlokalizowania strony i nawigacji po niej. Termin odnosi się więc zarówno do znajdowalności informacji na stronie WWW poprzez wyszukiwarki (niejako z zewnątrz), jak również do łatwości odnajdywania informacji przez użytkownika, który już jest na danej stronie. Do elementów wpływających na znajdowalność zaliczyć można właściwą nazwę i pozycjonowanie strony lub usługi/produktu. Spopularyzowanie terminu przypisuje się zazwyczaj Peterowi Morville, który w 2005 roku zdefiniował znajdowalność jako „zdolność użytkownika do zidentyfikowania odpowiedniej strony w Sieci i do nawigowania po niej samej w celu uzyskania pożądanej informacji”. Przedstawimy teraz kilka najbardziej podstawowych sposobów na podniesienie poziomu znajdowalności strony.

6.1          Przekaz ustny (marketing szeptany)

Jest to bardzo ceniona forma promocji produktu, opierająca się na komunikatach przekazywanych przez samych klientów. Komunikaty te cechują się dużą wiarygodnością, co ma bezpośrednie przełożenie na wzrost zainteresowania konsumentów danym produktem. Rozwój kanałów komunikacji ułatwia stosowanie przekazu ustnego. Dzisiaj można do tego celu używać zarówno własnej strony internetowej (publikując na niej np. rekomendacje klientów), blogów i serwisów informacyjnych (poprzez zamieszczenie pozytywnego opisu, testu itp.), jak i stosując media społecznościowe, takie jak Facebook, Twitter, LinkedIn, Google+ itd. W ten sposób dociera się do potencjalnych klientów, którzy nie znali wcześniej adresu internetowego danej strony.

6.2          Odpowiednia nazwa strony lub usługi

Odpowiednia, to znaczy taka, która nie będzie wzbudzała w odbiorcy negatywnych skojarzeń (przykład poniżej po lewej) ani też wprowadzała w błąd (przykład po prawej).

Ilustracja 20. Wybierając nazwę warto zastanowić się czy będzie odpowiednia dla prowadzonej działalności.

Idealnie, jeśli już sama nazwa mówi o tym, co użytkownik może znaleźć na stronie, tak jak przykładowo „Komputronik”. Internauta już po samej nazwie spodziewa się znaleźć internetowy sklep z komputerami. Warto też sprawdzić czy wybrana, kilkuwyrazowa nazwa nie będzie budziła błędnych skojarzeń, jeśli będzie występowała w pisowni łącznej (np. w postaci adresu WWW, jak w przypadku usługi Winters Express: wintersexpress.com)

Czasami firmy celowo stosują nazwy, które z ich branżą nie mają nic wspólnego (tak jak wspomniana już wcześniej firma Apple). Ale i w tym przypadku firma potrafiła marketingowo wykorzystać swoją nazwę i dziś nikogo już nie dziwi, co ma jabłko do sprzętu multimedialnego.

6.3          Budowanie świadomości marki

Markę można budować za pomocą spójności wizualnej wszystkich produktów należących do brandu oraz uporządkowania oferty produktowej. Jeśli wszystkie oferowane produkty mają opakowania zaprojektowane w podobnym stylu, lub usługi internetowe mają podobnie skonstruowane logotypy, spójne ze sobą, a jednocześnie wystarczająco się odróżniające, wówczas konsument może łatwo odróżnić daną markę od innych, podobnych, a także nabiera większego zaufania do produktu. Pamiętajmy, że celem budowania świadomości marki jest tworzenie pozytywnych i trwałych relacji z otoczeniem. Jeśli każdy produkt wygląda inaczej, posiada zupełnie inny styl graficzny, a dodatkowo nie ma spójności informacyjnej związanej z marketingiem produktów, utrudnia to użytkownikom rozpoznanie danej marki.

6.4          Strategia marketingowa

Nikt się nie dowie o nowej usłudze czy aplikacji internetowej, jeśli producent nie przeprowadzi skutecznego marketingu. Strategia marketingowa jako element przygotowania produktu do sprzedaży, powinna zostać opracowana już na etapie jego projektowania. Sposobów na przekazanie informacji o produkcie jest nieskończenie wiele, wszystko zależy od kreatywności osób, które się produktem zajmują. Do najbardziej oczywistych należą reklamy w mediach, wykorzystanie serwisów społecznościowych, chwytliwe hasła, promocje itp. 

6.5          Strategia w wyszukiwarkach internetowych

Pozycjonowanie strony internetowej znacząco poprawia jej znajdowalność w wyszukiwarkach, ale niestety – profesjonalne pozycjonowanie może być kosztowne, jeśli w Sieci istnieje już duża konkurencja dla naszego produktu. Użytkownicy, którzy korzystają z wyszukiwarek, rzadko kiedy przeglądają drugą, trzecią i dalsze strony z wynikami swojego zapytania. W walce o klienta liczą się tylko najwyższe pozycje na pierwszej stronie wyników. Najbardziej podstawowymi zabiegami podnoszącymi efektywność pozycjonowania są: dodanie tytułu, opisu strony i słów kluczowych, aby mogły zostać łatwo zaindeksowane przez wyszukiwarki.

Ilustracja 21. Dodanie opisu i słów kluczowych w źródle strony poprawia jej pozycjonowanie.

W kolejnym kroku warto rozpatrzyć dodanie swojej witryny do katalogu stron, adresu sklepu do usług typu Google+ Local lub Zumi.pl oraz prowadzenie firmowego bloga, dzięki czemu do wyszukiwarek będą wysyłane informacje o częstych aktualizacjach strony.

7           Wiarygodność (credibility)

Wiarygodność odnosi się do obiektywnej lub subiektywnej oceny poziomu zaufania, jakim można obdarzyć dane źródło informacji oraz do wiedzy eksperckiej zarówno subiektywnej, jak i tej o potwierdzonej jakości, poprzez podanie źródeł danej informacji czy też referencji. Pojęcie wiarygodności zyskało nowy wymiar poprzez zwiększenie się znaczenia Internetu jako źródła informacji. Na Uniwersytecie Stanforda w Kalifornii w Persuasive Technology Lab (http://captology.stanford.edu/) prowadzono badania, których przedmiotem była wiarygodność w Sieci. Rezultatem tych badań, które trwały 3 lata i obejmowały analizę zachowań 5500 użytkowników, stało się zaproponowanie podstawowego zestawu dziesięciu wytycznych dotyczących zwiększania wiarygodności w sieci:

·         Zaprojektuj swoją stronę tak, aby już na pierwszy rzut oka wyglądała profesjonalnie. Zadbaj o dopracowany layout, profesjonalnie wykonane grafiki, estetyczną typografię i spójność poszczególnych elementów strony.

Ilustracja 22. Umiejętne operowanie kontrastem i duża „lekkość” projektu graficznego, podnosi wrażenie profesjonalizmu.

·         Zadbaj o to, żeby prawdziwość informacji opublikowanych na stronie można było łatwo zweryfikować. Zamieszczaj cytowania wraz z odnośnikami do źródeł, zamieszczaj informacje o autorach tekstów i zdjęć, linkuj do materiałów źródłowych. Nie chodzi o to, by użytkownicy klikali w te linki, lecz o to, by nabrali przeświadczenia o naszej uczciwości.

·         Pokaż, że za stroną internetową i wirtualną usługą pracują prawdziwi ludzie w realnej firmie. Najprostszy sposób to podanie w kontakcie dokładnego adresu siedziby firmy. Można także zamieścić mapę dojazdu, zdjęcie budynku siedziby i przedstawić skład zarządu (przykład na kolejnej stronie).

Ilustracja 23. Mapa dojazdu i adres wzmacniają wiarygodność firmy.

·         Pokaż swoich ekspertów. Jeśli w firmie pracuje autorytet w danej dziedzinie – pochwal się nim. Jeśli współpracujesz ze znaną i cenioną firmą – napisz o tym wyraźnie. Ta zasada działa także w drugą stronę: Jeśli „pochwalisz się” współpracą z firmą, która nie budzi zaufania, możesz się spodziewać spadku wiarygodności także Twojej.

·         Daj użytkownikowi odczuć, że stronę prowadzącą osoby uczciwe i wiarygodne. Gdy już pokazaliśmy, że za naszą stroną stoi prawdziwa firma, czas pokazać także, że jej pracownicy to osoby z krwi i kości. Pomoże temu informacja o poszczególnych pracownikach, zawierająca nie tylko to, czym się zajmują w firmie, ale także informacje o ich hobby i zainteresowaniach.

Ilustracja 24. Warto przedstawić swoich pracowników, to budzi zaufanie użytkowników strony.

·         Ułatw użytkownikom kontakt z Tobą. Wystarczy w widocznym miejscu zamieścić adres e-mail, numer telefonu i adres siedziby. Nic tak nie wzbudza podejrzeń jak formularz zapytania pozostawiony jako jedyna forma kontaktu z administratorem strony.

·         Zaprojektuj swoją stronę jako użyteczną i łatwą w obsłudze. Pisaliśmy już o tym we wcześniejszych rozdziałach tej publikacji. Prostota obsługi strony i łatwość w wykonaniu zadań, którym ma służyć wpływają na wzrost zaufania użytkowników.

·         Często aktualizuj swoją stronę. Użytkownicy powinni widzieć, że strona nie została opuszczona przez administratora, jest często odwiedzana i aktualizowana.

·         Unikaj reklam. Każdy tekst, które nosi znamiona artykułu promocyjnego od razu wzbudza w czytelniku niechęć i nieufność. Podobnie jak wyskakujące okienka z promocjami i banery reklamowe w każdej kolumnie szablonu. Jeśli możesz – zrezygnuj z reklam całkowicie, jeśli nie, oddziel wyraźnie część promocyjną od reszty strony.

·         Unikaj błędów. I to zarówno błędów ortograficznych, jak i nieprawidłowych linków i błędów logicznych w obsłudze strony.

8           Podsumowanie

Projektowanie w myśl zasad user experience wymaga dużego doświadczenia i sporej wiedzy.Ta niewielka publikacja, którą macie przed sobą, odsłania zaledwie maleńki fragment tego świata, leżącego na pograniczu informatyki, psychologii, marketingu i jeszcze kilku innych dziedzin. Znajomość powyższych reguł pozwoli w bardziej kompleksowy sposób podejść do projektu internetowego i zachować powszechnie uznane standardy, ale nie jest to zestaw, który w niezmienionej formie można zastosować w przypadku każdej strony. Nie da się w prosty sposób replikować wrażeń z odbioru jednej strony i przenieść ich na inny projekt. 

Projektowanie jest jak szycie ubrań na miarę. Trzeba dokładnie poznać oczekiwania i potrzeby klientów, przeanalizować własne możliwości oraz zachowania rynku, aby móc z powodzeniem wdrożyć taki projekt i osiągnąć sukces. A i tak nie zawsze spełnienie wszystkich wymagań UX zostanie docenione przez internautów. Jesteśmy ludźmi i nasze doświadczenia oraz to, co nazywamy „pozytywnymi wrażeniami” mogą się od siebie różnić. Najlepsze, co możemy zrobić, to promować pewne zachowania i próbować wzbudzić w odbiorcy konkretne wrażenia z odbioru naszego projektu.

Czego Państwu gorąco życzymy - Autorzy

9           Słownik

Atrakcyjność (desirability) - Wartość wizerunkowa strony, jej estetyka i efektowność

Błąd 404 - kod błędu HTTP, który mówi o braku żądanego pliku (również błędnym linku, prowadzącym do nieistniejącej strony)

Dostępność (accessibility) – polega na dostosowaniu strony do obsługi w różnych przeglądarkach, przez różne systemy komputerowe, w różnych rozdziel-czościach, a także ułatwienie obsługi strony osobom niepełnosprawnym

Funkcjonalność (usefulness) - Spełnienie przez produkt prawdziwych potrzeb użytkowników (czy strona internetowa daje użytkownikowi to, po co na nią wszedł?)

Interfejs (interface) – tu: graficzne przedstawienie systemu na ekranie

Link (hiperłącze) – odsyłacz do innego dokumentu lub pliku

Mapa strony (sitemap) - protokół zawierający szczegółowe informacje dotyczące wszystkich adresów URL witryny

Marketing szeptany - działania marketin-gowe, których zadaniem jest dotarcie do odbiorców za pośrednictwem przekazu ustnego (generowanego zwykle przez innego odbiorcę)

Nauczalność (learnability) – mówi o tym, jak łatwo jest wykonać proste zadania przy pierwszym kontakcie z produktem

Tagline (slogan) - krótkie, kilku-wyrazowe hasło reklamowe, które znajduje się w górnej części strony internetowej tuż przy logotypie. Jego celem jest jak najkonkretniej wyjaśnić użytkownikowi, co znajdzie na stronie, lub czym zajmuje się firma

Typografia – forma i kształt znaków pisarskich (liter, cyfr itp.) i sposób ich odwzorowania na ekranie komputera

Usability engineering – badanie, w jakim stopniu i z jaką efektywnością użytkownik może wykonać dane zadanie w aplikacji czy korzystając z serwisu internetowego

UX design (user experience design) - projektowanie, którego celem jest wywołanie w użytkowniku pozytywnego wrażenia

Użyteczność (usability)- Zbiór cech danego produktu, dzięki którym kontakt z nim jest dla użytkownika wygodny i łatwy.

Wiarygodność (credibility) - Upewnienie użytkownika, że przedstawiony produkt jest najlepszą odpowiedzią na jego potrzeby oraz wzbudzenie w użytkowniku zaufania do jego sprzedawcy

WWW – jedna z usług internetowych. Zbiór dokumentów zbudowanych przy pomocy specyficznego języka i odnoszących się do siebie nawzajem dzięki linkom

Znajdowalność (findability) - możliwość odnalezienia strony internetowej przez użytkownika, odpowiednia komunikacja marketingowa i nazewnictwo