Designjargon erklärt: Webdesign-Muster
In diesem Artikel beschreibt Chris Bank of UXPin - Die UX Design App Einzelheiten zu Webdesign-Mustern und deren Berücksichtigung beim Entwerfen Ihrer Website oder Web-App sowie Informationen zur Bedeutung von Responsive Design und Touchscreens.
Sie werden ausführlicher mit Beispielen von über 50 heißen Websites und Web-Apps in UXPins kostenlosem E-Book behandelt. Web UI Design Patterns 2014 .
Was sind Webdesignmuster?
Im Allgemeinen ist ein Webdesignmuster, auch als UI-Designmuster bezeichnet, eine wiederverwendbare Lösung für ein häufig auftretendes Problem, auf das Sie möglicherweise jeden Tag stoßen.
Es ist keine Funktion, die in Ihr Produktdesign integriert werden kann, und es ist kein fertiges Design, das einfach codiert werden kann. Es handelt sich vielmehr um eine formalisierte Best Practice, einen Leitfaden oder eine Vorlage, mit der Designer, Entwickler und Produktmanager (und alle anderen, die das Produkt berühren) häufig auftretende Probleme beim Entwerfen einer Webanwendung oder eines Systems lösen können.
Es ist im Allgemeinen sprach-, geräte- und plattformunabhängig - obwohl es technologische Einschränkungen geben kann, je nachdem, wie die Designs letztendlich implementiert werden. (Und wenn sie im falschen Kontext implementiert werden, schaden sie natürlich mehr als sie nützen, aber wir werden uns vorerst auf das Positive konzentrieren.)
Grundprinzipien
UI-Entwurfsmuster können herausfordernde Konzepte sein, die zu erfassen und zu nutzen sind. Dies ist teilweise auf den Mangel an Literatur zu diesem Thema im Vergleich zu den umfangreichen Archiven technischer Entwurfsmuster zurückzuführen.
Zum Teil ist dies auch darauf zurückzuführen, dass es menschlich ist, Muster ähnlich wie Schablonen zu verwenden - die Umrisse zu verfolgen, ohne die Kanten zu verstehen; Jede Kurve, Linie, Drehung und Drehung in den gezeichneten Formen.
In der Praxis werden Muster häufig austauschbar mit bestimmten Funktionen verwendet und unverändert aus einer der gängigen Entwurfsmuster- und Drahtgitterbibliotheken kopiert - eine vollständige Liste finden Sie in UXPins Anleitung zum Wireframing .
Das Verständnis von Mustern ist für ein gutes Produktdesign und eine gute Produktentwicklung von grundlegender Bedeutung. Wir werden uns gleich ein Beispiel ansehen und detaillierte Muster von Pinterest, OKCupid, Spotify, Amazon, AirBnB, Dropbox, Quora, Eventbrite, Asana, RelateIQ, Flipboard und vielen mehr in UXPins kostenlosem E-Book finden. Web UI Design Patterns 2014 .
Ich würde auch vorschlagen, zusätzliche UI-Designmuster und -Elemente in UXPins kostenlosem zu betrachten Entwurfsmuster für mobile Benutzeroberflächen , Webdesign-Trends , Mobile Design Trends , und Der Leitfaden zum Wireframing E-Books.
Ein kurzes Beispiel
Im Folgenden habe ich die Hover-Steuerelemente von Pinterest und Facebook dekonstruiert, um Ihnen ein Beispiel aus der Praxis zu geben, wie Sie täglich über mobile Designmuster nachdenken können.
- Das Problem : Der Benutzer möchte Zugriff auf Steuerelemente haben, ohne die Inhaltsansicht zu überladen.
- Die Lösung : Aktionen und Steuerschaltflächen ausblenden, bis sich ein Benutzer über dem Element befindet, auf das er sich bezieht.
Es ist immer gut, dem Benutzer die vollständige Kontrolle über den Inhalt zu geben, aber wenn eine Benutzeroberfläche eine Menge hat, auf die reagiert werden kann, stiehlt jede Schaltfläche den Fokus vom Inhalt weg.
Dieses UI-Muster verbirgt diese kontextbezogenen Steuerelemente, bis der Benutzer mit der Maus über den Inhalt fährt und sie bis zur Verwendung aus dem Weg hält. Pinterest konzentriert sich ganz auf die Fotos, sodass die Schaltflächen 'Herz', 'Senden' und 'Anheften' unsichtbar sind, bis Sie mit der Maus über das Foto fahren.
Da die Schaltflächen über dem Bild selbst angezeigt werden, gibt es keine Verwirrung darüber, auf welches Element sie einwirken.
Was ist zu beachten?
Es ist überraschend, so viele schöne Designmusterbibliotheken zu sehen, die Muster wie Modelle behandeln. Flat Files versuchen vergeblich, tiefere Produktdesignkonzepte zu vermitteln.
Sie bieten keine Erklärung für die Probleme, die diese Muster lösen, und wie Entscheidungen bei der Implementierung der Musterbeispiele getroffen wurden. Ein Bild sagt mehr als tausend Worte, aber es ist wahrscheinlicher wertlos, wenn das Bild völlig missverstanden wird.
Folgendes müssen Sie beachten, wenn Sie ein Entwurfsmuster bewerten und an Ihre eigenen Bedürfnisse anpassen:
- Problemzusammenfassung: Welches Benutzerproblem lösen Sie? Konzentrieren Sie sich und formulieren Sie es wie eine User Story - nur in einem Satz.
- Lösung: Wie haben andere dieses Problem gelöst? Zu den Details gehören unter anderem die Benutzernavigation (einschließlich Verknüpfungen), das Abrufen von Benutzereingaben, der Umgang mit Daten und die Integration mit anderen Diensten oder Anwendungen sowie das Anzeigen von Informationen und Inhalten (einschließlich Standardeinstellungen).
- Beispiel: Großartig, können Sie es mir zeigen? Manchmal reicht ein Screenshot oder ein Modell aus. In anderen Fällen sind Benutzerströme und / oder zusätzliche Notizen erforderlich, um das Muster klar zu kommunizieren.
- Verwendung: Wann sollte dieses Muster verwendet werden? Zu den Details gehören unter anderem die Produktarchitektur, das Schnittstellenlayout, die Geräte, die Programmiersprache, das Fehlen oder Vorhandensein anderer Entwurfsmuster, der Benutzertyp und die primären Anwendungsfälle.
Es erfordert Übung und Disziplin, um auf diese Weise über Muster nachzudenken, wenn Sie dies noch nicht getan haben. Nehmen Sie sich Zeit, um diese Fragen bei der Entwicklung Ihres Produkts zu beantworten, da Sie dadurch viel Zeit sparen können, wenn Ihre Benutzer und Ihr Team nach ähnlichen Details fragen.
Konvergenz
Das Herzstück vieler dieser neuen UI-Designmuster ist das Aufkommen eines reaktionsschnellen Designs und die Integration von Touchscreens auf herkömmlichen Desktops und Laptops.
In dem Entwurfsmuster für mobile Benutzeroberflächen ebook, ich spreche ausführlich über Animationen und Gesten, die sich stark auf die Entwurfsmuster der mobilen Benutzeroberfläche auswirken, was für das Webdesign immer relevanter wird, da Mobile und Web weiterhin konvergieren. Aber ich möchte es hier auch kurz wegen seiner Bedeutung ansprechen.
Sich anpassendes Design
Heute möchte fast jedes Unternehmen eine mobile Version seiner Website - und umgekehrt. Und obwohl viele Designer und Entwickler 'Responsive Design' als ausgefallenes Synonym für 'Größe auf verschiedenen Geräten ändern' bezeichnen, ist dies alles andere als einfach. Viele haben diesen Ansatz versucht und sind gescheitert. Smashing Magazine fasst eine gemeinsame Definition von zusammen Sich anpassendes Webdesign ::
'Responsive Web Design ist der Ansatz, der vorschlägt, dass Design und Entwicklung auf das Verhalten und die Umgebung des Benutzers reagieren sollten, basierend auf Bildschirmgröße, Plattform und Ausrichtung ...'
Es geht aber nicht nur um einstellbare Bildschirmauflösungen und automatisch anpassbare Bilder. In der Praxis muss für jedes Gerät ein anderes Produkt von Anfang bis Ende entworfen werden (nicht nur kopiert): ein Design für das BlackBerry, ein anderes für das iPhone, das iPad, Android, Kindle usw.
Touchscreen
Obwohl das iPad - in gewisser Hinsicht ein übergroßes iPhone - für die Popularisierung großer Touchscreens anerkannt ist, war dies nur der Anfang.
Es hat nicht nur die Entwicklung vieler anderer großer Touchscreen-Geräte ausgelöst, sondern auch Hybride, die letztendlich die Komplexität des Produktdesigns und der Produktentwicklung erhöhen. Während große und kleine (mobile) Touchscreen-Geräte in Bezug auf Hardware und Betriebssystem ähnlich sind, ist die Produktvielfalt in jeder Produktklasse ein Beweis für die unterschiedlichen Anwendungsfälle, für die sie entwickelt wurden.
Zugegeben, es gibt viele iPhone-Anwendungen, die nahtlos auf dem iPad funktionieren. Dies ändert jedoch nichts an der Art und Weise, wie Produkte auf die gleiche Weise entworfen werden, wie das Ändern der Größe und das Neuanordnen von Anwendungen zwischen Web und Mobile nicht wirklich 'Responsive Design' ist.
Betteln, ausleihen und stehlen - wenn angebracht
Nehmen Sie diese Designmuster und -elemente aus dem kostenlosen E-Book von UXPin. Web UI Design Patterns 2014 und passen Sie sie an, um Ihre eigenen Probleme und vor allem die Ihrer Benutzer zu lösen.
Designer, Entwickler und Produktmanager aus aller Welt tragen gemeinsam zur Lösung von Problemen bei, die Sie heute wahrscheinlich lösen möchten. Warum das Rad neu erfinden? Lernen Sie aus ihren Erkenntnissen und sogar expliziten Lösungen, um schneller und intelligenter voranzukommen.
Denken Sie daran, dass es keine einheitliche Lösung für das User Experience Design gibt. Viele der hier behandelten Muster funktionieren sehr gut, wenn sie gemischt und aufeinander abgestimmt werden. Und sie sollten auf Ihr einzigartiges Produkt, Ihre Benutzer und Ihr Team zugeschnitten sein, um optimale Ergebnisse zu erzielen.
Wörter: Chris Bank
Chris Bank ist der Wachstumsvorsprung bei UXPin , eine UX-Design-App, die reaktionsschnelle interaktive Drahtmodelle und Prototypen erstellt.
