Design per Storytelling: Wer schreibt, der bleibt

Im Idealfall kommt erst die Story, dann das Design. Du kannst es auch anders herum machen, aber dann ist es halt Kacke.

Vor einiger Zeit erschien hier bei Dr. Web der vielbeachtete und engagiert diskutierte Beitrag „Storytelling killt Design: Kein Bild sagt mehr als tausend Worte”. Meine Empfehlung zum Abschluss lautete, sich bereits zum jetzigen Zeitpunkt auf das Dahinscheiden des visuellen Designs vorzubereiten.

Unbestritten bleibt natürlich, dass es auch in der Zukunft weiterhin Websites geben wird, die zur Interaktion auf visuelle Methoden setzen. Immerhin ergibt es keinen Sinn, eine Image-Website oder ein Portfolio oder gar ein Blog auf der Basis eines Conversational Interface zu bauen.

Das bedeutet nicht, dass nicht auch die Blogs der Zukunft teilweise mit Sprache genutzt werden können werden. Ich gehe davon aus, dass Sprache für jede Art von Web-Präsenz wichtig werden wird. Die Frage ist halt dann, in welchem Umfang. Bei einigen Typen von Website ergibt es auf den ersten Blick schon kaum einen Sinn, voll und einzig auf Sprache zu setzen. Bei diesen Sites werden wir eine mehrgleisige Verwendung sehen. Ohnehin gehe ich davon aus, dass neben Tastatur, Maus und Touch künftig auch Sprache zu den Standard-Interaktionsmethoden gehören wird.

Zurück zu meiner Empfehlung, sich bereits zum jetzigen Zeitpunkt auf die anstehenden Veränderungen vorzubereiten. Wie kannst du das tun? Immerhin sind wir noch nicht im Zeitalter der Conversational Interfaces angekommen.

Beginnen könntest du damit, deinen Designprozess ein Stück weit umzustellen.

Erst die Story, dann der Designvorschlag

Du hast also mit dem Kunden ausführlich gesprochen. Er konnte dir seine Anforderungen hinreichend deutlich machen und war auch in der Lage, dich mit Datenmaterial zur Zielgruppe zu versorgen und wusste sogar, ein konkretes Ziel seiner geplanten Website zu formulieren.

Nicht schlecht. Nachdem du nun noch ein bisschen eigene Recherche betrieben hast, glaubst du, ein recht genaues Bild davon zu haben, was der Kunde will und wie du das umsetzen kannst. Jetzt würdest du eventuell einen ersten Entwurf, zumindest ein Wireframe zusammen stöpseln.

Tu es nicht. Stattdessen versetzt du dich in die Lage eines Filmemachers. Der schreibt zuerst seine Story. Und selbst, wenn er damit fertig ist, dreht er nicht direkt. Ist doch alles viel zu teuer.

Du versetzt dich also in die Situation eines Filmemachers. Die Idee ist im Kopf schon recht konkret. Jetzt willst du konkreter beschreiben, was innerhalb der gegebenen Filmlänge alles passieren soll. Du schreibst quasi einen Trailer, respektive eine große Zusammenfassung.

Bezogen auf unsere Website, schreibst du auf, was die Website erreichen soll. Du schilderst praktisch einem Dritten, dem unbekannten Leser, was die Ziele und Methoden der von dir zu ersinnenden Website sind und weshalb der unbekannte Leser diese Seite gerne benutzen wird.

Diese Form der rein verbalen Kommunikation zwingt dich dazu, klar Farbe zu bekennen. Immerhin hast du bei dieser Methode nicht die Möglichkeit, mit ein bisschen Eye Candy um dich zu werfen und dein Publikum zu verblenden.

Bei der Schilderung legst du es darauf an, überflüssige Längen zu vermeiden. In der Kürze liegt die Würze. Je kürzer die Story, desto sicherer hast du wirklich die Essenz getroffen. Stimme deine Story dann am besten mit dem Kunden ab. Eventuell wird er sich wundern, dass er einen Text und kein Layout bekommt. Aber das wirst du ihm ja nun erklären können.

Wenn die Story abgestimmt ist, gehst du dazu über, zu überlegen, wie du eben diese Story nun in Design umsetzt. Dabei wird dir auffallen, dass es mehr und weniger gute grafische Ansätze gibt, die Story gestalterisch in Szene zu setzen. Darüber hättest du dir früher gar keine Gedanken gemacht. Jetzt überlegst, welche Designansätze die Botschaft deiner Story am ehesten verstärken können. Diese setzt du nun ein.

Schau dir die verfügbaren Sprachassistenten an

Amazons Alexa kannst du bereits zum jetzigen Zeitpunkt mit sogenannten Skills versehen. Skills, zu deutsch: Fähigkeiten, erlauben es der Sprachassistentin bestimmte Aufgaben zu erledigen, die sie ohne diese Programmlogik nicht würde leisten können. So betrachtet, ist das Design eines Skills sehr vergleichbar mit dem Design einer Web-App.

Es geht schlussendlich darum, die User-Journey zu steuern und zu gestalten. Es gilt, Fehler abzufangen und hilfreiches Feedback zu geben. Der User will mindestens eine genauso gute User Experience bei der Sprachsteuerung wie bei der konventionellen Steuerung per Hand-Auge-Koordination.

Das Team des Radiosenders CBC aus Kanada hat sich den zu gewinnenden Erkenntnissen bereits ausgesetzt. UX-Designerin Natasha Rajakariar schildert in diesem Medium-Beitrag, was sie und ihr Team dabei gelernt haben.

Am Ende kommt Natasha zu dem Ergebnis, dass der Prozess des Designs für das Conversational Interface sich gar nicht so sehr von dem der Erstellung eines visuellen Designs unterscheidet. Das ist doch schon mal eine beruhigende Aussage für die ängstlicheren Kolleginnen und Kollegen unter den Designern.

Wo Natasha zunächst gedacht hatte, dass sich der ohnehin produzierte Radio-Content ganz natürlich für das Medium Alexa eignen würde, stellte sie fest, dass mit den neuen Möglichkeit der Konversations-Interfaces sich auch die Produktion der Inhalte würde ändern müssen, wenn man das Medium wirklich würde ausschöpfen wollen.

Wenn dir Alexa nicht zusagt, schau dir Apples SiriKit oder Microsofts Cortana an. Im Moment bewegen sich nur die üblichen Verdächtigen in diese Märkte. Ich denke, es kann nicht schaden, wenn Otto Normaldesigner sich ebenfalls, wenn auch ganz am Rande, als Side-Project zum Side-Project, frühzeitig mit Conversational Interfaces beschäftigt.

Quellen zum Weiterlesen:

• Storyframes before wireframes | uxdesign.cc
• Sehr sehenswerte Sammlung der besten digitalen Stories | Storytelling.Design
• Adventures in conversational interface: designing for the Amazon Echo | CBC

(Artikelbild: Depositphotos)