To nie jest kosmiczna technologia – o User Interface w służbie użytkownika, który żyje życiem i robi rzeczy~ Agata Kosowska

W UX‑owym światku dość często traktujemy UI jako niesamowitą technologię, niedostępną adeptom (do podejrzenia tylko na pełnym magii i czarów Dribbblu) lub też jako zupełnie marginalne i niewiele wnoszące do Faktycznej Roli Projektu kolorowanie pełnych mocy i siły biznesowej wireframe’ów. W mojej rekruterskiej przygodzie zazwyczaj trafiałam na kandydatów, którzy pomimo świetnego przygotowania do researchu i zaangażowania w proces tworzenia produktu, zupełnie nie byli świadomi tego, co dzieje się z ich produktem po zakończeniu procesu tworzenia lo-fi makiet i jakie to ma znaczenie dla końcowego odbiorcy – użytkownika, na którym koncentrujemy przecież to piękne U w UX, zapisane uppercasem. „Pokoloruje się i fajnie to zadziała przecież”. No to co, pogadamy o kolorowaniu?

Z tego artykułu dowiesz się:

Dlaczego przy projektowaniu UI opłaca się znać i stosować zasady percepcji
Czym jest aesthetic usability effect i dlaczego zakładanie brzydkiej czapki pierwszego dnia w przedszkolu to nienajlepszy pomysł
Co łączy stany buttonów i włączniki światła
Dlaczego warto robić dobry UI!

Aesthetic usability effect a niezbyt ładna czapka

Jedną z zasad percepcji, którą mocno eksploatujemy w projektowaniu dla produktów cyfrowych, jest zasada estetyki (tzw. aesthetic usability effect¹).

Powszechnie znanym faktem jest, że w szerokim ujęciu preferujemy narzędzia i produkty wzbudzające w nas pozytywne emocje.

Nikt nie lubi nosić brzydkich czapek. Ja nie lubię. Czy na poparcie tej tezy mamy tylko i wyłącznie przykłady anegdotyczne, o niewielkiej wadze w charakterze argumentu? Oczywiście, że nie. Już w 1995 roku Misaki Korosu i Kaori Kashimura z Hitachi Design Center zajęli się obserwacją tego efektu². Przestudiowali odpowiedzi 252 uczestników badania, by ocenić łatwość obsługi produktu i wrażenie wywoływane przez 26 różnych propozycji UI ATM. Mocna korelacja między oceną wrażeń estetycznych a bezproblemowości użytkowania produktu nie pozostawia nam złudzeń – jako użytkownicy kwestie czysto estetyczne stawiamy nadzwyczaj wysoko, a świat interfejsów traktujemy równie emocjonalnie jak codzienne wybory dotyczące innych produktów codziennego użytku.

Brzydkie nakrycia głowy nie poprawiają naszego stanu emocjonalnego, potrafią nieźle zepsuć pierwszy dzień w przedpandemicznym przedszkolu szanownego użytkownika, znacząco utrudniając jego interakcje społeczne i odciskając mocny ślad na wspomnieniu tego felernego dnia. O interfejsach pozwalam sobie myśleć z równie czapkową emocją: ten skrót myślowy pomaga mi patrzeć na użytkownika z większą empatią. Ja również jestem użytkowniczką. Chcę ładnych interfejsów, chcę aesthetic usability effect.

Pomyśl teraz o wizycie w banku. Takim, w którym nie istnieją zasady customer experience proponowane przez centralę. Siedzą przed Tobą dwie osoby obsługujące, o identycznych kompetencjach: starszy specjalista komunikacji z klientem. Jedna ma przyjemny wyraz twarzy, porządek na biurku, miło odpowiada petentowi pytającemu o drogę do toalety. Druga postać z naszej opowieści wygląda natomiast na zmęczoną i rozdrażnioną. Leżą przed nią resztki spożytego przed chwilą batonika, 10 kubków po zeszłotygodniowej kawie, a ona sama kilka sekund wcześniej głośno nakrzyczała na wstającego z krzesła klienta. Której osobie chętniej oddasz do oceny przynoszone dokumenty? Spokojnej, miłej w obejściu i nie wzbudzającej strachu czy frustracji chętniej wybaczamy drobne pomyłki. Praktycznie pominiemy małe przejęzyczenie, a poprawnie obsłużeni zakończymy tę wizytę zadowoleni. Następnym razem nie będziemy mieć problemu z udaniem się do odwiedzonej placówki. W drugim przypadku, kiedy przestrzeń, w której załatwiamy swoje sprawy, wyda się nieestetyczna, a obsługa nieprzyjemna, prawdopodobnie będziemy unikać kontaktu bezpośredniego jak ognia.

Komunikacja, zarówno wizualna, jak i dźwiękowa, to interfejs.

Przecież tak go definiujemy: jako drogę, którą użytkownik porozumiewa się z produktem cyfrowym. Więc dlaczego zmuszamy naszych użytkowników do obcowania z biznesowo sprytnymi, ale niedopracowanymi pod względem estetycznym produktami?

Hover włącznika światła

Wciąż wciskamy przyciski. Nie tylko te posiadające najwięcej naszej projektanckiej uwagi guziki na urządzeniach. Włączamy światło, odkręcamy wodę, spuszczamy ją toalecie. Każda z tych akcji powoduje reakcję. Jako osoby żyjące w środowisku funkcjonującym w znany nam sposób, jesteśmy przyzwyczajeni do określonych wizualnych i dźwiękowych odpowiedzi na wykonywane przez nas czynności.

Dobrze pamiętam mocno różniące się od tła ruchome elementy w kreskówkach lat 90. XX w. Mocno śmialiśmy się z kuzynostwem, jak to gołym okiem widać, że coś już za chwilę tam się poruszy, żadne zaskoczenie. Scooby Doo wcale nie był taki sprytny. Jako projektantka UI chcę wykorzystywać te silne wyróżnienia w dobrej wierze: świadomie wykorzystując zasadę izolacji³, która szybko poprowadzi użytkownika do poszukiwanej akcji. Niech odcina się od innych w sposób odpowiednio silny!

Rozłóżmy na czynniki pierwsze akcję zapalania światła. Widzimy włącznik na ścianie: to moment, kiedy w interfejsie spotykamy się z przyciskiem w stanie default. Jest zauważalny, odróżnia się od tła, wiemy, że za jego pomocą możemy wykonać akcję. Kiedy nasz włącznik jest ulokowany za szafą lub ma niestandardowy kształt, nie pozwalający na szybkie zdefiniowanie jego funkcji, budzi frustrację u osoby poszukującej go dłonią na ścianie w ciemnym pokoju. To ta sama reakcja, kiedy w aplikacji nie jesteśmy w stanie namierzyć klikalnej akcji, przycisk wygląda jak zupełnie inny element interfejsu lub jego zlewa się z tłem, kiedy słońce pada na nasz ekran. Wszyscy znamy to uczucie: frustracja. A wystarczy tylko trzymać się zasad poprawnego projektowania UI, by go uniknąć!

Kiedy finalnie trafiamy dłonią na wyżej wspomniany włącznik i czujemy go pod palcami, mamy do czynienia z przyjemną analogią do akcji hover. Jego faktura odróżnia się od ściany, czujemy pod palcami zmianę, opuszkami „widzimy”, że został zaprojektowany tak, by umożliwić wejście z nim w akcję. Kliknięcie powoduje przejście tegoż włącznika do statusu active. Zapala się światło, akcja została odzwierciedlona również przez zmianę ułożenia przycisku, którym ją spowodowaliśmy. A disabled? Wystający ze ściany drut nie pozostawia złudzeń. Nie działa. Ja bym palców tam nie pchała, wam również nie polecam.

Kartka, długopis, input, ostre kąty

Nie przepadamy za niezaokrąlonymi kształtami. Wywołują one fiksacje wzroku na ostrych kątach przycisków⁴. Czy ten fakt łączy się z tym, że kanciastości nie spotykamy na co dzień? Nawet najostrzejszy nóż zaokrągli się przy odpowiednim powiększeniu, nie funkcjonujemy wśród kątów ostrych! Znowu: zasada izolacji. Silne wyróżnienie. Zatrzymanie. I tak w kółko, jakbyśmy nie chcieli uciekać – kochamy naszą rzeczywistość i uwielbiamy ją odtwarzać. Każde zaburzenie mocno zwraca na siebie uwagę.

UI nie jest wcale kosmiczną technologią. To złożona z pikseli droga do zaspokajania potrzeb użytkownika.

Większość wizualnych potrzeb nabywa on, funkcjonując w tej samej co projektant rzeczywistości – akcję zapisania informacji na kartce możemy łatwo rozdzielić na stany inputów. Wypadająca z książki notatka to pozostawione tam przez nas okno modalu! Zaprzyjaźnijmy się ze światem komponentów. Spoko są!

¹ A.Chakraborty, The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones., Medium 2017.

² Ibid.

³ D. i M. Malewicz, Projektowanie Interfejsów, Wyd. 1.1, s. 47.

⁴ Op. cit., s. 42.

Inspiracje

Don Norman, klasa sama w sobie. Coś o emocjach i projektowaniu, przyjaźnie. Posłuchaj TED Talka The three ways that good design makes you happy!
Dizajn na co dzień – Don Norman raz jeszcze, książkowo. Klasyka! Warto!
10 zasad dobrego projektowania Dietera Ramsa. Najlepiej do naklejenia nad biurkiem.

Autorka

Agata Kosowska

Senior Product Designerka, Mentorka, Trenerka, Śmieszka. Fanka poprawnego składu tekstu, funkcjonalnych interfejsów i podnoszenia ciężkich rzeczy. Entuzjastka dobrego projektowania UI i liściastych kwiatków doniczkowych.

To nie jest kosmiczna technologia – o User Interface w służbie użytkownika, który żyje życiem i robi rzeczy~ Agata Kosowska

To nie jest kosmiczna technologia – o User Interface w służbie użytkownika, który żyje życiem i robi rzeczy~ Agata Kosowska

Z tego artykułu dowiesz się:

Aesthetic usability effect a niezbyt ładna czapka

Hover włącznika światła

Kartka, długopis, input, ostre kąty

Inspiracje

Autorka

Agata Kosowska

Ważne linki

Kontakt