Behalten Sie diese zehn Richtlinien im Hinterkopf, wenn Sie ein schönes, benutzerfreundliches und auf den Menschen ausgerichtetes Website-UI-Design entwickeln.
Eine Website ist mehr als nur eine Ansammlung miteinander verbundener Seiten. Es ist eine Schnittstelle, ein Ort, an dem viele Dinge aufeinanderprallen, interagieren und aufeinander wirken – in diesem Fall die Online-Präsenz einer Person und eines Unternehmens oder einer Einzelperson. Der Besucher wird durch diesen Kontakt eine Erfahrung machen, und es ist Ihre Aufgabe als Webdesigner, diese Erfahrung so gut wie möglich zu machen.
Und der Schlüssel ist, zuallererst und zuallererst Ihren Benutzer im Auge zu behalten.
Glücklicherweise verdankt Webdesign trotz seiner Jugend viel der wissenschaftlichen Erforschung der Mensch-Computer-Interaktion (HCI). Und diese neun Tipps aus der HCI-Forschung helfen Ihnen dabei, sich während des gesamten Designprozesses auf Ihre Kunden zu konzentrieren.
Interface-Design, das sich auf die Form und Funktion von Interfaces konzentriert, ist eine Teilmenge des User-Experience-Designs, das sich auf das Gesamtbild konzentriert: das gesamte Erlebnis, nicht nur die Schnittstelle.
1. Machen Sie sich mit Ihren Kunden vertraut.
Vor allem müssen Sie Ihre internen und externen Benutzer genau verstehen. Ja, es erfordert ein gründliches Verständnis der demografischen Daten, die Ihre Analyse-App(s) möglicherweise sammeln. Aber was noch wichtiger ist, es erfordert ein Bewusstsein dafür, was sie brauchen und was sie davon abhält, ihre Ziele zu erreichen.
Um dieses Maß an Empathie zu erreichen, ist mehr als eine gründliche Überprüfung der Daten erforderlich. Es geht darum, die Besucher Ihrer Website kennenzulernen. Es erfordert, mit ihnen von Angesicht zu Angesicht zu sprechen, zu sehen, wie sie Ihr Produkt (und vielleicht andere) verwenden, und ihnen detailliertere Fragen zu stellen als „Wie gefällt Ihnen dieses Design?“
Was wollen sie erreichen? Was hält sie davon ab, ihre Ziele zu erreichen? Wie kann eine Website Menschen helfen, diese Herausforderungen zu meistern oder zu meistern?
Berücksichtigen Sie nicht nur, was Ihre Benutzer wollen. Graben Sie tiefer, um herauszufinden, was sie brauchen. Wünsche sind schließlich das Produkt unerfüllter Bedürfnisse. Sie werden in der Lage sein, die tiefsten Bedürfnisse eines Benutzers zu erfüllen und gleichzeitig ihre grundlegendsten Anforderungen zu erfüllen, wenn Sie ihre tiefsten Bedürfnisse erfüllen können.
Die Erkenntnisse, die Sie aus der Analyse von Daten und der Interaktion mit Kunden gewinnen, beeinflussen jede Entscheidung, die Sie treffen, von der Art und Weise, wie Menschen Ihre Benutzeroberfläche verwenden, bis hin zu den Arten von Informationen, die Sie in dieser Benutzeroberfläche hervorheben.
2. Bestimmen Sie, wie Ihre Benutzeroberfläche von Benutzern verwendet wird.
Bevor Sie Ihre Benutzeroberfläche entwerfen, müssen Sie zunächst beschreiben, wie die Benutzer sie verwenden werden. Angesichts der zunehmenden Verbreitung von berührungsbasierten Geräten ist dies ein dringenderes Problem, als Sie vielleicht denken.
Menschen interagieren auf zwei Arten mit Websites und Apps: direkt (über die Schnittstellenkomponenten des Produkts) und indirekt (über die Schnittstellenelemente des Produkts) (durch Interaktion mit UI-Elementen außerhalb des Produkts).
Beispiele für direkte Begegnungen
- Der Akt des Drückens einer Taste
- Verwenden einer Kreditkarte, um einen Kauf zu tätigen
- Ziehen und Ablegen eines Elements mit der Fingerspitze
Indirekte Interaktionen sind solche, die auftreten, wenn zwei oder mehr Personen auf unterschiedliche Weise interagieren.
- Zeigen und Klicken mit einer Maus
- Verwenden von Tastenbefehlen und Tastenkombinationen
- Ein Formularfeld mit Daten füllen
- Zeichnen auf einem Wacom-Tablet
Manchmal mag eine Interaktion zu einfach erscheinen.
Sie sollten Ihre Entscheidungen darauf stützen, wer Ihre Benutzer sind und welche Geräte sie verwenden. Wenn Sie für ältere Menschen oder Menschen mit eingeschränkter körperlicher Geschicklichkeit entwerfen, sollten Sie sich nicht auf das Wischen verlassen. Wenn Sie für Autoren oder Programmierer entwerfen, die lieber mit der Tastatur als mit der Maus mit Anwendungen interagieren, sollten Sie alle gängigen Tastenkombinationen integrieren, um Zeit zu sparen.
3. Legen Sie Ihre Ziele fest.
Viele Aktivitäten auf einer Website oder App haben Konsequenzen: Ein Knopfdruck kann dazu führen, dass Sie etwas kaufen, eine Seite löschen oder einen bissigen Kommentar über Omas Geburtstagstorte posten. Und es gibt Angst, wo immer es Implikationen gibt.
Stellen Sie daher sicher, dass Benutzer verstehen, was passieren wird, bevor sie auf diese Schaltfläche klicken. Dies kann über Design und/oder Text erfolgen.
Erwartungen durch Design setzen
- Auswählen und Auswählen der Schaltfläche, die der beabsichtigten Aktion entspricht
- Die Verwendung eines bekannten Symbols (z. B. ein Mülleimer für eine Schaltfläche zum Löschen, ein Pluszeichen zum Hinzufügen oder eine Lupe zum Suchen) in Verbindung mit Kopieren.
- Auswahl einer Farbe, die eine besondere Bedeutung hat (grün für „go“, rot für „halt“)
Mit Texten Erwartungen wecken
- Erstellen einer kurzen Schaltflächenkopie
- Bereitstellen von Richtungs-/Ermutigungskopien in leeren Phasen
- Benachrichtigungen senden und um Bestätigung bitten
Es erscheint sinnvoll, Menschen zu fragen, ob sie sich bei Aktivitäten mit irreversiblen Folgen sicher sind, etwa etwas dauerhaft zu entfernen.
4. Seien Sie bereit, Fehler zu machen.
Menschen machen Fehler, aber sie sollten nicht (immer) dafür bestraft werden. Sie können dazu beitragen, die Folgen menschlicher Fehler zu mindern, indem Sie eines von zwei Dingen tun:
- Stellen Sie sicher, dass Sie von vornherein keine Fehler machen.
- Wenn sie auftreten, sorgen Sie für Abhilfe.
Sie werden auf eine Reihe von Techniken zur Fehlervermeidung im E-Commerce und Formulardesign stoßen. Schaltflächen werden deaktiviert, bis alle Felder ausgefüllt sind. Das Formular erkennt, wenn eine E-Mail-Adresse falsch eingegeben wird. Pop-ups fragen, ob Sie Ihren Einkaufswagen wirklich aufgeben wollen (ja, Amazon – egal wie sehr es dem armen Tier schaden könnte).
Das Vorhersehen von Fehlern ist in der Regel weniger ärgerlich als der Versuch, sie nachträglich zu beheben. Dies liegt daran, dass sie vor dem fantastischen Erfolgserlebnis auftreten, das mit dem Klicken auf die Schaltfläche „Weiter“ oder „Senden“ einhergeht.
Es gibt jedoch Zeiten, in denen Sie die Dinge einfach geschehen lassen müssen. Beschreibende Fehlermeldungen glänzen zu diesem Zeitpunkt wirklich.
Stellen Sie beim Erstellen von Fehlermeldungen sicher, dass sie zwei Ziele erreichen:
Beschreibe das Problem. „Du hast angegeben, dass du auf dem Mars geboren wurdest“, zum Beispiel, den die Menschheit noch kolonisieren muss. Noch.“
Beschreiben Sie, wie Sie das Problem beheben können. Zum Beispiel: „Bitte geben Sie hier auf der Erde einen Geburtsort ein.“
Es ist erwähnenswert, dass dasselbe Buch in Nicht-Fehler-Situationen verwendet werden kann. Wenn ich beispielsweise etwas versehentlich lösche, es aber wiederherstellbar ist, benachrichtigen Sie mich mit einer Textzeile, die lautet: „Sie können gelöschte Inhalte jederzeit wiederherstellen, indem Sie in den Papierkorb gehen und auf Wiederherstellen klicken.“
Der Poka-Yoke-Ansatz ist eine Möglichkeit, Benutzerfehler vorherzusehen. Poka-Yoke ist ein japanischer Begriff, der „Fehlersicherung“ bedeutet.
5. Geben Sie sofort Feedback
In der realen Welt gibt uns die Umgebung Input. Was wir sagen, hat (normalerweise) eine Wirkung auf andere. Eine Katze schnurrt oder faucht als Reaktion auf unser Kratzen (abhängig von ihrer Launenhaftigkeit und davon, wie sehr wir beim Katzenkratzen saugen).
Zu oft reagieren digitale Schnittstellen nicht und lassen uns verwirrt zurück, ob wir die Seite neu laden, den Laptop neu starten oder ihn einfach aus dem ersten verfügbaren Fenster schmeißen sollen.
Wenn eine Website in weniger als 5 Sekunden geladen wird, zeigen Sie keinen Fortschrittsbalken an, da dies die Ladezeit länger erscheinen lässt. Verwenden Sie stattdessen ein Design, das keinen Fortschritt impliziert, wie das klassische „Windrad des Untergangs“ von Mac. Das ist überhaupt nicht der Fall. Wenn Sie Fortschrittsbalken auf Ihrer Website verwenden, sollten Sie einige ästhetische Tricks anwenden, um das Laden schneller erscheinen zu lassen.
6. Achten Sie auf die Größe und Platzierung der Elemente.
Das Gesetz von Fitts ist eine bedeutende Idee in der Mensch-Computer-Interaktion (HCI), die besagt:
Die Entfernung und Größe eines Ziels beeinflussen, wie lange es dauert, es zu erfassen.
Anders ausgedrückt: Je näher und/oder größer etwas ist, desto schneller können Sie Ihren Cursor (oder Finger) darauf platzieren. Dies hat eine Reihe von Auswirkungen auf die Taktiken für das Design von Interaktionen und Benutzeroberflächen, von denen die wichtigsten die folgenden sind:
Machen Sie Schaltflächen und andere „Klickziele“ sichtbar und anklickbar (z. B. Symbole und Textlinks). Dies ist besonders wichtig, wenn es um Schriftarten, Menüs und andere Linklisten geht, da der Platzmangel dazu führt, dass Benutzer häufig auf die falschen Links klicken.
Erhöhen Sie für die beliebtesten Aktivitäten die Größe und Hervorhebung der Schaltflächen.
Platzieren Sie die Navigation zusammen mit anderen beliebten interaktiven visuellen Komponenten wie Suchleisten an den Rändern oder Ecken des Bildschirms. Diese letzte Methode mag kontraintuitiv erscheinen, aber sie funktioniert, weil sie den Bedarf an Präzision verringert: Ein Benutzer muss sich keine Sorgen mehr darüber machen, sein Klickziel zu verfehlen.
Berücksichtigen Sie bei der Betrachtung der Position und Größe der Elemente Ihr Interaktionsmodell. Wenn Ihre Website eher horizontales als vertikales Scrollen erfordert, müssen Sie überlegen, wo und wie Sie Kunden über die Änderung informieren.
7. Seien Sie nicht nachlässig, wenn es um Standards geht.
Designer neigen aufgrund ihrer Kreativität dazu, Dinge neu zu gestalten, aber das ist nicht immer die beste Idee.
Warum? Weil eine modifizierte Version einer bekannten Interaktion oder Schnittstelle eine „kognitive Belastung“ verursacht und die Menschen dazu zwingt, eine zuvor gemeisterte Technik zu überdenken. Natürlich darfst du das Rad so oft neu erfinden, wie du möchtest – aber nur, wenn dadurch das Design verbessert wird.
8. Halten Sie Ihre Benutzeroberflächen so einfach wie möglich.
Wenn es um Einfachheit geht, wird oft auf die Studie des Harvard-Psychologen George Miller „The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information“ verwiesen. Der Mensch kann den Erkenntnissen zufolge nur 5 bis 9 Dinge zuverlässig in seinem Kurzzeitgedächtnis behalten. Miller tat es als Zufall ab, aber es scheint andere nicht davon abzuhalten, es zur Sprache zu bringen.
Daraus scheint zu folgen, dass je einfacher etwas ist, desto einfacher ist es, sich kurzfristig daran zu erinnern. Minimieren Sie daher die Anzahl der Elemente, die sich ein Benutzer merken muss, um Ihre Benutzeroberfläche schnell und erfolgreich zu verwenden. Dies kann einfacher gemacht werden, indem das Material in kleine, leicht verdauliche Stücke zerlegt oder aufgeteilt wird.
Diese Idee steht im Einklang mit Teslers Law of Complexity Conservation, das besagt, dass Designer von Benutzeroberflächen ihre Schnittstellen so einfach wie möglich gestalten sollten. Dies kann bedeuten, dass die Komplexität einer Anwendung nach Möglichkeit hinter einer einfachen Schnittstelle versteckt wird. Ein bekanntes Beispiel für ein Produkt, das sich diesem Kriterium widersetzt, ist Microsoft Word.
Die Mehrheit der Menschen verwendet Word nur für wenige Dinge – zum Beispiel zum Tippen –, während andere es für eine Vielzahl von Aktivitäten verwenden. Auf der anderen Seite beginnt jeder mit der gleichen Version von Word und der gleichen Benutzeroberfläche, sodass der durchschnittliche Joe – der kein Power-User ist – von der Anzahl der Funktionen überwältigt ist, die er mit ziemlicher Sicherheit nie verwenden wird.
Infolgedessen wurde eine progressive Offenlegung entwickelt, bei der erweiterte Funktionen hinter sekundären Schnittstellen verborgen sind. Kurze Textstücke stellen ein Produkt oder eine Dienstleistung vor, bevor sie Besucher auf eine Website führen, auf der sie mehr erfahren können. Dies ist ein typisches Vorkommnis auf Startseiten von Websites. (Dies ist auch eine großartige Technik für das mobile Design, bei dem die Navigation immer eine Herausforderung darstellt.)
Verwenden Sie in Links und Schaltflächen „mehr erfahren“ und ähnliche unspezifische Begriffe sparsam. Warum? Denn es ist unklar, worüber die Kunden „mehr erfahren“. Menschen suchen oft nach einem Link auf einer Website, der sie dorthin führt, wo sie hinwollen, und 15 Mal „mehr erfahren“ zu sagen, hilft nicht. Dies gilt insbesondere für diejenigen, die Screenreader verwenden.
9. Treffen Sie Entscheidungen so einfach wie möglich.
Vieles im Internet schreit uns an: „Banner“ werden zu bildschirmfüllender Werbung. Es tauchen Modale auf, die uns auffordern, Blogs zu abonnieren, die wir noch nicht gelesen haben. Video-Interstitials stoppen unseren Fortschritt und zwingen uns, die Zeit aus den Augen zu verlieren. Lassen Sie uns nicht einmal über Widgets, Flyouts oder Tooltips sprechen …
Dies wirkt sich auf fast alles aus, was wir bauen:
- Im Allgemeinen Layouts
- Navigationsmenüs
- Preisseiten sind verfügbar.
- Blog-Verzeichnisse
- Inhalts-Feeds
Die Liste könnte endlos gehen. Aber die Hauptwahrheit ist, dass je einfacher unsere Designs sind, desto schneller und einfacher ist es für Kunden, die von uns gewünschten Entscheidungen zu treffen. Aus diesem Grund sollten Zielseiten und Nicht-Newsletter-E-Mails nur einen Aufruf zum Handeln haben.
10. Achten Sie genau auf die Informationen.
Obwohl wir uns alle wünschen, dass unsere Designs nur nach ihren künstlerischen Vorzügen bewertet werden, ist es in Wahrheit genauso wichtig, Ihr Design zu optimieren, um seine Ziele zu erreichen.
Obwohl wir uns alle wünschen, dass unsere Designs nur nach ihren künstlerischen Vorzügen bewertet werden, ist es in Wahrheit genauso wichtig, Ihr Design zu optimieren, um seine Ziele zu erreichen.
Während Benutzerforschung und -tests Ihnen helfen können, Ihre Designentscheidungen auf das Erreichen des Ziels Ihrer Website zu konzentrieren, sind die nach dem Start gesammelten Daten von unschätzbarem Wert.
Richten Sie daher die Analysen Ihrer Website ein und analysieren Sie diese regelmäßig. Es gibt viele Analysetools, aber ich empfehle je nach Projekttyp Google Analytics und/oder Mixpanel.
Mixpanel konzentriert sich auf Ereignisse und sammelt Daten basierend darauf, was Besucher auf Ihrer Website tun, während Google Analytics eher verhaltensorientiert ist und Daten wie Sitzungsdauer, Verkehrsquellen und andere Daten sammelt. Obwohl beide Anwendungen beide Arten von Daten bereitstellen, zeichnen sie sich in verschiedenen Bereichen aus, also wählen Sie diejenige, die Ihren Anforderungen am besten entspricht.
Beide Tools können für eine begrenzte Anzahl von Datenpunkten kostenlos verwendet werden. Der Austausch von API-Schlüsseln ist eine gängige Methode für Webflow und ähnliche Technologien, um die Einrichtung von Analysen unkompliziert zu gestalten.
Sie haben die Grundlagen gelernt, jetzt ist es an der Zeit, weiterzumachen.
Machen Sie jetzt weiter und entwerfen Sie einige attraktive und nützliche Benutzeroberflächen. Hinterlassen Sie auch gerne einen Kommentar mit den besten – und schlechtesten – Designbeispielen für Benutzeroberflächen, die Sie in der Wildnis des Internets gesehen haben.
