Zrozumienie mikrointerakcji w projektowaniu aplikacji mobilnych

Użyteczność jest jednym z kluczowych elementów projekt mobilnego interfejsu użytkownika. Wielka użyteczność często się wiąże mikrointerakcje które są małe odpowiedzi i zachowania z interfejsu dyktując, jak powinien być używany interfejs użytkownika. Te mikrointerakcje definiują zachowania, zachęcają do zaangażowania i pomagają użytkownikom wizualizować działanie interfejsu.

Interfejsy cyfrowe są pośrednikami między użytkownikami i ich pożądanymi celami. Projektanci interfejsów tworzą doświadczenia, które pomagają użytkownikom wykonywać pewne zadania. Na przykład aplikacja listy zadań do wykonania ma interfejs, który pomaga użytkownikom organizować zadania. Podobnie jak aplikacja Facebook daje użytkownikom interfejs do interakcji z kontem na Facebooku.

W tym przewodniku zagłębię się dalej mikrointerakcje dla aplikacji mobilnych. Małe interakcje mogą wydawać się trywialne, ale mogą mieć ogromny wpływ na jakość doświadczenia użytkownika. Mikro-interakcje wykonywane prawidłowo są prawdziwą częścią wszechstronnego doświadczenia użytkowników mobilnych.

Moc mikrointerakcji

W większości przypadków celem mikrointerakcji jest przekazać opinię na podstawie działania użytkownika. Może to pomóc użytkownikom wizualizuj, jak interfejs się porusza lub zachowuje, nawet jeśli jest czysto cyfrowy na płaskim ekranie.

Mikrointerakcje mają moc, ponieważ stworzyć iluzoryczne doświadczenie. Suwaki włączania / wyłączania nie poruszają się tak jak fizyczne przełączniki, ale mogą wydawać się poruszać w ten sposób poprzez animacje.

W tym poście znalazłem niesamowity cytat omawiający ogromną wartość mikrointerakcji dla aplikacji mobilnych:

“Najlepsze produkty to dwie rzeczy: funkcje i szczegóły. Funkcje przyciągają ludzi do produktu. Szczegóły są tym, co ich tam trzyma. A szczegóły sprawiają, że nasza aplikacja wyróżnia się na tle konkurencji.”

The Małe szczegóły może wydawać się nieistotny z punktu widzenia rozwoju, ale z punktu widzenia użytkownika naprawdę to robią Zrób różnicę między aplikacją OK i niezwykłą aplikacją interfejsu użytkownika.

Świetne mikrointerakcje sprawiają, że użytkownik czuć się nagradzanym za podjęcie działania. Te działania mogą być powtarzający się i zakorzenione w zachowaniu użytkownika. Mogą nauczyć się korzystać z aplikacji w oparciu o te mniejsze mikrointerakcje. Gdy użytkownik wykonuje zachowanie, te małe interakcje sygnalizują „tak, możesz ze mną oddziaływać!”

Spójrz na przykłady podane w specyfikacjach materiałowych Google. Dokumentacja zawiera całą sekcję poświęconą ruchowi materiałów. Relacje przestrzenne stanowią dużą część tego równania, ale ruch może dyktować więcej niż tylko relacje przestrzenne.

Tu są najczęstsze zastosowania animacji i ruchu w projektowaniu mobilnego interfejsu użytkownika / UX:

• Prowadzenie użytkowników między różnymi stronami
• Prowadzenie użytkowników przez interfejs do nauczania określonych zachowań
• Sugerowanie działań / zachowań, które można podjąć na dowolnej stronie

Aplikacje mobilne mają znacznie mniej miejsca na ekranie niż strony internetowe. Może to prowadzić do trudności w nauczeniu użytkowników, jak korzystać z aplikacji. Ale może to być zaskakująco proste, jeśli wiesz, jak prawidłowo wdrażać mikrointerakcje.

Jak działają mikrointerakcje

Pojedyncza mikrointerakcja wystrzeliwuje za każdym razem, gdy użytkownik korzysta z jednej części interfejsu. Większość mikrointerakcji jest animowane odpowiedzi na gest użytkownika. Przesuwający się ruch reaguje inaczej niż stuknięcie lub ruch.

Blink UX zrobił świetny post, omawiając drobne szczegóły mikrointerakcji. Te małe animacje powinny następować po przewidywalny proces użytkownik może się nauczyć dla każdej interakcji w aplikacji.

Mikrointerakcje prowadzą użytkowników przez interfejs oferowanie odpowiedzi na zachowania. Gdy użytkownik wie, że suwak włączania / wyłączania może się poruszać, wie, że jest interaktywny. Na podstawie odpowiedzi będą również wiedzieć, czy ustawienie zostało włączone, czy wyłączone. Gdy przycisk wygląda, może zostać kliknięty przez użytkownika instynktownie wie mogą z nim współdziałać.

Według UXPin każda podstawowa mikrointerakcja może podzielić się na cztery etapy, ale podsumowałem ten proces trzy kroki.

1. Akcja - użytkownik coś robi jak szybki ruch, przesuń palcem, stuknij i przytrzymaj lub inne interakcje.
2. Odczyn - interfejs odpowiada na podstawie tego, co musi się wydarzyć. Przesunięcie ekranu może wrócić do historii przeglądarki lub stuknięcie suwaka ON / OFF może wyłączyć ustawienie.
3. Sprzężenie zwrotne - to jest to, co użytkownik rzeczywiście widzi jako wynik interakcji. Gdy użytkownik wróci do przeglądarki mobilnej, może przesunąć poprzednią stronę do góry ekranu. Suwak włączania / wyłączania może płynąć płynnie lub powiększać się, gdy na ekran zostanie wywierany nacisk.

Te bardzo małe działania można wykonać bez animacji, ale świetne mikrointerakcje oferują realistyczne uczucie do płaskiego interfejsu cyfrowego, który najczęściej ma postać realistyczne efekty animacji. One tchną życie w interfejs i zachęcają do większej interakcji z użytkownikiem.

Szukaj szczegółów

Patrząc na mniejsze elementy projektu, zrozumiesz, jak aplikacja powinna reagować na określone zachowanie.

Pociągnij, żeby odświeżyć jest dobrym przykładem popularnej obecnie mikrointerakcji. Nie był on integralną częścią systemu iOS, gdy po raz pierwszy został uruchomiony, ale wiele aplikacji przyjęło ten pomysł i zaczęło się nim poruszać. Teraz ciągnięcie do odświeżania jest dobrze znanym zachowaniem, którego większość użytkowników po prostu używa do przeglądania interfejsu użytkownika kanału. To samo można powiedzieć o menu hamburgerów mobilnych, które zyskały ogromną popularność.

Dokonaj każdej mikrointerakcji realistyczny i prosty. Nie przesadzaj z animacjami, ponieważ mogą stać się nudnym jeśli są zbyt szczegółowe i często używane. Użytkownik nie chce pojawiać się za każdym razem, gdy puknie ikonę menu. Osiągnąć kompromis z prawdziwą wartością, która się komunikuje jak powinien działać interfejs bez przesady.

Patrząc na niektóre przykłady

Myślę, że najlepszym sposobem na nauczenie się czegoś jest zrobienie tego, a drugim najlepszym sposobem jest studiowanie pracy innych. Zebrałem małą garść Animacje mikrointerakcji UI / UX od utalentowanych użytkowników Dribbble, aby pokazać, jak wyglądają w prawdziwej makiecie.

Każda aplikacja będzie inna i będzie miała inne potrzeby w zależności od tego, co robi aplikacja. W końcu większość użytkowników chce tego samego: aplikacji intuicyjny i zapewnia wysoką jakość obsługi z mikrointerakcji w stosunku do zachowań użytkownika.

1. Animowany interfejs aplikacji aplikacji

Pierwszym przykładem jest fajna funkcja animacji karty stworzona przez Ivana Martynenko. Zauważysz garść mikrointerakcji w tym projekcie, zwłaszcza przesuwanie karty i przechodzenie przez szczegóły.

Po dotknięciu karty rośnie jej rozmiar. Po dotknięciu przycisku Subskrybuj zdjęcie profilowe użytkownika przesuwa się na listę subskrybentów. Wszystko wydaje się bardzo intuicyjne i całkiem naturalne dla interfejsu.

2. Interaktywny ekran ćwiczeń

Ta kreatywna animacja mobilna pochodzi od projektanta Witalija Rubtsowa. To demonstruje użytkownika oszczędzającego trening na jeden zestaw przysiadów.

Zauważ, że każda animacja ma to samo elastyczny efekt odbicia kiedy menu się otwierają i zamykają. Dotyczy to również sytuacji, gdy działanie jest sprawdzane jako „Gotowe”. Konsystencja jest kluczowy w mikrointerakcjach, ponieważ powinny one wszystkie czuć podłączony do tego samego interfejsu.

3. Mikrointerakcje wyszukiwania aplikacji

Krótkie, słodkie i na temat. Myślę, że to najlepiej opisuje te mikrointerakcje wyszukiwania stworzone przez Lukasa Horaka. Każda animacja jest szybki, ale wciąż zauważalny.

W ten sposób powinieneś zaprojektować mikrointerakcje do unikać nadmiernej złożoności. Jeśli interfejs ładowałby się szybciej bez animacji, to po co go dodawać? Szybkie animacje utrzymuj użytkownika w ruchu, nie zagłuszając doświadczenia.

4. Mikrointerakcja celu fitness

Myślę, że Jakub AntalÃ? Wszystkie ekrany mają to uczucie jiggly jell-o, ponieważ kształty poruszają się tak płynnie.

Ale interfejs też się czuje solidny i użyteczny. Pokazuje, że mikrointerakcje wykonane w określonym celu mogą być zabawne i zabawne, ale także funkcjonalne i pragmatyczne.

5. Pociągnij do Odśwież animację

Oto jedna z moich ulubionych animacji „pull-to-refresh” stworzonych przez zespół w Ramotion. To nie tylko naśladuje płyn z akcją pull, ale animacją odpowiedzi płynnie się łączy od pluska cieczy do koła załadunkowego.

To dbałość o szczegóły to właśnie uwydatnia prawdziwe piękno mikrointerakcji mobilnych.

6. Mikroprocesor Tab

Widgety z zakładkami są dość powszechne w aplikacjach mobilnych z powodu mniejszych ekranów. Bardzo podoba mi się ta mikrointerakcja stworzona przez Johna Noussisa, choć myślę, że byłaby bardziej skuteczna przy szybszej prędkości, ale sama animacja jest wspaniała i dobrze przemyślana.

Strzałka kotwicy karty przesuwa się w prawo, tak jak nowa zawartość odbija się od prawej. Daje złudzenie cały ekran fizycznie się porusza w prawo. Animacja jest znakomita, ale ponieważ jest tak powolna, większość użytkowników denerwuje się po kilku dniach.

7. Wstępne ładowanie animacji

Nie powiedziałem wiele o tym ładowanie prętów w tym poście, ale są one równie cenne dla ogólnego doświadczenia. Większość użytkowników nie chce czekać na załadowanie danych, ale zdecydowanie nie chce patrzeć na pusty ekran podczas ładowania.

Bret Kurtz zrobił ten niesamowity ekran wstępnego ładowania, który jest zarówno zabawny, jak i pouczający. Użytkownik może być w rzeczywistości rozrywkowy oglądając tę ​​małą animację powtarzam. Mogą też być uspokojony że aplikacja jest nadal ładuje swoje dane i nie rozbił się.

Zawijanie

Wszystkie te przykłady doskonale pokazują wartość mikrointerakcji. Aplikacje mobilne zyskują znacznie większą wartość dzięki mikrointerakcji, ponieważ użytkownicy dotknij fizycznie ekranów palcami. Użytkownicy nie dotykają swoich monitorów stacjonarnych ani ekranów laptopów, ale każdy dotyka swoich smartfonów, ponieważ jest to domyślny stan interaktywności.

To jest znacznie bardziej osobiste doświadczenie, dlatego projektowanie aplikacji mobilnych może być takie niuansowany proces. Po prawidłowym wykonaniu, dodanie wspaniałych mobilnych mikrointerakcji może zbudować potężne iluzoryczne doświadczenie użytkownika z niczego poza pikselami i ruchem.