User Experience (UX) a User Intefrace (UI) - o co w tym właściwie chodzi? O znaczeniu projektowania stron WWW
User Experience Design jak sama nazwa wskazuje, jest projektowaniem nastawionym na maksymalizację poziomu zadowolenia u użytkownika, który korzysta z naszej strony internetowej, sklepu czy też produktu. Projektując w myśl UX, koncentrujemy się więc na tym, aby funkcjonalność i użyteczność naszego produktu przynosiła odbiorcy jak najwięcej pozytywnych emocji, czy to przez przejrzysty interfejs, czy przez intuicyjną nawigację na stronie.
Przeciętnemu użytkownikowi wystarczy 10 sekund na stronie internetowej, żeby podjąć kluczową decyzję - zostać na dłużej czy wyjść i nie wracać. Ma to szczególne znaczenie na konkurencyjnym rynku. Pierwsze wrażenie nie musi wywoływać efektu WOW, ma sprawić, że potencjalny klient zainteresuje się naszą stroną, a co za tym idzie - naszą działalnością i naszymi produktami. To właśnie dlatego tak ważne jest przemyślane projektowanie stron WWW.
To wydaje się być oczywiste, ponieważ projektując dany produkt, zawsze chcemy, aby był on przez użytkownika jak najlepiej odebrany, jednakże projektowanie w myśl User Experience skupia się na tym aspekcie wyjątkowo mocno. Jest tak, ponieważ odpowiedzialny UX Designer, zanim rozpocznie jakiekolwiek szkice czy prototypy Lo-Fi produktu, musi najpierw dostrzec i zdefiniować problem, który swoim produktem będzie chciał rozwiązać. Następnie powinien dokonać analizy rynku i konkurencji, poznać oczekiwania potencjalnych przyszłych nabywców produktu. Dopiero wtedy, po wielu etapach badań, wywiadów i ankiet, projektant jest w stanie stworzyć pierwsze zarysy pożądanego przez odbiorców produktu.
UX - User Experience - z czego się składa?
UX bada emocje, które towarzyszą użytkownikom przeglądającym stronę i nie chodzi tu o aspekt wizualny tylko o to czy przeglądanie i nawigacja po stronie nie wywołuje uczucia znużenia, zirytowania i zakłopotania. Dobry UX jest intuicyjny i prosty w obsłudze dla potencjalnego klienta naszej usługi czy naszego produktu.
W skład prawidłowo zaprojektowanego UX, w aspekcie projektowania WWW, wchodzą takie elementy, jak:
- Architektura informacji
Jest to odpowiednie rozplanowanie ilości i kolejności ekranów/widoków oraz ich elementów składowych. Innymi słowy, projektant musi dokonać podziału treści przedstawianych na stronie na najbardziej istotne, mniej istotne oraz dodatkowe i rozmieścić je w taki sposób, aby wszelkie najważniejsze informacje były łatwo dostępne i dobrze widoczne dla każdego odwiedzającego stronę.
- Interfejs użytkownika
Ten element jest ściśle powiązany z architekturą informacji, ponieważ wcześniejszy podpunkt mówił o miejscu, w którym powinny znaleźć się najważniejsze informacje, ten natomiast mówi o sposobie zaprezentowania owej treści. Przykładowo, jeśli pierwszy podpunkt mówił o menu strony, które powinno być u góry całej strony, w tym punkcie powinniśmy się zastanowić nad tym, w jakim stylu czy kolorystyce powinno ono być zaprezentowane.
- Projektowanie interakcji
Polega ono na zaprojektowaniu wszelkich akcji, które będą miały miejsce w wyniku działań podjętych przez użytkownika. Kontynuując przykład menu, w tym miejscu powinniśmy przemyśleć jakie zmiany nastąpią na stronie w momencie, kiedy użytkownik kliknie dany element menu, jaka animacja powinna nastąpić, czy powinno się rozwinąć submenu?
- Komunikacja
Każda zaprojektowana strona internetowa komunikuje, czy tego chcemy, czy nie. Źle zaprojektowana komunikuje o braku profesjonalizmu, dobrze - wręcz przeciwnie. Postarajmy się więc, aby design, który tworzymy, dawał użytkownikom pewność, że jesteśmy godni zaufania. Ponadto nasza strona musi być prosta w odbiorze i przekazywać treści w zrozumiały dla odbiorcy sposób.
- Problem badawczy
Tak jak wcześniej wspomniałem, najważniejszym elementem projektowania w myśl UX, jest zdefiniowanie problemu, który chcemy rozwiązać poprzez wprowadzenie naszego produktu. Dlatego bardzo ważne jest, aby na bieżąco po wprowadzeniu wszelkich zmian na naszej stronie kontrolować jej działanie i zadawać sobie pytanie “Czy nadal spełnia ona swoje założenia?”
- Strona techniczna
UX Design jest bardzo rozbudowane na etapie projektowania, trzeba zadbać o bardzo wiele aspektów, tak jak wspomniałem - problem badawczy, architektura informacji, styl graficzny, zaprojektowanie interakcji. Jednakże User Experience nie kończy się wraz z wypuszczeniem finalnej wersji produktu/strony, sięga on daleko ponad ten moment, ponieważ równie ważne jest dalsze kontrolowanie i nadzorowanie funkcjonowania naszego produktu. Powinniśmy regularnie analizować i interpretować zachowania odbiorców i wychodzić naprzeciw ich oczekiwaniom.
UX vs. UI. Czym jest UI - User Interface?
UI to zbiór metod, styli, rozwiązań i pozostałych środków wyrazu, których zadaniem jest zaprojektowanie wygodnego w użyciu i estetycznego interfejsu użytkownika. UI zajmuje się projektowaniem wszystkich elementów wizualnych, które służą i ułatwiają sterowanie i nawigację oraz wywołanie odpowiednich akcji systemu. Na stronie internetowej będą to, np. przyciski, menu, galerie, formularze ale też rozkład tekstu czy dobór odpowiedniej kolorystyki. W skrócie, UI to wszystko co widzimy. O zasadach tworzenia poprawnych formularzy pisaliśmy już wcześniej.
Bardzo często strony są do siebie podobne: menu na samej górze, logo w lewym, górnym rogu, zdjęcie produktu, sekcje z informacjami i stopka. Czasami spotkamy formularz kontaktowy, czasami newsletter, a prawie zawsze sekcję z przyciskiem, który wywołuje główną akcję serwisu. Ta powtarzalność wynika z prostej zasady. Projektując UI należy mieć na uwadze przyzwyczajenia użytkowników. Oczywiście, nikt nikomu nie broni złamać panujące trendy i reguły. Trzeba to jednak zrobić w sposób przemyślany i najlepiej poparty odpowiednimi analizami.
Często pojęcie User Experience (UX) jest mylone z User Interface (UI), jest to spory błąd. Zgadza się, terminy te są powiązane ze sobą, jednakże polegają na zupełnie innym podejściu do tematu projektowania.
Jak już wiemy, UX Designer odpowiedzialny jest głównie za aspekty psychologiczne projektowanego produktu, w dużo mniejszym stopniu odpowiedzialny jest za stronę czysto wizualną. Jego zadaniem jest sprawienie, aby produkt końcowy został jak najlepiej odebrany przez użytkowników, dba o to, aby przykładowo strona WWW była czytelna i przejrzysta, jej treść wartościowa a samo jej funkcjonowanie sprawne i angażujące.
UI Designer natomiast odpowiada za przygotowanie elementów, takich jak szata graficzna strony, wizualne elementy składowe strony (grafiki, zdjęcia, ikony). Innymi słowy, osoba projektująca User Interface powinna sprawić, aby to, co zaplanował UX Designer stała się jak najbardziej estetyczna i atrakcyjna dla odbiorcy, nie zaburzając przy tym założeń funkcjonalności i użyteczności.
Co prawda każda firma z rozbudowanym sektorem graficznym ma inne podejście do tych dwóch stanowisk, przez co coraz ciężej jest określić wyraźne różnice pomiędzy nimi. Jednakże niektóre z nich pozostają niezmienne, niektóre z nich chciałbym tutaj przybliżyć.
Umiejętności, które powinien posiadać UX i UI Designer
UX Designer: Analityczny umysł, praca z klientem, rozbudowane umiejętności interpersonalne, sprawne łączenie faktów i informacji, umiejętność wyciągania wniosków, duża cierpliwość i otwartość, mile widziana również prawidłowa dykcja.
UI Designer: Wysokie poczucie estetyki, twórczość, kreatywność, umiejętności informatyczne, sprawna obsługa programów graficznych, podążanie za zmieniającymi się trendami w projektowaniu.
Styl wykonywanej pracy UX i UI Designera
UX Designer większość swojej pracy odbywa z klientem lub potencjalnym klientem, to z nim przeprowadza wywiady, ankiety, to jest najważniejszy aspekt jego pracy.
UI Designer natomiast najwięcej czasu poświęca na korzystaniu z oprogramowań graficznych, dzięki którym będzie w stanie osiągnąć jak najlepsze rezultaty wizualne.
Przejdźmy więc do najważniejszego aspektu UX - konwersja
Konwersja jest wskaźnikiem skuteczności Twojej strony. Jaki wpływ ma odpowiednio zaprojektowany User Experience na stronę lub sklep internetowy? Ogromny! Nawet niewielki błąd popełniony przez projektanta może sprawić, że użytkownicy przeglądający nasz sklep poczują frustrację, a co za tym idzie porzucenie swojego koszyka. UX Designer musi podczas tworzenia projektu sklepu internetowego zwrócić uwagę zarówno na całość emocji, które dostarcza użytkownikowi proces dokonywania zakupów na naszym sklepie, jak i na każdym poszczególnym kroku.
Jednym z najciekawszych przykładów przełożenia się UX na konwersję, jest sytuacja Jareda M. Spool, którą w 2009 roku opisał w swoim artykule. Opowiada on o tym, jak jedna prosta zmiana w procesie dokonywania zakupów w jego sklepie internetowym w ciągu jednego miesiąca przyniosła jego firmie dochód rzędu 15 milionów dolarów - docelowo około 300 milionów USD. Przed zmianą użytkownicy, aby dokonać zakupów, musieli dokonać rejestracji na stronie, która de facto nikomu nie wydawałaby się skomplikowana, należało jedynie wypełnić dwa pola i kliknąć dwa przyciski, jednakże okazało się to na tyle uciążliwe, że mało kto się tej akcji podejmował. Jared M. Spool postanowił więc zmienić proces dokonywania zakupów, od tamtej pory użytkownicy nie byli już zmuszani do zakładania konta, aby sfinalizować zakupy, co ogromnie przełożyło się na współczynnik konwersji. Usunął więc button, kierujący do rejestracji, a zamiast niego powstał nowy przycisk “kontynuuj”, oznajmiający, iż użytkownicy mogą po prostu przejść do płatności bez rejestracji, a w przyszłości, aby proces ten był szybszy, mogą oni założyć konto. Jared ową zmianę nazwał “$300 Million Button”. Jest to idealny przykład tego, iż kwestia profesjonalnego zaprojektowania UX może mieć kluczowe znaczenie dla naszego biznesu i nie powinniśmy na nim oszczędzać.
Tworzenie a projektowanie
Lubimy dobrze wyglądać, dobrze czujemy się w zadbanym pomieszczeniu czy ogrodzie, doceniamy otaczające nas budowle, które od setek lat cieszą nasze oczy, a co wrażliwszych wzrusza sztuka. Ludzie są wzrokowcami, czy tego chcemy czy nie. Wszystko o czym wyżej napisano musiało zostać wytworzone, wyprodukowane czy zbudowane. Sekret tkwi jednak w odpowiednim zaprojektowaniu wszystkich elementów. Zazwyczaj nic nie jest przypadkowe.
To samo tyczy się stron internetowych. Bez odpowiedniego projektu, tworzenie stron byłoby pracą rzemieślniczą, a ich efektem byłyby nieciekawe zlepki różnych, często niepasujących do siebie elementów. Dobrze zaprojektowana, nowoczesna strona internetowa jest kluczem do zatrzymania użytkownika na dłużej. Dlatego tak ważny w początkowym etapie pracy nad witryną jest projektant WWW.
Na co więc warto zwrócić uwagę podczas projektowania UX?
Pozwolę sobie tutaj przytoczyć kilka ważnych wskazówek, które pomogą w jak najlepszym zaprojektowaniu strony WWW w myśl User Experience.
- Zasada 5 sekund - wg. przeprowadzanych badań, tyle właśnie wystarczy naszemu użytkownikowi, aby wyrobił sobie opinię na temat tego, co widzi na stronie.
- Afordancja - oznacza cechę naszej strony, która sugeruje jej funkcję. Np. kształt buttona powinien sugerować, że możemy w niego kliknąć.
- Architektura informacji - tak jak wspomniałem wyżej, jest to kluczowa kwestia budowy naszej strony, poświęćmy jej sporo uwagi.
- Kolorystyka - Każdy kolor w psychologii postrzegania ma inne znaczenie, zwróćmy szczególną uwagę na to, jakie emocje w odbiorcach wywołują kolory na naszej stronie.
- Błędy użytkownika - Musimy pamiętać o tym, iż nasz użytkownik jest tylko człowiekiem i również popełnia błędy, dajmy mu więc zawsze możliwość poprawienia ich, np. poprzez dodanie przycisków “powrót” przy różnego rodzaju formularzach czy konfiguratorach.
- Clicktracking - Jest to jedna z metod określania zachowań naszych użytkowników, warto na naszej stronie zaimplementować taką wtyczkę, abyśmy dowiedzieli się, czy strona jest intuicyjna i kieruje użytkowników w pożądaną przez nas stroną.
- Mapy cieplne - To rodzaj badania, które mówi nam o tym, ile czasu użytkownik poświęcił na analizowanie czy użycie poszczególnych elementów strony.
- RWD - To skrót od Responsive Web Design, które polega na przygotowaniu naszej strony pod różne rozdzielczości wyświetlania. Aby nasza strona wyświetlała się poprawnie zarówno na komputerach, jak i smartfonach czy tabletach, musimy zadbać o RWD.
- CTA (Call to Action) - to elementy na stronie, których głównym zadaniem jest wywołanie konkretnej reakcji, kliknięcie wskazanego przez nas przycisku bądź zapisanie się na newsletter. Odpowiednio zaprojektowane CTA mocno przekłada się na wzrost konwersji na naszej stronie.
- Ślepota banerowa - na przestrzeni ostatnich lat oraz ze względu na mnogość otaczających nas w życiu codziennym bannerów reklamowych, wykształciła się w nas podświadoma umiejętność ignorowania wszelkich elementów, które wyglądają jak bannery, ponieważ automatycznie wiemy, że nie znajdziemy na nich informacji, których szukamy. Dlatego postarajmy się tworzyć niestandardowe formy przekazania informacji o wszelkich promocjach na naszej stronie.
- Efekt izolacji - warto pamiętać o tym zjawisku. Mówi nam ono o tym, iż element, który znajduje się z dala od pozostałych, zostaje dużo łatwiej zapamiętany, niż gdyby znajdował się on obok pozostałych.
- Ruchy sakkadowe - w przeciągu sekundy, przeciętny użytkownik naszej strony wykona około trzech ruchów sakkadowych (mimowolnych ruchów oka) w poszukiwaniu najważniejszych elementów, postarajmy się, aby wtedy je odnalazł.
UI czy UX? To i to!
Czy projektując stronę internetową można skupić się tylko na jej jednym aspekcie? Albo na wyglądzie albo na użyteczności? Oczywiście, że nie! Dobry projekt powinien dobrze wyglądać i dobrze działać i zawierać zarówno testy UI jak i UX.
Na dużo pytań odpowiedzi może przynieść wykonanie testów A/B. Innym sposobem na zbadanie prawidłowego funkcjonowania witryny jest wykonanie testów przy współpracy z bezpośrednimi użytkownikami serwisu. Należy wówczas przeanalizować, czy badana osoba potrafi bez niczyjej pomocy dostać się do określonych funkcjonalności i wykonać określone akcje oraz zachęcić do mówienia o swoich emocjach. Taka sesja pozwoli na wyciągnięcie odpowiednich wniosków.
Podsumowując, dobra strona internetowa wymaga odpowiedniego projektu wykonanego przez znawcę aktualnych trendów, ale też ciągłej pracy po jej uruchomieniu. Przeprowadzenie odpowiednich testów i wprowadzenie zmian może znacznie podnieść stopień konwersji naszych działań marketingowych.
