Sekret Killer UX Design: to wszystko w mikrointerakcjach
Opublikowany: 2016-11-13Design tkwi w szczegółach.
Któregoś dnia skomponowałem wiadomość do starej przyjaciółki, która nie była łatwa do napisania, ponieważ była to wiadomość, aby wyrazić moje kondolencje z powodu utraty jej matki. Rozmawialiśmy przez telefon kilka razy wcześniej w tym tygodniu, ale chciałem wysłać jej krótką wiadomość w aplikacji Facebook Messenger, aby dać jej znać, że o niej myślę. Skończyłem komponować wiadomość i postanowiłem dodać na końcu małe „serduszko”.
Ta prosta czynność polegająca na stukaniu w serce zamieniła się w zachwycającą eksplozję unoszących się czerwonych serc na ekranie mojego telefonu, której towarzyszyło również kilka głupich efektów dźwiękowych. Ta chwila, choć krótka i ulotna, przyniosła mi kilka sekund zaskoczenia i radości w trudnym czasie.
Tak stało się z moim ekranem po dotknięciu czerwonego serca.
Te drobne szczegóły, zwane inaczej mikrointerakcjami, mogą sprawić, że doświadczenie między użytkownikiem a urządzeniem/produktem będzie przyjemniejsze, łatwiejsze, skuteczniejsze i bardziej ludzkie. Często nawet nie zauważamy tych mikrointerakcji.
Są sprytnie subtelne, a czasem prawie niewidoczne; ale mogą stworzyć produkt, który użytkownik pokocha, a nie coś, co do którego czuje się chłodno.
Innymi słowy, mikrointerakcje mogą w magiczny sposób wypełnić lukę między użytkownikiem a technologią poprzez emocjonalne i ludzkie połączenie, jednocześnie zachęcając ich do wracania po więcej.
Czym są mikrointerakcje?
Mikrointerakcje opierają się na wykonaniu pojedynczego momentu lub zadania poprzez zapewnienie przyjemnego doświadczenia i użytecznej informacji zwrotnej dla użytkowników. Te mikromomenty są tym, co ostatecznie prowadzi użytkownika przez przepływ w intuicyjny i skuteczny sposób.
Dan Saffer, autor książki „Mikrointerakcje” i wiceprezes ds. produktu w firmie Mayfield Robotics , definiuje mikrointerakcje jako „zawarte momenty produktu, które obracają się wokół pojedynczego przypadku użycia — mają jedno główne zadanie. Za każdym razem, gdy zmieniasz ustawienie, synchronizujesz dane lub urządzenia, ustawiasz alarm, wybierasz hasło, logujesz się, ustawiasz komunikat o statusie lub coś ulubionego lub „polubisz”, angażujesz się w mikrointerakcję. Są wszędzie: w urządzeniach, które nosimy, urządzeniach w naszym domu, aplikacjach na telefonach i komputerach stacjonarnych, a nawet osadzonych w środowiskach, w których żyjemy i pracujemy. Większość urządzeń i niektóre aplikacje są zbudowane w całości wokół jednej mikrointerakcji”.
Według Saffera mikrointerakcje są dobre dla:
- Wykonanie pojedynczego zadania i tylko jednego zadania.
- Interakcja z pojedynczym elementem danych, takim jak temperatura lub ocena utworu.
- Kontrolowanie trwającego procesu, np. głośności utworu w Spotify
dostosowanie ustawienia. - Przeglądanie lub tworzenie małego fragmentu treści, takiego jak status na Facebooku
włączanie lub wyłączanie funkcji lub funkcji.
Po co włączać mikrointerakcje do swoich projektów?
- Pomagają zachęcić użytkowników do interakcji z Twoją witryną, niezależnie od tego, czy klikają przycisk, udostępniają zawartość, czy odpowiadają na wiadomość lub powiadomienie.
- Natychmiast przekazują opinie użytkowników.
- Pomagają użytkownikom poruszać się po witrynie.
- Pomagają w intuicyjny i łatwy sposób prowadzić użytkowników przez proces.
Saffer opisuje cztery części mikrointerakcji jako wyzwalacz, reguły, sprzężenie zwrotne oraz pętle i tryby. Zanurzmy się nieco głębiej w znaczenie każdego z tych kroków.
Cyngiel
To wyzwalacz inicjuje interakcję. Jest to wskazówka, wizualna lub inna, która zachęca użytkownika do podjęcia działania. Wyzwalaczem może być trzepotanie ikony, aby zachęcić użytkownika do dotknięcia lub kliknięcia. Niebieski przycisk, który spływa na górę twojego kanału na Twitterze, który mówi „nowe tweety” ze strzałką skierowaną w górę, powoduje, że klikasz go, aby zobaczyć wszystkie nowe tweety, które zostały opublikowane od czasu twojej nieobecności.
Niektóre z najlepszych wyzwalaczy to te, które faktycznie przewidują potrzebę użytkownika bez konieczności określania swoich potrzeb . Wymaga to od projektanta zebrania badań użytkowników i danych behawioralnych, aby pomóc przewidzieć, jakie będą potrzeby użytkownika i odpowiednio zaprojektować wyzwalacze.
Zasady
Spust angażuje się w reguły. Te zasady określają, co dzieje się podczas interakcji. Reguły powinny być naturalne dla użytkownika i istnieją, aby pomóc zminimalizować błędy. Świetnym przykładem jest to, że jeśli spróbujesz wysłać wiadomość e-mail przez Gmaila bez wpisywania wiersza tematu, Gmail poinformuje Cię, że „wiadomość e-mail nie ma wiersza tematu” z pytaniem, czy nadal chcesz go wysłać.
Polecany dla Ciebie:
Jak Metaverse zmieni indyjski przemysł motoryzacyjny?
Co oznacza przepis anty-profitowy dla indyjskich startupów?
W jaki sposób start-upy Edtech pomagają indyjskim pracownikom podnosić umiejętności i być gotowym na przyszłość...
Akcje New Age Tech w tym tygodniu: Kłopoty Zomato nadal, EaseMyTrip publikuje Stro...
Indyjskie startupy idą na skróty w pogoni za finansowaniem
Digital Marketing Platform Logicserve Bags Finansowanie INR 80 Cr, zmienia nazwę na LS Dig...
Informacja zwrotna
Informacja zwrotna opiera się na zasadach i daje użytkownikom informacje o tym, co dzieje się w danym momencie. Szczególnie lubię opinie, które otrzymuję na temat formularzy zaprojektowanych z myślą o użytkowniku. Włączenie walidacji inline do projektu we właściwym kontekście może być bardzo pomocne dla użytkownika.
Na przykład podczas wpisywania nazwy użytkownika, jeśli widzę zielony znacznik wyboru, wiem, że mogę przejść do wypełnienia pola hasła. Nie mogę powiedzieć, ile razy wypełniam pola nazwy użytkownika i hasła, naciskam przycisk „Wyślij”, a na czerwono pojawia się informacja, że nazwa użytkownika lub hasło są nieprawidłowe.
Problem w tej sytuacji polega na tym, że nie mam pojęcia, które pole lub litera jest niepoprawne . Jeśli uda mi się wprowadzić odpowiednie zmiany po drodze, znacznie ułatwi to cały proces. Te małe zielone znaczniki wyboru, tak nieistotne, jak mogą się wydawać, mają duży wpływ na to, jak użytkownik czuje się w trakcie i po zakończeniu procesu wypełniania formularza i mogą prowadzić do wyższych wskaźników wypełniania.
Formularz rejestracji na Twitterze jest doskonałym i prostym przykładem tego, jak należy używać walidacji inline. Gdy kończę akcję, po prawej stronie pola formularza pojawiają się znaczniki wyboru. Czerwony komunikat o błędzie okazuje się również przydatny, mówiąc mi, co muszę zrobić, aby poprawnie wypełnić formularz.
Aplikacja podróżna Hopper również mądrze wykorzystuje mikrointerakcje. Po wprowadzeniu dat i miejsc docelowych, o których chcę dowiedzieć się więcej, uroczy mały królik podskakuje, podczas gdy aplikacja „myśli” i wyciąga wyniki, abym mógł je zobaczyć. Nikt nie lubi czekać. Jednak obserwowanie, jak króliczek skacze, wnosi odrobinę radości do tego krótkiego oczekiwania, jednocześnie informując użytkownika, że coś się dzieje, a wyniki zostaną wkrótce pokazane.
Pętle i tryby
Pętle i tryby określają większe meta-zasady interakcji. Jeśli mikrointerakcja jest stosowana wielokrotnie, ważne jest, aby zastanowić się, w jaki sposób interakcje odpowiednio się zmieniają. Zastanów się, jak ta interakcja dostosowuje się do zachowania użytkownika. Jaka jest różnica między mikrointerakcją przy pierwszym użyciu a siódmym?
Spróbuj stworzyć pętle, które dostosowują się w czasie, wzbogacając doświadczenie za każdym razem, gdy wchodzą z nim w interakcję. Funkcja Facebook On This Day Memories jest doskonałym przykładem tego, jak tworzyć doświadczenia, które dostosowują się za każdym razem, gdy są zaangażowane.
Większość użytkowników Facebooka sprawdza swoje kanały informacyjne kilka razy dziennie. Posiadanie funkcji, która czasami pobiera aktualizację statusu lub zdjęcie sprzed 4 lat, może mieć emocjonalny (miejmy nadzieję pozytywny) wpływ na użytkownika. Istnieje możliwość, że ta konkretna mikrointerakcja może mieć negatywny wpływ. Na przykład pokazanie starego posta, który może zasmucić lub zestresować użytkownika, ma niezamierzone negatywne konsekwencje. Proponuję Facebookowi, aby zastanowił się, jak powstrzymać te negatywne doświadczenia.
O czym należy pamiętać podczas projektowania mikrointerakcji
Nie przesadzaj z projektowaniem . Mikrointerakcje nie powinny wydawać się dziwne, a ich ładowanie nie powinno zająć zbyt dużo czasu. Powinny służyć celowi, a jednocześnie płynnie wtapiać się w ogólny projekt.
Za pierwszym razem, gdy ktoś doświadcza mikrointerakcji, nie powinien czuć się tak samo, jak wtedy, gdy używa go po raz dziesiąty lub po raz setny. Dostosuj mikrointerakcje do kontekstu. Jeśli jest to pierwszy raz użytkownika, strzałki ułatwiają poruszanie się po aplikacji. Daj im opcję, aby nie wyświetlać tej wiadomości ponownie, aby nie stało się to denerwujące w przyszłości.
To prowadzi mnie do trzeciej wskazówki. Nie zaczynaj od niczego . Zrozum swoich użytkowników, ich motywacje i kontekst, przeprowadzając badania użytkowników. Zebrane informacje dostarczą Ci informacji, których potrzebujesz, aby Twoja decyzja była bardziej skuteczna i użyteczna. Jeśli są tam po raz dwudziesty, dowiedz się, jakie są ich motywacje i cele, i stwórz mikrointerakcje na podstawie swoich ustaleń.
Pamiętaj, że celem jest, aby te interakcje były subtelne i skuteczne. Upewnij się, że styl mikrointerakcji pasuje naturalnie do stylu ogólnego projektu interfejsu. Interakcje nie powinny wydawać się nie na miejscu ani mylące, a mikrointerakcje powinny być powiązane z ogólnym projektem aplikacji.
6 przykładów prawidłowych mikrointerakcji
Niespodzianka na rękawie
Słyszałem, jak ktoś opisywał, że od lat ma tę samą miękką, przytulną koszulę z długim rękawem. Pewnego dnia biegając po zacienionym, wysadzanym drzewami szlaku, mając na sobie tę samą koszulę z długimi rękawami, biegaczka opisała, że zrobiła się chłodno i wyciągnęła dodatkowy materiał, przeznaczony na zimne dni, aby zakryć jej ręce, aby odwrócić bluzki na dłonie. Tkanina pod spodem ujawniła stwierdzenie „jesteś kochany”.
Te słowa, potajemnie nadrukowane dokładnie w miejscu tkaniny, zostały ukryte, aby pokazać się w takich chwilach, jak te zaskakujące noszących ją mikromomentem zachwytu .
Slack Emojis
Witryna Little Big Details jest kuratorem kilku świetnych przykładów mikrointerakcji. Jednym z tych, które prezentują, jest wyszukiwanie emoji w Slack, a emoji, którego szukasz, nie istnieje, jako opcję sugeruje się emoji „płacz”. Zamiast irytować użytkownika, gdy nie może znaleźć tego, czego chce, emoji „płaczące” sprawia, że czuje się rozbawiony .
tłumacz Google
Gdy naciśniesz przycisk „słuchaj” po raz drugi w Tłumaczu Google, tłumaczenie powtarza tłumaczenie z mniejszą prędkością, zakładając, że potrzebujesz trochę więcej czasu, aby zrozumieć, co zostało napisane.
Tryb nocny w Mapach Google
Zawsze podobało mi się, jak tło aplikacji Mapy Google zmienia kolor na czarny w zależności od czasu. Tryb nocny ma na celu pomóc w nocnym widzeniu i bezpieczeństwie i jest całkowicie automatyczny.
Spraw, bym pulsował
Sprawdź tę stronę Make Me Pulse, aby uzyskać naprawdę wspaniałe interaktywne wrażenia. Zastosowanie mikrointerakcji ( pasków postępu, dźwięków, kolorów ) pomaga prowadzić użytkowników przez przepływ przez wyzwalacze, reguły, informacje zwrotne i pętle.
Paski przewijania
Nawet mały szary pasek przewijania po prawej stronie tej strony jest wspaniałym i prostym przykładem na to, jak mikrointerakcja może być użyteczna i skuteczna, pozwalając czytelnikowi dowiedzieć się, ile materiału pozostało do przeczytania z tego artykułu.
Mam nadzieję, że ten artykuł zainspiruje Cię do włączenia mikrointerakcji do swoich projektów. Mają one potencjał, aby zmienić wrażenia, jakie użytkownicy mają z Twoim projektem, z ok, w coś naprawdę niezapomnianego.
[Ten post pojawił się po raz pierwszy na Proto.io i został powielony za zgodą.]