So verwenden Sie UI-Entwurfsmuster
Entwurfsmuster sind optimale Lösungen für gängige Entwurfsprobleme. Wenn allgemeine Probleme um eine Gemeinschaft geworfen werden und gelöst werden, entstehen häufig gemeinsame Lösungen. Letztendlich steigen die Besten von ihnen über den Lärm hinaus, identifizieren sich selbst und werden verfeinert, bis sie den Status eines Designmusters erreichen.
Ich würde ein Designmuster nicht als einen Trend im Webdesign bezeichnen, vielmehr scheinen Designmuster eher darauf ausgerichtet zu sein, wie gängige Designs im Nachhinein klassifiziert werden, anstatt neues Terrain zu schmieden oder zu schauen, wohin die Dinge gehen.
Wie sollten Sie sich UI-Entwurfsmustern nähern?
Wir verwenden immer Designmuster, wenn Sie mit ihnen nicht vertraut sind, haben Sie wahrscheinlich nicht erkannt, dass sie überall um Sie herum sind.
Was ist mit dem klassischen Beispiel, dass zu viele Inhalte auf einer Seite angezeigt werden? Wir richten unser Augenmerk auf "Tabs", ein Designmuster, das es uns ermöglicht, alle gewünschten Inhalte zu liefern, ohne den Benutzer in einem Meer von Links verschwinden zu lassen.
Die typischen Vorteile für die Verwendung eines Entwurfsmusters sind:
- Zeigen von Anfängern, wie man Best Practices im Webdesign verwendet;
- lernen, sich an das kollektive Verständnis von Designern anzupassen;
- Ermöglichung einer besseren Kommunikation, Verringerung des Risikos, das mit ungewohnten Entscheidungen verbunden ist;
- Reduzierung des notwendigen Zeit- und Kosten-Workflows zur Durchführung spezifischer Aufgaben;
- Vermeidung von verschwendeter Zeit, um etwas zu bauen, das vorher gebaut wurde;
- dem Benutzer eine Erfahrung geben, mit der er vertraut und vertraut ist (die Art von Designmustern).
Im obigen Beispiel sehen wir Clicky-Medien mit zwei sehr beliebten Designmustern heute:
- Navicon - ein universelles Symbol für Menüs, auch bekannt als Site Navigation, wird im modernen Webdesign immer beliebter, wurde aber bereits vollständig an mobile Geräte angepasst.
- Parallax Scrolling - ein einzigartiges Design-Muster, das eine Seite mit einem einfachen Scroll-Mechanismus ermöglicht, aber auch eine Liste von Hintergrund-Sprites, die der Seite ein lebendiges Gefühl verleihen.
Obwohl sowohl das Navicon-Menü als auch das allgemeine Menü oben auf der Seite ähnliche Auswahlmöglichkeiten aufweisen - es wäre sehr ablenkend, alle Links in dieselbe Kopfleiste aufzunehmen - wird deutlich, dass kleine Auswahlmöglichkeiten einen großen Unterschied machen können.
Folgendes müssen Sie bei der Bewertung eines Entwurfsmusters beachten und es an Ihre eigenen Bedürfnisse anpassen:
- Problemzusammenfassung : Welches Benutzerproblem lösen Sie? Bleib konzentriert und formuliere es wie eine User Story - nur in einem Satz.
- Lösung: Wie haben andere dieses Problem gelöst? Zu den Details gehören ua die Navigation durch den Benutzer (einschließlich Verknüpfungen), die Eingabe von Benutzereingaben, der Umgang mit Daten und Integrationen mit anderen Diensten oder Anwendungen sowie die Anzeige von Informationen und Inhalten (einschließlich Standardeinstellungen).
- Beispiel: großartig, kannst du es mir zeigen? Manchmal reicht ein Screenshot oder ein Mockup aus. In anderen Fällen sind Benutzerflüsse und / oder zusätzliche Notizen erforderlich, um das Muster klar zu kommunizieren.
- Verwendung: Wann sollte dieses Muster (nicht) verwendet werden? Ein paar Dinge, die im Detail behandelt werden müssen, umfassen Produktarchitektur, Schnittstellenlayout, Gerät (e), Programmiersprache, Abwesenheit oder Vorhandensein anderer Entwurfsmuster, Benutzertyp und primäre Anwendungsfälle.
Es braucht Übung und Disziplin, um auf diese Weise über Muster nachzudenken, wenn Sie es noch nicht getan haben. Nehmen Sie sich Zeit, um diese Fragen zu beantworten, wenn Sie Ihr Produkt entwerfen, da es Ihnen helfen könnte, viel Zeit beim Refactoring zu sparen, wenn die Benutzer und das Team nach ähnlichen Details fragen.
Der Anstieg von UI-Toolkits
Bei UI-Entwurfsmustern ging es immer darum, dem Benutzer das Navigieren durch Ihre Website, Anwendung oder Ihr System zu erleichtern. Wenn der Benutzer lernt, wie er einen Kommentar zum ersten Mal einreicht, wird er wahrscheinlich sofort wissen, wie er Ihnen eine E-Mail über das Kontaktformular senden kann, es ist das gleiche sich wiederholende Konzept der Informationseingabe.
In den letzten Jahren haben wir ein enormes Wachstum im UI-Toolkit-Markt erlebt. Ein UI-Toolkit kann einfach als eine Reihe von Widgets verstanden werden, mit denen Sie eine vollständig grafische Anwendung von Grund auf erstellen können. Twitter Bootstrap ist ein perfektes Beispiel für ein erfolgreiches UI-Toolkit. Heutzutage verlässt sich ein großer Teil der Webdesigner auf Bootstrap-Funktionen, um den eigenen Workflow zu vereinfachen. In gewissem Sinne besteht keine Notwendigkeit, das Rad neu zu erfinden!
3 UI-Design-Patterns zur Erinnerung
Kurz gesagt, Designmuster sind Lösungen für wiederkehrende Probleme. Durch die Verwendung von Mustern können wir einfache Probleme mit der Benutzeroberfläche überwinden. Wenn wir genau hinsehen, bemerken wir, dass Muster überall um uns herum sind. Es gibt nichts Besonderes an diesem spezifischen Design, es ist die Art und Weise, wie es angewendet wurde, dass Sie begeistert sind!
Crystal Clear Calls-to-Action
Die einfachsten Web-Formulare (und auch die gebräuchlichsten) haben normalerweise nur eine einzige umsetzbare Schaltfläche: in diesem Fall "Website erstellen". Es ist ziemlich selbsterklärend, worauf es ankommt.
Wie viel einfacher könnte es werden, oder? Immer die einfache Option wählen, nicht das Rad neu erfinden, nur um sich von der Masse abzuheben.
Paniermehl zur Rettung
Breadcrumbs zeigen den Pfad von der ersten Seite der Site zum aktuellen Standort des Benutzers in der Seitenhierarchie der Website an. Sie sind eine Form der sekundären Navigation, die Benutzern hilft, die Hierarchie und Struktur der Website zu verstehen. Breadcrumbs beginnen mit der Startseite und enden mit der aktuell angezeigten Seite.
In diesem Beispiel von Fares Farhan, Wir sehen, wie er zwei UI-Entwurfsmuster gleichzeitig verwendet. Zuerst hat er das Tab-Muster oben und als zweites das Breadcrumbs-Navigations-Muster auf der Unterseite. Indem er sie kombiniert, sorgt er für ein sehr angenehmes Surferlebnis.
Die Registrierung sollte einfach sein
Wenn Sie nicht unter einem Stein gelebt haben, werden Sie sich der sozialen Registrierung bewusst sein. Die Registrierung auf einer Website ist üblich und sollte daher so einfach und angenehm wie möglich gestaltet werden.
Dies ist eine meiner Lieblingsregistrierungsseiten im Moment. Es ist das GitHub Homepage, und wie Sie auf dem Screenshot sehen können, wird alles, wofür die Firma steht, in weniger als hundert Wörtern dargestellt. Sie können sich auch unterwegs registrieren und der Vorgang dauert weniger als eine Minute. Sie erhalten eine E-Mail, um Ihr Konto zu bestätigen, aber das ist etwas, das wir sowieso schon gewohnt sind!
Letzte Worte
Ich habe Webseiten über acht Jahre lang gebaut und in diesen acht Jahren habe ich erkannt, dass Einfachheit der Schlüssel zu vielen Designproblemen ist.
Ich bin zu dem Schluss gekommen, dass Unordnung im Design, aufgebläht mit unnötigen Elementen und Formen, die frustrierendste Erfahrung ist, die man im Internet finden kann. Ja, Design ist genau, wie etwas funktioniert, also warum es nicht richtig funktionieren? Benutzeroberfläche (UI) ist unglaublich wichtig für den Erfolg Ihres Unternehmens oder Venture.
Der beste Weg, um sicherzustellen, dass Sie erfolgreiche Websites entwerfen, besteht darin, von vorhandenen Entwurfsmustern zu lernen und diese zu nutzen.