Eine Schnittstelle ist eine Art „Brücke“ zwischen dem Benutzer und dem System. Mithilfe der Schnittstelle kann der Benutzer dem System erklären, was er von ihm möchte, und das System wird diese erfüllen. Was aber passiert, wenn dieses Verständnis zwischen Maschine und Mensch nicht zustande kommt? Der Benutzer verlässt einfach die Website. So verhalten sich Internetnutzer laut Online Marketing Institute:
— 85 % verlassen möglicherweise die Website, wenn ihnen das Interface-Design nicht gefällt;
- 83 % verlassen eine Website, wenn sie gezwungen sind, viele Klicks durchzuführen, um das Gesuchte zu finden;
- 40 % kehren nie wieder zu einer Website zurück, wenn die Nutzung beim ersten Mal für sie schwierig war.

Die Prinzipien einer guten Benutzeroberfläche sind für Websites, Programme und Dienste dieselben. Ich habe die 17 wichtigsten zusammengestellt (und am Ende finden Sie auch einen kurzen Überblick über Methoden zum Testen einer Schnittstelle auf Benutzerfreundlichkeit).

Aus dem Artikel erfahren Sie:

Eine gute Schnittstelle sollte:

1. Seien Sie intuitiv.

Die Benutzeroberfläche sollte für die meisten Menschen so klar wie möglich sein. Wenn eine Person nach dem Öffnen einer Anwendung oder dem Aufrufen einer Website nicht versteht, wie man sie verwendet, wird sie nach dem zufälligen Drücken verschiedener Tasten für einige Sekunden enttäuscht sein und die Ressource verlassen. Höchstwahrscheinlich für immer.

Eine intuitive Benutzeroberfläche ist eine, bei der:
1) Alle Elemente sind nach den Prinzipien der elementaren Logik aufgebaut.
Nehmen wir zum Beispiel eine Website mit Textinhalten (Artikeln). Seine logische Schnittstelle sieht folgendermaßen aus:
— Der Name der Website steht ganz oben auf der Seite, darunter — Kurzbeschreibung Ressource;
— Unten finden Sie ein Menü mit Abschnitten der Website.
- Block mit Kontakten und Rückmeldung im oberen rechten Teil des Menüs;
— Artikel sind in der Reihenfolge angeordnet, in der sie der Website hinzugefügt wurden;
— Am Ende jedes Artikels gibt es die Schaltflächen „Weiter“ und „Zurück“.
— Kategorieschaltflächen sollten immer sichtbar sein, damit Sie jederzeit zu einem anderen Abschnitt wechseln können;
— Website-Regeln, detaillierte Kontaktinformationen, Informationen über Entwickler usw. befinden sich in der Fußzeile der Website, da dort immer nach ihnen gesucht wird.

Verwirren Sie den Benutzer nicht mit einer ungewöhnlichen Anordnung bekannter Blöcke, sondern nutzen Sie bewährte Prinzipien. Der Blog der Vermarkterin Heidi Cohen ist klar und logisch aufgebaut:

Hier ist ein Beispiel aus der Programmoberfläche. Selbst wenn die Symbole nicht beschriftet sind, ist klar, was sie bedeuten können. Die Tasten sind in logischer Reihenfolge angeordnet – schließlich versteht jeder intuitiv, dass nach der „Pause“-Taste eine „Stopp“-Taste usw. sein sollte.

2) Den Tasten sind eindeutige Symbole zugeordnet.
Vermeiden Sie Schaltflächen mit Bildern, die den Benutzer irreführen könnten. Es besteht keine Notwendigkeit, das Rad neu zu erfinden. Ein großes Fragezeichen weist den Nutzer sofort darauf hin, dass sich dahinter eine Anleitung oder Hilfe verbirgt. Eine Lupe ist immer ein Suchformular auf einer Website.

Aber was würden Sie denken, wenn Sie beispielsweise auf einer Website oder in einem Programm einen Button mit einem durchgestrichenen Quadrat sehen würden? Höchstwahrscheinlich werden sich viele Benutzer nicht einmal trauen, darauf zu klicken, da ihnen nicht klar ist, wozu diese Aktion führen wird.

Und damit Benutzer ihre Aktionen noch besser verstehen, können Sie Beschriftungen für Schaltflächen verwenden. Sie erscheinen beim Schweben.

3) Es gibt Hilfe für den Benutzer, wenn er sich verirrt.
Wenn der Nutzer auf einer 404-Seite landet, geben Sie ihm sofort eine kurze Anleitung, was er als nächstes tun kann. Bitten Sie ihn beispielsweise, zum vorherigen Abschnitt zurückzukehren und dort nach den erforderlichen Informationen zu suchen.

Oder so eine Situation. Sie haben einen Online-Shop. Wenn die Produktparameter falsch eingegeben werden, wird dem Benutzer eine Fehlermeldung angezeigt. Schreiben Sie sofort auf, was er tun muss, um das Produkt richtig zu beschreiben. Wenn das gewünschte Produkt nicht auf Lager ist, schreiben Sie darüber, wie der Benutzer eine Benachrichtigung über die Verfügbarkeit dieses Produkts erhalten kann.

Und ein klares Beispiel:

2. Seien Sie vorhersehbar.

In anderen Situationen kann Vorhersehbarkeit eine langweilige und uninteressante Eigenschaft sein, aber nicht, wenn es um die Benutzeroberfläche geht. Der Benutzer muss beim Betrachten dieses oder jenes Oberflächenelements sofort verstehen, wie es sich im Falle einer Interaktion verhält. Wenn ein Objekt wie ein Menü aussieht, sollte es sich wie ein Menü verhalten; wenn es wie ein Schieberegler aussieht, sollte es etwas bewegen. Kreatives Denken ist natürlich gut, aber in diesem Fall nicht.

Ein Beispiel für das Design einer Player-Programmschnittstelle. Die oberen Tasten („Zurück“ – „Wiedergabe“ – „Weiter“) sollten genau diese Funktionen erfüllen und der Schieberegler sollte die Lautstärke ändern.

Noch ein paar Beispiele. Wenn Sie die Schaltflächen voluminöser gestalten, sehen sie eher wie Schaltflächen aus, sodass die Wahrscheinlichkeit höher ist, dass sie angeklickt werden:

Und der Ein-/Ausschalter sieht klar aus, wenn man ihn so macht:

Eine der größten Ängste von Designern besteht darin, als unoriginal zu gelten. Deshalb verzichten sie oft auf Techniken, deren Wirksamkeit längst erwiesen ist, und schaffen stattdessen „etwas Neues und Kreatives“. Natürlich besteht keine Notwendigkeit, sich auf ein offenes Plagiat einzulassen. Aber die Verwendung von Schnittstellenkonstruktionsmodellen, mit denen Benutzer bereits vertraut sind, ist eine sichere Möglichkeit, sie vorhersehbar zu machen. Welche Ressourcen nutzt Ihre Zielgruppe am häufigsten? Facebook, LiveJournal, Twitter, Amazon, Youtube? Verwenden Sie einen ähnlichen Stil in Ihrer Benutzeroberfläche, damit sie sich vertraut anfühlen. Wenn Sie beispielsweise auf YouTube abzielen, gestalten Sie das Hauptmenü vertikal und platzieren Sie es auf der linken Seite der Seite, wobei die Suchleiste oben zentriert ist.

3. Seien Sie minimalistisch.

Wenn Sie versuchen, so viele Kategorien, Menüs, Schaltflächen usw. wie möglich in die Benutzeroberfläche einzubauen, werden Sie ihr nur großen Schaden zufügen. Eine übermäßig überfüllte Benutzeroberfläche stellt ein großes Hindernis für das Verständnis des Benutzers dar. Alles, was in einem Satz beschrieben werden kann, kann nicht in drei Sätzen beschrieben werden. Zusätzliche Elemente und Unterkategorien auf Startseite auch nutzlos. Durch Tests können Sie feststellen, welche „extra“ sind und welche nicht. (Wie das geht, erfahren Sie am Ende des Artikels). Aber man sollte nicht auf etwas wirklich Wichtiges verzichten – wenn man das ohne jede Erklärung weiß (mehr zu den Tipps weiter unten) oder eine zusätzliche Schaltfläche für den Benutzer schwer verständlich ist, platzieren Sie sie dann in der Benutzeroberfläche, aber machen Sie es so prägnant wie möglich.

Schönes, aber gleichzeitig recht lakonisches Design der Anwendungsoberfläche. Es gibt nichts Überflüssiges oder Verwirrendes – nur das Notwendige und Auf den Punkt gebrachte.

4. Schnell laden.

Langsames Laden der Benutzeroberfläche wird den Benutzer irritieren und abstoßen, was dazu führt, dass er die Ressource zunehmend nicht mehr mag. Stellen Sie sicher, dass die Ladegeschwindigkeit für Ihre komfortable Nutzung optimal ist. Dies hängt zu einem großen Teil mit dem vorherigen Punkt zusammen – denn je weniger „schwere“ Elemente auf der Site vorhanden sind, desto schneller wird sie geladen.

Um Ihre Website schneller zu machen, nutzen Sie diese Tipps: 8 Möglichkeiten.

5. Alle wichtigen Optionen anzeigen.

Es ist besser, Dropdown-Listen und Menüs nur dort zu verwenden, wo dies nicht vermieden werden kann. Versuchen Sie in anderen Fällen, dem Benutzer sofort alle seine Fähigkeiten zu zeigen. Wenn einige der möglichen Aktionen ausgeblendet sind, kann der Benutzer möglicherweise nicht erraten, wo er klicken muss, um eine bestimmte Aktion auszuführen. Und wenn diese Aktionen gezielt sind („Produkt kaufen“, „Bestellung aufgeben“), dann können sie in Dropdown-Menüs überhaupt nicht ausgeblendet werden, sondern sollten im Gegenteil besonders hervorgehoben werden.

Ein Beispiel dafür, welches Dropdown-Menü das Recht auf Leben haben kann. Wenn Sie hier mit dem Cursor darüber fahren, werden Unterabschnitte in den Menüabschnitten geöffnet, was sehr praktisch ist. Aber zum Beispiel ist der Button „Kontakte“ sofort sichtbar, ohne zusätzliche Navigation.

Schaltflächen für bevorzugte Aktionen der Benutzer sollten sich von anderen abheben. Hier ist die Schaltfläche „In den Warenkorb“.

6. In der Lage sein, mit dem Benutzer zu kommunizieren.

Der Punkt ist, dass der Benutzer verstehen muss, welche Aktion gerade vom System verarbeitet wird. Der Vorgang des Sendens einer Nachricht sollte von der Anzeige der Phrase begleitet sein „Nachricht wird gesendet“, und das Ende dieses Prozesses ist "Nachricht gesendet". Kommt es zu einem Systemausfall, muss der Nutzer auch hierüber informiert werden, über die Gründe für den Fehler und darüber, was er in dieser Situation tun kann. Wenn die Ressource das Laden großer Informationsmengen erfordert, müssen Sie Fortschrittsbalken platzieren, damit der Benutzer den Status des Systems überwachen kann.

Für das folgende Experiment habe ich nur die ersten beiden Spalten des Registrierungsformulars ausgefüllt, die E-Mail-Zeile leer gelassen und absichtlich das falsche Passwort eingegeben. Fehler wurden vom System sofort angezeigt (rot hervorgehoben). Genau so sollte sich jede gute Schnittstelle verhalten.

7. Verwenden Sie unterschiedliche Stile für Schaltflächen mit unterschiedlichen Aktionstypen.

In jeder Benutzeroberfläche hat jede Schaltfläche ihren eigenen Zweck: irgendwohin gehen, ein Menü öffnen, in einem neuen Fenster öffnen, herunterladen und so weiter. Um Benutzer nicht zu verwirren, befolgen Sie diese Regeln:

1) Anklickbare und nicht anklickbare Elemente müssen unterschiedlich sein. Sie können sie nach Farbe, Schriftart und Größe hervorheben. Der Nutzer soll sofort sehen, welche Buttons er anklicken und irgendwo hingehen kann und welche nur zur Information dienen.
2) Markieren Sie mit Farbe oder Stil den Abschnitt des Menüs, in dem sich der Benutzer gerade befindet.

Auf dieser Seite erkennt man sofort, dass wir uns im Bereich „Leistungen“ befinden und dieser ist rot markiert. Zurück zu Punkt 5: Ich stelle fest, dass die Zielaktion hier der Kauf ist, sodass die Schaltfläche „Kaufen“ vor dem Hintergrund der anderen hervorgehoben und umfangreich ist.

8. Seien Sie attraktiv.

Funktionalität und Komfort sind gut, aber es gibt auch das grundlegende „schön/nicht schön“. Der Umgang mit der Benutzeroberfläche, die unter anderem auch optisch ansprechend ist, wird für jeden Benutzer viel angenehmer sein.

Aber vergiss das nicht Schönes Design– eine subjektive Sache. Sie werden es nicht schaffen, es für alle gleich schön zu machen, egal wie sehr Sie es versuchen. Stimmen Sie zu, dass Sie bei der Entwicklung einer Ressource für Oberstufenschüler und einer Ressource für Buchhalter unterschiedliche Designentscheidungen treffen müssen. Konzentrieren Sie sich daher zunächst auf Ihre Zielgruppe und deren Bedürfnisse.

Meiner Meinung nach sind diese Designbeispiele recht attraktiv. Im ersten Fall gefielen mir am meisten die ursprünglich erstellten Icons und die Dreidimensionalität des Bildes, im zweiten - Farbschema und Anordnung der Elemente.

9. Personalisierung zulassen.

Personalisierung ist die Fähigkeit, etwas „an Sie anzupassen“. Am häufigsten ist diese Funktion in Programmen, Diensten und Anwendungen zu finden. Der Benutzer kann beispielsweise die Schriftfarbe, den Symbolstil usw. ändern. Hintergrundbild, die Größe der Textblöcke nach Belieben (natürlich durch Auswahl aus den vorgeschlagenen Optionen).

Im Trello-Dienst können Sie den Hintergrund in eine andere Farbe oder ein anderes Bild ändern.

Und so können Sie Ihren Twitter-Account personalisieren:

10. Seien Sie tolerant gegenüber Benutzerfehlern.

Und doch wird es immer Benutzer geben, die diesen oder jenen Punkt beim Arbeiten mit der Oberfläche nicht sofort verstehen. Sie werden fehlerhafte Aktionen ausführen, und hier steht die Schnittstelle vor der Aufgabe, dafür zu sorgen, dass diese Fehler schnell behoben werden können. Wenn ein Benutzer versehentlich benötigte Informationen löscht, sollte ihm die Möglichkeit gegeben werden, diese wiederherzustellen. Ein Benutzer, der auf die falsche Seite gelangt ist, sollte durch Drücken der Zurück-Taste schnell zur vorherigen Seite oder zum vorherigen Abschnitt zurückkehren können. Um Fehlhandlungen zu verhindern, sollte die Schnittstelle den Benutzer noch einmal fragen, ob er dies wirklich tun möchte. Zum Beispiel, „Wenn Sie die aktuelle Seite schließen, wird der Dateidownload unterbrochen. Willst du das wirklich tun?. Übertreiben Sie es jedoch nicht mit solchen Fragen, sonst wird es nervig.

Zwei Beispiele aus Anwendungen: Beim Löschen oder Speichern von Daten fragt das System, ob Sie dies wirklich tun möchten. Es ist besser, Fragen dieser Art der Schnittstelle zuzuweisen, wenn der Benutzer eine Aktion ausführen möchte, die irreversible Konsequenzen nach sich ziehen kann (eine Aufgabe löschen – im ersten Beispiel), oder wenn es sich um eine möglicherweise bedeutungslose Aktion handelt (Speichern einer Gruppe ohne Mitglieder). - im zweiten Beispiel).

11. Sprechen Sie die Sprache des Benutzers.

Sämtliche Schnittstellentexte und etwaige Symbole müssen für die Zielgruppe der Ressource erstellt werden. Hier ist alles klar: Wenn Sie eine Bildungswebsite für Kinder im Vorschulalter erstellen, sollte der Text der Benutzeroberfläche in der Sprache der „Kinder“ verfasst sein. Wenn Sie ein Programm für fortgeschrittene Webmaster haben, können Sie bestimmte Begriffe getrost ohne Erklärung verwenden – die Zielgruppe kennt sie bereits. Und wenn es sich um einen Service für Einsteiger handelt, dann sollte die Sprache so einfach wie möglich sein.

12. Stellen Sie die optimale Anzahl an Auswahlmöglichkeiten bereit.

Je mehr Optionen Sie dem Benutzer anbieten, desto geringer ist die Wahrscheinlichkeit, dass er eine davon in Anspruch nimmt. Wenn es wirklich viele Optionen gibt und diese nicht reduziert werden können (z. B. ein Produktkatalog), dann nutzen Sie die Empfehlungsfunktion. Sie bieten beispielsweise zehn Produktoptionen auf einer Seite an, heben jedoch eine oder zwei davon in der Kategorie „Wir empfehlen“ hervor. Der Kunde wird auf diese Produkte achten, was ihm die Auswahl erleichtern kann.

Dies lässt sich auch über den Block „Bestseller“ umsetzen, wie im Beispiel gezeigt.

13. Geben Sie sanfte Hinweise.

Tooltips sind sehr gut. Sie helfen dem Benutzer, vollständig zu verstehen, was er selbst nicht herausfinden konnte. Die Hauptfrage bleibt, wie man solche Aufforderungen wirksam und nicht störend gestalten kann. Erinnern Sie sich an den Büroklammer-Helfer von frühere Versionen Microsoft Word? Das Unternehmen hat diese Funktion gerade deshalb deaktiviert, weil sie bei den Nutzern viele negative Emotionen hervorrief und kritisiert wurde.

Um sicherzustellen, dass Benutzer den Hinweisen treu bleiben, beachten Sie die folgenden Punkte:
- Schreiben Sie nicht zu viel Text hinein;
— Fügen Sie nicht für jede Schaltfläche Hinweise hinzu, sondern beschränken Sie sich auf diejenigen, bei denen der Benutzer möglicherweise wirklich Schwierigkeiten hat.
– Erlauben Sie dem Benutzer, die QuickInfo zu schließen oder die Tooltip-Funktion vollständig zu deaktivieren.

14. Verdunkeln Sie den Hintergrund unter modalen Fenstern.

Ein modales Fenster blockiert die Arbeit des Benutzers, bis er das Fenster schließt oder eine Aktion darin ausführt. Ein solches Fenster muss im Gesamtbild irgendwie hervorgehoben werden. Dies erreichen Sie am besten, indem Sie den darunter liegenden Hintergrund abdunkeln. Je dunkler der Hintergrund, desto mehr Gewicht wird auf das modale Fenster gelegt und der Benutzer wird verstehen, dass er darin einige Aktionen ausführen muss.

Auf einigen Websites habe ich gesehen, dass der Hintergrund unter dem Modalfenster völlig dunkel und unleserlich wurde. Dies ist nur ein Beispiel für eine fehlerhafte Benutzerfreundlichkeit einer Website, da es sich anfühlt, als befänden Sie sich auf einer ganz anderen Seite. Die folgenden Beispiele zeigen, wie Sie ein modales Fenster hervorheben können, indem Sie den Hintergrund abdunkeln, ihn aber dennoch lesbar lassen.

15. Halten Sie kurze Anmeldeformulare bereit.

Den Benutzer dazu zu bringen, sich zu registrieren, ist eine wichtige und eine der schwierigsten Schnittstellenaufgaben. Typischerweise wird versucht, die Registrierung an Orten zu vermeiden, an denen man sich nicht regelmäßig anmelden möchte oder sich noch nicht sicher ist. Und oft verweigern sie sogar den Kauf in einem Online-Shop, wenn dies erforderlich ist obligatorische Registrierung und suchen Sie auf anderen Websites nach ihrem Produkt. Um sicherzustellen, dass Benutzer den Registrierungsprozess nicht hassen, müssen Sie ihn so schnell und einfach wie möglich gestalten. Verwenden Sie keine langen Registrierungsformulare, bei denen Sie Ihre gesamte Biografie angeben müssen. Beschränken Sie sich auf die notwendigsten Zeilen:

Wenn Sie jedoch aus irgendeinem Grund gezwungen sind, Benutzern ein langes Formular mit vielen auszufüllenden Punkten anzubieten, teilen Sie es in einzelne Teile auf.

Schau dir das Beispiel an. Das Formular auf der linken Seite zeigt alle auszufüllenden Zeilen auf einmal und sieht daher umständlich aus. Ich möchte dieses Formular wirklich nicht ausfüllen. Und im Formular rechts gibt es möglicherweise genau die gleiche Anzahl an Fragen, diese sind jedoch in „Schritte“ unterteilt, sodass sie keine Irritationen hervorrufen.

16. Haben Sie einfache Grundsätze zum Ausfüllen von Feldern.

Fast jede Website bietet Benutzern etwas zum Ausfüllen. Zusätzlich zur Registrierung auf der Website kann es sich dabei um ein Formular für die Bestellung eines Produkts, die Aufforderung zur Angabe Ihrer Kontaktinformationen oder die Teilnahme an einer Umfrage handeln. Wenn das Ausfüllen des Formulars zu kompliziert oder zu stressig ist, wird es niemand ausfüllen. Hier einige wichtige Tipps:

1. Beim Ausfüllen verschiedener Felder („Stadt“, „Straße“, „Geburtsdatum“) wäre es sinnvoll, dem Benutzer über ein Dropdown (Dropdown-Menü) Hinweise zu geben, damit er dies nicht tun muss Geben Sie alles manuell ein, sondern wählen Sie einfach aus die richtige Option von der Liste.

2. Muss der Benutzer seine Daten dennoch manuell eingeben, dann prüft das System Zeile für Zeile, ob das Formular korrekt ausgefüllt wurde. Niemand wird es mögen, wenn das System nach jedem Füllfehler alle zuvor gefüllten Zeilen zurücksetzt.

3. Es ist besser, Feldnamen über den Eingabezeilen zu platzieren. Dies hat mit der visuellen Wahrnehmung des Menschen zu tun. Für einen Menschen ist es einfacher, Informationen von oben nach unten oder von unten nach oben wahrzunehmen als von links nach rechts oder umgekehrt.

4. Reduzieren Sie die Wahrscheinlichkeit, das Formular falsch auszufüllen, so weit wie möglich.
Stellen Sie sich die Situation vor. Sie beginnen mit der Eingabe Ihrer Telefonnummer in das Feld. Nach dem ersten Ausfüllen teilt Ihnen das System mit: „Die Telefonnummer muss im 10-stelligen Format eingegeben werden.“ Sie geben es erneut ein und das System sagt Ihnen: „Die Telefonnummer darf keine Bindestriche enthalten.“ Und hier werden Sie nervös und verfluchen diese Seite im Geiste (oder vielleicht auch nicht im Geiste). Das ideale Eingabeformular ist, wenn der Benutzer hineinschreiben kann, was er will, und das System ihm nicht „falsch“ sagt. Natürlich wird die Datenverarbeitung etwas schwierig sein, da Sie einige Anfragen manuell bearbeiten müssen. Ihr Hauptziel besteht jedoch darin, Bestellungen anzunehmen und nicht darin, ungeduldige Kunden auszusortieren.

17. Bieten Sie komfortable Steuerungsmöglichkeiten.

Wenn wir auf Websites hauptsächlich die Maus verwenden (mit Ausnahme der Standardfunktionen „Kopieren/Einfügen“ usw.), ist es in Programmen und Anwendungen oft bequem, sie über die Tastatur zu steuern. Ermöglichen Sie Benutzern, die Art der Steuerung auszuwählen, die sie bevorzugen, und zeigen Sie an, welche Funktion welcher Tastenkombination entspricht.

Wie teste ich eine Schnittstelle auf Benutzerfreundlichkeit?

Wie ich am Anfang des Artikels versprochen habe, erzähle ich Ihnen ein wenig über Schnittstellentests. Warum ist das so wichtig?
— Erstens könnten sich bei der Entwicklung der Schnittstelle Fehler eingeschlichen haben, die den Betrieb des gesamten Programms oder der gesamten Ressource beeinträchtigen würden;
- Zweitens werden Sie nie sofort das optimale Interface-Design erraten können, das von der Mehrheit der Benutzer perfekt wahrgenommen wird;
— Drittens kann die Schnittstelle auf einem Gerät (oder Browser) normal angezeigt werden, mit einem anderen jedoch völlig inkompatibel sein.

Tests können all diese Probleme lösen. Wie kann dies erreicht werden?

1. Manuell.

Die Durchführung solcher Tests erfordert viel Zeit und physische Ressourcen, da der gesamte Prozess von einer Person durchgeführt wird. Dies ist jedoch der Vorteil des manuellen Testens. Zur Umsetzung wird ein Tester benötigt, der Schritt für Schritt prüft, wie das System auf eine bestimmte Benutzeraktion reagiert. Am bequemsten geht das, indem Sie eine spezielle Tabelle erstellen, in die alle Daten eingetragen werden. Zum Beispiel dieses hier:

2. Auf automatisierte Weise.

Diese Testmethode wird mit speziellen Methoden durchgeführt Software, die die Handlungen einer lebenden Person während manueller Tests zu imitieren scheinen. Solche Tests erfordern keine menschliche Beteiligung, sodass die Geschwindigkeit ihrer Umsetzung zunimmt und die Geldkosten sinken. Hier gibt es ein großes „Aber“. Automatisierte Tests können keine 100-prozentigen Ergebnisse liefern, da sie nur anhand formaler Merkmale (die in das Programm geschrieben sind) durchgeführt werden und keine Möglichkeit bieten, Usability-Mängel zu finden, die nur von Menschen wahrgenommen werden können (z. B. die Farbschema der Benutzeroberfläche).

3. Verwendung von Fokusgruppen.

Meiner Meinung nach am meisten beste Methode Prüfung im Hinblick auf das Preis-Leistungs-Verhältnis. Es wird wie folgt durchgeführt:
— Es werden mehrere Fokusgruppen bestehend aus Ihren Zielbenutzern rekrutiert. Sie können Gruppen nach verschiedenen Kriterien einteilen: registrierte/nicht registrierte, regelmäßige/seltene Benutzer sowie nach verschiedenen demografischen Indikatoren (die zu Ihrer Zielgruppe passen);
— Jede Gruppe erhält Aufgaben, um bestimmte Aktionen auf Ihrer Website/Ihrem Dienst/Ihrem Programm auszuführen. Sie sollten den Probanden sagen, was sie tun sollen, aber nicht, wie. Das ist die Essenz des Testens – um zu sehen, mit welchen Aktionen Benutzer ihr Ziel erreichen.
- Anschließend analysieren Sie genau, wie die Probanden ihre Aufgaben erledigt haben – wo sie geklickt haben, welchen Links sie gefolgt sind, ob sie schnell gefunden haben, was sie gesucht haben usw.

Es gibt spezielle Dienste, mit denen Sie leicht Personen finden können, die solche Tests durchführen. Zum Beispiel Askusers, Wise Test, Usabilla.

Ein klares Beispiel für das Testen von Benutzeroberflächen

Benutzer, die Yelp nicht sehr oft nutzen, wurden an den Usability-Tests beteiligt. Ihnen wurden bestimmte Aufgaben übertragen (z. B. eine Reservierung in einem Restaurant vornehmen, ein Hotel für die Übernachtung während einer Reise auswählen usw.) und anschließend wurden ihre Aktionen analysiert. Hier einige Testergebnisse:

1. Wie sich herausstellte, verwenden Benutzer häufig lieber das Suchformular, um die Einrichtung zu finden, die sie interessiert, anstatt nach Kategorien zu suchen. Daher wurde beschlossen, eine Suche durchzuführen Schlüsselfunktion Auf der Seite. Von dieser Seite:

Es stellte sich so heraus:

2. Eine Umfrage unter getesteten Nutzern ergab, dass fast alle denken Seitenleiste Der Dienst ist sehr überladen und unbequem zu nutzen. Anfangs sah die Seite so aus:

Und hier ist das Layout der neuen Seite:

Sehen Sie sich die vollständigen Ergebnisse dieses Tests an.

Abschließend.

Denken Sie beim Entwerfen einer Benutzeroberfläche daran, dass eine übermäßige Beachtung einer Eigenschaft eine andere erheblich schädigen kann. Durch das Entfernen einiger Elemente im Bemühen um Minimalismus können Sie Probleme mit dem Verständnis des Benutzers für die Benutzeroberfläche verursachen. Wenn Sie die Eigenschaft eines attraktiven Designs umsetzen, laufen Sie Gefahr, es zu übertreiben und die Navigation in der Benutzeroberfläche zu schwierig zu machen. schnelles Laden. Daher besteht das Wichtigste (und Schwierigste) an dieser ganzen Geschichte darin, die perfekte Balance aller Schnittstelleneigenschaften aufrechtzuerhalten, damit sie wirklich benutzerfreundlich ist.

Es gibt viele Informationen darüber verschiedene Methoden Benutzeroberflächendesign, das Sie beim Erstellen einer Website oder Programmoberfläche verwenden können.
Ich habe eine Liste mit 8 Merkmalen zusammengestellt, die meiner Meinung nach der Schlüssel zu einer erfolgreichen Benutzeroberfläche sind.

Verfügbarkeit

Barrierefreiheit ist das wichtigste Gestaltungselement! Im Wesentlichen besteht der gesamte Zweck einer Benutzeroberfläche darin, Benutzern die Interaktion mit Ihrem System zu ermöglichen. Wenn eine Person nicht versteht, wie Ihre App funktioniert, ist sie nur verwirrt und letztendlich frustriert. Achten Sie daher bei der Gestaltung der Benutzeroberfläche Ihrer Anwendung oder Website darauf, dass sie für Ihren Benutzer intuitiv ist.

Was macht der Knopf? Bewegen wir den Cursor und lesen.

Minimalismus

Eine hohe Arbeitsbelastung ist der Feind einer guten Benutzererfahrung. Es ist leicht, in die Falle der Überverfügbarkeit zu tappen – wenn Sie immer mehr Steuerelemente hinzufügen, begehen Sie den großen Fehler, die Benutzeroberfläche zu überladen. Ihre Benutzeroberfläche wächst und der Benutzer wird gezwungen sein, viel zu lesen, um zu verstehen, was sich wo und zu welchem ​​Zweck befindet.
Sorgen Sie für Übersichtlichkeit, aber mit minimaler Unordnung. Wenn Sie die Gelegenheit in einem Satz statt in drei beschreiben können, dann tun Sie es. Wenn Sie ein Element mit einem Wort statt mit zwei beschriften können, tun Sie es. Sparen Sie die Zeit Ihrer Benutzer, auch wenn Komfort und Minimalismus viel Zeit erfordern, aber Ihre Bemühungen werden belohnt.

Schallpegel-Kontrollfeld in OS X. Kurz und zugänglich, nichts Überflüssiges.

Vertrauen

Viele Designer streben danach, Benutzeroberflächen „intuitiv“ zu gestalten. Doch was bedeutet eigentlich „intuitiv“? Das bedeutet, dass Benutzer die Fähigkeiten des Designs instinktiv verstehen und verstehen müssen. Aber wie kann man etwas Intuitives schaffen? Sie entwerfen Dinge, die Ihnen vertraut sind, und was für Sie offensichtlich erscheint, kann für Benutzer abschreckend und herausfordernd sein.
Bitten Sie Ihre Verwandten und Freunde, einige Aktionen über Ihre Schnittstelle durchzuführen, zum Beispiel ein Produkt zu bestellen, wenn Ihre Schnittstelle den Verkauf von etwas beinhaltet. Beobachten Sie jede Benutzeraktion und die Fehler, die er macht. Auf diese Weise kommt es zu einer Reihe von Auslassungen in der Benutzeroberfläche, die die Interaktion des Systems mit dem Benutzer erschweren. Und erst nach der Behebung der Problembereiche ist Ihre Schnittstelle einsatzbereit.

Intuitive GoPlan-Oberfläche. Beschriftungen auf den Registerkarten machen den Inhalt des Abschnitts für den Benutzer klar.

Empfänglichkeit

Reaktionsfähigkeit bedeutet mehrere Dinge. Die Website-Oberfläche sollte sehr schnell sein. Es ist ärgerlich, lange auf das Laden einer Seite zu warten. Stellen Sie sicher, dass die Seite auch auf langsamen Internetkanälen so schnell wie möglich lädt.
Reaktionsfähigkeit bedeutet auch eine ständige Form der Interaktion mit dem Benutzer. Die Schnittstelle sollte den Benutzer über das Geschehen informieren. Sie klicken beispielsweise auf die Schaltfläche „Nachricht senden“. Wenn eine Nachricht über AJAX gesendet wird, wäre es sinnvoll, Übermittlungsstatus wie „Sendet…“, „Nachricht gesendet“ oder „Fehler beim Senden der Nachricht“ anzuzeigen. Wenn der Benutzer den Fortschritt sieht, fühlt er sich ruhiger. Dies macht sich besonders bei langsamen Internetkanälen bemerkbar.

Während Gmail geladen wird, wird ein Fortschrittsbalken angezeigt.

Kontextgerecht

Berücksichtigen Sie bei bestimmten Designentscheidungen die Art des Seiteninhalts. Verschiedene Seiten kann Inhalte enthalten verschiedene Typen. Passen Sie jede Seite an den entsprechenden Inhalt an, erstellen Sie Steuerelemente, die dem Benutzer die Arbeit mit der Website erleichtern, und versuchen Sie, dies zu tun. Aber vergessen Sie nicht den Minimalismus!
Auf diese Weise gewöhnt sich der Benutzer nach der Arbeit mit Ihren Steuerelementen daran weitere Arbeit mit Ihren Ressourcen wird für ihn eine „normale“ Sache sein.


MS Office-Steuerelemente, unterschiedlich für jeden Inhaltstyp.

Attraktivität

Auch wenn dies etwas kontrovers sein mag, bin ich der Meinung, dass eine gute Benutzeroberfläche attraktiv sein sollte. Die benutzerfreundliche Oberfläche macht die Arbeit damit angenehm. Ja, Sie können die Benutzeroberfläche benutzerfreundlich, effizient und reaktionsschnell gestalten, und sie wird ihre Aufgabe perfekt erfüllen – aber wenn Sie diese Liste von Vorteilen noch attraktiver machen, wird die Arbeit damit reine Freude sein!
Aber es ist schwierig, eine Schnittstelle zu erstellen, die jedem gefällt. Jeder hat seine eigenen Vorlieben und was dem einen schön erscheint, wird den anderen abstoßen. Benutzer können jedoch in bestimmte soziale/demografische Gruppen eingeteilt werden, zu denen auch diejenigen in Ihrem gehören Zielgruppe. Beispielsweise wird die Benutzeroberfläche für die Gruppe „Junge Mütter“ völlig anders sein als die der „Verkaufsleiter für Autoteile“.

Effizienz

Die Benutzeroberfläche ist ein Verwaltungstool. Es bietet Zugriff auf verschiedene Funktionen Ihrer Anwendung oder Website. Eine gute Benutzeroberfläche sollte es dem Benutzer ermöglichen, die Aktion, die ihn interessiert, mit möglichst geringem Aufwand auszuführen.
Es ist sehr wichtig zu verstehen, was der Benutzer auf einer bestimmten Seite am häufigsten erreichen möchte. Es ist nicht erforderlich, alle Funktionen Ihres Projekts aufzulisten. Meistens interessiert der Benutzer nur einen kleinen Teil dieser Liste.
Stellen Sie sicher, dass der Benutzer die nützlichsten und am meisten benötigten Funktionen sofort finden kann. Dies wird seine Kommunikation mit dem Projekt erheblich vereinfachen.

Die drei am häufigsten durchgeführten Aktionen an Fotos in Apple iPhone in einer gemeinsamen Liste mit sofortigem Zugriff zusammengefasst.

Herablassung

Niemand und nichts ist perfekt. Seien Sie darauf vorbereitet, dass Benutzer bei der Arbeit mit Ihrem Projekt Fehler machen. Dies kann entweder durch Ihr Verschulden oder durch das Verschulden des Benutzers geschehen. Sie müssen mit allem kompetent umgehen mögliche Fehler- Dies wird einer der Hauptindikatoren für die Qualität Ihres Projekts sein. Bestrafen Sie den Benutzer nicht – entwickeln Sie eine „nachsichtige“ Benutzeroberfläche.
Sie müssen Daten vor versehentlichen Benutzeraktionen schützen. Wenn beispielsweise jemand wichtige Informationen löscht, bieten Sie eine Möglichkeit, diese wiederherzustellen. Wenn ein Benutzer zu nicht vorhandenen Seiten navigiert, erschrecken Sie ihn nicht mit Serverfehlern, sondern stellen Sie ihm stattdessen eine Liste alternativer Richtungen zur Verfügung, die er einschlagen kann.
Mir gefällt die Art und Weise, wie die Yandex 404-Fehlerseite gestaltet ist.

Wichtige Informationen in Gmail versehentlich gelöscht. Kein Problem, wir können die Aktion abbrechen!

Abschluss

Wenn Sie darauf hinarbeiten, eine dieser Eigenschaften zu erreichen, kann es zu Problemen bei der Erreichung der anderen kommen. Wenn Sie beispielsweise versuchen, die Benutzeroberfläche verständlicher zu gestalten, können Sie viele Beschreibungen und Erklärungen hinzufügen, was die Benutzeroberfläche letztendlich noch umständlicher und unbequemer macht. Oder das Reduzieren von Material, um Minimalismus zu erreichen, kann dazu führen, dass Dinge für den Durchschnittsbenutzer unverständlich werden. Das Erreichen des Gleichgewichts erfordert Geschick und Zeit, und bedenken Sie, dass Ihre Designentscheidungen wahrscheinlich von Projekt zu Projekt unterschiedlich sein werden. Was für den einen relevant ist, kann für den anderen nicht akzeptabel sein.
Ich würde gerne Ihre Kommentare zu diesem Artikel hören.

yadobr 14. Januar 2014 um 09:10

Grafisches Benutzeroberflächendesign

• Schnittstellen

Einführung

IN moderne Welt Milliarden von Computergeräten. Noch mehr Programme für sie. Und jede hat ihre eigene Schnittstelle, die die „Hebel“ der Interaktion zwischen dem Benutzer und dem Maschinencode darstellt. Es überrascht nicht, dass die Interaktion umso effektiver ist, je besser die Benutzeroberfläche ist.

Allerdings denken nicht alle Entwickler und sogar Designer darüber nach, eine praktische und verständliche grafische Benutzeroberfläche zu erstellen.

Für mich selbst begann ich damit, Fragen zu stellen: allgemeine Grundsätze, welche Schnittstellenelemente (EI) Erstellen Sie, welches Design sie haben sollen, wo sie richtig platziert werden sollen und wie sie sich verhalten sollen.
Im Folgenden werde ich versuchen, diese Fragen zu beantworten.

Allgemeine Grundsätze

Welche EI soll ich erstellen?

Wie sollte das EI-Design aussehen?

Tatsächlich ist EI-Design das Thema eines separaten Artikels. Hier müssen Sie alles berücksichtigen: von Farbe, Form, Proportionen bis hin zur kognitiven Psychologie. Einige Grundsätze sind jedoch dennoch erwähnenswert:

Wie positioniere ich die EI richtig auf dem Bildschirm?

Wie sollten sich EIs verhalten?

In Gewahrsam

Dieser Artikel erhebt nicht den Anspruch, der umfassendste Leitfaden zu den Prinzipien des Interface-Designs zu sein. GUI Benutzer ist ein umfangreiches Thema, das eng mit der Psychologie verknüpft ist und die Köpfe von Wissenschaftlern sowie Hunderte von Seiten in Büchern und Forschungsarbeiten beschäftigt. In einem so kleinen Format ist es nicht möglich, die Gesamtheit des angesprochenen Themas auszudrücken. Die Befolgung der Grundprinzipien wird es jedoch ermöglichen, benutzerfreundlichere Schnittstellen zu erstellen und den Designprozess selbst zu vereinfachen.
Vielen Dank für Ihre Aufmerksamkeit.

Literatur

Jeff Raskin, „Schnittstelle: neue Wege im Design von Computersystemen“
Alan Cooper, „Über die Schnittstelle. Grundlagen des Interaktionsdesigns“
Alan Cooper, „Psychiatrie in den Händen der Patienten“

In der modernen Welt gibt es Milliarden von Computergeräten. Noch mehr Programme für sie. Und jede hat ihre eigene Schnittstelle, die die „Hebel“ der Interaktion zwischen dem Benutzer und dem Maschinencode darstellt. Es überrascht nicht, dass die Interaktion umso effektiver ist, je besser die Benutzeroberfläche ist.

Allerdings denken nicht alle Entwickler und sogar Designer darüber nach, eine praktische und verständliche grafische Benutzeroberfläche zu erstellen.

Für mich selbst begann ich damit, Fragen zu stellen: Allgemeine Grundsätze, was Schnittstellenelemente (EI) Erstellen Sie, welches Design sie haben sollen, wo sie richtig platziert werden sollen und wie sie sich verhalten sollen.
Im Folgenden werde ich versuchen, diese Fragen zu beantworten.

Allgemeine Grundsätze

Welche EI soll ich erstellen?

Wie sollte das EI-Design aussehen?

Tatsächlich ist EI-Design das Thema eines separaten Artikels. Hier müssen Sie alles berücksichtigen: von Farbe, Form, Proportionen bis hin zur kognitiven Psychologie. Einige Grundsätze sind jedoch dennoch erwähnenswert:

Wie positioniere ich die EI richtig auf dem Bildschirm?

Wie sollten sich EIs verhalten?

In Gewahrsam

Dieser Artikel erhebt nicht den Anspruch, der umfassendste Leitfaden zu den Prinzipien des Interface-Designs zu sein. Grafische Benutzeroberflächen sind ein umfangreiches Thema, das eng mit der Psychologie verknüpft ist und Wissenschaftler beschäftigt sowie Hunderte von Seiten in Büchern und Studien beschäftigt. In einem so kleinen Format ist es nicht möglich, die Gesamtheit des angesprochenen Themas auszudrücken. Die Befolgung der Grundprinzipien wird es jedoch ermöglichen, benutzerfreundlichere Schnittstellen zu erstellen und den Designprozess selbst zu vereinfachen.
Vielen Dank für Ihre Aufmerksamkeit.

Literatur

Jeff Raskin, „Schnittstelle: neue Wege im Design von Computersystemen“
Alan Cooper, „Über die Schnittstelle. Grundlagen des Interaktionsdesigns“
Alan Cooper, „Psychiatrie in den Händen der Patienten“

Stanislaw Scharkow. Kapitel aus dem Buch „Shareware: professionelle Entwicklung und Förderung von Programmen“

Drei Grundprinzipien des Interface-Designs Computerprogramme, die ich im vorherigen Abschnitt beschrieben habe, sind sicherlich äußerst nützlich und effektiv, stellen aber dennoch eine ziemliche Herausforderung dar Allgemeine Regeln. Nicht jeder, geschweige denn ein unerfahrener Schnittstellenentwickler, wird in der Lage sein, seine Aufgabe effizient auszuführen, wenn er nur von ihnen geleitet wird. Es sind spezifischere Regeln erforderlich, die ein detailliertes Bild der Strategie zum Aufbau von Schnittstellen vermitteln würden.

Zu den am häufigsten in Büchern über HCI zitierten gehören die zehn sogenannten heuristischen Regeln des berühmten amerikanischen Interface-Design-Spezialisten Jakob Nielsen, die er zusammen mit einem anderen Forscher, Rolf Molich, entwickelt hat. Die ursprüngliche Formulierung dieser Prinzipien kann unter http://www.useit.com/papers/heuristic/heHristic_list.html gelesen werden. Dies sind die zehn wichtigsten Gebote eines jeden Entwicklers Computerschnittstellen, d. h. die Mindestkriterien, die die Schnittstelle eines Programms erfüllen muss.