Inhalt | Weiter zu Kapitel 5


Kapitel 4: Standards für Gestaltung und Usability

a. Aufbau und Gestaltung einer Website
b. Produktion
c. Barrierefreiheit



a. Aufbau und Gestaltung einer Website

Wir haben bis hier Standards im Internet in verschiedenen Ausformungen gesehen: technische Standards, die das Internet erst möglich machen oder Einsatzmöglichkeiten erweitern/einschränken, und rechtliche Standards, die mehr als Anregungen und Hilfen zu verstehen sind, damit es im Betrieb nicht zu Problemen kommt.
In der Entwicklung begriffen ist eine Standardisierung des Aufbaus und der Gestaltung der Website in seinen Grundformen.

Hierzu zählen:

- Wesentliche Seitenelemente

Wesentliche Seitenelemente finden zunehmend ihren festen Platz. Während man in den 90er noch viel experimentierte, haben sich vor allem im kommerziellen Internet gewisse Standards für den Seitenaufbau gefunden.

Feste Elemente sind bspw. das Logo, das links oben erwartet wird und das auf die Startseite verlinkt werden sollte.
Im oberen horizontalen Seitenbereich wird am ehesten Werbung erwartet, ein Umstand der dazu führt, dass wichtige Inhalte hier nicht platziert werden sollten, insbesondere nicht in Form einer Grafik die zudem in den Maßen einem Werbebanner nahe kommt – viele User blenden diesen Bereich schlicht aus (Wahrnehmung), wie Erkenntnisse aus Studien über Benutzerverhalten das schon untermauerten.
Damit verbunden auch der Hinweis, dass generell keine klassischen Bannerformate (Bspe.: Fullbanner 468x60, Werbebutton 160x60) für Grafiken verwendet werden sollten. Hier kann es neben der Frage der Wahrnehmung dazu kommen, dass sog. Webwasher, ein Tool, das Werbung ausfiltert, diese Grafiken ausblendet.

Benutzerführende Elemente, wozu neben einer Icon-Sprache auch die allgemeine Benamung - das »Wording« - gezählt werden muss, werden schon heute mehr und mehr vereinheitlicht. Bsp.: Ein Einkaufskorb symbolisiert in der Regel den Warenkorb eines Shops. Bei der Gestaltung und beim Texten sollte man - nach Usability-Studien - also durchaus konservativ an die Sache herangehen, jedenfalls dann, wenn der Benutzer nicht nur zur allgemeinen Unterhaltung auf die Website geführt wurde, sondern man ihn zu einem Ziel führen will – wie bspw. zum Kauf eines Produkts oder zu einer bestimmten Information.




Bsp.: Logische Anordnung von Informationsgruppen


Zur Informationsdarstellung nach ISO 9241-12 gehört:
- Beschriftung von Icons und Symbolen
- Länge von Eingabefeldern
- Räumliche Anordnung von Informationsgruppen
- Anpassung der Informationsgruppierung an Arbeitsaufgabe
- Beschriftungen von Informationselementen
- Anordnung von Maßeinheiten
- Formatangaben bei Eingabefeldern
- Anordnung von Beschriftungen
- Identifikation bei Fenstern
- Logische Anordnung von Informationsgruppen
- Verwendung von Farben als Informationsträger



- Navigation

Gleiches gilt im Wesentlichen für die gesamte Benutzerführung und die Navigation.

Die Benutzerführung zählen hier nach ISO 9241-13
- Meldungen im Aufgabenkontext
- Vorgabewerte bei Eingaben
- Rückmeldungen bei Zustandsänderungen
- Konsistente Anordnung der Statusinformationen
- Gezielte Fehlerkorrektur
- Warnhinweise bei destruktiven Benutzeraktionen
- Inhalt von Fehlermeldungen
- Aufruf von Online-Hilfe

Weitere ISO-Normen drehen sich bspw. um die Dialogführung in Menüs und Formularen.

Die Nennung der ISO-Normen erfolgt hier vor allem deshalb, um zu zeigen, dass diese Normen inhaltlich vor allem auf eines abzielen: Die Vereinfachung der Nutzung.

Der Vergleich der eigenen Praxis im Umgang mit Software darf hier durchaus gezogen werden: Auch hier erwartet man als Anwender einen bestimmten Aufbau und eine bestimmte Arbeitsweise eines Programmes.


Prozessnormen für Usability

»Prozessnormen unterscheiden sich von Produktnormen dahingehend, dass sie keine Empfehlungen für die Gestaltung von Produkten enthalten, sondern vielmehr Empfehlungen für die Durchführung von Aktivitäten enthalten, die dazu führen sollen, dass gebrauchstaugliche Produkte entstehen. Es gibt nur eine gültige Norm für den Prozess der benutzer-orientierten Gestaltung interaktiver Systeme, die DIN EN ISO 13407. Die weiteren hier genannten Dokumente sind so genannte "Technical reports", das heißt, sie haben nicht den Charakter einer Norm, bieten aber viel Wissenswertes.« [Quelle: www.fit-fuer-usability.de]

DIN EN ISO 13407
Benutzer-orientierte Gestaltung interaktiver Systeme

ISO/TR 16982
Ergonomics of human-system interaction - Usability methods supporting human-centred design

ISO/TR 18529
Ergonomics of human-system interaction - Human-centred lifecycle process descriptions



- Schriften

Schriften sind ja eigentlich ein zentrales Thema in einer Vortragsreihe über Typografie. In meinem Vortrag sind sie nur ein Aspekt, und ein relativ kurz zu behandelnder dazu.

Der Grund hierfür sind einfache Sachzwänge: Die Auswahl der Schriften bei der Anwendung im Internet ist begrenzt. Sehr begrenzt sogar - und das liegt vor allem am Prinzip des Internets, da Schriften nicht mitgeliefert werden (wie man das vom Einbetten in PDFs kennt), sondern beim Nutzer lokal vorhanden sein müssen.

Es besteht zwar die Möglichkeit, durch Angabe mehrerer Schrifttypen vom gestalterischen Idealzustand auszugehen und sich dann durch Alternativen gestalterisch gewissermaßen ‚abzusichern’, in der Regel wird man sich aber einfach den Gegebenheiten beugen und das nutzen, was wohl beim Nutzer zu finden sein wird.

Als serifenlose Schriften sind daher meist Arial oder Verdana zu finden.

Neu am Schriftenhimmel könnten zukünftig die neuen Schriften von Windows Longhorn erscheinen, wie man an verschiedenen Stellen vorab lesen kann, darunter »zwei moderne Groteske (Calibri und Corbel), zwei frisch-elegante Antiquas (Cambria und Constantia), eine etwas eigenwillig-weiche Groteske (Candara) und eine Monospace (Consolas)«
[http://www.praegnanz.de/weblog/581/microsofts-neue-fonts].




Quelle: http://www.typeforum.de/news_287.htm




Übersicht: Schriften und ihre Verbreitung
http://www.visibone.com/font/FontResults.html


Für den Einsatz anderer Schriften ist der Webdesigner auf Grafiken angewiesen - oder eben auf Flash, da in Flash auch andere Schriften eingebettet werden können.
Einige Content-Management-Systeme bieten die Option, Schriften zu interpretieren. So insb. das Open Source CMS »Typo3«. Hier ist es zwar möglich, mit den Texten seitens der Redakteure wie mit Fließtext umzugehen, die Ausgabe für den Besucher im Internet erfolgt dann allerdings wieder als Grafik, was zu Problemen führt. Für den Einsatz von Hausschriften als Headlines ist diese Option aber durchaus eine Alternative.


Ein weiteres Problem mit Schriften ist deren Größenangabe.

Die Angabe von Punkt/Pica (Pt) im Webwork gilt als Standard. Als Normalschriftgröße am PC gilt darüber hinaus »12 pt«

Das Problem ist: pt ist eigentlich generell als digitale Maßangabe ungeeignet, da »Pica« an der dpi-Zahl hängt und ein Problem zwischen PCs und Macs besteht - vgl. dazu auch oben unter 2g).

Ein Rechenbsp.:
Mac / 72ppi = 1pt = 1px (bei font-size: 9pt sind das = 9px)
Windows / 96ppi = 1pt = 1px (bei font-size: 9pt sind das = 12px)

Nun wird im Internet mehr und mehr dazu übergegangen, Schriftarten nicht mehr absolut sondern relativ zu definieren - insbesondere wegen »Barrierefreiheit«. Man fordert, dass jede Schrift als Relation zur Normalschrift anzugeben ist, damit der Nutzer diese Relation selbst am Browser vorgeben kann. Definiert wird dabei x% der Normalschriftgröße oder bspw. 0.5em (em ist Maßangabe für relative Größe 0.5em = 50%)

Bei der Entwurfserstellung und beim Briefing der Programmierer sollte dieses Problem wenigstens bekannt sein. Die meisten Programmierer kümmern sich aber sowieso wenig um den Style-Guide und vermessen direkt aus der offenen Adobe PhotoShop-Datei.

Pixelangaben wären also ideal für den Gestalter, widersprechen aber den Anforderungen der Barrierefreiheit. Will man sich an diesen Standards halten und damit auch PClern (beim Mac wird diese Funktion durch das System bereits unterstützt) die Skalierbarkeit am Browser eröffnen (Barrierefreiheit), wird man sich mit Schriften-Relationen auseinandersetzen müssen, was sich im Übrigen auch auf das gesamte Verhältnis des Contents zueinander bezieht (Größe der Zellen und Spalten).


Weitere Informationen:

Pixel - Drucken - Abmessungen
http://www.old-schulte.de/pixel.html

Das Problem der Schriftdarstellung
http://www.old-schulte.de/hinweis.html

Usability 1x1
http://www.fit-fuer-usability.de/1x1/uebersicht.html

Fonts for the Web
http://www.angelfire.com/al4/rcollins/style/fonts.html



|




b. Produktion

Als Webdesigner ist es in jedem Falle hilfreich und nützlich, sich mit den technischen Standards vertraut zu machen, strahlen diese doch (auch aus Gründen des Budgets) auf die Gestaltung aus.
Bsp.: Content-Management-Systeme – erfolgt die technische Umsetzung via CMS, so ist an das dem CMS zu Grunde liegende Baukastensystem zu denken.




Abb.: Arbeiten mit Content-Management-Systemen




Abb.: Arbeiten mit Content-Management-Systemen (Fließtext mit Bild)




Abb.: Arbeiten mit Content-Management-Systemen (Ausgabe)


Im Folgenden eine Aufzählung, welche Standards, hier DIN/ISO-Normen, sich auf die Herstellung, den Arbeitsprozess und die Gestaltung beziehen.

DIN EN ISO 9241
Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten (insgesamt 17 Teile, Teile 1-9 sind primär hardware-ergonomische Normen und Teile 10 - 17 sind software-ergonomische Normen)

ISO 9355
Ergonomische Anforderungen für die Gestaltung von Anzeigen und Stellteilen (insgesamt 2 Teile)

DIN EN ISO 11064
Ergonomische Gestaltung von Leitzentralen (insgesamt 3 Teile)

DIN EN ISO 13406
Ergonomische Anforderungen für Tätigkeiten an optischen Anzeigeeinheiten in Flachbauweise (insgesamt 2 Teile)

DIN EN ISO 14915
Software-Ergonomie für Multimedia-Benutzungsschnittstellen

ISO/TS 16071
Ergonomics of human-system interaction - Guidance on accessibility for human-computer interfaces

ISO/CD 23973:2004
Ergonomics of human-system interaction - Software ergonomics for World Wide Web user interfaces


|




c. Barrierefreiheit

Ein Standard drängt derzeit mehr und mehr nach vorne: Die Barrierefreiheit

Das Thema ist höchst politisch besetzt und daher hat man es auch geschafft eine Norm gesetzlich zu verankern: Die »BITV«.
Kurz zusammengefasst: Die »Barrierefreie Informationstechnik–Verordnung« (BITV) soll die Neu- und Umgestaltung öffentlicher Informationsangebote nach dem Gesetz zur Gleichstellung behinderter Menschen (BGG) regeln.

Es gibt eine Vielzahl von Publikationen zum Thema, die das Thema von der einen oder anderen Seite beleuchten. Ich versuche eine eigene Zusammenfassung:

Barrierefreiheit soll Barrieren abbauen, egal welcher Art und welchen Ursprungs. Die Verankerung beim Thema Behinderung liegt zwar aufgrund des Bezugs zum Gesetz zur Gleichstellung behinderter Menschen (BGG) nahe, trifft aber nur einen Teil der Problematik. Farbenblindheit, allgemeine motorische Störungen, Probleme älterer Menschen wie Sehschwäche, aber auch ganz einfach Verständlichkeit und Zugänglichkeit unabhängig von Bildung oder Herkunft – das alles sind Punkte, die bei Barrierefreiheit zu diskutieren sind.

Nimmt man einmal an Foren oder Kongressen zum Thema teil, wird man schnell feststellen, wie kontrovers die Thematik diskutiert wird.
Ein einfaches Beispiel aus dem täglichen Leben wird hier häufig herangezogen: Ein Rollstuhlfahrer plädiert für möglichst niedrige Bordsteinkanten an Ampeln, um diese Barriere einfach meistern zu können. Blinde Menschen benötigen aber eine deutliche Begrenzung, damit sie den Unterschied zur Straße ertasten können. Wo liegt also das richtige Maß? Hier wird um jeden Zentimeter gerungen.

Die unterschiedlichsten Anforderungen treffen hier aufeinander, und auch die Agentur VorSicht, die für das gern zitierte Musterbeispiel www.sozialnetz.de verantwortlich zeichnet, resümiert, dass es letztendlich ein Kompromiss zwischen dem Wortlaut der BITV und den Anforderungen einzelner Interessengruppen wurde.



Abb. Sozialnetz hessen - Normalansicht



Abb. Sozialnetz hessen – Vergrößerte Schriftvorgabe



Abb. Sozialnetz hessen - deaktivierte Styles

Wer also behauptet, die BITV garantiert Barrierefreiheit, der irrt genauso, wie derjenige der behauptet durch die Einhaltung der Vorgaben der W3C habe man per se eine barrierefreie Website geschaffen.


Einige wesentliche Punkte von Barrierefreiheit sind:
- Trennung von Layout und Inhalt
- Sauberer Quellcode nach internationalen Standards
- Beachtung der Farben (bspw. keine Farbnavigation ohne Alternativen)
- Verzicht auf Tabellen-Layout (vor allem eine techn. Vorgabe)
- Keine Text-Grafiken
- Angabe von Alternativtexten bei Bildern und Links
- Verzicht auf Java-Script in wesentlichen Elementen

Die Barrierefreiheit setzt also konsequent auf Standards. Nur wo Standards eingesetzt werden, können Entwickler für spezifische Probleme Lösungen entwickeln, seien es Braille-Lesegeräte oder individuelle Text-Browser wie »Lynx«. Zudem kann nur bei Einhaltung der Standards nach den Grundlagen der Barrierefreiheit der Nutzer mit den normalen Bordmitteln eines PC/Mac seine persönlichen Probleme kompensieren – bspw. einfach durch die Vergrößerung der Texte.

Barrierefreiheit steht noch ganz am Anfang, wird aber bereits heute mehr und mehr zum Tages-Thema im Webdesign. Und das nicht nur, weil öffentliche Auftraggeber bereits dazu verpflichtet sind (Bundesanstalten), oder dies wohl bald werden (Auftraggeber aus den Kommunen aufgrund Landesgesetzgebung), sondern schlicht und ergreifend auch, weil Unternehmen sich im öffentlichen Umfeld bewegen und daher das Thema schon rein vorsorglich mit aufnehmen.

Womit kann man das testen?
Der Browser Firefox bietet mit dem »Web Developer Tools« die Möglichkeit, individuell bestimmt Vorgaben abzuschalten und so eine Website zu testen.
Darüber hinaus bieten verschiedene Online-Tools die Überprüfung des Quellcodes auf W3C-Konformität.

Zertifizierung?
Tatsächlich fordern Interessenverbände zwischenzeitlich auch eine Zertifizierung nach Barrierefreiheit. Doch auch wenn bereits von DIN CERTCO ein Prüfverfahren angeboten wird, so kann man die Diskussion als derzeit noch vollkommen offen betrachten. Die Kritiker: »Weder die gegenwärtige Fassung der BITV, noch die WCAG bieten hierfür eine entsprechende objektiv bewertbare Grundlage. Zudem werden nicht alle Behinderungsarten [...] berücksichtigt. Vielmehr wird auf die Bedürfnisse spezieller Behinderungsarten in besonders hohem Maße Rücksicht genommen, so dass ein derartiges Zertifizierungsverfahren Gefahr läuft, kontraproduktiv zu wirken und fehlende Barrierefreiheit durch einseitige Barrierefreiheit zu ersetzen.«
[http://www.einfach-fuer-alle.de/forum/zertifizierung/contra/]


|




Weiterführende Informationen:

Barrierekompass
http://www.barrierekompass.de/

Einfach für Alle
http://www.einfach-fuer-alle.de/

Leitfaden "Barrierefreies Internet für Entscheider"
http://www.wertewerk.de/leitfaden.html


|



Inhalt | Weiter zu Kapitel 5