Affordanzen werden in der physischen Welt als die wahrgenommenen und tatsächlichen Eigenschaften oder Merkmale eines Objekts beschrieben, die seine Verwendung ohne Erklärung vorschreiben: ein Münzschlitz, ein Schlüsselloch, ein Griff an einem Koffer, ein Türgriff; alltägliche Dinge, von denen wir automatisch wissen, wofür sie da sind und wie man sie benutzt.
In der digitalen Welt sind UX-Affordances die interaktiven Elemente einer Website, einer App oder eines Produkts, die eine intuitive Bedienung ermöglichen, so dass wir uns auf die benötigten Inhalte konzentrieren können und nicht auf die Bedienung der Plattform.
Als UX-Forscher verstehen wir den wahren Wert und Nutzen hinter diesen intuitiven und innovativen Funktionen und wie sie zwischen starkem und schwachem visuellen Design unterscheiden. Nutzer sollten die besten Affordances nicht wirklich bemerken, sondern sie automatisch akzeptieren, weil sie die visuelle Sprache, in der sie funktionieren, bereits verstehen: Hamburger-Menüs, Warenkorb-Funktionen, E-Mail- oder Social-Media-Symbole sind allesamt kristallklare Affordances, deren beabsichtigte Funktion offensichtlich ist, was ihre digitalen Interaktionen instinktiv und unbewusst macht.
Als UX-Forscher haben wir jedoch immer wieder festgestellt, dass eine Benutzeroberfläche schnell verwirrend oder problematisch werden kann, wenn nicht die notwendigen Affordances vorhanden sind, die die Benutzer verstehen.
Durch UX-Forschung und -Tests decken wir die operativen Probleme von Produkten auf, die von den Nutzern verursacht werden:
- Ich weiß nicht, was ich tun soll
- Einen möglichen nächsten Schritt nicht sehen
- eine mögliche Ausgangschance nicht erkennen
- Die Kontrolle über eine Funktion verlieren
- Die Kontrolle über die Navigation verlieren
- Verlust des Selbstvertrauens bei komplexen Aufgaben
- Visuelle Hinweise nicht erkennen
Wie bei allen UX- und UI-Komponenten und -Funktionen können Fehler und Missverständnisse nur durch fundiertes, datengestütztes Design und regelmäßiges Testen realistisch ausgeschlossen werden. Der Begriff "Affordance" bezieht sich auf die grundlegenden Eigenschaften eines Elements, und in erster Linie sollten diese grundlegenden Eigenschaften den Benutzer auf einen bestimmten Weg leiten, um das Erlebnis zu verbessern. Nur durch Testen können wir feststellen, ob unsere Produkte für ihren Zweck geeignet sind.
Effektive Erschwinglichkeit auf internationalen Märkten
Unabhängig davon, ob Sie ein Produkt für einen lokalen, kulturellen oder globalen Markt entwickeln, bieten die besten benutzerfreundlichen Schnittstellen alle Arten von Affordanzen, die Ihr Publikum ohne weiteres erkennt, um instinktive Benutzerinteraktionen zu ermöglichen. Forschung und Tests spielen eine große Rolle bei der Erschließung globaler Märkte, da viele grafische oder metaphorische Erleichterungen nicht erfolgreich umgesetzt werden können, Verwirrung stiften oder, schlimmer noch, Anstoß erregen.
Definition und Erläuterung von Affordanz im UX-Design
Eine Affordanz ist eine Eigenschaft oder ein Merkmal eines Objekts, das eine Aufforderung oder einen visuellen Hinweis darauf darstellt, was dieses Element tut, um ein bestimmtes Ergebnis zu erzielen.
Die Bedeutung von Affordanz im UX-Design
- Leitet das Nutzerverhalten ? Gut gestaltete und positionierte Erleichterungen leiten die Nutzer dorthin, wo sie sein müssen - einfach und instinktiv.
- Verbessert die Benutzerfreundlichkeit ? Genau wie bei der Erschwinglichkeit von physischen Objekten spielen diese oft winzigen Komponenten eine große Rolle in einem schnell fließenden digitalen Erlebnis und erleichtern uns die Interaktion mit ihnen. Diese verbesserte Benutzerfreundlichkeit führt zu mehr Engagement und höheren Konversionsraten.
- Schafft ein einheitliches Benutzererlebnis ? Konsistenz ist für jede erfolgreiche digitale Schnittstelle von entscheidender Bedeutung. Wenn wir die Formate beibehalten, die unsere Nutzer verstehen, erwarten und mögen, ist sichergestellt, dass sie sich immer wieder mit ihnen beschäftigen.
- Affordance verbessert das Benutzererlebnis ? Alles, was wir tun, zielt darauf ab, das Erlebnis für Auftraggeber, Kunden und Nutzer zu verbessern. Diese Erleichterungen führen zu den benutzerfreundlichen Designs, die wir anstreben.
- UX und UI werden intuitiver und angenehmer zu bedienen ? Das wahre Ziel unserer Arbeit.
Arten von Affordanzen im UX-Design
Explizite Affordanzen
Explizite Erleichterungen sind klar gekennzeichnet, um eine offensichtliche Nutzung zu gewährleisten, oft mit einem Bild oder einer Textanweisung.
Zum Beispieleine Schaltfläche mit einer Textbeschreibung, "Klicken Sie hier für weitere Informationen", "In den Warenkorb" oder "Formular abschicken".
Implizite Affordanzen
Implizite Erleichterungen beziehen sich auf Elemente, die keine offensichtlichen visuellen Hinweise oder Kennzeichnungen haben, aber aufgrund des gemeinsamen Designs durch den Kontext der Position oder des Aussehens als Möglichkeiten erkannt werden.
Zum Beispieleine Reihe von Symbolen für soziale Medien oder Kundenlogos.
Versteckte Affordanzen
Versteckte Affordances bleiben so lange verborgen, bis der Benutzer die notwendige Aktion ausführt, um sie aufzudecken.
Zum BeispielEin Dropdown-Menü erscheint, wenn der Benutzer den Mauszeiger über den obersten Menüpunkt bewegt (oder wenn der Benutzer auf kleineren Bildschirmen auf ein Hamburger-Menü klickt), oder ein Textfeld, das nur erscheint, wenn der Benutzer auf ein Suchfunktionssymbol klickt.
Grafische/metaphorische Affekte
Diese Arten von Affordances sind Icons oder Bilder, die ein reales Gegenstück darstellen. Dabei kann es sich um Symbole, Illustrationen oder Fotos handeln.
Zum BeispielDas Lupensymbol kann eine Suchleiste darstellen oder als Zoomfunktion verwendet werden, ein Briefumschlagsymbol für E-Mails, ein Einkaufskorb für einen digitalen Einkaufskorb oder eine Flagge zum Wechseln der Sprache oder des Standorts.
Skeuomorphe Affordanzen
Skeuomorphe Affordances sehen aus und funktionieren wie ihre Gegenstücke in der physischen Welt.
Zum BeispielEin digitales Buch mit umblätterbaren Seiten, ein Kalender, der von Monat zu Monat blättert oder umblättert, oder Elemente, die in neue Positionen gezogen werden können.
Muster Affordanzen
Pattern Affordances basieren auf bereits erkennbaren UI-Methoden und -Mustern.
Zum BeispielNavigationsmenüs am oberen oder unteren Rand der Seiten, Website-Logos, die den Nutzer zur Startseite zurückführen, oder unterstrichener Text in einer anderen Farbe, der einen Link darstellt.
Negative Affordanzen
Negative Affordanzen stellen inaktive Gestaltungselemente dar.
Zum Beispiel, ausgegraute Schaltflächen, automatisch ausgefüllte Eingabefelder oder die verbleibenden nicht hervorgehobenen Schaltflächen eines Optionsregisters.
Falsche Erschwinglichkeiten
Falsche Affordances scheinen eine bestimmte Handlung vorzuschreiben, bieten aber etwas anderes als das, was erwartet wird, oder gar nichts.
Zum Beispielfarbiger, unterstrichener Text, der keinen anklickbaren Link bietet, oder eine ausgegraute Schaltfläche, die dennoch funktioniert, wenn man sie anklickt.
Schlüsselprinzipien für die Gestaltung effektiver Affordanzen
Die Nutzer in den Mittelpunkt des Designs stellen
Forschung und Tests werden zeigen, welche Versionen oder Optionen die Nutzer instinktiv verstehen und die regelmäßigsten und erfolgreichsten Ergebnisse und Erträge liefern. Um Ihre Nutzer besser zu verstehen, sollten Sie Personas definieren und Ihre Entwürfe auf sie abstimmen, um wirksame Erleichterungen zu schaffen.
Gute Design-Konventionen befolgen ? Konsistenz, Vertrautheit und Logik
Halten Sie sich an die erkennbaren Konventionen der Erschwinglichkeit von Mustern und gemeinsamen Designkonventionen. Eine neue Anwendung oder Funktion fühlt sich bereits vertraut an, wenn die darin enthaltenen Elemente einem uns vertrauten Format folgen.
Sichtbarkeit und Feedback
Sauberes und klares Design bedeutet, die Dinge einfach zu halten und gleichzeitig klare Ziele mit den Möglichkeiten eines Elements darzustellen. Stellen Sie sicher, dass die Benachrichtigungsfunktionen dort eingesetzt werden, wo Ihre Nutzer eine Bestätigung oder ein Feedback zu einer Aktion benötigen.
Klarheit und Intuitivität
Die Klarheit und intuitive Bedienung einer Benutzeroberfläche führt zu einem nahtlosen Benutzererlebnis, das von einer Aktion oder einem Bereich zum nächsten führt. Websites und Apps sollten intuitiv und vertraut genug sein, um die Nutzer zu den gewünschten Inhalten zu führen und problemlos Konversionen zu erzielen.
UI-Elemente, die die Affordanz UX nutzen
Buttons
Schaltflächen sind unsere stärksten Call-to-Action-Elemente, daher ist es unerlässlich, dass ihre Rolle offensichtlich und leicht erkennbar ist. Form, Größe, Farbe, Beschriftung, Kontrast und Text können alle eine Rolle spielen.
Icons
Bei Icons handelt es sich in der Regel um Muster, bei denen wir ihre Funktion an der Einfachheit ihrer Darstellung erkennen, z. B. Icons für Favoriten und Reaktionen in sozialen Medien, E-Mail-, Download- oder Share-Symbole. Trotz der Unterschiede im Markenstil folgen viele Icons einem universellen (oder zumindest geografischen) Format, das wir automatisch verstehen.
Eingabefelder
Wir wissen, dass von uns erwartet wird, dass wir Daten hinzufügen, wenn wir mit einem Eingabefeld konfrontiert werden. Sie enthalten oft eine explizite Errungenschaft wie eine Musterkopie in einer hellen Farbe und eine Benachrichtigung, wenn sie korrekt ausgefüllt wurden.
Animationen
Animierte Affordances können dem Benutzer zeigen, wie eine bestimmte Funktion oder Option zu bedienen ist. Oder eine schüttelnde Schaltfläche zeigt uns, dass wir etwas falsch gemacht haben und ein Problem beheben müssen, um fortzufahren - und das alles ohne langwierige Texterklärung.
Benachrichtigungen
Benachrichtigungsfunktionen weisen auf eine Änderung oder eine erforderliche Aktion hin. Solche visuellen Affordances können ein Häkchen neben einem ausgefüllten Eingabefeld eines Formulars, eine Aktualisierung der Anzahl der Artikel in einem Warenkorb oder die rot nummerierten Kreise über den Apps auf Ihrem iPhone sein.
Gemeinsame Herausforderungen und Fallstricke bei der Umsetzung von Affordance
Ausgleich zwischen Einfachheit und Komplexität
Die wahre Schönheit des Affordance-Designs liegt in seiner Einfachheit. Jedes interaktive Element kann jedoch etwas unglaublich Komplexes steuern. Die Kunst des guten Designs besteht darin, ein Gleichgewicht zwischen beiden zu finden und die einfachste Art und Weise zu finden, um die komplexesten Aufgaben zu erfüllen.
Vermeidung von falschen oder irreführenden Affordanzen
Falsche Erleichterungen können die Nutzer in die Irre führen und Verwirrung bei der Bedienung stiften. Wir wissen, wie leicht Kunden halb gefüllte Warenkörbe und Apps aufgeben, wenn sie auf Problemstellen stoßen. Daher ist es notwendig, verwirrende Elemente zu entfernen oder deutlich zu machen, wo der nächste Schritt oder versteckte Erleichterungen zu finden sind.
Best Practices für die Erstellung eines nahtlosen Affordance Designs
Benutzerforschung und -tests für eine optimale Benutzererfahrung
Als UX-Forscher können wir Ihnen genau sagen, wie wichtig unsere Arbeit in diesem Bereich ist. Kontinuierliche Tests und Iterationen in allen Phasen und Prozessen sind in jedem Schritt des digitalen Produktdesigns notwendig. Mit Affordances arbeiten wir mit so einfachen Elementen wie A-B-Tests (datengestützte Entscheidungen, die zu Konversionen führen) bis hin zu internationalen UX-Tests, bei denen kulturelle und geografische Unterschiede einen Prozess, eine Benutzeroberfläche oder sogar eine ganze App unbrauchbar machen können.
Bleiben Sie mit Entwurfsmustern und Konventionen auf dem Laufenden
Da sich Technologie und Design ständig weiterentwickeln, müssen Designer der Entwicklung immer einen Schritt voraus sein. Wenn Sie sich über gängige Konventionen, neue Tools, Innovationen und Moden auf dem Laufenden halten, bleiben Ihre digitalen Schnittstellen funktionsfähig und entsprechen den Erwartungen der Nutzer.
Schlussfolgerung: Die Macht der effektiven Affordanz bei der Veränderung der Benutzererfahrung
Jetzt wissen Sie, wie wichtig die physische Erscheinung und die zentralen Eigenschaften von Affordances sind. Durch aussagekräftige UX-Forschung finden wir die Probleme und Fragen mit unseren Apps und Produkten und welche unserer Lösungen die idealen Ergebnisse liefern.
Obwohl es sich um kleine Teile eines großen Systems handelt, ist das UX-Design in hohem Maße auf effektive Affordanzen angewiesen, um die besten Projekte zu realisieren. Affordances helfen dabei, Benutzerfehler zu vermeiden oder zu verhindern und Softwarebeschränkungen zu umgehen, egal ob es sich um einfache Kopieraktualisierungen oder Darstellungen von realen oder ursprünglichen Objekten handelt; die Nutzung von Affordances ist zu einer Kunstform geworden.
Unsere Experten für Nutzerforschung stehen Ihnen zur Verfügung, um Ihre Kunden näher kennenzulernen. Wenn Sie ein unverbindliches Gespräch vereinbaren möchten, kontaktieren Sie uns per E-Mail unter hello@ux247.com oder teilen Sie uns Ihren Bedarf über das untenstehende Formular mit.