Quelltext der Seite Webdesign

== Einführung Webdesign ==


'''Das World Wide Web als Massenmedium'''

Das [[Geschichte des WWW|WWW]] ist eine riesige Informationsdatenbank, in der es Millionen von Seiten gibt, die theoretisch für alle Menschen zugänglich sind.
Es gibt hier kein Fachpublikum wie bei Printmedien, wodurch klar wird, dass im Netz klar strukturierte, knappe Informationen zählen, die nicht auf eine bestimmte Zielgruppe zugeschnitten sind.
Alle Bildungsschichten, alle Altersgruppen, Menschen jeder Herkunft können eine Präsentation im Internet aufrufen und anschauen.


'''Einheitsdesign?'''

Es stellt sich die Frage, ob alle Seiten im WWW unterschiedlich geschrieben werden, oder es auch hier ähnlich den Printmedien Standards gibt, die eingehalten werden sollten oder gar müssen, um jedem, der dies will, den uneingeschränkten Zugang zu den Online-Informationen zu gewähren.

Wenn es dabei Richtlinien, also Style Guides gibt, worin liegen die Vorteile, diese zu befolgen?


'''Style Guides:'''

Mit den so genannten Style Guides, ist es möglich:
* Die ergonomische Qualität und Konsistenz zu sichern
* Ein fundiertes Know-how für die Entwicklung zukünftiger Applikationen zu bieten
* Die 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. ''[http://ais.informatik.uni-leipzig.de/download/2002w_v_mmk/2002w_mmk_v_12.pdf 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. ''[http://server02.is.uni-sb.de/trex/index.php?query=interface+design&id=2.3.3.&suche=Y Interface Design.]'' TerminosaurusRex. 2002.)
<br><br><br><br>

== 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'' Ausgabe ohne Abweichungen, nämlich das Druckbild, welches vom Designer entworfen wurde.

Im Internet hingegen ist es nicht möglich, eine einheitliche Ausgabe zu gewährleisten, da es verschiedene Betriebssysteme, Browser, Schriftarten (Fonts), Monitore mit unterschiedlichen Auflösungen, Verbindungsgeschwindigkeiten, unterschiedliche Nutzereinstellungen, Ausgabegeräte (PC, Laptop, TV, Handhelds, Mobiltelefone) etc. gibt, die die designte Seite völlig unterschiedlich aussehen lassen.


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|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 man keine andere Wahl, als die unterschiedliche Darstellung der erstellten Internetpräsenz zu akzeptieren, und das Ziel des Webdesigns darin zu sehen, die Seite unter allen Umständen [[Webdesign#Usability - Benutzbarkeit|benutzbar (usable)]] und [[Webdesign#Accessibilty - Zugänglichkeit|zugänglich (accessible)]] für den Besucher zu entwerfen.
<br><br><br><br>

== Die graphische Benutzerschnittstelle (Graphical User Interface) ==


'''Kommunikation von Mensch zu Maschine'''

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

Ein Besucher 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.


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|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)
|}
<br><br><br>

== 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 vom Nutzer und der von ihm genutzten technischen Austattung (sowohl Hardware wie das Ausgabegerät als auch Software wie der Internetbrowser) 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)


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|On the web, we have to give up [http://de.wikipedia.org/wiki/WYSIWYG 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: [[CSS (Cascading Style Sheets)|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 auseinandergehalten 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 [[Graphiken]] als auch andere multimediale Inhalte niemals ohne Erläuterungen einstellen sollte.
<br><br><br><br>

== Usability - Benutzbarkeit ==


'''Was macht eine Seite benutzbar?'''

Um als benutzbar zu gelten, sollte eine Seite folgende Eigenschaften aufweisen: Unmittelbare Verständlichkeit, Effizienz und Einprägsamkeit. Fehler von der Seite des Benutzers sollten die Seite nicht unbenutzbar machen (z.Bsp. durch Abbruch, Fehlermeldungen ohne Möglichkeiten der Berichtigung), sie müssen 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. ''[http://www.bestviewed.de Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.]'' 2002.)


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|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 [[Link|Links]] (unterstrichen, blau), die Annahme dass Knöpfe generell klickbar sind, die erwartete Anordnung der Navigation (meist links oder oben), dass Inhalte scrollbar sind, etc.<br>
Sind diese vom Benutzer als selbstverständlich empfundenen Gegebenheiten nicht so, wie er es aus seiner Erfahrung heraus gewohnt ist, kann es leicht zu Verwirrung bishin zur Resignation des Nutzers führen.

Ausserdem werden Animationen von ihm als Werbung angesehen, und werden damit automatisch "ausgeblendet", also nicht ernst- oder gar wahrgenommen. Dabei handelt es sich um die so genannte "Banner-Blindness". Sollten Navigationsbuttons oder andere wichtige Informationselemente der Website als animierte [[Graphiken]] dargestellt werden, werden sie in der Regel weitaus weniger beachtet als statische Bilder oder Informationen in reiner Textform.

Um dem User einen möglichst angenehmen Besuch auf der Website zu bereiten, muss der Designer also die Gewohnheiten der Nutzer in Betracht ziehen, um eine möglichst große Usability zu erreichen.
<br><br><br>
'''Siehe auch:''' [[Usability Testing und Engineering]]
<br><br><br><br>

== 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 [[Typographie|Schriftarten und -typen]], [[Graphiken|Bildern und Graphiken]] sowie das [[Layout]] der Seite sollen dabei helfen, gut auszusehen.


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|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.)
|}


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|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.)
|}


Um die gewünschten Effekte zu erzielen, gilt es, auf folgende Aspekte des Pagedesign besonders zu achten:
# [[Farben]]
# [[Typographie]]
# [[Graphiken]]
# [[Layout]]
<br><br>

== Content (Inhalt) einer Seite ==


'''Guter Inhalt?'''

Was ein 'guter Inhalt' eines Informationssystems ist, ist schwer zu definieren, denn Informationen sind subjektiv und können nicht eindeutig festgelegt werden. Trotzdem kann objektiv zwischen nötigem und unnötigem Inhalt entschieden werden, weshalb sich Webdesigner folgender Regel bewusst sein sollten: Selbst gut designter schlechter Inhalt nützt niemandem.


{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" align="center" width="80%" style="background:#E8F2FF;" bgcolor="#E8F2FF"
|-
|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'''

Da Nutzer am Bildschirm weniger Bereitschaft zeigen, lange Fließexte zu lesen als in Printmedien, sollte auf diese gänzlich verzichtet werden. Relevante, interessante und vor allem themenbezogene Inhalte sollten ohne Umschweife preisgegeben werden.
Außerdem ist der Text gut und gut ersichtlich zu strukturieren, und im Sinne des [[Hypertext]] in kleinere Einheiten aufzuspalten.

Der Designer muss ebenso darauf achten, die richtige Sprache zu verwenden, das heisst die Texte erstens zielgruppenorientiert darzustellen, zweitens auf Fachbegriffe weitestgehend zu verzichten (sollten Fachbegriffe verwendet werden, brauchen sie unbedingt eine Erklärung). Drittens sollte beachtet werden, kurze Sätze ohne Floskeln anzuwenden, sowie Modesprache dringend zu unterbinden (Formulierungen wie 'trendy', 'phat', etc.).

Es muss dem Designer ständig bewusst sein, dass seine Site von Nutzern der unterschiedlichsten Zielgruppen besucht werden kann - Jugendliche, Kinder, Erwachsene, ungebildete und gebildete Personen bishin zu Akademikern können zum Beispiel durch den [[Link]] in einer [http://de.wikipedia.org/wiki/Suchmaschine Suchmaschine] auf die Site gelangen. Sie alle, ohne Ausnahme, müssen die Seite benutzen können und nach Möglichkeit auch die Informationen finden, nach denen sie gesucht haben.
<br><br><br><br>

== Technologien ==


'''Was soll?'''

Es stellt sich die Frage, was das Ziel des Webdesign ist.<br>
Es sollte sch bei einer Wepräsentation um eine optisch ansprechende Site handeln, die auch durch Inhalte überzeugen kann. Sie sollte technisch einwandfrei sein, bei allen Nutzern unter allen Bedingungen funktionieren und  von jedem Besucher benutzbar sein können.


'''Was muss?'''

Es sollte auf folgende Faktoren geachtet werden, um die vorher definierten Ziele zu erfüllen: Die Site muss eine "strukturierte Flexibilität" aufweisen, das bedeutet durch ein gutes [[Layout]] die Site strukturieren, und flexibel genug sein, so dass der User in der Lage ist, eigene Einstellungen beizubehalten und  die Site nach seinen Vorstellungen anzupassen.


'''Was darf?'''

Natürlich kann man die Page auch mit Zusatzmerkmalen ausstatten, solange diese optischen "Bonbons" die Technik nicht behindern.


'''Was darf nicht?'''

Es muss unbedingt alles beim Design vermieden werden, was den [[Webdesign# Accessibility - Zugänglichkeit|Zugriff]] und die [[Webdesign# Usability - Benutzbarkeit|Benutzbarkeit]] der Site behindert. Sie dürfen nicht von bestimmten technischen Gegebenheiten abhängen. Es sollte keine starre Vorgaben wie fixe Schriftgrößen geben, und es dürfen keine unaufgeforderten Aktionen passieren.



Im folgenden werden Vor- und Nachteile verschiedener Technologien des [[Webpublishing]] erläutert, die für Publikationen im Internet genutzt werden können.
# [[Macromedia Flash]]
# [[JavaScript]]
# [[Frames]]
# [[PDF, Word & Co.]]
# [[HTML (Hypertext Markup Language)]]
# [[CSS (Cascading Style Sheets)]]

<br><br>
== Fazit - Der Weg zu gutem Webdesign ==


'''Der Wunschtraum'''

Als [http://de.wikipedia.org/wiki/Eierlegende_Wollmilchsau 'eierlegende Wollmilchsau'] der Webdesigner könnte man wohl "Einheitsuser" bezeichnen, die alle dasselbe Surfverhalten haben, die alle dieselben Anforderungen und Bedürfnisse an das Webdesign haben.

Ausserdem wünschenswert wären einheitliche Standards, die von allen Browsern unterstützt werden sowie eine flexible Auszeichnungssprache, mit der alles möglich ist.


'''Die Realität'''

Natürlich haben die unter 'Der Wunschtraum' angegebenen Forderungen nichts mit der Realität zu tun. Vielmehr versucht man sich mit den Gegebenheiten der verschiedenen unbekannten technologischen Bedingungen auf guten Fuß zu stellen, und das Bestmögliche zu erreichen, obwohl man sicher sein kann, dass es [http://de.wikipedia.org/wiki/WYSIWYG WYSIWYG] im [[Webpublishing]] nicht oder jedenfalls nicht in naher Zukunft geben kann und wird.

Der sicherste Ansatz auch in Hinsicht der Akzeptanz des [[W3-Konsortium|W3-Konsortiums]] besteht darin, Webseiten in [[HTML (Hypertext Markup Language)]] in Kombination mit [[CSS (Cascading Style Sheets)]] zu beschreiben. Dies bietet einen guten Ansatz zur Konformität, Einfachheit und Funktionalität im Web.

Allerdings gibt es für diese Veröffentlichungstechnologie noch keine einheitliche Unterstützung, verschiedenste Probleme entstehen durch die gravierenden Unterschiede der Hard- und Software, sowie der persönlichen Einstellungen der Nutzer. Dies wird durch die Ausbreitung des Internets auf den verschiedensten Plattformen auch so bleiben.

Webdesigner werden sich also weiterhin auf die Suche nach Konformität begeben müssen.


'''Möglichkeiten nutzen'''

Als Webdesigner bleibt es unausweichlich, up-to-date zu bleiben und neue Techniken und [[Webdesign#Technologien|Technologien]] anwenden, sobald sie Standard geworden sind.
Es ist und war immer wichtig, sich an bestehende Standards halten, um die [[Webdesign#Usability - Benutzbarkeit|Usability]] und die [[Webdesign#Accessibilty - Zugänglichkeit|Accessibilty]] von Websites garantieren zu können.


'''Herausforderungen sehen'''

Abschließend bleibt zu sagen, dass gutes Webdesign ist eine große Herausforderung ist und bleibt, deren Belohnung der Erfolg ist, wenn [[Webdesign#Accessibilty - Zugänglichkeit|Accessibilty]] und [[Webdesign#Usability - Benutzbarkeit|Usability]] soweit wie möglich gewährleistet werden, und man es schafft, Stil mit Praktikabilität, Struktur mit Flexibilität zu vereinen.
<br><br>
<br><br>

== 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. ''Interface Design. 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.


-- [[Benutzer:MoonSoleil|MoonSoleil]] 15:07, 15. Mär 2005 (CET)

[[category:Informationsdesign]]