8 Webdesign-Prinzipien, die auch 2020 noch funktionieren
Veröffentlicht: 2021-07-22Ihr Website-Design ist für Conversions wichtiger als Sie denken. Sie können jede Taktik zur Konversionssteigerung der Welt implementieren, aber wenn Ihr Webdesign scheiße aussieht, wird es Ihnen nicht viel nützen.
Design ist nicht nur etwas, was Designer tun. Design ist Marketing. Design ist Ihr Produkt und wie es funktioniert. Je mehr ich über die Prinzipien des Webdesigns gelernt habe, desto bessere Ergebnisse habe ich erzielt.
Kostenloser UX- und Usability-Kurs
Gehen Sie von den Prinzipien zur Praxis über. Sehen Sie sich kostenlose Kurse zu UX & Usability an.
Hier sind 8 effektive Webdesign-Prinzipien, die Sie kennen und befolgen sollten.
1. Visuelle Hierarchie
Quietschende Räder bekommen das Fett, und auffällige visuelle Elemente ziehen die Aufmerksamkeit auf sich. Visuelle Hierarchie ist eines der wichtigsten Prinzipien für gutes Webdesign. Es ist die Reihenfolge, in der das menschliche Auge wahrnimmt, was es sieht.
Übung. Bitte ordnen Sie die Kreise nach Wichtigkeit:
Ohne etwas über diese Kreise zu wissen, konntest du sie einordnen
leicht. Das ist eine visuelle Hierarchie.
Bestimmte Teile Ihrer Website sind wichtiger als andere (Formulare, Handlungsaufforderungen, Wertversprechen usw.), und Sie möchten, dass diese mehr Aufmerksamkeit erhalten als die weniger wichtigen Teile.
Wenn Ihr Website-Menü 10 Elemente enthält, sind alle gleich wichtig? Wohin soll der Benutzer klicken? Heben Sie wichtige Links hervor.
Hierarchie kommt nicht nur von der Größe. Amazon hebt die Call-to-Action-Buttons „In den Warenkorb“ und „Jetzt kaufen“ durch Farbe hervor:
Beginnen Sie mit dem Geschäftsziel
Sie sollten Elemente auf Ihrer Website basierend auf Ihrem Geschäftsziel einstufen. Wenn Sie kein bestimmtes Ziel haben, wissen Sie nicht, was Sie priorisieren sollen.
Hier ist ein Beispiel. Es ist ein Screenshot, den ich von der Williams-Sonoma-Website gemacht habe. Sie wollen Outdoor-Kochgeschirr verkaufen.
Der größte Hingucker ist das riesige Stück Fleisch (mich Lust darauf machen), gefolgt von der Überschrift (sag was es ist) und einem Call-to-Action (bekomm es). Der vierte Platz geht an einen Textabschnitt unter der Überschrift; das fünfte ist das kostenlose Versandbanner und die oberste Navigation ist das letzte.
Das ist visuelle Hierarchie – ein zeitloses Prinzip des Webdesigns – gut gemacht.
Übung. Surfen Sie im Web und ordnen Sie die Elemente bewusst in der visuellen Hierarchie ein. Dann schau dir deine Seite an. Steht etwas Wichtiges (zB wichtige Informationen, die Besucher suchen) zu weit unten in der Hierarchie? Machen Sie es prominenter.
2. Göttliche Proportionen
Der Goldene Schnitt ist die magische Zahl 1,618 (φ). Designs, die Proportionen verwenden, die durch den Goldenen Schnitt definiert werden, sind ästhetisch ansprechend.
Dann gibt es die Fibonacci-Folge. Jeder Term ist die Summe der beiden vorherigen Terme: 0, 1, 1, 2, 3, 5, 8, 13, 21 usw. Das Interessante ist, dass die beiden scheinbar nicht zusammenhängenden Themen genau die gleiche Zahl produzieren.
So sieht der Goldene Schnitt aus:
Viele Künstler und Architekten verwenden Proportionen, um sich dem Goldenen Schnitt anzunähern. Ein berühmtes Beispiel ist der im antiken Griechenland erbaute Parthenon:
Kann der Goldene Schnitt für Webdesign funktionieren? Sie wetten. Hier ist Twitter:
Hier ist ein Kommentar von Twitters Kreativdirektor Doug Bowman von vor Jahren. Die Designwahl war kein Zufall:
Wenn Ihre Layoutbreite also 960px beträgt, teilen Sie sie durch 1,618 (=593px). Sie wissen, dass die Breite des Inhaltsbereichs 593px und die Seitenleiste 367px betragen sollte. Wenn die Höhe der Website 760 Pixel beträgt, können Sie sie in 470 Pixel und 290 Pixel große Blöcke aufteilen (760/1.618=~470).
Wenn Sie mehr erfahren möchten, lesen Sie diesen Artikel zur Anwendung des Goldenen Schnitts auf die Typografie.
3. Hicks Gesetz
Das Hicks-Gesetz besagt, dass sich mit jeder zusätzlichen Wahl die Zeit für eine Entscheidung erhöht.
Das haben Sie schon unzählige Male in Restaurants erlebt. Menüs mit großen Auswahlmöglichkeiten erschweren die Auswahl Ihres Abendessens. Wenn es zwei Optionen bieten würde, würde eine Entscheidung viel weniger Zeit in Anspruch nehmen. Dies ähnelt dem Paradox der Wahl – je mehr Wahlmöglichkeiten Sie geben, desto einfacher ist es, nichts zu wählen. Beide Prinzipien kommen beim Webdesign zum Tragen.
Je mehr Optionen ein Benutzer auf Ihrer Website hat, desto schwieriger ist die Nutzung (wenn überhaupt). Wir müssen Entscheidungen eliminieren. Konzentrieren Sie sich für ein besseres Webdesign darauf, ablenkende Optionen während des gesamten Designprozesses zu eliminieren.
In einer Ära der unendlichen Auswahl brauchen die Menschen bessere Filter! Wenn Sie eine große Anzahl von Produkten verkaufen, fügen Sie bessere Filter hinzu, um die Entscheidungsfindung zu erleichtern. Wine Library verkauft eine große Menge Wein.
Sie machen einen guten Job mit den Filtern:
4. Fittsches Gesetz
Das Fittsche Gesetz besagt, dass die Zeit, die benötigt wird, um sich zu einem Zielbereich zu bewegen (zB Klicken auf eine Schaltfläche), eine Funktion der Entfernung zum Ziel und der Größe des Ziels ist. Mit anderen Worten, je größer ein Objekt und je näher es ist, desto einfacher ist es zu verwenden.
Spotify macht es einfacher, auf „Play“ zu klicken als andere Schaltflächen:
In der Handy-App platzieren sie auch die Play-Taste an einer leicht zu tippenden Stelle.
Größer ist nicht immer besser. Eine Schaltfläche, die die Hälfte des Bildschirms einnimmt, ist keine gute Idee, und wir brauchen keine mathematische Studie, um uns das zu sagen. Trotzdem ist das Fittsche Gesetz ein binärer Logarithmus. Das bedeutet, dass die prognostizierten Ergebnisse der Gebrauchstauglichkeit eines Objekts entlang einer Kurve und nicht entlang einer Geraden verlaufen.
Eine winzige Schaltfläche ist bei einer Vergrößerung von 20 % viel einfacher anzuklicken, während ein sehr großes Objekt bei derselben Vergrößerung von 20 % nicht die gleichen Vorteile in Bezug auf die Benutzerfreundlichkeit bietet.
Dies ähnelt der Regel der Zielgröße. Die Größe einer Schaltfläche sollte proportional zur erwarteten Nutzungshäufigkeit sein. Sie können die Mausverfolgung verwenden, um zu sehen, welche Schaltflächen am häufigsten verwendet werden, und dann beliebte Schaltflächen größer (leichter zu treffen) machen.
Stellen wir uns vor, Sie möchten, dass die Leute ein Formular ausfüllen. Am Ende des Formulars befinden sich zwei Schaltflächen: „Senden“ und „Zurücksetzen“ (Felder löschen).
99,9999% möchten auf "Senden" klicken. Daher sollte die Schaltfläche viel größer als 'reset' sein.
5. Drittelregel
Es ist eine gute Idee, Bilder in Ihrem Design zu verwenden. Ein Visual kommuniziert Ihre Ideen viel schneller als ein Text.
Die besten Bilder folgen der Drittelregel: Ein Bild sollte durch zwei gleichmäßig verteilte horizontale Linien und zwei gleichmäßig verteilte vertikale Linien in neun gleiche Teile geteilt werden. Wichtige kompositorische Elemente sollten entlang dieser Linien oder an ihren Schnittpunkten platziert werden.
Sehen Sie unten, wie das Bild rechts interessanter ist. Das ist die Drittelregel in Aktion.
Die Verwendung schöner, großer Bilder trägt zu einem guten Webdesign bei. Wenn Ihre Bilder interessanter sind, wird Ihre Website ansprechender.
6. Gestaltdesign-Gesetze
Gestaltpsychologie ist eine Theorie des Geistes und des Gehirns. Sein Prinzip ist, dass das menschliche Auge Objekte in ihrer Gesamtheit sieht, bevor es ihre einzelnen Teile wahrnimmt.
Folgendes meine ich:
Beachten Sie, wie Sie den Hund sehen können, ohne sich auf jeden schwarzen Fleck zu konzentrieren, aus dem der Hund besteht? Ein Begründer des Gestaltismus, Kurt Koffka, erklärte es so: „Das Ganze existiert unabhängig von den Teilen.“
In Bezug auf das Webdesign sehen die Leute zuerst die gesamte Website – bevor sie Kopfzeile, Menü, Fußzeile usw. unterscheiden.
Es gibt acht sogenannte Gestaltdesign-Gesetze, die es uns ermöglichen, vorherzusagen, wie Menschen etwas wahrnehmen werden. So beziehen sich die einzelnen auf Webdesign:
1. Gesetz der Nähe
Menschen gruppieren Dinge, die im Raum nahe beieinander liegen. Sie werden zu einem einzigen wahrgenommenen Objekt.
Achten Sie für ein effektives Webdesign darauf, dass Dinge, die nicht zusammenpassen, nicht als Einheit wahrgenommen werden. Auf ähnliche Weise gruppieren Sie verwandte Gestaltungselemente (Navigationsmenü, Fußzeile usw.), um zu kommunizieren, dass sie ein Ganzes bilden.
Craigslist verwendet dieses Gesetz, um leicht zu verstehen, welche Unterkategorien unter „zu verkaufen“ fallen:
2. Gesetz der Ähnlichkeit
Wir gruppieren ähnliche Dinge. Diese Ähnlichkeit kann in Form von Form, Farbe, Schattierung oder anderen Qualitäten auftreten.
Hier gruppieren wir schwarze Punkte in eine Gruppe und weiße in eine andere, weil Punkte der gleichen Farbe einander ähnlich sehen.
Wie sieht das aus, wenn es auf Webdesign angewendet wird? Mixpanel verwendet ein ähnliches Design für Links zu Fallstudien, daher sehen wir sie als eine einzige Gruppe, die sich gegenseitig verstärken:
3. Gesetz der Schließung
Wir suchen Vollständigkeit. Wenn nicht geschlossene Formen oder Teile eines Bildes fehlen, füllt unsere Wahrnehmung die visuelle Lücke. Wir sehen einen Kreis und ein Quadrat, obwohl in der Grafik unten keine der Formen tatsächlich existiert.
Ohne das Gesetz der Schließung würden wir nur verschiedene Linien mit unterschiedlichen Längen sehen. Aber das Gesetz der Schließung verbindet die Linien zu ganzen Formen.
Die Anwendung des Gesetzes der Schließung kann Logos oder Designelemente interessanter machen. Ein gutes Beispiel ist das Logo des World Wide Fund For Nature, das 1961 von Sir Peter Scott entworfen wurde:
4. Gesetz der Symmetrie
Der Geist nimmt Objekte als symmetrisch wahr, die sich um einen Mittelpunkt bilden. Es ist für die Wahrnehmung angenehm, Objekte in eine gerade Anzahl symmetrischer Teile zu unterteilen.
Wenn wir zwei symmetrische Elemente sehen, die nicht verbunden sind, verbindet der Geist sie wahrnehmungsmäßig, um eine kohärente Form zu bilden.
Wenn wir uns das obige Bild ansehen, sehen wir eher drei Paare symmetrischer Klammern als sechs einzelne Klammern.
Menschen bevorzugen symmetrische Erscheinungen gegenüber asymmetrischen. Abwechselnde Bild- und Textspalten, zentrierte Schieberegler und eine dreispaltige Liste tragen zum visuellen Genuss des Trello-Homepage-Designs bei:
5. Gesetz des gemeinsamen Schicksals
Wir neigen dazu, Objekte als Linien wahrzunehmen, die sich entlang eines Weges bewegen. Wir gruppieren Objekte, die den gleichen Bewegungstrend haben und sich daher auf dem gleichen Weg befinden.
Mental gruppieren Menschen Stöcke oder erhobene Hände, die irgendwohin zeigen, weil sie alle in die gleiche Richtung zeigen. In Ihrem Site-Design können Sie dies verwenden, um die Aufmerksamkeit des Benutzers auf etwas zu lenken (z. B. ein Anmeldeformular, ein Wertangebot usw.).
Wenn es zum Beispiel eine Reihe von Punkten gibt und sich die eine Hälfte der Punkte nach oben bewegt, während sich die andere Hälfte nach unten bewegt, nehmen wir die sich aufwärts bewegenden Punkte und die sich abwärts bewegenden Punkte als zwei unterschiedliche Einheiten wahr.
6. Gesetz der Kontinuität
Menschen neigen dazu, eine Linie als Fortsetzung ihrer etablierten Richtung wahrzunehmen. Wenn es einen Schnittpunkt zwischen Objekten (zB Linien) gibt, neigen wir dazu, die beiden Linien als zwei einzelne, ununterbrochene Einheiten wahrzunehmen. Reize bleiben auch bei Überlappung deutlich.
Fixel verwendet dies, um Gesichter mit dem Bios zu verbinden:
Es gibt auch andere Gestaltgesetze, wie etwa Figur und Grund oder Gesetz der guten Gestalt. (Objekte neigen dazu, wahrnehmungsbezogen gruppiert zu werden, wenn sie ein regelmäßiges, einfaches und geordnetes Muster bilden – wie die Olympischen Ringe.) Die oben genannten sind jedoch die besten Leitprinzipien für das Webdesign.
7. Leerraum und klares Design
Leerraum (auch „Negativraum“ genannt) ist der Teil einer Webseite, der „leer“ bleibt. Es ist der Abstand zwischen Grafiken, Rändern, Bundstegen, Abstand zwischen Spalten, Abstand zwischen Textzeilen oder visuellen Elementen.
Es ist nicht nur „leerer“ Platz – es ist ein wichtiges Element des Webdesigns. Es ermöglicht, dass Objekte darin existieren. Beim Weißraum dreht sich alles um die Verwendung von Hierarchien für Informationen, Typografie, Farbe oder Bilder.
Eine Seite ohne Leerraum, vollgestopft mit Text oder Grafiken, riskiert, beschäftigt oder überladen zu wirken. Normalerweise ist es schwer zu lesen. (Die Leute werden sich nicht einmal die Mühe machen.) Deshalb sind einfache Websites wissenschaftlich besser.
Die richtige Menge an Weißraum lässt eine Website „sauber“ aussehen. Ein klares Design ist zwar entscheidend, um eine klare Botschaft zu vermitteln, bedeutet aber nicht nur weniger Inhalt.
Ein sauberes Design nutzt den Platz, in dem es sich befindet, am besten. Um ein sauberes Website-Design zu erstellen, müssen Sie wissen, wie Sie durch den klugen Einsatz von Leerräumen klar kommunizieren. Made.com verwendet Leerzeichen gut:
Die feine Verwendung von Leerräumen macht es einfach, sich auf die Hauptbotschaft und das Bildmaterial zu konzentrieren, und der Textkörper ist leicht zu lesen. Im Allgemeinen fördert Weißraum Eleganz und Raffinesse, verbessert die Lesbarkeit und fördert die Konzentration.
Lesen Sie mehr über Leerraum und Einfachheit.
8. Occams Rasiermesser
Bei mehreren konkurrierenden Hypothesen fordert Occams Rasiermesser Sie auf, diejenige zu wählen, die die wenigsten Annahmen macht und dadurch die einfachste Erklärung bietet. Um es in den Kontext des Webdesigns zu stellen, argumentiert Occams Razor, dass die einfachste Lösung normalerweise die beste ist.
In einem Beitrag über ihre Angelpad-Erfahrung schreibt das Team von Pipedrive:
Das Angelpad-Team und die Mentoren haben uns in vielerlei Hinsicht herausgefordert. „Sie haben zu viele Dinge auf Ihrer Homepage“ war etwas, mit dem wir zunächst nicht einverstanden waren, aber wir testen es gerne. Und es stellte sich heraus, dass wir uns tatsächlich geirrt hatten. Wir haben 80 % des Inhalts entfernt und eine Anmeldeschaltfläche sowie einen Link "Weitere Informationen" auf der Startseite belassen. Die Conversion zur Registrierung wurde um 300 % erhöht.
Es geht nicht nur um das Aussehen, sondern auch um die Funktionsweise. Einige Unternehmen – wie 37Signals – haben aus „einfach“ ein Geschäftsmodell gemacht. Hier ist ein Zitat aus dem Buch Rework, geschrieben von den Gründern Jason Fried:
Viele Leute hassen uns, weil unsere Produkte weniger leisten als die Konkurrenz. Sie sind beleidigt, wenn wir uns weigern, ihr Haustier-Feature aufzunehmen. Aber wir sind genauso stolz auf das, was unsere Produkte nicht leisten, wie auf das, was sie tun. Wir gestalten sie einfach, weil wir glauben, dass die meisten Software zu komplex ist: zu viele Funktionen, zu viele Schaltflächen, zu viel Verwirrung.
Einfaches, minimalistisches Design garantiert nicht, dass das Design funktioniert. Aber meiner Erfahrung nach ist einfach immer besser als das Gegenteil – und daher sollten wir uns bemühen, unsere Webdesigns zu vereinfachen.
Fazit
Effektives Webdesign und Kunst sind nicht dasselbe. Für Websites gelten jedoch viele psychologische und gestalterische Prinzipien. Sie können eine großartige Website gestalten, indem Sie die relevanten Aspekte dieser Gesetze auf Ihr Layout, Ihre Typografie und Ihre Bilder anwenden.
Design für den Benutzer und Ihre Geschäftsziele. Gutes Webdesign kann ästhetisch ansprechende und finanziell lohnende Ergebnisse liefern.