Zum Inhalt springen

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