Zum Inhalt springen

Der Fußball in Zeit und Raum

Datengestützte Analyse und Visualisierung von Fußballspielen ähneln Methoden im Usability-Engineering. Und: ein Videovergleich zwischen den Bildern der Livereportage und des datengenerierten Ballweges am Beispiel der Spielzüge, die zu 4.Tor im Spiel Deutschland – England führten.

.

Fußball-WM und Web-Analytics

Was ich in den vergangenen Wochen entdeckte, hängt mit der Fußball WM in diesen Tagen zusammen. Diese Entdeckungen ähneln in vielem den Grafiken, die im Usability-Engineering verwendet werden. So gibt es beispielsweise Heatmaps, die den Ballbesitz der Mannschaft auf dem Spielfeld visualisieren. Es gibt Gazeplots, die die Laufwege eines Spielers auf dem Spielfeld aggregieren. Es gibt Flashmovies, die den Weg des Balles über die gesamte Spielzeit in Realtime darstellen und dabei die einzelnen Spielsituationen kennzeichnen.

.

Grafiken und Visualisierungen in der Analyse von Fußballspielen ähneln sich nicht zufällig denen bei der Analyse von Websites und Applikationen. Denn hier wie dort fallen Daten an, die auf Validität zu prüfen sind, die typisches Verhalten analysieren lassen und aus denen Schlussfolgerungen für Strategien zur Optimierung gezogen werden können. Im Falle des Fußballspiels geht es um die Optimierung der eigenen Spieler und der eigenen Spieltaktik sowie um das Erkennen der Schwächen gegenerischer Spieler. Im Falle von Websites und Applikationen geht es um das Verhalten sowie die Absichten der Nutzer und die Optimierung von Inhalten, Layout, Navigations- und Interaktionsmechanismen.

.

Tracking von Spielen und Statistiken

In der Technology Review 6/2010 wird unter der bezeichnenden Headline auf dem Zeitschriftencover „Fussball – Siegen lernen mit Analysesystem“ ein erster Überblick über den gegenwärtigen Stand des Trackings, der Datenanalyse, der Modellierung von Spielzuständen und der Simulation im Fußball gegeben. Ehrlich gesagt, war ich überrascht über die Tiefe und das Ausmaß, in dem Datamining, Statistiktools und Optimierungssimulationen in solch ein zutiefst körperliches und durch antrainierte Reflexe und Erfahrung geprägtes menschliches Tun wie das Fussballspielen eindringen können.

.

Die Standardmethode der Datenerhebung ist das automatisierte Tracking aller Spieler, des Balls und des Schiedsrichters auf dem Feld mittels Kamerabeobachtung und Mustererkennung . Einen illustrativen Überblick der Methodik bietet der Artikel „Cutting-edge sport statistics“. Die daraus entstehenden Daten müssen in der Regel manuell validiert werden und den Spielereignissen zugeordnet werden. Die genannte Illustration zeigt anschaulich, wie aus der Gesamtheit der Daten durch Extraktion die verschiedenen Leistungsaspekte eines einzelnen Spielers ermittelbar sind. Und damit kommt man von der unterhaltsamen Statistik eines abgelaufenen Spiels zur Analyse der Stärken und Schwächen einer Mannschaft, also der Optimierung zukünftiger Spiele. „In zwei bis fünf Jahren wird in allen halbwegs professionellen Ligen auf der Welt mit Tracking gearbeitet werden“, so ein Spieleanalyst eines Sportanalytik-Unternehmens. (TR 06/2010, S. 49)

.

Der Guardian hält einige Visualisierungen zum Spiel Deutschland gegen England bei der WM 2010 (27. Juni 2010) bereit: Beispielsweise die Passgenauigkeit der Spieler in tabellarischer Form.

.

„Boah, ist der schnell!“

Richtig viel gibt zu diesem Spiel die auf Flash basierende Applikation scoregrid her: Sie zeigt Ballbesitz in den einzelnen Feldzonen als flächig dargestellte Prozentwerte („Possession“) und Heatmaps in Verbindung mit den Ereignissen Torschüsse, Freistöße, Karten.

.

Heatmap 2.Spielhälfte Deutschland - England mit Layer Torschüsse

Heatmap 2.Spielhälfte Deutschland - England mit Layer Torschüsse. © scoregrid.com

.

Diese Ereignisse sind als Sprechblasen mit animierten Icons visualisiert, die sich grafisch gut von der Ebene der Heatmap unterscheiden. Grafisch ebenfalls gelungen ist die Überblendung der Spielfelddarstellung mit den jeweiligen Detailinformationen.

Die Animationen der Icons sind allerdings überflüssig und nerven schnell, wissenschaftlich gesprochen: „erzeugen hohe kognitive Last beim User“.

Die animierten Sprechblasen stören insbesondere bei der ansonsten sehr gelungenen Darstellung des Spielablaufs („Tracking“), bei der die Ballwege auf dem Feld fokussiert werden und diese als Spuren dargestellt werden. Spieler werden nicht dargestellt, lediglich welche Mannschaft gerade im Ballbesitz ist; ergänzt wird die Darstellung um die Spielereignisse. Ich finde dies eine abstrahierende Art, den Spielverlauf darzustellen, eine neue Art der Betrachtung, eine reduzierte, aber auch eine analytische Wahrnehmung.

.

Tracking des Balles: Der Weg zum vierten Tor. weisse Linie = Ballbesitz deutsche Mannschaft. © scoregrid.com

Tracking des Balles: Der Weg zum vierten Tor. weisse Linie = Ballbesitz deutsche Mannschaft. © scoregrid.com

.

Gelungene Details:

  • die nach und nach verblassenden Ballspuren
  • charmant: die rollende Bewegung des Balles
  • die interaktive Timeline mit den Markern der wichtigsten Spielereignissen (farbkodiert)

Das Layout ist sehr kompakt und für kleine Screens ausgelegt, daher sind manche Controls leider etwas fiepsig geraten.

.

„Müller!!… Mülleeeeer!!!!!!“

Mich hat interessiert, wie präzise diese Tracking-Darstellung bezüglich Raum und Zeit eigentlich ist. Ich habe daher die TV-Bilder der Spielzüge, die zum 4.Tor des deutschen Teams führten, neben die entsprechenden Sequenzen der Tracking-Darstellung gestellt.

.

.

Im simultanen Ablauf erkennt man bei der Tracking-Darstellung , dass einzelne Events zeitlich nicht präzise aufgelöst sind und verzögert / verfrüht dargestellt werden. Auch die räumliche Positionierung des Balles ist nicht ausreichend präzise bestimmt, wie beispielsweise die Position des ins Aus rollenden Balles zum Zeitpunkt 69:12 zeigt. In der Liveaufnahme rollt der Ball ca. 10 Meter näher Richtung Mittellinie über die Seitenlinie.

.

Ich vermute, dass die der Flash-Applikation zugrunde liegenden Daten nicht manuell nachbearbeitet sind, konnte dies aber nicht in Erfahrung bringen. Bei Nutzung von Transponder-Signalen würde sich der Ball dagegen mit 3 cm Genauigkeit durch das System lokalisieren lassen! Aber dagegen hat die FIFA einiges einzuwenden …

.

Schlussfolgerungen?

Was sind die Konsequenzen aus dem Gesehenen? Nun, vor allem die Bestätigung, dass die Empirie, im vorliegenden Fall also das Messen, Auswerten und Analysieren von realen Situationen, die Modellierung und Umsetzung von Ideen ein grosses Stück weiter bringen kann. Und das sogar bei Fußballspielen!

.

Was ich zusätzlich erkenne: Die nüchterne Abbildung des Ballweges auf einem abstrahierten Spielfeld ohne Ton, ohne echte Spieler reicht an den Erlebniswert der TV-Bilder mit Simultan-Kommentar, Umschnitten auf die verschiedenen Kameraperspektiven, Umgebungston überhaupt nicht heran. Es ist eine abstrahierte, rationale Wahrnehmungsebene für denjenigen, der analytisch betrachten muss. Aber für derjenigen, der das Erleben sucht und der „dabei sein“ will, werden die bewährten Medien das Interessantere bleiben.

.

aithalides

Webfonts: Das Projekt läuft

Vor einigen Wochen hatte ich in diesem Blog über die aktuell herausgegebene Webfont-Schriften des Fonts-Shops berichtet und einige kurze Ad-hoc-Untersuchungen gestartet. Aus den damals aufgeworfenen Fragestellungen ist mittlerweile ein Projekt an der DHBW Mosbach geworden, das eine systematische Untersuchung der Aspekte von Darstellungsqualität, Performanz, Lizenzrecht etc. durchführt und das in den Händen von Studenten des Fachbereichs Online-Medien liegt.

.

Einige Stichworte zum Webfont-Projekt

Untersuchte Schriften:

  • FF Yoga
  • FF Speak
  • FF Market

.

Untersuchte Browser (nur die neueste Generation, damit der Blick nach vorne gerichtet ist):

  • Chrome 5.0
  • Safari 3.6
  • Internet Explorer 8.0
  • Opera 10.5.3
  • Safari 4.0.5

.

Untersuchte Betriebssysteme  / Einstellungen:

  • Mac OS X
  • Windows XP mit / ohne ClearType
  • Windows 7
  • iPhone 3/Safari
  • Windows Mobile

.

Erste Eindrücke

Vergangenen Dienstag die erste Zwischenbesprechung vor Ort, also an der DHBW, mit dem studentischen Projekt-Team.  Die Studenten hatten bereits die erforderliche technische Infrastruktur aufgesetzt und Webseiten unter Verwendung der zu untersuchenden Schriften gebaut; eine Matrix mit Screenshots ist vorbereitet.

.

Einige erste und vorläufige (und natürlich unvollständige) Eindrücke:

  • Am saubersten laufen die untersuchten Schriften auf dem Mac OS (Zeichenabstände, Kerning, Darstellung der Glyphen, Anti-Aliasing).
  • Manche Hervorhebungen innerhalb von Mengentexten werden in manchen Browser-OS-Kombinationen visuell ungenügend umgesetzt (beabsichtigte „Einfettung“  ist zu schwach oder gar nicht vorhanden), in manchen Fällen überbetont (Hervorhebungen erscheinen extra-bold).
  • Bei Schriftstärke Light „steht“ die FF Speak in verschiedenen Browser/OS-Kombinationen nicht prägnant:  Abstriche zu hell, Fleckiges Schriftbild selbst bei großen Schriftgraden, unsaubere Darstellung von Glyphen.

.

Für das iPhone müssen die Schriften ins SVG-Format konvertiert werden. Wir testen auf die Schnelle einen Schriftschnitt in verschiedenen Größen ohne irgendwelche Hervorhebungen. Ich bin positiv überrascht: gute Darstellungsqualität der Schriften auf dem iPhone – ich hätte gemutmaßt, dass aufgrund der Konvertierung die Schriftqualität leidet. Zusätzlich kommt die hohe Auflösung des iPhones der Abbildungsqualität zugute. Hier ein Screenshot der Testseite, so wie sie im Safari-Browser auf dem iPhone dargestellt wird:

.

Prägnante Darstellung der FF Speak auf dem iPhone 3. Vermeidung farbiger Subpixel im Anti-Aliasing der Glyphen. Kurztest am 15. Juni.

Prägnante Darstellung der FF Speak auf dem iPhone 3. Verwendung unbunter Subpixel beim Anti-Aliasing. Kurztest am 15. Juni.

.

Erstes Fazit

Mein allererstes Fazit: Die @font-face-Technologien bringen alleine noch nicht die erhoffte typografische Glückseligkeit für den Webdesigner. Und wie so oft, liegt auch diesmal der Teufel im Detail.

.

Das Webfont-Team hat noch viel Detailarbeit vor sich und ich bin neugierig, welche Stärken und Schwächen der untersuchten Technologie sich für die designerische Arbeit und für die Verwendbarkeit für heutige Websites zeigen werden. Anfang Juli sind die Untersuchungsarbeiten abgeschlossen und die Ergebnisse werden präsentiert werden. Dann werden wir mehr Empirisches wissen und  über eine systematische Bewertung zu den Webfonts verfügen.

.

aithalides

iPhone 4 und das Wettrüsten der Pixeldichten

Die Pixeldichten von mobilen Geräten nehmen schnell und sprunghaft zu. Was bedeutet diese Hardware-Entwicklung für das Interface Design dieser Geräte?

.

326 ppi! Chapeau!

So! Nun ist es durch „His i-ness“ Steve Jobs selbst bestätigt: das neue iPhone 4 hat eine Auflösung von 960*640 px! Und das auf einer physikalischen Fläche von lediglich (von mir handgemessenen) 76 *51mm.

.

Aber hallo!!! Diese Pixeldichte ist eine Ansage für ein Endconsumer-Gerät: Die Menge an Bildinformation eines gängigen Netbook-Displays wird auf mein iPhone-Display gepackt. Apple übertrumpft selbst die gewieftesten Fischhändler Hamburgs: „Wir bieten mehr Information auf der selben Fläche als bisher: Nicht 20 Prozent mehr, nicht 50 und nicht 100!! Auch 200 Prozent sind uns nicht genug! Ganze 400 Prozent mehr Information kommt auf unser neues iPhone.“

.

Rein rechnerisch komme ich zwar nicht ganz auf die im Datenblatt angegebenen 326 px pro Zoll, aber dies liegt wahrscheinlich in der ungenauen Messung mit meinem Geodreieck begründet. Es gibt für mich keinen Grund, an den technischen Informationen von Apple zu zweifeln.

.

Abbildungsqualität und Pixeldichte

Was leistete das iPhone bisher in Sachen Abbildungsqualität? Mein aktuelles 3GS verfügt über eine Auflösung von 480*320 px und hatte damit eine bereits beachtliche Pixeldichte von 163 ppi (pixel per inch): Die gerundeten Ecken der App-Icons erscheinen ziemlich sauber, ich muss schon messerscharf hinschauen, um die Pixelabtreppung zu erkennen. Die Schriften im Safari-Browser sind  präzise und gut geglättet; Ungenauigkeiten von Schrifttypen und verschwommene Glyphen sind nur durch punktgenaue Betrachtung erkennbar. Nur der Blick durch den Fadenzähler enthüllt den zugelaufenen Binnenraum beim „e“, ohne Vergrößerung kann mein Auge diese typografische Unzulänglichkeit nicht auflösen.

.

Details von Typo und Icon des Buttons Sprachmemos auf iPhone 3

Details von Typo und Icon des Buttons Sprachmemos auf iPhone 3. Gut erkennbar in dreifacher Vergößerung ist das zugelaufene "e" sowie die Kantenglättung der Iconkontur.

.

Das HTC HD2 verfügt über eine Auflösung von 217 ppi, das Google Nexus One hat eine Auflösung von 252 ppi. Und jetzt toppt Apple dies mit einer einer Auflösung von 326 dpi. Zum Vergleich:  Ich habe jüngere Kollegen erlebt, die ihr Notebook mit 15,4-Zoll Display mit der gewaltigen nativen Auflösung von 1920*1600 px betrieben und mit der daraus resultierenden Kleinheit von Schriften und Icons bei einer resultierenden Pixeldichte von ca. 136 ppi ihre Schwierigkeiten beim Arbeiten hatten.

.

Trend: Immer höhere Pixeldichte

Nunmehr verdoppelt Apple die bisher verwendete  lineare Anzahl der Pixel beim iPhone, vervierfacht also die technisch mögliche Bildinformation in der vorhandenen Fläche beim iPhone 4. Offenbar stürmen bei Smartphone et al. die Pixeldichten gen Himmel während sie bei den Notebook & Co. immer noch in den gewohnten Bereichen bleiben: zwar nicht mehr bei den gemächlichen 72 ppi meines zwölf Jahre alten 21-Zöllers für den G4, aber immer noch in der Nähe der 96 dpi meines ersten Windows-Notebooks von 2003.

.

Was bedeutet diese Entwicklung für’s Design?

Zum ersten:

Positives, meine ich! Die hardware-technische Grundlage für präzise und saubere grafische Darstellung auf Smartphones ist nunmehr vorhanden.  Scharfe und detailreiche Fotodarstellungen,  gut geglättete und dennoch scharfe Rundungen von Illustrationen, gleichmäßige Abstände von Glyphen in Mengentexten – all das ist  hardwareseitig offenbar mittlerweile möglich und wird Standard werden im Smartphone-Segment.

Was uns bevorsteht, ist also eine technische Abbildungsqualität wie im Print-Bereich: Die Raster-Struktur der Pixel bleibt künftig unterhalb der Auflösungsgrenze unseres Auges so wie das 60er-Raster des Offset-Druckes für den Leser nicht wahrnehmbar ist.

.

Zum zweiten:

Diese Hardware-Entwicklung bedeutet Arbeit für Designer! Wenn die Displays Voraussetzungen für gute Typografie und knackige Illustrationen bieten, gibt es keine Ausrede mehr für zugelaufene Binnenräume bei Buchstaben, ungleichmäßige Spationierung, verschwommene Rundungen!

.

Zum dritten:

Interface Designer werden auflösungsunabhängig entwerfen müssen. Vielleicht heißt die Anforderung besser: „dichtesensitiv“. Im angelsächischem Techno-Sprech lautet der entsprechende Begriff „dpi-aware“. Und dies meint: das System muss für unterschiedliche Pixeldichten des Displays und damit unterschiedliche physikalische Abmessungen verschiedene Größen derselben Bedienelemente präsentieren können.

.

Interaktive Flächen auf Touch Screens

Eine Überlegung anhand der aktuellen Verdopplung der linearen Pixeldichte von 163 ppi (iPhone 3) auf 326 ppi (iPhone 4) verdeutlicht, was die Anforderung der Dichtesensitivität bedeutet: Der User bedient ein iPhone mit Fingern und durch Finger ausgeführte Gesten. Die App-Icons haben auf dem iPhone 3 eine Ausdehnung von 57*57px und damit eine physikalische Ausdehnung von knapp 9*9mm ohne Textzusatz.

Microsoft gibt empfiehlt auf „Designing for Direct Manipulation“ ebenfalls 9 mm als Minimallänge für eine interaktive Fläche für Touchbedienung auf mobilen Geräten. Wenn ich mir meine Finger anschaue, glaube ich dies sofort. Auch die Studie „Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices“ kommt für das einhändige Bedienen mit dem Daumenzu einer ähnlichen Größenordnung. Dass man darüber hinaus mittels einiger Kniffe im Interaktionsdesign diese Grenze für bestimmte Interaktionen noch senken kann, zeigt das Beispiel der Virtuellen Tastatur des iPhones.

Wird die Auflösung des interaktiven Bildschirms linear verdoppelt, so schrumpft die physikalische Ausdehnung einer interaktiven Fläche auf ein Viertel. Was nicht schrumpft und nicht schrumpfen kann, ist der physikalische Finger des Users – ebenso wenig wie die physiologische Auflösung unseres Auges sich verändern kann. Der Effekt: die technische Präsentation entzieht sich diesen Begrenzungen unseres Körpers;  unser Auge kann einzelne Pixel nicht mehr erkennen; unsere Fingerkuppe kann Controls nicht mehr diskret und kontrolliert bedienen.

.

Größendarstellung des Kamera-Icons des iPhone mit 57*57px bei unterschiedlichen Standards von Pixeldichten

Größendarstellung des Kamera-Icons des iPhone mit 57*57px bei unterschiedlichen Standards von Pixeldichten

.

Nun, der User will einzelne Pixel  ja nicht unterscheiden – ganz im Gegenteil. Aber er will Bedienelemente auf der Benutzungsoberfläche des iPhones gezielt und fehlerfrei bedienen können.  Und damit er dies tun kann, müssen wir die physikalischen Ausdehnung  dieser Elemente (also Höhe x Breite in Millimetern auf dem Display)  und damit in ihrer Pixelausdehnung (Höhe x Breite in Pixeln) der Größe seines Fingers anpassen. Und dies in Relation zur jeweiligen Pixeldichte des Displays. Am Beispiel des oben gezeigten Kamera-Icons: Das Icon für ein iPhone 4 müsste 114*114px groß sein, damit es dieselbe physikalische Größe wie in einem iPhone 3 hat.

.

Für eine tiefere Durchdringung der entstehenden Problematik für das Interaktionsdesign kann ich den mehrseitigen Artikel Auflösungsunabhängiges Icon Design von 2008 empfehlen. In diesem Artikel von Thomas Immich wird sich ausführlich mit der Dichtesensitivität sowie mit Lösungsansätzen befasst.

.

aithalides

Colours & Cultures

Einige informationsdesignerische Gedanken zur vergleichenden Darstellung der Farbsymbolik in verschiedenen Kulturen.

.

Symbolische Wirkung von Farben

In der visuellen Kommunikation spielen Farben eine wichtige Rolle. Dabei gibt es formale Aspekte wie Eigenhelligkeit der Farbe, Anteil der Farbfläche auf der Grundfläche, verschiedene Farbkontrast-Phänomene und noch mehr. Es gibt aber auch über den formalen Aspekt hinaus den Aspekt der Bedeutung von Farbe.

.

Zum einen erhalten Farben Bedeutung durch eine konkrete Situation, durch den Kontext. Beispielsweise bedeutet das Rot auf einem Verkehrsschild: „Warnung!“. Das Rot des an dem Verkehrsschild befestigten Wahlplakates der SPD  stellt die „Corporate Color“ dieser Partei dar. Und das Rot des an einem Haus in derselben Straße angebrachten Schildes „Eros 2000“ bedeutet das Versprechen von Sexualität. Dreimal Rot, drei verschiedene Bedeutungen.

.

Die Bedeutung von Farben in spezifischen Situationen wird getragen von ihrer kulturellen Bedeutung. Die kulturelle Bedeutung einer Farbe ist das Fundament für die symbolische Interpretation durch den Wahrnehmenden in einer konkreten Situation.  Die kulturelle Bedeutung der Farbe verhält sich zu ihrer situativen Bedeutung wie das Phänomen Klima zu dem des Wetters: ersteres ist nicht unmittelbar erfahrbar, sondern bildet den Rahmen, in dem das aktuell Erfahrbare sich abspielt, nämlich die täglichen Wetterphänome. Hegelianisch gesprochen: die kulturelle Bedeutung ist in der einzelnen situativen Wahrnehmung aufgehoben.

.

Selbstverständlich können Farben in unterschiedlichen Kulturen ganz verschiedene Bedeutungen kommunizieren. Und sehr oft sind diese Bedeutungen begründet in tradierter religiöser Symbolik, in historischen Produktionsweisen und sind Manifestationen von sozialen, ethnischen oder nationalen Unterschieden. Beispielsweise gründet das Rot auf den Wahlplakaten der SPD in der Geschichte der Arbeiterbewegung in der Mitte des 19. Jahrhunderts – und diese Symbolik wird grundsätzlich auch heute noch verstanden.

.

Vergleichende Darstellung der Farbsymbolik mehrerer Kulturen

In diesem Artikel soll es aber nicht inhaltlich um Farben und ihre Bedeutungen in verschiedenen Kulturen gehen, sondern um die Art und Weise, wie diese vergleichend dargestellt werden können, also um eine Notation der Übersicht. Wir haben also folgende Faktoren, die miteinander in Beziehung stehen: der spezifische Kulturkreis, die spezifische Farbe, die spezifische Bedeutung. Dabei handelt es sich bei Farben und Bedeutungen um nicht-eindeutige Relationen: eine Farbe kann in einem Kulturkreis mehrere Bedeutungen haben.

.

Wir legen mal eine kleine Auswahl der in dieser Farben und Bedeutung zuordnenden Tabelle hinterlegten symbolischen Bedeutungen zugrunde, deren Zustandekommen wir fürs Erste nicht hinterfragen. Und mit diesen Zuordnungen erstellen wir eine Matrix, bei der Farbe die sortierende Dimension ist:

Beispielhafter Ausschnitt aus einer Matrix zur Farbsymbolik, nach Farbe sortiert

Beispielhafter Ausschnitt aus einer Matrix zur Farbsymbolik in verschiedenen Kulturen, nach Farbe sortiert ...

.

Solch eine Matrix fokussiert sich darauf, die unterschiedlichen Bedeutungen einer Farbe in den verschiedenen Kulturen zu vergleichen. Sind wir jedoch primär daran interessiert, für eine spezifische Bedeutung die zugehörigen Farben der verschiedenen Kulturen zu erfassen, so müssen wir die Matrix umbauen in eine solche, bei der nach symbolischer Bedeutung sortiert wird:

Matrix zur Farbsymbolik,nach Bedeutung sortiert

... und nach Bedeutung sortiert

.

Diese orthogonale Darstellung wird üblicherweise als rechteckige Fläche mit einer festen linken und einer festen oberen Achse dargestellt.  Das macht sie prinzipiell erweiterbar … für neue Bedeutungen und weitere Kulturen. Man kann sie aber auch als abgeschlossen erklären und die Bedeutungs-Achse zu einer Kreisform zusammen „biegen“, mathematisch gesprochen: das orthogonale wird in ein Polarkoordinatensystem überführt. So entsteht eine Grafik wie die folgende:

Matrix

Kreisförmige Matrix zur Farbsymbolik in verschiedenen Kulturen. Mit freundlicher Genehmung © David McCandless aus seinem Buch "Information is beautiful".

.

Diese Infografik habe ich gefunden auf der Website Information is beautiful von David McCandless, einem Informationsdesigner aus London. Seine Leidenschaft ist die Visualisierung von Informationen: Statistiken, Fakten, Fragen, …  möglichst ohne Worte. Und das gelingt ihm ausnehmend gut!  Seine Website mit seinen eigenen Grafiken und denen anderer Designer durchzustöbern, macht Spaß und ich blieb oft an einzelnen hängen und mir kam in den Sinn: „Ach, so ist das?!“. Diese Grafiken sind wie Überraschungseier: Sie bieten Nutzwert in der Information (utility), Verständlichkeit (ease of use) und Spaß (joy of use).

.

Kurzer Exkurs für an Zeitreisen Interessierte

Ganz besonders angetan dürften ScienceFiction-Cineasten sein von der Visualisierung filmischer Zeitreisen in der Grafik Timelines. Die grafischen Zeitlinien, die Sprungpunkte in den Stories von Star Trek, Terminator, Zurück in die Zukunft  & Co und ihre Vergleichbarkeit auf engstem Raum verschafft einen völlig neuen Blick auf die Handlungen dieser Filme.

.

Aber woher kommen die Zuordnung?

Zurück zum Vergleich der Farbsymbolik in den verschiedenen Kulturen. Auch dabei geht es David McCandless ja in erster Linie darum, Vergleichbarkeit zu schaffen. Und das gelingt ihm ja auch mit der Idee, diese Daten zu einem  Bedeutungskreis zu verdichten. Dahinter steht wohl die Absicht, schnell erkennen zu wollen, welcher Farben es in der internationalen Kommunikation bedarf, um bestimmte Konnotationen und Assoziationen auszulösen. Ob das so aufgeht, bedarf einer separaten Betrachtung hier im Blog.

.

Und was die Validität die der Bedeutungskreis-Grafik zugrundeliegen Daten angeht? Wie qualifiziert sind die genannten Bedeutungen von Farben in den verschiedenen Kulturen. Woher und wie sicher wissen wir es? –  Nun ja, … auf den zweiten Blick scheinen mir diese zumindest hinterfragbar, wenn ich mir anschaue, welche Quellen wiederum hinter der Google Doc-Tabelle genannt werden … Aber auch das ist ein separates Thema, vielleicht ein Thema für eine Semesterarbeit an der Hochschule?

.

Aithalides

Webfonts: Ein Blick auf die Pixel

Seit März 2010 vertreibt der FontShop die Schriftenreihe Webfonts. Webfonts – dies sind nicht einfach einige neue Schriften. Diese Fonts sollen eine neue Qualität ins Web bringen: nach der vieljährigen Beschränkung auf die wenigen Systemschriften wird die Schriftenvielfalt ins Web Einzug halten können. Und zwar ohne die flashigen und javascriptigen Tricks, Workarounds und Einschränkungen von sIFR, Cufon und Co.

.

Endlich! endlich! seufzt mein von der jahrelangen Arialisierung des Web geplagtes  Gestalterherz, das mittlerweile auch Verdana und die Handvoll anderer Systemschriften nicht mehr ertragen kann, weil es schon lange nur diese und keine anderen gesehen hat. FontShop – zeige mir die typografische Zukunft im Web!

.

Einige Fakten

Vom Start weg werden 30 Schriftfamilien mit 1.250 einzelnen Fonts angeboten. Damit kann man schon mal einiges versuchen. Viele sind angenehm sachliche und für seriöse Kommunikation geeignete Typos, aber auch rauhe und expressive Schriften – darunter auch eine alte Bekannte wie die Trixie, die schon in den 90ern die damals bereits verschwundenen Typenhebel-Schreibmaschinen imitierte.

.

Diese Schriften funktionieren nur im Web, da sie in den Formaten EOT Lite und WOFF bereit gestellt werden. Na gut – es kommt mir ja erst mal auf die Schriftenvielfalt im Web an, die Vielfalt in der Printproduktion haben wir ja schon seit über zwei Jahrzehnten.

.

First Step: Ein kleiner Test auf meinem Rechner

Der FontShop stellt auf seiner Webfont-Seite die Schrift Nuvo im Schriftschnitt Medium im WOFF-Format kostenlos zur Verfügung. Ich untersuche die mitgelieferte HTML-Seite auf grafische Qualität der Schriftdarstellung auf meinem Notebook (Windows 7, Firefox 3.6.3)

___ bei deaktiviertem ClearType

  • Die mitgelieferte lokale HTML-Seite zeigt insgesamt eine sehr sauber laufende Typo.
  • Insbesondere in 14 px sind die Rundungen gut geglättet und die Zeichen- und Wortabstände ausgeglichen.
Nuvo - 14 px - ClearType deaktiviert - Orginalgröße

Nuvo - 14 px - ClearType deaktiviert - Orginalgröße

  • Die dargestellten kleineren Schriftgrade von 9 bis 11 px wirken dagegen unscharf und verwaschen.
Nuvo - 9 px - ClearType deaktiviert - Originalgröße

Nuvo - 9 px - ClearType deaktiviert - Originalgröße

  • Die Rundungen großer Schriftgrade werden sehr sauber geglättet. Sehr harmonische Zeichenabstände.
Großer Schriftgrad im Browser (72 px, ClearType deaktiviert, Originalgröße)

Großer Schriftgrad im Browser (72 px, ClearType deaktiviert, Originalgröße)

.

___ bei aktiviertem ClearType

  • Schrift in allen Schriftgraden wirkt insgesamt schwärzer und konturschärfer, allerdings in den kleinen Schriftgraden noch nicht randscharf.
  • In den kleinen Schriftgraden hat man den für die Clear-Type-Technik typischen Effekt, dass einzelne Stellen farbstichig wirken.
  • Große Schriftgrade werden in den Rundungen nicht so smooth dargestellt wie man gerade durch das Anti-Aliasing von ClearType erwarten würde. Das Anti-Aliasing ist überraschenderweise geringer als die bei deaktiviertem ClearType. Dieses wird in der Vergrößerung deutlich.
Nuvo - 72 px - ClearType links aktiviert / rechts deaktiviert im Vergleich - 4fache Vergrößerung

Nuvo - 72 px - ClearType links aktiviert / rechts deaktiviert im Vergleich - 4fache Vergrößerung

.

Erste Hürden in der täglichen Entwurfsarbeit

Kann ich Screenentwürfe wie bisher mit PhotoShop und Fireworks simulieren? Momentan wohl eher nicht: ein Arbeiten mit .woff in PhotoShop & Co scheitert bereits daran, dass Windows 7 eine Übernahme des Testfonts in den Schriftarten-Ordner verweigert mit dem Hinweis „scheint es sich nicht um eine gültige Schriftart zu handeln“.

.

Next Steps

Weitere und vertiefende Untersuchungen sollen die Qualität der Webfonts unter den verschiedenen Bedingungen von Betriebssystem, Browser, Anti-Aliasing-Einstellungen etc. klären. Auf flickr gibt es bereits  Screenshots des FontShops, wir wollen aber eigene Testreihen mit eigenen Fragestellungen zur grafischen Qualität erstellen …. Demnächst mehr!

.

Aithalides

Cardesign Analytics: Meßbarkeit von Designattraktivität

Wie unschwer aus dem Titel dieses Blogs zu entnehmen ist, beschäftige ich mich hier mit Forschung rund um Design: Was ist „das Gute“ am guten Design? Was wirkt ästhetisch? Warum gefällt das eine Produkt besser als das andere? Was macht eine Website attraktiv? Ist Design meßbar?

.

Quantifizierung des Ästhetischen

Ich fand schon immer den Gedanken reizvoll, das Schöne, die Spannung einer Komposition, einen Farbklang  quantifizierbar zu machen. Wenn dies ginge, ja, dann könne man aufgrund objektiver Kriterien sagen: „Dieses Bild IST besser“ und nicht nur „MIR GEFÄLLT dieses Bild besser“.

Für mich lag in dieser Idee der Meßbarkeit von (bildender) Kunst zusätzlich das weitere Faszinosum der  Zusammenführung von Kunst und Mathematik – oder besser: die Zusammenführung von Kunst und Technik, da es ja auf eine Operationalisierbarkeit von Kunstwerken hinaus lief. Ich stieß als Abiturient Anfang der 70er Jahre auf die  „Numerische Ästhetik“ von Siegfried Maser und fand seine Publikation „Numerische Ästhetik: Neue mathematische Verfahren zur quantitativen Beschreibung und Bewertung ästhetischer Zustände“ einerseits sehr aufregend, weil darin Ästhetik mit  Begriffen der Informationstheorie – damals hieß das noch „Kybernetik“ – zusammenbracht wurde und Kunst mittels Formeln bewertet wurde. Andererseits schien mir das Ergebnis doch sehr weit weg zu sein von der praktischen Anwendung in der komplexen Welt, da alles formelmäßige Quantifizierte sich lediglich in einer Welt von Punkten auf quadratischen Grundflächen (Bauhaus-Lehre!) bewegte und das Zusammentreffen mit der realen bildnerischen Welt, die vielfältiger und komplexer ist, vermied.

.

Symbolische Zeichen an Produkten

Im späteren Studium des Produktdesigns an der Kunsthochschule Offenbach lernte ich die Offenbacher „Theorie der Produktsprache“ kennen. Ich verstand, dass Produkte zeichenhafte Funktionen haben, die unterschiedlichen Dimensionen zugehörten: formal, anzeichenhaft und symbolisch. Diejenigen Zeichenebene, mit denen sich Maser beschäftigt hatte – Ordnung und Komplexität – gehören zur Welt des Formalen. Daneben gibt es die Welt der Symbole, die uns an etwas Anderes erinnern während wir das Produkt wahrnehmen: an Weibliches, an Kräftiges, an Futuristisches, an Phallisches. Keine Rede mehr von nachweisbaren Meßzahlen und Formeln wie bei Maser, sondern nur noch von Symbolen, Assoziationen … sehr flüchtigen Bewußtseinszuständen, die nur durch Introspektion von speziell ausgebildeten Menschen, eben Designern, erhascht und formuliert werden konnten.

.

Cardesign Analytics

All dies fiel mir ein, als ich vorgestern einen Artikel von Wolfgang Peters in der FAZ las: „Objektivierbare Kriterien für gutes Auto-Design“. Darin berichtet der – von mir sehr geschätzte – Automobiljournalist Peters über die Autodesign-Analytik von Dr. Peter Rosenthal. Dabei handelt es sich um ein Analysesystem, das nach meinem Verständnis auf zwei Säulen ruht:

1) Die Bewertung des Autodesigns erfolgt hinsichtlich der Physiognomie, also genau auf symbolischen Qualitäten von Zeichen. Dazu werden designerische Ausprägungen einzelner Teile der Karosserie als analoge Elemente menschlicher oder tierischer Gestalt wie z.B. Kinn, Augen, Stirnhöhe verstanden. Im Einzelnen werden „71 physiognomische Attraktivitätsaspekte“ als Kriterien angelegt.

2) Anhand dieser Kriterien wird das Design des Autos quantifiziert, die einzelnen Formbestandteile also in ihrer Attraktivität numerisch bewertet und in einem Diagramm dargestellt, das die Korrelation über diese physiognomische Attraktivitätsaspekte misst.

Bewertung der Symbolsprache von 71 Details am Beispiel eines Aston Martin

Quantitative Bewertung der Symbolsprache von 71 Details am Beispiel eines Aston Martin. Mit freundlicher Genehmigung © Dr. Peter Rosenthal.

.

Von der Messung des Designs zur Prognose des Markterfolges

Bis hierher könnte es sich um eine Arbeitshypothese zur Quantifizierung der „Schönheit“ des Designs eines Automodells handeln. Wirklich abgefahren wird das von Peters genannte „Rosenthal-Raster“, weil Rosenthal die Akzeptanz des Designs und den daraus beeinflußten Markterfolg des Modells prognostiziert. Diese Prognosen findet man auf der Website zum Rosenthal-Raster. Nach der Selbstbeschreibung liegt die Richtigkeit der Prognosen zum Markterfolg bei erstaunlich hohen 85%. Prognosen und Zahlen zum Markterfolg sind auf der Website cardesign-analytics.com nachvollziehbar dokumentiert. Ein Blick dorthin lohnt sich.

Interessant und mutig finde ich dabei auch die These, dass der Faktor Design, also in der vorliegenden Theorie letzlich die „physiognomische Attraktivität“ eines Automodells, den Markterfolg wesentlich mitbestimmt. Dies ist notwendige Voraussetzung der Überprüfung der Richtigkeit des Modells, da ja am Ende nur aufgrund von Verkaufszahlen die Richtigkeit der Prognose beurteilt werden kann.

Peter Rosenthal bringt den intellektuellen – und sicherlich auch persönlichen – Mut auf, für eine industrielle Sphäre ein Bewertungssystem vorzuschlagen, in der die Entwicklung eines einzelnen Produktes Millionen Euro in zwei bis dreistelliger Höhe erfordert. In der Entwicklung von (nicht-physischen) Websites, die dagegen vergleichsweise günstig sind,  ist es State of the Art, viele Varianten zu entwickeln und über multivariates Testing die optimale Kombination von Designmerkmalen durch tatsächliche User in einer Testphase zu ermitteln. Diese Entwicklungsmethodik ist mit Automobilen nicht möglich! – noch nicht?? Um so wichtiger scheint es mir, wenn Peter Rosenthal tatsächlich nicht nur ästhetischen Werturteilen, sondern darüber hinaus den Autokauf auslösende Designmerkmale auf die Spur gekommen wäre und sie in seinen Diagrammen hätte verdichten können.

.

Ein weiter Weg von Masers Ansatz, Ästhetik numerisch zu beschreiben, bis zu Cardesign Analytics mit seinen Markterfolg-Prognosen. Ich bin gespannt auf die weitere Entwicklung.

.

Aithalides

Das 80-Millionen-Dollar-Blau

Vor 3 Wochen fand ich in Spiegel Online einen kurzen Artikel „0044CC Microsoft findet das 80-Millionen-Dollar-Blau“ darüber, dass Microsoft für die Kennzeichnung der Links in den Suchergebnissen seiner Suchmaschine Bing verschiedene Blautöne testete. Dieses Blau sei in den Tests deutlich häufiger geklickt worden. Jetzt hoffe das Unternehmen auf zusätzliche Einnahmen in Millionenhöhe.

.

Was kann man aus diesem Artikel lernen?

Nun, vor allem kann man aus dem genannten Artikel lernen: Wenn man einen ausführlichen und interessanten Vortrag mit vielen Erkenntnissen hält und man an einer einzigen Stelle diesen Vortrag mit einer Finanzzahl pointiert, so wird in den Medien nur noch diese eine Stelle wieder gegeben. Und zwar mit der Finanzzahl als wichtigstem Bestandteil der medialen Aufbereitung. Die an einer einzigen Stelle des Vortrages hochgerechneten möglichen Werbeeinnahmen, die durch das Mehr an Klicks entstehen könnten, macht aus einer Erkenntnis eine Nachricht! Und ich vermute stark: dieser Begriff des 80-Millionen-Dollar-Blau ist letztlich das, was in den Köpfen der Leserschaft hängen bleibt, wenn überhaupt irgend etwas von diesem Artikel erinnert wird.

.

Der Vortrag

Was ist passiert? Microsoft hielt diese Woche eine Konferenz für Webdesigner und Webentwickler in Las Vergas ab: die MIX10. Auf dieser Konferenz sprach unter anderem Paul Ray, seit mehreren Jahren User Experience Manager für Microsofts Suchmaschine Bing. In seinem Vortrag „Heart and Science“ spricht Paul Ray über viele interessante Dinge, die mit dem Design von Suchmaschinenergebnissen zu tun haben. Er schildert Fragestellungen, Untersuchungsmethoden und deren Ergebnisse. Er spricht über Fragen wie z.B. „Wo werden die Filterkategorien am besten positioniert?“, „Welchen Effekt hat das Foto auf der Bing-Startseite auf die Nutzer?“, „Was passiert, wenn der Hintergrund wegfällt, der die Ad-Ergebnisse von den anderen Suchergebnissen trennt?“ oder: „Wenn wir dem User direkte Antworten im Suchergebniss geben – soll sich dieses visuell von den anderen Suchergebnissen unterscheiden?“

Ich finde in seinem Vortrag viele designerische und funktionale Überlegungen wieder, die mir in den letzten Jahren bei der Beschäftigung mit Suchmaschinen begegnet sind oder die ich im Kreise mit Kollegen angerissen, überlegt, skizziert und ausgescreent hatte. Manche der von uns ins Auge gefassten Maßnahmen kamen mir abwegig / schlüssig / überzeugend oder auch genial vor – aber immer wieder tauchte schnell die Frage auf: wie werden die Benutzer auf diese Maßnahmen reagieren? Genauer: wie reagieren sie in der statistischen Verteilung auf die Maßnahmen?

Und so finde ich es ausserordentlich erkenntnisreich, wenn Paul Ray aus dem Bing-Team klare und aktuelle Ergebnisse zur Userakzeptanz von gestalterischen Varianten einer Suche formuliert und sichtbar macht. Auch wenn er die Erkenntnis zur Wahl der Linkfarbe überbetont, indem er im Vortrag (übrigens bei 19:27 im Video) circa eine halbe Minute erklärt, dass die allein durch den Mehreffekt dieses Blaus erzielbaren Mehreinnahmen bei 80 bis 100 Mio Dollar geschätzt wurden. Dies ist auch auf der Folie verschriftlicht: „This blue is worth at least $80 million dollars“. Tja, da war er nun an die Wand geworfen, der Brocken für die Medien, in dessen Folge alle anderen Botschaften von Paul Ray nicht mehr wahr genommen werden sollten … siehe diesen Screenshot:

Paul Ray und das 80-Millionen-Dollar-Blau - Entwicklerkonferenz MIX1

.

Microsofts Suche und die Farbe Blau

Paul Ray referierte über die Untersuchungen in einem Zeitraum, als der Nachfolger von Microsofts Live Search konzipiert wurde, also aus den Jahren 2006 bis 2008. Der Nachfolger, der seit seinem Going Live im Sommer 2009 BING heisst, hatte von Anfang das gegenüber dem Vorgänger dunklere und farbintensivere Blau als Auszeichnungsfarbe. Insofern ist die im SPON-Artikel getroffene Aussage nicht richtig, das Unternehmen hoffe durch das gefundene Blau „jetzt … auf zusätzliche Einahmen in Millionenhöhe“. WENN es die vom Bing-Team geschätzten Mehreinnahmen gibt, so fließen sie schon seit etlichen Monaten!

Ich möchte nun lieber die der Nachricht zugrunde liegende Faktenlage betrachten: Wenn ich ein heutiges Linkergebnis von BING in Photoshop bezüglich der Farbe analysiere, so erhalte ich den Blauton RGB 0,51,204. In Hexwerten ausgedrückt: #0033CC.

Messung der Farbauszeichnung in PhotoShop: Blau #0033CC, nicht wie medial verbreitet #0044CC

Messung der Linkauszeichnung in PhotoShop: Blau ist #0033CC, nicht das in den Medien genannte #0044CC

.

Im der Suchergebnisseite zugehörigen CSS ist diese Farbe genauso definiert [siehe diesen Screenshot]:

Stylesheet bestätigt die Farbmessung: das Blau soll #0033CC sein!

.

Paul Ray selbst zeigt aber eine etwas andere Farbdefinition im Video (bei 20:47), nämlich das von der Presse aufgegriffene Blau #0044CC. Nun, ein kurzer Vergleich auf meinem Monitor in PhotoShop zeigt mir keinen wahrnehmbaren Unterschied zwischen den beiden Farben #0033CC und #0044CC [auch hierzu ein Screenshot aus PhotoShop] – eigenartigerweise, da der rechnerische Unterschied zwischen den beiden Farben immerhin 17 Einheiten im Grünkanal beträgt!

Am Monitor auch in PhotoShop nicht unterscheidbar: #0044CC und #0033CC

.

Egal, ob bing nun 0033CC oder 0044CC verwendet werden soll – der Unterschied zur bei LiveSearch verwendetem Blau ist deutlich: Dieses ist weitaus deutlicher entsättigt und positioniert sich Richtung Cyan [auch hierzu ein Screenshot]. In PhotoShop messe ich, dass die Farbe #0066A7 = RGB 0/102/167 verwendet wurde. Paul Ray präsentiert dieses Blau als eine Auszeichnungsfarbe, die nach den Untersuchungen des Teams eher beiläufig vom User aufgenommen wird: „Hey … here are results. It lacked confidence.“ Mmmh, gibt es einen Zusammenhang zwischen Farbintensität und Vertrauenswürdigkeit / Überzeugungsfähigkeit? Zumindest wenn Farbe kleinflächig wie im vorliegenden Fall von Textauszeichnung angewandt wird?

Farbe der Linkauszeichnung in Live Search von 2008: Hexwert 0066A7

Farbe der Linkauszeichnung in Live Search von 2008: Hexwert 0066A7

.

Die Farbe Blau und die mediale Reflexion darüber

Nun, solche Fragen wurden nicht im medialen Diskurs aufgeworfen und werden es auch in Zukunft nicht. Und Differenzierung der Aussagen findet nicht statt, sondern Vereinfachung und Verflachung. Das Gute daran aber ist: so hat es der User Experience Manager Paul Ray immerhin überhaupt in SPON geschafft und ich habe seinen Vortrag gefunden. Und das wiederum finde ich gut!

Aithalides