Design, Layout, Struktur - file– Lineare Struktur, keine textuellen Inhalte • Design –...

Design, Layout, Struktur

Web Site Engineering,Vorlesung Nr. 5

© Martin Klarner, Informatik 8, FAU VORL 5/Folie 2

Konstruiertes Beispiel

file:///./wpts_suck.htm


Konstruiertes Beispiel (2):Was ist daran so schlecht?

• AllgemeinesErster Eindruck, Ladezeit, fehlende Information (Kontakt, Erstellungsdatum)

• JavaScriptSchwer erkennbar, nicht portierbar, Funktion?

• GrafikUnübersichtlich, überladen

• OrganisationStrukturlos, verwirrend

• NavigationUnübersichtlich, uneinheitlich

• InhaltQuantitiv und qualitativ wenig, unnötiges Audio-File


Praktisches Beispiel

file:///./warez.htm


Praktisches Beispiel (2):Was ist daran so schlecht?

• Layout und Struktur: Erste Generation!– Zentrierter Text mit Inlined Images– Lineare Struktur, keine textuellen Inhalte

• Design– Aufdringliche Farbgebung:

Starke Kontraste zwischen schwarzem Hintergrund und leuchtenden Vordergrund-Elementen

– Blinkende Banner, Icons und Lämpchen– Sehr große, sehr unruhige animierte GIFs („Leuchtreklamen“)– Alerts und Popups

• Navigation– Externe Links unverhältnismäßig stark gegenüber internen betont– Externe Links nicht ohne weiteres von internen unterscheidbar– Missbrauch von JavaScript zum Überladen von Browserfunktionen

(Back-, Forward- und Close-Button)


Praktisches Beispiel (3):Was ist daran interessant?

• Verknüpfung der wichtigsten Suchbegriffe– Das „Web-Triumvirat“: Sex/Warez/MP3 (und Passwörter)– Meta-Tags: <meta name=“ ke yword s” cont ent= “ ware z, ware z,

el i te , pi r at e, games, porn , te en, deat h, deat h, anar ch y, phre ak , hacke r, hack , met al li ca , l in ks , f tp , f uc k, sex, sex , sex , war ez , war es , el i te , el i te , pi r at 8, veri fi ed, FTP, f re e, f r ee, fr ee, war ez , war ez , mi l ano, geoc it ie s, co dez, ch eat s, cra cks , se r ia l, numbers , ser ia l, se ra il , ser ia l ”>

• Kundenbindung durch „free“-Argument in Kombination mit labyrinthischer Navigation

• Trotz „free“-Argument entstehen schnell Kosten• „Underground“- bzw. „Rotlichtviertel“-Metapher• „Suchtpotential“ überwiegt Nachteile⇒ Funktioniert trotz schlechten Designs!


Weiteres Beispiel

http://www.cigaraficionado.com


Weiteres Beispiel (2)

http://www.cigaraficionado.com


Was ist an diesem Beispiel so gut?• Klares, durchgängig eingehaltenes Konzept

– „First things first!“– Funktionalität: Umfangreich und vielfältig, aber trotzdem gut erreichbar

– Inhalt: Mischung aus Aktuellem und Bewährtem– Navigation: Mehrere Möglichkeiten (Text und Bild)

• Schlichte, funktionale, aber gediegene Grafik– Übersichtliches Layout, Einbettung in festen Rahmen– Einheitliche, unaufdringliche Farbgebung

– Corporate Identity durch Logo, Verzicht auf Klischees wie Cliparts– Sparsamer Umgang mit animierten GIFs

• Inhalt– Ausgewogenes Verhältnis von Text und Bildern– Aktuelle Meldungen an prominenter Stelle– Viele Give-Aways zur Kundenbindung


Was lernen wir daraus?Allgemeine Design-Prinzipien

– „Form follows function“– Zuerst Konzept entwickeln– Einstieg erleichtern und verschönern– Technologie ist nicht alles– Site nicht überfrachten– Inhalt strukturiert organisieren– Struktur im Layout übernehmen (Grid)– Struktur an Möglichkeiten der Darstellung

anpassen (z.B. Anzahl der Rubriken)


Allgemeine Design-Prinzipien (2)• Wert von Inhalt und Give-Aways hoch einschätzen• Navigationsdesign (Text und Grafik) bewältigen• Ausgleich zwischen Stabilität und Veränderung

schaffen– Zeitangaben– News-Sektion– Moderate Änderungen

• Dialog und Interaktion integrieren(Erhöhung des Erinnerungswerts)

• Möglichkeiten zum Kontakt erstellen⇒ „Sorge“ um den Benutzer!


Vorgehen bei der Erstellung einer Website

1. Zweck und Publikum2. Planung

– Design – Ressourcen

3. Umsetzung4. Deployment

– Test– Wartung– Marketing

⇒ Vgl. auch vorherige Vorlesungen!


Auslegung einer Site

• Zentrale Bedeutung derthematischen Auslegung: „Metapher“!– Kombination aus Phantasie und Zweckmäßigkeit– Beispiele: Galerie, Werkstatt, Fabrik– Transport durch Hintergrund (z.B. Filmrolle), Navigation,

Logo, …– Möglichst über die ganze Site hinweg durchzuhalten!

• Zweck– Gefühl der Vertrautheit bei der ersten Benutzung erzeugen– Rasche Wiedererkennung und Zurechtfinden bei weiterer

Benutzung ermöglichen


Auslegung (2)

• Bestehende Site-Standards respektieren– De-facto-Standards:

Browsertyp, Bildschirmgröße, Betriebssystem, …– Ungeschriebene Gesetze

• Anforderungen erfüllen bezüglich …– … Mindestgröße– … Interessantheit– … Aktualität

• Mit konkurrierenden Sites vergleichen


Bestandteile einer Site1. Einstiegsseite

– Geringe Ladezeit– Übersichtliches Layout– Attraktives Aussehen– Verschiedene Doorway Pages

2. Zentralseite– Einheitliche Navigation– Wiedererkennungswert (z.B. durch „Metapher“)– Corporate Identity (z.B. durch Logo an prominenter Stelle)

3. Definierter Ausgang(Erhebung von Kundendaten, Feedback)


Aktualität

• Aktualität dokumentiert …– … Ernstnehmen des Users– … Interesse am User

• Daumenregel: Wöchentliches Update • Erhaltung von Navigationspfaden und

URLs, auch über Updates hinaus!• Inhalt durch den Nutzer verändert:

Benutzer fühlt sich umsorgt!


Aktualität (2)

• Vermittlung von Aktualität durch …– … Seitenbestandteile: z.B. durch „last updated …“– … News-Spalte: Protokoll der Änderungen– … aktuelle und aktualisierte Inhalte– … sanftes Redesign (z.B. technische Anpassung)

– … Newsletter– … moderiertes Forum


Bestandteile einer Seite

• Titelzeile (wichtig u. a. für Bookmarking)

• Kopf (Header): Übersicht• Körper (Body): Inhalt• Fuß (Footer): Allgemeine Information

– Datum der letzten Änderung und/oder der Erstellung (Aktualität)

– Autor oder verantwortliche Person, Email-Adresse oder Homepage (Seriosität, Service)

– Link zur Homepage (Teil der Navigation)– URL der Seite (Papierausdruck, Referenz)

• Navigation (Redundanz schadet hier nicht!)


Inhalte• Wertvolle Inhalte

– Einzigartigkeit, Zusammenstellung– Aktualität, Nützlichkeit, Originalität, ...

• Incentives– Sonderangebote– Zusätzliche Informationen– Give-Aways– Gewinnspiele, ...

• Archivierung und Bereitstellung alter Inhalte– Referenzierbarkeit– Vertrauensbildung


Text

• Alignment und Grid machen die Seite lesbarer• Information in kleine, logisch abgeschlossene Teile

aufteilen• Textabschnitte kurz halten• Aufzählungen verwenden• Typographische Prinzipien verwenden (von der

Papierdokument-Erstellung abgeleitet)– Wenige verschiedene Fonts– Gebräuchliche Fonts verwenden– Leerräume als wichtiges Gestaltungsmerkmal


Text (2)

• Hervorhebungen– Leiten des Users, aber: Gefahr der Verwirrung – Konsistenz in Farbe, Font, Hintergrund– Sparsame Verwendung – Farbliche Hervorhebung wichtiger Dokumentteile

• Vermeiden von …– … blinkendem Text– … Text in Statuszeile– … Javascript -Alerts– … großen Bannern


Darstellung

• Papier vs. Bildschirm– Ermöglichen des Ausdrucks– Zehnfach bessere Auflösung von Papier– Ausdrucken von Seiten zur Offline-Benutzung – Unterschiedliche Art, auf Papier und im Netz zu

lesen (Scanning)

• Unterschiedliche Bildschirme (Auflösung, Farbe) und Browser


Suche vs. Navigation

• Verschiedene Benutzerstrategien:Navigationstypen und Suchtypen

⇒ Navigation und Suchfunktion bereitstellen• Eigene Suchmaschine

– Daumenregel: Sites ab 100 Seiten– Boole´sche Suche zu komplex– Besser einfache Suche mit Verfeinerung– Verschiedene (benutzerspezifische)

Funktionalitäten bereithalten


Navigation• Voraussetzung: Orientierung, Lokalisation• Interaktion mit dem Benutzer• Intention

– Einfach– Schnell zum Ziel (keine Verwirrung)

• Navigation oft zu kompliziert• Einsatz von Navigationslinks

– Jeder Link muss sinnvoll sein– Verwendung aussagekräftiger Linktitel– Schnell auf den Punkt kommen– Site Map als letzte Chance!


Navigationsdesign

• Statuszeile des Browsers nicht verbiegen!• Bekannte grafische Elemente nicht abändern• Keine kryptischen Navigationspfeile (s.u.)• Lokale Position veranschaulichen• Ordnung (Hierarchie) erkennen lassen!• Navigationslinks zu …

– … Homepage– … übergeordneten Seiten– … Navigationshilfen– … Kontakt


Navigationselemente

• An die Standards halten– Dateimanager-Metapher– Karteikasten– Home > Section > Subsection > Page– Image Maps– Thumbnails, Buttons

• Navigationselemente– Aussagekräftig– Unterscheidbar– Einheitlich

• Navigationsalternativen: Text und Grafik• Aber: Kein Überangebot an Navigationsmitteln!


Layout und Struktur

• Sinn von Layout– Konsistenz erhalten– Vertrautheit schaffen– Vermittlung von Inhalten unterstützen– User auf der Seite halten

• Layout-Regeln– Seitengröße dem Browserfenster anpassen

(Scrolling vermeiden)– Links müssen über Farben erkennbar sein– Konsistentes Layout gewährleisten


Farbe

• Farben haben Bedeutung– Emotion– Skala für Textfärbung: weiß, schwarz, rot, blau, …

• 8 bit (256) vs. 24 bit (16 Mio.) Farben• Farbenlehre:

analoge, komplementäre Farben– Farben müssen zusammenpassen und Lesen

ermöglichen– Verschiedene Bildschirme, Browser


Grafik

• Balance zwischen Bild und Text• GIF (Graphic Interchange Format)

– Nur 256 Farben ⇒ v. a. für Zeichnungen– Animiertes GIF, Interlacing– Transparenz

• JPEG (Joint Photographic Experts Group)– 16 Mio. Farben ⇒ v. a. für Fotos– Verschiedene Kompressionsgrade

• Dateigrößen beachten• Verwendung als Hintergrund


Multimedia /Sound

• Verschiedene Formate– MIDI (Musical Instrument Digital Interface)– WAV (WAVeform Audio File Format)– MP3 (Motion Pictures Expert Group Layer 3)

• Voraussetzungen– Mehrwert– Triftige Gründe

• Vermeidung von Hintergrundmusik– Störung – Ladezeit


Proprietäre Erweiterungen am Beispiel Flash

• Mehrwert eines Flash-Intros?• Missbrauch von Design:

Häufig Eliminierung der Navigation, Bruch mit Standard-GUIs, oberflächlicher Inhalt …

• Verlust üblicher Funktionalität:Veränderung von Schriftgrad und Linkfarben, Back-Button

innerhalb von Flash, Suche (Find-Menü), einheitliche Wartung …

• Hoher Erstellungsaufwand • Lange Download-Zeit

⇒Vermeidung proprietärer Erweiterungen


URLs

• Kurze, eingängige URLs verwenden (Memorierbarkeit)• Korrespondenzen zwischen URL und Struktur gewährleisten• Keine ungewöhnlichen Abkürzungen einführen• Sonderzeichen ("~", "/", "_", "-", ".") sparsam einsetzen

(Verwirrung, Eingabe, Verwechslung)• Konsistente Verwendung von Groß- und Kleinbuchstaben (für

UNIX relevant!)• URLs beibehalten• Einstiegspunkte auszeichnen und kenntlich machen


Frames

• Vorteile – Organisation und Struktur– Modulares Design– „Statische Dynamik“

• Nachteile– Widerspricht Prinzip „ein Fenster → ein Inhalt“– Fehlende/falsche Indizierung durch

Suchmaschinen– Probleme mit Bookmarks– Navigation (Schwierigkeiten mit Back-Button)


Frames (2): Probleme

• Zerstörung des Layouts durch …– … neue Fenster– … Resizing– … Bildschirmauflösung– … alte Browserversionen– … Unsitte: Integration fremden Inhalts

• Probleme mit …– … Bedienbarkeit – … Quellcode – … Ausdruck– … Interaktion zwischen Frames (Javascript)


Frames (3): Verwendung

• „Abgeschlossenes“ System• Nutzung für Inhaltsverzeichnisse • Vergleich von Seiten• Beliebige Kombinationen von Frames⇒ Alternative: Tabellen …

– … entsprechen dem Prinzip „ein Fenster → eine Seite“– … erleichtern den Überblick für Benutzer– … geben dem Web-Designer die Kontrolle über das Layout

Probleme bei Tabellen – Komplexität– Ladezeit– Missbrauch


Allgemeine Empfehlungen

• Berücksichtigung unterschiedlicher Blickwinkel– Sicht des Erstellers ⇒ Abbildung der internen Struktur– Sicht des Nutzers

• Beschränkung auf einige wenige Ideen • Beachtung des HTML-Standards

– Geringere Fehlerwahrscheinlichkeit– Ordentlicher Eindruck– Zusätzliche Möglichkeiten wie Prefetching von Text

(nur bei Höhe und Breite von Images)


Allgemeine Empfehlungen (2)

• Abwägung bei wenig verbreiteten oder neuen Technologien: Nutzen, Aufwand, ... ⇒ im Zweifel die einfachere Technik

• Sparsamer Einsatz von Grafik, Hintergrund, grafischen Tricks (alberne Wirkung, lange Ladezeiten, Verwirrung,grafischer Overload, Bilderbucheffekt)

• Ehrlichkeit: Kein geistiger Diebstahl!(Respektierung von Copyrights ©, Trademarks ®™)



Vermeiden von …• … Bevormundung des Benutzers, z.B. …

– … „Change these browser settings“

– … „Best viewed with ...“

– … „Download this plug-in“

• … Zeichen der Unsicherheit– Kritik an der eigenen Site– Baustellenschildern („Under Construction“)



Vermeiden von …• … Fonts, die nicht Standard sind

• … Klischees: Zähler, laufender oder blinkender Text, Einblendungen, ...

• … Eindruck von billiger Werbung– Überdimensionierte Banner– Wenig Text– Viele Links



• Entwicklung einer Corporate Identity (Logo)

• Interaktion erhöht den Erinnerungswert• Benutzung von Metaphern (z.B. Cockpit zur

Orientierung) und Bildern (z.B. Krombacher-Werbung)

• Automatisierung der Site und des Servers• Mit eigenwilligen Nutzern rechnen• Erstellung von Tracking-Statistiken• Anordnung des Gitters (Grid)


Sünden

• 100 Kilobyte in einer einzigen Tabelle• Überfrachtung mit Bildern• Wegsperren von Inhalt (Registrierung)• Öffnen neuer Browserfenster• Automatische Weiterleitungen• Image Map als Hauptnavigation• Fehlende Kontaktadressen • Zu hohe technische Anforderungen (z.B. Shockwave-

Animationen und 20-Zoll-Monitore)


Sünden (2)

• Fehlerhafte Seiten • Fehlende Elemente • Sichtbare Tabellengitter• Überflüssige Inhalte • Laufschriften • Zu breites Seitenlayout• Keine Papierversion (Ausdrucke auf DIN A4)

• Dicke (3D)-(Tabellen-)Rahmen• Dominante Hintergrundmuster


Zusammenfassung

• Gesunder Menschenverstand• Einfachheit• Berücksichtigung des technischen

Rahmenbedingungen• Funktionalität und Navigierbarkeit wichtiger

als künstlerischer Eindruck• Design als Hilfsmittel⇒ Ziele, Benutzer, Funktionalität und

Ressourcen bedingen das Design


Checkliste für Sites

1. Allgemeines2. Optik3. Text und Bild4. Struktur und Navigation5. Technik6. Inhalt7. Sonstiges


Checkliste für Sites:Allgemeines und Optik

• Erster spontaner Eindruck • Ausgewogenheit • Metapher• Benutzerfreundlichkeit• Ladezeit• Corporate Identity• Hintergrund• Ordnung (Gitter, Spalten)• Aufteilung


Checkliste für Sites:Bestandteile und Inhalt

• Verhältnis von Text, Bildern und anderen Elementen• Lesbarkeit, Absätze, Textlänge• Größen, Hintergrund/Farben• Thematische Textgliederung• Rechtschreibung • Vollständigkeit • Klarheit der Aussagen, zielgruppengerechte

Präsentation• Inhaltliche Güte

(Anstrengung, Mühe, Wertschätzung des Benutzers)

• Werbung (Anzahl, Position)


Checkliste für Sites: Organisation

• Erkennbarkeit der Struktur• Kombination mit Navigation• Orientierung• Darstellung• Navigationsschema• Zeitlicher Suchaufwand • Hilfe- bzw. Suchfunktion • Auffindbarkeit der Produkte, Dienstleistungen


Checkliste für Sites:Technik und Sonstiges

• Ladezeit• Angepasster Funktionsumfang, Konfigurierbarkeit• Adäquate Umsetzung• Fehler, z.B. hängende Links• Zerstörbarkeit• Kompatibilität• Aktualität• Metadaten• Bekanntheit der Site (Suchmaschinen)• URL-Design• Sünden (s.o.)


Literatur

• Dave Siegel: Creating Killer Web Sites, 2nd Edition, Hayden Books, 1997, http://www.killersites.com

• Patrick Lynch: Web Style Guide, 2nd Edition, Yale Univ. Press, 2002, http://www.webstyleguide.com/

• Jakob Nielsen, Marie Tahir: Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, 2001

• Jakob Nielsen: Designing Web Usability : The Practice of Simplicity, New Riders Publishing, 1999, http://www.useit.com/alertbox

• Vincent Flanders: Web Pages That Suck: Learn Good Design byLooking at Bad Design, Sybex, 1998, http://www.websitesthatsuck.com

• Jennifer Niederst: Web Design in a Nutshell, O'Reilly, 2001• Robin Williams:The Non-Designer's Design Book, Peachpit Press,

1994• Robin Williams: Web Design Workshop, Peachpit Press, 2001


Links

• http://www.fortressdesign.com• http://www.shorewalker.com• http://www.webreference.com/dlab• http://www.w3.org/DesignIssues• http://www.webdesign.about.com/compute/webdesign• http://www.mm-lab.uni-tuebingen.de/lab/doc/webdesign/• http://vsys-www.informatik.uni-hamburg.de/ergonomie/• http://www.ideenreich.com/• http://p2p.wrox.com/content/html4db/• http://www.htmlhelp.com/design/• http://www.internet.com/sections/webdev.html• http://www.wdvl.com/• http://www.pageresource.com/zine/index.html• http://www.fixingyourwebsite.com/drhtml.html

Design, Layout, Struktur - file– Lineare Struktur, keine textuellen Inhalte • Design –...

Documents

Transcript of Design, Layout, Struktur - file– Lineare Struktur, keine textuellen Inhalte • Design –...