Einstieg von Philipp Krenke

Mediendesign Grundlagen · SoSe26

Web Interfaces

Wie Weboberflächen Aufmerksamkeit lenken und Verhalten sichtbar machen

Yasir Jumaah, Philipp Krenke, Toni Nguyen

Präsentiert von Philipp Krenke

Vier Punkte, ein roter Faden

Gliederung

1. Definition & Entwicklung

Von Hypertext zu responsiven und agentischen Interfaces.

2. Sehgewohnheiten

Wie Menschen Webseiten scannen, priorisieren und übersehen.

3. Desktop / Mobile

Gleiche Marke, andere Fläche, andere Bedienlogik.

4. Interaction & Microinteraction

Kleine Rückmeldungen machen Systeme verständlich.

Präsentiert von Toni Nguyen

Definition · Anfänge · technische Entwicklung

Vom Hypertext zum Interface

Punkt 1/4

Was ist ein Web Interface?

Web Interface ist die Benutzeroberfläche einer Website oder Webanwendung über die Menschen mit einem digitalen System im Internet interagieren können.

Präsentiert von Toni Nguyen

Vom Hypertext zur Webapp

Die technische Entwicklung verändert Schritt für Schritt, wie Nutzer Web Interfaces wahrnehmen und bedienen.

Punkt 1/4 · Definition & Entwicklung · Überblick

1989
Hypertext
Text, Links und vernetzte Dokumente.
1993
Browser
Bilder, Navigation und grafische Bedienung.
1996
CSS
Gestaltung wird vom Inhalt getrennt.
2005
AJAX
Webapps reagieren ohne komplettes Neuladen.

2007
Mobile
Multi-Touch und mobiles Web.
2010er
Frameworks
UI aus Komponenten.
2015+
App-ähnlich
PWAs und Design-Systeme.

Entwicklung ist hier nicht nur Technikgeschichte: Jede Phase verändert wie ein Interface aussieht und wie Nutzer handeln.

Präsentiert von Toni Nguyen

1989 bis frühe 1990er

Anfänge des Webs: Hypertext und statische Seiten

Punkt 1/4 · Definition & Entwicklung · Hypertext

Screenshot der ersten Website — Quelle: webdesignmuseum.org

Präsentiert von Toni Nguyen

1993 bis ca. 2001

Browser-Kriege: Mosaic, Netscape und Internet Explorer

Punkt 1/4 · Definition & Entwicklung · Browser

Apple Website aus dem Jahr 1995 — Quelle: webdesignmuseum.org

Präsentiert von Toni Nguyen

1994 bis ca. 2000er

CSS und HTML-Standardisierung

Punkt 1/4 · Definition & Entwicklung · Standards

Apple Website aus dem Jahr 1999 — Quelle: webdesignmuseum.org

Präsentiert von Toni Nguyen

2000er

Dynamische Webanwendungen

Punkt 1/4 · Definition & Entwicklung · Dynamik

YouTube Website aus dem Jahr 2007 — Quelle: webdesignmuseum.org

Präsentiert von Toni Nguyen

2007 bis 2015

Mobile Revolution und Responsive Design

Punkt 1/4 · Definition & Entwicklung · Mobile

Google auf einem mobilen Gerät — Quelle: webdesignmuseum.org

Präsentiert von Toni Nguyen

2010er bis heute

Moderne Webapps: Frameworks und Komponenten

Punkt 1/4 · Definition & Entwicklung · Frameworks

Bootstrap Interface Beispiel — Quelle: getbootstrap.com

Präsentiert von Toni Nguyen

2015 bis heute

App-ähnliche Web-Erlebnisse

Punkt 1/4 · Definition & Entwicklung · App-ähnlich

Pinterest Desktop Website — Quelle: pinterest.com

Pinterest mobile Website — Quelle: pinterest.com

Präsentiert von Yasir Jumaah

Sehgewohnheiten

Wie Menschen Websiten sehen

Punkt 2/4

Scannen statt linear lesen

Wir schauen auf Blickmuster, Viewports und mobile Sequenzen als Grundlage für Web Interface Design.

Präsentiert von Yasir Jumaah

Menschen lesen Websiten selten linear

Punkt 2/4 · Sehgewohnheiten · These

Kernthese

Sie scannen nach Relevanz, sparen Blickaufwand und folgen den stärksten visuellen Signalen.

01

Darum müssen Überschriften, erste Wörter, Bildausschnitte und Call-to-Actions die wichtigste Information tragen.

02

Schwache Hierarchie erzeugt F-Scanning: Nutzer bauen sich ihren eigenen schnellen Suchpfad.

03

Gute Gestaltung erzeugt geführtes Scannen: erkennbare Blöcke, klare Labels, visuelle Anker.

Präsentiert von Yasir Jumaah

F-Pattern: Wenn Text keine Führung gibt

Auf textlastigen Seiten konzentrieren sich Blicke häufig oben und links.

Punkt 2/4 · Sehgewohnheiten · Beispiel 01

ArtikelansichtHeatmap / Blickspur

Präsentiert von Yasir Jumaah

Z-Pattern: Wenn eine Seite eine klare Aktion hat

Auf visuellen, textarmen Seiten wandert der Blick häufig über starke Ankerpunkte.

Punkt 2/4 · Sehgewohnheiten · Beispiel 02

Brand

FeaturesPreise Starten

Eine klare Botschaft

Wenig Text, starke visuelle Anker und ein eindeutiger Call to Action.

Präsentiert von Yasir Jumaah

Layer-Cake: Gute Überschriften führen den Blick

Wenn Inhalte sichtbar gegliedert sind, springen Blicke von Abschnitt zu Abschnitt.

Punkt 2/4 · Sehgewohnheiten · Beispiel 03

Was ist ein Web Interface?

Wie erkenne ich Relevanz?

Welche Aktion ist möglich?

Was passiert nach dem Klick?

Präsentiert von Yasir Jumaah

Above the Fold: Was ohne Scrollen sichtbar ist

Der Fold ist die untere Kante des aktuellen Viewports, nicht ein fixer Punkt auf der Seite.

Punkt 2/4 · Sehgewohnheiten · Beispiel 04

Above the fold

Sichtbar ohne Scrollen

Orientierung, Hauptbotschaft und erste Handlung müssen im aktuellen Viewport erkennbar sein.

Call to Action

Fold = untere Kante des sichtbaren Viewports

Präsentiert von Yasir Jumaah

Mobile Visual Hierarchy: CTA dort, wo der Daumen ist

Auf kleinen Screens entscheidet nicht nur Reihenfolge, sondern auch Erreichbarkeit.

Punkt 2/4 · Sehgewohnheiten · Beispiel 05

Mobile Interface Vergleich mit guter und schlechter CTA-Platzierung

01

Sichtbar: CTA wird schnell erkannt.

02

Erreichbar: Aktion liegt im Daumenbereich.

03

Ausführbar: weniger Aufwand bis zur Handlung.

Präsentiert von Philipp Krenke

Desktop / Mobile Interfaces

Gleiche Marke, andere Fläche

Punkt 3/4

Vergleich an konkreten Beispielen

Airbnb, YouTube, Instagram und Amazon zeigen, wie Layout, Navigation, Interaktion und Priorisierung wechseln.

Präsentiert von Philipp Krenke

Layout: Wie sich Inhalte anpassen

Punkt 3/4 · Desktop vs. Mobile · Beispiel 01

Präsentiert von Philipp Krenke

Navigation: Sichtbar vs. Versteckt

Punkt 3/4 · Desktop vs. Mobile · Beispiel 02

Präsentiert von Philipp Krenke

Interaktion: Maus vs. Touch

Punkt 3/4 · Desktop vs. Mobile · Beispiel 03

Präsentiert von Philipp Krenke

Content-Priorisierung: Was zuerst sichtbar ist

Punkt 3/4 · Desktop vs. Mobile · Beispiel 04

Präsentiert von Philipp Krenke

Erkenntnis: Desktop und Mobile priorisieren anders

Nutzer verhalten sich auf Desktop und Mobile völlig verschieden. Platz, Eingabegerät und Situation bestimmen, was zuerst sichtbar sein muss.

Punkt 3/4 · Desktop vs. Mobile · Erkenntnis

Desktop

Konzentriert, präzise und oft mit mehr Zeit: Desktop kann mehr Informationen gleichzeitig zeigen.

Mobile

Unterwegs, schnell und daumenbasiert: Mobile muss Wege verkürzen und große Ziele anbieten.

Platz bestimmt Prioritäten

Weniger Platz bedeutet mehr Fokus: Navigation, Details und Nebeninformationen werden reduziert.

Fazit

Desktop zeigt viel. Mobile zeigt das Wichtigste.

Präsentiert von Yasir Jumaah

Interaction / Microinteraction

Kleine Signale, große Wirkung

Punkt 4/4

Feedback macht Interfaces verständlich

Jetzt geht es darum, wie Web Interfaces auf Eingaben reagieren und Zustände sichtbar machen.

Präsentiert von Yasir Jumaah, Philipp Krenke

Interaktionen zwischen Mensch und Maschine

Punkt 4/4 · Interaction & Microinteraction · Grundlage

Interaction beschreibt bewusste Handlungen, die Nutzer auf einer Website ausführen, um Inhalte zu steuern.

Microinteractions sind kleine funktionale Animationen oder Reaktionen, die nach einer Nutzeraktion auftreten.

Präsentiert von Yasir Jumaah

Interaction: Wie Nutzer mit Interfaces handeln

Interaction umfasst alle aktiven Handlungen, mit denen Nutzer Inhalte steuern und durch eine Seite navigieren.

Punkt 4/4 · Interaction · Handeln

Klicken

Buttons, Links, Menüs und Icons auslösen.

Scrollen

Inhalte sichtbar machen und den Lesefluss steuern.

Tippen

Suchfelder, Formulare und Kommentare ausfüllen.

Wischen

Zwischen Inhalten, Seiten oder Browserzuständen wechseln.

Drag & Drop

Elemente verschieben, sortieren oder hochladen.

Präsentiert von Philipp Krenke

Microinteractions: Kleine Rückmeldungen mit großer Wirkung

Kurze visuelle, akustische oder haptische Reaktionen beantworten die zentrale Nutzerfrage: Hat meine Aktion funktioniert?

Punkt 4/4 · Microinteraction · Feedback

Hover-Effekt

Ein Element reagiert sichtbar und wirkt klickbar.

Like-Animation

Eine Aktion bekommt sofort eine emotionale Rückmeldung.

Ladeindikator

Das System zeigt, dass es arbeitet und nicht eingefroren ist.

Fehlermeldung

Probleme werden konkret und handlungsorientiert sichtbar.

Orientierung

Nutzer fühlen sich verstanden, weil das Interface antwortet.

Präsentiert von Yasir Jumaah, Philipp Krenke

YouTube Mobile Web: Gesten steuern den Kontext

Auf mobilen Websites treffen Website-Interaktion und Browser-Gesten direkt aufeinander.

Punkt 4/4 · Interaction & Microinteraction · Beispiel

Illustration von Interaktionsgesten auf einem Smartphone

↓

→

←

Nach unten ziehen

Pull-to-refresh lädt den aktuellen Feed neu.

Die Microinteraction zeigt: Das System hat die Geste erkannt.

Von links nach rechts wischen

Zur vorherigen Seite in der Browser-History.

Die Website wirkt wie eine App, bleibt aber im Browserkontext.

Von rechts nach links wischen

Zur nächsten Seite, wenn ein Verlauf vorhanden ist.

Gesten sind Interaktion, sichtbares Feedback ist Microinteraction.

Präsentiert von Toni Nguyen

Was gute Microinteractions ausmacht

Microinteractions sollen Aufgaben unterstützen. Sobald sie Aufmerksamkeit ohne Nutzen binden, werden sie zur Störung.

Punkt 4/4 · Microinteraction · Qualität

Gut: schnell

Die Rückmeldung kommt sofort und verzögert die Handlung nicht.

Gut: subtil

Die Animation ist sichtbar, aber nicht nervig oder dominant.

Gut: klar

Nutzer verstehen direkt, was passiert ist und was als Nächstes möglich ist.

Schlecht: unklar

Die Rückmeldung sagt nicht, ob die Aktion erfolgreich war.

Schlecht: übertrieben

Zu viel Bewegung lenkt vom eigentlichen Ziel ab.

Präsentiert von Toni Nguyen

Was moderne Interfaces auszeichnet

Moderne Interfaces verbinden klare visuelle Führung mit schnellen Rückmeldungen, die Nutzer kaum bewusst bemerken müssen.

Punkt 4/4 · Interaction & Microinteraction · Erkenntnis

Klare Hierarchie

Wichtige Inhalte und Aktionen sind zuerst erkennbar.

Diskrete Reaktion

Microinteractions bestätigen Aktionen, ohne die Aufgabe zu unterbrechen.

Nutzerfeedback

Das Interface zeigt Zustand, Erfolg, Fehler oder Fortschritt.

Unbewusste Bedienbarkeit

Gute Rückmeldungen fühlen sich selbstverständlich an.

Quellen

•
Web Design Museum
https://www.webdesignmuseum.org/
•
WHATWG HTML Living Standard
https://html.spec.whatwg.org/multipage/
•
AngularJS
https://en.wikipedia.org/wiki/AngularJS
•
W3C HTML 3.2 Reference Specification
https://www.w3.org/TR/2018/SPSD-html32-20180315/
•
CSS
https://en.wikipedia.org/wiki/CSS
•
Browserkrieg
https://de.wikipedia.org/wiki/Browserkrieg
•
NCSA Mosaic
https://www.ncsa.illinois.edu/research/project-highlights/ncsa-mosaic/
•
CERN Line Mode Browser
https://line-mode.cern.ch/
•
CERN: A Short History of the Web
https://home.cern/science/computing/birth-web/short-history-web
•
SEEBURGER: Evolution des Internets
https://blog.seeburger.com/de/die-evolution-des-internets-von-web-1-0-2-0-3-0-bis-4-0/
•
Botland: Geschichte des Internets
https://botland.de/blog/geschichte-des-internets-vom-web-1-0-zum-web-3-0-und-4-0/
•
Basecamp.digital: Web 1.0 bis 4.0
https://www.basecamp.digital/web-1-0-bis-4-0-von-websites-ueber-semantik-zur-kuenstlichen-intelligenz/
•
Webgalaxie: Web 4.0
https://www.webgalaxie.com/aktuelles/web-4-0/
•
LinkedIn: From Web 1.0 to 4.0
https://de.linkedin.com/pulse/from-web-10-40-dot-com-lessons-shaping-todays-ai-boom-tiryaki-phd-lllqc?tl=de
•
ResearchGate: Evolution of the Web from Web 1.0 to 4.0
https://www.researchgate.net/publication/352892794_Evolution_of_the_Web_from_Web_10_to_40

Quellen

•
Nielsen Norman Group: F-Shaped Pattern For Reading Web Content
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/
•
Nielsen Norman Group: How People Read Online
https://www.nngroup.com/articles/how-people-read-online/
•
Nielsen Norman Group: Scrolling and Attention
https://www.nngroup.com/articles/scrolling-and-attention/
•
Nielsen Norman Group: The Layer-Cake Pattern
https://www.nngroup.com/articles/layer-cake-pattern-scanning/
•
Nielsen Norman Group: Images on Mobile
https://www.nngroup.com/videos/mobile-images/
•
Creative Bloq: Design jargon explained: the Z-Pattern
https://www.creativebloq.com/web-design/design-jargon-explained-z-pattern-71515717
•
Baymard Institute: Mobile Product Lists
https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/product-list
•
DianApps/Medium: The Power of Visual Hierarchy
https://medium.com/@dianappstechnology/the-power-of-visual-hierarchy-design-for-attention-and-clarity-aeb0e260ddd6
•
Bootstrap
https://getbootstrap.com/
•
Pinterest
https://www.pinterest.com/
•
Amazon
https://www.amazon.com/
•
Instagram
https://www.instagram.com/
•
Youtube
https://www.youtube.com/
•
Airbnb
https://www.airbnb.com/

Mediendesign Grundlagen · SoSe26

Danke
fürs Zuhören

Yasir Jumaah, Philipp Krenke, Toni Nguyen

Web Interfaces

1. Definition & Entwicklung

2. Sehgewohnheiten

3. Desktop / Mobile

4. Interaction & Microinteraction

Vom Hypertext zum Interface

Was ist ein Web Interface?

Hypertext

Browser

CSS

AJAX

Mobile

Frameworks

App-ähnlich

Wie Menschen Websiten sehen

Scannen statt linear lesen

Gleiche Marke, andere Fläche

Vergleich an konkreten Beispielen

Desktop

Mobile

Platz bestimmt Prioritäten

Fazit

Kleine Signale, große Wirkung

Feedback macht Interfaces verständlich

Klicken

Scrollen

Tippen

Wischen

Drag & Drop

Hover-Effekt

Like-Animation

Ladeindikator

Fehlermeldung

Orientierung

Gut: schnell

Gut: subtil

Gut: klar

Schlecht: unklar

Schlecht: übertrieben

Klare Hierarchie

Diskrete Reaktion

Nutzerfeedback

Unbewusste Bedienbarkeit

Web Design Museum

WHATWG HTML Living Standard

AngularJS

W3C HTML 3.2 Reference Specification

CSS

Browserkrieg

NCSA Mosaic

CERN Line Mode Browser

CERN: A Short History of the Web

SEEBURGER: Evolution des Internets

Botland: Geschichte des Internets

Basecamp.digital: Web 1.0 bis 4.0

Webgalaxie: Web 4.0

LinkedIn: From Web 1.0 to 4.0

ResearchGate: Evolution of the Web from Web 1.0 to 4.0

Nielsen Norman Group: F-Shaped Pattern For Reading Web Content

Nielsen Norman Group: How People Read Online

Nielsen Norman Group: Scrolling and Attention

Nielsen Norman Group: The Layer-Cake Pattern

Nielsen Norman Group: Images on Mobile

Creative Bloq: Design jargon explained: the Z-Pattern

Baymard Institute: Mobile Product Lists

DianApps/Medium: The Power of Visual Hierarchy

Bootstrap

Pinterest

Amazon

Instagram

Youtube

Airbnb

Dankefürs Zuhören

Danke
fürs Zuhören