Logo

Entwurfsmuster: Wie man einfache Interfaces erstellt

Kategorie:
Erstellt am: 9. Mai

Es gibt seit langem bewährte Entwurfsmuster, die uns helfen zu verstehen, was der Benutzer möchte und welche Lösung am besten geeignet ist. Diese werden als Entwurfsmuster bezeichnet. In diesem Artikel wird erklärt, wie Muster uns helfen, eine Schnittstelle angemessen zu gestalten. Anhand von Beispielen werden wir Funktionen wie Schaltflächen, Navigation, Akkordeons und Datumsauswahl untersuchen.

Dieser Artikel ist sowohl für neue als auch für erfahrene Designer hilfreich, die mehr darüber erfahren möchten, wie und wann sie interaktive Funktionen einsetzen. Wenn Sie länger als ein Jahr in der Branche tätig sind, wissen Sie, dass es kein Schwarz-Weiß-Denken gibt und dass es je nach Situation mehrere Möglichkeiten gibt, ein und dasselbe Problem zu lösen.

Buttons

Stellen Sie sich zunächst die folgende Frage: Welche der in der Grafik dargestellten Schaltflächen ist besser?

Die erste Schaltfläche wird für viele Menschen die naheliegendste Wahl sein. In der Tat handelt es sich um ein bekanntes Muster, das die meisten Menschen wiedererkennen werden; es ist die perfekte Lösung für viele Projekte. Wenn die Kunden jedoch den Kontext verstehen, sind sie weniger an der Form interessiert; daher muss der Designer nicht in stereotypen Begriffen denken. Der Kontext oder der Zustand einer Schaltfläche kann zeigen, dass es sich um eine Schaltfläche handelt. Wenn wir den Cursor auf eine interaktive Funktion auf einer Website setzen, wird er zu einem Kreis. Innerhalb des Kreises wird "Ansicht" geschrieben. Die Schnittstelle wird dadurch weniger unübersichtlich, und Sie können dem Benutzer deutlich zeigen, dass er es mit einer interaktiven Schnittstelle zu tun hat.

Welche der beiden Schaltflächen "Überspringen" und "Anmelden", die jeweils einen eigenen gestalterischen Akzent haben, ist nun besser?

Viele Leute würden wahrscheinlich für das erste Paar stimmen. Das habe ich früher auch so gemacht. Aber versetzen Sie sich in die Lage eines Nutzers und beobachten Sie, was diese Schnittstelle von Ihnen erwartet. Sie wollen auch, dass wir bei der Registrierung Daten sammeln, was sie auch betonen. Sie können diesen Schritt aber auch überspringen. Entspricht das den Anforderungen? Ja, denn viele Nutzer zögern, sich auf der Website zu registrieren und persönliche Daten anzugeben. Wir entscheiden für den Nutzer, welche Aktion Priorität hat, wenn wir diese Hierarchie von Schaltflächen zeigen. Aber warum lassen wir ihn nicht selbst entscheiden? Diese Strategie wird heutzutage immer häufiger angewandt. Bei Nike sehen wir zum Beispiel zwei identisch gefüllte Schaltflächen: Registrieren und Mehr erfahren.

Apple verwendet die Schaltflächen "Mehr erfahren" und "Kaufen" auf die gleiche Weise. Letztere ist keine große rote Schaltfläche, die schreit: "Jetzt kaufen! Jetzt kaufen!". Auch hier kann der Benutzer entscheiden, was im Moment wichtiger ist.

Und noch eine Frage: Wenn Sie zwischen Abbrechen und Speichern wählen müssten, was würden Sie zuerst tun?

Es ist schwer zu sagen, ob Abbrechen oder Speichern zuerst angezeigt werden soll. Nehmen wir an, ich gebe einen Befehl. Was ist wichtiger: eine Schaltfläche in der Benutzeroberfläche für die gewünschte Aktion zu haben oder alle Antwortalternativen zu sehen und dann zu entscheiden? Designer entscheiden sich häufig für die zweite Möglichkeit, aber das ist unwichtig.

Nach Untersuchungen der Nielsen Norman Group sind sowohl das erste als auch das zweite Muster für die Kunden verständlich. Android und iOS sind zwei Beispiele dafür, da sie beide Methoden verwenden. Sie haben alle ihre eigenen Vorteile.

Mir gefällt, wie Apple dies in macOS handhabt. Der Schwerpunkt liegt auf dem Abbrechen der Aktion, wenn Sie eine irreversible Aufgabe zugewiesen bekommen (wie das Löschen von Daten aus dem Papierkorb). Der Benutzer muss sich darüber im Klaren sein, dass er nichts, was er löscht, wiederherstellen kann.

Wenn Sie also mit Schaltflächen arbeiten, gehen Sie wie folgt vor:

  • Bestimmen Sie Ihre Aufgabe, d.h. welche Aktion die konstruierten Schaltflächen dem Benutzer vorgeben sollen.
  • Versuchen Sie zu zeigen, dass es sich bei der Schaltfläche um eine Schaltfläche handelt, indem Sie ihre Verwendung in der Schnittstelle oder ihren Zustand betrachten.
  • Prüfen Sie, ob der Text auf den Schaltflächen lesbar ist.

Navigation

Auch den Abschnitt über die Navigation beginne ich mit einer Beispielfrage. Nehmen wir den Navigationsblock einer Website und ein Logo (ein Kreis auf der Folie). Ist es besser, das Logo in die Mitte der Navigation oder auf die linke Seite zu setzen?

Beide Optionen scheinen gleichwertig zu sein. Verschiedene Untersuchungen haben jedoch ergeben, dass die linke obere Ecke immer noch vorzuziehen ist. Hierfür gibt es zahlreiche Erklärungen. Da wir von links nach rechts lesen, ist das Logo das erste, was wir sehen. Es ist auch eine Markierung, die dem Nutzer zeigt, woher er kommt.

Das NNG-Forschungszentrum führte ein interessantes Experiment zu diesem Thema durch. Die Nutzer wurden aufgefordert, einen bestimmten Artikel in einem Online-Geschäft zu kaufen. Gleichzeitig enthielt die Liste keine bekannten Geschäfte, sondern nur lokale Unternehmen. Die Logos einiger Websites befanden sich auf der linken Seite der Navigation, während andere in der Mitte platziert waren. Es wurden Waren gekauft, aber die Benutzer hatten keine Ahnung, was in dem Versuch getestet wurde. Nach einer Weile wurden sie nach dem Namen des Unternehmens gefragt, von dem sie die Ware im Internet gekauft hatten. Die Teilnehmer erinnerten sich sowohl an die Marke als auch an den Firmennamen besser, wenn sich das Logo auf der linken Seite befand. Folglich ist es wahrscheinlich, dass das Logo auf der linken Seite deutlich besser ist - vor allem bei bekannten Unternehmen. Das hält natürlich viele Websites nicht davon ab, ihr Logo in die Mitte der Navigationsbox zu setzen.

Stellen Sie sich eine Website vor, die Seitenlinks in einem Menü im Stil eines Burgers anzeigt. Ist es besser, die gesamte Navigation im Burger auszublenden oder einen Teil der Elemente zu entfernen und sie dem Benutzer anzuzeigen?

Untersuchungen haben ergeben, dass es besser ist, einen Teil der Navigation hervorzuheben. Wenn Sie wissen, welche Abschnitte die Benutzer zuerst besuchen, können Sie ihnen diese Abschnitte möglicherweise sofort anzeigen. Allerdings muss der Benutzer auf das Symbol klicken und eine umfangreiche Datenbank nach bestimmten Informationen durchsuchen. Daher ist es sinnvoll, diesen Prozess zu beschleunigen und ihm sofort die gewünschten Informationen zu liefern.

Dies gilt nicht nur für mobile Schnittstellen, sondern auch für Desktop-Schnittstellen. In dem folgenden Beispiel muss ein Verzeichnis unabhängig geöffnet werden, um es zu betrachten. Wenn sich der Fokus der Aufmerksamkeit eines Benutzers verschiebt, irritiert ihn das. Wenn beim Öffnen eines Menüs eine Dropdown-Liste angezeigt wird, ist das für den Benutzer nicht immer angenehm. Danach muss es von links nach rechts weitergehen, und so weiter. Daher ist es vorzuziehen, möglichst das gesamte Menü anzuzeigen.

Wenn es um die Navigation geht, ist die Anzahl der Menüpunkte nicht zu vernachlässigen. Je weniger Optionen der Benutzer hat, desto leichter fällt ihm die Entscheidung. Im Internet werden 7-9 Punkte als ideal angesehen. Wenn es jedoch viele Abschnitte, Unterkategorien und Unter-Unterkategorien gibt (wie auf einem Marktplatz), ist es nicht immer möglich, alles in einer minimalen Anzahl von Punkten unterzubringen.

In diesem Fall gibt es verschiedene Möglichkeiten. Es gibt mehrere Ebenen von Menüs, die erstellt werden können. Die Website der New York Times ist ein Beispiel dafür. Es gibt eine horizontale Navigation und einen weiteren Burger oben links auf der Startseite. Wenn Sie darauf klicken, erscheint ein breites Menü mit weiteren Abschnitten unten und weiteren Abschnitten oben. Die Tatsache, dass die New York Times eine riesige Ressource ist, rechtfertigt dies. Aus diesem Grund haben die Designer der Website die wichtigsten Elemente auf der Horizontalen platziert und gleichzeitig darauf hingewiesen, dass es noch weitere Komponenten gibt. Der Zugriff auf das Menü erfolgt über eine Schaltfläche in der oberen linken Ecke. Wenn der Benutzer mit der primären Navigation unzufrieden ist, erhöht diese Platzierung die Wahrscheinlichkeit, dass er das Menü sieht und klickt.

Nach der Drei-Klick-Regel muss der Nutzer mit drei Klicks zu den gewünschten Informationen gelangen. Es gibt jedoch keine Daten, die dies belegen. Die Nutzer sind heute bereit, wesentlich mehr Zeit mit der Suche nach Informationen zu verbringen. Wenn wir beispielsweise in einem Online-Shop nach einem Produkt suchen, gehen wir in die entsprechende Abteilung und stöbern dann weiter in vielen Unterkategorien, bis wir es finden. Dann müssen wir weiter filtern, sortieren, zu Vergleichen hinzufügen, in den Warenkorb legen, zur Kasse gehen, versenden usw. Das scheint nicht in drei Klicks zu passen. Beschränken Sie sich also nicht auf diese Vorgabe. Es ist besser, die Navigation einfach und übersichtlich zu halten, damit der Nutzer schnell zu seinem Ziel kommt.

Vielleicht könnten Sie die Schnittstelle so aufteilen, dass der Benutzer zuerst aus 7-9 Kategorien auswählt, dann aus weiteren 7-9, dann aus weiteren 7-9, und so weiter, bis er das Ende erreicht. Allerdings sollte man es nicht zu kompliziert machen, indem man eine Hierarchie mit zehn bis zwanzig Ebenen aufbaut - das ist kaum praktikabel. Fünf Katalogsegmente sind meiner Meinung nach durchaus akzeptabel.

Was aber, wenn es sehr viele Unterkategorien gibt und Sie diese nicht sinnvoll in 7-9 Positionen unterteilen können? Hier gibt es zwei grundlegende Strategien, die Ihnen helfen können: Die erste ist eine Liste von Namen in alphabetischer Reihenfolge. Der zweite zu berücksichtigende Punkt ist die Terminologie. Das kann man bei Amazon sehen. Werfen Sie einen Blick auf den Bereich Wohnkultur, der alphabetisch nach Unterkategorien geordnet ist. Das erleichtert dem Nutzer die Suche nach den Produkten. Die wichtigste Voraussetzung ist, dass der Name korrekt und für den Benutzer erkennbar ist. Sie sollten keinen Jargon, keine Umgangssprache und kein Fachvokabular verwenden.

An einigen Stellen bewundere ich wirklich Amazons Ansatz. Die Macher haben ein paar der beliebtesten Unterkategorien an den Anfang der Liste gesetzt und den Rest in alphabetischer Reihenfolge angeordnet. Das ist eine hervorragende Lösung für das Problem, weil man so die beliebtesten Dinge zuerst anzeigen kann.

Avic folgt diesem Beispiel. Apple-Produkte machen den größten Teil des Umsatzes des Unternehmens aus. Daher macht es keinen Sinn, diese Produkte aufzuteilen oder zu verstecken; stattdessen werden sie aus dem Katalog entfernt und nach oben verschoben, wodurch sich die Anzahl der Kategorien auf der Hauptseite erhöht. Auch hier scheint es dem Benutzer schwer zu fallen, eine Entscheidung zu treffen. Wenn Apple jedoch die Haupteinnahmequelle ist, erscheint es logisch, diesen Bereich sofort zu integrieren.

Die betrachteten Beispiele basieren auf einer einfachen Navigation. In der Praxis ist jedoch nicht jede Aufgabe so. Unter Umständen müssen Sie etwas völlig Ungewöhnliches tun. So haben Sie vielleicht schon einmal eine Website eines Entwicklers in Frankreich gesehen, auf der Sie mit den Pfeiltasten der Tastatur ein Auto steuern müssen, das zwischen den Menüpunkten fährt, um zwischen den Abschnitten zu wechseln. Dies ist eine seltene Erscheinung, und obwohl es mir so vorkommt, als würde es ein etwas anderes Problem angehen, ist es erfolgreich - und schafft dabei eine Umgebung um das Projekt herum.

Hier ist ein weiteres Beispiel für ein beeindruckendes Menü von der Website des Warschauer Puppentheaters. Die gesamte Navigation erfolgt über symbolische Bilder, die an Fäden zu hängen scheinen und sich bewegen, wenn man auf sie zeigt, ähnlich wie Marionetten. Dadurch wird der Benutzer stärker in das Navigationsspiel einbezogen. In der Tradition des Puppentheaters erzeugt dieser Ansatz eine reizvolle Atmosphäre.

Gehen Sie die folgenden Punkte durch, bevor Sie mit der Navigation arbeiten:

  • Gibt es etwas, das auf der Website nicht zu sehen sein soll? Wenn es sich um einen umfangreichen Dienst handelt, sollten Sie überlegen, wie Sie dem Benutzer das Leben leichter machen können: alphabetische Reihenfolge, wichtige Dinge an erster Stelle, ausgeklügelte Breadcrumbs, usw.
  • Finden Sie eine Möglichkeit, dem Benutzer zu zeigen, wo er sich gerade befindet und wohin er gehen kann. Dies ist von entscheidender Bedeutung, denn Sie sollten immer Zustände für alle interaktiven Elemente entwerfen: normal, bei Hover, aktiv, nicht verfügbar und im Ladeprozess.
  • Legen Sie fest, ob das Menü oben verankert werden soll und was es enthalten soll. Bei einer zweisprachigen Website wird sich beispielsweise ein Sprachumschalter höchstwahrscheinlich in der oberen rechten Ecke befinden. Sollten Sie jedoch die Option zum Wechseln der Sprache entfernen, wenn der Besucher bereits begonnen hat, auf der Seite nach unten zu scrollen?

Akkordeon

Kommen wir nun zum Akkordeon. Schauen wir uns zunächst zwei verschiedene Versionen dieses Oberflächenelements an: eine mit dem nach unten zeigenden Chevron und eine mit dem Plus-Symbol. Welche Version des Symbols ist Ihrer Meinung nach besser? Dann stellt sich die Frage, ob das Symbol rechts oder links vom Text platziert werden soll, unabhängig von seinem Typ.

Studien zufolge erkennen Nutzer Akkordeons und klicken eher auf den Text. Sie klicken in 25 % der Fälle auf das Symbol, wenn es sich auf der rechten Seite befindet, und in 75 % der Fälle auf den Text, wenn es sich auf der linken Seite befindet. Bedeutet das, dass das Symbol nicht auf der rechten Seite stehen muss? Nein, es ist durchaus akzeptabel, es dort zu platzieren. In Wahrheit ist es egal, wo wir es platzieren; wichtig ist, dass wir es irgendwo platzieren und es groß genug machen, damit man darauf klicken kann.

Der einzige Unterschied besteht darin, dass der Vorgang etwas länger dauert, wenn man auf das Symbol klickt. Das liegt daran, dass die Menschen versuchen, genau auf das Symbol zu klicken. Daher ist es wichtig, ein solches Element so groß zu gestalten, dass man bequem damit arbeiten kann. Ich würde sogar vorschlagen, den anklickbaren Bereich zu vergrößern und nicht das Symbol selbst. Das Projekt "Dia", bei dem die Icons so groß wie das Akkordeon selbst sind, gefällt mir. Diese Seite ist meiner Meinung nach einfach und bequem für alle Benutzer. Jede Zelle ist anklickbar und nimmt in diesem Beispiel die gesamte Bildschirmbreite ein.

Wenn es um die Richtung des Pfeils geht, sollte man ihn nicht immer nach rechts richten. Viele Benutzer haben gelernt, dass ein nach rechts gerichteter Pfeil bedeutet, dass sie zu einer anderen Seite gehen. Nur der winzige Bereich, der Text und das Symbol im Beispiel unten sind anklickbar, und am unteren Rand befindet sich eine Schaltfläche mit einem Pfeil, der in dieselbe Richtung zeigt wie der des Akkordeons. Die Aktionen sind jedoch unterschiedlich. Wenn Sie auf das Akkordeon klicken, öffnet sich der Block nach unten, und wenn Sie auf die Schaltfläche klicken, werden Sie zu einer anderen Seite weitergeleitet. Das mag manchen verwirren.

Dem Benutzer ein Akkordeon ohne Erkennungszeichen zu geben, ist ebenfalls nicht gut. Eine Person muss wissen, mit welchem Aspekt der Schnittstelle sie interagiert. Sie müssen entweder ein Symbol verwenden oder zeigen, dass das Element anklickbar ist. Das Einzige, was im obigen Beispiel auf die Anklickbarkeit hinweist, ist das sich verändernde Aussehen des Cursors, wenn man mit der Maus über den Text fährt. Er ist jedoch nicht sichtbar; er muss größer sein, oder es sollte ein Begriff wie "Lesen" verwendet werden. Sonst kann der Benutzer das Akkordeon nicht von der fettgedruckten Textauswahl unterscheiden.

Wie ich bereits sagte, müssen Sie alle interaktiven Funktionen in Form von Zuständen denken. Wenn es zum Beispiel ein Positiv gab, sollte es sich ändern - oder zumindest ein Minus werden. Als Ergebnis wird der Benutzer erkennen, dass die Dropdown-Box ausgeblendet werden kann.

Es ist unpraktisch, wenn das Symbol nach dem Anklicken verschwindet. Der Benutzer erwartet, dass er den Block genau an der Stelle schließen kann, an der er ihn zuerst geöffnet hat. Schließlich kann es sein, dass ihm die erscheinende Antwort nicht gefällt und er sie sofort löschen möchte. Jetzt, da die Schaltfläche neu positioniert wurde, muss er sie erneut anvisieren. Hier ist ein ungewöhnliches Beispiel für ein Akkordeon plus, das nicht anklickbar ist. Dies gilt nur für die mobile Navigation. Wenn der Benutzer zuvor mit der Desktop-Version gearbeitet hat, erkennt er möglicherweise nicht, was falsch ist, und hält es für einen Fehler, wenn er zur mobilen Version wechselt.

Stellen Sie sich vor, Sie sollen entscheiden, ob die offenen Elemente beibehalten oder ausgeblendet werden sollen, wenn der Benutzer andere öffnet. Einerseits wird sich das Symbol nicht bewegen, wenn die Elemente nicht geschlossen werden, weil keine Elemente übertragen werden. Andererseits kann der Benutzer bei zu viel Text Schwierigkeiten haben, zur nächsten Frage zu navigieren. Daher kann es sinnvoll sein, überflüssige Blöcke automatisch zu schließen. Bedenken Sie jedoch die Anzahl der Antworten in einem bestimmten Akkordeon.

Das Akkordeon ist ein Mehrzweck-Element. Es kann nicht nur für den FAQ-Bereich, sondern auch für die Kassenseite verwendet werden. Laut Baymard akzeptieren mehr als 30 % der Online-Händler weltweit Zahlungen über Kassen im Akkordeon-Stil, wobei der Prozentsatz in den Vereinigten Staaten mit 56 % deutlich höher ist.

Diese Lösung hat mehrere Vorteile. Der Benutzer kann zunächst die folgenden Schritte sehen, die er ausführen muss (z. B. welche Zahlungssysteme akzeptiert werden). Sie müssen dazu nicht einmal auf "Weiter" klicken oder zu einer anderen Website navigieren. Zweitens macht es das Akkordeon einfach, von Block zu Block zu navigieren, um Daten zu überprüfen, ohne die Seite neu laden zu müssen und zu riskieren, dass sie verloren gehen. Wenn der Benutzer im ersten Bereich einen Fehler gemacht und ihn im zweiten Bereich entdeckt hat, kann er ihn hier leicht korrigieren. Bei einem herkömmlichen Checkout müssten Sie zur vorherigen Seite zurückkehren und riskieren, dass die ausgefüllten, aber noch nicht an den Server gesendeten Informationen verloren gehen.

Sie können auch ein Akkordeon verwenden, um Menüs zu erstellen. In diesem Fall müssen Sie jedoch vorsichtig sein. Die übergeordnete Kategorie des Akkordeons im folgenden Beispiel hat keinen Inhalt. Wenn Sie also wiederholt auf die Elemente klicken, um das Akkordeon zu schließen, bleibt der gesamte Inhaltsbereich leer. In dieser Situation ist es auch sinnvoll, einige Informationen in diesen Seitenabschnitt einzufügen.

Das fantastische, schöne Akkordeon beim Hovern ist ein weiteres Beispiel. Es ist sehr anpassungsfähig. Obwohl es in der mobilen Version kein Akkordeon gibt, handelt es sich im Wesentlichen nur um Banner, die zu anderen Links übersetzen.

Ein anderes, extremeres Beispiel, das von offensichtlichen Bewunderern einer solchen Lösung geschaffen wurde, ist ein Akkordeon innerhalb eines Akkordeons. Die gesamte Website kann mit diesen Blöcken navigiert werden. Es ist erstaunlich.

Bei mobilen Schnittstellen sind Akkordeons auch für die Gestaltung von Websites unerlässlich. Sie machen es einfach, Informationen zu verbergen. Die gesamte Navigation auf der Website von The Guardian erfolgt über diese Blöcke. Das einzige, was mich stört, ist, dass die übergeordneten Kategorien nicht anklickbar sind. Der Benutzer hat nicht die Möglichkeit, alle Sportnachrichten zu sehen. Nur die Unterkategorien "Fußball", "Kricket", "Rugby" und so weiter sind verfügbar. Andererseits hat The Guardian die übergeordneten Kategorien auf die Titelseite verlagert, was eine vernünftige Lösung für ein solches Problem darstellt.

Das Wall Street Journal hingegen verfolgte einen ganz anderen Ansatz. Sie haben die Kategorien nicht auf der Hauptseite platziert und stattdessen alles in einen einzigen Block gepackt. Wenn ein Benutzer eine Kategorie besucht, gibt es jedoch den Hauptabschnitt. Von dort aus kann man zum übergeordneten Hauptbereich oder zu einer bestimmten Unterkategorie navigieren.

Lassen Sie uns das Akkordeon zusammenfassen:

  • Fragen Sie sich immer von Anfang an, ob Sie wirklich ein Akkordeon brauchen. Das "Honorar" des Benutzers ist schließlich der Klick. Manchmal kann man darauf verzichten und alle Informationen auf einmal liefern.
  • Überlegen Sie, welches Symbol Sie verwenden wollen. Es kann alles sein, aber das Wichtigste ist, dass es einfach zu benutzen ist.
  • Wo soll das Symbol platziert werden? Das hängt stark davon ab, wie sich alles anpasst. Wenn Sie zum Beispiel eine lange Zeile haben, ist es besser, das Symbol auf der linken Seite zu platzieren. Dann müssen Sie sich keine Sorgen machen, dass das Symbol verschwindet, wenn Sie das Akkordeon zu einem kleinen Block zusammenklappen und den Text in die nächste Zeile verschieben.
  • Wählen Sie, ob alle Blöcke standardmäßig geschlossen werden sollen oder ob der erste Block offen bleiben soll. Dies hängt von Ihrer Aufgabe und den Zielen des Benutzers ab.

Datum

Die Wahl des Datums ist der nächste entscheidende Faktor, der bei der Diskussion über Entwurfsmuster zu berücksichtigen ist. Ich beginne mit einem Vergleich, wie es üblich ist. Benutzer von iOS 14, die die Weckzeit eingestellt haben, werden mit diesem Szenario vertraut sein. Was ist die bessere Option?

Mir gefällt die erste Variante, da sie attraktiver ist und die Schrift nicht so stark verzerrt wie die zweite. Die erste Variante hat jedoch einen potenziellen Nachteil: Sie lässt sich nur schwer verändern und verdrehen. Schließlich ist der Platz begrenzt, und der Benutzer muss sich genau an die Stelle anpassen. Es ist erwähnenswert, dass Apple beschlossen hat, beide Alternativen offen zu lassen.

Überlegen Sie sich schon bei der Erstellung, wofür Sie die Datumsauswahl verwenden werden: einen Datumsbereich für die Buchung von Hotels oder die Planung von Ausflügen, ein Datum zum Einstellen eines Geburtstags oder einer Erinnerung, ein Datum zur Angabe der Uhrzeit für einen Kinobesuch oder für die Bestellung eines Taxis. Dies wird sich auf den Rest des Prozesses der Konzeption und Gestaltung dieser Funktion auswirken.

Meiner Meinung nach ist es von entscheidender Bedeutung, die vielen Möglichkeiten zu beschreiben, mit denen der Benutzer im Moment Informationen erhält. Die vier Möglichkeiten sind ein Kalender, eine Trommel (eher eine mobile Lösung), ein herkömmlicher Eingabebereich und eine Dropdown-Liste. Schauen wir uns ein paar verschiedene Lösungen an, die alle mit Flugtickets zu tun haben. Wizz Air zum Beispiel verwendet einen Kalender, aber einen doppelten, damit der Kunde zwei Monate auf einmal sehen kann.

Aber wenn ja, welches Startdatum sollte angegeben werden? Es scheint, dass es der nächste Tag sein sollte, und die Website zeigt dies auch an. Studien haben jedoch gezeigt, dass die Nutzer nicht immer zufrieden sind, wenn ein Datum bereits festgelegt wurde. Die Leute kaufen selten Flugtickets für den nächsten Tag. Daher muss diese "Standardeinstellung" höchstwahrscheinlich geändert werden.

Qatar Airlines ist sogar noch weiter gegangen und hat ein Start- und Enddatum bekannt gegeben. Heute ist der erste Tag des Programms. Ist diese Auswahl erforderlich, wenn sich der Benutzer um 23:58 Uhr anmeldet? Das zweite Problem ist, dass es keine Unterscheidung zwischen dem Start- und Enddatum und allen dazwischen liegenden Tagen gibt. Alles ist im gleichen Farbton gehalten. Die Nutzer wollen Anker für die Daten sehen, wenn sie eine lange Reise planen, die an einem Ort beginnt und an einem anderen endet. Die Menschen sind es gewohnt, dass man ihnen sagt, dass wir an bestimmten Orten beginnen und enden. So kann der Benutzer sicher sein, dass die Daten korrekt sind.

Heute gibt die UIA sowohl das Abfahrts- als auch das Rückreisedatum im Kalender an. Wir haben bereits festgestellt, dass dies nicht ideal ist. Es ist auch schwierig, ein Reiseziel auszuwählen, weil man erst auf die Liste klicken, dann zur Auswahlliste gehen, nach dem Land suchen usw. muss. Das ist ein langer und kurvenreicher Weg. Aber der Hauptfehler scheint mir ein anderer zu sein. Die Ausgabe der Suchergebnisse ist leer. Wenn ich zwei Ziele und Daten auswähle, kann es sein, dass mir mitgeteilt wird, dass für dieses Ziel keine Flüge verfügbar sind. Wenn ich zum nächsten Datum im Kalender übergehe, sind keine Flüge verfügbar. Die Überbuchung ist die einzige Methode, um herauszufinden, wann sie ankommen werden. Ich werde wahrscheinlich einen Drittanbieter-Aggregator verwenden, der die Daten zahlreicher Fluggesellschaften auf einfache und bequeme Weise sammelt.

Der Kalender von SkyUp ist einer meiner Favoriten. Er enthält große Felder, die einen großen Kalender öffnen, und es ist einfach, das Start- und Enddatum der Reise festzulegen. Es werden die Tage angezeigt, an denen es keine Flüge für einen bestimmten Ort gibt, und Sie können den Preis für jedes Ticket sofort sehen. Das ist sehr nützlich, denn so können Sie einen Tag und einen Flug auswählen, noch bevor Sie auf "Bestätigen" klicken.

Wenden wir uns nun der Trommel zu. In ein solches Element können Sie fast alle Informationen eingeben, einschließlich Uhrzeit, Datum und andere Listen. Die Benutzer können mit diesem Werkzeug leicht navigieren und zwischen den Werten springen.

Es folgt das Eingabefeld. Wir müssen das Format berücksichtigen, wenn wir dem Benutzer erlauben, ein Datum über die Tastatur einzugeben. Zum Beispiel kann "12.10.2021" in verschiedenen Regionen der Welt unterschiedlich interpretiert werden: für manche ist es der 12. Oktober, für andere der 10. Dezember. Dies ist vor allem im Fall der folgenden Beispielseite für die Anmietung eines Autos in einem anderen Land von Bedeutung. Der Nutzer muss sich des Formats bewusst sein, mit dem er es zu tun hat. In diesem Fall raten mehrere Experten, dass der Benutzer in Textform schreibt. Es stellt sich jedoch die Frage der Lokalisierung: Würde das System erkennen, dass es sich nicht um das globale Englisch, sondern um eine nicht standardisierte Sprache handelt? Immerhin kann der Benutzer beim Schreiben Abkürzungen verwenden. Sie müssen den Benutzer entweder anweisen, wie er dies tun soll, oder andere Lösungen verwenden, z. B. ein Kalendersymbol daneben platzieren. Bei dieser Methode kontrolliert der Benutzer, wie die Daten eingegeben werden.

Wenn die Dropdown-Liste bescheiden ist, wie z. B. Monate, ist daran nichts auszusetzen. Mit der Zeit kann sich jedoch eine übermäßig lange Liste ansammeln. Nehmen wir die Website Ukrzaliznytsia. Das Zeitlimit beträgt eine Stunde, und die Liste enthält 24 Einträge. Vielleicht ist hier ein gemischter Ansatz am besten, bei dem der Benutzer einige Ziffern eingibt und dann aus einer Liste auswählt.

Dies ist genau der Ansatz, der in Google Calendar verwendet wird. Wenn Sie beginnen, 16 in das Eingabefeld zu schreiben, erscheinen die Unteroptionen um 16:00, 16:15, 16:30 und 16:45 (entsprechend dem vom System festgelegten Schritt von 15 Minuten).

Lassen Sie uns die Kalender zusammenfassen:

  • Denken Sie beim Erstellen eines Kalenders daran, das Datumsformat, die Lokalisierung und die Sprache festzulegen und zu bestimmen, wo der Tag und der Monat stehen sollen.
  • Es ist zu beachten, dass der Wochenbeginn je nach Region und persönlicher Vorliebe variiert - in einigen Fällen ist es der Sonntag und nicht der Montag.
  • Überlegen Sie sich, ob die Felder einen Standardwert haben sollten, wenn sie für die Benutzer sinnvoll sind, oder ob Sie alles am Anfang leer lassen sollten.
  • Entscheiden Sie, ob nicht verfügbare Tage angezeigt werden sollen und können. In einigen Fällen kann es hier technische Einschränkungen geben. Ich verweise Sie auf die oben genannten Beispiele. SkyUp hat vielleicht nicht viele Flüge, und Qatar Airlines hat um eine Größenordnung mehr. Aus diesem Grund ist es nicht immer möglich, Fluginformationen in den Kalender zu ziehen, bevor der Benutzer eine Anfrage an den Server sendet.
  • Bestimmen Sie, ob der nächste Eingabeschritt automatisch geöffnet werden soll. Zum Beispiel öffnet sich bei Wizz Air nach dem Ausfüllen des Abflugdatums automatisch das Feld für das Enddatum, während Sie bei UIA das Feld für das zweite Datum erneut anklicken müssen.
  • Was soll der Benutzer zuerst eingeben: das Datum oder die Uhrzeit? Nehmen wir an, Sie möchten sich für einen Englischkurs anmelden. Sie haben bestimmte Arbeitszeiten und möchten vor oder nach diesen Zeiten zum Unterricht kommen, egal an welchem Tag. Was ist das primäre Ziel: die Eingabe der Uhrzeit und die Anzeige der verfügbaren Tage für einen bestimmten Termin oder etwas anderes? Das wirft eine weitere Frage auf: Wie zeigt man ausgewählte und nicht verfügbare Tage oder andere Kennzeichnungen an? Im Google-Kalender zum Beispiel ist alles durch farbige Markierungen gut getrennt: Veranstaltungen, Feiertage, Einladungen zu Veranstaltungen usw. Aber in diesem Szenario müssen Sie über die Möglichkeit nachdenken, eine Legende zu erstellen, die alle Tags beschreibt, die Sie erstellt haben.

Zur Erinnerung: Design Patterns müssen die Probleme der Benutzer lösen

Fasst man alles oben Gesagte zusammen, so ist die wichtigste Empfehlung einfach: Bevor man Design Patterns anwendet, sollte man sicherstellen, dass man weiß, welche Aufgaben der Benutzer erledigen soll und wie man sie löst. Auf dieser Grundlage können Sie eine Schnittstelle mit schönen und vor allem benutzerfreundlichen Schaltflächen, Navigation, Akkordeons, Daten und anderen Funktionen erstellen.

Copyright © 2022 webmousedesign.de
crossmenu