Dziś znowu bierzemy na tapet temacik związany stricte z designem. W tym wpisie przyjrzymy się bliżej roli animacji i interakcji w projektowaniu interfejsów użytkownika. Dowiesz się również, jak prototypy mogą pomóc Ci przetestować projekt na wczesnym etapie, uniknąć kosztownych błędów i ułatwić komunikację z resztą zespołu.
Halo, halo! Na pewno wiesz, czym jest prototyp. Jeśli zajmujesz się projektowaniem interfejsów, to być może masz też kilka na własnym koncie. Na pewno też kojarzysz temat animacji.
🔔 A jak nie wiesz, to po te (i wiele innych pojęć) wskakuj do naszego Słowniczka Designera!
Wiemy, że są ważne, że mają szerokie zastosowanie, np. ułatwiają proces przejścia przez makiety UI. Ale, ale — czy na pewno wiesz, dlaczego?
🔑 Klucz do zrozumienia produktu
Nam, ludziom, najłatwiej jest coś zrozumieć, kiedy na własne oczy możemy przekonać się, jak to działa. 👀 I to nie są tylko puste słowa!
Nielsen Norman Group opracowało badanie „The Role of Animation in User Experience Design” z którego jasno wynika, że animacje zwiększają zrozumienie działania produktu nawet o 60%. Sporo, prawda? Ale to nie wszystko.
💻 Z raportu też jasno wynika, że równocześnie wzrasta efektywność użytkowania produktu — i to o aż 20%!
🗨️ Szansa na feedback
Prototyp pozwala użytkownikom na skorzystanie z produktu cyfrowego w jego (niemalże!) pełnej krasie. To oznacza, że feedback, który możesz uzyskać podczas korzystania z prototypu jest prawie tak wartościowy, jak ten, który zbierzesz podczas ostatecznych testów.
Oczywiście, należy jeszcze dodać, że wdrożenie zmian jeszcze przed zaimplementowaniem produktu jest łatwiejsze i szybsze.
💼 Zresztą, to nie tylko feedback ze strony użytkowników, ale i przede wszystkim właścicieli produktu. W końcu tworzysz dla kogoś i w określonym celu, prawda? W komunikacji lepiej opierać się na dialogu i konkretach, a nie domysłach.
Unikniesz w ten sposób zaskoczeń ze strony zleceniodawcy, a te nie zawsze mogą być pozytywne.
„There’s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity — giving us higher quality feedback from stakeholders.” Erica Rider, UX Lead EPX w PayPal, wypowiada się na temat interaktywnych prototypów dla UXPin Merge
⌛ Nie trać czasu….
Możesz testować swój projekt na różnych etapach projektowania.
Dzięki temu, cały proces przebiega sprawniej i pozwala na wykrywanie błędów na wczesnym stadium. Bez martwienia się o pixel perfection!
Póki jesteś na etapie projektu, masz jeszcze spore pole do manewru, zwłaszcza jeśli chodzi o nanoszenie dowolnej ilości poprawek. Nie tracisz czasu na kodowanie i wdrażanie błędnych koncepcji oraz rozwiązań.
… bo czas to pieniądz! 💵
Zmiana kodu produktu na etapie developmentu zajmuje dużo czasu i wysiłku. 😪 Ma też znaczący wpływ na cały harmonogram rozwoju projektu.
Wdrażanie poprawek z powodu problemów z użytecznością już po zakończonej implementacji może narazić Cię na koszty (jeśli to Ty zlecasz poprawki devom), bądź nieprzyjemności (jeśli zaniedbasz ten proces i narazisz firmę na straty).
Tom Kelley z grupy IDEO udzielił wywiadu dla Idea Connection w którym opowiada, że prototypowanie to podstawa projektowania i testowania produktów. Kelley sam potwierdza, że prototypowanie pozwala na uniknięcie kosztownych błędów, a ostatecznie: na szybsze wprowadzanie produktów na rynek.
🤝 Uprość handoff
Dzięki prototypom usprawnisz cały proces hand-offu, czyli przekazania projektu do zakodowania. Ograniczysz także ilość opisów słownych i dokumentacji potrzebnej do zrozumienia jego działania. Animacje to naturalny sposób, aby przekazać dev(k)om, jak coś ma działać.Mniej papierów i więcej konkretów = przejrzysta komunikacja. A to benefit dla obu teamów: projektującego i kodującego!
🧠 Trick and treat
Stawiając na interakcje i animacje, stawiasz też na większe zaangażowanie ze strony odbiorców. Dlaczego?
👉 W naszym mózgu jest wydzielany niezwykle istotny neuroprzekaźnik: dopamina. To taki sweet treat dla naszego układu nerwowego. Odpowiada za zachcianki, motywację, reguluje też poczucie zadowolenia podczas wykonywania konkretnej czynności.
To taki nasz układ nagrody. 🏆 Ludzki mózg, natomiast, jest leniwy i woli nagrodę otrzymywać szybko i bez wysiłku (model instant gratification). To jest dla nas przyjemne i wciągające.
Niezwykle stymulujące dla produkcji dopaminy są animacje, czy właśnie krótkie filmiki (shoutout do sukcesu appki TikTok). To dlatego tak ciężko wyrwać się z transu scrollowania — wtedy jesteśmy na przysłowiowym haju. 🍀
⚠️ Pamiętaj, że animacje nie są odpowiednie dla wszystkich osób korzystających z produktów cyfrowych. W każdej chwili możesz wyłączyć je np. w ustawieniach, albo odpalić tryb stopowania animacji i ruchu. Miej dostępność na uwadze za każdym razem, gdy projektujesz.
🎨 Animacje w designie
To jest temat na zupełnie osobny wpis (bo to naprawdę neuropsychologiczna kobyła!), ale jest część rzeczy, które warto zapamiętać już dziś:
Smashing Magazine podaje, że animacje nie tylko poprawiają wygląd projektu, ale także wpływają na interakcję użytkownika z danym produktem. A to już prosta droga do większej satysfakcji podczas korzystania i zwiększenia zaangażowania. Natomiast, muszą być integralną częścią całego design systemu, co już wymaga ich dokładnego planowania.
Tutaj ten temat pięknie omawia InVision. Animacje dodają życia projektom. Poza tym, dostarczają też kontekst użycia odbiorcom. Zupełnie tak, jak podczas interakcji z drugim człowiekiem — kiedy z kimś rozmawiasz, szukasz kontaktu wzrokowego i potencjalnego feedbacku w mimice rozmówcy. To samo mogą robić animacje: wiem, że konkretny przycisk jest aktywny, bo lekko zmienił odcień w kontakcie z kursorem.
Animacje mogą mieć wiele zastosowań. Mogą też pokazać ukryte, wewnętrzne funkcjonalności produktu. To też dobry sposób na poprawę UX, np. zastosowanie loading sequences podczas ładowania kolejnego elementu interfejsu, żeby podtrzymać zaangażowanie i uwagę. Tutaj znajdziesz więcej informacji o dobrych praktykach animacji w UX.
Animacja w UI to wsparcie w przekazaniu hierarchii produktu, sposób na utrzymanie koncentracji w konkretnym miejscu, a także możliwość przekazania charakteru marki. W końcu lubimy subtelne smaczki, które dodają wyrazu całości, prawda? Kliknij tutaj po więcej.
Ale co dalej? Komu zaufać na tyle, aby powierzyć swój czas i energię w nauce interaction designu?
🕹️ Jak zacząć naukę interaction designu?
Myślisz, że animacje i interakcje to temat dla Ciebie, ale nie wiesz skąd czerpać wiedzę? Nie bój nic! Wspólnie z Tomkiem Biskupem przygotowaliśmy kompleksowy kurs projektowania animacji i interakcji – Interaction Designer.
😨 Sprzedaż obecnie jest zamknięta?
Zapisz się na nasze bezpłatne lekcje, a my na pewno damy Ci znać, gdy ruszymy z kolejną edycją!
