Webdesign

Einführung Webdesign

Das World Wide Web als Massenmedium

Das WWW ist eine riesige Informationsdatenbank, in der es Millionen von Seiten gibt, die theoretisch für alle Menschen zugänglich sind. Somit gibt es hier kein Fachpublikum wie bei Printmedien. Es ist also umso bedeutender, dass im Netz klar strukturierte, knappe Informationen zählen.

Einheitsdesign?

Es stellt sich die Frage, ob alle Seiten im WWW anders aussehen, oder auch hier ähnlich den Printmedien Standards eingehalten werden. Wenn es Richtlinien, also Style Guides gibt, worin liegen die Vorteile, wenn diese befolgt werden?

Style Guides:

Mit den so genannten Style Guides, ist es möglich:

• Die ergonomischen Qualität und Konsistenz zu sichern
• Ein fundiertes Know-how für die Entwicklung zukünftiger Applikationen zu bieten
• Entwicklungszeiten zu reduzieren
• Eine hohe Konsistenz zwischen den verschiedenen Applikationen zu bewahren

und

• eine hohe Bediensicherheit und Zufriedenheit beim Anwender zu gewährleisten.

(vgl. 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 konzipiert werden. Die 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 im gegensatz zu elektronischen Medien nur eine Angabe ohne Abweichungen, nämlich das Druckbild, welches vom Designer entworfen wurde. Im Internet hingegen ist es nicht möglich, einheitliche Ausgabe zu gewährleisten, da es verschiedene Betriebssysteme, Browser, Schriftarten (Fonts), Monitore mit unterschiedlichen Auflösungen, Verbindungsgeschwindigkeit, unterschiedliche Nutzereinstellungen, Ausgabegeräte (PC, Laptop, TV, Handhelds, Mobiltelefone), etc. gibt, die die designte Seite völlig unterschiedlich aussehen lassen.

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

Als Designer hat meine keine Wahl, als die unterschiedliche Darstellung der erstellten Internetpräsenz zu akzeptieren, und das Ziel des Webdesigns darin zu sehen, die Seite unter jeden Umständen benutzbar (usable) und zugänglich (accessible) zu halten.

Die graphische Benutzerschnittstelle (Graphical User Interface)

Kommunikation von Mensch zu Maschine

Der Besucher muss fähig sein, die Seite mit allen Features wie Formularen, Suchmasken, Downloadmöglichkeiten u.ä. auf Anhieb bedienen zu können.

Ein Benutzer soll auf die folgenden Fragen zu jedem Zeitpunkt der Nutzung der Webpräsenz 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?

Vorsicht ist beim Neugestalten vertrauter Bedienelemente geboten, denn 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 (DIN 66 234 Teil 8)

Accessibility - Zugänglichkeit

Wann gilt eine Seite als zugänglich?

Eine Seite gilt als zugänglich, wenn der Zugang zum Inhalt der Seite unabhängig von Nutzer und benutzter Technologie gewährleistet ist.

Verschiedene unbekannte technologische Bedingungen:

Beim Webdesign gilt zu beachten, dass man auf die Gegebenheiten beim Nutzer keinen Einfluss hat. Dazu gehören:

• 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 Benutzereinstellungen (Schriftgröße, Farbeinstellungen, JavaScript support...)
• Unbekannte Fenstergröße
• Unbekannte Verbindungsgeschwindigkeit (von Modem bis High-Speed DSL)
• Unbekannte Farben (Ausgabe auf Monitor, Interpretation des Browsers)
• Unbekannte Schriftarten (Nutzereinstellungen, 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 handheld 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

Zu unterschiedlichen Bedürfnissen zählt selbstverständlich auch das Eingehen auf besondere Gegebenheiten bei Behinderten.

Bei Sehbehinderten zum Beispiel sollte darauf geachtet werden, dass die Schriftgröße im Dokument verändert werden können muss, um Fonts auch ohne Verwendung Bildschirmlupe sehr groß anzeigen zu lassen. Es gilt außerdem, Farbkonflikte bei Farbenblinden zu beachten. Rot und Grün sollten so verwendet werden, dass niemals mit Rot auf grünem Untergrund oder umgekehrt gearbeitet wird. Diese Farben werden beide als grau erkannt, und können somit nur schlecht oder gar nicht auseinandergeahlten werden.

Bei Hörgeschädigten hingegen sollte man bei Multimedia-Elementen darauf achten, immer Erläuterungen zum Gezeigten zu geben. (Es könnte u.U. auch sein, dass diese Inhalte vom Browser unterdrückt werden, wenn entsprechende Einstellungen vorgenommen wurden.)

Im Webdesign gilt ohnehin, dass eine Seite auch ohne Bilder und Movies aussagekräftig sein muss, und man sowohl Grafiken als auch andere multimediale Inhalte niemals ohne Erläuterungen einstellen sollte.

Usability - Benutzbarkeit

Was macht eine Seite benutzbar?

Um als benutzbar zu gelten, sollte eine Seite folgenede Eigenschaften aufweisen: Unmittelbare Verständlichkeit, Effizienz, Einprägsamkeit, Fehler und sollten die Seite nicht unbenutzbar machen (z.Bsp. durch Abbruch, Fehhlermeldungen ohne Möglichkeiten der Berichtigung), sie sollten also korrigierbar sein, als Fazit sollte der Nutzer in erster Linie zufrieden sein mit dem, was ihm geboten wird.

(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

Die Usability einer Seite begründet sich auch auf den Gewohnheiten der User, wie z. Bsp. das Aussehen von Links (unterstrichen, blau), die Annahme dass Knöpfe generell klickbar sind, die erwartete Anordnung der Navigation (meist links oder oben), dass Inhalte scrollbar sind, ausserdem werden Animationen als Werbung angesehen, und werden damit automatisch "ausgeblendet".

Pagedesign

Was macht eine gut gestaltete Seite aus?

Eine gut designte Seite zeichnet sich durch folgende Eigenschaften aus: Funktionalität, Kontinuität, Einfachheit, Verständlichkeit und klare Strukturen. Die richtige Verwendung von Farben, der richtige Einsatz von Schriftarten und -typen, Bildern und Graphiken sowie das Layout der Seite sollen dabei helfen, gut auszusehen.

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 bytes 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 zwischen nötigem und unnötigem Inhalt entschieden werden
• Selbst gut designter schlechter Inhalt nützt niemandem

Users invest very little time (often in 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 separaten 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 wird 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/textinfodesign/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/webpush/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.

-- MoonSoleil 01:00, 17. Nov 2004 (CET)