Wie man mit Designmustern für das Web entwirft

Designmuster sind die Grundlage für eine gute Benutzerfreundlichkeit von Websites und die Elemente, auf denen Websites aufbauen. Sie sind eine strategische Designentscheidung, die ein Webdesigner trifft, um eine gute Benutzererfahrung zu gewährleisten. Die Aufgabe eines Designers besteht darin, allgemeine Usability-Probleme zu lösen und die benutzerfreundlichste Lösung zu erstellen, und Muster schaffen eine vorhersehbare, intuitive und optimierte Benutzererfahrung. Egal, ob Sie neu im Design sind oder ein erfahrener Profi, Sie müssen sich der gängigen UI-Designmuster bewusst sein und mit der Entwicklung von Mustern Schritt halten.

Beispiele für Designmuster

Sie haben wahrscheinlich schon von Komponenten gehört; Dinge wie Schaltflächen, Formularfelder, Suchleisten usw. sind Beispiele dafür. Um sie zu verwenden, können Sie sie sinnvoll einsetzen, indem Sie Muster in Ihrem Design erstellen.

Beachten Sie, dass die Begriffe „Komponenten“ und „Entwurfsmuster“ manchmal synonym verwendet werden. Für die Zwecke dieses Artikels sind Komponenten die Bausteine ​​einer Website, und Muster sind etablierte Methoden, mit denen Benutzer Aufgaben ausführen.

Wie Sie sehen werden, ist ein Muster „größer“ als nur eine einzelne Komponente. Mit Mustern optimieren Sie, was mit einzelnen Komponenten gemacht wird. Es gibt viele traditionelle Designmuster, wie zum Beispiel:

• Ein Logo, das auf die Homepage in einem Website-Header verweist
• Hamburger-Navigation auf mobilen Webseiten
• Anmeldeformulare mit einem „Passwort zurücksetzen“-Link
• Breadcrumbs, mit denen Benutzer ihren Standort auf einer Website verfolgen können
• Karren mit Gegenstandszählern darauf

Warum sollten sich Designer auf Designmuster konzentrieren?

Die Verwendung von Entwurfsmustern bietet viele Vorteile. Sie machen nicht nur Ihre Arbeit als Designer effizienter, sondern, was noch wichtiger ist, Muster machen die Erfahrung für Ihre Benutzer einfacher.

Design Patterns schaffen Vertrauen

Benutzer machen schnelle Annahmen, sobald sie auf Ihrer Website ankommen. In Sekundenbruchteilen entscheiden sie, ob es sich lohnt, mit den Inhalten zu interagieren, oder ob sie eine andere Option finden sollten.

Ist Ihre Website einfach zu navigieren? Ist es einfach, die Informationen zu finden, nach denen Ihre Benutzer suchen? Sie werden nicht die Geduld haben, herumzuklicken und Fehler zu beheben. Es ist absolut entscheidend, einen guten ersten Eindruck zu hinterlassen und Vertrauen bei Ihren Benutzern aufzubauen.

In der Geschichte des Internets sind bestimmte Muster alltäglich geworden. Designer haben sich beim Entwerfen von Websites auf diese etablierten Elemente der Benutzeroberfläche verlassen, und die Benutzer haben sich daran gewöhnt, diese Designmuster zu sehen. Sie erkennen Gemeinsamkeiten zwischen Standorten und vertrauen auf Vertrautes.

Nehmen wir ein Beispiel für ein etabliertes Designmuster auf einer E-Commerce-Site. Benutzer sind es gewohnt, kleine Produktvorschauen in einem Raster zu sehen und dann zu klicken, um mehr über den einzelnen Artikel zu erfahren. Indem Sie etablierte Muster in Ihrem Design verwenden und ein benutzerfreundliches Erlebnis schaffen, bauen Sie Vertrauen bei Ihren Benutzern auf und es ist wahrscheinlicher, dass sie zu wiederkehrenden Besuchern werden.

Designmuster sind intuitiv

Wenn Benutzer mit Ihrer Website interagieren, wird der Vorhersagbarkeitsfaktor sehr wichtig. [twitter_link]Vorhersagbare Muster ermöglichen die intuitivste Erfahrung.[/twitter_link] Vertraute Muster zu haben ist der Schlüssel, aber es ist auch wichtig sicherzustellen, dass diese Muster konsistent verwendet werden.

Ein häufiges, vorhersagbares Musterbeispiel findet sich auf Formularen. Insbesondere, dass alle Formulare Validierungs- und Fehlermeldungen bereitstellen. Tun alle Formulare auf Ihrer Website dies konsequent? Sind alle Nachrichten am selben Ort? Wie wäre es mit dem Submit-Button? Gibt es eine Nachricht, dass das Formular gesendet wurde?

Aus gestalterischer Sicht sind Benutzer diesen Mustern schon oft begegnet. Die Bereitstellung einer Formularvalidierung mit hilfreichen Nachrichten zeigt dem Benutzer an, wo Probleme liegen, und eine Nachricht, die anzeigt, dass das Formular gesendet wurde, ist ein hilfreicher Indikator dafür, dass eine Aktion stattgefunden hat.

Es mag wie gesunder Menschenverstand erscheinen, wenn Sie hören, dass Muster und Vorhersagbarkeit für eine gute Benutzererfahrung notwendig sind. Es ist jedoch nicht allzu schwer, auf Websites zu stoßen, die mit gängigen Mustern brechen, was zu Frustration oder Verwirrung führen kann. Entwerfen Sie in diesem Sinne weiter mit hilfreichen UI-Mustern. Je mehr Benutzer mit ihnen vertraut sind, desto besser wissen sie, welches Verhalten sie erwarten können. Muster und Konventionen verhindern, dass Benutzer verwirrt werden, und das Festhalten an Mustern schafft eine vorhersehbare Erfahrung.

Entwurfsmuster bieten eine gemeinsame Sprache zwischen Designern

[twitter_link]Großartige Erlebnisse beginnen mit effektivem Design.[/twitter_link]

In vielen Fällen arbeiten Designer im Team. Es hilft dem Team, effizienter zu arbeiten, wenn es etablierte Entwurfsmuster gibt. Sie müssen das Rad nicht neu erfinden, wenn das Problem bereits gelöst ist.

Die Aufbewahrung aller Muster in einem zentralen Front-End-Styleguide ist ein großartiger Ort, um Inventar zu führen. Als globale Ressource ist es eine Kurzanleitung für alle Teammitglieder, um den Anwendungsfall für jedes Muster zu verstehen. Selbst wenn Sie alleine arbeiten, können Sie effizienter arbeiten und in Zukunft darauf zurückblicken, wenn Sie die von Ihnen verwendeten Designmuster im Auge behalten.

Die Planungsphase

Es ist ziemlich klar, warum Designmuster verwendet werden sollten, aber wie setzen Webdesigner diese tatsächlich ein, wenn sie für das Web entwerfen? Hier sind ein paar Tipps, die helfen, den Designprozess zu vereinfachen.

Verwenden Sie, was Sie bereits wissen, um loszulegen

Wenn Sie ein komplettes Redesign oder eine Site-"Erweiterung" entwerfen, ist es hilfreich, eine Bestandsaufnahme zu machen und sich anzusehen, was Sie bereits wissen. Ein guter Ausgangspunkt ist entscheidend. Wenn es sich um ein völlig neues Projekt handelt, ist es wichtig, über diese Dinge nachzudenken und damit zu rechnen, dass einige Fragen zunächst unbekannt sind. In dieser Situation ist es ein guter erster Schritt, die bisherige Konstruktionserfahrung für den Einstieg zu nutzen. Dies informiert die anfänglichen Entscheidungen, da sie an anderen Projekten gearbeitet haben.

Beginnende Forschung

Forschung ist der Schlüssel zu einer starken Projektgrundlage. Wie Sie wissen, suchen Benutzer immer nach dem einfachsten Weg, um eine bestimmte Aktion auf einer Website auszuführen. Wenn Sie die anstehenden Probleme und Aufgaben verstehen, stellen Sie sicher, dass Sie das Richtige entwerfen. Denken Sie zunächst an diese Punkte:

• Wer sind die aktuellen Nutzer? (Ihre Ziele, Demografie usw.)
• Was möchten Sie sonst noch über diese Benutzer erfahren?
• Mit welchen Mustern interagieren sie am meisten?
• Gibt es Muster, mit denen diese Benutzer Probleme haben?
• Welche Verbesserungen sind möglich?
• Welche neuen Funktionen werden entwickelt?
• Können alle derzeit etablierten Muster funktionieren?

Die Recherchephase ist die Zeit, um herauszufinden, was Ihre Benutzer tun müssen, wenn sie mit Ihrer Website interagieren. Beispiele wären Dinge wie die Suche nach Inhalten, die Anmeldung für einen Newsletter, einen Kauf usw. Angesichts vertrauter Elemente brauchen Benutzer weniger Zeit zum Nachdenken und haben mehr Gründe, um zu konvertieren. Konzentrieren Sie sich beim Design darauf, Muster auf eine Weise zu erstellen, die Ihren Benutzern vertraut ist, basierend auf ihrem vorhandenen Wissen aus dem, was sie im Web erleben.

Bei der Lösung von Konstruktionsproblemen spielen Zeit und Budget immer eine Rolle, aber recherchieren Sie so viel wie möglich. Es ist Ihre Zeit, die Hauptschmerzpunkte Ihrer Benutzer aufzudecken und vorhandene Designmuster zu studieren. Was ist im Web üblich? Welche Muster haben Sie in der Vergangenheit erfolgreich eingesetzt? Nachdem Sie die Probleme definiert haben, die Sie lösen müssen, erkunden Sie Websites mit Mustern, die auf dieselben Benutzerziele abzielen. Das wird als gute Inspiration für das Projekt dienen. Es ist nicht notwendig, sie zu „kopieren“, aber es ist hilfreich, zu beachten, was da draußen ist.

Bis zu diesem Punkt habe ich Ihnen empfohlen, konsequent und vorhersehbar zu bleiben. Es ist erwähnenswert, dass bestehende Muster geändert werden können und es Fälle geben kann, etwas Neues zu tun. Stellen Sie einfach sicher, dass, wenn Sie ein neues Muster einführen, es durch Benutzerdaten gerechtfertigt und gut getestet ist.

Entwerfen für das Web mit Designmustern

Prototyp und Test

Nach der Recherchephase ist es an der Zeit, das Gelernte in die Tat umzusetzen. Hier wird das Design durch Prototyping zum Leben erweckt. Abhängig von Ihrem Prozess können Prototypen einfache Low-Fidelity-Drahtmodelle oder komplexere High-Fidelity-Designs sein.

Beginnen Sie mit bestehenden Mustern aus Ihrer Forschung als Grundlage. Stellen Sie beim Durchlaufen des Prozesses sicher, dass der Prototyp alle Funktionen abdeckt, die Sie benötigen, und dass er alle Benutzerziele berücksichtigt. Es kann ein wenig Überarbeitung und Feinabstimmung erfordern, um zu einem guten Ausgangspunkt zu gelangen.

Sobald Sie sicher sind, dass alle Anforderungen im Prototyp enthalten sind, ist es an der Zeit, einige Tests durchzuführen, um einen Einblick in die Benutzerfreundlichkeit des Designs zu erhalten. Hier validieren Sie die Effektivität der Entwurfsmuster zusammen mit der Gesamtfunktionalität.

Der Grund, warum das Testen in der Prototypenphase so wichtig ist, liegt darin, dass Kunden in manchen Fällen ihre Gedanken und Bedürfnisse nicht artikulieren oder vollständig vorhersagen können. Benutzertests ermöglichen es ihnen, zu zeigen, anstatt zu sagen. Die Teilnehmer demonstrieren, wie sie die Website tatsächlich nutzen würden, während Sie ihre Aktionen beobachten und daraus lernen. Dies ist sowohl für die Teilnehmer als auch für Sie als Designer nützlich.

Es ist wichtig, Notizen zu den wichtigsten Benutzerzielen zu machen, wenn Sie mit dem Testen beginnen, um konzentriert zu bleiben. Nachdem Sie die Testteilnehmer eingeladen haben, zeigen Sie das Design so vielen Benutzern wie möglich. Wenn die Zeit knapp ist, stellen Sie sicher, dass Sie mit mindestens fünf Benutzern testen.

Das Thema User Testing ist ein ganzes Thema für sich. Wählen Sie die Methode, die basierend auf Ihrer Zeit und Ihrem Budget am sinnvollsten ist. Es wäre toll, immer genügend Zeit zu haben, aber das ist vielleicht nicht immer möglich. Zur Not können Usability-Tests im „Flur“- oder „Cafeteria-Stil“ nützlich sein (ein Usability-Test, der in einem stark frequentierten Bereich durchgeführt wird und vorbeigehende Personen einsetzt, um Ihr Produkt zu testen). Auch die Einbindung einiger Kollegen ist immer besser als gar keine Tests.

Die Chancen stehen gut, dass Ihre Designmuster nicht von Anfang an perfekt sind. Es müssen Änderungen vorgenommen und weitere Tests durchgeführt werden, um das aktualisierte Design zu validieren. Sie gewinnen jedoch aus jeder Testphase mehr Einblicke und können das Gelernte einfließen lassen, um mit Iterationen und Tests fortzufahren, bis das Design optimiert ist.

Webdesignmuster sorgen für ein konsistentes Benutzererlebnis. Nachfolgend finden Sie hilfreiche Links mit weiteren Informationen für den Einstieg:

• Umfassender Leitfaden für Benutzertests
• Steve Krugs Raketenoperation leicht gemacht
• Beispiele für Styleguides