Popraw swój UX dzięki zasadom udanego projektowania interakcji

Istnieje cienka granica między interakcją, która działa, a taką, z której nie można korzystać. Zasady projektowania interakcji pomagają zniwelować przepaść.

Dobrze wykonany projekt interakcji odgrywa ogromną rolę we wdrażaniu świetnego UX i jest bezdyskusyjnie jedną z podstaw zasad projektowania UX.

„Nie do użytku” oznacza „Idę dalej” i bez względu na to, jak „przyjemnie wygląda” projekt wizualny — jak wymyślna jest ta animacja — popsuj projekt interakcji, a Twój UX jest kaput. Zrób to dobrze, a będziesz na dobrej drodze do znacznie lepszego UX, nawet jeśli estetyka jest niewystarczająca. Produkt będzie miał znacznie większe szanse powodzenia, co z kolei przyczyni się do zysku.

Interaction Design Association (IxD) definiuje Interaction Design Association (IxDA) jako „struktura i zachowanie systemów interaktywnych. Projektanci interakcji starają się tworzyć znaczące relacje między ludźmi a produktami i usługami, z których korzystają, od komputerów, przez urządzenia mobilne, po urządzenia i nie tylko”.

Doświadczenie ma kluczowe znaczenie, ponieważ decyduje o tym, jak czule ludzie pamiętają swoje interakcje. — Don Norman w „Projekcie rzeczy codziennych”.

Przestrzeganie zasad projektowania interakcji w ogromnym stopniu przyczynia się do wspaniałego projektowania interakcji, co z kolei przyczyni się do poprawy doświadczenia.

Możliwe, że wszystkie dzisiejsze urządzenia i technologie mogłyby zostać z dnia na dzień zastąpione czymś zupełnie innym, ale ze względu na trwałe zasady, świetny projekt interakcji nadal byłby możliwy do osiągnięcia. Te stałe zasady dotyczą tego, co motywuje ludzi, ich zachowania i sposobu myślenia.

Wyobraź sobie, że każda klamka na każdych drzwiach działała inaczej. Po pierwsze, musiałbyś najpierw wcisnąć się w drzwi, a potem w dół; w innym musiałbyś podciągnąć się zamiast naciskać, a jeszcze inny musiałbyś podciągnąć się dwa razy, a potem w dół – totalna katastrofa. W rzeczywistości wyrażenie „obróć klamkę” zakłada, że ​​istnieje tylko jeden sposób, aby to zrobić.

Nikt nie lubi bić się po głowie okrzykami „przestrzegaj zasad”, ale naprawdę doskonały projekt interakcji opiera się na zestawie standardów, najlepszych praktyk, konwencji i zasad praktycznych (heurystyk). To nie jest delikatna nauka, ale tworzą podstawę IxD i umożliwiają interakcję przy najmniejszym tarciu. Standardy interfejsów nie tłumią kreatywności — nie są to twarde i szybkie zasady, ale fundamentalne wytyczne, które pomagają projektantowi ustanowić „użyteczną i znajomą bazę projektu”, na podstawie której można wprowadzać innowacje.

Zasady projektowania interakcji i najlepsze praktyki

Projektowanie interakcji podlega dyscyplinie Human-Computer Interaction (HCI), „multidyscyplinarnej dziedzinie badań skupiającej się na projektowaniu technologii komputerowej, a w szczególności interakcji między ludźmi (użytkownikami) a komputerami” – zgodnie z definicją w Interakcji Fundacja projektowa.

Świetny projekt interfejsu użytkownika zapewnia czystą radość użytkownika, łącząc podstawowe zasady projektowania interfejsu użytkownika z projektowaniem interakcji zorientowanym na cel.

• Udany projekt interakcji wykorzystuje proste, jasno określone cele, silny cel i intuicyjny interfejs użytkownika.
• Aby interakcje były proste i łatwe, projektowanie interakcji ukierunkowane na cel stawia przed użytkownikami jedynie absolutne minimum niezbędne do wykonania zadania.

Zanurzmy się w niektóre z najważniejszych zasad (w żadnym wypadku nie jest to wyczerpująca lista):

Wykrywalność

Zasadniczo, jeśli użytkownik nie może go znaleźć, nie istnieje. Musi być wyjaśnione, jak dzwonek, jakie działania są możliwe w interfejsie użytkownika w czasie krótszym niż mikrosekunda — na przykład oznaczanie ikon jako najlepszej praktyki. Ikony bez etykiet są równoznaczne z rzucaniem blokad na drogę użytkownika, ponieważ będą musieli się zatrzymać, aby rozszyfrować znaczenie. Przerywasz „przepływ”. A tu szok… Nie są zainteresowani poznaniem twojego interfejsu użytkownika.

Znaczące

W dużym stopniu związane z wykrywalnością, efektywne wykorzystanie znaczących zapewnia, że ​​afordancje — możliwość działania na obiekcie — są wyraźnie wskazane w interfejsie użytkownika. Sygnalizatory dostarczają silnych wskazówek, takich jak sygnały lub drogowskazy. Wskazując na dostępną interakcję, migają zielonymi światłami na użytkownika, krzycząc: „Oto jestem, możesz mnie dotknąć (kliknij, przesuń itp.)!” Afordancja może istnieć w interfejsie użytkownika, ale może pozostać ukryta, ponieważ jeśli brakuje jej elementu znaczącego, pozostaje niewidoczna. Przykładem może być „ukryta interakcja gestami”, która nie ujawnia się, chyba że użytkownik przypadkowo przesunie palcem w lewo lub w prawo (na przykład, aby coś usunąć).

Afordancje określają, jakie działania są możliwe. Znaczące określają, w jaki sposób ludzie odkrywają te możliwości: znaczące są znakami, dostrzegalnymi sygnałami tego, co można zrobić. Znaczące mają znacznie większe znaczenie dla projektantów niż afordancje. — Don Norman (Norman, 2013)

Opinia

Po znaczących, kolejną najważniejszą komunikacją dla użytkownika jest informacja zwrotna. Informacja zwrotna oznacza: jednoznaczną informację o wpływie działania . Oznacza to również stałą widoczność stanu systemu, tzn. system powinien upewnić się, że:

• Użytkownicy są na bieżąco informowani o tym, co się dzieje.
• Dostępna jest ciągła informacja o wynikach ich działań oraz aktualnym stanie produktu (systemu).
• Użytkownik nie ma wątpliwości co do stanu produktu, tj. przetwarzania, ładowania, wyszukiwania, przesyłania itp. lub innej zmiany stanu.
• Po wykonaniu akcji łatwo jest określić nowy stan.

Modele koncepcyjne i modele mentalne

Świetny projekt interakcji przedstawia wszystkie informacje potrzebne użytkownikowi do stworzenia dobrego modelu koncepcyjnego systemu, co prowadzi do jego zrozumienia i poczucia kontroli. Model koncepcyjny zwiększa zarówno wykrywalność, jak i ocenę wyników podczas korzystania z systemu.

Modele mentalne — lub mapy poznawcze — to obrazy w umyśle użytkownika, które informują o jego oczekiwaniu na określoną interakcję io tym, jak coś działa w prawdziwym świecie. Mapy poznawcze to wewnętrzne reprezentacje naszego środowiska fizycznego, szczególnie związane z relacjami przestrzennymi. Efektywnie wykorzystując model mentalny użytkownika, projektanci interakcji mogą tworzyć systemy, które „czują” intuicyjność.

Projektant wymyśla model koncepcyjny — model projektowy, i w ten sposób projektant zamierza, aby urządzenie lub oprogramowanie działało. Jedynym sposobem przekazania tego modelu użytkownikom jest zaimplementowanie go za pomocą interfejsu użytkownika. Następnie użytkownicy wchodzą w interakcję z modelem koncepcyjnym i tworzą własny mentalny model działania.

Projektanci nie mogą powiedzieć użytkownikom, w jaki sposób aplikacja ma działać — muszą odpowiednio zaprojektować interfejs użytkownika, aby jasno przekazać jej przeznaczenie. Innymi słowy, spraw, aby interfejs był łatwy do zrozumienia i używania. Zły projekt interakcji wiąże się z ryzykiem stworzenia niewłaściwego modelu mentalnego dla użytkownika. Prowadzi to do zamieszania i błędów użytkownika, ponieważ próbują obsługiwać aplikację w sposób, którego projektant nie zamierzał.

Mapowania

Mapowanie to związek między elementami sterującymi a ich wpływem na świat. Zasada sprzężenia zwrotnego jest bliskim kuzynem mapowania, ponieważ te dwie zasady współpracują ze sobą, aby zapewnić płynne działanie. Prawie wszystkie artefakty wymagają pewnego rodzaju mapowania między kontrolkami a efektami — w przypadku projektowania interfejsu jest to związek między kontrolką a wynikającą z niej funkcją.

Mapowanie naturalne — wykorzystujące analogie fizyczne i standardy kulturowe — prowadzi do natychmiastowego zrozumienia. Na przykład projektant może użyć analogii przestrzennej w interfejsie użytkownika:

• Aby zwiększyć wartość za pomocą komponentu suwaka, przesuń suwak w prawo,
• Aby go zmniejszyć, przesuń palcem w lewo.

Niektóre naturalne odwzorowania są biologiczne, jak w uniwersalnym standardzie, że rosnący poziom oznacza więcej, malejący poziom mniej.

Ograniczenia

Koncepcja projektowa ograniczeń to sposób na określenie, w jaki sposób ograniczyć rodzaj interakcji użytkownika, która może mieć miejsce w danym momencie. Ograniczenia projektowe interakcji pomagają wydajną interakcję, zapewniając użytkownikom „szyny prowadzące” — prawie jak ręka prowadząca sterująca interakcjami, które mogą wystąpić.

Ograniczenia w projekcie zapewniają, że tylko określone rzeczy są włączone, a nawet widoczne, aby poprowadzić użytkownika do określonych interakcji. Uwzględnia rozmiar, skalę, proporcje, nacisk i stan oraz to, jak te, współpracując w harmonii, pomagają tworzyć hierarchię i w konsekwencji wpływają na użytkownika. Prawidłowo wprowadzone ograniczenia pomagają również zmniejszyć ryzyko błędu użytkownika.

Przeciwieństwem ograniczeń jest to, że każda opcja jest oferowana użytkownikowi, co utrudnia mu podjęcie decyzji, co dalej. To zasada wyboru . Im więcej opcji, tym trudniej wybrać którąś z nich – przytłaczają nas wszystkie możliwości.

Świetny projekt interakcji nie umieszcza wszystkich dostępnych opcji w interfejsie, ale ogranicza je do tego, co w danym momencie najważniejsze.

Spójność, standardy i heurystyki

Wszystkie one są powiązane — bracia z wzorami (poniżej), jeśli wolisz. Aby zapobiec błędom użytkownika i ułatwić naukę aplikacji, ważne jest, aby model interakcji był spójny. Spójność poprawia UX, ogólną użyteczność i wydajność, z jaką użytkownicy mogą korzystać z produktów cyfrowych.

Spójność oznacza używanie podobnych elementów do wykonywania podobnych zadań oraz posiadanie podobnych funkcji i zachowań w całym tekście — spójny interfejs to taki, który przestrzega reguł, takich jak używanie tej samej operacji do wykonania czegoś.

Produkty, które starają się być wysoce użyteczne, są zgodne z ugruntowanymi konwencjami, standardami, najlepszymi praktykami i heurystykami użyteczności (ogólne zasady, a nie konkretne wytyczne dotyczące użyteczności).

Na przykład zgodność z konwencją może dotyczyć sposobu ułożenia strony. Internauci spędzają 69% czasu na przeglądaniu lewej połowy strony, a 30% na prawej. Dlatego też witryna jest bardziej dochodowa, jeśli ma konwencjonalny układ.

Standardem może być ścieżka nawigacyjna (urządzenie do orientacji i nawigacji, które jest natychmiast rozpoznawalne) lub globalne menu nawigacyjne w górnej części strony, tak jak w witrynie BCC.

Wzorce i nauka

Jak łatwo nowy użytkownik może nauczyć się poruszać po interfejsie? Nikt nie chce uczyć się nowego sposobu robienia rzeczy, chyba że zapewnia on znaczące korzyści w stosunku do tego, co było przed nim — a jednak jesteśmy stale zalewani niesprawdzonymi, niekonwencjonalnymi interakcjami.

Wspólne komponenty lub wzorce zapewniają natychmiastową naukę. Kiedy nauczysz się posługiwać łyżką, zawsze będziesz wiedział, jak się nią posługiwać. To samo dotyczy jazdy na rowerze, jazdy na łyżwach… ta sama konstrukcja dotyczy elementów interfejsu użytkownika, których używamy na co dzień: przycisków, pól tekstowych, rozwijanych menu, pól wyboru, przycisków radiowych, spinnerów, suwaków, ikon, akordeonów, pól wyszukiwania itp.

Najlepsze projekty interakcji nie próbują wymyślać koła na nowo, ale efektywnie i efektywnie wykorzystują wzory w nowy sposób.

Wzorce nie tylko zachęcają do uczenia się, ale także zapewniają spójność (kolejna zasada omówiona powyżej) i dostosowują ją do oczekiwań użytkownika dotyczących tego, jak rzeczy powinny działać.

Hierarchia wizualna i nacisk

Podczas interakcji z witryną lub aplikacją ludzie szukają informacji najbardziej odpowiednich dla ich wyszukiwania. Hierarchia wizualna dotyczy rozmieszczenia elementów w sposób sugerujący znaczenie. Hierarchia wizualna w projektowaniu wpływa na kolejność, w jakiej ludzkie oko postrzega to, co widzi. Nie wszystko ma taką samą „wagę”; porządek tworzony jest przez wizualny kontrast między przedmiotami w polu percepcji. Kontrast wizualny (wyróżnienie) można osiągnąć poprzez rozmiar, bliskość, kolor, nieprzezroczystość i rzeczywisty kontrast tonalny między elementami.

Nie lekceważ potęgi hierarchii wizualnej. Od wieków jest bardzo skutecznie stosowany we wszelkiego rodzaju projektach, w architekturze i wzornictwie przemysłowym, a także w druku. Sprawdź kilka świetnych projektów plakatów. Używając tej techniki dobrze w projektowaniu interakcji, wydaje się, że właściwe rzeczy pojawiają się we właściwym czasie we właściwy sposób.

Świetni projektanci interakcji wykorzystują siłę nacisku, aby z powodzeniem tworzyć „szczupłe i średnie” projekty interfejsów, które wydają się działać jak magia.

Prawo Fittsa

Wierzcie lub nie, ale to prawo wywodzi się z wczesnych badań dotyczących ruchu mięśni ludzkich i kierowania pracą operatora telegrafu oraz linii produkcyjnej, a później zostało zaadaptowane do HCI (interakcja człowiek-komputer). Zasadniczo mówi: „Czas na zdobycie celu jest funkcją odległości i rozmiaru celu”.

Mówiąc prościej, chodzi o to, jak daleko i jak duży jest cel oraz jak blisko jest w stosunku do innych celów. Krótsze ruchy myszy lub stuknięcia są lepsze — zawsze szybciej jest kliknąć lub przesunąć cel, jeśli znajduje się bliżej pozycji wyjściowej. Powiązane zadania powinny również znajdować się blisko siebie, aby użytkownicy nie musieli biegać po ekranie wchodząc w interakcję z interfejsem użytkownika.

Prawo Fittsa może dokładnie przewidzieć czas potrzebny na dotarcie do celu i wybranie go. Celem może być przycisk, lista rozwijana lub inny interaktywny element na ekranie. Jeśli jest za daleko, za mały lub jeśli klikalne elementy są zbyt blisko siebie, wydajność i użyteczność interfejsu znacznie się zmniejsza.

Diagram Gutenberga, układy wzorców Z i F

Te wzorce mają zastosowanie w różnych sytuacjach w zależności od treści i są najczęściej używane przez zachodnią publiczność. Diagram Gutenberga opisuje ogólny wzorzec, po którym poruszają się oczy, patrząc na równomiernie rozmieszczone, jednorodne informacje — głównie na stronach z dużą ilością tekstu, takich jak blogi lub serwisy informacyjne. Diagram Gutenberga sugeruje, że mocne i słabe obszary ugoru znajdują się poza ścieżką grawitacji czytania i otrzymują minimalną uwagę, chyba że są w jakiś sposób podkreślone wizualnie.

Wzór Z jest zgodny z kształtem litery Z. W niektórych przypadkach ten wzór jest również określany jako wzór Zig-Zag. Główna różnica w stosunku do diagramu Gutenberga polega na tym, że wzór Z sugeruje, że widzowie przejdą przez dwa obszary odłogiem. W przeciwnym razie nadal zaczynają się i kończą w tych samych miejscach i nadal przechodzą przez środek. Podobnie jak w przypadku Gutenberga, projektant umieściłby najważniejsze informacje na ścieżce wzorca Z.

F oznacza szybkość i odnosi się do tego, jak użytkownicy czytają treść. Wzór F został spopularyzowany przez badanie eyetrackingowe NNGroup, które zarejestrowało ponad 200 użytkowników czytających treści w sieci. Okazało się, że wzorce skanowania ludzi były dość spójne w wielu różnych typach witryn.

Dlaczego to jest ważne? Na przykład w witrynie eCommerce, aby zmaksymalizować skanowanie, możesz ułożyć najważniejszą zawartość w sposób zgodny z wzorcem F.

Uznanie zamiast przypominania

Rozpoznawanie odnosi się do naszej zdolności do „rozpoznawania” zdarzenia lub informacji jako znajomej, podczas gdy przypominanie jest znacznie bardziej „obciążeniem poznawczym”, które polega na wyciąganiu powiązanych szczegółów z pamięci. Pokazywanie użytkownikom rzeczy, które mogą rozpoznać, poprawia użyteczność w porównaniu z koniecznością przywracania elementów od zera.

Na przykład używanie ikon w interfejsie użytkownika jest potężne, ponieważ pozwala na natychmiastowe rozpoznanie symbolu. Nasz mózg przetwarza (rozpoznaje) symbole około 1000 razy szybciej niż czytanie tekstu. Jeśli projektant wyświetla w oknie dialogowym standardową ikonę znaku ostrzegawczego, natychmiast skupia się to na użytkowniku i zwraca uwagę, ponieważ następna akcja może być destrukcyjna. Ale jeśli ikona jest zaprojektowana w taki sposób, że zmusza użytkowników do przypomnienia i rozszyfrowania znaczenia — na przykład podniesionej ręki zamiast ikony ostrzegawczej — zmniejsza to wydajność i użyteczność interfejsu użytkownika.

Estetyczny i minimalistyczny design

Musisz dogłębnie zrozumieć istotę produktu, aby móc pozbyć się części, które nie są niezbędne. — Jonathan Ive.

To jedna z najtrudniejszych zasad, ponieważ jest trudna. Projektanci i menedżerowie produktu zwykle dodają każdą dostępną opcję pod słońcem i pozwalają użytkownikowi decydować o ścieżce, którą chce obrać. To naprawdę leniwe podejście, które prowadzi do produktów pełnych nieistotnego bałaganu.

Interfejsy muszą być oczyszczone z niepotrzebnych elementów i treści, które nie wspierają celów i zadań użytkownika. Projektanci powinni nie tylko projektować estetyczne interfejsy użytkownika, ale także nadać priorytet informacjom wyświetlanym na ekranie w przepływie użytkownika. Wykorzystując hierarchię wizualną i magię nacisku, należy przedstawić tylko niezbędne i absolutne minimum informacji potrzebnych użytkownikowi do wykonania zadania.

Michał Anioł powiedział o swojej pracy: „Widziałem anioła w marmurze i rzeźbiłem, dopóki go nie uwolniłem”.

Zaprojektowanie interakcji, która jest minimalistyczna, estetyczna i prosta, wymaga od projektanta dokładnego zrozumienia, co się dzieje w momencie, gdy ludzie będą używać produktu, i pozbycia się wszystkiego, co nie jest konieczne. Przeprowadzanie dogłębnych badań i testów użytkowników w celu zrozumienia, w jaki sposób użytkownicy będą korzystać z produktu, jest zazwyczaj najlepszym podejściem.

Zapobieganie błędom

Użytkownicy często są rozkojarzeni podczas wykonywania zadania, dlatego kluczowe znaczenie ma zapobieganie nieświadomym błędom poprzez wizualne uwypuklenie, oferowanie sugestii i stosowanie starannie zaprojektowanych ograniczeń. Forma zabezpieczenia przed błędami — znana również jako Poka-Yoke — odnosi się do implementacji mechanizmów odpornych na awarie, aby zapobiec generowaniu błędów przez proces.

Jednym z najlepszych sposobów zapobiegania błędom jest zaprojektowanie lepszego modelu mentalnego. Wiele błędów użytkownika pojawia się, gdy model projektanta i interpretacja tego, jak system powinien działać, nie zgadza się z modelem mentalnym użytkownika.

Pomocne są standardowe konwencje projektowe (jedna z zasad wymienionych powyżej), ponieważ pomagają użytkownikom zrozumieć, jakie działania mogą podjąć. Użytkownicy, którzy wchodzą w interakcję z Twoją witryną lub aplikacją, korzystali z tysięcy innych witryn i aplikacji i oczekują, że typowe elementy interaktywne będą wyglądać i działać w określony sposób. Sytuacje podatne na błędy mogą wystąpić, gdy produkt odbiega od tych konwencji.

Ostrzegaj przed popełnieniem błędów i potwierdzaj przed działaniami destrukcyjnymi. Jeszcze lepsze niż dobrze zaimplementowane komunikaty o błędach jest staranny projekt, który przede wszystkim zapobiega wystąpieniu problemu. Postaraj się wyeliminować okoliczności podatne na błędy i ciągle je sprawdzaj.

Przyszłość projektowania interakcji

Nowe urządzenia, środowiska i interfejsy będą się rozwijać z nowymi możliwościami interakcji. Kontrolery do gier wideo nieustannie ewoluują i zapewniają różnorodną gamę elementów sterujących wejściami, a także dotykowe sprzężenie zwrotne. Interfejsy gestów rozwiną się od ekranów dotykowych obsługujących gesty 2D i 3D — na przykład gestów na urządzeniach z systemem iOS i Android — do używania gestów dłoni w przestrzeniach 3D do interakcji z przestrzeniami rzeczywistości wirtualnej, konsolami do gier i urządzeniami IoT, które pozwalają nam kontrolować nasze środowisko .

Podobnie jak w przypadku Google Project Soli, możemy powiedzieć sayonara do myszy, gładzików i joysticków i przełączyć się na bardziej naturalne interakcje gestów, używając dłoni i palców do sterowania urządzeniami. W niektórych przypadkach — na przykład w konwersacyjnych interfejsach użytkownika — metody wprowadzania mogą zmieniać się z klawiatury na głos. Niemniej jednak zasada natychmiastowej i ciągłej informacji zwrotnej w jakiejś formie (głosowej, dotykowej i wizualnej) będzie nadal potrzebna.

Podstawowe zasady projektowania interakcji zawsze będą odgrywać kluczową rolę w projektowaniu przyszłych systemów i ważne jest, aby projektanci UX/UI pamiętali o nich. Nie są to twarde i szybkie zasady, ale zapewnią lepsze i bardziej angażujące produkty i usługi. Podobnie jak udane filmy wykorzystują starożytne techniki opowiadania historii, które opierają się na wypróbowanej i prawdziwej, uświęconej tradycją strukturze, istnieją zasady projektowania interakcji, które istnieją nie bez powodu. Stosowanie się do nich przyniesie korzyści każdemu projektantowi produktu, poprawiając użyteczność i zwiększając popularność jego produktów.

Dalsza lektura na blogu Toptal Design:

• Zasady projektowania: wprowadzenie do hierarchii
• Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy
• Odkrywanie zasad projektowania Gestalt
• Kompleksowy przewodnik po architekturze informacji