Aktualität und Interaktion
Kennzeichnend für das Medium Internet ist neben der Möglichkeit, aktuelle Inhalte einer sehr hohen Nutzerzahl zur Verfügung zu stellen, einen interaktiven Dialogmit denm Nutzer eingehen zu können.
Während die Aktualität von Inhalten ein wichtiger Anreiz für wiederholte Besuche der Webseite ist, fördert der Dialog mit dem Besucher Erkenntnisse über seine Wünsche (Marktforschung). Je besser man die Besucher kennt, umso besser wird das Angebot auf der Seite.
Formulare sind im Internet eines der wichtigsten Dialogelemente. Daher sollte bei der Gestaltung folgende Regeln beachtet werden...
- Abgeschlossene Dialoge (Die Informationen sollte alle zusammengehörig sein)
- Klare Abgrenzung (Der Dialog sollte optische vom eigentlichen Inhalt getrennt werden)
- Reduzierung der Belastung des Kurzzeitgedächtnisses (Der Dialog sollte den Benutzer nicht überfordern)
- Sprache des Benutzers verwenden (Dialogtexte sollten klar, höflich und verständlich ausgedrückt werden)
- Formulareingabefelder sollten nicht zu kurz sein
- Reale Vorbilder (Computerbasierte Formulare lehnen sich stark an ihre realweltlichen Vorbilder an)
- Hinweise fördern das Verständnis (z.B. welche Felder unbedingt ausgefüllt werden müssen. Platzierung am Anfang des Formulars)
- Einfache Fehlerbehandlung
- Rücksetzmöglichkeiten (Änderungen in den Dialogen sollte rückgängig zu machen sein)
Das Webdesign Layout
Eine Webseite kann man mit einem Gebäude vergleichen. Es hat einen Eingangsbereich, mehrere Stockwerke und verschiedene Abteilungen und Räume. Wie der Architekt hat der Webdesigner nicht nur die Aufgabe, die Webseite (das Gebäude) so zu entwerfen, dass sie funktioniert und außergewöhnlich gestaltet ist sondern dass die Menschen, die sie (es) benutzen, sich darin zurechtfinden und wohlfühlen.
1. Die Startseite (Eingangsbereich)
Sie sollte sofort erkennen lassen, worum es auf der Webseite geht. Sie dient nicht primär der Begrüssung sondern der Orientierung. Man sollte daher auf der Startseite folgende Informationen den Nutzern anbieten...
- Absender (Von wem kommen die Informationen ?)
- Adressat (Für wen sind die Informationen gedacht ?)
- Thema (Worum geht es ?)
- Aktualität (Von wann sind die Informationen ?)
Anhand dieser Angaben kann der Nutzer schnell erkennen, ob es sich für ihn lohnt, sich weiter mit der Webseite zu beschäftigen. Ebenso sollte man ein Impressum und Copyright Hinweis in das Hypertextsystem einfügen. Die Startseite sollte sich außerdem schnell aufbauen. Daher sollte der Gebrauch von aufwendigen Grafiken, externen Diensten (z.B. Counter) und Plugins vermieden werden.
2. Abmessungen des Bildschirms festlegen
Als nächster Schritt sollte festgelegt werden, in welcher Größe die Webseite gestaltet werden soll. Dadurch soll vermieden werden, dass etwa Seitenränder abgeschnitten werden oder das Bild zu klein auf dem Bildschirm erscheint. Da es unmöglich ist, eine Webseite in allen Browsern und auf allen System gleich aussehen zu lassen, sollte darauf geachtet werden, dass die Seiten auf ein und demselben System gut und konsistent wirken.
2.1 Breite von Webseiten
Besonders wichtig ist es, dass die Seiten nicht zu breit angelegt werden, da Scrollen nach rechts besonders unbeliebt ist und die Übersichtlichkeit darunter leidet. Wenn man die notwendigen Bedienelemente des Browsers /Betriebssystems berücksichtigt, kann man von folgenden Abmessungen ausgehen...
- Auflösung 800x600 Pixel (Nutzbare Fläche 750x400 Pixel)
- Auflösung 1024x768 Pixel (Nutzbare Fläche 980x570 Pixel)
2.2 Länge von WebseitenInformationen, die ohne Scrollen sofort zu sehen sind, werden vom Benutzer am häufigsten betrachtet. Deshalb sollten wichtige Links und Text- bzw. Bildinformationen ohne Scrollen erreichbar sein. Es empfiehlt sich daher, eine kürzere, zusammengefasste Version der Informationen auf der erste Seite zu präsentieren und einen Link hinzuzufügen, der den interessierten Anwender zu einem auführlichen Text zum Thema führt.
Bei besonders textlastigen Seiten sollte man zusätzlich eine Download Version anbieten oder einen "Drucken"-Button integrieren, da viele Anwender es bevorzugen, sich längere Texte auszudrucken.
2.3 Auflösungsabhängiges oder - unabhängiges Webseiten Layout ?
Zu Beginn der Bildschirmgestaltung sollten auch Überlegungen angestellt werden, ob das Layout der Webseite sich der Browserfenstergröße anpassen soll oder nicht. Bei einer festen Breite muss man mit Pixelwerten arbeiten, ansonsten mit Prozentangaben.
Ein flexibles Layout hat den Vorteil, dass Benutzer mit einem großen Bildschirm nicht das Gefühl haben, sich diesen umsonst angeschafft zu haben, weil das Bild in der linken oberen Ecke verschwindet. Flexible Seiten kommen außerdem im Druck besser heraus. Ein Nachteil ist, dass die Textspalten auf großen Monitoren zu breit geraten können.
3. Die Navigation
Eine einfache Struktur und kurze Wege zu den Inhalten sind auch das A und O für eine benutzerfreundliche Seite im Webdesign. Der Benutzer muss zu jedem Zeitpunkt wissen, wo er sich gerade befindet, wohin er gehen kann und wie er wieder zurückkommt.
Daher sollte man eine Site-Struktur entwerfen. Softwareprogramme wie Dreamweaver bieten hier die Möglichkeit, eine Art Dummie-Webseite mit allen Verlinkungen und Unterseiten anzulegen, bevor man dazu übergeht, Seiten mit Inhalten zu füllen. So behält auch der Webdesigner den Überblick.
Grundsätzlich sollte die Navigation so gestaltet werden, dass die eigentlichen Inhalte nicht zu sehr in den Hintergrund treten. Man sollte auch an Alternativen in Sachen Navigation denken. (z.B. interne Suchfunktion, "Pull-Down-Menüs")
4. Gestaltungsraster
Dies ist Grundlage für die Erstellung eines konsistenten Bildschirmlayouts über mehrere Seiten hinweg und muss vor der eigentlichen Gestaltung der Bildschirmseite gut überlegt und skizziert werden. Je konsistenter das Layout und die Navigation sind, desto einfacher wird der Benutzer mit der Seite zurechtkommen, da er die Position der gewünschten Informationen und der Navigation intuitiv erfassen kann.
Grundsätzlich gibt es vier Möglichkeiten, optisch Konsistenz in zusammengehörigen Seiten zu erreichen...
- Über eine Grundform, die sich auf allen Seiten wiederholt (Form-Layout)
- Über einen Rahmen, der sich auf allen Seiten wiederholt (Rahmenlayout)
- Über verschiedene Farben, die einzelnen Themenbereichen entsprechen (Farbgesteuerte Themengliederung)
- Über eine freie Komposition, die in sich geordnet ist (Das freie Layout)
Generelle Vorgehensweise beim Webdesign
Ohne Vorüberlegungen kann Webdesignnicht praktiziert werden. Fast keine Webseite ensteht auf dem Monitor sondern meist vorerst als Konzept auf dem Papier. Wenn ein Projekt inhaltlich und formell mit dem Auftraggeber geplant worden ist arbeitet im Anschluss oft ein Team von Designern und Redakteuren an dem Projekt, um dem Auftritt ein Gesicht zu geben.
Strukturierung der "Stoffsammlung" und Ziele eines Projekts
Die Verantwortung des Webdesigners liegt darin, das Ziel mittels Gestaltung zu verfolgen. Dazu gehören folgende Punkte...
- Inhalt und Form in Einklang bringen
- Erinnerungswert einer Webseite maximieren
- Navigation und Erfassung der Informationen so einfach wie möglich zu gestalten
Es ist unabdingbar die Entwicklung immer wieder auf bestimmte Fragen zu kontrollieren. Dazu gehören u.a.
- Welcher Kundennutzen wird beabsichtigt ?
- Was sind die Kernaussagen des Unternehmens, dass sich präsentiert ?
- Welchen Nutzen hat der Besucher auf der Webseite ?
- Stimmt die Gestaltung mit der Aussage des Projekts überein ?
- Dient die Gestaltung der Zielsetzung und dem spontanen Erfassen der Struktur ?
- Besitzt der Entwurf ein Alleinstellungsmerkmal ? Erinnerungswert ?
Geeignetes Equipment
Nachdem der Umfang der Webseite festgelegt wurde und über welche Funktionalitäten diese verfügen soll kann das Erscheinungsbild der Seite skizziert werden. Im Normalfall scribbelt man auf Papier. Sollten die Ideen für das Layout bereits gefestigt sein kann ein grobes Layout bereits am Rechner erstellt werden.
Man kann hierzu ein einfaches Malprogramm verwenden. Zu beachten gilt hier, das die Bildformate in anderen Anwendungen verarbeitet werden können. Empfehlenswert ist hier der Adobe Photoshop, der zahlreiche Funktionen bietet und außerdem ein vektororientiertes Zeichenprogramm (Adobe Illustrator) beinhaltet.
Ebenfalls empfehlenswert ist das Grafikprogramm Fireworks von Macromedia. Es arbeitet eng mit dem Webeditor Dreamweaver zusammen und ermöglicht es, sowohl vektor- als auch bitmapbasierte Bilder zu erstellen und zu bearbeiten.
Wenn der Seiten Entwurf steht und man die Navigation und den Bereich für die Inhalte untergebracht hat kann die Seite in HTML umgesetzt werden. Hierfür ist der Dreamweaver das richtige Werkzeug, da man mit ihm sehr schnell eine grobe Struktur erstellen kann. Der Vorteil des Editors ist auch, dass man prompt eine Seitenansicht hat (WYSIWYG-Editor !). Das Einbinden von Sounds und Filmen stellt für den Editor kein Problem dar. Außerdem wird der HTML-Code browserübergreifend und versionsunabhängig erzeugt.
Webstandards IV: Video
Videos sind schon seit langem eine Herausforderung für Programierer und Entwickler im Internet. Die Bandbreitenproblematik und das Engagement diverser Unternehmen haben unterschiedliche Videoformate hervorgebracht. Dazu gehören u.a. ...
- WMF (Windows Meta File) von Microsoft
- RM (Real Media File) von Real Networks
- MOV (Move File) von Apple
Der Kern jedes Videoformats ist der
Codec. Er leitet sich aus dem eingesetzten Komprimierungsverfahren (enCOden/DECoden) ab. Standard für den Codec sind die Richtlinien der
MPEG (Moving Pictures Experts Group). Neben der MPEG Kompression gibt es auch sogenannte Container-Formate, welche einen Spielraum für die Kompression bieten. Audio- und Videodaten in komprimierter Version können hier in verschiendenen Codecs vorliegen. Zu den bekanntesten Formaten dieser Art zählt der
AVI Container (Audio Video Interleave). Audio- und Videodateien werden hier ineinander "verzahnt" (interleaved) abgespeichert. Der Codec
DIVXbaut zum Beispiel auf AVI auf.Bei der Übertragung von Videos wird wie bei Audio Dateien zwischen
Stream und
Download-Technik unterschieden. Filme, die man downloaden muss, benötigen je nach Länge und Qualität mehr oder weniger Festplattenspeicher. Die Downloadzeit, die wiederrum von der Bandbreite abhängt, entscheidet hier, ob der User den Film betrachten will oder nicht. Das Download-Verfahren eignet sich daher besonders für kleine Dateien.Bei der Stream-Technik kann das Video nur so lange betrachtet werden wie eine Verbindung zum Internet besteht. Streams werden kodiert übermittelt und am Endgerät sofort dekodiert. Die Kodierung ist hierbei notwendig, da die Datei sonst zu gross für eine Übertragung wäre. Dekodiert wird die Videodatei durch ein spezielles "Plug-in". Als Standard Programme haben sich hier der Real Player, Windows Media Player sowie Quicktime durchgesetzt.Da die Wiedergabe beim Streamverfahren von der Bandbreite abhängig ist, sollte man die Filme in verschiendenen Qualitäten bereitstellen, damit auch User mit einer kleinen Bandbreite die Videos ansehen können.Für welche Zwecke Videos im Internet eingesetzt werden zeigt folgende Aufstellung:
Webstandards III: Audio
Wie bei den Bildern gilt auch bei der Verwendung von
Audio Dateien, dass die Dateigrösse drastisch gesenkt werden muss. Bei den Übertragungsarten kann man nach
Download und
Streamunterscheiden. Beide Arten unterscheiden sich dadurch, das beim Download die Datei auf die Festplatte gespeichert wird und erst nach dem kompletten Download gestartet werden kann während sich das "Streaming" durch einen kontinuierlicher Datenstrom auszeichnet. Dadurch kann das Audiosignal bereits nach kurzer Zeit gestartet werden.
Das wichtigste Audioformat beim Download ist bekanntlich MP3, beim Stream sind es RAM (Real Audio Media) und WMA (Windows Media Audio). Diese Formate möchte ich kurz näher erläutern.
MP3
Dieses Format steht für "MPEG1 Audio Layer 3" und ist Teil der MPEG Standards zur digitalen Kompression von Audio- und Videosignalen. Entwickelt wurden die Standards am Fraunhofer Institut.
Der grösste Vorteil dieses Formats ist die geringe Dateigrösse. Sie beträgt etwa nur 10 % der Originalgrösse der Audiodatei. Die Komprimierung erfolgt aber verlustbehaftet. Zusätzlich zu den Audioinformationen können noch weitere Informationen in "Tags" aufgenommen werden (z.B. Liedname, Interpret etc.). Der entscheidende Vorteil von MP3 ist, dass es Plattformunabhängig ist.
Real Player
Dieses Programm kann spezielle Audio- und Videodateien (RAM Dateien) abspielen und wurde von Real Networks entwickelt. RAM-Dateien zeichnen sich durch ihre geringe Grösse aus und sind deshalb besonders für das "Streaming" geeignet. Die zur Verfügung stehende Bandbreite hat dabei einen grossen Einfluss auf die Abspielqualität, da der Datenstrom während der Übertragung automatisch an die Bandbreite angepasst wird.
Neben dem RAM-Format kann der Real Player auch Formate wie MP3, WAV, AVI und MIDI abspielen.
Windows Media Player
Dieser Player nutzt das WMA-Format. Dieses eignet sich sehr gut für das "Streaming", weil es eine bessere Komprimierung als andere Formate hat und deshalb weniger Bandbreite benötigt. Der Windows Media Player ist auch in der Lage, Sounddateien mit einer Tiefe von 24bit und einer Abtastrate von 96 kHz abzuspielen, was Dolby Digital Qualität entspricht. Neben dem WMA-Format kann der Player auch alle anderen gängigen Audio- und Videoformate abspielen.
Bei der Verwendung von Audiodateien auf Webseiten gelten ansonsten die aus dem Screendesign bekannten Regeln. Es sollten kurze, kleine Sequenzen verwendet werden, die der Benutzer jederzeit anhalten und steuern kann. Dabei sollte er erstens eine Kurzinformation über Länge und Inhalt erhalten und zweitens sollte er wissen, mit welchem Player er die Informationen abspielen kann.
Bilder sollten im Internet nur sparsam und in angemessener Größe eingesetzt werden, da zu viele oder zu grosse Bilder lange Ladezeiten hervorrufen. Sie sollte daher entsprechend komprimiert werden. Für die Darstellung von Bildern und Grafiken gibt es 3 wichtige Grafikformate: JPEG, GIF und PNG.
Wie bereits erwähnt sollte die Speichergröße einer Grafiken immer so gering wie möglich sein um die Ladezeit zu verkürzen. Daher sollte man auch wissen, welche Attribute die Größe beeinflussen...
- die Dimension der Grafik (Höhe und Breite)
- die Farbtiefe
Mit Grafikprogrammenlassen sich Grafikdateien gut für das Internet optimieren. Das Ziel sollte dabei immer sein, ein ausgewogenes Verhältnis zwischen Ladezeit und Qualität zu erreichen.
Folgende Punkte sollten beim Einbinden von Grafiken beachtet werden:
- Bilder sollten maximal 30 KB (Kilobyte) gross sein. Bei grossen Bildern sollten Vorschaubilder (Thumbnails) erstellt werden um die Ladezeit gering zu halten
- Beim Einbinden von Grafiken in den Quellcode sollte die Höhe und Breite des Bildes angegeben werden. Die Ladezeit wird dadurch etwas verringert.
- Grosse Bilder bzw. Bilder auf der nächste Seite können durch ein Javascript "vorgeladen" werden. Dies ist vorallem bei Fotogalerien empfehlenswert
- Grafiken können mehrfach verwendet werden. Dadurch wird neben der Reduzierung der Antwortzeit auch eine einheitliches Design erreicht
- Im ALT-Tag sollte eine kurze und sinnvolle Beschreibung angegeben werden
- Als Alternative zu aufwendigen Grafiken können auch Icons verwendet werden. Dies sind symbolhafte Zeichen, die der Vereinfachung einer Webseite dienen und sprachunabhängig sind
- Grafiken "interlaced" abspeichern. Sie werden dann beim Laden schichtweise und nicht zeilenweise eingelesen und aufgebaut
Webstandards I: Schrift
Kommen wir nun zum ersten Webstandard, der der Informationsaufbereitung dient - die Schrift. Um mit den meisten Betriebssystem kompatibel zu bleiben gibt es derzeit nur folgende Schriftvarianten im Web:
- Courier New, Courier, Monospace
- MS Serif, New York, Serif
- Times New Roman, Times, Serif
- MS Sans Serif, Geneva, Sans Serif
- Verdana, Geneva, Arial, Helvetica, Sans Serif
- Arial, Helvetica, Sans Serif
Es gibt allerdings auch Außnahmen. Anwendungen wie Flash oder der Acrobat Readerbinden die verwendeten Schriften direkt in die Dateien ein und sind daher von dieser Regel nicht betroffen.
1. Empfehlung für die Gestaltung
Bislang erfolgte die Einbettung einer Schriftart über den HTML Tag FONT. Da dieser im "HTML 4 Strict"-Standard aber nicht mehr zulässig ist sollte zukünftig auf die Verwendung des Tags verzichtet werden. Alternativ können alle Schriftangaben mittels CSS definiert und eingefügt werden.
Dabei ist allerdings zu beachten, dass der User im Browser einige Schriftattribute verändern oder auschalten kann, was Folgen für Gestaltungsraster, Umbrüche, Lesbarkeit und Spaltenbreite haben kann. Außerdem hängt das Schriftbild von der Bildschirmauflösung und - größe ab. Man weiss also nie, wie der Text im Browser des Nutzers letztendlich aussehen wird.
Um eine genaue Kontrolle über das Layout zu haben sollte man Tabellen verwenden. Auch hier gilt: Es sollten keine langen Zeilen verwendet werden und die Tabellenbreite sollte maximal 400 Pixel betragen. Mit dem CELLSPACING und CELLPADDING-Tag kann man für Zwischenräume im Text sorgen.
Alternativ werden auch häufig transparente Grafiken in Tabellen verwendet, um Text einzurücken oder zu positionieren. Damit ein standardkonformes Design gewährleistet ist sollte bei der Gestaltung außerdem Boxen/Ebenen (DIVs) verwendet werden.
Um das Lesen von einem langen Text zu erleichtern sollte man diesen durch Überschriften, Abschnitte etc. auflockern und einige Schlüsselwörter hervorheben (z.B. Fett oder Kursiv). Eine Unterstreichung sollte als Hervorhebung aber nicht verwendet werden, da diese in der Regel einen Hyperlink signalisiert.
1.1 Scrollen
Lange Seiten, auf denen viel gescrollt werden muss, wirken abschreckend. Deshalb ist es beim Webdesign wichtig, das die Texte kurz gehalten werden. Man sollte gegebenenfalls die Texte in sinnvolle Informationseinheiten unterteilen und diese auf mehreren Seiten präsentieren. Außerdem sollte sie untereinander verlinkt werden.
Bei langen Seiten gilt die Regel der "umgekehrten Pyramide" (wichtigsten Informationen stehen am Anfang). Diese Art des Schreibens ist im Internet generell von Vorteil. Bei längeren Seiten sollten dem Besucher im Text außerdem Links zum Startpunkt angeboten werden.
1.2 CSS-Formatierungen
Durch den Einsatz von CSS ergeben sich mehr gestalterische Freiheiten. CSS ist eine Standardformatierungssprache für Schriften in HTML-Dokumenten. Durch sie können z.b die Farbe, Schriftart, Schriftgröße, Wortabstände uvm. definiert werden. CSS bietet außerdem in vielen Bereichen weitaus größere Flexibilität und Eingriffsmöglichkeiten.
Kommentare (0)