kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Wann Modal, Dialog, Lightbox, PopUp & Co. verwendet werden

Die Begriffe Modal, Dialog, Lightbox, PopUp usw. werden häufig nicht trennscharf verwendet. Doch es gibt klare Unterschiede wann ein Dialog modal ist und wann nicht – was den Dialog zum PopUp macht und was zur Lightbox.

Raimund und Jonas haben vor einiger Zeit im t3n Magazin einen Artikel zu diesem Thema veröffentlicht. Die Nielson Norman Group zeigt in einen ausführlichen Beitrag, mit vielen Beispielen, ebenfalls anschaulich die Unterschiede auf.

Direkter Link zum Artikel

Component Names im Vergleich

Die Benennung von Komponenten kann zu den schwierigsten Aufgaben bei der Entwicklung von Design Systemen und Component Libraries gehören. Ziel einer sinnvollen Benennung sollte es sein, den Kompromiss zwischen dem – aus Sicht von UX/UI und Frontend – fachlich korrekten, und einem allgemein verständlichen Begriff zu finden.

Bei Komponenten wie dem »Button« sind sich die meisten Beteiligten noch einigermaßen einig. Aber was unter einem »Panel« oder einer »Toolbar« verstanden wird, kann mitunter weit auseinander klaffen.

Die Website Open UI fasst in einer Component Name Matrix die verwendeten Begriffe populärer Design Systeme zusammen und vergleicht die Häufigkeit.

Alles über die CSS-Eigenschaft »hyphens«

Mit der CSS-Eigenschaft »hyphens« wird die Gestaltung von typografisch ansprechenden Texten im Web deutlich vereinfacht. Lange Zeit wurde das Thema von den Browser-Herstellern vernachlässigt, obwohl eine funktionierende Silbentrennung eine sehr wichtige Grundlage für einen ausgeglichenen Blocksatz ist.

Mittlerweile wird die automatische Silbentrennung von vielen Browsern unterstützt -- wenn nicht vollständig, dann zumindest teilweise (siehe caniuse.com). Im Artikel »All you need to know about hyphenation in CSS« stellt der Designer und Typografie-Spezialist Richard Rutter die CSS3-Funktion »hyphens« detailliert und anschaulich vor.

<select>-Listen und Barrierearmut

Die nativen Formular-Elemente von HTML werden in verschiedenen Browsern und Betriebssystem sehr unterschiedlich dargestellt und bedient. Das widerspricht häufig der gewünschten Ästhetik. Da nicht alle Formularelemente visuell angepasst werden können, werden die Elemente häufig selbst nachgebaut. Dabei wird i.d.R. die Barrierearmut schlechter.
Sarah Highley beschreibt in einer zweiteiligen Artikelserie sehr detailliert worauf zu achten ist und warum das native Element – trotz fehlender Anpassungsmöglichkeiten – meist die beste Wahl ist.

Direkter Link zum Artikel

Warum die 3-Klick-Regel für Websites falsch ist

Eine der bekanntesten Regeln für eine gelungene Navigation auf Websites ist die sog. 3-Klick-Regel. Diese besagt, dass alle Unterseiten mit maximal drei Klicks erreicht werden müssen. Warum diese Regel nicht bzw. nicht mehr funktioniert, hat die Nielson Norman Group detailliert beschrieben. Zwar sollte der Weg zum Ziel immer noch möglichst kurz sein, doch nicht jeder Klick wird von den Seitenbesuchern gleich empfunden.

Direkter Link zum Artikel

Der Status von UX-Design im Jahr 2020

Es ist das Ziel von User Experience (UX)-Design, die Bedürfnisse und Erfahrungen der User umfassend zu berücksichtigen und in einem möglichst benutzerfreundlichen Interface umzusetzen. Zu den Herausforderungen und Chancen, die im nächsten Jahr auf UX-Designer zukommen, hat Fabricio Teixeira eine aufschlussreiche Liste zusammengestellt.
Sein Trendbericht ist eine ganzheitliche Analyse von UX-Design und geht weniger auf visuelle UI Trends ein.

Direkter Link zum Artikel