Zrozumienie gestów do projektowania interfejsu użytkownika

Stukanie, przesuwanie, przeciąganie, długie naciskanie – to tylko niektóre z gestów, które zdominowały nasze cyfrowe doświadczenia. Telefony iPhone z ekranem dotykowym były głównym nurtem gestów mobilnych lata temu i od tego czasu nie oglądaliśmy się wstecz.

Gesty wpływają na sposób interakcji z interfejsami, w tym telefonami, laptopami i iPadami. Ale nie musimy daleko szukać, aby znaleźć interfejs gestów wykraczający poza nasze urządzenia do pracy i rozrywki. Używanie gestów podczas interakcji z ekranami samochodowymi lub umywalkami w łazience nie jest już rzadkością.

Naturalne interfejsy użytkownika (NUI) są tak naturalne dla użytkowników, że interfejs wydaje się, a czasami jest niewidoczny, jak interfejs ekranu dotykowego. Niektóre interfejsy NUI wykorzystują nawet sterowanie gestami, umożliwiając użytkownikom interakcję z interfejsem bez bezpośredniego kontaktu fizycznego. BMW niedawno wypuściło funkcję sterowania gestami, która daje użytkownikom bezdotykową kontrolę nad głośnością samochodu, połączeniami i nie tylko.

Gesty stają się coraz bardziej powszechne w projektowaniu interfejsu użytkownika i odgrywają coraz bardziej złożone role w naszym codziennym życiu.

Wraz z rozwojem technologii projektanci UX i UI oraz firmy będą musieli się dostosować. Nie musisz znać wszystkich zawiłości technologicznych ani mieć dogłębnej wiedzy na temat inteligencji komputerowej. Mimo to powinieneś mieć podstawową wiedzę na temat możliwości, funkcji i najlepszych praktyk projektowych dotyczących technologii gestów.

Co sprawia, że ​​gest jest dobry

Czym więc są gesty?

Gesty to sposób komunikowania się. Od dawna używamy gestów rąk i kiwnięć głową, aby pomóc przekazać znaczenie, a teraz gesty odgrywają rolę w komunikacji z interfejsami użytkownika.

Dobre gesty zapewniają skuteczną, wydajną komunikację, która jest zgodna z naszym sposobem myślenia. Nasze myśli i wiedza wpływają na to, jak mówimy i wpływają na nasze użycie gestów, zwłaszcza w projektowaniu interfejsu użytkownika. Zastanów się, o ile łatwiej jest młodszym pokoleniom, które dorastają wokół nowoczesnej technologii, wyłapywać gesty – albo jak akt odpychania naśladowców, odpychania lub wycierania czegoś. Dlatego zrozumienie użytkowników jest niezbędne, nawet przy projektowaniu gestów.

Gesty przekraczają barierę między sferą fizyczną a cyfrową, pozwalając nam na interakcję z mediami cyfrowymi z naszymi ciałami. Pod pewnymi względami sprawia to, że korzystanie z aplikacji cyfrowych jest przyjemniejsze, ale to nie wystarczy, aby gest był dobry.

Dobry gest ruchu poprawia użyteczność, ułatwiając korzystanie z aplikacji we wszystkich kontekstach. Dobrze zaprojektowane gesty mają krótszą krzywą uczenia się, ponieważ są naturalne i łatwe do opanowania. Cytując Billa Gatesa:

„Do tej pory zawsze musieliśmy dostosowywać się do ograniczeń technologii i dostosowywać sposób pracy z komputerami do zestawu arbitralnych konwencji i procedur. Dzięki NUI urządzenia komputerowe po raz pierwszy dostosują się do naszych potrzeb i preferencji, a ludzie zaczną korzystać z technologii w sposób, który jest dla nas najwygodniejszy i najbardziej naturalny”.

Korzyści z technologii gestów

Szerokie zastosowanie interfejsów gestów wynika z wielu korzyści, jakie z nimi wiążą. Trzy z najważniejszych zalet gestów to czystszy interfejs, łatwość użycia i lepsze wykonywanie zadań.

1. Czystsze interfejsy

Ludzie konsumują więcej treści niż kiedykolwiek wcześniej, firmy wykorzystują więcej danych, a technologia nadal zapewnia więcej usług. Dzięki temu wzrostowi zawartości interfejsy i wyświetlacze mogą wydawać się zagracone. Projektanci mogą używać gestów, aby zmniejszyć liczbę elementów wizualnych, takich jak przyciski, które zajmują miejsce.

2. Łatwość użytkowania

Jak omówiono powyżej, interakcje stają się bardziej naturalne dzięki interfejsowi opartemu na gestach. Łatwość prostych gestów dłoni pozwala nam korzystać z technologii przy minimalnym wysiłku przy maksymalnej prędkości.

3. Ulepszone wykonywanie zadań

Wskaźniki wykonania zadań i współczynniki konwersji rosną, gdy użytkownik musi zrobić mniej, aby wykonać zadanie. Bardziej prawdopodobne jest, że ukończysz zadanie, gdy wymaga to mniej wysiłku. Wykorzystuje to interfejs użytkownika oparty na gestach, czyniąc zadania prostymi i szybkimi. Mogą nawet zmniejszyć liczbę kroków potrzebnych do wykonania zadania.

Rodzaje gestów w projektowaniu interfejsu użytkownika

Projektowanie pod kątem dotyku doprowadziło do rozwoju wielu rodzajów gestów, z których najczęstsze to stukanie i przesuwanie. Istnieją trzy kategorie gestów:

1. Gesty nawigacyjne (do nawigacji)
2. Gesty akcji (aby podjąć działanie)
3. Przekształć gesty (aby manipulować treścią)

Poniżej znajdują się niektóre z najczęstszych gestów w interfejsach, które wszyscy (lub prawie wszyscy) użytkownicy są zaznajomieni – nawet jeśli nie są świadomi. Wspominamy o ekranach, ale ekran można zastąpić touchpadem lub dowolnym innym interfejsem gestów.

Uzyskiwać

Gest dotknięcia polega na dotknięciu ekranu jednym palcem, aby otworzyć lub wybrać coś, na przykład aplikację lub stronę. Oto wskazówka: zaprojektuj klikalne elementy interfejsu tak, aby można było kliknąć całe pole lub wiersz — nie tylko tekst. Zapewnienie użytkownikom większej przestrzeni zwiększa użyteczność.

Podwójne wciśnięcie

Dwukrotne dotknięcie ma miejsce, gdy dotkniesz ekranu dwa razy z rzędu w bliskiej kolejności. Wiele aplikacji używa tego gestu do powiększania, ale na Instagramie użytkownicy mogą dwukrotnie dotknąć zdjęcia, aby je polubić.

Trzepnąć

Przesuwanie polega na przesuwaniu palcem po ekranie w jednym kierunku, dotykaniu po jednej stronie i podnoszeniu palca po drugiej. Gesty machnięcia są często używane do przewijania lub przełączania się między stronami. Tinder używa przesuwania w prawo, aby dopasować go do profilu i przesuwania w lewo, aby przejść nad nim.

Przesunięcie wieloma palcami

Możesz także wykonać gest machnięcia dwoma lub trzema palcami. Jest to powszechna funkcja w touchpadach laptopów, które wykorzystują ruchy dwoma i trzema palcami do różnych czynności.

Ciągnąć

Przeciąganie wykorzystuje ten sam ogólny ruch co machnięcie, tylko że poruszasz palcem wolniej i nie podnosisz go, dopóki nie przeciągniesz obiektu tam, gdzie chcesz. Używasz przeciągania, aby przenieść element do nowej lokalizacji, na przykład podczas reorganizacji aplikacji telefonu.

Rzucać

Podobnie jak przesuwanie, gest rzucania polega na szybkim przesuwaniu palcem po ekranie. W przeciwieństwie do przeciągania palec nie pozostaje w kontakcie z elementem. Rzucanie jest często używane do usunięcia czegoś z widoku.

Długie naciśnięcie

Długie naciśnięcie to dotknięcie ekranu, ale przytrzymanie palca dłużej niż zwykle. Długie naciśnięcia otwierają opcje menu, takie jak przytrzymanie tekstu, aby go skopiować, lub przytrzymanie aplikacji, aby ją usunąć.

Szczypta

Jeden z wielu gestów wykonywanych dwoma palcami, szczypanie polega na rozsunięciu dwóch palców na ekranie, a następnie przeciągnięciu ich do siebie ruchem szczypania. Gesty uszczypnięcia są często używane do pomniejszania po powiększeniu. Czasami przedstawiają widok wszystkich otwartych ekranów w celach nawigacyjnych.

Pinch-Open lub Spread

Gest szczypania lub rozsuwania jest przeciwieństwem uszczypnięcia. Trzymasz dwa palce blisko siebie, a następnie rozkładasz je. Rozsuwanie, podobnie jak dwukrotne dotknięcie, jest zwykle używane do powiększania.

Obrót

Aby wykonać obrót, naciśnij ekran dwoma palcami i obróć je ruchem okrężnym. Najlepszym przykładem rotacji jest włączenie mapy w Mapach Google, aby zobaczyć, co jest wokół Ciebie.

Projektowanie gestów 101

Wykorzystaj to, co ludzie wiedzą

Gesty istnieją już od jakiegoś czasu, więc w przypadku większości gestów istnieją ogólne wytyczne.

W większości przypadków istnieją zasady, których należy przestrzegać podczas projektowania gestów interfejsu. Na przykład podczas tworzenia aplikacji musisz zastanowić się, na jakich interfejsach użytkownicy będą korzystać z Twojej aplikacji. Istnieje szansa, że ​​użytkownicy pobiorą Twoją aplikację na telefony z systemem Android i Apple, które już używają gestów specyficznych dla produktu. Musisz ocenić gesty interfejsów swojego produktu i zdecydować, w jaki sposób je wykorzystasz lub czy warto dodać gesty, których użytkownicy nie są zaznajomieni.

Oto kilka przydatnych wskazówek dotyczących gestów i ruchu dla popularnych interfejsów produktów.

• Wskazówki dotyczące gestów Google
• Wskazówki dotyczące gestów firmy Microsoft
• Wskazówki dotyczące gestów Apple
• Wskazówki dotyczące gestów na Androida

Podczas projektowania interfejsów użytkownika opartych na gestach dobrą praktyką jest trzymanie się tego, co wiedzą użytkownicy. Możesz wykazać się kreatywnością, jeśli zajdzie taka potrzeba, ale poziom spójności między gestami i interfejsami pomaga zachować ich intuicyjność dla użytkowników, zwiększając użyteczność Twojego produktu.

Jeśli uważasz, że czeka na Ciebie nowy gest, musisz go dokładnie przetestować przed wdrożeniem. Przeprowadzisz serię metod badania użytkowników, aby przetestować użyteczność, skuteczność, krzywe uczenia się i satysfakcję użytkownika za pomocą gestu przed udostępnieniem go publicznie.

Masz możliwość ponownego użycia znanego gestu w innym celu, ale znowu powinieneś wcześniej przetestować skuteczność tej strategii. Zaletą jest to, że użytkownicy są przynajmniej zaznajomieni z ruchem.

Weźmy na przykład użycie przez Instagram podwójnego dotknięcia, aby polubić lub „serdować” post. Dwukrotne dotknięcie jest zwykle używane do powiększania, ale działa dobrze na potrzeby Instagrama. To także świetne studium wydajności: stukanie w serce pod słupkiem wymaga jednego stuknięcia mniej, ale więcej celowania. Alternatywna metoda dwukrotnego dotknięcia umożliwia użytkownikom szybsze przewijanie, ponieważ mają cały obraz, do którego można celować, i intuicyjne jest dotknięcie obiektu, który Ci się podoba.

Projektanci zaczęli opracowywać język projektowania za pomocą dłoni, kółek i strzałek, aby komunikować intencje gestów twórcom produktów i strategom. Ten język jest prawie uniwersalny z minimalnym odchyleniem.

Myśl poza ekranem

Gesty istnieją w codziennych scenariuszach poza korzystaniem z telefonu i laptopa. W coraz większej liczbie publicznych toalet zainstalowano wrażliwe na ruch zlewy, suszarki powietrza i dozowniki ręczników papierowych. Urządzenia te zapobiegają również rozprzestrzenianiu się zarazków – fajna cecha w sezonie grypowym. Tymczasem samochody autonomiczne są wymuszane technologią rozpoznawania gestów, aby poprawić ich skuteczność i bezpieczeństwo.

Ale nadal możesz być kreatywny dzięki gestom telefonicznym, myśląc poza ekranem. Urządzenia od lat wykorzystują rotację i drgania jako metody interakcji. Na przykład funkcja „Wstrząśnij, aby cofnąć” firmy Apple daje użytkownikom możliwość cofnięcia czynności przez potrząśnięcie telefonem. A do tej pory prawdopodobnie znasz obracanie ekranów w poziomie, aby oglądać wideo na pełnym ekranie.

Dopóki są najpierw testowane, kreatywne technologie gestów mogą dalej rozwijać produkty i zwiększać użyteczność.

Gesty i dostępność

Gesty, jak wszystkie rzeczy, powinny być dostępne. Dostępność odnosi się do uczynienia produktu dostępnym i użytecznym dla wszystkich ludzi we wszystkich kontekstach, w tym osób niepełnosprawnych. Gesty powinny być zgodne z dostępnymi najlepszymi praktykami projektowymi, aby przyczyniać się do równego środowiska, być zgodne z ustawą o Amerykanach z niepełnosprawnościami (ADA) i umożliwiać korzystanie z niego wszystkim, którzy mogą odnieść korzyści z Twojego produktu.

Poza upewnieniem się, że gesty interfejsu są dostępne, warto zastanowić się, jak używać gestów w celu poprawy dostępności. Apple zdał sobie sprawę, że płaskie, pozbawione tekstury ekrany iPhone'a stanowią przeszkodę dla niewidomych użytkowników. Wykorzystali więc interfejs oparty na gestach, aby stworzyć dodatkowe gesty oparte na ułatwieniach dostępu, które pomagają osobom niedowidzącym korzystać z ich produktów.

Nie zapomnij o UX

Powszechnie używa się terminów UX i UI zamiennie, ale jest to niewłaściwa praktyka. UX oznacza doświadczenie użytkownika i zajmuje się postrzeganiem i emocjami użytkownika podczas angażowania się w produkt. UI oznacza interfejs użytkownika i obejmuje elementy produktu, z którymi użytkownik wchodzi w interakcję. UI jest ważnym elementem projektowania UX. Jeśli chcesz dowiedzieć się więcej o każdym z nich i ich różnicach, zapoznaj się z naszym przewodnikiem na temat UX vs UI Design.

Chodzi o to, że UX i UI różnią się od siebie, ale przy projektowaniu interfejsów należy wziąć pod uwagę wrażenia użytkownika. Gesty UI, które są zabawne, ale nieprzydatne lub interesujące, ale mają słabą użyteczność, są wynikiem projektantów i programistów, którzy zapomnieli o UX.

Bez względu na to, ile testów wykonałeś, daj użytkownikom możliwość usunięcia niektórych funkcji gestów. Stukanie to ważny gest na ekranie dotykowym, który wszyscy znają, ale niektóre gesty nie są kluczowe dla działania produktu i istnieją tylko po to, aby uczynić go bardziej użytecznym. Czasami gesty takie jak te irytują użytkowników, którzy ich nie znają, lub uruchamiają gest bez sensu.

Na przykład na komputerze Mac przeciągnięcie dwoma palcami w lewo lub w prawo po touchpadzie powoduje, że przeglądarka internetowa przekierowuje stronę do tyłu lub do przodu. Wielu użytkowników robi ten gest przypadkowo i jest sfrustrowanych, gdy strona ciągle się zmienia. Tak więc Apple daje użytkownikom możliwość wyłączenia tej funkcji i wielu innych.

Udoskonal wprowadzanie użytkowników

Wdrażanie użytkowników poprawia skuteczne korzystanie z produktu, ucząc użytkowników, jak z niego korzystać. Pomyśl o nowym programie, który po pierwszym uruchomieniu przeprowadzi Cię przez wszystkie funkcje lub kroki, aby z niego skorzystać.

Wprowadzanie użytkowników jest ważne w przypadku gestów dotykowych, ponieważ często są ukryte i łatwo je przeoczyć, zwłaszcza jeśli użytkownik nie zna gestu lub nie ma z nim doświadczenia w tym kontekście. Jeśli nie wiedzą, że mogą z niego korzystać lub jak go używać, nie będą.

Wdrażając użytkownika, chcesz być zwięzły, uczyć jednej rzeczy na raz i podążać za krzywą uczenia się, która sprawdziła się najlepiej w testach. Długie samouczki i listy krok po kroku są nudne, mniej interaktywne i często są pomijane.

Poznaj przyszłość interfejsów gestów

Gesty już tu są. Istnieją w teraźniejszości i przydają się w naszym codziennym życiu. Dla użytkowników te gesty mogą żyć w podświadomości, gdy przesuwają palcem i dwukrotnie dotykają bez zastanowienia. Projektanci produktów, programiści i stratedzy muszą zrozumieć gesty na bardziej intymnym poziomie.

Projektowanie pod kątem dotyku to coraz większa część tej dziedziny. Gesty istnieją w łazienkach i samochodach – kto wie, co dalej? Obejmij to. Bardziej użyteczny produkt to produkt skuteczny.

Masz pytania lub chcesz ulepszyć UX i UI swoich produktów? Chętnie porozmawiamy. Po prostu sięgnij.