CSS/Tutorials/Benutzeroberfläche
- 30min
- leicht
- Grundkenntnisse in
Die Benutzeroberfläche (engl. User Interface) ist im Allgemeinen das Anzeigefenster als Teil der Arbeitsumgebung des Anwenders. Da es in die Ebenen des Betriebssystems und des Browsers eingebettet ist, übernehmen gerade interaktive Formular-Elemente wie Buttons und Eingabefelder das Look and Feel der gewohnten Arbeitsumgebung.[1]
CSS bietet einige Möglichkeiten, die Benutzeroberfläche abweichend vom gewohnten UI zu gestalten. Dieser Kurs zeigt, wie man eigenen Seiten ein Branding in den Firmenfarben geben, aber dabei das gewohnte Look und Feel der OS-Einstellungen/ Browser-Stylesheets erhalten kann.
- UI und UX
- Was ist das überhaupt?
- Benutzerfreundlichkeit
- Widgets gestalten
- Themes farbig gestalten
- Benutzereinstellung abfragen
- color-scheme für Dark Mode
- theme-color
- Scrollleisten
- Anzeigegeräte
- Größenänderungen mit resize
Inhaltsverzeichnis
UI und UX - was ist das überhaupt?
Information: UX-Design
UX (User Experience) ist eine Disziplin des Designs, die sich mit der Gestaltung von Benutzeroberflächen für die Kommunikation zwischen Mensch und Maschine beschäftigt. Dafür werden die Bedingungen, Ziele und Hindernisse dieser Interaktion sowohl von menschlicher als auch von technischer Seite erforscht und später – soweit möglich – auf den Menschen hin optimiert.
Ziel ist eine Anwenderschnittstelle, die so gestaltet ist, dass ein möglichst breiter Kreis von Nutzern eine optimale Wunsch-/Bedürfnis-/Zielerfüllung durch angemessene Handlungsschritte erfährt.
UI ist die Abkürzung für „User Interface“ (deutsch: Benutzerschnittstelle). Damit ist die Verbindung zwischen Computer und Benutzer gemeint.
Ursprünglich auf Lochkarten beschränkt, wurde bald die Eingabe mit einer Tastatur und Ausgabe am Bildschirm zum Standard. Während sich das Tastatur-Layout im Laufe der Jahre nur unwesentlich geändert hat, wurde die Gestaltung der Benutzerschnittstelle Bildschirm immer wichtiger:
- Monitore wurden größer,
- Elemente nebeneinander positioniert und
- der Einsatz von Farben ermöglichte Akzentfarben, aber auch eine Farbenvielfalt, die die Nutzer teilweise verwirrte.[2]
Neben der Tastatur revolutionierte die Maus die Benutzerfreundlichkeit von Computern. Das Navigieren mit Pfeiltasten und Tastaturkürzeln (in Kombination mit den Tasten shift, control oder alt) wurde nun durch eine schnelles Ziehen der Maus auf die gewünschte Stelle und ein Schweben, Klick oder gar ein Doppelklick ergänzt. Allerdings hat die Verbreitung moderner Touchscreens mit Taps und Wischgesten dazu geführt, dass ein Tap zwar einem Klick entspricht - ein Doppelklick mit den Fingern und auch das beliebte Hovern, um weitere Informationen einzublenden, aber nicht mehr ohne weiteres möglich ist.
Deshalb ist die im 4. Kapitel vorgestellte Gestaltung des cursor (wie der Einsatz von Dropdown-Menüs) schon wieder fragwürdig, da die Hälfte der Nutzer dies gar nicht sehen können.
Bereits heute kommen noch Sprachschnittstellen wie „Alexa“ und „Siri“, die Webseiten im Auto vorlesen, aber auch auf Spracheingabe reagieren, teilweise sogar schon Gestensensoren dazu.
Das vorliegende Tutorial beschränkt sich auf das visuelle Design der Benutzeroberfläche „Bildschirm“; der Umgang mit realen Schnittstellen, über die der Nutzer interagiert, sollte aber immer auch die Alternativen im Blick haben. Ziel ist es, eine Benutzeroberfläche zu schaffen, die leicht verständlich und einfach zu bedienen ist. [3]
Benutzerfreundlichkeit
Unter Benutzerfreundlichkeit (englisch: usability), auch Gebrauchstauglichkeit oder Software-Ergonomie, versteht man die Kunst, der Absicht eines Anwenders möglichst direkt entgegen zu kommen. Ein Benutzer ist bereits von Erfahrungen geprägt und erwartet deshalb, dass eine Seite nach bestimmten Konventionen aufgebaut ist.
“Never surprise the user!”
„Überrasche niemals den Benutzer!“
Principle of Least Surprise (Wikipedia)[4]
- Ein prominenter Titel sollte den Anwender über den Hauptinhalt der Seite informieren.
- Menüs und Navigation
- Navigationselemente sollten gut erreichbar sein, und der User sollte mit wenigen Klicks jede Seite einer Webpräsenz erreichen können.
- Bei Dropdown-Menus wird oft die Tastaturbedienung vernachlässigt, die zugegebenermaßen schwierig zu gestalten ist.
Hauptartikel: Navigation/Dropdown-Menü
- Formulare
- der Zweck jedes Formularelements deutlich sein
- eine Eingabe schon vor dem Absenden überprüft werden
- eine Vorschau, bzw. Kontrollausgabe angezeigt werden
- Auf kleinen Viewports (mobile Geräte) sollten Buttons größer dargestellt werden, da man mit dem Finger nicht so genau wie mit einer Maus zielen kann
Hauptartikel: Formulare/Benutzereingaben zugänglich gestalten
Selbsternannte SEO-Experten versprechen durch Usability-Tests die Konversionrate Ihrer Webseite zu verbessern. Als Ergebnis dieser Tests werden oft lediglich dieselben Tipps wie oben gegeben.
Hauptartikel: Benutzerfreundlichkeit
Widgets gestalten
Die Spezifikation führt die folgenden Eigenschaften unter der Überschrift "Gestaltung von Widgets" auf und definiert ein Widget als ein Element, das ein „natives Erscheinungsbild“ haben kann. Damit ist gemeint, dass das Betriebssystem, auf dem der Browser läuft, für dieses Element ein eigenständiges Steuerelement anbietet.
Browser haben in diesem Fall die Möglichkeit, die Darstellung solcher Elemente dem Betriebssystem zu überlassen, was die Einflussmöglichkeiten reduziert, die man mit CSS auf diese Elemente hat. So werden select-Auswahllisten oder Datumseingaben auf iPhones als eigene Popups über die gesamte Viewportgröße des Mobilgeräts dargestellt. Nutzer sind diese Darstellung gewohnt und können damit bequem umgehen. Eine abweichende Gestaltung mit CSS benötigt eine Umgewöhnung und stellt damit eine Verschlimmbesserung dar.
appearance
Die Eigenschaft appearance (engl. Aussehen, Erscheinung) sollte es ursprünglich ermöglichen, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen und die Darstellung durch den Browser zu erzwingen, so dass ein vollständiges Styling möglich ist.[5]
Die aktuellen Browser benötigen keinen Browserpräfix mehr für diese Eigenschaft. Zur Unterstützung von LTS-Versionen kann man aber noch -webkit-appearance hinzufügen. Die Varianten für Microsoft und Opera (-ms- und -o- Präfix) gibt es nicht und gab es nie.
Erlaubt sind folgende Werte[6]:
-
none: (Laut Spec der Standardwert) die Darstellung erfolgt durch den Browser -
auto: die Darstellung kann dem Betriebssystem überlassen werden - muss aber nicht. -
button: das Element wird mit dem Aussehen und Verhalten (Look and Feel) eines Buttons dargestellt. Hat für input, textarea, meter, progress und select-Elemente im Listbox-Stil keinen Effekt. Auf select-Elemente im Dropdown-Stil dagegen schon. -
textfield: soll input type="search" Elemente wie normale Textfelder darstellen.<r>(funktioniert in Chrome nicht, im Firefox gibt es zwischen den beiden ohnehin keinen visuellen Unterschied) -
menulist-button: soll für Dropdown-select Elemente die Darstellung als Dropdown-Box erzwingen, inclusive des Dropdown-Pfeils, ohne dafür notwendigerweise auf eine Darstellung durch das Betriebssystem zurückzugreifen. Insbesondere soll erreicht werden, dass die CSS Eigenschaften wie color, background-color und border nicht ignoriert werden.
Darüber hinaus gibt es eine lange Liste von „Kompatibilitätswerten“, die früher einmal Teil der Spezifikation waren und mit denen es hätte möglich sein sollen, das Erscheinungsbild von HTML-Elementen beliebig zu verändern, beispielsweise ein Textfeld wie eine Checkbox darzustellen. Diese Idee wurde glücklicherweise vom W3C wieder verworfen und die entsprechenden Werte sollen nun von den Browsern wie auto gedeutet werden.
button {
display: block;
margin: .5em 1em;
}
.none {
-webkit-appearance: none;
appearance: none;
}
a {
-webkit-appearance: button;
appearance: button;
}
<figure>
<form>
<button>Ich bin ein Button und darf wie ein Button aussehen.</button>
<button>Button</button>
</form>
<figcaption><code>appearance: auto;</code></figcaption>
</figure>
<figure>
<form>
<button class="none">Ich bin ein Button, darf aber nicht so aussehen.</button>
<button class="none">Button</button>
</form>
<figcaption><code>appearance: none;</code></figcaption>
</figure>
Aktuell (Stand November 2024) ist die Unterstützung in den Browsern scheinbar gut, muss aber bei jedem Element ausprobiert werden. Der Default ist appearance: auto, mit appearance:none ergeben sich je nach Browser leichte oder deutliche Darstellungsunterschiede.
- Die Darstellung eines Elements als Button scheint überhaupt nicht zu funktionieren.
- Das Entfernen des Dropdown-Pfeils für eine Listbox ist mit appearance:none möglich. Je nach Browser sind weitere Styles nötig, um brauchbare Abstände zwischen Rändern und Text zu erhalten.
Das zweite Select-Element wird vom Browser gezeichet und die Darstellung hängt stark von den Browser-Stylesheets ab. Firefox stellt es noch halbwegs lesbar dar, in Chrome fehlen jegliche Paddings.
Hauptartikel: Formulare/Auswahllisten#select_und_CSS
accent-color
Die Eigenschaft accent-color ermöglicht die Wahl einer Akzentfarbe, die Elemente wie input type="checkbox" oder type="radio" einfärbt. [7]
body {
--brand: lime;
accent-color: var(--brand);
}
fieldset {
border-color: var(--brand);
}
Themes farbig gestalten
Im vorherigen Kapitel wurde gezeigt, wie interaktive Formular-Elemente mit CSS gestaltet werden können. Dabei sollte aber Rücksicht auf die bereits im Betriebssystem getroffenen Benutzereinstellungen wie Dark Mode genommen werden.
color-scheme
Die color-scheme-Eigenschaft gibt an, in welchen Farbschemata wie "light" und "dark" eine Webseite dargestellt werden kann. Wenn ein Benutzer eines dieser Farbschemata auswählt, nimmt das Betriebssystem Anpassungen an der Benutzeroberfläche vor. Dazu gehören Formularsteuerungen, Bildlaufleisten und die verwendeten Werte der CSS-Systemfarben.
:root {
color-scheme: light dark;
}
CSS kennt eine prefers-color-scheme-Medienabfrage, mit der Sie die im OS getroffene Auswahl abfragen und Ihr CSS entsprechend anpassen können.
- no-preference (keine Präferenz)
- dark (dunkles Farbschema)
- light (helles Farbschema)
@media (prefers-color-scheme: dark) {
/* dunkles Farbschema für die Nacht */
body {
color: white;
background: black;
}
a {
color: skyblue;
}
}
@media (prefers-color-scheme: light) {
/* helles Farbschema für den Tag */
}
scrollbar
scrollbar-color und scrollbar-width ersetzen die nicht standardisierten -webkit-scrollbar-*-Eigenschaften. Mit ihnen können Sie Scrollleisten farbig anpassen.
theme-color
Mit der Angabe einer theme-color ist es möglich, auf mobilen Geräten farbige Adresszeilen und Tabs zu gestalten. In Verbindung mit einem Favicon Ihres Logos in einer größeren Auflösung (192×192px) können Sie Ihre Webseite so unverwechselbar gestalten.[8]
Andererseits sind damit die meisten Mobilgeräte abgedeckt.
Anzeigegeräte (Titel?)
Neben der Tastatur spielte die (Computer)-Maus eine große Rolle beim Siegeszug des Internet. Beim Überfahren eines Links oder Buttons mit der Maus verändert sich der cursor von einem Pfeil auf eine Hand. Auch bei Eingaben in Textfeldern gibt es einen caret genannten Text-Cursor. Sie können deren Darstellung mit CSS verändern oder sogar durch eigene Grafiken ändern.
cursor
Mit der cursor-Eigenschaft können Sie das Aussehen des Mauszeigers für den Fall definieren, dass der Anwender mit der Maus über den entsprechenden Bereich fährt.
input[readonly] {cursor: not-allowed;}
Folgende Angaben sind erlaubt (Fahren Sie mit der Maus über die jeweiligen Werte):
- allgemeine Cursortypen
auto, automatischer Cursor (Voreinstellung)default, plattformunabhängiger Standard-Cursornone, kein Cursor
- Cursortypen für Verweise und Statusangaben
-
pointer, Cursor in Form eines Zeigers, signalisiert meist Verweise -
help, Cursor in Form Symbols, das Hilfe zu dem Element signalisiert -
context-menu, Cursor signalisiert, dass ein Context-Menü erreichbar ist -
all-scroll, Cursor signalisiert, dass der Inhalt eines Elements in jede Richtung scrollbar ist -
wait, Cursor in Form eines Symbols, das einen Wartezustand signalisiert -
progress, Cursor in Form eines Symbols, das einen Programmfortschritt signalisiert, welcher aber anders alswaiteine Interaktion zulässt
-
- Cursortypen für Auswahlen
-
text, Cursor in einer Form, die normalen Text symbolisiert -
vertical-text, Cursor in einer Form, die vertikalen Text symbolisiert -
crosshair, Cursor in Form eines einfachen Fadenkreuzes -
cell, Cursor in einer Form, die Tabellenzellen symbolisiert
-
- Cursortypen für drag and drop
-
alias, Cursor in einer Form, die das Erstellen einer Verknüpfung symbolisiert -
copy, Cursor in einer Form, die das Erstellen einer Kopie symbolisiert -
move, Cursor in Form, die das Element als beweglich kennzeichnet -
no-drop, Cursor in einer Form, die symbolisiert, dass das Element hier nicht „fallen gelassen“ werden kann -
not-allowed, Cursor in einer Form, die symbolisiert, dass die gewünschte Aktion nicht erlaubt ist
-
- Cursortypen, die symbolisieren, dass die Größe eines Elementes geändert werden kann
-
n-resize, Cursor in Form eines Pfeils, der nach oben zeigt (n, Norden) -
s-resize, Cursor in Form eines Pfeils, der nach unten zeigt (s, Süden) -
e-resize, Cursor in Form eines Pfeils, der nach rechts zeigt (e, Osten) -
w-resize, Cursor in Form eines Pfeils, der nach links zeigt (w, Westen) -
ne-resize, Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne, Nordost) -
se-resize, Cursor in Form eines Pfeils, der nach rechts unten zeigt (se, Südost) -
nw-resize, Cursor in Form eines Pfeils, der nach links oben zeigt (nw, Nordwest) -
sw-resize, Cursor in Form eines Pfeils, der nach links unten zeigt (sw, Südwest)
-
- Cursortypen, die symbolisieren, dass die Größe eines Elementes bidirektional geändert werden kann
-
ns-resize, Cursor in Form eines Doppelpfeils, der nach oben und unten zeigt -
ew-resize, Cursor in Form eines Doppelpfeils, der nach links und rechts zeigt -
nesw-resize, Cursor in Form eines Doppelpfeils, der nach rechtsoben und linksunten zeigt -
nwse-resize, Cursor in Form eines Doppelpfeils, der nach linksoben und rechtsunten zeigt
-
- Cursortypen für bewegliche Zeilen- bzw. Spaltentrenner
-
col-resize, Cursor in einer Form, die das Verändern der Spaltenbreite symbolisiert -
row-resize, Cursor in einer Form, die das Verändern der Zeilenhöhe symbolisiert
-
- Cursortypen, die symbolisieren, dass der Inhalt eines Elementes vergrößert bzw. verkleinert werden kann
-
zoom-in, Cursor in einer Form, die symbolisiert, dass der Inhalt eines Elementes vergrößert werden kann -
zoom-out, Cursor in einer Form, die symbolisiert, dass der Inhalt eines Elementes verkleinert werden kann
-
cursor:move für ein Element benutzen, sollte dieses Element auch tatsächlich beweglich sein und wenn Sie cursor:help benutzen, erwartet der Anwender beim Anklicken des Bereichs, dass am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint.eigene Grafiken
Sie können auch eigene Bilddateien als Mauszeiger definieren.
#ja { cursor: url(tick.png), url(tick.gif), url(tick.cur), auto; }
#nein { cursor: url(cross.png), url(cross.gif), url(cross.cur), auto; }
Sie können, ähnlich wie bei Schriftarten, mehrere externe Grafiken auflisten. Steht eine Grafik nicht zur Verfügung oder unterstützt der Browser das Format nicht, so wird die nächste Grafik (und schließlich die Alternative) verwendet.
Sie können zudem für jede der Grafiken festlegen, welches die exakten Koordinaten des Mauszeigers sein sollen. Wichtig ist das vor allem bei Präzisionsauswahlen.
element { cursor: url('cross.png') 8 8, auto; }
Die beiden Angaben sind ganze Zahlen. Sie referenzieren die exakte Cursorposition, den sogenannten hot spot, relativ zu den Abmessungen der Cursorgrafik. Der erste Wert stellt dabei den Abstand vom linken Rand, der zweite den vom oberen Rand dar. Hier gemachte Angaben überschreiben gegebenenfalls die Festlegung in der Cursor-Datei selbst. Fehlen diese Angaben, werden die Werte aus der Cursor-Datei verwendet, fehlen auch diese, so werden beide Werte mit 0 initialisiert.
caret
Ein caret ist der Text-Cursor bei Eingabefeldern, Die caret-Eigenschaft ist die zusammenfassende Eigenschaft von caret-color und caret-shape, wobei im Augenblick (Stand: November 2021) nur die Farbgebung unterstützt wird.[9]
textarea {
caret-color: red;
width: 60em;
height: 15em;
border: thin solid #cccccc;
padding: 0.5em;
font-family: Tahoma, sans-serif;
}
textarea:focus {
background: #FFC;
}
Das Beispiel enthält ein mehrzeiliges Texteingabefeld. Zur Verschönerung wird die Farbe des Textcursors, der beim Aktivieren des Eingabefelds aufleuchtet, mit caret-color rot gefärbt.
Auf css-tricks wird gezeigt, wie man caret-shape mit einem zusätzlichen span-Element vortäuschen kann.[10]
user-select
Mit der Eigenschaft user-select können Sie bestimmen, wie und ob der Benutzer Text auswählen kann. Einerseits kann so ein grober, leicht zu knackender Kopierschutz eingebaut werden - mit dem Wert all kann aber auch sichergestellt werden, dass alle Zahlen einer IBAN mitkopiert werden.[11]
.no-copy {
cursor: not-allowed;
-webkit-user-select: none; /* ältere Chrome + Safari */
user-select: none;
}
.all-copy {
cursor: copy;
-webkit-user-select: all; /* ältere Chrome + Safari */
user-select: all;
padding: 1em;
}
Größenänderungen mit resize
Mit der Eigenschaft resize können Sie bestimmen, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann. Was für textarea-Elemente in vielen Browsern seit einiger Zeit üblich ist, lässt sich für alle Elemente nachbilden.
div {
overflow: auto; /* muss gesetzt werden! */
resize: both;
}
div code {
display: block;
}
Das div kann in seiner Größe verändert werden. Der umfließende Text nimmt den weiteren, verfügbaren Raum ein und wandert bei einer Vergößerung nach unten.
visible ist.Sie können durch die Verwendung von resize: none; die Größenänderung von textarea-Elementen verhindern.
Siehe auch
Daneben gibt es die aus SVG übernommene pointer-events-Eigenschaft, die regelt, welche Elemente klick- und ansteuerbar gemacht werden können.
Weblinks
- ↑ CSSWG: CSS Basic User Interface Module Level 4
Editor’s Draft, 29 September 2021 - ↑ Wikipedia: Grafische Benutzeroberfläche
- ↑ Wikipedia(en): Interface Design
- ↑ Principle of Least Surprise (Wikipedia)
- ↑ css-tricks.com: appearance
- ↑ CSS Basic User Interface Module Level 4 vom 24.01.2020
- ↑ smashing magazine: Simplifying Form Styles With accent-color von Michelle Barker, 23.09.2021
- ↑ css-tricks.com: Meta Theme Color and Trickery
- ↑ CSSWG.org: caret-color
- ↑ css-tricks: caret-shape: We can fake this
- ↑ MDN: user-select
css-tricks: Almanac: user-select
- conversionxl.com: Heat Maps: What Are They Good For (Besides Looking Cool)?
- uipatterns.com: Comprehensive review of UX tools for your website
- designmatic: The 10 Commandments of User Interface Design
