Heuristische Prinzipien für mobile Schnittstellen

Veröffentlicht: 2022-03-11

Jakob Nielsen beriet und lehrte Usability Engineering in Mensch-Computer-Interaktionen, als er begann, viele Muster aufzugreifen. Daher sammelte und veröffentlichte er 1994 eine Reihe von Bewertungsprinzipien für Usability-Heuristiken, die das widerspiegelten, was er gelernt hatte. Heute, nach fast 25 Jahren und der Verwandlung des Computers in ein Smartphone, stehen die Prinzipien von Nielsen noch immer fest.

Human-Centered Design hat die Bedeutung des Benutzers verstärkt, und Designprozesse haben sich entsprechend angepasst; Obwohl die Prinzipien von Nielsen für alle Bildschirmtypen universell geblieben sind, liegt der Schwerpunkt mit der kontinuierlichen Zunahme der Nutzung mobiler Geräte auf mobilen Schnittstellen.

Durchsuchen Sie das Internet nach heuristischen Prinzipien, und Sie werden eine lange Liste leicht unterschiedlicher Sätze finden. Nachfolgend finden Sie eine kuratierte Sammlung von zehn Prinzipien, die von Vordenkern für benutzerorientiertes Design und Benutzerfreundlichkeit inspiriert sind.

Usability-Heuristiken beginnen mit den Benutzeranforderungen

Bevor man sich auf die Prinzipiensammlung einlässt, muss erkannt werden, dass die Bedeutung des Benutzers weiter zunimmt. Die Neugestaltung von GOV.UK ist, obwohl es sich um eine Regierungswebsite handelt, ein hervorragendes Beispiel für ein nutzergeführtes Produkt, das aufgrund seiner Benutzerfreundlichkeit weltweit Anerkennung fand.

Ben Terrett, Design Director des Projekts, begann mit einer Reihe von Designprinzipien für Benutzeroberflächen, die von der Produktstrategie bis hin zu visuellen Designansätzen reichten. Der allererste Grundsatz war wie ein Nordstern für den Erfolg des Produkts: „Beginnen Sie immer mit den Bedürfnissen der Benutzer. Wenn Sie nicht wissen, was der Benutzer braucht, werden Sie nicht das Richtige bauen. Recherchieren, Daten analysieren, mit Nutzern sprechen. Machen Sie keine Vermutungen. Zeigen Sie Empathie für die Benutzer und denken Sie daran, dass das, wonach sie fragen, nicht immer das ist, was sie brauchen.“

Heuristische Prinzipien für Usability-Bewertungen helfen dabei, festzustellen, wo ein UI-Design nicht benutzerfreundlich ist.

#1 Transparenz der Systemstruktur

Der Vorgang, bestimmte Elemente und Strukturen sichtbar zu machen, damit der Benutzer den Kontext ausreichend versteht.

Die Benutzeroberfläche sollte dem Benutzer das Gefühl geben, dass er die Kontrolle hat. Diese Fragen sollten sie leicht beantworten können: „Wo stehe ich jetzt?“ und "Wo kann ich von hier aus gehen?" Wenn ein System transparent ist, hat der Benutzer die Kontrolle, Entscheidungen darüber zu treffen, was als nächstes passieren wird. Sie gewinnen Autonomie und damit Vertrauen in die Nutzung der Schnittstelle.

Das Navigationsmenü wird für Usability-Heuristiken erweitert
Ein Navigationsmenü verwandelt sich in ein Hamburger-Menü, das anzeigt, wo die Informationen später zu finden sind. (Design von Gal Shir)

#2 Unmittelbarkeit des Aktions-Feedbacks

Die Antwort auf die Aktion eines Benutzers, die bestätigt, dass das System die Anforderung erhalten hat.

Jede Benutzeraktion sollte eine sofortige Schnittstellenreaktion haben. Sofortiges Feedback gibt dem Benutzer die Gewissheit, dass das System das tut, was erwartet wird. Nick Babich, UX-Spezialist beim Smashing Magazine, nutzt die Fortschrittsanzeige als gutes Beispiel für einen klar kommunizierten Status einer Aktion. Er argumentiert, dass es den Benutzer visuell darüber informiert, dass seine Aktion akzeptiert wurde und das System die nächste Aktion in Kürze anzeigen wird. Ohne eine Anzeige bleibt der Benutzer mit Unsicherheit und Frustration zurück, was zu einer Unterbrechung der Fahrt führen kann.

Fortschrittsanzeige signalisiert Aktionsfeedback
Eine einfache Animation bestätigt, dass die Pull-to-Refresh-Aktion empfangen wurde und der Inhalt unten aktuell ist. (Design von Jiangxiaobei)

#3 Bewusstsein für Fehler

Eine ausreichende Menge an Informationen sowie Optionen, die der Benutzer ergreifen kann, wenn er einen Weg eingeschlagen hat, den er lieber nicht gegangen wäre.

Irgendwann interagieren Benutzer ausnahmslos mit einer mobilen Schnittstelle auf eine Weise, die nicht beabsichtigt war, und befinden sich in einer frustrierenden und unproduktiven Situation, die ihre Bedürfnisse nicht unterstützt. Barrieren und Sackgassen sind häufige Gründe, warum eine Reise vorzeitig endet. Die Benutzeroberfläche sollte genügend Indikatoren bereitstellen, um dem Benutzer zu helfen, den Fehler zu erkennen, zu diagnostizieren und zu beheben.

Unterstützung sollte immer leicht zugänglich sein; es ist jedoch schwierig, ein Gleichgewicht zu finden. Zu viele Optionen können zu einer kognitiven Überlastung führen. Der Benutzer sollte ein klares Verständnis dafür haben, wie ein Fehler zu beheben ist, und verstehen, wie er in Zukunft verhindert werden kann.

Ein Fehlerzustand in den Designprinzipien der Benutzeroberfläche
Der leere Zustand in dieser mobilen Schnittstelle erklärt, warum der Benutzer den Bildschirm sieht, und bietet zwei Aktionen, die den Fehler beheben. (Design von Murat Mutlu)

#4 Nutzungsflexibilität

Eine Oberfläche, die von Benutzern mit unterschiedlichem Erfahrungsschatz intuitiv und effizient genutzt werden kann.

Ein interaktives mobiles Erlebnis muss unabhängig von der Benutzerführung von außen sein. Unabhängig davon, ob der Benutzer die mobile App zum ersten Mal oder zum hundertsten verwendet, sollte die Benutzeroberfläche beide Szenarien berücksichtigen.

Ein erfahrener Benutzer sollte Zugriff auf Abkürzungen und ein tieferes systemisches Verständnis haben, während ein neuer Benutzer niemals in einfacher Verwirrung im Stich gelassen werden sollte. Dank der Flexibilität in der Benutzeroberfläche kann der Benutzer eine Fahrt auswählen und steuern, die seinen Fähigkeiten und Bedürfnissen am besten entspricht.

Die kognitiven Engineering-Prinzipien von Jill Gerhardt-Powal raten Designern, „gegebenenfalls Daten mehrfach zu codieren – das System sollte Daten in unterschiedlichen Formaten und/oder Detailebenen bereitstellen, um die kognitive Flexibilität zu fördern und Benutzerpräferenzen zu erfüllen.“ Eine Benutzeroberfläche, die entweder überwältigend oder restriktiv ist, sorgt für ein frustrierendes Erlebnis.

Nielsen-Heuristik zur Nutzungsflexibilität
Ein neuer Benutzer sollte in die Toolfunktionalität eingeführt werden, aber ein erfahrener Benutzer würde nie QuickInfos für Aktionen sehen, die er regelmäßig ausführt. (Design von Lakshmi Karuppiah)

#5 Vertrautheit mit universellen Erfahrungen

Verwendung von Gestaltungselementen, die sich auf allgemeine menschliche Erfahrungen und Erwartungen beziehen.

Die Geschichte der GUI begann, als Apple im ersten benutzerfreundlichen Design von Computerschnittstellen Referenzen aus der realen Welt verwendete. „Lisa“ wurde mit Elementen wie einem Ordnersymbol entworfen, um die Dateiorganisation anzuzeigen. Diese physischen Referenzen waren nützlich, als digitale Interaktionen den meisten Menschen unbekannt waren, aber mit zunehmender digitaler Kompetenz müssen universelle Referenzen nicht mehr so ​​wörtlich sein.

Gemeinsame Benutzererwartungen haben sich entwickelt, da wir mehr Zeit mit der Interaktion mit Bildschirmen verbringen. Wir erwarten, dass ein „+“ zu weiteren Informationen erweitert wird und ein Navigationsmenü entweder oben oder unten auf einem mobilen Bildschirm angezeigt wird. Durch das Anzapfen von Referenzen, die die Mehrheit der Benutzer versteht, wird eine Benutzeroberfläche intuitiv.

Heuristische Prinzipien beruhen auf Vertrautheit
Diese beiden Symbole sind sofort erkennbar und weisen eindeutig auf eine Aktion hin, die die Mehrheit der Benutzer verstehen kann. (Design von <a href=“https://dribbble.com/pixelamiri

#6 Einschränkung der Informations- und Designästhetik

Die Schaffung eines minimalen Designs, das unnötige Elemente eliminiert, die ein optimiertes und zielgerichtetes Erlebnis beeinträchtigen könnten.

Eine allgemeine Faustregel für alle digitalen Interaktionen lautet, Verwirrung zu vermeiden. Um Entscheidungszeiten und Fehler zu reduzieren, fordert Jill Gerhardt-Powal Designer dazu auf, Unsicherheiten zu reduzieren, indem sie Daten klar und deutlich darstellen. Dies kann erreicht werden, indem unnötiger Inhalt entfernt wird und indem Farbe, Layout und Typografie verwendet werden, um einen Benutzer durch einen Bildschirm zu führen. Benutzer sollten nicht abgelenkt, sondern ausreichend angeleitet werden, um ihren Zweck leicht zu erreichen.

Ben Terrett verwendete oft das vierte der Designprinzipien von GOV.UK: „Do the hard work to make it simple.“ Er glaubte, dass es Sache des Designteams ist, die Probleme, mit denen sie sich befassen, sowie den Prozess, der zur besten Lösung führt, um ein intuitives, informatives und erfolgreiches Benutzererlebnis zu bieten, vollständig zu verstehen. Einige ihrer Methoden werden in dieser Fallstudie beschrieben.

Gov.uk
Die British Government Digital Services schlüsselten Informationen auf, um festzustellen, was Benutzer wissen müssen, und erstellten visuelle Designs, die alles Unnötige eliminierten, um die Klarheit der Informationen zu unterstützen. (Design von Government Digital Services)

#7 Priorisierung der Funktion gegenüber der Form

Designentscheidungen werden davon bestimmt, was ein Element tun soll, anstatt seinen visuellen Stil zu priorisieren.

„Wenn Sie denken, dass etwas clever und raffiniert ist, passen Sie auf – es ist wahrscheinlich Zügellosigkeit.“ — Don Norman, produktiver Produktdesigner und Autor von „The Design of Everyday Things“

Die visuelle Gestaltung einer Oberfläche sollte immer mit definierten Funktionen beginnen. Wenn Stil und Trends priorisiert werden, kann das Ergebnis schön aussehen und viel Aufmerksamkeit auf sich ziehen, aber letztendlich zu einer unzusammenhängenden Benutzererfahrung führen. Visuelle Form kann ein dysfunktionales Design nicht retten.

Visuelle Hinweise können verwendet werden, um einen Benutzer in die Funktionalität der App zu lenken. Das Gesetz von Fitt besagt, dass Form, Abstand und Größe einen Benutzer dazu bringen können, eine Situation zu verstehen und die gewünschte Aktion auszuführen. Hier unterstützt und verstärkt die Form die Funktion.

Die Form folgt der Funktion in der Usability-Heuristik
Diese digitale Bordkarte berücksichtigt, wie ein Reisender die Informationen benötigt, und verwendet visuelle Techniken, um die Informationen funktionsfähig zu machen. (Design von Marin Begovic)

#8 Verfügbarkeit von Informationen

Die strategische Platzierung von Schnittstellenelementen an den Fingerspitzen der Benutzer, sodass sie sich nicht auf das Gedächtnis verlassen müssen.

Es ist einfacher, etwas zu erkennen, als es aus dem Gedächtnis abzurufen. Wenn eine mobile Schnittstellenfunktion auf einer Information oder dem Verständnis eines Systems beruht, das nicht allgemein bekannt ist, sollten die Informationen zugänglich sein, damit der Benutzer leicht darauf zugreifen kann.

Eines der heuristischen Prinzipien von Nielsen schlägt vor, dass der Designer „die Speicherlast des Benutzers minimieren sollte, indem er Objekte, Aktionen und Optionen sichtbar macht. Der Benutzer sollte sich nicht Informationen von einem Teil des Dialogs zu einem anderen merken müssen. Gebrauchsanweisungen für das System sollten sichtbar oder jederzeit leicht abrufbar sein.“

Jill Gerhardt-Powal schlägt vor, „Daten auf niedrigerer Ebene zu einer Summierung auf höherer Ebene zusammenzuführen, um die kognitive Belastung zu verringern“. Sie erklärt auch, dass „Anzeigenamen und Bezeichnungen kontextabhängig sein sollten, was die Erinnerung und Wiedererkennung verbessert“. Es ist wichtig, sich darüber im Klaren zu sein, dass ein Benutzer, der zum ersten Mal eine Benutzeroberfläche sieht, nicht über das Wissen und die Vertrautheit mit den Informationen verfügen wird, die die Designer haben. Die Wiederholung von Informationen mag einem erfahrenen Team übertrieben erscheinen, kann aber für neue Benutzer unerlässlich sein.

Uber stellt Informationen in der App zur Verfügung
Die App von Uber bietet drei Ebenen von Taxidiensten und macht jede Option für den Benutzer im Moment des Bedarfs leicht zugänglich. (Design von Uber)

#9 Zuverlässigkeit der Konsistenz

Die Verwendung konsistenter und standardisierter Elemente wie Wörter, Situationen und Handlungen, um eine zusammenhängende Erfahrung zu schaffen.

Menschen fühlen sich von Mustern angezogen – wir benutzen sie, um der Welt einen Sinn zu geben. Erstellen Sie Muster innerhalb einer mobilen Benutzeroberfläche und sie wird zu einem Lehrmittel für Benutzer, um zu lernen, was sie erwartet und wie sie mit dem Schnittstellendesign interagieren können.

„Dies ist keine Zwangsjacke oder ein Regelbuch. Jeder Umstand ist anders.“ Die Designprinzipien von GOV.UK besagen, dass eine Benutzeroberfläche konsistent, aber nicht einheitlich sein sollte. Wie Jill Gerhardt-Powal wiederholt: „Neue Informationen sollten in vertrauten Rahmen präsentiert werden (z. B. Schemata, Metaphern, Alltagsbegriffe), damit Informationen leichter aufgenommen werden können.“

Die Nielsen-Heuristik fordert Konsistenz
Googles verstärkter Fokus auf Design manifestiert sich in detaillierten Richtlinien für alle seine UI-Designs. (Design nach Material)

#10 Vernünftige Redundanz

Die ständige Praxis der Reflexion während des Designprozesses, um sicherzustellen, dass die Designprinzipien und Usability-Heuristiken der Benutzeroberfläche mit dem Zweck und den Benutzeranforderungen des Produkts übereinstimmen.

Jakob Nielsen gab als erster zu, dass es unmöglich ist, allgemeingültige Spezifika für das UI-Design darzustellen. Beispielsweise könnten sich zwei seiner heuristischen Prinzipien möglicherweise widersprechen – Nr. 6: Alle Informationen bereitstellen, die ein Benutzer benötigt, um eine Entscheidung zu treffen, und Nr. 8: Unnötiges eliminieren.

Es obliegt dem heuristischen Evaluator und dem Designteam, die besten Entscheidungen für ihre einzigartigen Anwendungsfälle zu treffen. Wenn das Produkt auf den Menschen ausgerichtet und auf die Bedürfnisse der Benutzer ausgerichtet ist, wird das Team durch dieses Wissen unterstützt und hat ein starkes Gefühl für die Zielstrebigkeit beim Treffen dieser Entscheidungen.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • Heuristische Analyse für UX - So führen Sie eine Usability-Evaluierung durch
  • Die Gestaltungsprinzipien und ihre Bedeutung
  • Die Bedeutung von Human-Centered Design im Produktdesign
  • Erstellen eines UI-Styleguides für bessere UX
  • Best Practices und Fehler beim Design mobiler Apps