Affordance to termin pierwotnie wymyślony przez psychologa JJ Gibsona w latach siedemdziesiątych. Określił go jako związek między środowiskiem a aktorem. Obecnie afordancja wykracza poza psychikę behawioralną lub kognitywną, a także do projektowania cyfrowych interfejsów. Zrozumienie afordancji pozwoli lepiej zrozumieć projekt produktu i interfejsów, co z kolei sprawi, że będziesz znacznie lepszym projektantem.

Czym jest afordancja?

Sytuacja, w której cechy sensoryczne obiektu intuicyjnie implikują jego funkcjonalność i wykorzystanie. - Crowdcube

Definicja terminu laika Crowdcube jest na miejscu. Wszystkie obiekty wokół nas mają afordancje, niektóre bardziej oczywiste niż inne. Affordance to możliwość działania z obiektem; nie jest własnością obiektu. Innymi słowy, przycisk można nacisnąć; możliwość naciśnięcia przycisku jest jego afordancją.

Oryginalna definicja wymyślona przez JJ Gibsona opisała wszystkie możliwe działania fizyczne, które można wykonać za pomocą obiektu. Z biegiem czasu definicja przesunęła się. Teraz definicja jest szersza i obejmuje wykrywalność działań. Zmiana ta spowodowała ewolucję technologiczną cyfrowych interfejsów. Wykrywalność to interesująca koncepcja w dziedzinie cyfrowej, ponieważ gdy używasz komputera, możesz odkrywać działania dzięki wskazówkom podanym w samych interfejsach.

Obiekty fizyczne

Zrób krok do świata fizycznego, gdzie zobaczysz, że obiekty mają właściwości fizyczne, takie jak rozmiar, kształt lub waga, które dostarczają wskazówek, co możesz z nimi zrobić. Oto kilka klasycznych przykładów. Zacznijmy od filiżanki; jest mały i ma uchwyt, który zapewnia trzymanie. Jego światełko przypomina kształt miseczki, co oznacza, że ​​może też coś pomieścić. Kiedy trzyma herbatę, afordancją jest to, że możesz trzymać filiżankę i pić z niej. Innym przykładem jest szczoteczka do zębów: ma długi, ale cienki uchwyt, który zapewnia chwytanie i tak dalej.

Obiekty fizyczne można podzielić na trzy rodzaje afordancji:

Dostrzegalna afordancja to podstawowa definicja afordancji, w której cechy obiektu implikują działanie.

Ukryta afordancja jest wtedy, gdy przedmiot ma afordancję, która nie jest tak oczywista; na przykład, patrząc na butelkę po piwie, nie można powiedzieć, że można jej użyć do otwarcia kolejnej butelki po piwie.

Fałszowa afordancja jest wtedy, gdy istnieje dostrzegalna afordancja; ale nie wyniknie z możliwego działania. Na przykład naciśnięcie przycisku, który nie powoduje niczego, np. Użycie pilota telewizora do włączania telewizora, ale z jakiegoś powodu nie działa. Afordancja wciąż istnieje - możesz nacisnąć ten przycisk tyle razy, ile chcesz - ale nic się nie dzieje, nie ma żadnej funkcji.

Affordance w przestrzeniach cyfrowych

Cyfrowe interfejsy są wyjątkowe. Pozwalają nam robić rzeczy ograniczone do dwuwymiarowego świata, jakim jest ekran komputera. Jest tak wiele rzeczy, które możemy zrobić w dowolnej aplikacji, witrynie lub programie; ale wszystkie mają jedno wielkie, paraliżujące ograniczenie: nie mogą dostarczyć ci wskazówek fizycznych co do tego, co możesz zrobić. Zamiast tego wszyscy polegają na wizualnych wskazówkach lub afordancjach. Może to być bardzo trudne, jeśli nie rozumiesz ważnej roli afordancji w tworzeniu udanych interfejsów.

Jeśli zrozumiesz, jak działa afordancja, będziesz mógł z nich korzystać na swoją korzyść. Kiedy możesz stać się narzędziem, będziesz mógł tworzyć projekty intuicyjne i łatwe w użyciu. Intuicyjne projekty mają dla nich taki urok - najprawdopodobniej dlatego, że wiele stron internetowych lub aplikacji jest nudnych i denerwujących - więc naprawdę warto ich używać. Dodatkowo konwersje efektów afordancji, które mają duże znaczenie w tworzeniu udanego projektu.

Rodzaje afordancji wpływające na UX

Jeśli chcesz w pełni zrozumieć, w jaki sposób afordancje działają w projektowaniu interfejsu, musimy uzyskać konkretne informacje. Zróbmy to teraz, obejmując sześć różnych typów afordancji widzianych w interfejsach cyfrowych, w tym: wyraźną, wzorcową, ukrytą, fałszywą, metaforyczną i afordancyjną.

1) Wyraźna afordancja

Podobnie jak w odczuwalnej afordancji, bezpośrednia afordancja jest wskazówką , której udziela język lub fizyczny wygląd przedmiotu. Podniesiony przycisk z napisem "Kliknij mnie" jest doskonałym przykładem zarówno języka, jak i fizycznych wskazówek. Podniesiony wygląd przycisku wskazuje na możliwość kliknięcia, podobnie jak tekst "Kliknij mnie". To jest oczywiste.

Język odgrywa tak ważną rolę w kierowaniu użytkowników za pomocą cyfrowych interfejsów. Pole wejściowe, które prosi o podanie "Pełnego imienia", pozwala wprowadzić do niego swoje imię i nazwisko. Język zapewnia jasne wytyczne dotyczące nie tylko tego, co powinieneś robić, ale także tego, co możesz robić. Wprowadzanie liter, takich jak Twoje imię, jest inne niż wprowadzanie liczb, takich jak numer telefonu i możesz określić, które z nich możesz zrobić w kontekście tekstu. Należy jednak wziąć pod uwagę, jak oczywisty jest twój interfejs, bez wyraźnych wskazówek. Twój projekt musi być użyteczny i intuicyjny, nie trzymając ręki użytkownika na każdym kroku.

2) Aranżacja wzoru

Aranżacja wzoru to afordancja określona przez konwencje. Doskonałym przykładem może być logo, które można kliknąć w lewym górnym rogu strony internetowej. Jest to wzór, który widzimy wszędzie; więc oczekujemy tego wszędzie. Przyjmuje się, że tekst, który ma inny kolor, czasami podkreślony lub pochylony, w niezmienionym tekście głównym, jak akapit, jest linkiem. E-mail jest często oznaczony kopertą, a ustawienia są oznaczone za pomocą narzędzi.

W tych przykładach wiadomość e-mail nie wymaga faktycznej koperty - nigdy jej nie ma - i żadne ustawienia nie wymagają korzystania z narzędzi. To metaforyczny wzór, na który byliśmy narażeni przez długi, długi czas; więc stała się konwencją.

Wzorce doskonale nadają się do komunikowania skrótów myślowych, ale tylko wtedy, gdy użytkownicy są świadomi tych wzorców. Przez cały czas pojawiają się nowe wzory, na przykład menu hamburgerów jest stosunkowo nową koncepcją menu i nawigacji. Projektując z myślą o nowych wzorach, musisz upewnić się, że użytkownicy ich znają. Ale kiedy wiesz, że twoja publiczność była wcześniej wystawiona na te wzorce, masz możliwość tworzenia niesamowitych projektów bez wyraźnego.

3) Ukryta afordancja

Ukryta afordancja w cyfrowych projektach jest podobna do fizycznej. Jednak w świecie cyfrowym faktyczna afordancja nie jest dostępna, dopóki nie zostanie podjęte działanie w celu jej ujawnienia. Na przykład, najeżdżając kursorem na przycisk, aby zobaczyć, czy nie jest aktywny, a zatem klikalny. Menu rozwijane to kolejny przykład, w którym nie widzisz menu, chyba że umieścisz kursor myszy lub klikniesz element listy nadrzędnej.

Ukryte afordancje są często wykorzystywane do uproszczenia wizualnej złożoności projektu. Na przykład w rozwijanym menu używamy menu rozwijanego, aby ukryć wszystkie opcje nawigacji, ponieważ jest ich zbyt wiele, aby wyświetlić wszystkie naraz. Jeśli użytkownik chce gdzieś nawigować, musi znaleźć go w menu rozwijanym. Dużą wadą ukrytych afordancji jest to, że wymagają od użytkownika znalezienia afordancji, niekiedy nie dając żadnych wskazówek o ich istnieniu. Nie wiesz, czego się spodziewać. Jest to gra polegająca na zgadywaniu, polegająca na znajdowaniu tych afordancji.

4) Fałszowa afordancja

Fałszywa afordancja w przestrzeni cyfrowej daje coś zupełnie nieoczekiwanego - np. Włączenie świateł zamiast telewizora za pomocą pilota telewizora - lub brak działania. Ten rodzaj afordancji jest w całym Internecie, głównie przez przypadek, jak przycisk, który wygląda aktywnie, ale nic nie robi, logo, które nie jest powiązane z niczym, słowa "kliknij tutaj" w tekście, które w ogóle nie są łączami lub czerwony przycisk, który robi coś dobrego z zielonym przyciskiem, który robi coś złego.

Fałszowa afordancja jest najbardziej rozpowszechniona w projektach, w których brakowało szczegółów, takich jak zerwana sytuacja łącza. Kolory mają z nimi specyficzny związek. W świecie zachodnim zieleń jest dobra, a czerwień jest zła. Po przełączeniu tych dwóch na pewno zmylisz niektórych użytkowników, zwłaszcza gdy przyciski są obok siebie. To nie znaczy, że nie możesz tego zrobić; ale powinieneś zachować ostrożność. Nie chcesz żadnych fałszywych afordancji w swoim projekcie, jeśli możesz pomóc. Nie należy zaskakiwać takich użytkowników.

5) Afordancje metaforyczne

Skeomomorfizm opierał się w dużej mierze na metaforycznych afordancjach, jak imitacje prawdziwych przedmiotów, aby się komunikować. Ikony są wspaniałymi przykładami: mapą, koszykiem lub koszem, domem, drukarką, wideo, mikrofonem, telefonem itp. Weźmy na przykład koncepcję e-mail. Jego korzenie są w metaforze fizycznej litery; jego ikona jest zwykle kopertą. To wspaniały przykład metaforycznej afordancji dookoła. Jeśli projektujesz coś i nie wiesz, jak je przekazać, zawsze dobrze jest wrócić do świata fizycznego, przynajmniej po inspirację i punkt wyjścia.

Teraz nie potrzebujesz przejść przez górę jak stare projekty Apple, gdzie dla swojej aplikacji gra zrobiła zielone obrusy. Ale porównaj to z ich aktualną ikoną aplikacji Games, która jest zaledwie kilkoma bąbelkami. Co oni mają wspólnego z grami? Nie wiem, metafory już tam nie ma. To, czy to dobrze, czy nie, zależy od Ciebie. To, czy metafora ma być w twoim projekcie, czy nie, zależy od ciebie.

6) Afera ujemna

Można uznać, że afordancję ujemną nie wskazuje na afordancję; dzieje się tak, gdy masz nieaktywny przycisk lub przycisk, który wygląda na nieaktywny. Najczęstszą tego przyczyną jest wygaszenie przycisku lub łącza. Oto część podchwytliwa: nie chodzi o to, że próbujesz powiedzieć użytkownikowi, że nie możesz użyć tego przycisku - choć może być - ale że przycisk wydaje się, że nie możesz go użyć, nawet jeśli w rzeczywistości możesz.

Są pewne przypadki, w których chcesz wyraźnie wskazać, że nie możesz czegoś zrobić. Na przykład, jeśli użytkownik wypełni formularz i nie wypełnił jeszcze wszystkich informacji, stan przycisku może być nieaktywny, ponieważ nie chcesz, aby jeszcze zostały wykonane. Jeśli jednak przycisk wygląda nieaktywnie, ale jest aktywny, oznacza to po prostu kiepski wygląd. Ostrożnie z tym.

Przedstawiony obraz, obraz afordancji przez Shutterstock.