Jak zaprojektować mikrointerakcje jednym dotknięciem
Mikrointerakcje to „tajny sos”, który sprawia, że aplikacje i strony internetowe błyszczą dla użytkowników. Te drobne szczegóły ułatwiają ustawienie alarmu, naciśnięcie przycisku lub po prostu lepsze zrozumienie, jak pracować z produktem cyfrowym.
Sekret polega na tym, że najlepsze mikrointerakcje to elementy, o których użytkownik prawdopodobnie nawet nie myśli. Dzieje się to w mgnieniu oka - często jednym dotknięciem ekranu telefonu komórkowego. Pomimo niewielkiego charakteru interakcji, a więc „mikro”, wartość jest ogromna dla użytkowników, ponieważ zaangażowanie to staje się bardziej zintegrowane z codzienną aktywnością.
Jak zaprojektować mikrointerakcje jednym dotknięciem, które zachwycą użytkowników? Oto kilka pomysłów.
Poznaj elementy Envato
Animuj przycisk
Czy pamiętasz, kiedy pierwszy raz zauważyłeś Facebooka jak w Messengerze? Stuknąłeś ikonę „kciuki w górę”, która urosła w pudełku do osoby, z którą rozmawiałeś. Czy to sprawiło, że się uśmiechnąłeś? Czy ta odrobina ruchu sprawiła ci przyjemność?
Prosta animacja, przed dotknięciem, aby go zachęcić lub po dotknięciu, aby pokazać, że mikrointerakcja działa, to niezawodny sposób na stworzenie czegoś, co użytkownicy chcą dotknąć. Małe animacje dostarczają informacji o tym, co się dzieje, dzięki czemu użytkownicy czują się pewnie i pewnie swoich ról w pętli informacji zwrotnych.
Nie rób
Animacja powinna być tak prosta jak sama mikrointerakcja. Utrzymuj ruchy proste i płynne oraz szybkie rozpoczęcie i zakończenie. Dodanie oceny IMDb odbywa się zgodnie z tą zasadą; najedź kursorem na ocenę i szybko zobacz liczbę gwiazdek do dodania w miarę przesuwania się po każdej z nich. Stuknij, aby kliknąć, aby zakończyć i potwierdzić działanie.
Podaj opcje
To lekcja UX, która wraca do listów miłosnych do szkoły podstawowej i przedszkola. Lubisz mnie? Zaznacz tak lub nie.
Wielkie mikrointerakcje mogą być zaprojektowane przy użyciu tej samej koncepcji. Daj użytkownikom dwa szybkie wybory. Stuknij, aby zainicjować (lub zatrzymać) akcję; dotknij, aby przełączyć. Użytkownicy chcą dokonywać wyborów i czuć kontrolę nad cyfrowymi doświadczeniami, ale nie chcą być uwikłani wieloma ekranami, aby się tam dostać.
Utwórz natychmiastową akcję
Najlepszy sposób na zapewnienie użytkownikom interakcji z Twoją mikrointerakcją? Wynik powinien być natychmiastowy. Pożądany wynik powinien:
- Stało się to za pomocą jednego dotknięcia
- Podaj żądane działanie w ciągu 0, 1 sekundy
Natychmiastowość mikrointerakcji jest niezbędna do ich sukcesu. Ponieważ charakter tych elementów jest niewielki, każde opóźnienie w działaniu zirytuje użytkowników. (Pomyśl tylko, jak frustrujące byłoby, gdyby wystarczyło trzy stuknięcia, aby wyłączyć alarm, lub jeśli wystąpiło 2-sekundowe opóźnienie, aby wyciszyć dzwonek podczas połączenia.)
Szybkie przełączanie między podobnymi (lub niepodobnymi) lub śledzeniem na Instagramie jest doskonałym przykładem. Tak szybko powinna być twoja mikrointerakcja.
Projekt do powtórzeń
Jedną z rzeczy, która sprawia, że mikrointerakcja różni się od niektórych innych interaktywnych elementów w interfejsie użytkownika, jest to, że będą one używane w kółko. Mikrointerakcje zazwyczaj nie są przeznaczone do jednorazowego użytku. (Ile razy w ciągu ostatniej godziny naciskałeś przycisk w kształcie serca na Instagramie?)
Projektuj tę powtarzalną akcję, ale akcja nie powinna wydawać się powtarzalnym ruchem. Choć może się to wydawać dużo, sprowadza się to do intuicyjnej natury kranu. Czy to oczywiste i naturalne? Jeśli użytkownik nie musi myśleć o działaniu, nigdy nie będzie powtarzał się.
Używanie powszechnie akceptowanych wzorców użytkownika, animacji i stylów ikon pomoże w sposobie projektowania mikrointerakcji. Nie wymyślaj tutaj koła ponownie; ułatwiają użytkownikom wykonywanie zadań za pomocą jednego dotknięcia i bez konieczności drapania się po głowie, jak to zrobić.
Spraw, aby był czytelny i odpowiedni
Oto krok, który jest zbyt często zapominany - instrukcje wewnątrz mikrointerakcji muszą być czytelne i powiązane.
Czytelny odnosi się do dowolnego tekstu lub instrukcji, które odnoszą się do mikrointerakcji. Słowa muszą być łatwe do zobaczenia i zeskanowania. Z punktu widzenia projektowania kluczowy jest wybór dobrego kroju pisma i zapewnienie wystarczającej przestrzeni wokół słów oraz dużego kontrastu między literą a tłem. Unikaj zagęszczonych, cienkich lub nowatorskich krojów, które nie są łatwe do odczytania na pierwszy rzut oka.
Powiązane odnosi się do tekstu, który czyta się tak, jak mówią ludzie. Należy unikać rzadkiego języka lub niezręcznego frazowania. Doskonałym przykładem są instrukcje wewnątrz pól formularza, które znikają, gdy użytkownik zaczyna pisać. Jest to szczególnie prawdziwe, gdy sformułowanie używa tonu lub głosu, którego użytkownik oczekuje od marki lub witryny, z którą wchodzi w interakcje.
Skoncentruj się na szczegółach
Mikrointerakcja jest jednym z wielu szczegółów konstrukcyjnych tworzących interfejs. Musisz zachować szczególną ostrożność przy każdym z nich.
Mikrointerakcje powinny być częścią ogólnego projektu. Ale musisz myśleć o tych drobnych działaniach także na inne sposoby. Od wyborów kolorów po rozmiar elementów, z którymi użytkownik musi wchodzić w interakcje, szczegóły te zachęcają do działania lub powodują, że użytkownicy rezygnują z projektu z czegoś innego.
Podobnie jak w przypadku każdego innego elementu projektu, stwórz zestaw stylów i reguł projektowania dla mikrointerakcji w aplikacji lub witrynie, aby działania były spójne w całym projekcie i aby użytkownicy mogli je znaleźć i zaangażować się. Im cieńszy element - lub interakcja -, tym ważniejsze stają się szczegóły.
Nie komplikuj
Powiedzenie tego milion razy nie wystarczy - bądź prosty. Istnieje zbyt wiele projektów, które są zbyt trudne w użyciu. Możesz myśleć, że to fajne, ale użytkownicy nie. Lubią przewidywalność, spójność i prostotę.
Im łatwiej jest z czymś wchodzić w interakcję, tym bardziej prawdopodobne jest, że użytkownicy faktycznie stukną przycisk. Dlatego działania jednym dotknięciem są tak ważne. Skąd wiesz, czy twój projekt jest wystarczająco prosty? Potrzebuje zdefiniowanej struktury z pętlą sprzężenia zwrotnego dla działań, prostych instrukcji i elementów wizualnych oraz komunikatu, który jest jasno przekazywany i łatwy do zrozumienia.
Nie przestawaj się rozwijać
Projektowanie mikrointerakcji jest procesem ewolucyjnym. Ponieważ jest to taka nowa koncepcja, ciągle się zmienia. Istnieją nowe pomysły i nowe sposoby tworzenia czegoś, co użytkownicy chcą dotknąć.
Śledzenie ewolucji mikrointerakcji wraca do podstaw, które po raz pierwszy zdefiniował Dan Saffer. (Napisał także jedną z najbardziej autorytatywnych książek na ten temat, „Mikrointerakcje: Projektowanie ze szczegółami”). Mikrointerakcje obejmują czteroetapowy proces rozpoczynający się od akcji wyzwalającej, zasady działania interakcji, pętla sprzężenia zwrotnego, dzięki której użytkownik wie coś się wydarzyło oraz pętle i tryby, które określają, jak będą działać przyszłe interakcje lub co będzie dalej. Pamiętaj o tym, a będziesz na drodze do sukcesu w mikrointerakcji.
Wniosek
Jest wiele elementów do zaprojektowania czegoś tak małego. Więc nie sądzę, że możesz stworzyć mikrointerakcję w pięć minut i przejść dalej. Projektowanie mikrointerakcji wymaga szczególnej uwagi i planowania.
Pamiętaj, że najlepsze mikrointerakcje na ogół działają z jednym dotknięciem i są elementami, z których użytkownicy nawet nie myślą o zaangażowaniu się, chociaż będą to robić regularnie.
