Die Allgemeine Funktion der 6 Grundbausteine
Die sechs Grundbausteine des Screendesigns haben unterschiedliche Funktionen. Aber nicht immer lässt sich einem Baustein eine einzige Funktion zuordnen. Einige Elemente können, jenachdem wie sie gestaltet sind, auch mehrere Funktionen, erfüllen.
Grundsätzlich haben alle Bausteine des Screendesigns eines gemeinsam: Sie sollen den Nutzer bei der Bedienung der Website unterstützen. Wenn sie professionell gestaltet und richtig eingesetzt sind, wird die Website intuitiv und kann von den Websitebesuchern effektiv genutzt werden.
Die Bausteine lassen sich in sechs Gruppen einteilen: Es gibt Orientierungselemente, Navigationselemente, Inhaltselemente, Layoutelemente und emotionale Elemente.
Bausteine des Screendesigns – Gruppe 1: Orientierungselemente
Eine Website muss dem Besucher Orientierung bieten, damit er immer weiß, wo er sich befindet und wo er das findet, was er sucht. Je umfangreicher eine Website, desto wichtiger sind Orientierungshilfen. Ein Besucher kann den Umfang einer Website selten erfassen, denn Ihn interessieren nicht alle Inhalte einer Website, sondern nur die, die er gerade sucht. Deshalb ist es wichtig, die Orientierungselemente so zu platzieren und zu gestalten, dass der Nutzer schnell die Informationen findet, die er sucht.
Dafür ist es hilfreich, dass der Seitentitel in der URL und als Überschrift der Seite auftaucht. Zudem ist ist auf vielen Websites die aktive Seite in der Navigation markiert. Eine weitere Orientierungshilfe ist eine Breadcrumb-Navigation auf der Seite.
Die Navigationen müssen logisch und nachvollziehbar aufgebaut sein, damit der Nutzer sie lecht verstehen kann. Andernfalls erzielen sie den entgegengesetzten Effekt und sind irritierend.
Auch Icons zählen können zu den Orientierungselementen gezählt werden, wenn sie so eingesetzt werden wie im oberen Beispiel von concepto DESIGN. Das Icon deutet grafisch an, was das Thema des Textes neben dem Icon ist. So helfen Icons dem Nutzer, sich schnell auf der Seite zu orientieren.
Bausteine des Screendesigns – Gruppe 2: Navigationselemente
Die Navigationselemente oder auch Menüs, helfen dem Nutzer, sich auf der Website zurechtzufinden. Bei einer gelungenen Navigation gelangt der Nutzer im besten Fall mit einem Klick dorthin, wo er will.
So einfach, wie es klingt, ist das aber nicht. Die Navigationelemente müssen durch Ihre Gestaltung klar darauf hinweisen, wohin sie den Websitebesucher führen. Anders ausgedrückt: Hinter einem Navigationspunkt muss sich das verbergen, was der Nutzer erwartet. Die Benennung der Navigationspunkte ist dabei entscheidend.
Außerdem sollte sich die Navigation dort befinden, wo der Nutzer sie ewartet und sie sollte sich deutlich von den anderen Elementen der Website abheben. Meistens befindet sich die Navigation am oberen Rand der Website oder oben am Seitenrand. Eine besondere Art der Navigation ist das Megamenü, welches bei sehr umfangreichen Websites eingesetzt wird. Erfahren Sie mehr zum Thema Websitenavigation in unserem Artikel zu Drop-Down-Menüs.
Bausteine des Screendesigns – Gruppe 3: Inhaltselemente
Inhaltselemente sind Texte, Bilder, Grafiken, Animationen u.ä. Sie vermitteln den eigentlichen Inhalt der Website. Die Inhaltselemente sollten leicht verständlich sein. Dies gilt besonders für die Texte, die in einer verständlichen Sprache geschrieben sein sollten. Komplizierte Formulierungen und Schchtelsätze sind hier eher ungünstig.Eine gute inhaltliche Struktur der Website, soll dem Nutzer einen schnellen Überblick ermöglichen, damit er schnell erkennt, ob es für ihn relevante Informationen gibt.
Die Schriftgröße und die Schriftfarbe in Kombination mit der Hintergrundfarbe sollte so gewählt werden, dass die Texte auf allen Bildschirmgrößen gut lesbar sind. Die Größen und Farben alle anderen Inhaltselemente sollten entsprechend nutzerfreundlich und responsiv gestaltet sein.
Bausteine des Screendesigns – Gruppe 4: Layoutelemente
Das Layout der Website dient der Ästhetik und der inhaltlichen Strukturierung der Website. Zu den Layoutelemente zählt das grafische Raster der Website. Weitere Layoutelemente sind grafische Elemente, wie Farbflächen, Schatten oder Linien. Diese Elemente führen bestimmte Inhalte optisch zu Einheiten zusammen und dienen so der Strukturierung der Website. Sie sind also deutlich mehr als nur Deko.
Aber Vorsicht: Beim Einsatz von Layoutelementen gilt in der Regel ‘Weniger ist mehr’. Man sollte eine Website nicht mit unnötigen Layoutelemente ohne strukturierende Funktion überfrachten. Denn das lenkt die Nutzer von den Inhalten ab und wirkt eher störend.
Bausteine des Screendesigns – Gruppe 5: Emotionale Elemente
Zu dieser Gruppe zählen vorallem Bilder und Farben. Sie erzeugen beim Nutzer bestimmte Emotionen und steigern das positive Erlebnis beim Besuch der Seite.Emotionen spielen eine große Rolle beim Webdesign, denn es ist wichtig sich mit emotionalen Elementen von der Konkurrenz abzuheben. In nahezu allen (Geschäfts-)Bereichen herrscht heutzutage ein Überangebot.
Die Angebote und Leistungen der Konkurrenten unterscheiden sich häufig nur geringfügig oder gar nicht und die Unterschiede sind für den Nutzer oft nur schwer zu erkennen. Deshalb entscheiden die meisten Menschen emotional, auch wenn sie Ihre Entscheidung rational begründen.Daher sollte man sich bei der Planung einer Website Gedanken zu den Themen Farbwirkung und Bildsprache machen, und sich bewusst entscheiden welche emotionale Wirkung man mit Farben und Bildern erzielen möchte.
Bausteine des Screendesigns – Gruppe 6: Interaktionselemente
Die Website-Navigation und die Links sind interaktive Elemente, mit denen der Nutzer auf der website agieren kann. Eine stärkere intraktive Wirkung haben allerdings Formulare und Buttons, die ebenfalls zu den Interaktionselementen zählen. In Formularen kann der Websitebesucher Informationen eingeben und Fragen stellen. Durch das Klicken auf Buttons schickt er Informationen ab, fordert Informationen an (z.B. Newsletter) oder führt verschiedene andere Aktionen aus.
Wichtig ist, dass bei der Nutzung interaktiver Elemente möglichst schnell eine Reaktion erfolgt (z.B. eine Antwort-Mail, ein Bestätigungstext), damit der Nutzer weiß, dass seine Aktion erfolgreich war. Bei Fehlern sollte es sofort eine Fehlermeldung geben, die den Nutzer darüber informiert, was er tun muss, um weiterzukommen.
