Mikrointerakcje: projektowanie z detalami
"Najlepsze produkty robią dwie rzeczy: funkcje i szczegóły. Funkcje przyciągają ludzi do twojego produktu; szczegóły są tym, co je tam trzyma ", mówi Dan Saffer. Znaczenie szczegółów nie może być nadmiernie podkreślane. Szczegóły sprawiają, że użytkownicy uwielbiają lub nienawidzą aplikacji lub witryny. Mikrointerakcje to te szczegóły. Można je łatwo przeoczyć w globalnym schemacie projektowym, ale w rzeczywistości łączą całe doświadczenie.
W tym artykule wyjaśnię, co to jest mikrointerakcja, dlaczego są one ważne i dostarczają świetnych przykładów.
Co to jest mikrointerakcja
Mikrointerakcje to subtelne momenty skupione wokół realizacji jednego zadania. Prawie wszystkie aplikacje wokół nas są wypełnione mikrointerakcjami.
Najbardziej znany przykład mikrointerakcji istniał na długo przed wynalezieniem komputerów. Przełącznik on / off jest często pierwszą mikrointerkcją, z jaką ludzie stykają się z produktem.
Niektóre inne przykłady konkretnych mikrointerakcji obejmują:
- Powiadomienie o wibracji wraz z ikoną trybu cichego na wyświetlaczu po przełączeniu iPhone'a do wyciszenia.
- Wzorzec UI do przeciągania i odświeżania. Łącząc chęć znalezienia większej zawartości z akcją odświeżania, doświadczenie staje się bardziej płynne.
Kredyt graficzny: Ramotion
- Przycisk "Lubię to" w sieciach społecznościowych, który podkreśla zmiany za pomocą interaktywnych animacji. Takie opinie informują użytkowników, że znajdują się na liście osób, które lubiły ten post.
Kredyt graficzny: Dribbble
Dlaczego pracują
Krótko mówiąc, mikrointerakcje poprawiają UX, sprawiając, że interfejs użytkownika staje się mniejszy i bardziej ludzki. Wiele razy myślimy o wyglądzie i sposobie, w jaki odnosi się do projektu. Kiedy myślimy o mikrointerpakcjach, w dużym stopniu równoważą to, jak użytkownicy myślą o produkcie, usłudze lub marce. Mikrointerakcje precyzyjnie dostosowują projektowanie skoncentrowane na człowieku poprzez:
- Zapewniając natychmiastową informację zwrotną - wizualna informacja zwrotna odwołuje się do naturalnego pragnienia użytkownika do potwierdzenia. Użytkownik natychmiast wie, że ich działania zostały zaakceptowane i chcą być zachwyceni wizualną nagrodą.
- Pełnienie roli pośredników w interakcji - Mikrointerakcje są w stanie zachęcić użytkowników do rzeczywistej interakcji. Mogą one prowadzić użytkowników do pracy z aplikacją.
- Przyjemność - Mikrointerakcje to doskonała okazja, aby nieco więcej rozkoszować się projektem bez uszczerbku dla głównego doświadczenia.
Dodatkowe korzyści
Ponieważ mikrointerakcje mają krótki charakter, muszą być zaprojektowane do wielokrotnego użytku. Dobrze zaprojektowane mikrointerakcje są w stanie stworzyć:
Pętla habitu
Mikrointerakcje są kluczowymi komponentami pętli nawykowych. Nawyki powstają, gdy ludzie wykonują te same czynności wielokrotnie. Typowa pętla nawyku składa się z trzech elementów:
- Cue - Trigger, który inicjuje akcję
- Rutyna - W odpowiedzi na cue wykonujesz akcję
- Nagroda - zasiłek, który otrzymujesz po zakończeniu rutyny, powód do wykonania akcji
Im silniejsza nagroda, tym silniejszy staje się nawyk.
Powiadomienie Facebooka o nowej prośbie o przyjaciela jest dobrym przykładem pętli nawyku: czerwona plakietka i wybielona ikona ( cue ) wskazują na nowe żądanie, które powoduje, że użytkownik klika ikonę ( rutynowe ), aby zobaczyć informacje o osobie ( nagrodę ). Po pewnym czasie użytkownicy automatycznie klikają ikonę, gdy zobaczą czerwoną plakietkę.
Momenty podpisu
Jeśli zrobi się to dobrze, mikrointerakcje mogą być momentami z podpisami, które zwiększają lojalność klientów. Momenty podpisów to mikrointerakcje, które zostały podniesione, by stać się częścią marki. Pomyśl o przycisku "Lubię to" Facebooka. Staje się naturalną częścią interfejsu Facebooka. Jeśli Facebook nagle usunie tę funkcję, użytkownicy zauważą to i pomyślą, że aplikacja jest zepsuta.
Identyfikacja możliwości
Częścią piękna mikrointerakcji jest to, że można je wstawiać w różne miejsca wokół potencjalnych działań. Mikrointerakcje są dobre dla:
Podświetlanie zmian
Mikrointerakcje mogą kierować uwagę użytkownika . W wielu przypadkach używane są animacje w celu przyciągnięcia uwagi użytkownika do ważnych szczegółów (np. Powiadomień).
Kredyty graficzne: Dribbble
Minimalizowanie wysiłku użytkownika
Autouzupełnianie jest doskonałym przykładem mikrointerakcji. Pisanie ma wysokie koszty interakcji; jest podatny na błędy i czasochłonny, nawet przy pełnej klawiaturze (a tym bardziej na ekranie dotykowym). Funkcja autouzupełniania pomaga użytkownikowi szybciej i bez błędów pisowni dostarczyć właściwej odpowiedzi. Podczas wpisywania każdej litery system będzie odgrywał najlepsze przypuszczenia dotyczące słów, które próbujesz znaleźć.
Kredyty graficzne: fancy.surge.sh
Przekazywanie opinii, aby pokazać, co zostało wykonane
Mikrointerakcje mogą wzmocnić działania wykonywane przez użytkownika. Przestrzegając zasady " pokaż, nie mów" , możesz użyć animowanej informacji zwrotnej, aby pokazać, co zostało wykonane. W Przykład Stripe'a , gdy użytkownik kliknie "Zapłać", krótko pojawia się pokrętło, zanim aplikacja wyświetli stan pomyślnego zakończenia. Animacja zaznaczenia sprawia, że użytkownik czuje, że z łatwością dokonał płatności, a użytkownicy doceniają tak ważne szczegóły.
Podaj informacje o stanie
Pierwsza zasada heurystyczna użyteczności Jakoba Nielsena stwierdza: system powinien zawsze informować użytkowników o tym, co się dzieje. Wskaźnik pisania na czacie jest doskonałym przykładem mikrointerakcji, które udostępnia informacje o stanie. Pojawia się na ekranie twojego znajomego podczas pisania wiadomości na czacie.
Kredyty graficzne: Dribbble
Zatwierdź dane użytkownika
Jedną z najważniejszych i często pomijanych aspektów projektowania formularzy jest obsługa błędów . To ludzka natura popełniać błędy, a twoja forma prawdopodobnie nie jest zwolniona z ludzkiego błędu. Użytkownicy nie lubią, gdy przechodzą przez proces wypełniania formularza tylko po to, aby dowiedzieć się na temat zgłoszenia, że popełnili błąd. W tym miejscu mikrointerakcja walidacji odgrywa rolę w przyjaznej dla użytkownika formie. Sprawdzanie poprawności inline w czasie rzeczywistym natychmiast informuje użytkowników o poprawności dostarczonych danych. Takie podejście pozwala użytkownikom poprawić błędy, które popełniają szybciej, bez konieczności czekania, aż naciśną przycisk przesyłania, aby wyświetlić błędy. Po wykonaniu tego może przekształcić niejednoznaczną interakcję w przejrzystą.
Wniosek
Projekt jest w szczegółach. Nawet drobne detale zasługują na szczególną uwagę, ponieważ wszystkie te małe momenty składają się na całość, łączą się w piękny holistyczny produkt.
"Różnica między produktami, które kochamy, a tymi, które po prostu tolerujemy, to często mikrointerakcje, które mamy z nimi." - Dan Saffer
Jeśli zależy Ci na doświadczeniu użytkownika, musisz zadbać o mikrointerakcje. Ponieważ twój produkt jest tak dobry, jak najmniej mikrointerakcji, jakie mają z nim ludzie.