Webdesign

Aus InfoWissWiki - Das Wiki der Informationswissenschaft
Zur Navigation springen Zur Suche springen

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, eine 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 man 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.)

Um die gewünschten Effekte zu erzielen, gilt es, auf folgende Aspekte des Pagedesign besonders zu achten:

  • Farben
  • Typographie
  • Graphiken
  • Layout

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

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)

Abgerufen von „https://wiki.infowiss.net/index.php?title=Webdesign&oldid=952“
… weitere Daten zur Seite „Webdesign“
RDF-Feed
Broader
Informationspräsentation +
Definition
Mit "Webdesign" bezeichnet man die Methoden, Verfahren und Werkzeuge, die bei der Gestaltung von Informationssystemen im WWW eingesetzt werden +
Related
Softwareergonomie +, Mensch-Maschine-Interaktion +, Hypermedia +, Interaktion +, Informationssystem +  und Interaction Design +