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

Sonja Hoffmann Ostatnia aktualizacja 21.10.2020
.
. 8 Min.
UX Projektowanie Użyteczność
Ostatnia aktualizacja 21.10.2020

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łem 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?

Dlaczego powinienem zawracać sobie głowę UX?

Wielu znanych mi projektantów polscy ma silne zaplecze w projektowaniu komunikacji - wywodzą się więc z kierunku mediów drukowanych. Tutaj tworzą wyrafinowane kompozycje, które prezentują precyzyjny przekaz.

W 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 więcej do zrobienia, jak tylko odebrać wiadomość, zrozumieć ją i podjąć decyzję (zakupową).

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?

User experience według dzisiejszych standardów nie zaczyna się w momencie wejścia na stronę internetową i nie kończy się w momencie jej opuszczenia. To raczej opis całego doświadczenia, 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ć niebagatelny wpływ na wyniki sprzedaży. To, co mnie osobiście napędza, to obowiązek operatora strony, aby nie frustrować użytkownika.

Afordancje, znaczniki i informacje zwrotne

Mówiąc prościej, afordancja opisuje to, co jest ogólnie możliwe. Na przykładzie ekranu komputera stacjonarnego, byłaby to możliwość "klikania". Ponieważ byłoby to bezczynne i frustrujące, gdybyś musiał klikać losowo w każdym miejscu na stronie, wbudowaliśmy znaczniki (wskaźniki). Pokazują one użytkownikowi, gdzie coś jest możliwe i co. 

Jednym z najbardziej znanych znaczników jest guzik. Wyznacza on obszar interakcji. Wiemy, że jeśli klikniemy tutaj, to coś się stanie. Jest to zwykle wzmacniane przez efekty hover - lub gdy kursor zamienia się w palec wskazujący, gdy na niego najeżdżam. Są to również sygnifikatory.

Czym są afordancje, znaczniki i sprzężenie zwrotne?

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

Aktywny stan przycisku pokazuje mi jako informację zwrotną, że coś się stało, gdy na niego kliknąłem. Wszystkie trzy procesy łączą się ze sobą i mogą pomóc jako podstawowe pytania, aby Twoja strona była bardziej przyjazna dla użytkownika.

  1. Jakie interakcje są ogólnie możliwe?
  2. Jak mogę pokazać moim użytkownikom, że są one możliwe?
  3. Skąd wiedzą, że postąpili "właściwie"?

Możliwość interakcji jest często określana przez urządzenie używane do uzyskania dostępu 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ą czytelne tylko wtedy, gdy najedzie się na nie myszką? Wtedy mobilny odwiedzający nie rozpoznaje, że interakcja jest w ogóle możliwa. 

Użytkownicy wchodzą w interakcje fizyczne i cyfrowe

Afordancje i znaczniki mogą również wykraczać poza interfejs strony internetowej. Na Twojego gościa mogą wpłynąć okoliczności zewnętrzne lub może on wykorzystywać pewne interakcje w sposób inny niż pierwotnie zamierzony. Na przykład, przycisk wstecz przeglądarki jest okolicznością zewnętrzną w stosunku do Twojej strony internetowej. 

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 wykorzystywane "niepoprawnie" - przykład

Często rezerwuję loty za pośrednictwem zagranicznego usługodawcy, którego strona domyślnie nie jest wyświetlana ani w języku niemieckim, ani angielskim. Nagle nie mogłem znaleźć ustawień językowych w wersji mobilnej. Przypomniałem sobie jednak, że już wcześniej wchodziłem na stronę przez aplikację, gdzie domyślnie wszystko było wyświetlane po angielsku. Od tego czasu wchodzę na stronę mobilną tylko przez objazd "aplikacji", ponieważ pamiętam to i dlatego, że wolę wykonać dwa kliknięcia więcej niż klikać w frustrację na 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.

Dlaczego warto przeprowadzać testy użyteczności?

Przy okazji, najlepszym sposobem na poznanie takich zachowań jest obserwacja. To, kto testuje stronę, jest stosunkowo mało istotne. Nie jest konieczne, aby znaleźć ludzi, którzy faktycznie korzystają z witryny po jej zakończeniu. Ponieważ naprawdę rażące błędy użyteczności występują u prawie każdego użytkownika. 

Co ważne, nie mów testerowi, co ma robić lub jak dojść do celu. Kluczem jest zidentyfikowanie i odnotowanie możliwych przeszkód i komplikacji, aby uczynić Twoją stronę bardziej przyjazną dla użytkownika. Im mniej powiesz respondentowi, tym bardziej bezstronne będą wyniki.

4 różne wskaźniki

Jakie sygnały możesz ustawić na swojej stronie, aby podkreślić interakcje? Wyróżniamy cztery różne kategorie, które pokrótce Państwu 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" jest przykładem prostego znacznika explicite.

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 na logo prowadzi z powrotem na stronę główną. Albo, że niebieski podkreślony tekst reprezentuje link. Takim zjawiskiem jest również pasek nawigacyjny strony internetowej, z którego korzystamy dzisiaj. Oczekujemy, że znajdą się one w określonych miejscach na stronie. Wiemy, że pasek nawigacyjny służy jako przewodnik po treści, prowadząc 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).

UX Design & Web Usability: Co kryje się za User Experience?
https://bulka.cafe/

3. ukryty znacznik

Można je zobaczyć tylko po wykonaniu określonej akcji, takiej jak najechanie kursorem lub przewijanie. 

Ukryte znaczniki mają tę zaletę, że sprawiają, iż układ wygląda czysto i schludnie. Mogą więc sprawić, że Twój projekt będzie bardziej usprawniony. 

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 call-to-actions pojawiają się po najechaniu kursorem. Ponieważ użytkownik intuicyjnie klika na obraz, aby dodać go do swojej kolekcji, funkcja ta najprawdopodobniej nie pozostanie niezauważona.Niemniej jednak, projektanci opracowali plan B: Kliknięcie na obrazek powoduje wyświetlenie dużego widoku, 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 przegląd strony. Menu na dole wysuwa się tylko wtedy, gdy użytkownik przewija je w górę - co na początku wydaje się niezwykłe, ale jest też bardzo intuicyjne. Kiedy szukamy nawigacji, zazwyczaj przewijamy stronę do góry. 

Jednak dodatkowe call-to-actions - podobnie jak w przypadku wersji desktopowej - są dostępne dopiero po kliknięciu na obraz. Nie są to już zatem ukryte znaczniki. 

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 sądzę, aby było to wskazane. Jeśli użytkownik przełącza się z wersji mobilnej na desktopową lub odwrotnie, użycie tych samych ikon spowodowałoby szybszą orientację. Dzięki temu użytkowanie przebiega płynniej. 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żyjesz skrzynki pocztowej, może to zaszkodzić użyteczności Twojej strony internetowej. Dlaczego? Użytkownik musi się zatrzymać i zastanowić nad kolejnym krokiem. Musi on zadać sobie pytanie, czy ten symbol odpowiada temu, co chce osiągnąć.

UX Design & Web Usability: Co kryje się za User Experience?
Copyright: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Wnioski

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 jest możliwe zbudowanie strony w taki sposób, aby nie było przerwy? Najprawdopodobniej nie. W zależności od prezentowanych informacji, pewne przerwy, ukierunkowane myśli i łagodna 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ć, rewizja: zdroworozsądkowe podejście do użyteczności stron internetowych", Steve Krug.
  • "The Design of Everyday Things", Donald A. Norman.
  • https://www.uxpin.com/ oferuje kilka bardzo interesujących e-booków do pobrania za darmo
Twoje pytania dotyczące User Experience

Jakie masz pytania dotyczące web usability i projektowania user experience? Jakie procesy mogą Państwo polecić? Zapraszamy do skorzystania z funkcji komentarza. Chcesz uzyskać więcej wskazówek na temat projektowania i tworzenia stron internetowych? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

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