Wo und warum unterscheiden sich analoges und digitales Material grundlegend? Und was hat unser Armadillo Outdoor Office Schreibtisch damit zu tun? Analoges und digitales Material in mensch-zentrierten Design Prozessen.
Vorbilder und Wurzeln
Viele von uns kennen die großen Designvorbilder wie Dieter Rahms, Charles Eames, Richard Stark oder Jony Ive. Was haben alle von diesen populär gewordenen Designern gemeinsam? Sie können alle mit physischem Material umgehen.
Quelle: https://br.atsit.in/de/wp-content/uploads/2022/05/jony-ive-ist-gastredakteur-der-sonderausgabe-der-zeitschrift-how-to-spend-it-der-financial-times.jpg, https://64.media.tumblr.com/15b5c999c44c98b9a9f5ac6df82ae809/cc37bed9315818c6-61/s500x750/4183add9cbb74074948bac83c344f7f7579f9355.jpg
Wenn Jonathan Ive direkt ins digitale Design gegangen wäre, hätte er sicherlich nicht den Ruhm erhalten, den er jetzt genießt. Es war sein legendäres iMac Design, welches ihm Gehör verschaffte. Und manche von Ihnen wissen vielleicht auch, dass Jony Ive durchaus die ein oder andere Inspiration bei Dieter Rams gefunden hatte. Jony Ive, war also kein Software Design per se, sondern zunächst einmal Industriedesigner bzw. Produktdesigner.
Jonathan Ives Vater war ein Silberschmied, der an einer Hochschule tätig war. Er schenkte seinem Sohn jedes Jahr zu Weihnachten einen Tag in seiner Werkstatt, um genau das zu bauen, was er sich gerade wünschte – die Materialkunde – das Arbeiten mit physischen Artefakten – wurde Jony Ive also quasi in die Wiege gelegt.
Unterschiede und Gemeinsamkeiten zwischen Analogem und Digitalem
Irgendwie liegt es nicht zuletzt auch aufgrund dieser Geschichte nah, nach einer Gemeinsamkeit zwischen Digital Design und klassischem Product Design zu suchen. Denn unsere erfolgreiche deutsche Designtradition z.B. mit dem Bauhaus ist durchaus ein Anknüpfungspunkt um junge Menschen für das Designhandwerk zu inspirieren. Digitales ebenfalls als Material zu betrachten, inspiriert und öffnet die Tür zu dieser Tradition ohne die Tür vor der Zukunft zu verschließen.
Quelle: https://www.hfg-ulm.de/med/310-hfg-geschichte-1.jpg
Aber die Fortsetzung dieser Erfolgsgeschichte kann nur gelingen, wenn auch klar ist, was digitales Material überhaupt ist und wenn diese Metapher auch für einen außenstehenden greifbarer wird. Vor allem muss die Metapher greifbar sein, für junge Menschen, die sich z.B. für das Berufsbild des Digital Design Professional, des DDP, begeistern. Hier wird die Metapher des digitalen Materials bereits jetzt schon konsequent eingesetzt.
Ich möchte daher Unterschiede und Gemeinsamkeiten zwischen analogem und digitalem Material zeigen und dazu inspirieren, die Trennung zwischen Hardware und Software weniger stark zu sehen, sondern Design als holistischen Prozess zu begreifen, der am Ende nur einer Sache dient: einer besseren User Experience für die jeweiligen Endnutzer*innen des digitalen Produktes.
Doch was ist überhaupt (digitales) Material?
Nun, jeder hat sicherlich seine eigene Definition dafür im Kopf, aber im Sinne der Konstruktion, handelt es sich um einen Werkstoff im festen Aggregatszustand. Materialien sind also physisch stabil, gehen in ein Produkt ein, werden daher verbraucht und müssen somit neu beschafft werden.
In diesem ursprünglichen Sinne, hinkt die Analogie bereits ein wenig, denn natürlich ist das bei digitalen Produkten anders. Digitales Material wären im übertragenen Sinne Software-Komponenten, UI Elemente oder APIs. Einen Aggregatzustand haben wir hier gar nicht – allerdings will trotzdem natürlich jeder nur stabile Komponenten verbauen. Und wenn wir hier überhaupt von „Verbrauch“ sprechen, dann geht es meistens um den Speicherverbrauch oder ähnliches.
Doch eigentlich haben digitale Produkte keine wirkliche Limitierung in Bezug auf ihre Reproduzierbarkeit: eine App auf Millionen Smartphones installiert, wurde dennoch nur einmal geschrieben ab dann nur immer wieder kopiert. Natürlich verbraucht die App etwas von dem Hauptspeicher jede*r einzelnen Nutzer*in – aber ja nur während der Nutzung. Digitales Material verbraucht sich eben nicht während der Produktion! Das ist das Tolle an Software und daher frisst Software bekanntlich auch die Welt auf! „Software eats the world“
Aber was der größte Vorteil von Software ist, ist mitunter auch ihre größte Schwäche. Software ist virtuell, abstrakt, zum Teil unsichtbar und schwer verständlich – geschweige denn „begreifbar“. Gerade deshalb ist User Interface Design so populär geworden und wir selbst verdienen unser Geld seit über 17 Jahren mit User Experience Beratung und User Interface Design Projekten – ich weiß also wovon ich spreche.
Die Menschen möchten eben auch ein digitales Produkt sehen, fühlen und erleben können. Und dieses Gefühl zu bescheren, dafür sind Designer ja letztlich auch angetreten – egal ob Digital Designer oder klassischer Product Designer.
Und hier haben wir auch schon die größte Gemeinsamkeit, wenn es um die Analogie zwischen analogem und digitalem Material geht: das Produkt soll Menschen gefallen und einen gefühlten Mehrwert liefern. Ich persönlich liebe das Material meines MacBooks, weil es sich gut anfühlt meine Handballen auf die Tastatur zu legen, ich hasse es, Sprudel aus Plastikflaschen oder Bechern zu trinken, weil ich glaube, dass ich das Schmecken kann. Den Beweis mit verbunden Augen habe ich übrigens verloren 😉 Es bringt mir aber nix, denn ich glaube es immer noch. User Experience ist nun mal einfach irrational.
UI vs UX Design
Aber meine Beispiele gerade waren ja schon wieder physische Erlebnisse und UX ist doch eine Softwaredisziplin! Naja, eigentlich nicht. Das Nutzungserlebnis macht keinen Unterschied zwischen Hardware oder Software. Im Gegenteil, je mehr die Grenzen dieser beiden Welten verschwimmen, je holistischer ein Produkt erlebt werden kann, desto besser. Bruchstellen sind der Feind guter UX.
Und einfach zu erklären ist User Experience offensichtlich schon mal gar nicht, wie solche Analogie-Bilder auf Linkedin immer wieder brutal vor Augen führen.
Die Tatsache, dass physische Ketchupflaschen als Vergleichsobjekte herhalten müssen, um den Unterschied zwischen den aus der Digitalisierung kommenden UI und UX Begriffen spricht Bände. Wenn dieser Vergleich dann auch noch spektakulär falsch ist und trotzdem wild geklickt und geliket wird, dann zeigt das doch nur: auch die Software-Menschen gieren nach Vereinfachungen und Analogien zu bekanntem, stofflich physischem!
Wer von Ihnen nun daran interessiert ist, was denn bitte so falsch an diesem Bild ist, der möge gerne meinen Post auf Linkedin dazu lesen und kommentieren – ich habe diesen etwa 2 Wochen vor dem Verfassen dieses Artikels gepostet und war während des Schreibens immer noch damit beschäftigt, die vielen Kommentare darunter abzuarbeiten 😉
Aber, wenn man sich nun auf den Ketchupflaschen-Vergleich einlassen möchte, so kann man immerhin das Bild gerader rücken, indem man über beide Flaschendesigns „UI“ schreibt und jeweils zwei andere „UX“ Bilder daruntersetzt, die repräsentativ für das jeweilige Nutzungserlebnis sind.
Quelle: https://www.patrickhansen.com/wp-content/uploads/2017/09/UI-vs-UX-ketchup_2017_02.jpg
So weit, so gut. Aus Sicht unser Material-Metapher, sind wir aktuell aber noch kein Stück weitergekommen. UX und UI Design sind Handwerke des digitalen Zeitalters und zumindest in der Außendarstellung bereits jetzt schon nutzer-zentrierter als es traditionelles Produktdesign je war. Aber offensichtlich braucht es immer noch analoge Beispiel, um diese Handwerke überhaupt und dann auch noch falsch erklären zu können – Stichwort Glas vs. Plastikflasche.
Nehmen wir das Bild einmal auseinander und lassen wir uns auf die Analogie ein, dass wir es bei den beiden Ketchupflaschen mit zwei Software UIs zu tun haben könnten. Die Formgebung der linken Glasflasche punktet klar bei der Frage: wie rum gehört sie denn eigentlich?
Quelle: https://www.facebook.com/interactiondesign.org/photos/well-in-heinz-sight-design/10161286023517228/
Die Plastikflasche punktet wiederum klar bei der akkuraten Dosierung des Ketchups. Wobei sich auch hier bereits die Geister (oder Linkedin User) streiten. Einige Kommentare haben sich darüber ausgelassen, dass sie die Pupsgeräusche der Plastikflasche gegen Ende ihres Lebenszyklus als „unwürdig“ empfänden.
Was ist hier aus Materialsicht passiert? Nun, der Ketchup ist strenggenommen gar kein Material, da er keinen festen Aggregatszustand besitzt. In der Software-Welt wäre es „bloß“ Content.
„Bloß“ Content? Material hin oder her – natürlich beeinflusst der Content maßgeblich das Interaktionserlebnis: wenig Content erzeugt mehr Pupsgeräusche, viel Content reduziert die Pupsgeräusche. Und: die Tatsache, dass hier HEINZ auf dem Label steht, zeigt zumal, dass es offensichtlich nicht egal ist, wer der Content Provider. Das zeigt vielleicht auch, dass die Disziplin „UX Writing“ immer ernster zu nehmen ist, denn es ist weder egal was man auf dem UI sagt, noch ist es egal wie man es sagt.
Doch zurück zum eigentlichen Materialthema, denn natürlich beeinflusst das verwendete Material die Art der Nutzung eines Produktes maßgeblich. Jeder, der schon mal versucht hat, Ketchup aus einer Glasflasche zu quetschen ist entweder jäh gescheitert oder mit schweren Verletzungen im Krankenhaus gelandet.
Die Auswahl des Materials beeinflusst also ganz offensichtlich auch die Affordance, also den Aufforderungscharakter, eines Produktes und damit auch das Verhalten der Nutzer*innen.
Kommen wir aber zum eigentlichen Kern der Aufregung im Duell Glas- gegen Plastikflasche. Die Glasflasche soll hier laut Bild als Repräsentant für UI Design und die Plastikflasche als Repräsentant für UX Design stehen, weil die Glasflasche zwar schön aussieht, aber eben im Gegensatz zur Plastikflasche einen groben Bedienfehler auslösen kann. Wenn der bedienende Mensch die Glasflasche nicht vorher schüttelt, dann wird er zunächst gar kein Content erhalten und dann – schlagartig – plötzlich viel mehr Content erhalten als er eigentlich wollte.
Warum ist das so? Nun, lässt man Ketchup ruhig stehen, bilden seine verschiedenen Bestandteile einzelne Molekülverbände, die wiederum untereinander Verbindungen eingehen. Es entsteht so eine relativ stabile Struktur, wodurch die Flüssigkeit zäher und fester wird. Durch die Krafteinwirkung beim Schütteln wird diese Struktur im Ketchup zerstört; der Halt unter den Molekülverbänden lässt nach, die Moleküle können sich freier bewegen. Dadurch wird das Ketchup wieder flüssig. Das ist der Thixotropie-Effekt.
Man könnte meinen, dass das für HEINZ doch eigentlich gut ist, weil mehr Ketchup verbraucht wird. Paradoxerweise scheint sich HEINZ in Sachen Konsumsteigerung aber folgendermaßen zu orientieren: weil sich Kinder mit der Plastikflasche den Ketchup einfacher selbst portionieren können, führt dies zu mehr Ketchup-Konsum als es eine zu erlernende Glasflasche je provozieren können.
Offensichtlich ist in der Materialdiskussion der Aggregatszustand einer Produktverpackung oder des Contents für das Interaktionserlebnis und Nutzungsverhalten gar noch wichtiger als sowieso schon angenommen.
Ein Designer muss sich also – egal in welcher Domäne er unterwegs ist – mit verschiedenen Aggregatzuständen von Materialien auskennen, um einen guten Job machen zu können. Oder sagen wir es anders: ein Bildhauer, der Skulpturen aus Eis erschafft, wird sicherlich ziemlich schnell arbeitslos sein, wenn er glaubt, in einer Arbeitsumgebung mit Temperaturen über 0° Celsius erfolgreich sein zu können. Er sollte besser schnell umschulen.
Welches Interaktionsverhalten ein Material hervorruft oder ob Content in richtiger Dosierung abgegeben wird, hängt also beiderseits maßgeblich von den jeweiligen Aggregatszuständen ab.
Quelle: https://pbs.twimg.com/media/FUt3mquXoAEldzn.jpg
Auf digitales Material und digitalen Content schielend, muss man sich also schon die Frage stellen: Was ist eigentlich im übertragenen Sinne der Aggregatszustand von digitalem Material? Und wie ändert dieser sich durch das Interaktionsverhalten der Nutzer*innen?
Digitales Material
Digitales Material kann genau wie analoges Material eher statisch und rigide sein. Das kann in manchen Situationen ein Vorteil für Nutzer sein, in anderen Situationen aber vielleicht auch ein Nachteil. Und natürlich muss daher ein Digital Designer, der mensch-zentriert agieren möchte, über den Aggregatzustand von digitalem Material Bescheid wissen.
Ein Beispiel für ein rigides und eher statisches Material könnte beispielsweise eine bereits vorhandene REST API sein. Eine REST API ist eine klare in ihrer aktuellen Version unveränderliche Schnittstelle, eine Art „Vertrag“ auf den sich Designer und Engineers einlassen können ohne im Laufe ihres Konstruktionsprozesses auf böse Verformungen zu stoßen.
Eine REST API kann als Werkstoff mit festem Aggregatzustand sehr einfach und Out-of-the-Box verwendet werden und muss also nicht, wie etwa ein Rohstoff, zunächst noch vorverarbeitet werden. Für Designer macht es das Leben insofern leicht, dass sie sich auf das eigentliche Nutzerbedürfnis konzentrieren können, statt auf die Frage: wie mache ich aus diesem Rohstoff hier einen Werkstoff.
Aber leider beobachte ich genau dieses Verhalten in meiner alltäglichen Arbeit, vor allem bei unerfahrenen UX Designer*innen. Wenn die Aufgabe lautet: „Gestalte einen Login-Dialog für eine bestimmte Nutzergruppe“, dann sollten sich Designer*innen an einem gewissen Punkt doch auch fragen, mit welchem digitalen Material sie diesen Login-Dialog zum Leben erwecken würde. Sie müssten sich z.B. die Frage stellen: welche REST APIs zum Thema Authentifizierung gibt es aktuell bereits und welche API Funktion sind lange genug „im Ofen gewesen“, so dass sie wie der gebrannte Ziegelstein als stabiles Gestaltungs- und Konstruktionsmittel eingesetzt werden können. Ein Ziegelstein war bis zur Brennung ursprünglich ebenfalls einmal Lehm. Natürlich kann auch mit Lehm Häuser bauen, aber das Design des Hauses muss dann definitiv auch ein anderes werden.
Stattdessen aber ist einer der häufigsten von mir beobachteten Reaktionen von unerfahrenen UX Designer*innen, einige Wireframes für einen Login Dialogs zu gestalten, die dann aber zum Leidwesen der Frontend Engineers an vielen Stellen in der Tiefe unterspezifiziert bleiben.
Warum sollte ein Designer alleine auch mehr Spezifikationstiefe erarbeiten können, als es einem Gremium von API-Experten plus einer Horde von Open-Source Entwicklern gelungen ist? Trotzdem höre ich UX Designer*innen oft sagen: „Ich muss mich mit APIs nicht auskennen! Das ist ein Software Engineering Thema“. Verlangt man mit dieser Art der digitalen Materialkunde Unmögliches oder ist genau das der Kern von Digital Design?
Digital Designer als Produktdesigner
Wir haben den Spieß einmal umgedreht und uns vorgestellt, dass wir als Digital Designer das gleiche Mindset gegenüber analogem Material mitbrächten. Was wäre, wenn wir Digital Designer einen Schreibtisch bauen müssten ohne uns mit den dafür nötigen Materialien auszukennen? Um es etwas interessanter zu machen, sollte es kein normaler Schreibtisch werden, sondern ein Outdoor Office Schreibtisch, ein Schreibtisch also, der für die mobile Bildschirmarbeit im Freien taugt. Auf die Idee brachte uns die damalige Corona Lage, die dazu führte, dass wir uns kaum noch real gesehen haben, der Drang aber groß, gemeinsam ohne Maske an einem Ort miteinander zu arbeiten.
Durch die recht temporäre Natur dieses Outdoor Workspaces, waren bereits einige Constraints vorgegeben: natürlich mussten die Schreibtische leicht transportierbar sowie leicht auf- und abzubauen sein. Gleichzeitig mussten sie aber stabil und groß genug sein, dass man daran auch einen ganzen Arbeitstag lang komfortabel arbeiten konnte. Außerdem wollten wir, dass die Tische nachhaltig sind, damit wir keinen zu großen Fußabdruck hinterlassen.
Wie haben wir gestartet? Nach einem kurzen User Research durch Befragungen der Kolleg*innen konnten wir eine gute Arbeitsplatzgröße herausfinden. In der Ideen-Phase sind wir auf den entscheidenden Ansatz gekommen, wie wir die Sonneneinstrahlung so geringhalten kann, dass man auch auf herkömmlichen Monitor genug sehen kann. Statt eines Sonnenschirms hatten wir die Idee einer Ziehharmonikaartigen Zelthaube. Diese Haube würde es erlauben, Sonnenstrahlen sowohl von hinten als auch von vorne abzuhalten, gleichzeitig aber auch so weit zu öffnen, wie man möchte.
Die Idee und der Wunsch waren schnell geäußert. Doch bereits beim Prototyping der Haube, fehlten uns Digital Designer Professionals entscheidende Skills. Welchen Stoff nimmt man eigentlich für eine solche Haube, damit sie UV-Strahlen möglichst abhält? Welche Art von Material müssen wir verwenden, damit die Hebelkräfte, die auf die Haube wirken uns nicht bei einem kleinen Windstoß bereits alles auseinanderbrechen lassen? Aus welchem Material bauen wir den Schreibtisch, so dass er leicht ist, stabil und trotzdem nachhaltig und ästhetisch?
Wir waren halt Digital Design Professionals und wir kannten uns mit analogem Material nicht aus. Also haben wir das Beste gemacht, was wir in dieser Situation tun konnten – wir haben uns einen analogen Designer, Fabian Revilla, ins Team geholt .
Erst mit ihm im Team wurde es auch nur ansatzweise möglich, unsere grobe Wunschvorstellung zu einem erlebbaren Prototyp zu führen. Warum? Weil er sich mit Material auskannte. Und er hatte außerdem die Tools, um dieses Material zu bearbeiten: er konnte nähen, er konnte sägen, fräßen, kleben, schrauben und alles was sonst noch so nötig war, um zum Ziel zu gelangen. Fabian hatte ein tolles Gespür dafür, welche Materialien unter welchen Bedingungen in welchem Aggregatszustand halten und wann sie brechen. Wir haben von ihm gelernt: ein Tisch ist nur dann ein Tisch, wenn man sich draufsetzen kann, ohne dass er unter einem zusammenbricht. Wegen des unebenen Untergrundes in den Outdoor Kontexten, hat er die Beine angewinkelt und abgerundet, wegen der Hebelwirkung des Winkels hat er ein raueres Material und größere Drehknöpfe für die Einstellschrauben der Haube verwendet. Wegen des Flattergeräusches, welches der Wind machen könnte, hat er sich für einen Stoff entschieden, der eine gewisse Dicke hatte, auch wenn das zu Lasten des Gesamtgewichtes ging, da damit gleichzeitig auch die UV-Einstrahlung signifikant reduziert werden konnte. Weil manche Teile des Schreibtisches nicht mit herkömmlichen Werkzeugen zu formen waren, musste Fabian eine Shaper Origin als handgeführte CNC Fräse nutzen.
Man stelle sich vor, Fabian als Lead Designer hätte uns als beauftragende Stakeholder einfach ein Scribble des Tisches und der Haube geliefert und dann gesagt: „Hier ist das Design. Das müsst ihr jetzt nur noch umsetzen. Was für ein Material ihr für diese Idee benötigt, wieviel es wiegt, wie es verbunden wird und wie es auf Sonneneinstrahlung reagiert, das kann ich euch leider auch nicht sagen.“ Mit dieser Haltung wäre niemals ein in der Realität nutzbares Produkt entstanden.
Fazit
Der mensch-zentrierte Prozess ist gar nicht so unterschiedlich, je nachdem ob man mit digitalem oder analogen Material arbeitet. Es geht darum User Needs zu kennen und über physische Grenzen hinweg aufzulösen. Das ist heutzutage ein fließender Übergang.
Daher gilt für einen Digital Designer genau wie für einen analogen Designer, dass er oder sie seine Materialien und deren Aggregatszustände sowie die Tools und deren Vor- und Nachteile im Detail kennen muss. Ein digitaler Designer muss auch die Frameworks und Tools kennen, auf deren Grundlage Software entsteht. Das Zeichen und Beschreiben von Konzepten ist zu wenig, um mit den analogen Designern gleichzuziehen. Die Tools des digitalen Design Professionals bestehen daher eben nicht nur Zeichenprogrammen wie Miro, Figma und Sketch, sondern eben auch aus Engineering-Tools wie GraphiQL, Git, VS Code oder Strapi.
Wir haben Dein Interesse geweckt? Schau Dir unsere Leistungen an!
