Lepszy UX dzięki mikrointeracjom

Podczas projektowania produktu istnieje wiele sposobów na poprawę doświadczenia użytkownika, w tym definiowanie person, dobrze ustrukturyzowana architektura informacji i przemyślana treść. Ale po ustawieniu tej struktury wysokiego poziomu, tworzenie przyjemności dla użytkownika pojawia się w mniejszych szczegółach projektu interakcji .

Te szczegóły, zwane mikrointerakcjami , to pojedyncze momenty w produkcie, które mają na celu wykonanie jednego zadania, jednocześnie wzmacniając naturalny przepływ produktu. Przesuwanie w górę w celu odświeżenia danych, polubienie treści lub zmiana ustawień to mikrointerakcje. Mogą również zawierać proste animacje interfejsu użytkownika — na przykład sposób, w jaki menu przesuwa się po dotknięciu lub karta zsuwa się z ekranu po przesunięciu.

Często mikrointerakcje nie są nawet świadomie zauważane przez użytkownika, ale ich subtelne detale sprawiają, że produkt jest przyjemniejszy i łatwiejszy w użyciu , a tym samym poprawiają jego komfort użytkowania.

Korzyści z mikrointerakcji

Mikrointerakcje i animacja interfejsu użytkownika są tak ważne, że mogą stworzyć lub zepsuć projekt – lub, jak powiedział Charles Eames, o sławie projektowania mebli i architektury:

Szczegóły nie są szczegółami. To oni tworzą projekt.

Niektóre kluczowe korzyści z wprowadzenia mikrointerakcji do produktu to:

• Tworzenie pozytywnego efektu emocjonalnego u użytkownika dzięki płynniejszym interakcjom interfejsu użytkownika
• Zapewnienie natychmiastowej informacji zwrotnej użytkownikowi na podstawie podjętych przez niego działań
• Prowadzenie użytkownika przez aplikację w bardziej płynny i intuicyjny sposób
• Zachęcanie użytkowników do interakcji z aplikacją poprzez odpowiadanie na powiadomienie lub udostępnianie treści
• Zapobieganie błędom użytkowników

Najlepsze praktyki projektowania mikrointerakcji

Teraz, gdy ustaliliśmy już pewną definicję i kontekst tego, co robią mikrointerakcje, i podano przykład, w jaki sposób poprawiają one wrażenia użytkownika, omówmy najlepsze praktyki tworzenia mikrointerakcji.

Zidentyfikuj i zrozum problem użytkownika

Pierwszą zasadą w każdym projekcie środowiska użytkownika jest odkrycie i zrozumienie problemów użytkownika — nie inaczej jest w przypadku mikrointerakcji. Najlepszym sposobem na zrozumienie potrzeb użytkownika jest przeprowadzanie ankiet lub wywiadów lub obserwowanie zachowania poprzez badania użytkowników. Projektant Toptal, Ivan Annikov, bardziej szczegółowo wyjaśnia potrzeby użytkowników w swoim artykule „Going Guerrilla: Affordable UX Research Tips And Alternatives”.

Zachowaj naturalne mikrointerakcje

Celem jest wypełnienie luki między użytkownikiem a produktem w sposób intuicyjny i naturalny, dzięki czemu unikaj dziwnych animacji, których ładowanie trwa zbyt długo lub mogą rozpraszać użytkownika. Zamiast tego twórz projekty, które płynnie współgrają z produktem. Subtelność jest kluczem do mikrointerakcji. Nie zostawiaj użytkownika zakłopotanego i myślącego: „Co to było?”

Testuj i powtarzaj wyniki testów użytkowników

Nawet doświadczeni projektanci rzadko otrzymują projekty całkowicie poprawne za pierwszym razem. Dlatego korzystanie z procesu testowania użytkowników i projektowania iteracyjnego jest prostym sposobem na zmniejszenie błędów użyteczności przed wprowadzeniem produktu na rynek.

Podczas fazy testowania użytkownika mikrointerakcje są testowane i analizowane pod kątem użyteczności i poprawiane w następnej fazie projektowania. Ten proces jest powtarzany, aż problemy z użytecznością i problemy zostaną rozwiązane.

Śledź strukturę mikrointerakcji

Według Dana Saffera, starszego projektanta produktów na Twitterze i autora książki „Microinteractions: Designing with Details”, mikrointerakcja składa się z czterech części.

1. Wyzwalacz — wyzwalacz inicjuje mikrointerakcje. Jednym z rodzajów wyzwalaczy jest przełącznik, który włącza i wyłącza funkcję.
2. Reguły — reguła określa, w jaki sposób mikrointerakcja reaguje na wyzwalacz i określa, co dzieje się podczas interakcji. Na przykład aplikacja latarki używa przycisku jako wyzwalacza, który włącza i wyłącza światło.
3. Informacja zwrotna — Informacja zwrotna informuje użytkownika, co dzieje się podczas mikrointerakcji. Przykładem opinii jest formularz rejestracyjny z weryfikacją inline — kolor obramowania zmienia się na zielony, jeśli pole jest wypełnione poprawnie, a na czerwony, jeśli coś jest niepoprawne. W ten sposób użytkownik natychmiast wie, że coś jest dobre lub złe.
4. Pętle i tryby — pętle i tryby definiują meta-reguły mikrointerakcji oraz sposób, w jaki mikrointerakcja zmienia się, gdy są używane wielokrotnie. Na przykład w handlu elektronicznym przycisk „Kup teraz” może zmienić się na „Kup inny”, gdy użytkownik wcześniej kupił przedmiot.

Dekonstrukcja projektu mikrointerakcji

Aby pokazać proces myślowy stojący za projektowaniem mikrointerakcji, zdekonstruujmy mikrointerakcję Google: mikrointerakcję z sugestią nazwy pliku w Dokumentach Google.

Ta mikrointerakcja zajmuje pierwszy wiersz dokumentu i sugeruje ten fragment tekstu jako nazwę dokumentu, dzięki czemu proces tworzenia nazwy jest bardziej intuicyjny.

Proces projektowania mikrointerakcji jest taki sam, jak w przypadku każdego zadania projektowego: identyfikacja problemu użytkownika i naprawienie go. Pamiętając o poprzednich najlepszych praktykach, zacznijmy identyfikować problem.

Problem użytkownika

Łatwym i intuicyjnym sposobem na uporządkowanie dokumentów jest po prostu opisowe nazwanie ich. W większości edytorów tekstu pole „Nazwij dokument” pozostaje puste, mimo że istnieje duże prawdopodobieństwo, że nazwa pliku ostatecznie będzie korelować z zawartością dokumentu. Jest to proces, który warto rozwiązać za pomocą mikrointerakcji.

Rozwiązanie Google

Dokumenty Google obsługują to na dwa sposoby, w zależności od wyborów użytkownika: 1) Użytkownicy mogą kliknąć pole nazwy i zmienić nazwę dokumentu od razu przed wpisaniem jakiejkolwiek treści oraz zmienić „Dokument bez tytułu” na wybraną przez siebie nazwę, lub 2 ) Gdy użytkownik wpisze pierwszy wiersz tekstu, Google automatycznie wypełni go jako nazwę dokumentu. Użytkownik może zachować to bez zmian lub zmienić.

Przyjrzyjmy się szczegółom:

Wyzwalacze

Może istnieć kilka możliwych wyzwalaczy, aby nazwać dokument, używając funkcji menu Plik > Zapisz jako lub naciskając cmd + s na komputerze Mac ( ctrl + s w systemie Windows) na klawiaturze, tak jak w aplikacjach komputerowych. Ale żadne z nich nie wykorzystuje interaktywnej natury sieci i nie poprawiają szczególnie przepływu użytkowników.

Zamiast tego głównym wyzwalaczem Dokumentów Google jest po prostu kliknięcie pola nazwy dokumentu. Stan najechania na pole wyświetla podpowiedź „Zmień nazwę”. Drugim wyzwalaczem jest Plik > Zmień nazwę , który podświetla pole wprowadzania nazwy.

Zasady

Reguły określają, co dzieje się po kliknięciu wyzwalacza. W takim przypadku jako nazwa dokumentu pojawi się pierwszy wiersz tekstu. Ale co, jeśli użytkownik nie chce, aby jako nazwa był pierwszy wiersz tekstu? Gdy użytkownik kliknie pole wprowadzania nazwy, cały tekst zostanie zaznaczony i zostanie usunięty po naciśnięciu dowolnego klawisza, co ułatwia użytkownikowi utworzenie nowej nazwy.

Opinia

Zmiana koloru obramowania pola wejściowego jest częstym wzorcem interakcji i właśnie tego używa tutaj Dokumenty Google, aby przekazać użytkownikowi natychmiastową informację zwrotną.

Pętle i tryby

Użytkownik pomyślnie utworzył nazwę dokumentu, a wyzwalacz pozostaje na miejscu z jedną kluczową różnicą: dokument został nazwany.

W tym momencie użytkownik może chcieć zmienić tylko kilka liter lub dodać datę do nazwy, zamiast zmieniać całą wcześniej zdefiniowaną nazwę. W tym przypadku, w przeciwieństwie do poprzedniej reguły, reguła podświetlania całej nazwy dokumentu jest wyłączona.

Wynik

Po zdefiniowaniu problemu i skupieniu się na wszystkich czterech częściach mikrointerakcji, rezultatem jest bardziej naturalne, przyjazne dla użytkownika doświadczenie. Rozwiązanie nazewnictwa plików Dokumentów Google pomaga użytkownikowi zachować porządek dzięki odpowiednio nazwanym plikom i upraszcza proces nazywania dokumentów.

Mikrointerakcje w działaniu: przykłady ze świata rzeczywistego

Zmiana kolejności listy zadań

Przypomnienia Apple iOS pomagają użytkownikom zachować porządek i wyeliminować kilka kroków, umożliwiając im dotknięcie, przytrzymanie i przeciągnięcie elementu listy w celu zmiany jego miejsca w kolejności na liście.

Reagowanie na posty w mediach społecznościowych

„Polubienie” treści poprzez kliknięcie przycisku lub ikony kciuka w górę stało się powszechnym wzorcem projektowania UX w wielu aplikacjach i witrynach internetowych. Facebook zbudował tę interakcję, dodając wiele opcji poza „lubieniem” poprzez subtelną mikrointerakcję.

Markowe podświetlanie tekstu

W większości przeglądarek możliwe jest zastąpienie domyślnego koloru zaznaczenia tekstu. IKEA wykorzystuje ten wzór interakcji, aby dodać subtelny detal brandingowy, podkreślając tekst w kultowych żółtych i niebieskich kolorach.

Udostępnianie swojej lokalizacji

Google Hangouts zakłada, że ​​jednym z przypadków, w których użytkownik może chcieć udostępnić swoją lokalizację, jest pisanie SMS-a „Gdzie jesteś?”

Gdy użytkownik wyświetli tę wiadomość, jako opcja kontekstowa pojawi się przycisk „Udostępnij swoją lokalizację”. Następnie mogą dotknąć tego przycisku, aby automatycznie wysłać mapę swojej lokalizacji do innego użytkownika.

Przesuń, aby wybrać

Mikrointerakcje mogą służyć do odpowiadania w aplikacji na proste pytania typu „tak” lub „nie”. Tinder robi to, przesuwając palcem w lewo lub w prawo (nie/tak) w zależności od tego, czy podoba mu się ewentualny mecz.

Rozszerzenie wyszukiwania

Aplikacja Google Inbox nie tylko inteligentnie grupuje pocztę w pakiety, ale także umożliwia wyszukiwanie głosowe lub wybieranie najnowszych kontaktów jednym dotknięciem.

Szybkie dodawanie informacji kontaktowych znajomego

SeatGeek upraszcza proces wypełniania formularzy, automatycznie wypełniając informacje z kontaktów użytkownika za pomocą dotknięcia przycisku „Dodaj z kontaktów”.

Dowiedz się więcej o mikrointerakcjach

Mikrointerakcje są kluczowym elementem poprawy komfortu użytkownika i dostępnych jest wiele zasobów, aby dowiedzieć się o nich więcej, z których kilka wymieniono poniżej.

Aby dowiedzieć się więcej o mikrointerakcjach w ogóle, odwiedź Microinteractions, stronę internetową stworzoną jako dodatek do wspomnianej wcześniej książki „Microinteractions: Designing with Details” Dana Saffera. Na stronie znajdują się szczegółowe wyjaśnienia dotyczące mikrointerakcji, a także informacje o pochodzeniu znanych mikrointerakcji, takich jak autokorekta, autouzupełnianie oraz wytnij i wklej. Pierwszy rozdział książki jest również dostępny do bezpłatnego pobrania.

Aby uzyskać inspirację do mikrointerakcji, odwiedź Little Big Details, wyselekcjonowaną kolekcję mikrointerakcji w produktach cyfrowych. Pokazuje przykłady, w jaki sposób firmy takie jak Apple, Trello i Stack Overflow wdrażają mikrointerakcje i animację interfejsu użytkownika.

Aby dowiedzieć się, jak tworzyć mikrointerakcje w Framerze, przeczytaj artykuł Wojciecha Dobrego w Toptal Designerze, Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Zasady projektowania i ich znaczenie
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Odkrywanie zasad projektowania Gestalt
• Adobe XD kontra Sketch – które narzędzie UX jest dla Ciebie odpowiednie?
• 10 elementów UX, z których korzystają najlepsi projektanci