Zur Agentur | UX Showcase

8 Kommentare | 21. April 2010, Oliver Schmid

Die Zauberformel für Designer

Das Buch Visual Display of Quantitiv Information von Edward Tufte ist definitv ein Muss für jeden Webdesigner und Programmierer. Es bestätigt meine Überzeugung, dass der Design Grundsatz „Form Follows Function“ zu Schönheit führt. Edward Tufte hat die Zauberformel (data-ink ratio) für Designer erfunden. Für den intelligenten Designer durchaus zu vergleichen mit der Relativitätstheorie von Albert Einstein.

Zauberformel für Designer: Data-ink ratio

Der „data-ink ratio“ bei Chart Grafiken sollte möglichst hoch sein. Also das Verhältnis von Informationen welche Daten enthalten (data-ink) zu Informationen ohne Daten (data-junk). Erstrebenswert ist ein möglichst grosser Anteil an data-ink. Das ist die Fläche die sich verändert wenn die Daten sich ändern, es ist die nicht entfernbare Core Grafik.

Alle Elemente ohne Daten nehmen den Daten die Aufmerksamkeit. Sie lenken ab wie Tufte in zahlreichen Beispielen aufzeigt.

Ein weiteres Beispiel sah ich in einer Präsentation von Ryan Singer, ich habe es hier nachgestellt:

Einige Statements aus dem Buch von Tufte:

  • Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space
  • Above all else show the data
  • Maximize the data-ink ratio
  • Erease non-data-ink and redundant data-ink
  • Induce the viewer to think about the substance rather than about methodology, graphic design, the technology of graphic production, or something else
  • As the art bureaucracy grows, style replace content
Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information.

Redesign einer Chart Grafik

  • Hier haben wir eine durchschnittliche Chart Grafik,
    so wie wir diese häufig antreffen.

    Redesign einer schlechten Chart Grafik

  • Die Box kann entfernt werden.

    Chart Grafik, etwas besser, aber noch nicht gut

  • Die vertikale Achse kann entfernt werden.

    Chart Grafik, noch etwas besser

  • Sogar ein Teil der Balken kann entfernt werden,
    um eine weisse Linie erscheinen zu lassen.

    Redesign Chart, jetzt schon viel besser

  • Nun können auch die schwarzen Markierungen weggelassen werden.
    Die Zahlen schieben wir näher an die Balken.

    Sehr gute Chart Grafik

  • Die horizontale Line kann auch weggelassen werden,
    da das Ende der Balken den Abschluss markieren.

    Die Perfekte Chart Grafik

Der content-pixel ratio für Webdesigner

Das Buch wurde vor 35 Jahren geschrieben. Können Webdesigner daraus etwas lernen? Ja, sehr viel sogar! Die Grundregeln sind noch immer gültig, vielleicht mehr denn je.

Für uns Webdesigner gilt aber der „content-pixel ratio“. Ink wurde zu Pixeln und Daten zu Content. Somit ist es also erstrebenswert, wenn die Fläche an Inhalt möglichst wenig „inhaltsloser“ Fläche (Dekorations Elemente) gegenüber steht. Denn jedes unnötige Element nimmt dem Inhalt die Aufmerksamkeit. Für uns heisst die Formel also:

Zauberformel für Webdesigner: Content-pixel ratio

Folgende Webdesig Regeln können wir daraus ableiten:

  • Jeder Pixel braucht einen Grund um am entsprechenden Ort zu sein. Und dieser Grund sollte immer die Darstellung neuer Information sein.
  • Lösche alle unnötigen Elemente
  • Es gibt keine gleich wichtigen Elemente. Weniger wichtige Elemente müssen schwächer dargestellt oder entfernt werden.
  • Die Inhalte müssen bereits vor der Erstellung des Designvorschlages existieren
  • Schönheit entsteht durch das attraktive Verhältnis verschieden langer Abstände. Man beachte den Goldenen Schnitt.
  • Ist man mit den Design nicht zufrieden beginnt man besser neu als dass man unnötige Dekorationselemente zufügt
  • Mache das Design für den Nutzer, nicht zu deiner Selbstverwirklichung
  • Verzichte auf unnötige Verpackungen (Boxen, Container)
Gestalte den Inhalt und nicht das „Rund um den Inhalt“

Praktische Anwendung im Webdesign Bereich

Für die Website meiner eigenen Agentur konnte ich diese Philosphy 2005 konsequent umsetzen. Technisch zwar bereits veraltet (Table Layout), das Design jedoch zeitlos und immer noch aktuell und ich sehe keinen Grund daran etwas zu ändern. Man beachte den Data-Pixel ratio auf den Subseiten wie dieser (Offline).

Leider ist solch eine radikale Umsetzung bei Kundenprojekten selten möglich. Der Kunde denkt man spare mit einem minimalen Design Aufwand oder man könne mit Rahmen, Schatten und Boxen den schwachen Inhalt kaschieren. In 90% der Fälle liegt der Inhalt aber noch gar nicht vor. Statt auf den Inhalt konzentriert man sich dann auf das „Rund um den Inhalt“.

Weitere Informationen

Bitte beachte auch meinen Blogbeitrag zur Typografie. Und wer das Buch von Edward Tufte jetzt noch immer nicht bestellt hat ist selber Schuld.

8 Antworten zu “Die Zauberformel für Designer”

  1. Matthias sagt:

    Hallo Oliver, auf Deinen Twitter-Aufruf hin kommentiere ich den Artikel natürlich gerne: Gut geschrieben – und die Amis sind halt immer noch ungeschlagen, wenn es alte Inhalte mit einem griffigen Buzzword zu verpacken gilt (Data-Ink-Ratio, echt noch nie gehört…)

    Aber eben: es sind alte Inhalte, die einfachen Gesetzmässigkeiten visueller Kommunikation, das meiste bereits von den alten Griechen zum erstenmal formuliert. Der Vergleich mit Einsteins Theorie ist etwas weit hergeholt. Trotzdem, sie sind natürlich weiterhin gültig.

    Etwas erstaunt bin ich allerdings zuweilen schon, dass diese Gesetzmässigkeiten in den Ausbildungen offenbar tatsächlich nicht mehr gelehrt werden. Ohne da auf Nostalgie zu machen: in meiner Schriftsetzerlehre vor über 20 Jahren gings im Fach „Gestalten“ eigentlich vier Jahre um nichts anderes. Jedes Element musste begründbar sein, sonst ist es per Definition überflüssig. Der goldene Schnitt wurde wochenlang mit weissen Blättern und schwarzen verschiebbaren Punkten gepaukt.

    Edward Tufte hat sich übrigens wohl mit einiger Sicherheit auch von Schweizer Gestaltern beeinflussen lassen, welche ähnliche Theorien nochmals um Jahrzehnte vorher publizierten.

  2. @Matthias Vielen Dank :-) dachte schon der Eintrag würde mit 0 Kommentaren verharren.

    Das Englisch eignet sich irgendwie auch besser um es auf den Punkt zu bringen. Deutsch wäre es dann „Daten-Tinte Verhältnis“.

    Mir und vielen Kollegen fehlt genau solch eine Ausbildung. Da bleibt uns nur eins, Bücher lesen um das fehlende Wissen nachzuholen. Die Schweiz ist tatsächlich betreffend Typografen und Architekten ziemlich gut. Dass Tufte hier nachgelesen hat glaube ich gerne.

  3. Matthias sagt:

    Ist sicher empfehlenswert. Such mal nach Namen wie Jan Tschichold, Max Bill, Otl Aicher, Paul Renner, Adrian Frutiger. OK, nicht alle davon sind Schweizer… Mein Lehrer hiess damals unter anderem Dario Zuffo, er hat ebenfalls publiziert.

    Da fällt mir gleich einen Anekdote ein:

    Das Pauken der Regeln ist ja (wohl in jedem Fachgebiet) recht trocken und mühsam. Auch wir fanden das Herumschieben von Linien und Punkten ziemlich doof und die Lehrer komische Vögel.

    Der Designheld dieser Tage war fraglos David Carson. Ein amerikanischer Berufssurfer, der sich autodidaktisch zum Gestalter weiterbildete und Vorbild einer ganzen Generation wurde. Frech, unkonventionell, farbig, respektlos. Er prägte den grafischen Stil der frühen MTV-Generation.

    Er machte auch Vortragsreisen, wobei nicht immer klar war, ob er nicht in letzter Minute absagen würde. Rock’n Roll pur eben. Ich durfte ihn mal in Zürich erleben und sogar eine Frage stellen.
    Allen jungen Gestaltern damals war klar: wir wollen sein wie Carson, weg mit dem Bauhaus-Schrott.

    Viele Jahre später las ich dann mal, dass er auf einem Vortrag die Studenten enttäuscht hatte: er, der coole Autodidakt, fing immer mehr über Punkte und Linien zu referieren an, genau den Stoff den die Schüler so hassten. Will heissen: er war autodidaktisch auch auf die jahrhunderte alten Werkzeuge gestossen, irgendwie…

    Ich habe übrigens grad zum erstenmal seine Website besucht. Sowas kann sich auch nur eine Legende leisten;-)) http://www.davidcarsondesign.com/

  4. So, jetzt löse auch ich endlich mein Versprechen ein und kommentiere diesen sehr interessanten Artikel, von dem ich auf jeden Fall einiges lernen kann. Meine Designs tendieren dazu, ein bisschen zu bunt und zu kreativ zu werden. Schlichtere Layouts sind, wie du sagst, überschaubarer und auch zeitloser. Irgendwann wird wohl auch meine Website ein weniger grafikintensives Design bekommen.

    Bestätigen kann ich auch das, was du über die Kundenprojekte schreibst. Es ist sehr schwierig, ein passendes Layout zu gestalten, wenn noch kein Inhalt da ist. Bei meinen eigenen Projekten fange ich immer mit dem Inhaltskonzept an und schreibe sämtliche Texte, bevor ich mit der Gestaltung beginne. Diese Vorgehensweise kenne ich auch aus meiner Agenturzeit. Zumindest grob muss der Inhalt stehen, z.B. in Form von Wireframes, bevor die eigentliche Umsetzung beginnen kann. Nicht zuletzt wird die Arbeit so auch einiges effizienter.

    Ich wünsche dir einen schönen Feierabend und freue mich auf weitere spannende Beiträge von dir :)

  5. @Matthias Danke. Über ein Buch von Jan Tschichold hatte ich hier was geschrieben und dabei auch ein Zitat von Otl Aicher eingefügt.

    @Barbara Vielen dank auch. Wenn du den Inhalt selber schreibst ist es natürlich ideal, so entstehen Inhalt und Design aus einem Guss. Deine Site hat übrigens eingen recht guten Content-pixel Ratio. Fast jedes Element kommuniziert was.

  6. […] vom Webgarten-Blog hat kürzlich einen interessanten Artikel zu diesem Thema veröffentlicht: Die Zauberformel für Designer. Wenn du mehr erfahren möchtest, solltest du dort unbedingt einmal vorbeischauen. 30 Beispiele von […]

  7. Billye Olona sagt:

    I love it every time I come along a stimulating plus nicely presented website like your own. Your post has made one reflect which is not normally so simple! Thanks for your insights and I also want to get back to discover more of the things you have to say. Thank you and also have a fantastic day.

  8. […] 1: Die Web-Agentur „Webgarten“ stellt in einem Blog-Beitrag Edward Tufte ausführlich vor. Klicken Sie sich durch die interaktive Grafik „Redesign einer Grafik“ im obigen […]

Einen Kommentar schreiben

Folge uns per Twitter | Facebook Fan werden
© 2010 by Webgarten GmbH, Haldenstrasse 5, CH - 6340 Baar, Schweiz, +41 (0)41 500 07 67