Mikrointerakcje UX – sposób na satysfakcję użytkowników

Mikrointerakcje, czyli detale podnoszące satysfakcję użytkowników

 

„The difference between a product you love and one you
tolerate are often microinteractions you have with it.” Dan Saffer

 

microinteractions-part1-1800x1013
źródło: https://blogs.adobe.com/creativecloud/files/2016/04/microinteractions-part1-1800×1013.png
 
Większość artykułów o tematyce User Experience podkreśla, że design to nie atrakcyjny wygląd produktu, ale przede wszystkim jego funkcjonalność i użyteczność. Doczekaliśmy się jednak dobrych czasów, w których niemal każdy już wie, że oferując swój produkt klientowi musi zadbać o to, aby korzystało mu się z niego w sposób łatwy i wygodny. Jak w takim razie odróżnić się od konkurencji, gdy w sieci pojawia się coraz więcej dobrze zrobionych stron? Skupianie się na intuicyjności produktów w oderwaniu niejako od uważnego dbania o ich estetykę najpewniej już nie wystarczy. Odpowiedzią być może jest poświęcenie większej uwagi mikrointerakcjom, ponieważ działają one zarówno na korzyść użyteczności produktu, ale i podnoszą znacznie jego atrakcyjność w oczach użytkowników.

Mikrointerakcje – co to takiego?

Mikrointerakcje to drobne detale, które czynią kontakt człowieka z urządzeniem elektronicznym bardziej naturalnym. Dotyczą zazwyczaj jednej akcji, która występuje samodzielnie lub w obrębie większej funkcjonalności. Przykładem podstawowej mikrointerakcji jest kliknięcie w przycisk „like” na popularnym portalu społecznościowym oraz odpowiedź zwrotna od urządzenia w postaci zmiany koloru przycisku, powiększenia się liczby lajków pod postem, naszego imienia na liście lubiących to, i tak dalej.

Byłoby sporym niedopatrzeniem nie wspomnieć w tym miejscu o Danie Safferze, który poświęcił całą książkę tematowi mikrointerakcji. Dan udowadnia w niej, że skupienie uwagi podczas projektowania produktu właśnie na tych niewielkich detalach może przynieść wiele dobrego – to skuteczne mikrointerakcje bowiem w głównej mierze odpowiadają za postrzeganie interfejsu jako przystępnego i atrakcyjnego, nawet gdy za naszym serwisem stoi niezbyt intuicyjna logika.
 

Mikrointerakcje pełnią w relacji człowiek-komputer kilka podstawowych funkcji, przede wszystkim:

 

1. Komunikują użytkownikowi feedback albo rezultat wykonanej akcji

Pierwsza z heurystyk użyteczności spisanych przez Jakoba Nielsena brzmi: „na bieżąco informuj użytkownika poprzez odpowiednią informację zwrotną co aktualnie dzieje się w systemie”. To bardzo ważne, ponieważ feedback docierający do użytkownika w odpowiednim czasie daje mu poczucie kontroli i pewność, że jego działania skutkują pożądanymi rezultatami. Mikrointerakcja w tym przypadku jest też potwierdzeniem dokonania zmian w związku z czym chroni użytkownika przed podjęciem niechcianej akcji i popełnieniem błędu.

download-ll_volorf
źródło: https://dribbble.com/shots/2889334-Download-ll
 
Użytkownik przyzwyczajony jest, by odpowiedź zwrotna systemu pojawiała się natychmiast po wykonaniu przez niego specyficznego działania. Warto wziąć pod uwagę to, że część akcji na stronie może potrzebować trochę więcej czasu, by zostać ukończona. Ważne, by wówczas interfejs poinformował o tym użytkownika, zapewnił, że nic złego się nie dzieje i pokazał mu ile czasu jeszcze potrzebuje, by osiągnąć sukces.

1
źródło: https://dribbble.com/shots/1853526-Download

 

2. Dostarczają wizualną gratyfikację

Mikrointerakcje sprawiają, że podstawowe czynności na stronie, takie jak wysłanie formularza lub załączenie pliku przestają być standardowymi elementami, które w różnych serwisach wyglądają tak samo. Wprowadzenie odrobiny zabawy do interfejsu może otworzyć drzwi do lepszej użyteczności – potrafi przyspieszyć bowiem interakcję i uczynić ją bardziej naturalną. Poza wszystkim, miły i wizualnie atrakcyjny design to coś, co zawsze jest w cenie.

sendmail
źródło: https://dribbble.com/shots/2190376-sending
 
attach
źródło: https://dribbble.com/shots/1989304-Attaching-File
 

3. Zachęcają do interakcji

Jeśli na stronie użytkownicy mają możliwość bezpośredniej interakcji z serwisem lub innymi użytkownikami (polubienia, komentowanie, udostępnianie), włączenie zabawnych i pomysłowych mikrointerakcji może być czymś, co zachęci ich do korzystania z tych opcji nawet częściej. Atrakcyjnie wizualnie odpowiedzi zwrotne płynące ze strony potrafią wywołać uśmiech na twarzach użytkowników, wprawić ich w dobry nastrój i sprawić, że będą odwiedzać Twoją stronę jeszcze częściej. To z kolei jest już o krok od wykształcenia się u nich realnych nawyków. Bodziec – reakcja. Proste.

005c
źródło: https://dribbble.com/shots/1456699-Liking-Interaction-GIF

 

4. Pomagają oszczędzić przestrzeń

To zaleta przede wszystkim w kontekście projektowania na urządzenia mobilne. Oszczędność miejsca i minimalizm, przy zachowaniu wszystkich funkcjonalności to często dla projektantów rzecz bardzo trudna do osiągnięcia. Mikrointerakcje zastosowane w tym miejscu, będące de facto interaktywnymi animacjami, pozwalają nie tylko na rozwijanie się list oraz schowanie dodatkowych treści pod hamburgerem, ale również na ukrycie kilku funkcjonalności na raz w jednym miejscu, np. pod pojedynczym buttonem. Dodatkowo, jest to niezła okazja do uwolnienia kreatywności projektantów – im ciekawsza mikrointerakcja, tym lepiej. Projektowanie na urządzenia mobilne nigdy nie było tak satysfakcjonujące.

002c
źródło: https://dribbble.com/shots/1999539-Circle-menu
 

Pull to refresh to jedna z najmądrzejszych mikrointerakcji, jaka kiedykolwiek powstała. Dlaczego zmuszać użytkownika do przerwania scrollowania, podniesienia palca i tapnięcia w guzik z etykietą „odśwież”, skoro można kontynuować jego naturalny gest przesuwania palcem po ekranie, tylko odwrócić kierunek? To również dobre pole do działania z logotypem lub charakterystycznymi wartościami firmy, które można ukryć w powstałym przez przeciągnięcie palcem dodatkowym miejscu. Poprzez częstość odświeżania strony przez użytkowników możemy w łatwy sposób wpłynąć na utrwalenie się znaku firmy w pamięci odbiorców.

tubik-studio-pull-down
źródło: https://dribbble.com/shots/2101933-GIF-for-Pull-Down-Space-Ship

 

5. Pomagają w zrozumieniu niestandardowych interfejsów

Interfejs powinien być intuicyjny dla użytkownika lub przynajmniej w łatwy i szybki sposób nauczalny. W przypadku tych drugich, mikrointerakcje wydają się być dużą pomocą, ponieważ satysfakcjonująca animacja towarzysząca odkrywaniu nowych przestrzeni w aplikacji niejako prowadzi użytkownika przez serwis, pokazując mu, że jego działania wywołują pewne określone rezultaty. W tym wypadku mikrointerakcje spajają cały design aplikacji lub strony, pozwalając użytkownikowi bez problemu i z przyjemnością poruszać się po zaprojektowanym interfejsie.

like-dribbble-video_2x
źródło: https://dribbble.com/shots/1265487-First-shot-in-Chapps-Animation

 

6. Umilają to, co nieprzyjemne i konieczne

Mowa tu o najmniej przyjemnej czynności na stronie, czyli… o wypełnianiu formularzy. Jakkolwiek nie postaramy się jako projektanci o jego zwięzłą objętość, odpowiednie umieszczenie etykiet, czy też okrojenie pól wymaganych do wypełnienia, formularz nadal pozostanie formularzem. Mikrointerakcje i w tym wypadku mogą przyjść z pomocą. Feedback ze strony aplikacji, która sprawia wrażenie, jak gdyby wchodziła z użytkownikiem w przyjacielski dialog, dodaje do przykrego obowiązku wypełniania pól odrobinę humoru. Prosta rzecz, a cieszy.
 
img_3437-blog-flyer
źródło: https://econsultancy.com/blog/66008-15-deeply-pleasing-examples-of-mobile-micro-ux/
 
W powyższym przykładzie też doskonale widać coś, co powinno przyświecać projektantom absolutnie na każdym kroku: „be human!” Interakcja z komputerem lub smartphonem stanowi lwią część naszych dni, zadbajmy o to, by była ona jak najbardziej naturalna. Szczęśliwie, mamy już chyba za sobą czasy częstowania użytkownika komunikatami systemowymi, pod tytułem: „błędna komunikacja” lub „error 515”, jednak warto iść nawet o krok dalej – bądźmy przyjaciółmi dla naszego odbiorcy, pomagajmy mu, rozśmieszajmy go i chwalmy. Na pewno to doceni.
 

Tylko jak to robić?

Na koniec kilka wskazówek, które pokażą Ci o czym należy pamiętać, wprowadzając mikrointerakcje do swoich projektów:

  • Szybka reakcja – feedback płynący z ekranu powinien pojawić się zaraz po określonym działaniu użytkownika. Mikrointerakcje mają sens tylko wtedy, gdy czynią interfejs lekkim i gładko reagującym. Pożądane przez użytkownika poczucie kontroli pojawia się, gdy czas dzielący działanie i reakcję ze strony systemu nie przekracza 0.1 sekundy.
  • Spójność – zawsze właściwa. Używając w obrębie strony wielu mikrointerakcji postaraj się o wzór, który będzie je spajał – wiele animacji o różnej logice może wprowadzić chaos w interfejsie i działać na niekorzyść prostoty jego działania.
  • Po pierwsze użytkownik – podstawowa zasada projektowania. Opieraj się na wiedzy o swoich użytkownikach, miej pewność, że animacje zostaną przez nich zrozumiane oraz że odpowiadają one przeznaczeniu serwisu.
  • Nie dokładaj – jeśli to możliwe, do tworzenia mikrointerakcji używaj elementów obecnych już na stronie. Mają one przecież upraszczać poruszanie się użytkownika po stronie, nie je komplikować.
  • Do wielokrotnego użytku – nie przekombinuj, warto czasami się zatrzymać i zadać sobie pytanie – czy ta animacja nie będzie dla użytkownika denerwująca przy 30 użyciu?
  • Mikro, nie makro – interakcje nie powinny być dystraktorem dla najważniejszych funkcji serwisu.

Proste mikrointerakcje występują na wielu stronach. Zdążyliśmy się do nich na tyle przyzwyczaić, że strona kompletnie ogołocona z interakcji sprawia wrażenie bezbarwnej i nijakiej, czasem nawet niedziałającej. Coraz więcej stron zdaje się stawiać na oryginalne mikrointerakcje. Te przemyślane i oparte na powyższych zasadach mogą stanowić dla użytkowników wizualną satysfakcję, która będzie wspierać ich przywiązanie do serwisu oraz jego lojalność. Warto pamiętać jednak, aby nie przesadzić – to nie mikrointerakcje są kluczową dla użytkownika funkcjonalnością na stronie, dlatego nie powinny one go rozpraszać. Jako projektanci stawiajmy sobie za cel prostotę rozwiązań i unikanie wszelkich zawiłości. Keep it simple.

 

Źródła:

https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.p1xkkuxqy
https://www.uxpin.com/studio/blog/ux-design-best-practices-refined-microinteractions/
https://tubikstudio.com/ui-animation-microinteraction-for-macroresult/

 

0 odpowiedzi

Odpowiedz

Want to join the discussion?
Feel free to contribute!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *