UX-Design-Usability

UX Design & Web Usability: Co kryje się za User Experience?

User Experience (UX) Design, Usability, Human Interface Design i Human Centered Design - to tylko kilka terminów, z którymi coraz częściej się spotykamy. Ale co to właściwie jest? Dlaczego powinieneś interesować się użytecznością i doświadczeniem użytkownika jako projektant stron internetowych? I jak możesz osiągnąć wartość dodaną poprzez UX nawet jeśli nie masz projektanta UX w swoim zespole?

W moim ostatnim artykule na temat harmonijnego projektowania stron internetowych, pokazałam Ci jak stworzyć własne wytyczne projektowe. Jednak harmonijny web design kształtowany jest przez kilka czynników - dlatego dziś przybliżę Ci user experience:

UX Design & Web Usability: Co kryje się za User Experience?

Po co zawracać sobie głowę projektowaniem UX?

Wielu niemieckich projektantów, których znam, ma silne zaplecze w projektowaniu komunikacji - wywodzą się więc z kierunku związanego z mediami drukowanymi. Tutaj tworzą wyrafinowane kompozycje, które przedstawiają precyzyjne przesłanie.

W projektowaniu druku ścieżka komunikacji jest jasna: jest nadawca (np. plakat lub broszura) i odbiorca (osoba, do której skierowane jest medium). Odbiorca nie ma nic innego do zrobienia, jak tylko odebrać wiadomość, zrozumieć ją i podjąć decyzję (o zakupie).

Projektowanie stron internetowych, z drugiej strony, jest interaktywne: to nie tylko wysyłanie wiadomości, to tworzenie konwersacji. 

User Experience: doświadczenie użytkownika

Od wczesnych dni Internetu, firmy przyglądały się psychologicznym aspektom tych interakcji. Wtedy jednak nie mówiło się o projektantach UX, tylko o projektantach interakcji międzyludzkich - a zawód ten był generalnie znacznie mniej popularny niż dziś.

Czym jest User Experience?

Według dzisiejszych standardów doświadczenie użytkownika nie zaczyna się, gdy użytkownik odwiedza stronę internetową, i nie kończy się, gdy ją opuszcza. Opisuje raczej całe doświadczenie, jakie użytkownik ma z marką lub produktem - od pierwszego do ostatniego kontaktu.

Chciałbym jednak ograniczyć się tylko do tego podobszaru, który jest bezpośrednio związany ze stroną internetową: użyteczności. Dlatego droga do naszego produktu powinna być jak najbardziej przyjemna i bezproblemowa. Nie należy jednak lekceważyć budżetu i wewnętrznych specyfikacji firmy.

Dobra użyteczność może mieć znaczący wpływ na twoje wyniki sprzedaży. To, co mnie osobiście napędza, to obowiązek właściciela strony, by nie frustrować użytkownika.

Afordancja, znaczniki i feedback

Mówiąc najprościej, affordance opisuje to, co jest ogólnie możliwe. Na przykładzie ekranu biurka będzie to możliwość "kliknięcia". Ponieważ konieczność klikania w dowolne miejsca na stronie byłaby bezużyteczna i frustrująca, wprowadziliśmy znaczniki (wskaźniki). Pokazują one użytkownikowi, gdzie coś jest możliwe i co. 

Jednym z najbardziej znanych znaków rozpoznawczych jest tzw. button. Wyznacza on obszar interakcji. Wiemy, że jeśli klikniemy tutaj, to coś się stanie - zwykle jest to wzmacniane przez efekty typu hover - lub gdy kursor zamienia się w palec wskazujący, gdy na niego najeżdżam. To też są sygnifikatory.

Czym są afordancje, znaczniki i feedback?

Afordancja opisuje, jaka interakcja jest ogólnie możliwa. Znaczniki sygnalizują, że interakcja jest możliwa. Z drugiej strony, feedback sprawia, że użytkownik wie, że jego interakcja coś wywołała.

Aktywny stan przycisku jest dla mnie informacją zwrotną, że coś się stało, gdy na niego kliknąłem. Wszystkie trzy procesy są ze sobą powiązane i można je wykorzystać jako podstawowe pytania, które pomogą uczynić twoją stronę bardziej przyjazną dla użytkowników.

  1. Jakie interakcje są generalnie możliwe?
  2. Jak pokazać moim użytkownikom, że ich działania są możliwe?
  3. Skąd wiedzą, że postąpili "właściwie"?

Możliwość interakcji jest często określana przez urządzenie, z którego korzysta się przy dostępie do strony internetowej: Przeciąganie i dotykanie nie jest możliwe na (standardowym) komputerze stacjonarnym, a na urządzeniach mobilnych nie ma efektu hover.

To jest właśnie to, co należy wziąć pod uwagę przy wyborze sygnifikatorów. Na przykład, czy linki są widoczne tylko wtedy, gdy najedzie się na nie myszką? Wtedy odwiedzający z urządzeń mobilnych nie będzie wiedział, że interakcja jest w ogóle możliwa. 

Użytkownicy wchodzą w interakcje fizyczne i cyfrowe

Afordancje i znaczniki mogą także wykraczać poza interfejs twojej strony internetowej. Na odwiedzających Twoją stronę mogą wpływać okoliczności zewnętrzne lub mogą oni używać pewnych interakcji w sposób inny niż pierwotnie zamierzony. Na przykład przycisk wstecz przeglądarki jest okolicznością leżącą poza Twoją stroną. 

Jeśli odwiedzający przypadkowo przeszedł do części witryny, w której nie może znaleźć tego, czego szuka, istnieje duża szansa, że będzie nawigował za pomocą przycisku wstecz - zamiast za pomocą linków na stronie. 

Jak interakcje są celowo używane "nieprawidłowo” - przykład

Często rezerwuję loty przez zagranicznego usługodawcę, którego strona domyślnie nie jest wyświetlana ani po niemiecku, ani po angielsku. Nagle nie mogłem znaleźć ustawień językowych w wersji mobilnej. Przypomniałam sobie jednak, że już wcześniej wchodziłam na stronę internetową przez aplikację, gdzie domyślnie wszystko było wyświetlane po angielsku. Od tamtej pory wchodzę na stronę mobilną tylko przez "aplikację", ponieważ pamiętam o tym i wolę wykonać dwa kliknięcia więcej, niż klikać z frustracją po stronie mobilnej.

Należy również pamiętać, że nie można "reedukować" swoich użytkowników. Nie możesz powstrzymać ich przed robieniem rzeczy w niewłaściwy sposób, ale możesz zaplanować takie zachowanie i upewnić się, że jest wystarczająco dużo alternatyw.

Innym dobrym przykładem, który przysporzył nam wszystkim bólu głowy, jest - niestety wciąż powszechne - korzystanie z przestarzałych przeglądarek, takich jak Internet Explorer. Niektóre układy nie wyświetlają się tak kreatywnie wartościowo, jak np. w Firefoksie czy Chrome. Nawet jeśli jest to irytujące, musimy projektować i programować tak samo dla tych użytkowników.

Ponieważ gorsze od wchodzenia na stronę za pomocą aplikacji, na przykład, lub używania przycisku wstecz, jest to, gdy odwiedzający stronę całkowicie się poddaje - czy to dlatego, że korzystanie z naszej strony powoduje zbyt wiele frustracji, czy też dlatego, że jest zbyt mało alternatywnych sposobów radzenia sobie z błędami.

Po co testować użyteczność?

Tak na marginesie, najlepszym sposobem na poznanie takich zachowań jest obserwacja. To, kto testuje stronę, jest stosunkowo mało istotne. Nie jest konieczne, by potem znaleźć osoby, które faktycznie korzystają z witryny. Bo naprawdę rażące błędy użyteczności zdarzają się prawie każdemu użytkownikowi. 

Ważne jest, byś nie mówił testerowi, co ma robić ani jak dojść do celu. Kluczem jest rozpoznanie i odnotowanie możliwych przeszkód i komplikacji, by twoja strona stała się bardziej przyjazna dla użytkowników. Im mniej powiesz respondentowi, tym bardziej bezstronny będzie wynik.

Cztery różne wskaźniki

Jakie sygnały możesz umieścić na swojej stronie, aby podkreślić interakcje? Rozróżniamy cztery różne kategorie, które pokrótce ci przedstawię.

1. Wyraźny znacznik

Wyraźne znaczniki składają się z podpowiedzi w formie tekstowej, takiej jak "kliknij tutaj". Często można je znaleźć w połączeniu z innymi wskaźnikami, takimi jak formularze kontaktowe lub przyciski. Powinny być one jak najbardziej jasne i zwięzłe. Ponadto, dla uproszczenia, należy oprzeć się na znanych zwrotach i unikać rzekomo kreatywnych sformułowań. 

Wartość rozpoznawcza pozwala użytkownikowi wiedzieć z dość dużą dozą pewności, jakiego wyniku można się spodziewać po interakcji.

„ZOBACZ WIĘCEJ” to przykład prostego znacznika wyraźnego.

UX Design & Web Usability: Co kryje się za User Experience?
https://www.lonelyplanet.com/portugal/lisbon

2. Wzorce projektowe: Wzorce i konwencje

Wzorce projektowe odnoszą się do powtarzających się projektów, do których przyzwyczailiśmy się tak bardzo, że nie wymagają już wyjaśnień ani dalszych odniesień. Jest ich stosunkowo dużo. 

Każdy powinien wiedzieć, że np. kliknięcie w logo przenosi cię z powrotem na stronę główną. Albo że niebieski, podkreślony tekst reprezentuje łącze. Takim zjawiskiem jest też pasek nawigacyjny na stronie internetowej - tak jak go dziś używamy. Oczekujemy ich w określonych miejscach na stronie. Wiemy, że Nav Bar służy nam jako wskaźnik treści i prowadzi nas przez stronę. Pasek menu, który na urządzeniach mobilnych zmienia się w ikonę hamburgera, również nie wymaga dalszych wyjaśnień. 

Wspólne wzorce, których nauczyliśmy się w ciągu ostatnich kilku lat

Zaskakujące jest to, że te wzorce często mają międzynarodową ważność. Widać to szczególnie dobrze, gdy chcemy zorientować się na stronie, której języka nie znamy. Warto więc nie wymyślać koła na nowo. Zamiast tego, zaleca się dla lepszej użyteczności witryny, jeśli masz do czynienia z ustalonymi wzorcami. 

Widać to dobrze na przykładzie strony (losowo wybranej) restauracji w Moskwie. Chociaż nie mówię po rosyjsku ani nie umiem czytać cyrylicy, od razu widzę, jak mogę poruszać się po stronie. Widzę, w którym punkcie nawigacji jestem i mogę od razu odfiltrować najważniejsze informacje (kontakt).

3. Ukryty znacznik

Można je zobaczyć tylko po wykonaniu określonej akcji, np. najechaniu kursorem lub przewinięciu. 

Ukryte znaczniki mają tę zaletę, że sprawiają, że układ wygląda czysto i schludnie. Mogą więc sprawić, że twój projekt stanie się bardziej efektywny. 

Mają one jednak również pewne wady. Są one znajdowane przez użytkownika tylko wtedy, gdy wie on o ich obecności lub gdy przypadkowo wykona wyzwalającą interakcję. Dlatego sygnały te nie nadają się do ważnych, a co najwyżej do drugorzędnych wezwań do działania.

Dodatkowo, używając ukrytych znaczników, należy pamiętać, że dla każdego urządzenia końcowego może być konieczne znalezienie osobnego rozwiązania.

Pinterest daje dobry przykład:

pinterest

W wersji desktopowej nowe wezwania do działania pojawiają się po najechaniu kursorem. Ponieważ użytkownik intuicyjnie klika na obrazek, by dodać go do swojej kolekcji, funkcja ta najprawdopodobniej nie pozostanie niezauważona. Mimo to projektanci opracowali plan B: Jeśli klikniesz na obrazek, uzyskasz duży widok, w którym widoczne są wszystkie możliwe interakcje.

Ciekawe jest to, jak całość rozwiązano w wariancie z ekranem dotykowym. Również tutaj istnieją ukryte interakcje - ale w innych celach.

UX Design & Web Usability: Co kryje się za User Experience?

Lewy obrazek pokazuje ogólny wygląd strony. Menu na dole wysuwa się dopiero wtedy, gdy użytkownik przewinie je do góry - co na początku wydaje się niezwykłe, ale jest też bardzo intuicyjne. Kiedy szukamy nawigacji, zazwyczaj przewijamy w górę. 

Jednak dodatkowe wezwanie do działania - podobnie jak w wersji dla komputerów stacjonarnych - jest dostępne dopiero po kliknięciu na obrazek. Oznacza to, że nie są już ukrytymi znacznikami. 

Zdziwiło mnie jednak, że Pinterest używa dwóch różnych ikon dla tej samej interakcji w obu wersjach. Z punktu widzenia użyteczności nie wydaje mi się to wskazane. Jeśli użytkownik przesiada się z wersji mobilnej na desktopową lub odwrotnie, użycie tych samych ikon ułatwiłoby mu odnalezienie się. Dzięki temu korzystanie z niego jest bardziej płynne. W ten sposób zwiększa się użyteczność.

4. Znacznik metaforyczny

Lupa, która sygnalizuje, że tutaj znajduje się pole wyszukiwania. Koperta, która reprezentuje wysyłanie wiadomości. Przycisk, który sygnalizuje, że można go nacisnąć. Wszystkie zasady mają tą wspólną cechę, że znamy je z prawdziwego świata. 

Ich użyteczność w cyfrowym świecie stała się wzorcem projektowym. Musisz być jednak ostrożny: Jeśli użyjesz metaforycznego wskaźnika ze zmodyfikowanym symbolem, może to zdezorientować użytkowników.

Jeśli na przykład zamiast znanej koperty używasz skrzynki na listy, może to zaszkodzić użyteczności twojej strony internetowej. Dlaczego? Użytkownik musi się zatrzymać i zastanowić nad następnym krokiem. Muszą zadać sobie pytanie, czy ten symbol odpowiada temu, co chcą osiągnąć.

UX Design & Web Usability: Co kryje się za User Experience?

Wnioski dotyczące projektowania UX i użyteczności stron internetowych

Użyteczność nie oznacza tylko, że odwiedzający jakoś odnajdują drogę na stronie. Użyteczność oznacza raczej, że nacisk kładziony jest na odwiedzającego - "podróż" przez Twoją stronę powinna być jak najbardziej płynna. 

Każde przerwanie - czyli za każdym razem, gdy użytkownik musi się zatrzymać i zadać sobie pytanie "Co właściwie jest tu oferowane? Co się stanie, jeśli na nią kliknę? Czy jeszcze tu wrócę? Gdzie się znajduję? Jak się tu znalazłem?" - przynosi w tym względzie efekt przeciwny do zamierzonego.

Czy można zbudować stronę w taki sposób, żeby nie było przerwy? Bardzo prawdopodobne, że nie. W zależności od prezentowanych informacji pewne przerwy, ukierunkowana refleksja i lekka frustracja mogą być nawet pożądane.

Ważne jest, aby znać różne narzędzia, aby móc je wykorzystać w swoim własnym projekcie.

Zalecane lektury

Jedną z najbardziej znanych książek o użyteczności jest"Nie każ mi myśleć!" Steve'a Kruga. Tytuł mówi wszystko i jest w końcu tym, o co chodzi w każdym podejściu do użyteczności.

  • "Nie każ mi myśleć: Zdroworozsądkowe podejście do użyteczności stron internetowych" Steve Krug
  • "Projektowanie rzeczy codziennego użytku" Donald A. Norman
  • UX Pin oferuje ciekawe e-booki do pobrania za darmo

Pytania dotyczące User Experience

Masz jakieś pytania dotyczące użyteczności stron internetowych i projektowania doświadczeń użytkowników? Jakie procesy możesz polecić? Zachęcamy do kormentowania. Chcesz poznać więcej wskazówek dotyczących projektowania i tworzenia stron internetowych? Obserwuj nas na Twitter, Facebook lub za pośrednictwem naszego Newslettera.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.