Ożywianie mikro-interakcji i animacji interfejsu użytkownika dzięki współpracy programistów i projektantów

Możemy stworzyć wspaniałe wrażenia dla użytkowników dzięki mikro-interakcji i animacji interfejsu użytkownika!

Cześć, nazywam się Kyo Kim i pracuję jako projektant produktu w Capital One od około dwóch lat. Podczas mojej pracy korzystałem z mikro-interakcji i animacji, w tym w niektórych projektach mobilnych, z których mogłeś sam skorzystać. Zanim zacząłem pracować w technice, moje doświadczenie było w filmie. W filmie nacisk kładziony jest na opowiadanie historii i montaż, aby stworzyć historię angażującą odbiorców; i wiele z tego osiąga się poprzez zastosowanie przejść. Uważam te umiejętności za przydatne dzisiaj, gdy tworzę doświadczenia i historie dla narzędzi cyfrowych.

Kiedy projektuję, myślę o czynnikach, które zapewniłyby użytkownikom wspaniałe, zachwycające wrażenia z przejścia i opowiadania.

Aby produkt oferował swoim użytkownikom wspaniałe wrażenia, musi oferować coś więcej niż estetyczny design i imponujące efekty animacji.

Niezależnie od tego, czy produkt jest aplikacją, przeglądarką internetową, czy jakąkolwiek inną formą produktu cyfrowego, musi przyciągać użytkowników, być dla nich przyjemnym w użyciu i dawać im możliwość bezpośredniego i sensownego zaangażowania się w nie droga.

Mikro-interakcje mogą sprawić, że użytkownik będzie zachwycający i satysfakcjonujący w sposób, którego wiele elementów projektu nie może. Zanim przejdziemy do mikrointerakcji w kontekście projektowania produktu, zacznijmy od podstaw.

Czym oni są? Dlaczego jest to dobre dla wygody użytkownika? Dlaczego projektanci i programiści powinni włączać je do swojej pracy? Jak zespoły projektantów produktów mogą współpracować, aby je ulepszyć?

Co to są mikro-interakcje i dlaczego powinniśmy się nimi przejmować?

Co to są mikro-interakcje lub animacje interfejsu użytkownika? Ludzie często nazywają je ładnymi animacjami, animacjami lub ruchomymi obrazami. Są to jednak znacznie więcej.

W przeciwieństwie do innych form animacji, które istnieją wyłącznie w celu stworzenia iluzji ruchu, mikro-interakcje bezpośrednio angażują użytkownika, umożliwiając mu wykonywanie różnych zadań i interakcję z produktem w intuicyjny i skuteczny sposób.

Gdybyśmy mieli przywiązać to do zasad dobrego projektowania systemów, poprawia to i umożliwia użytkownikowi przekazywanie opinii systemowych. Jeśli zostanie to wykonane poprawnie, użytkownicy przyjmą mikro-interakcje jako wiadomość od użytkownika, że ​​(system) robi to, co powinien, w odpowiedzi na to, czego potrzebuje użytkownik.

Nawet jeśli nie wiesz, co to są mikro-interakcje, angażujesz się w nie regularnie. Za każdym razem, gdy używasz aplikacji lub produktu internetowego do wykonania określonego zadania - czy to czyta się wiadomości, dokonuje zakupu, gra w grę, tworzy profil lub dostosowuje ustawienia i preferencje powiadomień - każda indywidualna czynność stanowi mikro-interakcja. Mikro-interakcje są płynnie wplecione w platformę produktu, dzięki czemu ich funkcje są przejrzyste i dostępne, skutecznie poprawiając ogólne wrażenia użytkownika.

Chociaż te „działania” przyjmują wiele różnych form, niektóre typowe przykłady obejmują:

  • Kiedy „przenosimy” przedmiot do wirtualnego koszyka.
  • Kiedy wybieramy między dwiema opcjami przycisku przełączania podobnego do wezwania do działania.
  • Kiedy „ściągamy”, aby odświeżyć kanał informacyjny i zobaczyć najnowszą aktualizację.
  • Kiedy „przewijamy w górę i w dół” w długim kanale lub na stronie.

Projektując mikro-interakcję, musimy sprawdzić, czy jest to naprawdę konieczne i niezbędne dla wygody użytkownika. W przeciwnym razie może to odwrócić uwagę użytkownika od formy efektywnego korzystania z produktu lub stać się wizualnym hałasem.

Zasady mikrointerakcji

Istnieją trzy zasady, które zawsze biorę pod uwagę przy projektowaniu mikro-interakcji.

  1. Ciągłość (i subtelność)

Elementy mikro-interakcji powinny być subtelne, tak aby użytkownik podejmował działanie, a jego doświadczenie było ciągłe. Na przykład, jeśli tworzymy animację przewijania w długim kanale, użytkownik powinien być w stanie skoncentrować się na zawartości strony, a nie na samej animacji przewijania.

2. Przewidywalność

Wysokiej jakości mikro-interakcje mają element przewidywalności, który umożliwia użytkownikowi efektywne i wydajne poruszanie się po produkcie. Użytkownik może dokładnie przewidzieć skutki swoich działań, czuć się komfortowo cofając je i mieć pewność, że będzie w stanie działać zgodnie z oczekiwaniami.

3. Przekształcalność

Płynne przejścia między wieloma ekranami i dobrze zdefiniowane transformacje różnych obiektów w nich zawartych są kluczowymi aspektami jakości mikro-interakcji. Umożliwiają użytkownikowi intuicyjne zrozumienie relacji między ekranami i elementami w nich zawartymi.

Zaprojektowane zgodnie z tymi zasadami, mikro-interakcje zapewniają kontekst dla projektu, pomagając użytkownikom wiedzieć, jak z nim współdziałać. Mikro-interakcja to chwilowe zdarzenie, które kończy jedno zadanie. Prawdopodobnie najmniejsze interaktywne elementy projektu strony internetowej lub aplikacji, mikro-interakcje są jednymi z najważniejszych, ponieważ pełnią różnorodne podstawowe funkcje.

Wyzwalacze (dotknij, przeciągnij, przeciągnij itp.) Inicjują każde z działań wymienionych w powyższej sekcji (ciągłość, przewidywalność i transformowalność). Użytkownik wykonuje akcję na stronie internetowej lub aplikacji, aby rozpocząć proces (nawet jeśli będzie kontynuowany po początkowym etapie). Jest to zgodne z wzorcem wezwania do działania od użytkownika, regułami zaangażowania określonymi przez interfejs (co się stanie i jak), informacjami zwrotnymi od użytkownika (czy to działało czy nie) oraz wzorcami lub pętlami (wykonuje akcję zdarzyć się raz lub powtórzyć zgodnie z harmonogramem).

-Jak programiści i projektanci mogą współpracować, aby wprowadzić mikro-interakcje do życia

Jak widać, mikro-interakcje odgrywają kluczową rolę w kształtowaniu doświadczenia użytkownika. Z tego powodu stały się coraz ważniejszą częścią mojej pracy jako projektanta produktu. Po pracy nad różnymi projektami na wielu platformach i zastosowaniach zauważyłem, że nie wszyscy dostrzegają wartość tych elementów lub sposób ich skutecznego tworzenia. Co ważniejsze, często członkowie zespołu nie wiedzą, jak wyrazić przed sobą swoje pomysły dotyczące projektowania przejść i mikro-interakcji.

Uświadomiłem sobie, że wszystko sprowadza się do komunikacji - coś zostało zagubione w tłumaczeniu, kiedy wyjaśniłem moje pomysły projektowe moim programistom. Być może słyszałeś już ten cytat z Konfucjusza: „Powiedz mi, a zapomnę. Pokaż mi, a może pamiętam. Zaangażuj mnie, a zrozumiem. ”I to dzięki zaangażowaniu, jako zespół projektantów i programistów, tworzymy wspaniałe doświadczenia.

Najpierw przejrzyjmy krótki opis procesu projektowania…

W idealnej sytuacji, gdy projektant wpadnie na pomysł mikro-interakcji, tradycyjny przepływ pracy przebiega w następującej kolejności:

  1. Projektant opracowuje elementy wizualne i efekty animacji niezbędne do realizacji swojego pomysłu.
  2. Projektant przedstawia ostateczny model i jego podstawowe koncepcje pozostałym członkom zespołu.

Ale co, jeśli proces projektowania nie będzie przebiegał w praktyce tak jak w teorii? Co jeśli przedstawiamy scenorys lub niekompletny model? A może ktoś w zespole projektuje model?

Kiedy tak się dzieje, mogą pojawić się problemy z prezentacją lub rozwojem. Problemy te zazwyczaj należą do jednej z trzech kategorii:

  1. Pomysł animacji nie jest wystarczająco jasno wyrażony.

Jeśli próbujesz opisać koncepcję animacji słowami lub zdjęciami, na twarzach odbiorców mogą pojawić się grymasy. Oznacza to, że starają się jak najlepiej zrozumieć Twój pomysł, ale tak naprawdę go nie rozumieją. Nawet jeśli rozumieją podstawową koncepcję, obraz, który wyczarowali w ich umysłach, jest prawdopodobnie niezgodny z tym, co sobie wyobrażasz. Ponieważ ludzie postrzegają ruchome obrazy, nieruchome obrazy i opisy słowne na różne sposoby, poleganie na słowach lub obrazach w celu przekazania idei animacji stwarza miejsce na nieporozumienia i często niepotrzebne napięcie wśród członków zespołu.

2. Projektant nie wie, czy animacja działa dobrze, dopóki nie sprawdzi i nie przetestuje prototypu programisty.

Gdy projektanci nie mają umiejętności prototypowania, ograniczają się do przekazywania swoich pomysłów programistom za pomocą scenorysu. Nawet jeśli projektant mocno wierzy w model mikro-interakcji, nie może powiedzieć, czy działa on w pełni, dopóki deweloper nie ukończy prototypu. Jest to problematyczne z wielu powodów, z których najważniejszym jest wysokie prawdopodobieństwo błędnej komunikacji, którą takie podejście wprowadza do procesu. Ponadto otwiera drzwi do wątpliwości członków zespołu i prowadzi do pytań o wykonalność pomysłu. Z punktu widzenia rozwoju może to być kosztowne.

3. Projektant i programista nie znajdują się na tej samej stronie

Kiedy projektanci tworzą animacje interfejsu użytkownika lub mikro-interakcje, starają się uwzględnić złożone szczegóły projektu, takie jak niestandardowe ułatwienia, skrypty, wyrażenia i inne efekty. Przedstawiając te pomysły programistom, mogą usłyszeć: „Nie da się tego zrobić na naszej osi czasu” lub „Nie możemy zrobić dokładnie tego samego, ale spróbujemy”. W tym momencie mogą próbować różne szczegóły i problemy techniczne z programistami. Dyskusje te mogą jednak okazać się bezowocne, jeśli projektant nie będzie miał praktycznej znajomości narzędzi lub języków używanych przez programistów. Czynniki te należy wziąć pod uwagę przy formułowaniu i omawianiu pomysłów, aby mikro-interakcje były zgodne z domyślnymi ustawieniami programistów, zwiększając prawdopodobieństwo, że produkt końcowy będzie spełniał standardy projektanta (i wszystkich innych).

Jakie są rozwiązania tych problemów?

Podczas gdy wszyscy projektanci i programiści mają własny sposób komunikowania się na temat swoich koncepcji animacji, chcę podzielić się jedną z metod stosowanych przez mój zespół. Ta metoda okazała się dość udana i zaowocowała mniejszą liczbą spotkań oraz znacznie poprawiła komunikację naszego zespołu.

Teraz już nie kłócimy się o to, czy uwzględnić mikro-interakcje, szukamy sposobów, aby uczynić je jeszcze lepszymi!

Skeleton Interaction Concept & Interaction Guide

„Koncepcja interakcji szkieletu i przewodnik interakcji nie pozostawiają miejsca na interpretację, co pozwala mi od razu rozpocząć pracę i być pewnym, że pasuję do wizji projektanta.” - Jesse M Majcher / główny inżynier IOS

Standardowy proces, którego używamy do komunikowania się o projektach UX, nie przekłada się dobrze na animacje interfejsu użytkownika. Po pierwsze, projekty UX i przepływy są nadal projektowane ekran po ekranie i są statyczne. Animacje interfejsu użytkownika są przepływami same w sobie, są płynne i oparte na czasie. Kiedy tworzymy projekt statyczny, tworzymy szorstką ramkę, abyśmy mogli zrozumieć pomysł i omówić przebieg. To pozwala nam łatwo zrewidować i dopracować projekt przed utworzeniem ostatecznej wersji. Gdy każdy członek zespołu zgodzi się, że projekt jest gotowy do przekazania deweloperom, projektant zapewnia programistom przewodnik po stylu i czerwoną linię zawierającą szczegóły, specyfikacje i inne ważne informacje na temat projektu.

Jeśli zastosujemy podobny proces do animacji, nasz proces może być znacznie szybszy i lepszy.

  1. Koncepcja interakcji szkieletu (badanie ruchu)

Koncepcja interakcji szkieletu jest podobna do szkieletu, który stworzyłbyś podczas projektowania przepływu, główna różnica polega na tym, że jest to prototypowe demo, które można odtworzyć / kliknąć. Jeśli przyniesiemy to na spotkanie, członkowie naszego zespołu nie będą musieli używać swojej wyobraźni, aby zrozumieć koncepcję. Projektant może użyć grywalnej / klikalnej wersji demonstracyjnej lub statycznej planszy do bezpośredniego odniesienia do elementów wizualnych i animacyjnych projektu. To da każdemu jasne i dokładne zrozumienie jego / jej pomysłu. Z kolei partnerzy mogą przekazywać informacje zwrotne, które są bardzo specyficzne, a zatem bardzo cenne dla projektanta. Jednocześnie zespoły ds. Zarządzania produktem i rozwoju uzyskają informacje, które pozwolą im poprawić komunikację wewnętrzną i oszacować czas realizacji projektu.

2. Przewodnik interakcji

Gdy zespół uzgodni koncepcję, projektant tworzy przewodnik interakcji. Jest to podobne do przewodnika po stylach, ponieważ określa położenie, obrót, skalę i czas elementów. Możemy dodać każdy szczegół dotyczący animacji, co pomoże naszym partnerom w zrozumieniu tego. Kiedy projektant pokazuje swoim partnerom przewodnik interakcji, może on jeszcze bardziej wyrazić się na temat ruchu i pomiaru koncepcji animacji. Jest to bardzo pomocne przy finalizowaniu pracy poprzez współpracę. Pomaga także projektantom w przemyślaniu ich projektu animacji / mikro-interakcji.

3. Umiejętności prototypowania dla projektantów

Z mojego doświadczenia wynika, że ​​aby przygotować się do udanej współpracy przy projektowaniu, projektant produktu powinien być kierowcą animacji, a programista powinien zapewnić wsparcie. Oznacza to, że projektant produktu ponosi większość odpowiedzialności w ramach partnerstwa. Nie tylko są oni odpowiedzialni za jasne wyjaśnienie swoich pomysłów, ale muszą wykazać, że są wykonalne, przedstawiając dowód koncepcji. Oznacza to również, że projektanci produktów muszą być w stanie tworzyć własne prototypy animacji. Jeśli projektant produktu może stworzyć prototyp i zaprezentować go podczas spotkania, następująca dyskusja będzie bardziej przejrzysta i mniej czasochłonna, prowadząc do bardziej efektywnego procesu komunikacji.

Jakie rodzaje narzędzi do prototypowania powinny się zapoznać z projektantami? Istnieje wiele narzędzi, ale nie każdy wie, co działa najlepiej w przypadku konkretnych zadań związanych z mikro-interakcją. Oto moje rekomendacje oparte na moim osobistym doświadczeniu w projektowaniu tych elementów.

Jeśli znasz kodowanie:

  • Mobile: Xcode, studio Android
  • Mobilne lub internetowe: Framer
  • Sieć: animacja CSS

Jeśli chcesz zaprojektować interakcję między wypychaniem podobnym do ekranu a modułem:

  • Invision i Marbel

Jeśli chcesz utworzyć bardziej szczegółowe interakcje:

  • Zasada, Adobe CC, origami Studio i Pixate

Jeśli chcesz stworzyć szczegółowe interakcje + animację:

  • Po efektach

Obecnie jestem fanem używania After Effect do prototypowania. Nawet jeśli nie jest interaktywny (tzn. Klikalny), jest to idealny sposób na przedstawienie koncepcji animacji. Ponadto, nie ma ograniczenia efektu i możesz kontrolować ruch detali. Można go nawet wykorzystać do interakcji w przestrzeni 3D, na przykład dla AR i VR.

Wspaniałe interakcje w zespole tworzą wspaniałe produkty

Mikro-interakcje stają się coraz ważniejszym - jeśli nie krytycznym - elementem sieci, projektowania mobilnego i nie tylko. Nawet jeśli zarówno projektanci, jak i programiści docenią wartość animacji interfejsu użytkownika i są zmotywowani do ich tworzenia, często mają trudności ze współpracą w efektywny i skuteczny sposób. Potrzeba silnego zespołu, aby na czas wysłać świetne mikro-interakcje; takie zespoły wymagają jasnego określenia ról, skutecznych umiejętności komunikacyjnych i odpowiednich narzędzi do prototypowania dla danych zadań.

Aby osiągnąć sukces w mikro-interakcjach, upewnij się, że Twój zespół posiada te cechy i angażuje się w te procesy. Powodzenia w podróży z mikro-interakcją!

OŚWIADCZENIE O UJAWNIENIU: Są to opinie autora. O ile nie zaznaczono inaczej w tym poście, Capital One nie jest powiązany ani nie jest wspierany przez żadną z wymienionych firm. Wszystkie znaki handlowe i inna własność intelektualna używana lub wyświetlana są własnością ich właścicieli. Ten artykuł jest © 2017 Capital One.

Więcej informacji na temat interfejsów API, oprogramowania typu open source, wydarzeń społecznościowych i kultury programistów w Capital One można znaleźć na DevExchange, naszym kompleksowym portalu dla programistów: developer.capitalone.com.