Kiedy użytkownicy otwierają stronę internetową lub aplikację, najpierw zauważają oczywiste elementy projektu: logo, kolory, ikony, ilustracje i obrazy. Podczas gdy te elementy przyczyniają się do ogólnego doświadczenia użytkownika, są one w rzeczywistości kawałkami większej układanki: projektowania interakcji. Ta koncepcja może być bardziej subtelna dla użytkowników końcowych niż krzykliwa, nowa strona główna, ale jest niezbędna w tworzeniu wciągających, intuicyjnych doświadczeń cyfrowych.

Co to jest projektowanie interakcji?

Projektowanie interakcji polega na ułatwianiu interakcji między użytkownikami a produktami (najczęściej tymi produktami są aplikacje lub strony internetowe). Według Interaction Design Foundation, „celem projektowania interakcji jest tworzenie produktów, które umożliwiają użytkownikowi osiągnięcie jego celu (celów) w najlepszy możliwy sposób.” Innymi słowy, projektanci interakcji są odpowiedzialni za stworzenie każdego elementu na ekranie, z którym użytkownik może wejść w interakcję, czy to poprzez kliknięcie, przesunięcie palcem, stuknięcie, czy jakiś rodzaj działania.

Pięć wymiarów projektowania interakcji służy jako pomocny model do zrozumienia, co to obejmuje. Po raz pierwszy wprowadzony przez Gillian Crampton Smith, akademiczkę zajmującą się projektowaniem interakcji, model ten obejmował tylko cztery wymiary. Kevin Silver, starszy projektant interakcji w IDEXX Laboratories, dodał piąty wymiar.

1D: Słowa powinny być łatwe do zrozumienia i powinny przekazywać użytkownikowi odpowiednią ilość informacji (zbyt wiele szczegółów może przytłoczyć, podczas gdy zbyt mało informacji może spowodować dezorientację).

2D: Reprezentacje wizualne, takie jak obrazy, typografia i ikony, powinny uzupełniać słowa, aby przekazać informacje użytkownikowi.

3D: Obiekty fizyczne lub przestrzeń odnoszą się do rzeczywistego sprzętu i obiektów, z którymi użytkownik wchodzi w interakcję. Na przykład, czy używa on smartfona, czy laptopa z myszką? I gdzie się znajdują, przy biurku czy w zatłoczonym metrze?

4D: Czas odnosi się do tego, jak użytkownicy mogą mierzyć postęp, na przykład za pomocą dźwięku i animacji, a także jak długo spędzają na interakcji z pierwszymi trzema wymiarami.

5D: Zachowanie zostało dodane przez Kevina Silvera i obejmuje to, jak poprzednie wymiary definiują interakcje produktu. Obejmuje również reakcje użytkowników i produktu.

Related: 6 powodów, dla których projektanci UX powinni badać interakcję gestową

10 przykładów projektowania interakcji

Jak wygląda interakcja projektowa w prawdziwym życiu? Oto kilka z naszych ulubionych przykładów znalezionych na Dribbble.

Autor: Jony vino. Dzielenie rachunku z przyjaciółmi nie zawsze jest tak proste, jak się wydaje, zwłaszcza jeśli jesteś bardziej wizualną osobą niż osobą z liczbami. Ta koncepcja aplikacji pozwala wprowadzić całkowity rachunek, wybrać procent napiwku, a następnie zobaczyć, ile każda osoba zapłaci. Najlepsza część? Zamiast ręcznie dostosowując każdą osobę część i konieczności stale aktualizować każdy udział, można po prostu zmienić rozmiar każdej osoby sekcji w aplikacji, a numery będą automatycznie przeliczać dla każdego.

Przez Prem Gurusamy. W większości witryn e-commerce, musisz przejść do zupełnie innej części witryny lub aplikacji, aby wyświetlić swój koszyk. Z tej interakcji, można natychmiast zobaczyć swoje przedmioty „latać” do koszyka, jak tylko klikniesz przycisk „Dodaj do koszyka”. Koszyk kontynuuje wizualnie powierzchnię swoich przedmiotów, nawet podczas odkrywania innych części witryny.

By Igor Pavlinski. Aplikacje mediów społecznościowych są notorycznie przeładowane informacjami, pokazując wszystkie najważniejsze historie, modne filmy i artykuły oraz najnowsze wiadomości naraz. Ten pomysł na nową aplikację do mediów społecznościowych oddaje kontrolę w ręce użytkownika, porządkując treści według źródeł (takich jak YouTube, Vimeo, Twitter czy Reddit) i pozwalając mu wybrać, który kanał chce eksplorować. Układ przypominający kartę eliminuje również konieczność przeskakiwania między aplikacjami w celu zapoznania się z ulubionymi treściami. Zamiast tego można łatwo przełączać się między źródłami w ramach tego samego doświadczenia.

By tubik. Istnieje milion i jeden sposobów, aby dostosować swojego burgera. A kiedy zamawiasz na smartfonie, wybieranie każdego składnika na małym ekranie może być ćwiczeniem zręczności. Ta koncepcja interfejsu użytkownika dla aplikacji Tasty Burger upraszcza proces zamawiania poprzez grupowanie składników według ich rodzaju. Zamiast wyświetlać długą listę wszystkich możliwych wariantów sera, produktów, mięsa lub bułki, najpierw klikasz kategorię składnika (np. ser), a następnie wyświetlane są różne rodzaje, takie jak gouda lub comte.

Autor: Rahul.Design. Jeśli jesteś polowanie na dom i nie można zobaczyć nieruchomości osobiście, następnym najlepszym rozwiązaniem jest, aby uzyskać wirtualną wycieczkę. Ta koncepcja dla aplikacji nieruchomości, Spec, wykorzystuje nasze naturalne zachowanie, gdy patrzymy na nową przestrzeń. Możesz kliknąć w dowolnym pokoju, jak kuchnia lub pokój dzienny, i przenieść swój telefon, aby uzyskać widok 360 stopni. Łatwo jest przełączać się między pokojami jednym stuknięciem.

By Forest Plasencia. Filtry oferują potężny, łatwy sposób na powierzchni różnych plasterków informacji. Jednak problem z wieloma interakcjami filtrów polega na tym, że otwierają one wyskakujące okienko lub nową stronę w aplikacji, ukrywając informacje, które chcesz filtrować. Ten mikro-interakcje utrzymuje wszystko w tym samym widoku, nawet gdy robisz filtr. W ten sposób można zobaczyć, jak dane zmieniają się natychmiast po wybraniu różnych kryteriów filtrowania.

By Dmitro Petrenko. Uzbrajanie i monitorowanie domu dzięki aplikacjom na smartfony jest łatwiejsze niż kiedykolwiek, ale między 94%-99%

Related: Tworzenie narzędzia, które rejestruje interakcje użytkownika

By Gil. Ta prosta interakcja strony poprawia doświadczenie użytkownika na miejscu i pomaga firmie utrzymać odwiedzających na swoich stronach, dłużej. Głównym celem witryny jest pokazanie, jak te właściwości mogą być wykorzystywane w naturze, jako biuro i jako rozszerzenia. Zamiast tworzyć oddzielne doświadczenia dla każdego celu, ta strona naśladuje przepływ użytkownika porównującego i kontrastującego różne zastosowania i płynnie przechodzącego między nimi.

Autor: Dominik Martin. Interakcje nie muszą być śmiałe i zauważalne, aby wywierać wpływ. Ten pomysł na aplikację upraszcza zachowanie, którym wszyscy gardzimy – wybieranie kraju zamieszkania z długiej listy. Zamiast przewijać listę i szukać swojego kraju, ta mikro-interakcja pozwala najpierw wybrać pierwszą literę nazwy kraju, a następnie znaleźć go z dużo mniejszej, skoncentrowanej listy państw.

Autor: Mykolas Puodziunas. Coraz więcej witryn detalicznych ułatwia „szybki podgląd” przedmiotu, zamiast klikać na każdą stronę ze szczegółami, a następnie cofać się do wyników wyszukiwania, aby przejrzeć więcej pozycji. Ta koncepcja idzie o krok dalej i pozwala na obejrzenie każdego produktu w jego różnych dostępnych kolorach, bez konieczności opuszczania strony kategorii.

Czy przegapiliśmy Twój ulubiony przykład projektowania interakcji? Podziel się nim z nami na Twitterze: @InVisionApp.

.