Digitale Haptik: Gestaltung, die funktioniert

In den letzten Wochen und Monaten liest man oft von Erfolgszahlen digitaler Publikationen, möglichen Gründen und warum dieses oder jenes Medium erfolgreich (oder nicht erfolgreich) ist. Ist es Content, Strategie, Geschichte oder der gesamte Auftritt? Mit Sicherheit auch. Ein Hauptgrund für die Akzeptanz und den Erfolg von Medienerlebnissen jedoch wird oft ignoriert: Eine Publikation muss sich auf dem jeweiligen Medium „natürlich“ anfühlen.

Für die Frage danach, wie sich ein Medienprodukt anfühlt, ist es egal, ob es sich um ein bezahltes Medium (wie Publikumsmagazin oder Zeitung) oder ein freies Kommunikationsmedium (wie Kundenzeitschrift oder Werbekatalog) handelt. Außerdem ist es egal, ob es Print, Web oder App ist. Eine Print-Broschüre, die die Symboliken eines Web-Interfaces simuliert, fühlt sich meistens nicht natürlich an. Und das Lesen der PDF-Datei eines Print-Buches auf dem Tablet ist anstrengend.

Nun hört es sich einfach an, etwas „Natürliches“ zu schaffen. Leider ist es das meistens nicht. Wir brauchen dafür ein hohes Verständnis für die Gesetzmäßigkeiten des jeweiligen Mediums. Gerade das natürliche Erlebnis entscheidet über Erfolg oder Misserfolg eines Publishing-Produktes. Stimmt die Natürlichkeit nicht, wird das Ganze keinem Nutzer Freude bereiten.

Wie kann man diese Freude schaffen?

Print ist anders

Viele von uns haben lange Jahre Print-Medien gestaltet. Und viele von uns haben gedacht, was in Print funktioniert, das passt auch für digitale Medien. Tut es aber nicht! Und viele von uns haben lange Jahre Websites gestaltet. Und auch hier haben viele gedacht, was in Websites funktioniert, das passt auch für die neuen Touch-Oberflächen. Tut es aber selten! Digitale Medien sind anders – und Touch-Oberflächen auch.

Gehören wir zu denen, die aus dem Print-Bereich kommen? Dann gibt es viel Neues, was wir lernen müssen, um für digitale Medien natürliche Erlebnisse gestalten zu können. Wir gestalten nun für ein Medium, das mit uns interagiert. Print-Medien tun dies nicht – wenn man von ausgefallenen Formen der Veredelung mal absieht. Digitale Medien aber reagieren darauf, was wir tun. Ihre Oberflächen passen sich an, sie liefern Ergebnisse unserer Eingaben und fordern zu neuen Aktionen auf. Digitale Medien sind, sofern man das von Maschinen behaupten kann, lebendig. Und sie sind, sofern deren menschliche Erbauer clever waren, intelligent im Umgang mit unseren Eingaben.

Diese Interaktion, das gegenseitige Feedback, macht den Unterschied zu Print aus. Wir können aber auch vieles von unserem Print-Know-how ins Digitale mitnehmen: den hohen Anspruch in Bezug auf Typografie, Bildsprache, Flächengestaltung und Gestaltungsraster, besonders bei digitalen Magazinen auf dem Tablet. Und auch das Web, früher ein grafisches Stiefkind, steht heute in Sachen Gestaltungsanspruch und Gestaltungsfähigkeit dem Print in nichts mehr nach.

Vor allem aber wissen Print-Gestalter, wie man mit begrenzten Flächen umgeht. Die Seite, das Blatt Papier, war schon immer ihre Leinwand. Keine Scrollbalken weit und breit! Aus dieser Begrenzung heraus entsteht eine unschätzbare Fähigkeit: Zu wissen, wie man die Mittel, die man hat, möglichst wirkungsvoll und effizient einsetzen kann. Nicht verschwenderisch mit einer unendlichen Ressource wie Pixeln umgehen, sondern im Gegenteil die begrenzte Ressource Papier zielgerichtet einsetzen. Mit Weißraum jonglieren und Blicke geschickt führen. Genau diese Fähigkeit brauchen wir für digitale Magazine, aber auch immer mehr für das Web. Und das Web-Know-how hilft uns zu verstehen, wie man interaktive Effekte und Hyperlinks einsetzt.

Auf dem Weg zum Interface

Eine mögliche Herangehensweise ist die User Story: Das ist ein Konzept aus der agilen Softwareentwicklung, die auch im Publishing hervorragend anwendbar ist. Eine User Story beschreibt in genau einem Satz, was und warum ein Nutzer etwas macht und zwar in folgender Form: „Als <Rolle des Nutzers> will ich <etwas machen, etwas erreichen>, weil <Grund, Vorteil>.“

Stellen wir anhand von User Story Fragen: Welche Informationen müssen wir darstellen? Was will der Nutzer an dieser Stelle sehen? Welche Eingaben brauchen wir von ihm? Wo ist Interaktion erforderlich, wo wäre sie wünschenswert?

Das Ergebnis dieser Fragestellungen ist eine Reihe von statischen und dynamischen Blöcken mit oder ohne Benutzereingabe. In einem zweiten Schritt beginnen wir, diese Blöcke auf dem Display logisch zu verteilen. Dazu schauen wir wieder in die User Story und nutzen unsere anderen Erkenntnisse aus der Nutzerforschung. Welche Blöcke sind in welchen Szenarien wichtig? Wie kann das Ganze gewichtet werden? Welche Anordnung wird erwartet? In einem iterativen Prozess entwickeln wir so einen Aufbau, den wir immer wieder an den Erwartungen der Nutzer messen.

Wichtig beim Aufbau ist auch die Blickführung des Nutzers. So sollten der Lesefluss und die Hierarchisierung der Informationen der Wichtigkeit entsprechen und das Auge klar lenken. Dazu sollten wir immer Alternativen im Interface bereitstellen. Was ist, wenn ein Nutzer unseren vorgeschlagenen Pfad nicht einschlägt, sondern sein Ziel anders erreichen möchte als wir uns das gedacht haben? Unser Interface sollte für solche „Fehler-Toleranzen“ gewappnet sein. Um das erreichen zu können, hilft nur eines: Testen, am lebenden Objekt probieren und immer weiter verbessern und verfeinern!

Wenn wir die Blöcke für den ersten Screen definiert und verteilt haben, sollten wir daraus eine Art Bibliothek entwickeln, auf die wir laufend zurückgreifen können. Unsere Nutzer erwarten, dass sie für die gleichen Aktionen durch die Anwendung hindurch die gleichen Lösungen vorfinden. Und auch wir wollen natürlich nicht die gleichen Probleme mehrfach lösen. Dazu brauchen wir ein Interface, das aus konsistenten Elementen besteht.

Es entsteht eine durchgängige „Sprache“, die für unsere Nutzer erkennbar ist und mit der Zeit intuitiv von ihnen erlernt wird.

Donald Norman hat ausgehend von seinem „Human Action Cycle“ sechs Design-Prinzipien formuliert, die diese Vorgehensweisen auf den Punkt bringen:

• Sichtbarkeit: Funktionen müssen sichtbar für den Nutzer sein, damit er weiß, was als 
Nächstes zu tun ist.
• Feedback: Der Nutzer muss unmittelbar Rückmeldung auf seine Aktion bekommen, 
sonst weiß er nicht, wie er weitermachen muss.
• Einschränkungen: Der Nutzer sollte keine Optionen oder Funktionen sehen, die er im 
Augenblick nicht benutzen kann – das Interface sollte diese beispielsweise ausblenden.
• Aktion und Wirkung: Es sollte immer klar sein, worauf sich ein Interface-Element 
auswirkt.
• Konsistenz: Gleiche Aktionen sollten immer mit den gleichen Elementen und der gleichen Vorgehensweise dargestellt werden. Sonst muss der Nutzer immer wieder von 
Neuem lernen.
• Aufforderungscharakter: Elemente sollten so aussehen, dass für den Nutzer sofort 
klar ist, wie diese zu benutzen sind (affordance).

Wenn wir diese Regeln und die beschriebene Vorgehensweise zusammen mit den handwerklichen Fertigkeiten rund um Fitts’ Law und Touch Targets beherzigen, können wir Interfaces gestalten, die nicht nur funktionieren, sondern zugleich verstanden werden.
 Auf Grundlage der User Stories entstehen so Oberflächen, die die Bedürfnisse unserer Nutzer erfüllen.

Aber schön und bunt ist das jetzt noch nicht, oder?

Richtig, dafür brauchen wir jetzt Grafikdesign (oft auch Visual Design genannt), um alles optisch ansprechend zu gestalten. Wir wollen an dieser Stelle die Regeln des Grafikdesigns nicht weiter vertiefen – das Handwerkszeug, seien es etwa Gestaltungsgrundsätze, Farbwirkungen oder Typografie, gilt auch für Touch Interfaces weiter. Das Gleiche gilt für Rastersysteme, die die Modularisierung eines Interface mit unterstützen.

Das war’s dann also? Eine Handvoll neue Regeln für die neuen digitalen Medien und dann machen wir weiterhin Grafikdesign wie bisher im Print? Nun, das funktioniert zwar – aber es ist nicht gut. Wir können nicht einfach so „weitergestalten“. Für ein tolles, beeindruckendes digitales Interface brauchen wir mehr: digitale Haptik.

Haptik in digitalen Medien

In gedruckten Medien haben wir bisher hauptsächlich in zwei Dimensionen gedacht:
 In der Größe der Seite und in ihrer „Anfassbarkeit“ – der Haptik.

Nun sind digitale Medien zwar, zumindest im Fall von Touch Displays, auch anfassbar; aber sie sind nicht wie Papier unterschiedlich rau oder durchscheinend. Sie vermitteln nicht bereits beim Anfassen ein Gefühl, wie es ein gut ausgesuchtes Papier tut. Digitale Haptik im Sinne der Hardware gibt es also nicht – ein Gefühl müssen wir über die Software vermitteln, also über die Gestaltung des Interface. Deshalb müssen wir bei der Gestaltung von digitalen Medien zusätzlich zur Fläche in zwei weiteren Dimensionen denken: Zeit und Tiefe.

Unter dem Begriff „digitale Haptik“, den wir hier definieren, versteht man also genau das Denken in diesen drei Dimensionen: Beeindruckende digitale Interfaces nutzen die Flächen souverän aus, haben räumliche Tiefe und eine zeitliche Komponente.
 Sie berühren uns emotional mehr als jedes Papier.

In der Konsequenz bedeutet dies, dass wir in digitalen Interfaces weniger wie ein Grafik-Designer, sondern eher wie ein Bewegtbild-Gestalter agieren sollten. Motion Design macht Interfaces lebendig. Dazu müssen wir wieder zurück zur User Experience und zu dem, was wir aus der Nutzerforschung wissen. Und wir müssen uns tief mit der menschlichen Natur befassen. Bisher haben wir viel darüber gesprochen, was unsere Nutzer wollen – und meist auf der rationalen Ebene argumentiert. Natürlich haben wir auch über Emotionen gesprochen: Sind wir im Stress, wenn wir die Information brauchen? Lesen wir den Artikel gemütlich und in Ruhe? Diese Emotionen haben sich immer auf den konkreten Nutzungskontext bezogen. Wenn wir jetzt aber digitale Haptik behandeln, dann müssen wir über die Natur unserer menschlichen Gefühle sprechen.

Was ist Design?

Welchen Maßstab müssen wir an uns selbst anlegen, um digitale (oder auch gedruckte) Erlebnisse schaffen zu können?

Im Design gibt es immer wieder Trends: Ein großer war lange der sogenannte Skeuomorphismus. Zur Meisterschaft gebracht von Apple in den bisherigen Versionen von iOS, bezieht sich der Begriff auf das visuelle Nachbilden realer Objekte in digitalen Interfaces. So sah die Notizen App aus wie ein Notizzettel, die Bücher in iBooks wurden auf einem Holz-Regal aufgereiht und mit einem nachgebildeten Papier umgeblättert, die Adressen wurden in einem Buch mit Register gesammelt… In skeuomorphistischen Interfaces können wir einfach einen Bezug herstellen zu uns vertrauten Objekten aus der realen Welt.

Dieser Nachbildung überdrüssig hat sich mit der Zeit eine Gegenbewegung zum Skeuomorphismus geformt: das Flat Design, was oft an Wireframes erinnert. Hier wird vollkommen auf Schmuckelemente verzichtet. Die Gestaltung ist flächig, reduziert auf das Wesentliche und kommt ohne Texturen aus.

Zwischen beiden Strömungen gab es immer wieder fachliche Dispute. So wurde oft gesagt, Flat Design sei das „authentischere“ Design, weil es auf Nachbildungen verzichte und stattdessen eine eigene Formensprache aufbaue. Dieser Streit geht aber von einer falschen Prämisse aus. Es gibt kein „ehrliches“ oder „unehrliches“ Design. Skeuomorphismus ist genauso wenig gut oder schlecht wie Flat Design. Beides kann grandios oder total schlecht umgesetzt werden.

Gutes Design ist nicht die Entscheidung für diesen oder jenen optischen Stil. Es geht nicht um unser Ego und um das, was wir „schön“ finden.

Und wenn man sich mal iOS 7 genauer ansieht, ist ein Parallax-Effekt nicht am Ende auch reiner Skeuomorphismus?

Gutes Design ist in erster Linie Problemlösung

Wir sind also wieder beim Nutzer: Der Schlüssel für gutes Design ist, den Nutzer zu verstehen, das bestmögliche Ergebnis und Erlebnis für ihn zu schaffen und das Ganze auf das Medium abzustimmen. Dem ordnet sich alles unter. Der Nutzer muss seine Aufgabe/sein Ziel erreichen können, die Inhalte stehen dabei im Mittelpunkt. Das optische Design ist nur ein Teil dieser Problemlösung, Effekte machen wir nicht, weil sie cool sind, sondern weil sie einen emotionalen Zweck erfüllen. Genauso wie gute Microinteractions.

Unter dem Gedanken der Problemlösung lassen sich übrigens auch Skeuomorphismus und Flat Design erklären: Als die ersten Touch Displays aufkamen, war alles so neu, dass wir reale Bezugspunkte brauchten, um die Interfaces verstehen zu können. Ohne die Lederetuis und Papieroberflächen hätten wir uns fremd gefühlt in der neuen Welt. Jetzt, da Touch Displays normal geworden sind, brauchen wir diese Stütze nicht mehr. Die Interface-Probleme können jetzt anders gelöst werden. Aber eben nicht nur mit Flat Design…

Es ist eine gute Idee im Design, die richtigen Fragen zur richtigen Zeit zu stellen. Zuerst die Inhalte und Strukturen und der Nutzen und dann Typografie, Farben und Formen.

Und wenn wir dann alles mit Effekten zu haptischen Interfaces kombinieren, dann sollten wir uns eines fragen:

Würden wir das, was wir gerade hier unserem Nutzer antun, auch uns selbst antun?

Lesetipps

Wer noch mehr wissen möchte, dem seien diese Bücher empfohlen:

• Designing Mobile Interfaces (Steven Hoober, Eric Berkman), ISBN 978-1449394639
• Designing Gestural Interfaces (Dan Saffer), ISBN 978-0596518394
• Microinteractions (Dan Saffer), ISBN 978-1449342685

---

Dieser Artikel gehört zu: UPLOAD Magazin 4

In dieser Ausgabe: Branchen-Kenner und ihre Einschätzung zur Zukunft des Buchmarkts, perfekte Bezahlschranke gesucht, digitale Haptik und online lernen mit MOOCs & Co.

• Weitere Artikel aus dieser Ausgabe kostenlos auf der Website lesen ...
• Bleib auf dem Laufenden über neue Inhalte mit dem „Update am Montag“ …

Schon gewusst? Mit einem Zugang zu UPLOAD Magazin Plus oder zur Content Academy lädst du Ausgaben als PDF und E-Book herunter und hast viele weitere Vorteile!