20 Wegweiser auf dem Weg zum exzellenten UI (User Interface)-Designer

20 Wegweiser auf dem Weg zum exzellenten UI (User Interface)-Designer
Einleitung: Der Interface-Designer Joshua Porter hat in seinem Blog diesen Artikel veröffentlicht, in dem er 20 Prinzipien für das Design von Benutzeroberflächen auflistet. Diese Prinzipien müssen Designer bei ihrer Designarbeit befolgen und können ihnen eine bessere Orientierung bieten.
Die Existenz einer Schnittstelle fördert die Interaktion
Die Existenz der Schnittstelle verbessert die Interaktion zwischen Benutzern und unserer Welt. Sie können Benutzern dabei helfen, Beziehungen zu klären, zu veranschaulichen, zu ermöglichen und anzuzeigen. Dadurch können wir nicht nur Dinge effizient erledigen, sondern auch unsere Anwendungen verwalten und auf zugehörige Dienste zugreifen. Das Entwerfen von Benutzeroberflächen ist keine Kunst, aber es gibt Regeln, die befolgt werden müssen. Gut gestaltete Schnittstellen können unsere Verbindung zur Welt inspirieren, hervorrufen und stärken.
Klarheit ist eine sehr wichtige Aufgabe <br />Klarheit ist die erste und wichtigste Aufgabe im Interface-Design. Wenn Sie möchten, dass die von Ihnen entworfene Benutzeroberfläche effektiv ist und den Leuten gefällt, müssen Sie genau verstehen, was die Benutzeroberfläche ist und warum die Leute sie verwenden. Sie müssen sich über die Interaktion der Benutzeroberfläche mit dem Benutzer im Klaren sein, d. h., wenn der Benutzer sie verwendet, kann er vorhersehen, was passieren wird, und erfolgreich damit interagieren. Manche Schnittstellen sind nicht übersichtlich gestaltet und können zwar den temporären Bedürfnissen der Nutzer gerecht werden, verwirrende Schnittstellen haben jedoch keine Zukunft. Eine übersichtliche Benutzeroberfläche regt die Benutzer zur Interaktion an und veranlasst sie, weitere Aktionen auszuführen.
Schützen Sie die Aufmerksamkeit Ihrer Benutzer um jeden Preis. <br />Wir leben in einer Welt voller Unterbrechungen. Im Alltag gibt es ständig viele Dinge, die unsere Aufmerksamkeit ablenken und es uns schwer machen, uns zu konzentrieren und ruhig zu lesen. Der Schlüssel liegt also darin, Aufmerksamkeit zu erregen. Lassen Sie also nicht zu, dass das Durcheinander rund um Ihre wichtigen Apps die Aufmerksamkeit der Leute ablenkt ... Denken Sie daran, wie wichtig ein aufgeräumter Bildschirm ist, um Aufmerksamkeit zu erregen. Wenn Sie Anzeigen schalten müssen, tun Sie dies bitte, bevor die Benutzer sie lesen. Die Aufmerksamkeit der Nutzer zu schützen und zu respektieren, macht diese nicht nur zufriedener, sondern steigert auch die Wirksamkeit Ihrer Werbung. Daher ist der Schutz der Aufmerksamkeit des Benutzers eine Grundvoraussetzung für die Gestaltung einer guten Benutzeroberfläche.
Gewährleisten Sie Benutzerkontrolle <br />Menschen genießen es, Kontrolle über sich selbst und ihre Umgebung zu haben. Rücksichtslose Software entzieht den Benutzern die Kontrolle und zwingt sie zu ungeplanten Interaktionen, die für sie nicht nur unangenehm sind, sondern auch unbeabsichtigte Folgen haben können. Stellen Sie die Kontrollfähigkeit des Benutzers sicher und lassen Sie den Benutzer den Systemstatus selbst bestimmen. Ich denke, mit ein wenig Anleitung werden Sie Ihr gewünschtes Ziel erreichen.
Direkte Manipulation ist am besten
Wenn wir die physischen Objekte unserer Welt direkt manipulieren können, ist das beste Interface-Design gar nichts. Dies ist jedoch nicht einfach zu erreichen, da die von uns beim Entwurf der Benutzeroberfläche hinzugefügten Symbole häufig nicht erforderlich sind. Beispielsweise verwenden wir Schaltflächen, Grafiken, Optionen, Anhänge und andere umständliche Dinge übermäßig, sodass wir am Ende UI-Elemente manipulieren, anstatt die wichtigen Dinge zu tun. Und das ursprüngliche Ziel? Vereinfachung und Ermöglichung direkter Manipulation … Daher müssen wir beim Interface-Design so wenig Interface-Kapselung wie möglich verwenden und so viele natürliche menschliche Gesten wie möglich verstehen. Idealerweise sollte das Interface-Design schlicht sein und dem Nutzer das Gefühl einer direkten Bedienung vermitteln.
Jeder Bildschirm sollte ein Design haben . <br />Jeder von uns gestaltete Bildschirm sollte ein einzelnes Design haben. Dadurch können Benutzer nicht nur den wahren Wert des Designs erkennen, es ist auch leichter zu erlernen, bequemer zu verwenden und kann bei Bedarf einfacher hinzugefügt oder geändert werden. Der Bildschirm würde unübersichtlich werden, wenn er zwei oder mehr Designs unterstützen würde. So wie ein geschriebener Artikel ein einzelnes Thema und eine starke Argumentation haben sollte, sollte dies auch für unser Interface-Design gelten, das seine Daseinsberechtigung ist.
Sekundäre Aktionen beibehalten <br />Ein Bildschirm mit einer einzigen primären Aktion kann mehrere sekundäre Aktionen haben, aber diese müssen sekundär bleiben! Ihr Artikel existiert, damit die Leute ihn auf Twitter usw. teilen können. Es gibt also viel, was die Leute lesen und verstehen können. Daher kann das Einhalten sekundärer Aktionen die Sicht verbessern und dazu beitragen, dass die primäre Aktion ausgeführt wird.
Natürliche Übergänge <br />Nur wenige Interaktionen dauern ewig, daher berücksichtigt ein durchdachtes Design den nächsten Schritt der Interaktion. Überlegen Sie, wie die nächste Interaktion aussehen wird, und unterstützen Sie sie mit Design. Es ist ein bisschen wie ein Dialog und bietet die Grundlage für ein tiefergehendes Gespräch. Überfordern Sie Benutzer nicht, wenn sie die erforderlichen Schritte bereits abgeschlossen haben. Geben Sie ihnen Möglichkeiten, auf natürliche Weise vorzugehen, um ihre Ziele zu erreichen.
Wohlverdient <br />Menschen fühlen sich am wohlsten, wenn ihr Verhalten den Erwartungen entspricht. Wir empfinden eine gute Beziehung zu anderen Menschen, Tieren, Dingen oder Software, wenn ihr Verhalten stets unseren Erwartungen entspricht. Dies ist auch die Aufgabe von Design, bei dem es um Menschen geht. In der Praxis bedeutet dies, dass Benutzer in der Lage sein sollten, das Verhalten interaktiver Elemente vorherzusagen, ohne groß darüber nachzudenken. Wenn es wie eine Schaltfläche aussieht, sollte es auch wie eine Schaltfläche funktionieren. Designer sollten nicht versuchen, bei grundlegenden Interaktionsproblemen clever zu sein, sondern auf einer höheren Ebene kreativ sein.
Unterscheiden Sie, was wichtig ist. <br />Aus dem vorherigen Punkt folgt: Wenn visuelle Elemente sich unterschiedlich verhalten, sollten sie auch unterschiedlich angezeigt werden. Umgekehrt gilt: Wenn das Verhalten gleich ist, ist auch die Leistung gleich. Auch diese beiden Punkte sind immer notwendig. Um die Konsistenz zu wahren, verwenden Junior-Designer häufig dieselben visuellen Elemente (und verwenden dabei häufig Code wieder) für Elemente, die unterschieden werden sollten, obwohl es eigentlich angemessener wäre, sie unterschiedlich zu behandeln.
Verdeutlichen Sie die Hierarchie . <br />Wenn es eine klare Reihenfolge beim Durchsuchen visueller Elemente gibt, sollte ihre hierarchische Beziehung deutlich gemacht werden. Das heißt: Wenn Benutzer jedes Mal dieselben Dinge in derselben Reihenfolge durchsuchen, ohne dass eine klare Hierarchie besteht, können sie nicht erkennen, wo die wichtigsten Punkte liegen, und das Ganze wirkt letztendlich chaotisch und verwirrend. Es ist schwierig, eine klare Hierarchie beizubehalten, wenn sich das Design ständig ändert, da alle Elemente relativ zueinander sind. Wenn alles beansprucht wird, dann wird vieles unterbeansprucht. Wenn ein besonders wichtiges Element hinzugefügt werden soll, sollte der Designer in Erwägung ziehen, jedes einzelne Element zurückzusetzen, um wieder eine klare Hierarchie zu erreichen. Die meisten Menschen achten nicht auf die visuelle Hierarchie, aber sie ist der einfachste Weg, Ihr Design zu verbessern.
Richtige Organisation <br />Wie John Maeda in seinem Buch „Simplicity“ sagte, kann die richtige Organisation visueller Elemente die Dinge vereinfachen und anderen helfen, Ihren Ausdruck leichter zu verstehen, wie zum Beispiel die Einbeziehungsbeziehung von Inhalten. Eine auf Position und Richtung basierende Organisation kann die Beziehung zwischen Elementen auf natürliche Weise ausdrücken. Die ordnungsgemäße Organisation von Inhalten kann Benutzern viel Nachdenken ersparen. Sie müssen die Beziehung zwischen Elementen nicht herausfinden, da Sie sie bereits gezeigt haben. Zwingen Sie die Benutzer nicht, diese Unterscheidung zu treffen. Überlassen Sie es stattdessen den Designern, sie durch ihre Organisation deutlich zu machen.
Gehen Sie mit Farben vorsichtig um. <br />Die Farben der physischen Welt ändern sich, wenn sich das Licht ändert. Die Landschaft, die wir sehen, wenn die Sonne hell scheint und wenn sie untergeht, ist sehr unterschiedlich. Farben können durch die Umgebung leicht verändert werden. Deshalb sollte die Farbe nicht der ausschlaggebende Faktor bei der Gestaltung sein. Farbe kann ein Blickfang sein und als Orientierung dienen, sie sollte jedoch nicht das einzige Element sein, das den Unterschied macht. Wenn Sie einen langen Artikel lesen oder lange vor dem Computer sitzen, sollte mit Ausnahme der Inhalte, die hervorgehoben werden müssen, eine schlichte oder dunkle Hintergrundfarbe verwendet werden. Natürlich können, je nach Leser, auch knallige Farben zum Einsatz kommen.
Sequentielle Anzeige <br />Auf jedem Bildschirm wird nur der notwendige Inhalt angezeigt. Wenn Benutzer eine Entscheidung treffen müssen, stellen Sie ihnen genügend Informationen zur Verfügung, damit sie eine Auswahl treffen können. Auf dem nächsten Bildschirm finden sie die benötigten Details. Vermeiden Sie die Tendenz, zu viel zu erklären oder alles auf einmal zu präsentieren. Platzieren Sie die Auswahl nach Möglichkeit auf dem nächsten Bildschirm, um Informationen schrittweise anzuzeigen. Dadurch wird die Interaktion klarer.
Integrierte Hilfe
Bei einer idealen Benutzeroberfläche wäre Hilfe nicht notwendig, da die Benutzeroberfläche den Benutzer effektiv durch den Lernprozess führen würde. Etwas wie „Weiter“ ist eigentlich eine in den Kontext eingebettete „Hilfe“ und erscheint nur dann an der entsprechenden Stelle, wenn der Benutzer sie braucht.
Die Aufgabe des Designers besteht nicht darin, ein Hilfesystem dort zu erstellen, wo Benutzer es benötigen, sondern darin, die Verantwortung für die Ermittlung der Benutzerbedürfnisse auf die Benutzer zu übertragen und ihnen zu ermöglichen, im Hilfesystem Antworten auf ihre Fragen zu finden. Stattdessen sollten Sie sicherstellen, dass die Benutzer wissen, wie sie die von Ihnen bereitgestellte Schnittstelle verwenden, und ihnen die Möglichkeit geben, sich von der Schnittstelle anleiten zu lassen und von ihr zu lernen.
Moment der Wahrheit: Nullzustand
Die erste Erfahrung eines Benutzers mit einer Benutzeroberfläche ist äußerst wichtig und wird von Designern häufig übersehen. Damit sich Benutzer schneller an unser Design gewöhnen können, sollte sich das Design im Nullzustand befinden, also in dem Zustand, in dem nichts passiert. Dieser Status ist jedoch keine leere Leinwand, sondern sollte den Benutzern Orientierung und Anleitung bieten, damit sie sich schnell an das Design gewöhnen können. Zu Beginn wird es einige Reibungspunkte geben, aber sobald die Benutzer die Regeln verstanden haben, sind die Erfolgschancen hoch.
Wertvolle bestehende Probleme <br />Die Leute versuchen, bestehende Probleme zu lösen, nicht potenzielle oder zukünftige Probleme. Denn entwerfen Sie keine Schnittstellen für hypothetische Probleme, sondern beobachten Sie bestehende Verhaltensweisen und Designs und lösen Sie bestehende Probleme. Das ist sicherlich nicht das Aufregendste, aber es ist das Wertvollste, weil die Benutzer Ihre Schnittstelle verwenden.
Tolles Design wird übersehen <br />Tolles Design hat eine seltsame Eigenschaft: Es wird von seinen Benutzern oft ignoriert. Ein Grund dafür ist, dass das Design so erfolgreich ist, dass sich die Benutzer auf das Erreichen ihrer Ziele konzentrieren und die Benutzeroberfläche ignorieren, mit der sie konfrontiert sind. Am Ende erreichen sie ihre Ziele perfekt, sodass sie auf keine Situation reagieren müssen. Als Designer ist dieses Ziel erreichbar und wenn unsere Designs ausgezeichnet sind, werden wir dafür nicht viel Komplimente bekommen. Große Designer werden sich mit exzellenten Designs bereichern, denn zufriedene Nutzer schweigen oft.
Multi-Field-Design <br />Vision, Grafikdesign, Typografie, Texterstellung, Informationsstruktur und Visualisierung, alle diese Wissensgebiete sollten in das Design einfließen. Designer sollten hierüber Bescheid wissen und sich sogar gezielt damit beschäftigen. Sehen Sie dieses Wissen nicht geringschätzig aus, sondern lernen Sie viel daraus, um Ihre Arbeitsfähigkeit zu verbessern. Designer müssen eine langfristige Vision haben und in der Lage sein, von scheinbar zusammenhanglosen Dingen zu lernen, wie etwa: Veröffentlichen, Programmieren, Buchbinden, Skateboarden, Feuerwehrarbeiten und sogar Karate.
Design muss einen Zweck haben. <br />In den meisten Designbereichen liegt der Schlüssel zu erfolgreichem Interface-Design darin, dass Benutzer es verwenden. Es ist wie bei einem schönen Stuhl: Er ist zwar exquisit, aber das Sitzen darauf ist unbequem, die Benutzer werden ihn nicht benutzen und das Design ist fehlgeschlagen. Deshalb geht es beim Interface-Design nicht nur um die Gestaltung einer Nutzungsumgebung, sondern auch darum, ein nutzenswertes Kunstwerk zu schaffen. Es genügt nicht, dass eine Benutzeroberfläche die Eitelkeit ihres Designers befriedigt: Sie muss auch nützlich sein!
Dieser Artikel wurde von Gao Song, Zhang Yong und Wei Bing übersetzt.

<<:  Lösung für das Problem, dass die gesamte Seite nicht zentriert ist, wenn margin:0 auto in HTML verwendet wird

>>:  Implementierungsskript für geplante Datenbanksicherung unter Linux

Artikel empfehlen

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

In diesem Artikel wird der spezifische JavaScript...

Adaptive Breitentabelle für HTML-Seiten

Auf den Seiten von Webanwendungen werden häufig T...

Pygame-Code zum Erstellen eines Schlangenspiels

Inhaltsverzeichnis Verwendete Pygame-Funktionen E...

Vue-Interpretation der responsiven Prinzip-Quellcode-Analyse

Inhaltsverzeichnis Initialisierung initState() in...

Best Practices-Handbuch zum Speichern von Daten in MySQL

Inhaltsverzeichnis Vorwort Verwenden Sie keine Ze...

Grundkenntnisse zu MySQL – Lernhinweise

Datenbank anzeigen show databases; Erstellen eine...

CSS implementiert fünf gängige 2D-Transformationen

2D-Transformationen in CSS ermöglichen es uns, ei...

Designtheorie: Menschenorientiertes Green Design

Überlegungen zu den beiden Sichtweisen „menscheno...

Bietet hilfreiche Vorschläge zur Verbesserung des Website-Designs

<br />Gestalten Sie Ihre Website wissenschaf...

Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?

Bevor wir dieses Problem verstehen, schauen wir u...

So legen Sie Listenstilattribute in CSS fest (lesen Sie einfach diesen Artikel)

Eigenschaften des Listenstils Es gibt 2 Arten von...