CSS/Tutorials/Benutzeroberfläche

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche
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.

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.

  1. UI und UX
    • Was ist das überhaupt?
    • Benutzerfreundlichkeit
  2. Widgets gestalten
  3. Themes farbig gestalten
    • Benutzereinstellung abfragen
    • color-scheme für Dark Mode
    • theme-color
    • Scrollleisten

  4. Anzeigegeräte


UI und UX - was ist das überhaupt?

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.[1]

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. [2]

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)[3]
  • 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.[4]

Browserunterstützung
caniuse.com

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[5]:

  • none: (Laut Spec der Standardwert) die Darstellung erfolgt durch den Browser
  • auto: (de facto Standardwert in Firefox 86 und Chrome 89) 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.


Beispiel ansehen …
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 2021) ist die Unterstützung in den Browsern sehr rudimentär. 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. [6]

Browserunterstützung
caniuse.com


accent-color ansehen …
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.

Browserunterstützung
caniuse.com
: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.

Browserunterstützung
caniuse.com
  • no-preference (keine Präferenz)
  • dark (dunkles Farbschema)
  • light (helles Farbschema)


Medienabfrage mit prefers-color-scheme 
@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.

Empfehlung: Es ist nicht zielführend Scrollleisten zu verstecken, da Nutzer sonst nicht sehen können, dass es weitere Inhalte außerhalb des Viewports gibt.

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.[7]

Browserunterstützung
caniuse.com
Beispiel
<meta name="theme-color" content="#ff0000"> <link rel="icon" sizes="192x192" href="nice-highres.png"> <!-- iOS Safari --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Beachten Sie: Dies funktioniert im Augenblick (Stand: November 2021) nur in Chrome auf mobilen Geräten und mit iOS Safari 15.
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.

Browserunterstützung
caniuse.com
Beispiel 
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-Cursor
    • none, 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 als wait eine 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
Hinweis:
Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise 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.

eigene Grafiken als Mauszeiger ansehen …
      #ja   { cursor: url(tick.png),  url(tick.gif),  url(tick.cur),  auto; }
      #nein { cursor: url(cross.png), url(cross.gif), url(cross.cur), auto; }
Beachten Sie: Die Angabe einer alternativen Cursorform ist zwingend.

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.

Beispiel 
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.[8]

Browserunterstützung
caniuse.com
Gestaltung des Text-Cursors ansehen …
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.[9]

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.[10]

Browserunterstützung
caniuse.com
Kopieren erlauben oder verbieten? ansehen …
.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;
}

Siehe auch

Im CSS Basic User Interface Module Level 4 gibt es noch die Eigenschaft resize, die in einem eigenen Kapitel behandelt wird:

Daneben gibt es die aus SVG übernommen pointer-events-Eigenschaft, die regelt, welche Elemente klick- und ansteuerbar gemacht werden können.

Weblinks

Quellen

  1. ↑ Wikipedia: Grafische Benutzeroberfläche
  2. ↑ Wikipedia(en): Interface Design
  3. ↑ Principle of Least Surprise (Wikipedia)
  4. ↑ css-tricks.com: appearance
  5. ↑ CSS Basic User Interface Module Level 4 vom 24.01.2020
  6. ↑ smashing magazine: Simplifying Form Styles With accent-color von Michelle Barker, 23.09.2021
  7. ↑ css-tricks.com: Meta Theme Color and Trickery
  8. ↑ CSSWG.org: caret-color
  9. ↑ css-tricks: caret-shape: We can fake this
  10. ↑ MDN: user-select
    css-tricks: Almanac: user-select
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Benutzeroberfläche&oldid=96311“