Projektowanie celowych interakcji

Odkryj kluczowe zasady celowego projektowania interakcji, jakie wyzwania projektowe może rozwiązać interakcja i jak wprowadzić je do swojego procesu.

Kiedy myślimy o projektowaniu interakcji i animacji w doświadczeniu użytkownika, łatwo pomylić je z fantazyjnymi rzeczami: dzwonkami i gwizdkami lub przypadkowymi obiektami latającymi, które „dają stronie internetowej czynnik wow”. Może przynosić krótkotrwałą radość, ale wkrótce może stać się irytująca dla zwykłych użytkowników.

Aby zwalczyć ten rodzaj daremności, przyjrzymy się podstawowym zasadom projektowania znaczącej interakcji, sposobom rozwiązywania typowych problemów projektowych oraz sposobom wprowadzenia ich do swoich systemów i procesów projektowych. Interakcja nie powinna już być końcowym akcentem, który znika z zakresu jako „miło mieć”, ale integralną częścią ogólnego doświadczenia użytkownika.

Cztery kluczowe zasady projektowania znaczących interakcji interaction

1. Unikaj tworzenia przeszkód

Pomyśl o „menu hamburgerów”, które animowanie na pełnym ekranie zajmuje dwie lub trzy sekundy. Za każdym razem, gdy użytkownik chce poruszać się po witrynie, musi czekać. Stworzenie dłuższych czasów zadań dla użytkownika to gwarantowany sposób na odesłanie go do witryny lub aplikacji konkurencji.

Istnieją jednak sytuacje, w których opóźnienie postępu interakcji może przynieść korzyści. Gdy interakcja jest złożona, spowolnienie jej może zapewnić użytkownikowi lepszy kontekst i informacje zwrotne. Oto kilka przykładów, kiedy możesz opóźnić interakcje i animacje:

• Wdrażanie nowych użytkowników do nowego interfejsu. Upewnij się, że zmniejszysz przeszkody dzięki opcji pomijania.
• Przeciągnij i upuść interfejsy, które pokazują przyczynę i skutek. Zbyt szybko i użytkownicy mogą się zastanawiać, dokąd trafił ten plik.
• Dodanie produktu do koszyka. Nie powinno to tworzyć przedłużonej bariery dla kasy, ale powinno dać użytkownikowi wystarczającą informację zwrotną, aby wiedział, że jego zadanie zakończyło się sukcesem.

Z reguły proste interakcje powinny być szybkie, a złożone interakcje na tyle opóźnione, aby użytkownik zrozumiał kontekst.

2. Dopasuj ruch do wiadomości

Gdyby Apple zdecydował, że wszystkie ich interakcje na iOS będą szybkie, ostre, prosto w twarz i zrobią mnóstwo pokrętnych rzeczy, czy czulibyście się, jakby używali produktu Apple? Gdybyś korzystał z aplikacji Alton Towers i zobaczył powoli zanikające animacje i mnóstwo przejść w stylu Kena Burnsa, czy poczułbyś się jak magiczne miejsce zabawy i emocji, czy reklama M&S TV?

Sposób, w jaki animowana interakcja powinna zawsze odzwierciedlać ton, do którego dążysz, jest odpowiedni dla użytkowników – sprawia, że ​​wrażenia są bardziej wciągające i spójne. Jeśli jest to witryna rozrywkowa dla dzieci, może być nieco zwariowana i krzykliwa. Jeśli jest to butik z najwyższej półki, niech będzie powolny, wyrafinowany i gustowny.

3. Daj temu cel

Projektowanie interakcji ma tak duży potencjał, aby podnieść wrażenia użytkownika, dlatego jest tak kuszące, aby nadużywać i używać bez celu. Pamiętasz strony Flash?

Przewiń trochę dalej i spójrz na osiem wyzwań, które może rozwiązać projektowanie interakcji. Jeśli Twoje interakcje nie są zgodne z tymi wzorcami, istnieje duża szansa, że ​​nie ma to innego celu niż zachwyt użytkowników.

4. Spraw, aby było niewidoczne

Brzmi to dość boleśnie, biorąc pod uwagę czas zainwestowany w projektowanie interakcji, ale jeśli nie zostanie to zauważone, to prawdopodobnie dlatego, że wykonali świetną robotę. Mamy tendencję do zwracania większej uwagi na korzystanie z technologii lub interfejsu, gdy coś idzie nie tak lub coś wydaje się niezgrabne. Gdy wszystko idzie gładko, użytkownik może skupić się na treści.

Ilość rozważań dotyczących projektowania interakcji w powszechnie używanych aplikacjach i witrynach internetowych, takich jak Facebook, Pinterest, Twitter i produkty Google, jest niezrozumiała. A jednak nigdy nie zauważyłeś, dopóki ktoś ci tego nie wskazał. Sprawiają, że projekt jest niewidoczny, dzięki czemu możesz cieszyć się doświadczeniem i budować silniejsze emocjonalne połączenie z produktem, usługą lub treścią.

Sześć wyzwań projektowych, które może rozwiązać projektowanie interakcji

1. Orientacja i kontekst

Jest to szczególne wyzwanie dla projektowania mobilnego, gdy przestrzeń na ekranie jest ograniczona. Pokaż wszystko na otwartej przestrzeni, a użytkownik jest przeciążony poznawczo. Pokazywanie ważnych rzeczy i ukrywanie mniej krytycznych rzeczy jest tym, do czego dążymy; jednak ukrywa część doświadczenia. Używając znaczących interakcji, możemy wizualnie uczyć użytkownika, gdzie znajdują się rzeczy, dzięki czemu jest łatwy do zapamiętania i intuicyjny.

Oto kilka przykładów tworzenia kontekstu za pomocą interakcji:

• Zmieniacz kolorów tła czcionek Google. Kolory wyglądają tak, jakby żyły w ikonie wiadra z farbą.
• Dodawanie do koszyka i proces kasy w Cotton Bureau. Zamiast zabierać Cię do nowej strony koszyka, jest jak karuzela, która znajduje się po prawej stronie widocznej strony.

2. Wykazanie przyczyny i skutku!

Klasycznym tego przykładem jest interfejs typu „przeciągnij i upuść”. Kiedy podnosisz obiekt multimedialny i przenosisz go do „strefy upuszczania”, użytkownik powinien otrzymać informację zwrotną, aby powiedzieć mu, że go podniósł i przeniósł się we właściwe miejsce, w którym można go upuścić. Po wrzuceniu go, powinna istnieć weryfikacja, aby powiedzieć użytkownikowi, że pomyślnie wykonał swoje zadanie. Można to zrobić poprzez zmiany kolorów, pozytywne wiadomości weryfikacyjne, a nawet efekty dźwiękowe.

3. Przekazywanie informacji zwrotnej

W tym przykładzie weźmy przycisk płatności. Ile źle wykonanych bramek e-commerce spotkałeś się z kliknięciem tego ładnego, błyszczącego przycisku „Zapłać teraz”, aby spotkać się z niejasnością co do tego, czy go kliknąłeś, czy nie, ponieważ jest przetwarzany? Nie powiedział, że to właśnie robi. Tak więc interakcja może zmienić stan przycisku, a przy odrobinie animacji może poinformować użytkownika, że ​​„płatność jest przetwarzana”, a następnie poinformować użytkownika, kiedy „płatność została odebrana” przed przeniesieniem na stronę potwierdzenia zamówienia. Nigdy więcej zastanawiania się, co się dzieje przez dziesięć sekund i sprawdzania, czy zepsułeś internet.

4. Podświetl kluczowe informacje

Gdy jakaś treść ma wyższy priorytet w tym samym widoku ekranu, użycie koloru i typografii w celu jej promowania może zakłócić spójność systemu projektowania lub wyglądać nie na miejscu, jeśli jest nadużywane. Interakcja może pomóc zaakcentować ważne treści bez naruszania układu.

Pomyśl o aplikacjach fitness: po pierwszym załadowaniu pulpitu nawigacyjnego chcesz zobaczyć dzisiejszą podstawową aktywność i statystyki. Korzystanie z prostej animacji może wydobyć tę zawartość bez osłabiania ilości rzeczy wyświetlanych na ekranie.

5. Stwórz percepcję wydajności

Szybkość to gorący temat i nie bez powodu, ponieważ jest to częsty czynnik związany ze współczynnikami odrzuceń. Zdarzają się przypadki, w których osiągnąłeś maksymalną optymalizację szybkości na stronie, a załadowanie strony nadal zajmuje trochę czasu. Istnieją alternatywy dla pokazywania niczego użytkownikowi lub pokazywania ikony ładowania.

Ładowanie szkieletowe można wykorzystać do pokazania przewidywalnego układu w formie szkieletowej, dzięki czemu przed załadowaniem strony użytkownik z grubsza wie, gdzie szukać i jak może wchodzić w interakcję z interfejsem. Z psychologicznego punktu widzenia wydaje się, że strona ładuje się szybciej niż nic się nie dzieje, ale w rzeczywistości ładuje się w tym samym czasie.

Możesz również wykorzystać czasy ładowania jako okazję do edukowania użytkowników o tym, co się dzieje i co się stanie, dzięki przyjaznym wiadomościom, które skracają czas oczekiwania.

6. Dodanie osobowości marki

Marki kierujące się postaciami mogą odnieść znaczne korzyści z wprowadzenia interakcji, aby wprowadzić osobowość do doświadczenia. Możesz wykorzystać ludzkie cechy maskotek. Jeśli nie masz nic wizualnego w swojej marce, nadal możesz dodać osobowości, używając szybkości i częstotliwości. Pomyśl o Google i ich dziwacznych programach do wstępnego ładowania kropek lub aktywacji poleceń głosowych, które w prosty sposób zapewniają przyjazne i zabawne podejście.

Budowanie emocjonalnej więzi z użytkownikiem to świetny sposób na regularne wizyty. Projektowanie interakcji może sprawić, że technologia będzie bardziej skoncentrowana na człowieku – do czego zawsze warto dążyć.

Wprowadzenie interakcji do procesu projektowania

Szkice i kompozycje o niskiej wierności

Narzędzia do projektowania interakcji

• Keynote: Jeśli szukasz prostego i prostego sposobu na przedstawienie swojego pomysłu, Keynote to szybka wygrana.
• Adobe Animate: Przechowuj wszystko w Adobe i płynnie łącz z innymi narzędziami. Jest to idealne rozwiązanie do animacji ilustracyjnej.
• Tumult Hype: Jeśli znasz interfejs Sketch i wiesz, jak poruszać się po osiach czasu, dzięki Tumult poczujesz się jak w domu.
• Framer: Jest to specjalnie zaprojektowane narzędzie do projektowania interakcji, które ma naprawdę zaawansowane możliwości dopasowania animacji do JavaScript.
• Zasada: Dzięki ładnemu linkowi do szkicu, Zasada staje się punktem wyjścia do interakcji. Jest stosunkowo prosty do nauczenia, a to, co można w nim osiągnąć, jest wspaniałe.
• Atomowe: Dodaj dane, logikę i zmienne, aby Twoje interakcje były tak praktyczne, jak ostateczna wersja. To jest dla zaawansowanych projektantów, którzy mają pewną wiedzę na temat kodowania.
• Invision Studio: To dopiero początek, ale Invision Studio ma kilka świetnych możliwości i podobieństw do Principle. Czas pokaże, czy będzie to wystarczająco zaawansowane, aby zdominować rynek prototypowania i współpracy.

Szczegółowe notatki dotyczące przekazania

Pozostawianie notatek dla programistów jest kością niezgody, jeśli pracujesz w środowisku o dużej współpracy, ale jeśli pracujesz zdalnie, szczegółowe notatki dotyczące pomysłów i prototypów z dobrym przekazaniem mogą zapewnić, że Twoje interakcje zostaną uwzględnione w kompilacji.

Skompiluj bibliotekę demonstracji i inspiracji

Dodaj go do swojego systemu projektowania

Jeśli pomyślnie rozwiązałeś typowy problem (odpowiednio przetestowany) z interakcją, przenieś go do swojego systemu projektowania lub biblioteki wzorców, aby ponownie użyć go w podobnych scenariuszach bez inwestowania czasu na zrobienie czegoś innego od zera.

Aby uzyskać pomoc w projektowaniu stron internetowych i doświadczeniu użytkownika (UX), skontaktuj się z nami już dziś.

Jeśli potrzebujesz pomocy w zakresie User Experience, nie wahaj się z nami skontaktować.