In Teil 2 haben wir euch mit dem Entstehungsprozess einer Website und den Grundregeln des Webdesigns bekannt gemacht. Im 3. und letzten Teil folgt nun unser kleines Lexikon der Webseitenelemente, damit ihr euch zwischen den Fachbegriffen zurechtfindet.

Zum Aufbau einer Website

Viele der überwiegend englischen Fachbegriffe im Webdesign Universum versteht man intuitiv. Andere wiederum klingen vertraut, man wüsste aber nicht, wie man sie im Kontext einer Website in einer kurzen Definition auf den Punkt bringen sollte. Und dann gibt es noch die Begriffe, mit denen nur ein ausgebildeter Webdesigner etwas anzufangen weiß. Wir haben vorsichtshalber einmal alle erklärt.

Onepager vs. Multipager

Hier ist der Name Programm. Schnell hat man verstanden, dass es sich um zwei verschiedene Typen der Website handelt. Die eine verfügt über mehrere Unterseiten, die andere nicht. Doch was sind die Vorteile des jeweiligen Modells? Ist weniger auf Websites etwa mehr? Hier die Vor- und Nachteile beider Modelle auf einen Blick:

 

Onepager Multipager

Vorteile

 

  • vor allem für Handy und Tablet geeignet
  • relevante Informationen auf einem Blick
  • Digitales Storytelling
  • höhere Conversion Rates, geringere Ladezeiten & weniger mobiles Datenvolumen*

Vorteile

 

  • Conversion Funnels
  • gute Suchmaschinen-Optimierung
  • SEO & Tracking für jede einzelne Seite möglich
  • Auffächerung von Inhalten
  • übersichtlichere Struktur
  • User hat mehr Möglichkeiten

Nachteile

  • Seiten können je nach Informationsmenge sehr lang werden
  • SEO weniger tiefgreifend
  • Tracking erschwert
  • nicht für komplexe Themen geeignet
  • ggfs. lange Ladezeiten bei großen Inhalten*


*abhängig von Inhalten

Nachteile

 

  • große Ladezeiten, v.a. mobil
  • Usability erschwert

Webseitenelemente

Dropdown Listen

Hierbei handelt es sich um ein Steuerelement einer grafischen Benutzeroberfläche. Der Name leitet sich vom englischen “herunterfallen” ab und bezieht sich darauf, dass sich eine Liste aufklappt, sobald der mit ihr verknüpfte Button gedrückt wird. Der User kann hierüber zu verschiedenen Unterkategorien springen. Entweder wird er dadurch auf eine sich neu aufbauende Unterseite geleitet oder zu einem sogenannten Jump Point, einem Punkt weiter unten auf einem Onepager. Der Vorteil einer Dropdown Liste ist, dass viele Unterkategorien aufgelistet werden können, ohne die Startseite zu überladen.

Toggles

Toggles sind Dropdown Listen sehr ähnlich. Auch hier wird bei Drücken des Buttons eine Liste nach unten ausgeklappt. Allerdings lagert sich diese nicht über den Webseiten Inhalt, sondern verschiebt diesen soweit nach unten, dass er auch beim Aufrufen des Toggles vollständig sichtbar bleibt.

Breadcrumbs

Die Brotkrümelnavigation erweckt sofort die Assoziation zu Hänsel und Gretel. Und genau daher stammt der Begriff auch. Genau wie die Brotkrumen im Märchen sollen die breadcrumbs die Navigation durch lange Elementketten vereinfachen. Sie stellen dar, in welchem Elementzweig sich der User gerade befindet und lassen ihn die Schritte nachvollziehen, durch die er an diesen Punkt gekommen ist.

Slider

Slider sind Einschubelemente, auf denen über aktuelle Angebote und Neuerungen informiert werden kann. Meistens sind sie animiert und können mit selbst-rotierenden Werbeplakaten verglichen werden, die ihr Bild nach einigen Sekunden wechseln. Jüngste Studien zeigen allerdings, dass sie oft als zu penetrant wahrgenommen und deswegen von Nutzern übergangen werden.

Tags

Tags, heute noch besser bekannt in ihrer Social Media Form der #hashtags sind Oberbegriffe mit denen einzelne Elemente verschlagwortet werden können, um sie zu verbinden. Beispielsweise bieten unsere Blogeinträge auch die Möglichkeit, über einen Klick auf einen Hashtag nach verwandten Themen zu suchen. Sie dienen dazu, Inhalte zu klassifizieren und zusammenzufassen. Darüber garantieren sie die Auffindbarkeit auch noch nach langer Zeit, wenn ein Element wie ein Blogeintrag durch das Hinzukommen neuer Einträge immer weiter in den Hintergrund gerückt ist.

Icons

Icons sind die Hieroglyphen des Webdesigns. Es handelt sich dabei um selbsterklärende Piktogramme, die die Navigation durch ihre visuelle Vermittlung von Botschaften stark erleichtert. Wir sind längst daran gewöhnt, dass eine Sprechblase uns zu einer Chat-Funktion führt und wir mit einem stilisierten Kalenderblatt einen Termin buchen können.

Für eine Erläuterung der Abkürzungen UI und UX schaut im ersten Teil unserer Reihe vorbei!