{"id":15225,"date":"2022-07-25T15:38:10","date_gmt":"2022-07-25T13:38:10","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&#038;p=15225"},"modified":"2022-07-27T09:16:26","modified_gmt":"2022-07-27T07:16:26","slug":"analoges-und-digitales-material-in-mensch-zentrierten-design-prozessen","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/analoges-und-digitales-material-in-mensch-zentrierten-design-prozessen\/","title":{"rendered":"Es lebe der flie\u00dfende \u00dcbergang! Analoges und digitales Material in mensch-zentrierten Design Prozessen"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>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.<!--more--><\/p>\n<h2>Vorbilder und Wurzeln<\/h2>\n<p>Viele von uns kennen die gro\u00dfen Designvorbilder wie <a href=\"https:\/\/de.wikipedia.org\/wiki\/Dieter_Rams\">Dieter Rahms<\/a>, <a href=\"https:\/\/de.wikipedia.org\/wiki\/Charles_Eames\">Charles Eames<\/a>, <a href=\"https:\/\/de.wikipedia.org\/wiki\/Philippe_Starck\">Richard Stark<\/a> oder <a href=\"https:\/\/de.wikipedia.org\/wiki\/Jonathan_Ive\">Jony Ive<\/a>. Was haben alle von diesen popul\u00e4r gewordenen Designern gemeinsam? Sie k\u00f6nnen alle mit physischem Material umgehen.<\/p>\n<div id=\"attachment_15285\" style=\"width: 1930px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15285\" class=\"wp-image-15285 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10.jpg\" alt=\"Dieter Rahms, Jony Ive\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10.jpg 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10-1500x844.jpg 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10-768x432.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><p id=\"caption-attachment-15285\" class=\"wp-caption-text\">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<\/p><\/div>\n<p>Wenn Jonathan Ive direkt ins digitale Design gegangen w\u00e4re, h\u00e4tte er sicherlich nicht den Ruhm erhalten, den er jetzt genie\u00dft. Es war sein legend\u00e4res iMac Design, welches ihm Geh\u00f6r 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\u00e4chst einmal Industriedesigner bzw. Produktdesigner.<\/p>\n<p>Jonathan Ives Vater war ein Silberschmied, der an einer Hochschule t\u00e4tig war. Er schenkte seinem Sohn jedes Jahr zu Weihnachten einen Tag in seiner Werkstatt, um genau das zu bauen, was er sich gerade w\u00fcnschte \u2013 die Materialkunde \u2013 das Arbeiten mit physischen Artefakten \u2013 wurde Jony Ive also quasi in die Wiege gelegt.<\/p>\n<h2>Unterschiede und Gemeinsamkeiten zwischen Analogem und Digitalem<\/h2>\n<p>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\u00fcpfungspunkt um junge Menschen f\u00fcr das Designhandwerk zu inspirieren. Digitales ebenfalls als Material zu betrachten, inspiriert und \u00f6ffnet die T\u00fcr zu dieser Tradition ohne die T\u00fcr vor der Zukunft zu verschlie\u00dfen.<\/p>\n<div id=\"attachment_15287\" style=\"width: 1930px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15287\" class=\"wp-image-15287 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/11.jpg\" alt=\"product design &amp; digital design\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/11.jpg 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/11-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/11-1500x844.jpg 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/11-768x432.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/11-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><p id=\"caption-attachment-15287\" class=\"wp-caption-text\">Quelle: https:\/\/www.hfg-ulm.de\/med\/310-hfg-geschichte-1.jpg<\/p><\/div>\n<p>Aber die Fortsetzung dieser Erfolgsgeschichte kann nur gelingen, wenn auch klar ist, was digitales Material \u00fcberhaupt ist und wenn diese Metapher auch f\u00fcr einen au\u00dfenstehenden greifbarer wird. Vor allem muss die Metapher greifbar sein, f\u00fcr junge Menschen, die sich z.B. f\u00fcr das Berufsbild des <a href=\"https:\/\/www.digitaldesign.org\/de\">Digital Design Professional<\/a>, des DDP, begeistern. Hier wird die Metapher des digitalen Materials bereits jetzt schon konsequent eingesetzt.<\/p>\n<p>Ich m\u00f6chte 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\u00fcr die jeweiligen Endnutzer*innen des digitalen Produktes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15248\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1.png\" alt=\"material\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-1500x844.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h2>Doch was ist \u00fcberhaupt (digitales) Material?<\/h2>\n<p>Nun, jeder hat sicherlich seine eigene Definition daf\u00fcr 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\u00fcssen somit neu beschafft werden.<\/p>\n<p>In diesem urspr\u00fcnglichen Sinne, hinkt die Analogie bereits ein wenig, denn nat\u00fcrlich ist das bei digitalen Produkten anders. Digitales Material w\u00e4ren im \u00fcbertragenen Sinne Software-Komponenten, UI Elemente oder APIs. Einen Aggregatzustand haben wir hier gar nicht \u2013 allerdings will trotzdem nat\u00fcrlich jeder nur stabile Komponenten verbauen. Und wenn wir hier \u00fcberhaupt von \u201eVerbrauch\u201c sprechen, dann geht es meistens um den Speicherverbrauch oder \u00e4hnliches.<\/p>\n<p>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\u00fcrlich verbraucht die App etwas von dem Hauptspeicher jede*r einzelnen Nutzer*in &#8211; aber ja nur w\u00e4hrend der Nutzung. Digitales Material verbraucht sich eben nicht w\u00e4hrend der Produktion! Das ist das Tolle an Software und daher frisst Software bekanntlich auch die Welt auf! \u201eSoftware eats the world\u201c<\/p>\n<p>Aber was der gr\u00f6\u00dfte Vorteil von Software ist, ist mitunter auch ihre gr\u00f6\u00dfte Schw\u00e4che. Software ist virtuell, abstrakt, zum Teil unsichtbar und schwer verst\u00e4ndlich \u2013 geschweige denn \u201ebegreifbar\u201c. Gerade deshalb ist User Interface Design so popul\u00e4r geworden und wir selbst verdienen unser Geld seit \u00fcber 17 Jahren mit <a href=\"https:\/\/www.centigrade.de\/de\/referenzen\">User Experience Beratung und User Interface Design Projekten<\/a> \u2013 ich wei\u00df also wovon ich spreche.<\/p>\n<p>Die Menschen m\u00f6chten eben auch ein digitales Produkt sehen, f\u00fchlen und erleben k\u00f6nnen. Und dieses Gef\u00fchl zu bescheren, daf\u00fcr sind Designer ja letztlich auch angetreten \u2013 egal ob Digital Designer oder klassischer Product Designer.<\/p>\n<p>Und hier haben wir auch schon die gr\u00f6\u00dfte Gemeinsamkeit, wenn es um die Analogie zwischen analogem und digitalem Material geht: das Produkt soll Menschen gefallen und einen gef\u00fchlten Mehrwert liefern. Ich pers\u00f6nlich liebe das Material meines MacBooks, weil es sich gut anf\u00fchlt 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 \u00fcbrigens verloren \ud83d\ude09 Es bringt mir aber nix, denn ich glaube es immer noch. User Experience ist nun mal einfach irrational.<\/p>\n<h2>UI vs UX Design<\/h2>\n<p>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.<\/p>\n<p>Und einfach zu erkl\u00e4ren ist User Experience offensichtlich schon mal gar nicht, wie solche Analogie-Bilder auf Linkedin immer wieder brutal vor Augen f\u00fchren.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15271\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3-1.png\" alt=\"UI vs UX Ketchup\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3-1.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3-1-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3-1-1500x844.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3-1-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3-1-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>Die Tatsache, dass physische Ketchupflaschen als Vergleichsobjekte herhalten m\u00fcssen, um den Unterschied zwischen den aus der Digitalisierung kommenden UI und UX Begriffen spricht B\u00e4nde. Wenn dieser Vergleich dann auch noch spektakul\u00e4r 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!<\/p>\n<p>Wer von Ihnen nun daran interessiert ist, was denn bitte so falsch an diesem Bild ist, der m\u00f6ge gerne <a href=\"https:\/\/www.linkedin.com\/posts\/thomasimmich_linkedin-ux-ui-activity-6942444522329022465-NF_N\">meinen Post auf Linkedin<\/a> dazu lesen und kommentieren \u2013 ich habe diesen\u00a0etwa 2 Wochen vor dem Verfassen dieses Artikels gepostet und war w\u00e4hrend des Schreibens immer noch damit besch\u00e4ftigt, die vielen Kommentare darunter abzuarbeiten \ud83d\ude09<\/p>\n<p>Aber, wenn man sich nun auf den Ketchupflaschen-Vergleich einlassen m\u00f6chte, so kann man immerhin das Bild gerader r\u00fccken, indem man \u00fcber beide Flaschendesigns \u201eUI\u201c schreibt und jeweils zwei andere \u201eUX\u201c Bilder daruntersetzt, die repr\u00e4sentativ f\u00fcr das jeweilige Nutzungserlebnis sind.<\/p>\n<div id=\"attachment_15289\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15289\" class=\"wp-image-15289 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/12.jpg\" alt=\"ui vs ux ketchup\" width=\"1200\" height=\"1200\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/12.jpg 1200w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/12-300x300.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/12-1024x1024.jpg 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/12-150x150.jpg 150w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/12-768x768.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><p id=\"caption-attachment-15289\" class=\"wp-caption-text\">Quelle: https:\/\/www.patrickhansen.com\/wp-content\/uploads\/2017\/09\/UI-vs-UX-ketchup_2017_02.jpg<\/p><\/div>\n<p>So weit, so gut. Aus Sicht unser Material-Metapher, sind wir aktuell aber noch kein St\u00fcck weitergekommen. UX und UI Design sind Handwerke des digitalen Zeitalters und zumindest in der Au\u00dfendarstellung bereits jetzt schon nutzer-zentrierter als es traditionelles Produktdesign je war. Aber offensichtlich braucht es immer noch analoge Beispiel, um diese Handwerke \u00fcberhaupt und dann auch noch falsch erkl\u00e4ren zu k\u00f6nnen \u2013 Stichwort Glas vs. Plastikflasche.<\/p>\n<p>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\u00f6nnten. Die Formgebung der linken Glasflasche punktet klar bei der Frage: wie rum geh\u00f6rt sie denn eigentlich?<\/p>\n<div id=\"attachment_15252\" style=\"width: 1450px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15252\" class=\"wp-image-15252 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-3.jpg\" alt=\"Ketchup\" width=\"1440\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-3.jpg 1440w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-3-300x225.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-3-1365x1024.jpg 1365w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-3-768x576.jpg 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><p id=\"caption-attachment-15252\" class=\"wp-caption-text\">Quelle: https:\/\/www.facebook.com\/interactiondesign.org\/photos\/well-in-heinz-sight-design\/10161286023517228\/<\/p><\/div>\n<p>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\u00fcber ausgelassen, dass sie die Pupsger\u00e4usche der Plastikflasche gegen Ende ihres Lebenszyklus als \u201eunw\u00fcrdig\u201c empf\u00e4nden.<\/p>\n<p>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\u00e4re es \u201eblo\u00df\u201c Content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15254\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4.png\" alt=\"content ui component ketchup\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-1500x844.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/4-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>\u201eBlo\u00df\u201c Content? Material hin oder her \u2013 nat\u00fcrlich beeinflusst der Content ma\u00dfgeblich das Interaktionserlebnis: wenig Content erzeugt mehr Pupsger\u00e4usche, viel Content reduziert die Pupsger\u00e4usche. 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 \u201eUX Writing\u201c immer ernster zu nehmen ist, denn es ist weder egal was man auf dem UI sagt, noch ist es egal wie man es sagt.<\/p>\n<p>Doch zur\u00fcck zum eigentlichen Materialthema, denn nat\u00fcrlich beeinflusst das verwendete Material die Art der Nutzung eines Produktes ma\u00dfgeblich. Jeder, der schon mal versucht hat, Ketchup aus einer Glasflasche zu quetschen ist entweder j\u00e4h gescheitert oder mit schweren Verletzungen im Krankenhaus gelandet.<\/p>\n<p>Die Auswahl des Materials beeinflusst also ganz offensichtlich auch die Affordance, also den Aufforderungscharakter, eines Produktes und damit auch das Verhalten der Nutzer*innen.<\/p>\n<p>Kommen wir aber zum eigentlichen Kern der Aufregung im Duell Glas- gegen Plastikflasche. Die Glasflasche soll hier laut Bild als Repr\u00e4sentant f\u00fcr UI Design und die Plastikflasche als Repr\u00e4sentant f\u00fcr UX Design stehen, weil die Glasflasche zwar sch\u00f6n aussieht, aber eben im Gegensatz zur Plastikflasche einen groben Bedienfehler ausl\u00f6sen kann. Wenn der bedienende Mensch die Glasflasche nicht vorher sch\u00fcttelt, dann wird er zun\u00e4chst gar kein Content erhalten und dann \u2013 schlagartig \u2013 pl\u00f6tzlich viel mehr Content erhalten als er eigentlich wollte.<\/p>\n<p>Warum ist das so? Nun, l\u00e4sst man Ketchup ruhig stehen, bilden seine verschiedenen Bestandteile einzelne Molek\u00fclverb\u00e4nde, die wiederum untereinander Verbindungen eingehen. Es entsteht so eine relativ stabile Struktur, wodurch die Fl\u00fcssigkeit z\u00e4her und fester wird. Durch die Krafteinwirkung beim Sch\u00fctteln wird diese Struktur im Ketchup zerst\u00f6rt; der Halt unter den Molek\u00fclverb\u00e4nden l\u00e4sst nach, die Molek\u00fcle k\u00f6nnen sich freier bewegen. Dadurch wird das Ketchup wieder fl\u00fcssig. Das ist der Thixotropie-Effekt.<\/p>\n<p>Man k\u00f6nnte meinen, dass das f\u00fcr HEINZ doch eigentlich gut ist, weil mehr Ketchup verbraucht wird. Paradoxerweise scheint sich HEINZ in Sachen Konsumsteigerung aber folgenderma\u00dfen zu orientieren: weil sich Kinder mit der Plastikflasche den Ketchup einfacher selbst portionieren k\u00f6nnen, f\u00fchrt dies zu mehr Ketchup-Konsum als es eine zu erlernende Glasflasche je provozieren k\u00f6nnen.<\/p>\n<p>Offensichtlich ist in der Materialdiskussion der Aggregatszustand einer Produktverpackung oder des Contents f\u00fcr das Interaktionserlebnis und Nutzungsverhalten gar noch wichtiger als sowieso schon angenommen.<\/p>\n<p>Ein Designer muss sich also \u2013 egal in welcher Dom\u00e4ne er unterwegs ist\u00a0 \u2013 mit verschiedenen Aggregatzust\u00e4nden von Materialien auskennen, um einen guten Job machen zu k\u00f6nnen. 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 \u00fcber 0\u00b0 Celsius erfolgreich sein zu k\u00f6nnen. Er sollte besser schnell umschulen.<\/p>\n<p>Welches Interaktionsverhalten ein Material hervorruft oder ob Content in richtiger Dosierung abgegeben wird, h\u00e4ngt also beiderseits ma\u00dfgeblich von den jeweiligen Aggregatszust\u00e4nden ab.<\/p>\n<div id=\"attachment_15303\" style=\"width: 1795px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15303\" class=\"size-full wp-image-15303\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/13-14.jpg\" alt=\"hold &amp; squeeze, shake &amp; pour ketchup\" width=\"1785\" height=\"607\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/13-14.jpg 1785w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/13-14-300x102.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/13-14-1500x510.jpg 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/13-14-768x261.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/13-14-1536x522.jpg 1536w\" sizes=\"auto, (max-width: 1785px) 100vw, 1785px\" \/><p id=\"caption-attachment-15303\" class=\"wp-caption-text\">Quelle: https:\/\/pbs.twimg.com\/media\/FUt3mquXoAEldzn.jpg<\/p><\/div>\n<p>Auf digitales Material und digitalen Content schielend, muss man sich also schon die Frage stellen: Was ist eigentlich im \u00fcbertragenen Sinne der Aggregatszustand von digitalem Material? Und wie \u00e4ndert dieser sich durch das Interaktionsverhalten der Nutzer*innen?<\/p>\n<h2>Digitales Material<\/h2>\n<p>Digitales Material kann genau wie analoges Material eher statisch und rigide sein. Das kann in manchen Situationen ein Vorteil f\u00fcr Nutzer sein, in anderen Situationen aber vielleicht auch ein Nachteil. Und nat\u00fcrlich muss daher ein Digital Designer, der mensch-zentriert agieren m\u00f6chte, \u00fcber den Aggregatzustand von digitalem Material Bescheid wissen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15295\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/15.png\" alt=\"aggregatzustand\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/15.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/15-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/15-1500x844.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/15-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/15-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>Ein Beispiel f\u00fcr ein rigides und eher statisches Material k\u00f6nnte beispielsweise eine bereits vorhandene REST API sein. Eine REST API ist eine klare in ihrer aktuellen Version unver\u00e4nderliche Schnittstelle, eine Art \u201eVertrag\u201c auf den sich Designer und Engineers einlassen k\u00f6nnen ohne im Laufe ihres Konstruktionsprozesses auf b\u00f6se Verformungen zu sto\u00dfen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15256\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/5.png\" alt=\"rest api - graphql - web socket\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/5.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/5-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/5-1500x844.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/5-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/5-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>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\u00e4chst noch vorverarbeitet werden. F\u00fcr Designer macht es das Leben insofern leicht, dass sie sich auf das eigentliche Nutzerbed\u00fcrfnis konzentrieren k\u00f6nnen, statt auf die Frage: wie mache ich aus diesem Rohstoff hier einen Werkstoff.<\/p>\n<p>Aber leider beobachte ich genau dieses Verhalten in meiner allt\u00e4glichen Arbeit, vor allem bei unerfahrenen UX Designer*innen. Wenn die Aufgabe lautet: \u201eGestalte einen Login-Dialog f\u00fcr eine bestimmte Nutzergruppe\u201c, dann sollten sich Designer*innen an einem gewissen Punkt doch auch fragen, mit welchem digitalen Material sie diesen Login-Dialog zum Leben erwecken w\u00fcrde. Sie m\u00fcssten sich z.B. die Frage stellen: welche REST APIs zum Thema Authentifizierung gibt es aktuell bereits und welche API Funktion sind lange genug \u201eim Ofen gewesen\u201c, so dass sie wie der gebrannte Ziegelstein als stabiles Gestaltungs- und Konstruktionsmittel eingesetzt werden k\u00f6nnen. Ein Ziegelstein war bis zur Brennung urspr\u00fcnglich ebenfalls einmal Lehm. Nat\u00fcrlich kann auch mit Lehm H\u00e4user bauen, aber das Design des Hauses muss dann definitiv auch ein anderes werden.<\/p>\n<p>Stattdessen aber ist einer der h\u00e4ufigsten von mir beobachteten Reaktionen von unerfahrenen UX Designer*innen, einige Wireframes f\u00fcr einen Login Dialogs zu gestalten, die dann aber zum Leidwesen der Frontend Engineers an vielen Stellen in der Tiefe unterspezifiziert bleiben.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15305\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-scaled.jpg\" alt=\"designer vs engineer wireframes\" width=\"2560\" height=\"1036\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-scaled.jpg 2560w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-300x121.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-1500x607.jpg 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-768x311.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-1536x621.jpg 1536w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/16-17-2048x828.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>Warum sollte ein Designer alleine auch mehr Spezifikationstiefe erarbeiten k\u00f6nnen, als es einem Gremium von API-Experten plus einer Horde von Open-Source Entwicklern gelungen ist? Trotzdem h\u00f6re ich UX Designer*innen oft sagen: \u201eIch muss mich mit APIs nicht auskennen! Das ist ein Software Engineering Thema\u201c. Verlangt man mit dieser Art der digitalen Materialkunde Unm\u00f6gliches oder ist genau das der Kern von Digital Design?<\/p>\n<p>&nbsp;<\/p>\n<h2>Digital Designer als Produktdesigner<\/h2>\n<p>Wir haben den Spie\u00df einmal umgedreht und uns vorgestellt, dass wir als Digital Designer das gleiche Mindset gegen\u00fcber analogem Material mitbr\u00e4chten. Was w\u00e4re, wenn wir Digital Designer einen Schreibtisch bauen m\u00fcssten ohne uns mit den daf\u00fcr n\u00f6tigen Materialien auszukennen? Um es etwas interessanter zu machen, sollte es kein normaler Schreibtisch werden, sondern ein <a href=\"https:\/\/www.centigrade.de\/go\/together-anywhere\/#outdoor-office-videos\" target=\"_blank\" rel=\"noopener\">Outdoor Office Schreibtisch<\/a>, ein Schreibtisch also, der f\u00fcr die mobile Bildschirmarbeit im Freien taugt. Auf die Idee brachte uns die damalige Corona Lage, die dazu f\u00fchrte, dass wir uns kaum noch real gesehen haben, der Drang aber gro\u00df, gemeinsam ohne Maske an einem Ort miteinander zu arbeiten.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15258\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/6-2.jpg\" alt=\"outdoor office\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/6-2.jpg 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/6-2-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/6-2-1500x844.jpg 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/6-2-768x432.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/6-2-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>Durch die recht tempor\u00e4re Natur dieses Outdoor Workspaces, waren bereits einige Constraints vorgegeben: nat\u00fcrlich mussten die Schreibtische leicht transportierbar sowie leicht auf- und abzubauen sein. Gleichzeitig mussten sie aber stabil und gro\u00df genug sein, dass man daran auch einen ganzen Arbeitstag lang komfortabel arbeiten konnte. Au\u00dferdem wollten wir, dass die Tische nachhaltig sind, damit wir keinen zu gro\u00dfen Fu\u00dfabdruck hinterlassen.<\/p>\n<p>Wie haben wir gestartet? Nach einem kurzen User Research durch Befragungen der Kolleg*innen konnten wir eine gute Arbeitsplatzgr\u00f6\u00dfe herausfinden. In der Ideen-Phase sind wir auf den entscheidenden Ansatz gekommen, wie wir die Sonneneinstrahlung so geringhalten kann, dass man auch auf herk\u00f6mmlichen Monitor genug sehen kann. Statt eines Sonnenschirms hatten wir die Idee einer Ziehharmonikaartigen Zelthaube. Diese Haube w\u00fcrde es erlauben, Sonnenstrahlen sowohl von hinten als auch von vorne abzuhalten, gleichzeitig aber auch so weit zu \u00f6ffnen, wie man m\u00f6chte.<\/p>\n<p>Die Idee und der Wunsch waren schnell ge\u00e4u\u00dfert. Doch bereits beim Prototyping der Haube, fehlten uns Digital Designer Professionals entscheidende Skills. Welchen Stoff nimmt man eigentlich f\u00fcr eine solche Haube, damit sie UV-Strahlen m\u00f6glichst abh\u00e4lt? Welche Art von Material m\u00fcssen wir verwenden, damit die Hebelkr\u00e4fte, die auf die Haube wirken uns nicht bei einem kleinen Windsto\u00df bereits alles auseinanderbrechen lassen? Aus welchem Material bauen wir den Schreibtisch, so dass er leicht ist, stabil und trotzdem nachhaltig und \u00e4sthetisch?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15260\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/7-1.jpg\" alt=\"armadillo desk\" width=\"1385\" height=\"924\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/7-1.jpg 1385w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/7-1-300x200.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/7-1-768x512.jpg 768w\" sizes=\"auto, (max-width: 1385px) 100vw, 1385px\" \/><\/p>\n<p>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 \u2013 wir haben uns einen analogen Designer, Fabian Revilla, ins Team geholt .<\/p>\n<p>Erst mit ihm im Team wurde es auch nur ansatzweise m\u00f6glich, unsere grobe Wunschvorstellung zu einem erlebbaren Prototyp zu f\u00fchren. Warum? Weil er sich mit Material auskannte. Und er hatte au\u00dferdem die Tools, um dieses Material zu bearbeiten: er konnte n\u00e4hen, er konnte s\u00e4gen, fr\u00e4\u00dfen, kleben, schrauben und alles was sonst noch so n\u00f6tig war, um zum Ziel zu gelangen. Fabian hatte ein tolles Gesp\u00fcr daf\u00fcr, 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\u00f6\u00dfere Drehkn\u00f6pfe f\u00fcr die Einstellschrauben der Haube verwendet. Wegen des Flatterger\u00e4usches, welches der Wind machen k\u00f6nnte, hat er sich f\u00fcr 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\u00f6mmlichen Werkzeugen zu formen waren, musste Fabian eine Shaper Origin als handgef\u00fchrte CNC Fr\u00e4se nutzen.<\/p>\n<p><div class=\"MediaEmbedContainer\"><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/Gkbu_ZHPUQ8\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div><\/p>\n<p>Man stelle sich vor, Fabian als Lead Designer h\u00e4tte uns als beauftragende Stakeholder einfach ein Scribble des Tisches und der Haube geliefert und dann gesagt: \u201eHier ist das Design. Das m\u00fcsst ihr jetzt nur noch umsetzen. Was f\u00fcr ein Material ihr f\u00fcr diese Idee ben\u00f6tigt, wieviel es wiegt, wie es verbunden wird und wie es auf Sonneneinstrahlung reagiert, das kann ich euch leider auch nicht sagen.\u201c Mit dieser Haltung w\u00e4re niemals ein in der Realit\u00e4t nutzbares Produkt entstanden.<\/p>\n<h2>Fazit<\/h2>\n<p>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 \u00fcber physische Grenzen hinweg aufzul\u00f6sen. Das ist heutzutage ein flie\u00dfender \u00dcbergang.<\/p>\n<p>Daher gilt f\u00fcr einen Digital Designer genau wie f\u00fcr einen analogen Designer, dass er oder sie seine Materialien und deren Aggregatszust\u00e4nde 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.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Wir haben Dein Interesse geweckt? Schau Dir unsere <a style=\"color: #2d373b; text-decoration: underline;\" href=\"https:\/\/www.centigrade.de\/de\/leistungen\/uebersicht\">Leistungen<\/a> an!<\/strong><\/p>\n<p><span class='maxbutton-1-container mb-container'><a class=\"maxbutton-1 maxbutton maxbutton-ux-design-de\" title=\"UX Design\" href=\"https:\/\/www.centigrade.de\/de\/leistungen\/ux-design\"><span class='mb-text'>UX Design<\/span><\/a><\/span> <span class='maxbutton-4-container mb-container'><a class=\"maxbutton-4 maxbutton maxbutton-ux-design-de-large\" title=\"UX Design\" href=\"https:\/\/www.centigrade.de\/de\/leistungen\/ux-management\"><span class='mb-text'>UX Management<\/span><\/a><\/span><\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[832,893,933,849,390],"class_list":["post-15225","blog","type-blog","status-publish","hentry","tag-armadillo-desk","tag-ddp","tag-digital-design","tag-digital-design-professional","tag-ux-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/15225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":10,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/15225\/revisions"}],"predecessor-version":[{"id":15315,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/15225\/revisions\/15315"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=15225"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=15225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}