Lektion 3 und 5

Schnell und leicht auffindbare Informationen

Interessantes Erlebnis

Positives Image

• Organisationssystem: Das Organisationssystem beschreibt, wie die Informationen der Webseite kategorisiert sind, welche Seitentypen ausgewählt wurden und wo verschiedene Elemente auf den einzelnen Seiten platziert sind.

• Labeling-System: Das Labeling-System beschreibt, wie die Informationen repäsentiert werden. Welche Bezeichnungen für Buttons, Kategorien, Navigationselemente werden gewählt? Mit welcher Sprache werden die Nutzer angesprochen?

• Navigationssystem: Mithilfe des Navigationssystems können sich Nutzer sicher von Seite zu Seite innerhalb einer Webpräsenz bewegen. Zudem unterstützt es den Nutzer bei der Orientierung innerhalb der Webpräsenz.

• Suchsystem: Mithilfe des Suchsystems kann der Nutzer zielgerichtet zu bestimmten Inhalten geleitet werden.

thematische Unterteilung der Website

Sollte immer aus Sicht der Nutzerbedürfnisse aufgebaut sein bspw mit Hilfe der Card sorting Methode

Zunächst werden die geplanten Inhalte der Website auf einzelne Karteikarten geschrieben und unsortiert auf dem Tisch verteilt. Wichtig ist, dass ausschließlich die Inhalte, nicht aber geplante Kategorienüberschriften auf den Karteikarten notiert werden. Die Aufgabe des Testprobanden besteht darin, die einzelnen Karteikarten mit den Inhalten sinnvoll zu gliedern. Im Anschluss wird der Proband gebeten, für jede Gruppe einen passenden Kategorientitel zu finden und zu notieren. Um zusätzliche Hintergründe zu erfahren, kann der Versuchsleiter den Probanden bitten, seine Gedanken während der Sortierung auszusprechen, was der „Think Aloud“-Methode entspricht. Um nach der Fertigstellung der Aufgabe weitere Hintergründe und Details zu bekommen, kann der Versuchsleiter eine Abschlussbefragung durchführen. Durch das Card Sorting können die mentalen Modelle der Probanden erfasst und Informationen über die Zusammenhänge einzelner Themen gesammelt werden. Die Methode kann vor der Gestaltung der Informationsarchitektur sowie zur Überprüfung und Optimierung eingesetzt werden.

die Struktur auf einer einzelnen Webseite innerhalb der Webpräsenz. Dies betrifft die Gestaltung der einzelnen Seiten eines Webauftritts sowie die Auswahl des jeweiligen Seitentyps.

Da der Nutzertyp „Sucher“ eine klare Vorstellung seines Suchziels hat, sucht er auf Websites gezielt, fokussiert und ergebnisorientiert. Dagegen sucht der User-Typ „Browser“ eher explorativ. Er hat meist nur eine vage Vorstellung des Suchziels, er lässt sich gerne inspirieren und stöbert durch die angeboten Informationen eher erlebnisorientiert. Der dritte User-Typ kann als „Researcher“ bezeichnet werden. Er hat keine klare Vorstellung seines Suchziels aber genügend Zeit und Motivation für eine vollumfängliche Recherche. Er sucht umfassende, fundierte Informationen und sammelt die dargebotenen Inhalte. Diese Charakterisierung eines Nutzers ist jedoch nicht permanent, sie kann sich im Suchverlauf des Nutzers über die Zeit ändern. Auch können Mischformen auftreten.

optimale Anpassung auf unterschiedliche Bildschirmgrößen, indem sie auf drei Kernelemente zurückgreifen: ein fluides Layout, anpassungsfähige Inhalte sowie Layout-Umbrüche durch Media Queries.

Festes Layout

lässt sich nicht auf unterschiedliche Bildschirmgrößen anpassen. Die Dimensionen des festen (oder fixen) Layouts sind in der Einheit Pixel angegeben. Wenn der Bildschirm zu klein ist, werden Scroll-Balken angezeigt. Bei mobilen Geräten wird mitunter das komplette Layout auf einen Standardwert linear herunterskaliert

Fluides Layout

(oder flexible) wird in Prozent im Verhältnis zum Anzeigefenster definiert. Folglich ändern sich die Dimensionen des Layouts mit einer Änderung der Größe des Fensters. Inhaltselemente wie Bilder und Texte bleiben in der ursprünglichen Größe erhalten

Adaptives Layout

Das adaptive Layout ist im Grunde ein festes Layout, welches in verschiedenen Varianten existiert. Wird die Fenstergröße verändert, so „springt“ das Layout zwischen den Varianten um. Folglich bietet das adaptive Layout eine sprungweise Anpassung zwischen mehreren fixen Darstellungsgrößen. Der Wechsel zwischen den festen Layouts findet an definierten Umbruchpunkten statt. Zwischen einzelnen Umbruchpunkten verhält sich dagegen das Layout wie ein festes Layout

Responsive Layout

Die positiven Eigenschaften des adaptiven sowie des fluiden Layouts sind im responsiven Layout vereint. Es enthält ebenfalls Umbruchpunkte wie beim adaptiven Layout, ab denen sich das Layout deutlich verändert. Zwischen den Umbruchpunkten verhält es sich dagegen wie ein fluides Layout. Zudem ist das responsive Layout mit skalierbaren Inhalten ausgestattet. Folglich passen sich beispielsweise Bilder an den verfügbaren Platz an

Um eine responsive Website zu gestalten, ist die Erstellung eines anpassungsfähigen Grid-Systems nötig. Folglich müssen Grid-Systeme mit festen Pixelwerten in ein fluides Raster mit Prozentwerten umgewandelt werden

Ein weitverbreitetes Grid-System, das auf dem fluiden Layout basiert, verwendet einen Header-Bereich, gefolgt von einem dreispaltigen Layout mit Navigation, Hauptinhalt und Seitenleiste sowie einem Footer.

• Beide Layout-Typen passen sich für unterschiedliche Bildschirmgrößen an. Somit sind sie einem festen Website Layout auf mobilen Endgeräten überlegen.

• Beim adaptiven Layout finden die Umbrüche nur an zugewiesenen Breakpoints statt, dazwischen bleibt die Seite unverändert. Folglich kann die Website mitunter nur für die adressierten Bildschirmgrößen optimal aussehen. Neben dem Nachteil der Sprunghaftigkeit ist mitunter der Platz nicht immer optimal ausgenutzt.

• Das adaptive Layout bietet dem Designer im Vergleich zum responsiven Layout mehr Detailkontrolle.

• Das responsive Layout bietet eine höhere Flexibilität für alle Bildschirmgrößen.

• Ob das adaptive oder das responsive Layout einen höheren Aufwand darstellt, ist abhängig vom Layout Pattern, der Anzahl der Umbruchpunkte sowie dem Ausmaß, in dem sich die Gestaltungselemente der Webseite (Bilder etc.) verändern sollen.

Tiny Tweaks ist das einfachste Darstellungsmuster. Es beschreibt ein einfaches, einspaltiges Website-Konzept, welches sich auf fluide Art an jede Breite anpasst. Dieser Ansatz wir auch als Mobile Only bezeichnet. Das Layout verändert sich zwischen den verschiedenen Ausgabemedien kaum. „Kleine Optimierungen“ werden vornehmlich hinsichtlich der Anpassung von Schriftgrößen, -abständen und Mediengrößen gemacht

Das weitverbreitete Darstellungsmuster „Mostly Fluid“ besteht aus einem zwei- oder mehrspaltigen Layout. Dabei ist die Spaltenbreite flexibel und die Inhalte passen sich fließend der Screen-Größe an. Das Smartphone-Layout unterscheidet sich am meisten von den anderen, hier werden die Spalten nicht nebeneinander, sondern untereinander angeordnet. Bei sehr großen Screen-Größen entsteht Weißraum am Rand

Column Drop ist ebenso ein weit verbreitetes Darstellungsmuster. Das mehrspaltige Layout reduziert die Spaltenzahl mit abnehmender Screen-Größe. Im Gegensatz zum Mostly Fluid Pattern bleibt die Größe der Inhaltselemente in diesem Layout annähernd konstant. Die Anpassung auf verschiedene Screen-Größen besteht vorrangig darin, dass die Spalten abgesenkt, d. h. von einer horizontalen Anordnung schrittweise in eine vertikale Anordnung überführt werden, wenn die Screen-Größe schrittweise abnimmt

Das Darstellungsmuster Layout Shifter ist sehr anpassungsfähig gegenüber unterschiedlichen Screen-Größen. Es bietet einen großen gestalterischen Spielraum, erzeugt bei der Umsetzung aber die meiste Arbeit.

Das Off-Canvas-Konzept ist nicht nur ein Layout-Konzept, sondern gleichzeitig ein Menükonzept. Ziel des Off-Canvas-Konzepts ist es, die aktuell nicht benötigten Inhalte bei kleinen Screen-Größen aus dem sichtbaren Bereich herauszuschieben. Diese sind aber nur eine einfache Touch-Geste entfernt und schieben sich so bei Bedarf seitlich oder von oben wieder in den sichtbaren Bereich hinein.Das Off-Canvas-Darstellungsmuster ist weitverbreitet auch bei nativen Apps, beispielsweise von Facebook oder Spotify, die so ihre Navigation realisieren