Świat oczami UX Designera – afordancja, znaczniki i offline’owe inspiracje

Jak wygląda świat oczami UX-a? W tym artykule opowiem Ci o tym co i jak myślę, projektując rozwiązania zorientowane na użytkownika oraz skąd czerpie inspiracje do tworzenia kolejnych produktów.

Aby nie było za nudno, zaplanowałam dla Was trochę trudnych słów (wtedy tekst wydaje się mądrzejszy!) oraz parę wizualnych przykładów. W artykule chciałbym przede wszystkim rzucić inne światło na myślenie o UX i dotknąć tematu UXa nie tylko w produktach cyfrowych.

Wejdźmy do mojego świata

To, co z czasem zacząłem wyraźniej zauważać jako UX, w otaczającym nas świecie, to druga płaszczyzna każdego przedmiotu, który nas otacza. Wiele osób intuicyjnie wie, że taka płaszczyzna istnieje, ale mało osób zastanawia się, na czym ona polega. Dobrym przykładem może być tutaj pojęcie afordancji (chodzi tu o definicję Dona Normana) i znaczników, czyli relacji i oznaczeń przedmiotów, które pozwalają nam zrozumieć jego istotę i możliwe interakcje.

Czym jest afordancja – uwaga pseudonaukowy bełkot!

Afordancja w definicji Dona Normana to możliwości interakcji, pomiędzy człowiekiem, a środowiskiem. Niektóre afordancje mogą być ukryte, a inne widoczne na pierwszy rzut oka. Istnieje też pojęcie antyafordancji (upraszczając — to cecha produktu, która utrudnia interakcje z nim).

Znanym przykładem afordancji są drzwi (z książki Dana Normana „Dizajn na co dzień”).  Możliwości interakcji, jakie dają nam drzwi to pchanie, ciągnięcie, przesuwanie itp. Większości z tych czynności możemy domyślić się na podstawie naszych poprzednich doświadczeń i intuicji, co więcej na drzwiach, zazwyczaj widzimy też klamkę (afordancję), której kształt sugeruje, że za drzwi możemy pociągnąć. Zależności tego typu ułatwiają nam życie każdego dnia.

Dla utrwalenia przyjrzyjmy się innemu przykładowi – szkłu. Jedną z afordancji szkła jest jego przezroczystość, natomiast jego antyafordancją jest blokowanie większości rzeczy, jakie chcemy przez nie przepuścić.

Zatem jeśli użyjemy szklanych drzwi i nie użyjemy przy tym żadnego znacznika, możemy na nie wpaść. W tym wypadku pomóc mogą znaczniki (np. kartka z informacją na drzwiach) lub inne afordancje (np. czujnik, który sam otwiera drzwi).

Z drugiej strony nieumiejętne wykorzystanie znaczników i antyafordancji może wprowadzać ludzi w błąd. W zabawny sposób ukazuje to Gif poniżej, gdzie zabawiono się konwencją znacznika i afordancji.

Drewniana rama drzwi jest znacznikiem dla człowieka, że możęmy je pchnać. Spodziewamy się intuicyjnie, że drzwi posiadają afordancę szkła (przezroczystość) i jej antyafordancję (szkło możemy pchnąć). W związku z tym osoba na Gifie nie jest zdziwiona, że widzi wszystko przez drzwi. W momencie, gdy próbuje je pchnąć, wpada w nie. Dzieje się tak, ponieważ skuteczni usunięto szkło (a co za tym idzie wszystkie afordancje i antyafordancje szkła) nie zastępując go żadnym znacznikiem ani afordancją.

Co nam daje afordancja?

Tego typu przykłady widzimy także w aplikacjach i stronach www. Najprostszym przykładem jest błędne wykorzystanie linków na stronie. Jeśli stworzymy tekst wyglądający jak link, ale w istocie nieposiadający możliwości przekierowania (afordancji), to znacznik w postaci podkreślenia będzie dla nas mylący.

Choć temat wydaje się prosty, wielu projektantów myli wciąż afordancję ze znacznikami. Nic zresztą dziwnego, pojęcie bardzo spodobało się designerom i jakiś czas temu, termin ten był popularny i nagminnie zdarzało się mówienie, że ktoś dodał “afordancję”, gdy w rzeczywistości dodał znacznik, który pokazuje gdzie możemy kliknąć, aby wywołać konkretną akcję.

Przykładowo naklejenie na drzwiach kartki „Pchnij” nie zmienia nagle natury drzwi a jedynie daje wskazówkę jak z drzwi skorzystać. Dzięki znajomości afordancji jesteśmy w stanie tworzyć produkty bardziej świadomie i wcześniej rozpoznawać potencjalne problemy w korzystaniu z naszego produktu. Daje nam to też szanse na lepsze zapobieganie potencjalnym problemom poprzez umiejscowienie znaczników w odpowiedni sposób i w odpowiednim miejscu.

Jak afordancja ma się do produktów cyfrowych?

Afordancje w przypadku usług cyfrowych dotyczą m.in. narzędzia na którym korzystamy z aplikacji / strony www. Jeśli znamy jego (smartfona, tableta, laptopa, myszki, Googli VR itd.) afordancje i antyafordancje (czyli “blokery”), to możemy spróbować wcześniej zareagować na potencjalne problemy.

Jedną z najciekawszych historii jakie znam to przypadek pewnego projektu skierowanego tylko na tablet (w dodatku konkretny model). Zespół stworzył parę wersji, przebadał je i wybrał najlepszą według badań. Standardowo testy użyteczności odbywały się w zamkniętych pomieszczeniach. Po badaniach wdrożono projekt i przetestowano w „terenie”. Co się okazało?

Tablet ze względu na afordancję ekranu, niemiłosiernie odbijał promienie słoneczne (to było już parę lat temu teraz ekran radzą sobie lepiej ;)). Jakby tego mało projekt polegał na stworzeniu interfejsu do pokazywaniu danych z pojazdu zasilanego energią słoneczną (czyli testowany był w południe słonecznego dnia).

Aha… czy wspominałem, że projekt w około 80% miał biały interfejs? Efekt był taki, że użytkownik nie była w stanie wyczytać nic z ekranu mimo iż interfejs spełniał WCAG – słońce odbijało się od tabletu tak bardzo, że było to po prostu niemożliwe.

Jakie było rozwiązanie? Stworzono czarny interfejs i podbito jeszcze bardziej kontrast – nie pomogło to na odbijanie światła od ekranu, ale polepszyło czytelność całego interfejsu. Prosta zmiana ale gdyby uwzględniono afordancję wyświetlacza to może zmiany nie byłyby w ogóle potrzebna.

Taki sposób myślenia wymaga pewnej gimnastyki i czasu, ale sprawia, że zaczynamy otwierać się na nowe możliwości. Nie zawsze też wchodzę tak głęboko w istotę rzeczy, bardzo często są to przemyślenia które wpadają mi do głowy przy okazji obserwacji otaczającego mnie świata lub już po fakcie – cóż nikt nie jest idealny…

Codzienne rzeczy – niezwykłe doświadczenia

Jako UX Designer myślący w ten sposób mam już pewne spaczenie, które każe mi dostrzegać wady i zalety funkcjonalne otaczających mnie przedmiotów. Nie, nie jestem jak Sherlock Holmes dostrzegający wszystko na pierwszy rzut oka – to bardziej zwykłe spostrzeżenia na dodatek zazwyczaj kierowane na rzeczy, które sprawiają mi problemy funkcjonalne.

Chociaż na co dzień zajmuje się budowaniem produktów cyfrowych to dużą część moich inspiracji czerpię właśnie ze świata produktów fizycznych. Czasami nie mogę się oprzeć przed robieniem zdjęć nawet najzwyklejszym rzeczom których funkcji nie da się przenieść jeden do jednego do świata aplikacji i stron internetowych. Przykład poniżej pokazuje jedną z takich rzeczy.

Zdjęcie przedstawia pojemnik z kranikiem jakich wiele możemy kupić w okresie lata. Niewątpliwie jest to bardzo ładna rzecz, ale gdy się jej przyjrzymy możemy dostrzec pewne potencjalne problemy.

Zacznijmy od tego, że kranik jest dosyć wysoko przez co duża ilość napoju marnuje się na dnie (co też może być plusem;)). Co więcej, niefortunne umiejscowienie kranika sprawia, że jedyny sensowny sposób nalania sobie lemoniady to postawienie go na skraju np. stołu a jeśli ktoś do tego wpadnie na pomysł aby podnieść cały pojemnik to ten z łatwością może się nam wyślizgnąć (szkło jest dosyć śliskie) i roztrzaskać (zwłaszcza jeśli nalejemy zimnej wody która oszroni pojemnik).

Co ciekawe jest sporo firm, które wpadły na podobne ograniczenia i starały się je zminimalizować (np. mają rączkę aby bezpieczniej przenosić pojemnik lub posiadają wysokie dno dzięki czemu z pojemnika możemy nalać płyn niemal z samego dna).

Tego typu ćwiczenia uczą mnie patrzenie na produkt jak na organizm, który składa się z wielu zależnych od siebie elementów, wpływających na ostateczne doświadczenie płynące z jego użytkowania. Generalnie zasadę można przyjąć taką – im więcej robi dana rzecz, z tym większej ilości afordancji się składa.

Pozostałe zmysły

Jeszcze na studiach marketingowych zainteresowałem się tematem neuromarketingu, czyli obszaru nauki wykorzystującego narzędzia pomiarowe (m.in Tomografia komputerowa, rezonans magnetyczny itd.) do analizy zachowań psychoemocjonalnych. Upraszczając chodzi o badanie reakcji ludzi na bodźce oddziałujące na nasze zmysły, od wzroku po węch.

Przykładem z realnego świata może być rozpylanie perfum o charakterystycznym zapachu m.in. w sklepach odzieżowych, co może zwiększać przyjemność z przebywania w sklepie (scent marketing). Klienci niekoniecznie muszą zastanawiać się nad tym, czemu akurat w tym sklepie czują się lepiej niż w innych robiąc zakupy – pobyt w nim może być dla nich zwyczajnie prostą i przyjemną czynnością. Od strony projektanta powinniśmy jednak bardziej świadomie na to patrzeć i planować jakie “struny” i zmysły chcemy poruszyć/pobudzić u naszego odbiorcy oraz w jaki sposób chcemy to zrobić i czemu chcemy to robić.

Niestety obecne rozwiązania cyfrowe dają nam bardzo wąskie spektrum doznań, ograniczające się głównie do wzroku oraz słuchu. O ile wzrok jest dla większości z nas oczywisty (UI) to dźwięk błędnie może kojarzyć się ze słabą muzyką w tle na stronach z początku XXI wieku.

Proponuje wam jednak ćwiczenie, zadbajcie o ciche miejsce, zamknijcie oczy i wyobraźcie sobie dźwięczny sygnał powiadomienia na Waszych smartfonach. Jest szansa, że większość z Was rozpozna go teraz w swojej głowie.

Dźwięki mogą zatem nie tylko komunikować nam jakąś akcję ale także wzbogacać doświadczenie z np. aplikacją a nawet wpływać na chemię naszego mózgu (np. dźwięk wysyłanego maila lub odznaczenie wykonanego zadania często wzbudza w nas przyjemność). Z wykorzystaniem dźwięku należy jednak uważać ponieważ jego zbyt częste lub intensywne wykorzystanie może wywołać efekt odwrotny do zamierzonego.

Podsumowanie

W pracy UX Designera staram się patrzeć na rzeczy nie takimi jakimi są teraz, ale takimi jakimi mogą się stać w przyszłości. Wychodzę z założenia, że niemal każdy przedmiot ma jakiś mały minus, który możemy poprawić. Te małe mankamenty mogą czasami zrobić wielką różnicę.

Jeśli zainspirowani naturą i przedmiotami codziennymi, przyjrzymy się dostatecznie blisko naszym produktom cyfrowym, to może dojrzymy coś co pomoże nam w naszej codziennej pracy, a kto wie, może nawet odpowiedź na jakiś problem wyda się nam nagle oczywista? Z pewnością tego Wam życzę.

A na koniec tego filozoficznego artykułu zostawię jeszcze cytat Pauli Scher, który często przyświeca mi podczas projektowania kolejnych aplikacji „It took me a few seconds to draw it, but it took me 34 years to learn how to draw it in a few seconds.”. W wolnym tłumaczeniu “Narysowanie tego zajęło mi parę sekund ale nauczenie się jak to narysować w parę sekund zajęło mi 34 lata”).