Webdesign

Webdesign (Style Guides)

Einführung Webdesign

Das World Wide Web als Massenmedium

• Das WWW ist eine riesige Informationsdatenbank
• Es gibt Millionen von Seiten, die theoretisch für alle Menschen zugänglich sind
• Somit kein Fachpublikum wie bei Printmedien
• Im Netz zählen klar strukturierte, knappe Informationen

Einheitsdesign?

• Sehen alle Seiten im WWW anders aus, oder werden auch hier ähnlich den Printmedien Standards eingehalten?
• Wieso sollten gewisse Style Guides befolgt werden?

---

Style Guides 

• Sicherung der ergonomischen Qualität und Konsistenz
• Fundiertes Know-how für die Entwicklung zukünftiger Applikationen
• Reduzierte Entwicklungszeiten
• Hohe Konsistenz zwischen verschiedenen Applikationen
• Hohe Bediensicherheit und Zufriedenheit beim Anwender

(Heidmann, Frank. Web Design. Guidelines und Standards. 2002.)

---

• Um diese Maxime erfüllen zu können, müssen informative Seiten klar und simpel, funktionell, übersichtlich und strukturiert konzipert werden.
• Handhabbarkeit von Webseiten soll mit Hilfe von Webdesign sichergestellt werden (vgl. Interface Design. TerminosaurusRex. 2002.)

Webdesign vs. Design von Printmedien

Wieso ist Design im Netz anders als bei Printmedien?

• Bei gedruckten Medien gibt es nur eine Ausgabe ohne Abweichungen: das Druckbild, welches vom Designer entworfen wurde
• Im Internet ist es nicht möglich, einheitliche Ausgabe zu gewährleisten
• Verschiedene Betriebssysteme, Browser, Schriftarten (Fonts), Monitore mit unterschiedlichen Auflösungen, Verbindungsgeschwindigkeit, Nutzereinstellungen, Ausgabegeräte (PC, Laptop, TV, Handhelds, Mobiltelefone), etc. lassen die designte Seite völlig unterschiedlich aussehen

---

Schon früh zog es die Grafiker aus dem Print ins Web. Sie versuchten, dem Internet die Charakteristika des Papiers aufzuzwängen, oder experimentierten mit den unendlichen Möglichkeiten des neuen Mediums. Aber Internet ist kein Papier hinter Glas. Wer aus dem Printdesign kommt, wird sich von traditionellen "fixen" Ideen verabschieden müssen. [...] Wir können über die Technik des Displays beim Besucher höchstens Vermutungen anstellen.

(Häßler, Ulrike. Cascading Style Sheets. Stil mit <Stil>. 2003. S.27.)

---

Der entscheidende Schritt nach vorn

• Akzeptanz der unterschiedlichen Darstellung
• Ziel des Webdesign: Seite soll unter jeden Umständen benutzbar (usable) und zugänglich (accessible) sein

Die graphische Benutzerschnittstelle (Graphical User Interface)

Kommunikation von Mensch zu Maschine

• Besucher muss Seite mit allen Features wie Formularen, Suchmasken, Downloadmöglichkeiten u.ä. auf Anhieb bedienen können
• Benutzer soll auf folgende Fragen zu jedem Zeitpunkt Antwort erhalten:
  • Ort (site): Wo befinde ich mich?
  • Modus (mode): Was kann ich hier tun?
  • Weg (trail): Wie bin ich hierher gekommen? Wohin kann ich noch? Wie?
• Achtung beim Neugestalten vertrauter Bedienelemente, der User kann leicht den Überblick und die Orientierung verlieren

---

DIN-Norm

Kriterien für das Design ergonomischer Benutzerschnittstellen :

Grundsätze der Dialoggestaltung

• Aufgabenangemessenheit
• Selbstbeschreibungsfähigkeit
• Steuerbarkeit
• Erwartungskonformität
• Fehlertoleranz
• Individualisierbarkeit
• Lernförderlichkeit

---

Accessibility - Zugänglichkeit

Wann gilt eine Seite als zugänglich?

• Zugang zum Inhalt der Seite unabhängig von Nutzer und benutzter Technologie

Verschiedene unbekannte technologische Bedingungen:

• Unbekannte Browser (Internet Explorer, Netscape, Firefox, Mozilla, Opera... in verschiedenen Versionen)
• Unbekanntes Betriebssystem (Windows, Unix, Macintosh...)
• Unbekannte Display-Auflösung (von Handy-Display bis hochauflösender TFT)
• Unbekannte Benutzeinstellungen (Schriftgröße, Farbeinstellungen, Java support...)
• Unbekannte Fenstergröße
• Unbekannte Verbindungsgeschwindigkeit (von Modem bis High-Speed DSL)
• Unbekannte Farben (Ausgabe auf Monitor, Interpretation des Browsers)
• Unbekannte Schriftarten (Nutzeinstellungen, Einstellungen im Browser oder Betriebssytem)

---

On the web, we have to give up WYSIWYG [What You See Is What You Get] because pages will look noticeably different on various devices: A big monitor has about one hundred times as many pixels as a andheld device, and a fast T3 line transports data a thousand times faster than a modem. Indeed, looking different is a feature, not a bug, because an optimal user experience requires adjustments to the characteristics of each device. The more specialized or low-end the device, the stricter the requirement for web content to morph into something suited for the platform. The only way to make this happen is for designers to give up full control and let the presentation of their pages be determined by an interplay of page specifications and the preference settings and other characteristics of the client device: cascading style sheets.

(Nielsen, Jakob. Designing Web Usability. 2000. S. 82.)

---

Unterschiedliche Bedürfnisse der Nutzer

• Sehbehinderte:
  • Schriftgröße im Dokument muss verändert werden können
  • Farbkonflikte bei Farbenblinden: Rot und Grün besonders beachten (niemals Rot auf grünem Untergrund oder umgekehrt)

• Hörgeschädigte:
  • Seite muss auch ohne Bilder und Movies aussagekräftig sein
  • Immer Erläuterungen zu Multimedia-Elementen (auch falls diese Inhalte vom Browser unterdrückt werden)

Usability - Benutzbarkeit

Was macht eine Seite benutzbar?

• Unmittelbare Verständlichkeit
• Effizienz
• Einprägsamkeit
• Fehler und deren Korrigierbarkeit
• Zufriedenheit

(nach Nielsen, Jakob. Gelesen bei Wiesemann, Joachim. Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS. 2002.)

---

Usability ist die Effektivität, Effizienz und das Ausmaß der Zufriedenheit, mit dem bestimmte Benutzer spezifizierte Ziele in vorgegebener Umgebung erreichen.

ISO 9241-11

---

Alte Gewohnheiten

• Usability begründet sich auch auf Gewohnheiten der User
  • Aussehen von Links (unterstrichen, blau)
  • Knöpfe generell klickbar
  • Anordnung der Navigation (meist links oder oben)
  • Scrollbar
  • Animationen sind Werbung (werden damit automatisch "ausgeblendet")

Pagedesign

Was macht eine gut gestaltete Seite aus?

• Funktionalität
• Kontinuität
• Einfachheit
• Verständlichkeit
• Klare Strukturen
• Verwendung von Farben, richtiger Einsatz von Schriftarten und -typen, Bildern und Graphiken sowie das Layout

der Seite, sollen dabei helfen

---

Egal, welche Mühe Sie sich geben, Ihren Seiten ein gelungenes Aussehen zu geben: In erster Linie sollten Sie darauf achten, daß die Informationen, die Ihre Seite zu bieten hat, nicht im wahrsten Sinne des Wortes unter einer Flut von Gestaltungselementen begraben werden.

(Chung, Dirk. HTML-Publishing. Aufbau und Design attraktiver Webseiten. 1996. S. 169.)

---

---

A general principle for all user interface design is to go through all of your design elements and remove them one at a time. If the design works well without a certain design element, kill it. Simplicity always wins over complexity, especially on the web where every three bites saved is a millisecond less download time.

(Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity. 2000. S. 22.)

---

Farben

Farben als Hilfsmittel

• Farbigkeit dient als Orientierungshilfe
• Navigationshilfe
• Wichtige Informationen (und Links) farbig hervorheben
• Klarere Abtrennung von Abschnitten durch farbige Überschriften

Welche Fehler sollen beim Umgang mit Farben vermieden werden?

• Bunte Schrift auf farbigen Hintergünden sollte vermieden werden.
• Mit starken Kontrasten arbeiten, um die Schrift auffallen zu lassen.
• Nicht zuviele Farben in einem Dokument benutzen.
• Webpalette von 216 Farben, die für Windows und Mac entwickelt wurden, und deshalb in beiden Betriebssystemen gleich aussehen (von den meisten Browsern richtig wiedergegeben)

Typographie

Wie wird Schrift als Gestaltungsmittel richtig angewendet?

• Betonung auf einheitliches, klares Schriftbild
• Fett, kursiv und unterstrichen sparsam verwenden, kann mit anderen Funktionen im Dokument verwechselt werden
• Schrifttypen serif und sans-serif nicht mischen
• Anti-Aliasing der Schrift

Graphiken

Ein Bild sagt mehr als 1000 Worte

• Graphiken, Icons, Fotos und Bilder können leicht falsch interpretiert werden
• Sollten nur zur Unterstützung der Aussage benutzt werden
• Weitestgehender Verzicht auf Animationen
• Nutzer sind "Banner-Blindness" unterlegen
• Größe und Format der verwendeten Graphiken beachten (auch in Hinsicht auf Ladezeiten)
• Beim Bearbeiten der Bilder auf Qualitätsverlust achten - möglichst ohne offensichtliche Artefakte

Layout

• Wichtigste Regel: Konstantes Layout über gesamte Webpräsentation hinweg

---

Gutenbergs Bibel wird als das erste moderne Buch bezeichnet - aber es hat noch über 100 Jahre gedauert, bis Bücher einen allgemeinen Standard für die Nutzung erreichten. Seitenzahlen, Index, Inhaltsverzeichnis und Seitentitel sind heute Routine, waren aber damals keine Selbstverständlichkeit. [nach Lynch, Patrick J.; Horton, Sarah. Web Style Guide. 2nd edition. 2004.] Heute erscheint uns der Umgang mit einem Buch einfach und die Tagespresse, Zeitschriften und Magazine bieten ausgefeilte Standards für die Nutzung ihrer Druckerzeugnisse. Wenn wir montags den Spiegel aufblättern, wissen wir, wo die Themen stehen, die uns am meisten interessieren. Wir erkennen unsere Lieblingsrubriken an ihrem Layout.

(Häßler, Ulrike. Cascading Style Sheets. Stil mit <Stil>. 2003. S.35.)

---

• Graphical User Interface hat unbedingten Vorrang
• Relation von Form zum Inhalt muss gefunden werden
• Gewohnheiten und Erwartungen des Nutzers (auch kulturell bedingt)
• Wiedererkennungswert einer bestimmten Webseiten-"Kategorie" (z.Bsp. Nachrichten, Einkauf)

Content (Inhalt) einer Seite

Guter Inhalt?

• Informationen sind subjektiv
• Trotzdem kann zwischem nötigen und unnötigen Inhalt entschieden werden
• Selbst gut designter schlechter Inhalt nützt niemandem

---

Users invest very little time (often on the order of 10 seconds) looking over a new site in hope it will be one of the rare good ones. But if the site seems too strange or too difficult, or if it's not apparent how the site applies to their immediate concerns, they'll be out of there as fast as they can click their mouse.

(Nielsen, Jakob; Tahir, Marie. Homepage Usability. 50 Websites deconstructed. 2002. S. 35.)

---

Mit vielen Worten wenig gesagt

• Relevante, interessante und vor allem themenbezogene Inhalte ohne Umschweife preisgeben
• Am Bildschirm wird weniger gelesen als aus Printmedien
  • Verzicht auf lange Fließtexte
  • Gute und gut ersichtliche Strukturierung
  • Aufspaltung des Textes in kleinere Einheiten

• Richtige Sprache verwenden
  • Zielgruppenorientiert
  • Auf Fachbegriffe weitestgehend verzichten, unbedingt Erklärung
  • Kurze Sätze ohne Floskeln
  • Keine Modesprache, am besten Verzicht auf "trendy" Wörter

Technologien

Was soll?

• Was ist das Ziel des Webdesign?
  • Optisch ansprechende Seite, die auch durch Inhalte überzeugt
  • Technisch einwandfrei
  • Bei allen Nutzern unter allen Bedingungen funktionieren
  • Muss von allen Besuchern benutzbar sein

Was muss?

• Worauf muss geachtet werden, um die definierten Ziele zu erfüllen?
  • "strukturierte Flexibilität"
  • Struktur: Durch ein gutes Layout wird Seite strukturiert
  • Flexibilität: User muss in der Lage sein, eigene Einstellungen beizubehalten und Seite nach seinen

Vorstellungen anzupassen

Was darf?

• Mit welchen Zusatzmerkmalen darf man die Page ausstatten?
  • Optische "Bonbons" jeder Art, solange sie die Technik nicht behindern

Was darf nicht?

• Was muss unbedingt beim Design vermieden werden?
  • Zugriff und Benutzbarkeit darf nicht von bestimmten technischen Gegebenheiten abhängen
  • Starre Vorgaben wie fixe Schriftgrößen
  • Keine unaufgeforderten Aktionen

Macromedia Flash

Pro Flash

• Layout sieht aus wie beim Erstellen gewünscht
• Oft ansprechendes Design
• Einfache Einbindung von Multimedia-Inhalten wie Movies

Contra Flash

• Flash ist eine Zusatzsoftware
• Ist nicht dynamisch (hat immer dasselbe Aussehen), keine Flexibilität
• User kann keine Änderungen vornehmen
• Keine Indizierung des Inhaltes durch Suchmaschinen
• Keine Möglichkeit, direkt Adressen von Unterlinks anzuwählen
• Keine klare Navigation
• Keine klare Strukturierung
• Lange Ladezeiten

JavaScript

Pro JavaScript

• Leicht zu implementieren
• Erweitert die Funktionalität (Formularprüfungen, etc.)
• Soll HTML dynamischer gestalten

Contra JavaScript

• Programmierkenntnisse erforderlich
• Seiten mit JavaScript fehleranfälliger
• Sicherheitsrisiko, besonders in Bezug auf Userdaten (Cookies, History, etc. könnten ausgelesen werden)
• JavaScript muss aktiviert sein, damit die Erweiterungen funktionieren
• Accessibility stark vermindert

Frames

Pro Frames

• Einheitliche Navigationsseiten, da diese einen Rahmen um die eigentlichen Seiten bilden

Contra Frames

• Durch Bestehenbleiben des Rahmens treten Probleme auf
• Keine Indizierung des Inhaltes innerhalb der Framesets durch Suchmaschinen
• Keine Möglichkeit, direkt Adressen von Unterlinks anzuwählen
• Betritt man die Seite über einen Link einer Suchmaschine, fehlt oft das Frameset, man trifft auf Unterseiten

ohne Navigation

PDF, Word & Co.

Pro PDF, Word & Co.

• Layout sieht aus wie beim Erstellen gewünscht

Contra PDF, Word & Co.

• Adobe Acrobat, MS Office, etc. sind Zusatzsoftware
• Sind nicht dynamisch (hat immer dasselbe Aussehen), keine Flexibilität
• User kann keine Änderungen vornehmen

HTML (Hypertext Markup Language)

Pro HTML

• Entspricht den W3C-Standards für Webdesign
• Auszeichnungssprache speziell für Webpublishing
• Einfache Textstrukturierung, die dynamisch und vom User änderbar bleibt
• Bei richtiger Anwendung Accessibility garantiert

Contra HTML

• Quelltext kann bei größeren Dokumenten schnell unübersichtlich werden
• Zum Teil lange Ladezeiten, weil Auszeichnung für bestimmte Elemente im Quelltext wiederkehrt und umständlich ist

CSS (Cascading Style Sheets)

Pro CSS

• Entspricht den WC3-Standards für Webdesign
• Deklarative Style Sheet-Sprache für strukturierte Dokumente wie HTML
• Formatierungen der Seite können im Head des HTML-Dokuments oder idealerweise in seperaten Style Sheets zusammengefasst werden, müssen nicht jedes einzelne Mal im Quelltext deklariert werden
• Quelltext bleibt übersichtlich
• Schnelle Abänderung des gesamten Designs
• Kürzere Ladezeiten

Contra CSS

• CSS wir von den Browsern unterschiedlich interpretiert
• CSS 2.0 wird noch nicht vollständig unterstützt

Strukturierte Flexibilität

Der Wunschtraum

• "Einheitsuser"
• Einheitliche Standards, die von allen Browsern unterstützt werden
• Flexible Auszeichnungssprache, mit der alles möglich ist

Die Realität

• HTML in Kombination mit CSS: Guter Ansatz zur Konformität, Einfachheit und Funktionalität
• Noch keine einheitliche Unterstützung
• Verschiedenste Probleme durch die gravierenden Unterschiede der Hard- und Software, sowie der persönlichen Einstellungen der Nutzer
• Wird durch die Ausbreitung des Internets auf die verchiedensten Plattformen auch so bleiben
• Suche nach Konformität

Möglichkeiten nutzen

• Up-to-date bleiben
• Sich an bestehende Standards halten
• Neue Techniken anwenden, sobald sie Standard geworden sind

Herausforderungen sehen

• Gutes Webdesign ist eine große Herausforderung
• Belohnung ist der Erfolg - Accessibility und Usability soweit wie möglich

Referenzen

Online

• Lynch, Patrick J.; Horton, Sarah. Web Style Guide. 2nd edition.

http://www.webstyleguide.com. 2004.

• Bernard, Michael L. Criteria for optimal web design (designing for usability). http://psychology.wichita.edu/optimalweb/position.htm. Wichita, 2003.
• Luckhardt, Heinz-Dirk. Informationsdesign von Texten. (in: Virtuelles Handbuch Informationswissenschaft) http://is.uni-sb.de/studium/handbuch/webpush/index.php. Saarbrücken, 2003.
• Weinreich, Harald. Software-Ergonomie und das World Wide Web: 10 wichtige Leitlinien für die Gestaltung von ergonomischen WWW-Informationssystemen. http://vsys-www.informatik.uni-hamburg.de/ergonomie/index.html. Hamburg, 2003.
• Interface Design. (in: TerminosaurusRex) http://server02.is.uni-sb.de/trex/index.php. Saarbrücken, 2002.
• Webdesign. (in: TerminosaurusRex) http://server02.is.uni-sb.de/trex/index.php. Saarbrücken, 2002.
• Heidmann, Frank. Web Design. Guidelines und Standards. http://ais.informatik.uni-leipzig.de/download/2002w_v_mmk/2002w_mmk_v_12.pdf. Stuttgart, 2002.
• Quinn, Liam. Accessibility Myths. http://www.htmlhelp.org/design/accessibility/myths.html. 2002.
• Wiesemann, Joachim. Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS. http://www.bestviewed.de. Aachen, 2002.
• Luckhardt, Heinz-Dirk. Kriterien für das Webpublishing. (in: Virtuelles Handbuch Informationswissenschaft) http://is.uni-sb.de/studium/handbuch/textinfodesign/index.php.Saarbrücken, 1999.

Printmedien

• Shafer, Dan; Yank, Kevin. Cascading Style Sheets. Anspruchsvolle Websites mit CSS gestalten. Grundlagen, Designtechniken und Referenz. Heidelberg: Dpunkt, 2004.
• Häßler, Ulrike. Cascading Style Sheets. Stil mit <Stil>. Berlin, Heidelberg: Springer-Verlag, 2003.
• Nielsen, Jakob; Tahir, Marie. Homepage Usability. 50 Websites deconstructed. USA: New Riders Publishing, 2002.
• Niederst, Jennifer. Webdesign in a Nutshell. Sebatopol: O'Reilly & Associates, Inc. Second edition, 2001.
• Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity. USA: New Riders Publishing, 2000.
• Schulz, Angelika. Die visuelle Gestaltung interaktiver Computeranwendungen. St. Ingbert: Röhrig Universitätsverlag, 1998.
• Chung, Dirk. HTML-Publishing. Aufbau und Design attraktiver Webseiten. Bonn, Albany: Internat. Thomson Publishing, 1996.