Mikrointerakcja w UX: tajna broń do trwałego zaangażowania i utrzymania użytkownika

Co widzisz, gdy uruchamiasz film w YouTube? Zanim wideo zacznie się odtwarzać, przesyłanie strumieniowe treści zajmuje trochę czasu. Do tego czasu na ekranie wyświetlana jest poruszająca się ikona buforowania. To doskonały przykład mikrointerakcji.

Zasadniczo każdą wizualną reprezentację określonego procesu można nazwać MIkrointerakcją. Działają jako elementy składowe, które ostatecznie ulepszają UX. Jeśli UX to komórka, mikrointerakcja to DNA.

Rozbijmy to:

Mikrointerakcja – co to właściwie jest?

Jako integralna część UX, mikrointerakcja jest procesem, który przekazuje funkcję wykonywaną przez aplikację/oprogramowanie zgodnie z zaleceniami użytkownika. Przykłady obejmują: ładowanie, buforowanie itp.

Ponadto poprawia elementy wizualne związane z małymi funkcjonalnościami. Wiesz, jak świeci przycisk Lubię to, zanim go klikniesz. I jak reaguje, gdy w końcu go klikniesz. To samo można zastosować do sekcji komentarzy, przycisków udostępniania, przycisków subskrypcji itp.

Jeśli chcesz bardziej fizycznego przykładu, nie ma lepszego przykładu niż winda. Co widzisz? Szereg guzików? Tak. Ale co się stanie, gdy naciśniesz jeden? Zgadza się! Świeci. To jest mikrointerakcja.

Być może nie zdajesz sobie z tego sprawy, ale ten prosty akt świecenia zapewnia przyjemne doświadczenie dla użytkownika windy. Tylko wyobraź sobie, co by było, gdyby nie świeciło. Niezbyt satysfakcjonujące wizualnie, prawda? Ponadto nie wiedziałbyś, czy proces jest wykonywany przez windę, czy nie.

To samo można zrobić z interfejsem aplikacji/sieci, aby stworzyć satysfakcjonujący UX.

Kilka ilustracji, które rozwieją Twoje wątpliwości

Przykłady zawsze okazywały się bardziej owocne przy definiowaniu pojęcia. Aby właściwie zrozumieć, czym tak naprawdę jest mikrointerakcja, przyjrzyj się następującym przypadkom:

• Gdy masz zamiar kliknąć Lubię to, przycisk świeci na niebiesko. Kiedy w końcu naciśniesz przycisk, zostanie on lekko wciśnięty, prawda? Działa to jako wskazówka, że ​​działanie zostało podjęte.
• Kiedy odwiedzasz stronę internetową, widzisz O nas, Usługi, Blog, Kontakt z nami itp. Kiedy najedziesz kursorem na jedną z nich, zmieni się ona w kolor (zwykle zgodnie z kolorem strony internetowej, aby uniknąć ostrych kontrastów). Jeśli przesuniesz kursor w lewo iw prawo, poszczególne sekcje zostaną podświetlone oddzielnie. To również jest przykładem mikrointerakcji.
• Podczas włączania lub wyłączania funkcji zobaczysz, jak przycisk porusza się między dwiema opcjami. Kiedy klikniesz WYŁĄCZ, mały pasek (biały/czarny/itp.) przesunie się na WYŁ. To samo z częścią ON. Jest to mikrointerakcja oparta na funkcjonalności.

• Inną rzeczą, którą zauważysz w dzisiejszych czasach, zwłaszcza w serwisach informacyjnych, takich jak TechCrunch, jest to, że za każdym razem, gdy przewijasz w górę iw dół, zobaczysz pewną okrągłą ikonę, która podąża za twoim ruchem podczas nawigacji.

  Ma określony kolor ruchu ustawiony wzdłuż jego krawędzi, który wskazuje, jaką część strony pokryłeś. Załóżmy, że strona jest dość długa, pomaga to czytelnikowi poznać jego aktualną pozycję na stronie. Jest również wyposażony w osadzony przycisk krzyżyka, dzięki czemu użytkownik może opuścić artykuł bez opuszczania witryny.

  Artykuł zostałby zamknięty, pozostawiając użytkownika na stronie głównej, z której może przejść do dowolnego innego tematu, który uzna za interesujący.

Widzisz więc, jak mikrointerakcje pomagają w tworzeniu małych kroków, które ostatecznie prowadzą do ulepszonego UX. Nie można zaprzeczyć, że architektura informacji stanowi podstawowe ramy dla potężnego UX, ale jednocześnie mikrointerakcje wzmacniają lub katalizują proces ulepszania UX.

Jeśli architektura informacji jest szkieletem, mikrointerakcje są nerwami, które wyzwalają funkcje i odpowiednio reagują na użytkowników.

Dlaczego więc jest to ważne dla projektowania UX?

Jak wspomniano powyżej, istnieją zasadniczo dwa elementy, które prowadzą do dobrego UX, a mianowicie: architektura informacji i elementy mikrointerakcji. Podczas gdy ludzie uznają znaczenie IA, mikrointerakcja jako proces często pozostaje niezauważona. Ale to, z czego nie zdajemy sobie sprawy, to to, że bez tego ten pierwszy pozostaje niekompletny. Zobacz, jak przydaje się proces mikrointerakcji:

• Tworzysz architekturę i podstawowy przepływ pracy za pomocą IA, ale jest to bezużyteczne, jeśli użytkownik nie przywiązuje się do drobnych szczegółów, które są związane z każdym krokiem. Mikrointerakcja pomaga wypełnić te najdrobniejsze szczegóły.
• Klienci uwielbiają sprawować kontrolę nad interfejsem, z którego korzystają. Podczas gdy IA pomaga w płynnej nawigacji i przebiegu procesów, MI daje im poczucie kontroli poprzez wizualne przedstawienie poszczególnych prowadzonych procesów.
• Mało tego, MI indywidualnie wyróżnia każdą sekcję, do której zbliża się użytkownik, dając rodzaj wizualnej satysfakcji na bardzo intuicyjnym poziomie.
• To z kolei zwiększa wartość tej konkretnej sekcji na drabinie umysłu użytkownika, a także jednocześnie podnosi poziom zainteresowania ze strony użytkownika, skłaniając go do klikania w nią z pewnością siebie i satysfakcją.

Widzisz więc, że mikrointerakcja pomaga zwiększyć wartość marki aplikacji/strony internetowej. Współpracując z IA pomaga stworzyć całościowy pakiet w zapewnieniu odpowiedniego UX.

Jakie są cztery podstawowe kroki, które najlepiej definiują mikrointerakcję?

Po prostu nie możesz pisać o mikrointerakcjach bez natknięcia się na te cztery kroki ukute przez guru mikrointerakcji, Dana Saffera. W swojej książce „MIcrointeraction" Saffer klasyfikuje cały proces w następujących krokach:

• Element wyzwalający: Każda akcja, która uruchamia proces mikrointerakcji, jest liczona jako element wyzwalający. Na przykład kliknięcie przycisku, który uruchamia proces.
• Element zasad: Określa samą funkcję. Na przykład naciskasz przycisk, który przenosi Cię do odpowiedniej strony.
• Element sprzężenia zwrotnego: informuje użytkownika, że ​​proces został podjęty. Na przykład klikniesz coś i zostanie to wciśnięte lub podświetlone.
• Element Loops: użytkownik będący pod wpływem mikrointerakcji ma tendencję do powtarzalnego korzystania z tej konkretnej funkcji. Mikrointerakcje są realizowane w taki sposób, aby uzależnić psychikę użytkownika. Skłania użytkownika do częstszego powrotu. Jest to element Loop, w którym użytkownik wpada w behawioralną pętlę powtarzalnych interakcji.

Jak więc zbudować dobre środowisko mikrointerakcji dla swojego interfejsu?

Załóżmy, że planujesz zbudować aplikację. A może jesteś już w fazie rozwoju. Ale na razie nie planujesz włączenia mikrointerakcji. Czytasz ten artykuł i stajesz się chętny do włączenia tego samego. Ale jak się do tego zabrać? Biorąc pod uwagę, że jesteś w fazie IA, oto co możesz zrobić:

• Podczas opracowywania określonej sekcji interfejsu, na przykład sekcji O nas, poproś swojego programistę o wymyślenie kodu (programowanie), który rozpozna położenie kursora na wspomnianym elemencie i automatycznie go podświetli, aby uzyskać lepszą atrakcyjność wizualną. Ponadto po kliknięciu powinien wyglądać tak, jakby był lekko wciśnięty.

• Następnie następuje część nawigacyjna. Gdy użytkownik kliknie na sekcję, jest ona zaprogramowana tak, aby prowadziła go do następnej konfiguracji. To, co możesz zrobić, to wprowadzić funkcję przypominającą buforowanie, przedstawiającą trwający proces.

  Pomoże Ci to utrzymać zaangażowanie użytkowników w przypadku, gdy mają wolne łącze internetowe lub ładowanie strony trwa dłużej niż oczekiwano. Wyobraź sobie, co by się stało, gdybyś z tego nie korzystał.

  Użytkownik po prostu poczułby, że Twoja aplikacja/strona internetowa nie działa. Nigdy by się nie dowiedzieli, że problem wynika z końca przeglądarki. W rezultacie stracisz klienta. Zamiast tego użyj tej techniki, aby zaangażować ich w podobne sytuacje.

• Cechą wspólną większości interaktywnych aplikacji jest obecnie sekcja „Lubię to, komentuj, udostępniaj”. Załóżmy, że aplikacja, którą tworzysz, pomaga użytkownikowi przeglądać różne miejsca podróży na całym świecie i wybierać ulubione.

  Użyj techniki podświetlania mikrointerakcji na podobnych przyciskach, aby tworzyła dobry UX za każdym razem, gdy ktoś najedzie na nią kursorem. Jak wspomniano wcześniej, po kliknięciu powinien wykazywać efekt nacisku.

  Przechodząc do przycisków udostępniania, możesz utworzyć coś w rodzaju listy rozwijanej składającej się z różnych opcji udostępniania, takich jak Facebook, Twitter, WhatsApp itp., dzięki czemu za każdym razem, gdy przesuną kursor nad tę sekcję, zostanie ona podświetlona określonym kolorem i jednocześnie wyświetli listę rozwijaną .

  [Uwaga: kolory użyte we wszystkich trzech sekcjach powinny być podobne, aby uniknąć zbyt dużego kontrastu wizualnego]

• Możesz także użyć modelu buforowania dla różnych rodzajów stron/aplikacji. Po prostu zamień ikonę ruchu buforującego na odpowiednią dla danej platformy. Na przykład, jeśli tworzysz aplikację płatniczą, możesz wyświetlić stos monet w ruchu liniowym lub tasowanie banknotów podczas realizacji procesu płatności.

  Lub weźmy na przykład aplikację e-commerce, w której użytkownicy dodają różne produkty do swojego osobistego koszyka. Możesz użyć ruchomej ikony wózka, aby poinformować użytkownika, że ​​wybrany element jest dodawany itp.

Widzisz więc, istnieje wiele zakresów, w których można zastosować mikrointerakcje. Strategiczne użycie może z powodzeniem zaangażować użytkownika na dłuższą metę, przynosząc w ten sposób coraz większą wartość marki.

Jaki wpływ mają mikrointerakcje na umysł użytkownika i jak reagują?

Do tej pory omawialiśmy, jakie są różne rodzaje mikrointerakcji i jak ty jako przedsiębiorca możesz je włączyć. Ale to tylko jedna strona medalu. Druga strona to klient. Zrozumienie, w jaki sposób reagują na różne rodzaje mikrointerakcji, może pomóc w skuteczniejszym ukierunkowaniu procesu. Zobacz, jaki wpływ na podświadomość mają mikrointerakcje:

• Kiedy użytkownik wchodzi w kontakt z określoną mikrointerakcją, wyzwala to subtelny sygnał w jego układzie nerwowym, który sprawia, że ​​chce go częściej używać. Powoduje to pętlę nawyku.
• W rezultacie użytkownik wraca raz po raz, aby wejść w interakcję z produktem. Widzisz więc, zatrzymuje użytkownika/klienta na czas nieokreślony.
• Wizualizacje to coś, z czego korzysta każdy strateg marketingowy, ponieważ zdaje sobie sprawę z ogromnych korzyści, jakie się z nimi wiążą. A mikrointerakcja jako element wizualny może manipulować psychiką użytkownika w celu tworzenia konwersji.
• Element sprzężenia zwrotnego mikrointerakcji generuje uczucie komfortu w umyśle użytkownika, a wszyscy wiemy, jak klienci cieszą się wyłączną kontrolą podczas poruszania się po pożądanym produkcie.
• Same ruchy oferowane przez mikrointerakcje generują poczucie komfortu, które łączy się z użytkownikiem na poziomie trzewnym. Skutkuje to atrakcyjnością klientów i szybkim wzrostem bazy użytkowników.

Końcowe przemyślenia

Pewnie już zdałeś sobie sprawę, że podstawową funkcją mikrointerakcji jest ożywienie IA. Wzmacnia dynamiczny charakter strony/aplikacji. Chociaż ludzie mają tendencję do pomijania znaczenia mikrointerakcji, odczuwają kryzys, gdy te funkcje nie działają.

Ważne jest, abyś zajął się tymi drobnymi podświadomymi zmianami, które wynikają z tego procesu, bez względu na to, jak małe lub pozornie nieistotne się wydają. Pamiętaj, że te małe efekty ostatecznie prowadzą do udanego UX. Jak powiedział Lao Tzu: „Podróż tysiąca mil zaczyna się od jednego kroku”.