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

Sonja Hoffmann Ostatnia aktualizacja w dniu 21.10.2020 r.
8 Min.
Użyteczność projektu UX
Ostatnia aktualizacja w dniu 21.10.2020 r.

User Experience (UX) Design, Usability, Human Interface Design i Human Centered Design - to tylko niektóre z terminów, z którymi coraz częściej mamy do czynienia. Ale co to właściwie jest? Dlaczego użyteczność i doświadczenie użytkownika powinno szczególnie zainteresować Cię jako projektanta stron internetowych? I jak możesz osiągnąć wartość dodaną poprzez UX, nawet jeśli nie masz w swoim zespole UX Designera?

W moim ostatnim artykule na temat harmonijny webdesign Pokazałem ci, jak tworzyć własne wytyczne projektowe. Na harmonijny wygląd sieci wpływa jednak kilka czynników - dlatego już dziś przedstawię Państwu User Experience:

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

Dlaczego miałbym się zajmować UX-em?

Wielu polscy znanych mi projektantów ma silne zaplecze w zakresie projektowania komunikacyjnego - pochodzą więc z kierunku mediów drukowanych. Tworzą wyrafinowane kompozycje, które przedstawiają precyzyjny przekaz.

W projekcie druku ścieżka komunikacyjna jest jasna: jest nadawca (np. plakat lub broszura) i odbiorca (ten, do którego skierowane jest medium). Odbiorca nie ma tu nic więcej do roboty, jak tylko odebrać wiadomość, zrozumieć ją, a następnie podjąć decyzję (o zakupie).

Z drugiej strony, projektowanie stron internetowych jest interaktywne: nie tylko wysyłana jest wiadomość, ale raczej tworzona jest rozmowa. 

Doświadczenie użytkownika: doświadczenie użytkownika

Od początku istnienia Internetu firmy zajmują się psychologicznymi aspektami tych interakcji. Nie mówili wtedy jednak o projektantach UX-ów, ale o Human Interaction Designers - a zawód ten był na ogół znacznie mniej powszechny niż obecnie.

Co to jest User Experience?

Doświadczenia użytkowników według dzisiejszych standardów nie rozpoczynają się w momencie odwiedzania strony internetowej i nie kończą się w momencie jej opuszczenia. Opisuje raczej całe doświadczenie, jakie użytkownik ma z marką lub produktem - od pierwszego do ostatniego kontaktu.

Chciałbym jednak ograniczyć się do tej części strony internetowej, która jest bezpośrednio związana z daną stroną: użyteczność. Droga przez nasz produkt powinna być zatem jak najprzyjemniejsza i jak najbardziej płynna. Niemniej jednak, nie należy ignorować budżetu i wewnętrznych wytycznych firmy.

Dobra użyteczność może mieć znaczący wpływ na wyniki sprzedaży. To, co napędza mnie osobiście, to obowiązek jako operatora strony internetowej, aby nie frustruć użytkownika.

Zgodność, znaczenie i informacja zwrotna

Mówiąc prościej, afordancja opisuje to, co jest ogólnie możliwe. Na przykładzie ekranu pulpitu, byłaby to możliwość "kliknięcia". Ponieważ przypadkowe kliknięcie w dowolnym miejscu na stronie internetowej byłoby bezcelowe i frustrujące, zamieszczamy na niej znaczniki. Pokazują one użytkownikowi, gdzie coś jest możliwe i co. 

Jednym z najbardziej znanych znaczników jest guzik. Ogranicza to obszar interakcji. Wiemy, że kiedy klikamy tutaj, coś się dzieje. Zazwyczaj jest to intensyfikowane przez efekty hover - lub gdy kursor zamienia się w palec wskazujący, gdy się nad nim poruszam (hovere). To też są znaczniki.

Czym są afordancje, znaczniki i opinie?

Affordance opisuje, jaka interakcja jest generalnie możliwa. Znaczniki (wskaźniki) 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 go kliknąłem. Wszystkie trzy procesy są ze sobą powiązane i od samego początku mogą przyczynić się do tego, że Twoja strona będzie bardziej przyjazna dla użytkownika.

  1. Jakie interakcje są generalnie możliwe?
  2. Jak mogę pokazać moim użytkownikom, że jest to możliwe?
  3. Skąd oni wiedzą, że zrobili "dobrze"?

Możliwość interakcji jest często definiowana przez urządzenie służące do dostępu do strony internetowej: W przypadku (standardowego) komputera stacjonarnego nie ma możliwości machania i dotykania, natomiast na urządzeniach przenośnych nie występuje efekt podwieszenia.

To jest dokładnie to, co należy wziąć pod uwagę przy wyborze znaczników. Na przykład, czy linki stają się jasne tylko wtedy, gdy najeżdżam na nie myszką? Wtedy mobilny gość nie rozpoznaje, że interakcja jest nawet możliwa. 

Użytkownicy współdziałają fizycznie i cyfrowo

Affordances and signifiers mogą również wykraczać poza interfejs Twojej strony internetowej. Twój gość może być pod wpływem okoliczności zewnętrznych lub korzystać z niektórych interakcji w inny sposób niż pierwotnie zakładano. Na przykład, przycisk wsteczny przeglądarki jest funkcją, która znajduje się poza Twoją stroną internetową. 

Jeśli odwiedzający przypadkowo przeszedł do części Twojej strony, w której nie może znaleźć tego, czego szuka, prawdopodobnie nawiguje za pomocą przycisku wstecz zamiast linków na Twojej stronie. 

W jaki sposób interakcje są celowo wykorzystywane "nieprawidłowo" - przykład

Często rezerwuję loty za pośrednictwem zagranicznego usługodawcy, którego strona nie jest domyślnie wyświetlana w języku niemieckim lub angielskim. Korzystając z wersji mobilnej nagle nie mogłem znaleźć ustawień językowych. Przypomniałem sobie jednak, że miałem już dostęp do strony poprzez aplikację, w której domyślnie wszystko było wyświetlane w języku angielskim. Od tego czasu wchodzę na stronę mobilną tylko poprzez objazd "app", ponieważ pamiętam o tym i wolę zrobić jeszcze dwa kliknięcia niż klikać frustrująco na stronie mobilnej.

Należy jednak mieć również świadomość, że nie można "reedukacji" użytkowników. Nie możesz ich "zniechęcać" do takiego "złego" zachowania, ale możesz zaplanować takie zachowanie i upewnić się, że jest wystarczająco dużo alternatyw.

Innym dobrym przykładem, który już spowodował bóle głowy u nas wszystkich, jest - niestety nadal szeroko rozpowszechnione - korzystanie z przestarzałych przeglądarek lub Internet Explorera. Niektóre układy nie są wyświetlane tak kreatywnie, jak na przykład w Firefoksie czy Chrome. Nawet jeśli jest to irytujące, musimy projektować i programować dla tych użytkowników w ten sam sposób.

Gorsze niż korzystanie z aplikacji, aby uzyskać dostęp do strony lub przycisk wstecz, na przykład, jest, gdy użytkownik strony rezygnuje całkowicie - albo dlatego, że korzystanie z naszej strony stwarza zbyt wiele frustracji lub ponieważ istnieje zbyt mało alternatyw dla obsługi błędów.

Dlaczego testowanie użyteczności?

Przy okazji, najlepszym sposobem, aby dowiedzieć się o takich zachowaniach jest obserwowanie ich. Ktokolwiek testuje stronę internetową, jest stosunkowo nieistotny. Nie jest konieczne znalezienie osób, które faktycznie będą później korzystać z serwisu. Bo naprawdę poważne błędy użyteczności występują u prawie każdego użytkownika. 

Ważne jest, aby nie mówić testerowi, co ma robić i jak się tam dostać. Najważniejsze jest, aby zidentyfikować i zapisać ewentualne przeszkody i komplikacje, aby uczynić Twoją stronę bardziej przyjazną dla użytkownika. Im mniej powiesz osobie testującej, tym bardziej bezstronny będzie wynik.

4 różne wskaźniki

Jakie sygnały można ustawić na swojej stronie, aby podkreślić interakcje? Wyróżniamy cztery różne kategorie, które pokrótce państwu przedstawię.

1. wyraźne oznaczenie

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 one być możliwie jak najbardziej jasne i zwięzłe. Ponadto, w trosce o prostotę, należy oprzeć się na znanych recepturach i unikać rzekomo twórczych sformułowań. 

Wartość rozpoznawania pozwala użytkownikowi wiedzieć z dużą dozą pewności, jakiego rezultatu może oczekiwać po interakcji.

"ZOBACZ WIĘCEJ" jest przykładem prostego, wyraźnego znaczenia.

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

2. wzorce projektowe: wzory i konwencje

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

Każdy powinien wiedzieć, na przykład, że kliknięcie na logo prowadzi z powrotem do strony z indeksem. Albo ten niebieski podkreślony tekst stanowi link. Kolejnym takim zjawiskiem jest pasek nawigacyjny strony internetowej - tak jak go dzisiaj używamy. Spodziewamy się, że pojawi się on w pewnych miejscach na stronie. Wiemy, że Nav Bar służy nam jako spis treści i prowadzi nas po stronie internetowej. Pasek menu, który na urządzeniach przenośnych zamienia się w ikonę Hamburga, również nie wymaga dalszych wyjaśnień. 

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

Zaskakujące jest to, że projekty te mają często międzynarodowe znaczenie. Widzisz to szczególnie dobrze, jeśli chcesz się zorientować na stronie, której języka nie znasz. Więc warto nie wymyślać tu koła na nowo. Zamiast tego, dla lepszej użyteczności Twojej strony, zaleca się zajęcie się ustalonymi wzorcami. 

Widać to wyraźnie na przykładzie jednej ze stron (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 nawigacyjnym jestem i jestem w stanie odfiltrować najważniejsze informacje (kontakt) na początku.

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

3. ukryte znaczniki

Można je zobaczyć tylko poprzez wykonanie określonej czynności, takiej jak nachylanie i przewijanie. 

Ukryte znaczniki mają tę zaletę, że sprawiają, że układ wygląda czysto i schludnie. Więc mogą wyszczuplić twój projekt. 

Mają one jednak również pewne wady. Użytkownik znajduje je tylko wtedy, gdy albo wie, że są obecne, albo przypadkowo wykonuje interakcję wywołującą. Dlatego też, sygnały te nie są odpowiednie dla ważnych, ale co najwyżej dla drugorzędnych wezwań do działania (wywołanie do działania).

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

Dobrym przykładem jest Pinterest:

Zainteresowanie

W wersji desktopowej nowe funkcje wywoływania pojawiają się po najechaniu kursorem. Ponieważ użytkownik intuicyjnie klika na obraz, aby dodać go do swojej kolekcji, funkcja najprawdopodobniej nie pójdzie niewykryty, ale projektanci opracowali plan B: Kliknięcie na obrazek powoduje wyświetlenie dużego widoku, w którym widoczne są wszystkie możliwe interakcje.

Ciekawie jest zobaczyć, jak całość jest rozwiązana w wersji z ekranem dotykowym. Tutaj również istnieją ukryte interakcje - ale dla różnych celów.

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

Na lewym zdjęciu widoczny jest ogólny przegląd strony. Menu na dole chowa się tylko wtedy, gdy użytkownik przewinie się w górę - co na początku wydaje się niezwykłe, ale jest również bardzo intuicyjne. Kiedy szukamy nawigacji, zazwyczaj przewijamy w górę. 

Dodatkowe funkcje wywoływania - podobnie jak w wersji desktopowej - są dostępne tylko po kliknięciu na obrazie. Więc nie są już ukrytymi znaczącymi. 

Zaskoczył mnie jednak fakt, że Pinterest używa dwóch różnych ikon do tej samej interakcji w obu wersjach. Z punktu widzenia użyteczności, nie sądzę, aby było to godne polecenia. Jeśli użytkownik przełączy się z wersji mobilnej na stacjonarną lub odwrotnie, użycie tych samych ikon ułatwi znalezienie drogi. Dzięki temu użytkowanie jest bardziej płynne. Użyteczność jest pozytywnie wzmacniana.

4. znaczniki metaforyczne

Lupa, która sygnalizuje, że pole poszukiwawcze znajduje się tutaj. 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 zastosowanie w świecie cyfrowym rozwinęło się w wzór wzornictwa. Musisz jednak być tu ostrożny: Użycie metaforycznego wskaźnika ze zmodyfikowanym symbolem może dezorientować użytkowników.

Na przykład, jeśli użyjesz skrzynki pocztowej zamiast znanej koperty, może to uszkodzić użyteczność Twojej strony internetowej. Dlaczego? Użytkownik musi zrobić przerwę i rozważyć następny krok. Musi 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 jedynie, że Twoi goście w jakiś sposób znajdą się na stronie. Użyteczność oznacza, że nacisk kładziony jest na odwiedzającego jako całość - "podróż" przez Twoją stronę powinna być jak najbardziej płynna. 

Każdą przerwę - tzn. za każdym razem, gdy użytkownik musi się zatrzymać i zadać sobie pytanie: "Co tu właściwie jest oferowane? Co się dzieje, gdy na nią klikam? Czy wtedy wrócę? Gdzie ja się znajduję? Jak ja się tu dostałem?" - jest nieproduktywny.

Czy można zbudować stronę tak, aby nie było przerwy? Bardzo prawdopodobnie nie. W zależności od wyświetlanych informacji mogą być nawet pożądane pewne zakłócenia, ukierunkowane myślenie i lekka frustracja.

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

Zalecana lektura

Jedną z najbardziej znanych książek o użyteczności jest "Nie zmuszaj mnie do myślenia!" przez Steve'a Krug'a. Tytuł jest tu programem i w końcu o to chodzi w każdym podejściu do użyteczności.

  • "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability," Steve Krug
  • "The Design of Everyday Things", Donald A. Norman
  • https://www.uxpin.com/ oferuje kilka bardzo interesujących e-booków do bezpłatnego pobrania
Twoje pytania dotyczące User Experience

Jakie masz pytania dotyczące użyteczności sieci i projektowania doświadczeń użytkownika? Jakie procesy można polecić? Proszę skorzystać z funkcji komentarza. Chcesz uzyskać więcej wskazówek dotyczących projektowania i rozwoju stron internetowych? Następnie podążaj za nami dalej TwitterFacebook albo zasubskrybuj nasz cotygodniowy Newsletter.

Po studiach projektowania gier i kreatywnego pisania w zielonym regionie Auckland, wyspecjalizował się Sonja Hoffmannw projektowaniu stron internetowych i aplikacji oraz ich rozwoju. Skupia się na gamifikacji i badaniu motywacji i doświadczenia użytkowników, w połączeniu z pasją i ciekawością trendów technologicznych.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.