Source: https://staff.washington.edu/larryg/Classes/Rinflux/zz-influx.html


(F) Welche Themen aus den Werken von Edward Tufte sind für eine Website relevant?

Die für mich wichtigsten Themen sind:

  • Ausgabemedien: Autoren von Printtexten kennen ihre Zielmedien, aber Webinhalte können auf Geräten wiedergegeben werden, die sich hinsichtlich Größe, Auflösung und sogar Medientyp (High-End-Workstations, kleine Laptops, PDAs, Braille, gesprochene Wörter usw.) grundlegend unterscheiden.
  • Benutzererwartungen: Webbenutzer gehen anders mit Informationen um als mit denen auf Papier und überfliegen sie eher, als dass sie sie lesen
  • Ergonomie: Die aktuelle Technologie für das Surfen im Internet ist der Papierversion in vielerlei Hinsicht deutlich unterlegen. Die Displays haben eine niedrige Auflösung, die Betrachtungsposition ist fest und die Maus-/Tastatursteuerung ist im Vergleich zu Bleistift und Papier sehr umständlich.
  • Inhaltsbereich: Ein Großteil des Platzes auf einer Webseite wird von Menüs, Symbolleisten und Navigationssteuerelementen beansprucht, wodurch der Platz für Inhalte reduziert wird
  • Rechtschreibfehler: Diese führen zu tatsächlichen Fehlern bei der Navigation und Suche und nicht nur zu Verlegenheit oder Verwirrung.
  • Konvertierung in Papierform: Dies scheitert oft an fehlenden Schriftarten, fehlenden Grafikkonvertierungen sowie Größen- und Seitenlayoutproblemen
  • Diagrammmüll und Desinformation: Die niedrige Auflösung aktueller Displays in Verbindung mit dem Flackern von CRT-Displays führt dazu, dass Unordnung und Moiré-Muster die Anzeige noch stärker beeinträchtigen als auf Papier und zu Ermüdung und Verwirrung beitragen.
  • Farben: Die niedrige Auflösung von Displays und die einfache und kostengünstige Verwendung von Farben führen dazu, dass Farben entweder zur effektiveren Übermittlung von Informationen verwendet werden können (beispielsweise, wenn alle Elemente eines einzelnen Themas dieselbe Farbe haben) oder missbraucht werden können, um Verwirrung zu stiften.
  • Dokumentation von Daten: Da es viel einfacher ist, eine Webseite hochzuladen, als einen Artikel in einer Zeitschrift zu veröffentlichen, und Suchmaschinen Seiten anhand von Schlüsselwörtern ausgraben können, ist die Wahrscheinlichkeit, im Web auf wertloses Wissen zu stoßen, deutlich höher. Ich sehe in Zukunft einen dringenden Bedarf an einer Zertifizierung von Websites, um die Qualität der Informationen zu gewährleisten und Suchmaschinen für diese Zertifizierung zu sensibilisieren.
  • Informationsdichte: Die niedrige Bildschirmauflösung und die langen Downloadzeiten großer Dateien machen eine hohe Informationsdichte im Web weniger attraktiv. Verschiedene Techniken können dies kompensieren, beispielsweise die Dokumentation von Dateigrößen und Downloadzeiten, die Auswahl unterschiedlich aufgelöster Grafiken, Sammlungen von Miniaturbildern und/oder zugeschnittenen Bildern, die beim Anklicken eine hochauflösende Version des Miniaturbilds anzeigen usw.
  • Text versus Grafik: Aufgrund der Downloadzeiten, unterschiedlichen Browserfunktionen und Auflösungsproblemen ist das Verhältnis zwischen Text und Grafik eher auf Text ausgerichtet.
  • Sequentielles versus Gestaltverständnis: Tufte weist darauf hin, dass hochdichte Grafiken auf Papier komplexe Muster als eine einzige Gestalt erkennen lassen. Interaktive Webdarstellungen können Sie jedoch schrittweise durch die einzelnen Schritte führen und Ihnen nur den Kontext zeigen, den Sie aufgrund Ihrer vorherigen Auswahl benötigen – ähnlich einem visuellen Telefonbaum. In manchen Fällen ist dies effektiver als eine hochdichte Darstellung, in anderen weniger.
  • Den Kontext beibehalten: Auf einer Website kann man sich viel leichter verirren als in einem Buch, da es so viele verschiedene Wege gibt. Daher sind effektive Navigationstools im Web viel wichtiger als in gedruckten Büchern.

(F) Welche Websites empfehlen Sie hinsichtlich Inhalt, grafischer Relevanz, Ästhetik und Effektivität und warum?

Zu den Websites, die mir am besten gefallen, gehören:

  • Die NASA Skywatch-Website unter: http://spaceflight.nasa.gov/realdata/sightings/index.html.
    Es bietet Informationen zu vielen großen Satelliten im Orbit. Die Startseite erläutert den Zweck sowohl im Text- als auch im Streaming-Format, erläutert die benötigten Ressourcen hinsichtlich Downloadzeit und Dateigröße und bietet eine praktische zweistufige Navigation, die Sie zu jedem Bereich der NASA-Site führt.
    Das Java-Applet bietet Informationen zu Satelliten und Orbitalpositionen, die sowohl dem technischen Ingenieur als auch der Öffentlichkeit dienen. Es umfasst Tabellen und eine Farbkarte mit kommentierten Orbitalspuren gegenüber identifizierten und umrissenen Konstellationen für einen bestimmten Standort. Es ist benutzerfreundlich, ansprechend und äußerst informativ.
  • Eine weitere gute Website ist: http://www.nsf.gov. Die Startseite ist ansprechend, kompakt, verwendet wenige Grafiken und lässt sich schnell herunterladen. Sie bietet außerdem eine praktische zweistufige Navigation, Informationen zu Kontakt, Datenschutz, Hilfe und Anpassungsmöglichkeiten, eine Suchfunktion, Auswahlmöglichkeiten für die jeweilige Betrachterkategorie (Studierende, Lehrende, Hauptforscher). Viele der nachfolgenden Seiten bieten verschiedene Anzeigemöglichkeiten für Daten, z. B. HTML, Nur-Text und PDF. Viele, aber nicht alle Seiten behalten das gleiche Erscheinungsbild und die gleiche Navigation wie die Startseite.
  • Einige außergewöhnlich informative Grafiken finden Sie, indem Sie auf die „Karte des Marktes“ unter http://www.smartmoney.com/maps/ klicken.
    Zwar beginnt die Seite zunächst mit einer völlig nutzlosen und nervigen Werbung, die lange auf dem Bildschirm bleibt und keinen Hinweis darauf gibt, was folgt, doch die Anzeige ist die Mühe wert. Sie enthält Darstellungen vieler Aktien, gruppiert nach Sektoren und kodiert durch farbige Bereiche, deren Größe ihren Marktanteil widerspiegelt und deren Farbton und Intensität die Aktienperformance zeigen: leuchtendes Rot bedeutet starke Rückgänge, Schwarz keine Veränderung und leuchtendes Grün starke Gewinne, mit dazwischenliegenden Schattierungen. Ein Blick auf den heutigen Bildschirm zeigt, dass Technologieaktien stark fallen, Energieaktien steigen und Konsumgüteraktien steigen. Ich kann mir einen Sektor detaillierter ansehen, mit der Maus über einen Bereich fahren, um die jeweilige Aktie zu identifizieren und Performanceinformationen zu erhalten, und auf die Aktie klicken, um ausführlichere Informationen zu erhalten. Außerdem gibt es ein Bedienfeld, mit dem sich die Karte anpassen lässt. Es ist ein schönes Beispiel für multifunktionale Grafiken, mit denen sich Informationen auf viele verschiedene Arten darstellen lassen.

(F) Wie kann eine Site sowohl für den Internetsurfer als auch für den intensiven Benutzer effektiv, interessant und attraktiv sein?

Eine gute Website beinhaltet Folgendes:

  • Es basiert auf einem benutzerzentrierten (im Gegensatz zu Unternehmens-, Struktur- oder anderen Sichtweisen), benutzergetesteten Design
  • Die Startseite enthält einfaches Low-Tech-HTML, das schnell geladen wird, keine Plug-ins erfordert, auf fast allen Browsern funktioniert, die wichtigsten Informationen oben platziert und den Leuten sofort sagt:

    • welche Themen es abdeckt oder welche Probleme es anspricht
    • wenn es die gesuchten Informationen enthält
    • ob die Informationen aktuell sind (z. B. Datum der letzten Änderung)
    • welche Beweise für die Richtigkeit der Informationen vorliegen

  • Die Startseite verfügt über ein identifizierendes Logo und enthält bzw. hat Links zu:

    • eine Sitemap
    • Kontaktinformationen
    • Informationen zur verantwortlichen Organisation
    • ein Site-Feedback-Formular oder Hinweise auf eine Diskussionsgruppe
    • Zusicherungen hinsichtlich Sicherheit und Datenschutz
    • Verwandte Seiten
    • Informationen über die Technologie, die zum Anzeigen nachfolgender Seiten auf der Website erforderlich ist (z. B. Browserversionen, erforderliche Downloads, Dateigrößen oder eigene Ladezeiten)

  • Nachfolgende Seiten der Site verfügen über viele der Eigenschaften der ersten Seite, bieten aber auch:

    • Verwenden Sie dasselbe Erscheinungsbild wie die Startseite, was das Aussehen und die Position des Logos und anderer Informationen betrifft, die die Site eindeutig identifizieren (externe Stylesheets sind hierfür hilfreich).
    • Stellen Sie einheitliche Navigationssteuerelemente bereit, die gleich aussehen und sich an der gleichen Stelle befinden, wie etwa die Schaltflächen „Weiter“, „Zurück“ und „Home“ (vermeiden Sie insbesondere Seiten, auf denen die Schaltfläche „Zurück“ nicht funktioniert).
    • Anzeigekontext und Standort: Auf komplexen Websites ist es sehr wichtig zu wissen, wo man sich befindet und wo man war. Frames stellen zwar erhebliche Usability-Probleme dar, werden aber manchmal verwendet, um ein Inhaltsverzeichnis bereitzustellen, das auf der gesamten Website gleich bleibt. URLs, die nur einfache Wörter und keine Symbole enthalten, können helfen, den Standort auf einer Website zu identifizieren, ebenso wie Baumdiagramme, die den aktuellen Standort des Benutzers hervorheben.
    • Fenster richtig steuern: Eine Vielzahl von Fenstern, die ständig geöffnet bleiben, führt zu Unordnung und Verwirrung (sowie zu Sicherheitsrisiken, wenn der Benutzer mehr tut als nur surfen), aber Fenster, die sich automatisch schließen, können den Benutzer erschrecken und verwirren: Der Webdesigner muss diese Probleme auf der Grundlage der jeweiligen Umstände abwägen

  • Alle Seiten verwenden:

    • ein gedämpfter Hintergrund, der die darüber liegenden Informationen nicht beeinträchtigt
    • guter Kontrast zwischen Hintergrund und Text bzw. Steuerelementen
    • helle Farben sparsam, um wichtige Inhalte hervorzuheben
    • die gleiche Farbe für alle Artikel, die zur gleichen Kategorie gehören
    • Text, es sei denn, Grafiken bieten einen echten Vorteil
    • sichtbare Strukturinformationen wie Titel, Untertitel und Aufzählungslisten anstelle langer Absätze
    • Leerzeichen als primäres Trennzeichen
    • deutlich weniger Text als in Papierform
    • Rechtschreibprüfung, um sicherzustellen, dass Navigations- und Suchfunktionen funktionieren

(F) Muss eine Site schön sein, um effektiv zu sein?

Schönheit liegt in gewissem Maße im Auge des Betrachters. Ein Benutzer, der darauf trainiert ist, bestimmte Muster zu interpretieren, kann auf einer Site Schönheit erkennen, die für ihn Sinn ergibt, für jemanden ohne entsprechende Kenntnisse jedoch hässlich und unorganisiert erscheint (oft sehen wir das, was wir erwarten, und nicht das, was da ist, ähnlich wie ein Frosch, der weitgehend blind ist für alles, was nicht klein, dunkel und ruckartig bewegt ist – eine Fliege).

Für Websites, die kein Fachwissen erfordern, glaube ich jedoch, dass Ästhetik durch ein klares Design erreicht werden kann, das die Benutzerfreundlichkeit betont, insbesondere wenn ästhetische Ergänzungen nur dann hinzugefügt werden, wenn sie im Hinblick auf ihren Nutzen bewusst gerechtfertigt sind.

Welchen Einfluss haben Bildschirmgröße und Auflösung auf Grafiken im Web und wie entwickeln Sie unter diesen Einschränkungen wirkungsvolle Grafiken?

Dies ist ein großes und wichtiges Thema und möglicherweise der Grund für die großen Unterschiede zwischen dem Design im Web und dem auf Papier:

  • Größenunterschiede: Beschränken wir unsere Betrachtung auf „herkömmliche“ Computer und Displays, so haben Unterschiede in der Bildschirmgröße (im Gegensatz zur Auflösung) keinen großen Einfluss auf die Darstellung von Grafiken, da große 19-Zoll-Bildschirme nur die 2,5-fache Fläche kleiner 12-Zoll-Bildschirme haben. Allerdings gibt es mittlerweile immer mehr Geräte wie PDAs, Mobiltelefone und sogar Armbanduhren, die im Internet surfen und deren Bildschirme 100-mal kleiner sind. Typische Webseiten passen einfach nicht auf solche Geräte, und das Seitendesign muss speziell darauf zugeschnitten sein. XML/XSL kann jedoch oft verwendet werden, um größere Dokumente passend zu gestalten.
    Im Vergleich zu großen ausklappbaren Karten oder Seiten, die es dem Auge ermöglichen, problemlos über große Bereiche zu schweifen, ist der Web-Viewer auf Links zu mehreren Seiten angewiesen, die Teile der Ansicht enthalten, wodurch der Gesamtkontext verloren geht. Jeder, der eine buchartige Karte verwendet, weiß, wie schwierig es ist, einer Route zu folgen, die sich über mehrere Seiten erstreckt. Ebenso sind Vergleiche in einer großen wissenschaftlichen Karte sehr schwierig, wenn der Betrachter nicht alles auf einmal sehen kann.
    Darüber hinaus bieten aktuelle LCD-Bildschirme nur eingeschränkte Betrachtungswinkel, sodass selbst wenn sie groß wären oder eine hohe Auflösung hätten, das Verständnis über große Bereiche hinweg schwierig wäre.
  • Unterschiede in der Auflösung: Diese sind sogar noch wichtiger als die Größe. Theoretisch würde sogar eine für ein 20-Zoll-Display konzipierte Seite bei gleicher Auflösung auf das Display einer Armbanduhr passen. Bildschirme mit niedriger Auflösung zwingen den Nutzer jedoch nicht nur zum horizontalen Scrollen, sondern können auch große Teile davon möglicherweise nicht darstellen.

    Im Vergleich zu Papier haben heute gängige Displays eine fünf- bis zehnmal geringere Auflösung. Dadurch sind Details grob, kleine Texte blass und unscharf, und das Betrachten ist ermüdend, insbesondere bei Bildschirmflimmern. Zudem geht der Gesamtkontext verloren, sodass der Nutzer Informationen aus vorherigen Bildschirmen abrufen und verknüpfen muss – wozu das menschliche Gehirn kaum geeignet ist.

    Andererseits bietet das Web Tools, die dies teilweise kompensieren:

    • Trotz gewisser Nachteile in der Benutzerfreundlichkeit, insbesondere bei der Navigation, können Frames verwendet werden, um eine Gesamtansicht einer Szene in Form einer anklickbaren Bildkarte in einem Frame darzustellen: Klickt der Benutzer auf einen Bereich der Übersichtskarte, erscheint im zweiten Frame eine hochauflösende Ansicht eines Bildausschnitts. Dies ist besonders effektiv, wenn das Bild im ersten Frame den angeklickten Bereich hervorhebt, die aktuelle Mausposition relativ zur Karte anzeigt und die Bildkarte große Überlappungen sowie verschiedene Zoomstufen aufweist, um den gesamten gewünschten Kontext besser darzustellen.
    • Manchmal können Animationen effektiv anstelle von „Small Multiples“ eingesetzt werden: Ein flüssiges und sich schnell änderndes Bild, insbesondere wenn es vollständig vom Benutzer gesteuert wird, kann Informationen oft besser vermitteln als eine statische Seite mit hoher Auflösung

  • Bedenken Sie jedoch, dass die Größen- und Auflösungsvorteile von Papier gegenüber Displays in 5-10 Jahren verschwunden sein werden: Es gibt bereits 2-Megapixel-LCD-Bildschirme für Laptops auf dem Markt; IBM hat kürzlich ein 22-Zoll-LCD mit erstaunlichen 9 Megapixeln vorgestellt, das der gedruckten Seite durchaus Konkurrenz macht (derzeit ist es noch sehr teuer, aber der Preis wird sicherlich fallen), und Microsofts ClearType (TM) Subpixel-Technologie verbessert die effektive Auflösung von Text und Schwarzweißbildern erheblich, manchmal um 300%
    Neuere LCDs bieten zudem ein breiteres Sichtfeld und flimmern nicht. Tablet-PCs mit Stifteingabe lassen sich in naher Zukunft wie eine Zeitschrift halten und bedienen. Sie eignen sich besser zum Zeigen, Zeichnen und Schreiben als Mäuse und Tastaturen und werden durch Sprach- und Audio-Ein-/Ausgabe ergänzt. Sehr große Bildschirme sind ebenso in Vorbereitung wie Retina-Displays für tragbare Computer, die hochauflösende Stereobilder liefern, die dem Träger 1,80 Meter breit erscheinen.

(F) Welche neuen Potenziale bietet die Webtechnologie für das Design?

Das Web kann eine umfassendere Informationsumgebung bieten, als dies mit statischen Seiten auf Papier möglich ist, beispielsweise:

  • Aktuelle Informationen: Informationen im Internet können nicht nur aktueller sein als gedruckte Informationen, sondern auch unmittelbar verfügbar sein, wie etwa Verkehrs-Webcams, Ticketreservierungen, Börsenberichte, GPS-Anzeigen usw.
  • Benutzergesteuerte Animation: Small Multiples werden typischerweise verwendet, um Animationen auf Papier zu simulieren, aber das Web bietet weitaus größere Möglichkeiten, wie zum Beispiel

    • Echtzeitbewegung
    • Benutzersteuerung von Geschwindigkeit und Richtung (vorwärts und rückwärts)
    • Animation von benutzerdefinierten Teilmengen, sodass bestimmte Übergänge bei unterschiedlichen Geschwindigkeiten und Richtungen beobachtet werden können
    • Einfrieren von Bildern, die ein oder mehrere Bilder in Animationen erfassen
    • Echtzeitreaktion auf Eingaben, die entweder vom Benutzer oder von externen Quellen stammen

  • 3D-Grafiken: Es ist oft schwierig, den richtigen Blickwinkel für komplexe 3D-Szenen auf Papier zu finden, da jede einzelne Ansicht oder sogar mehrere Ansichten wichtige Informationen verdecken oder verzerren können. 3D-Datenvisualisierungen im Web, wie sie von VRML oder anderen Programmen bereitgestellt werden, ermöglichen dem Benutzer jedoch, die Daten aus jedem beliebigen Blickwinkel zu betrachten. Vor vielen Jahren sah ich eine aufschlussreiche Demonstration von JW Tukey, der mehrdimensionale (10–12-dimensionale) Datensätze interaktiv untersuchte. Zunächst erschienen nur zufällige, bedeutungslose Punkte, doch als er die Daten entlang bestimmter Dimensionen zusammenfasste und Rotationen anwendete, entstanden klare und einfache Kurven, die wichtige Zusammenhänge veranschaulichten.
    Zwar ist die Steuerung von 3D-Objekten heute noch etwas schwierig, da wir sie normalerweise mit einer Maus auf einer 2D-Oberfläche steuern, doch in naher Zukunft wird dies durch attraktive und leichte Headsets einfacher sein, die echtes stereoskopisches Sehen in Kombination mit Stereokameras bieten, die die Handpositionen in 3D verfolgen. So können wir 3D-Bilder genauso einfach „greifen“ und bearbeiten wie Objekte in der realen Welt.
  • Grafiken mit hoher Dichte: Obwohl Papierkopien eine höhere Auflösung als aktuelle Displays bieten, können Sie mit bestimmten Webtechnologien Datensätze vergrößern und so viel detaillierter anzeigen, als dies auf Papier möglich ist.
  • Explorative Datenanalyse: Das Web ermöglicht nicht nur die Anzeige, sondern auch die Manipulation und Anwendung von Transformationen auf Daten, um Zusammenhänge aufzudecken, die auf dem Papier nie sichtbar wären.
  • Universelle Informationsgeräte: Das Internet kann, insbesondere durch drahtlosen Zugriff, alle Arten von Informationen zusammenführen, die heute von vielen verschiedenen Geräten bereitgestellt werden: Uhren, Wecker, Radios, Fernseher, Zeitungen, Zeitschriften, Bücher, CDs, Computer, Videospiele, juristische, finanzielle und medizinische Unterlagen, Lizenzen, Genehmigungen, Klassenzimmer, Theater usw.

(F) Welche Fehler treten beim Webdesign am häufigsten auf?

Zu den ärgerlicheren Konstruktionsfehlern, die mir häufig auffallen, gehören:

  • Fehlende Datums-/Zeitangaben: Die meisten Informationen sind bis zu einem gewissen Grad volatil. Ein „Datum der letzten Änderung“ ist für die meisten Websites unerlässlich, und alle zeitabhängigen Daten auf einer Seite benötigen eine Zeitdokumentation.
  • Verwirrende Navigation, Fenster, die die Navigation deaktivieren, oder zu viele Popup-Fenster
  • Startseiten, die zu langsam laden oder Plugins oder außergewöhnliche Ressourcen erfordern, oder Skripte, die Browser deaktivieren
  • Fehlende Informationen zur Website, wie z. B. eine Sitemap und Kontaktinformationen
  • Unordnung im Sinne eines verwirrenden Layouts, langer Absätze, ablenkender Grafiken, greller Hintergründe, inkonsistenter Farbverwendung (verschiedene Farben innerhalb desselben Themas oder dieselbe Farbe für verschiedene Themen), Moiré-Muster
  • Unempfindlichkeit gegenüber technischen oder Benutzerbeschränkungen: Webseiten sollten alternative Anzeigeressourcen für Personen mit eingeschränkten Browsern, Computern oder körperlichen Einschränkungen bereitstellen.