4 sposoby wykorzystania animacji funkcjonalnej w projektowaniu interfejsu użytkownika
Zaledwie dziesięć lat temu unikano interfejsów użytkownika, w których używano animacji, najczęściej kojarząc się z pop-upami i migającymi reklamami, ale to się zmieniło. Dzisiaj szczegóły projektowania interakcji i animacji stanowią fundamentalną różnicę w nowoczesnych witrynach i nowoczesnych aplikacjach. Ta zmiana sposobu myślenia jest wyraźnie wyrażona w stwierdzeniu Zurb:
Nie zajmujemy się już tylko projektowaniem ekranów statycznych. Projektujemy sposób, w jaki użytkownik uzyskuje z tych ekranów, aby faktycznie wyświetlać treść.
Jeśli mamy projektować lepsze produkty cyfrowe, musimy od samego początku przyjąć interaktywny charakter aplikacji i stron internetowych.
Dlaczego działa animacja
Ruch, ze swej natury, ma najwyższy poziom znaczenia w interfejsie użytkownika. Ani tekst, ani obrazy statyczne nie mogą konkurować z ruchem. Nasze oczy są twarde, aby zwracać uwagę na poruszające się obiekty - to niemal odruch. Możemy to wykorzystać dzięki tej funkcjonalnej animacji.
Czym jest funkcjonalna animacja?
Animacja funkcjonalna to subtelna animacja osadzona w interfejsie użytkownika jako część funkcjonalności tego projektu. Ma bardzo jasne i logiczne cele:
- Zmniejsz obciążenie kognitywne
- Zapobiegaj ślepocie zmian
- Stwórz lepsze przywoływanie w relacjach przestrzennych
W skoncentrowanym na człowieku podejściu do projektowania, w którym głównym celem jest użytkownik, interfejs użytkownika musi być intuicyjny, responsywny i ludzki. Funkcjonalna animacja pomaga osiągnąć te cele.
Jak funkcjonalna animacja poprawia UX
Nasze wrażenia i wrażenia związane z aplikacją lub witryną są kształtowane przez połączenie czynników, a interakcja odgrywa zasadniczą rolę. Dodanie ruchu do naszego projektu może być znaczące i funkcjonalne, gdy znajdziemy odpowiednie okoliczności. Przemyślana i przetestowana animacja funkcjonalna ma potencjał do spełnienia wielu funkcji, w tym:
1. Wizualna informacja zwrotna
Dobry projekt interakcji zapewnia sprzężenie zwrotne. Informacja zwrotna potwierdza, że system otrzymał działanie użytkownika i pokazuje wynik interakcji, niezależnie od tego, czy zakończyło się sukcesem, czy nie. Animacja w tej grupie musi być bardzo subtelna i powinna być zaprojektowana w sposób responsywny.
Informacja zwrotna przycisku
W rzeczywistości przyciski odpowiadają na naszą interakcję i właśnie w ten sposób oczekujemy, że wszystko zadziała. Aby być przewidywalnym dla użytkownika interfejs cyfrowy powinien działać w ten sam sposób.
Źródło: Jaron Pulver
Wizualizuj wynik działania
Postępując zgodnie z zasadą show, nie mów , możesz użyć animowanej informacji zwrotnej, aby podkreślić, że coś poszło nie tak. Na przykład wizualna animacja drgań na nieprawidłowym wprowadzeniu hasła. To jak potrząsanie głową, jakby chciał powiedzieć "nie, spróbuj ponownie". Użytkownik zauważa animację i natychmiast rozumie aktualny status.
Możesz także wzmocnić działania wykonywane przez użytkownika. W poniższym przykładzie, gdy użytkownik kliknie "Prześlij", krótko pojawia się pokrętło, zanim aplikacja wyświetli stan pomyślnego zakończenia. Animacja zaznaczenia sprawia, że użytkownik czuje, że proces został pomyślnie zakończony.
Kredyt graficzny: Colin Garven
2. Zmiękczanie zmian stanu
Inne dobre miejsca do dodawania animacji w designie to momenty zmian. Zmiany stanu w interfejsie użytkownika, zwłaszcza w Internecie, często wiążą się z twardymi cięciami, które mogą utrudniać ich śledzenie. Nic nie jest bardziej nienaturalne niż nagła zmiana. Nagłe zmiany w interfejsie są trudne do przetworzenia przez użytkowników. Te chwile zmian należy złagodzić, dodając trochę animacji do interfejsu użytkownika.
Nawiązywanie połączeń
Animowane przejścia powinny działać jako pośrednicy między różnymi stanami interfejsu użytkownika, pomagając użytkownikom zrozumieć, co się dzieje, gdy zmienia się stan ekranu. Użytkownik po prostu śledzi ruch i rozumie, w jaki sposób powiązane są dwa stany UI.
Kredyty graficzne: Anish Chandran
Działa również dobrze w przypadku powiązania widoków miniatur i szczegółów:
Karta animuje się z pierwotnej pozycji do pozycji w modalu, dzięki czemu staje się jasne, że jest to ten sam przedmiot, tylko z większą ilością szczegółów.
Kredyty graficzne: Charles Patterson
Wezwij uwagę do zmian
Animacja może pomóc widzowi zobaczyć, skąd pochodzi nowy obiekt po jego ujawnieniu lub dokąd trafia ukryty przedmiot, i można go znaleźć ponownie. Możemy go użyć, aby zwrócić uwagę na zmiany, które ukrywają lub ujawniają informacje, takie jak otwieranie bocznych szuflad treści. W poniższym przykładzie główna nawigacja ześlizguje się z drogi po kliknięciu ikony hamburgera. Ten ruch informuje, że główne menu nie zniknęło.
Kredyty graficzne: Tamas Kojo
3. Widoczność statusu systemu
Jako jeden z oryginalnych 10 heurystyk Jakoba Nielsena dla użyteczności, widoczność statusu systemu pozostaje jedną z najważniejszych zasad projektowania interfejsu użytkownika. Dla użytkowników bardzo ważne jest poznanie i zrozumienie ich aktualnego kontekstu w systemie w dowolnym momencie.
Wskaźniki postępu
Proces przesyłania i pobierania danych to świetne możliwości dla funkcjonalnej animacji. Animowane paski ładowania ustawiają oczekiwanie na szybkość przetwarzania akcji. Animacja może być pomocna w przypadku awarii. Nawet niezadowalające powiadomienie, takie jak niepowodzenie przesyłania danych, powinno zostać dostarczone w miły sposób.
Kredyty graficzne: XJW
Pociągnij aby odświeżyć
Czas oczekiwania użytkownika rozpoczyna się od momentu rozpoczęcia akcji, a najgorszy jest, gdy nie ma żadnego wskazania, że system je otrzymał. Działanie pull to refresh powinno natychmiast reagować . Istotne jest, aby dać wizualną informację zwrotną natychmiast po otrzymaniu prośby od użytkownika o wskazanie, że proces się rozpoczął. Animacja ci w tym pomoże.
Kredyty graficzne: Tony Babel
4. Objaśnienia Animacja
Czasami użytkownicy potrzebują trochę dodatkowej pomocy, aby zrozumieć przepływ użytkowników lub interakcje z niektórymi elementami interfejsu. Jest to szczególnie ważne w przypadku interfejsów użytkownika, które zawierają nowe lub nieznane funkcje lub interakcje dla użytkownika.
Wprowadzenie
Wdrożenie użytkownika wymaga bezbłędnego UX, a animacje w procesie wprowadzania mają ogromny wpływ na to, jak pierwsi użytkownicy będą korzystać z aplikacji. Animacja daje nieograniczoną swobodę przekazywania wszystkiego, niezależnie od tego, jak skomplikowana i sucha jest przedmiot, w zabawny sposób.
Kredyty graficzne: Anastasiia Andriichuk
Wskazówki wizualne
Animacja może zaoferować użyteczne wskazówki wizualne. Animacja objaśniająca jest najczęściej widoczna, gdy strona jest otwierana po raz pierwszy, a animacja pokazuje, w jaki sposób niektóre elementy strony mają być używane. Ten typ animacji można znaleźć w grach, które często bardzo dobrze radzą sobie z postępującym ujawnianiem, ujawniając mechanikę gry, gdy idziesz dalej do gry. Takie wskazówki są uruchamiane tylko wtedy, gdy użytkownik osiągnie odpowiedni punkt w swoim doświadczeniu.
Wniosek
Animacja jest potężnym narzędziem, gdy jest używana w wyrafinowany sposób.
Musimy od samego początku przyjąć ruch i uważać go za naturalną część naszego projektu, ponieważ projektowanie to coś więcej niż tylko prezentacja wizualna. Jak powiedział Steve Jobs o designie: nie chodzi tylko o to, jak wygląda i jak się czuje. Design to sposób działania.