PAGE online

Darum ist das Internet of Things ein Wachstumsmarkt für Designer

Von Küchengeräten über Autos bis zur Hightech-Medizin: Dank immer mehr smarter Geräte gibt es für UX- und UI-Designer:innen viel zu tun. Wir zeigen, was die Gestaltung von Interfaces für das Internet of Things so interessant macht und welches Know-how man für die Gestaltung der Interfaces für all die smarten Devices benötigt.

Digitales Touchdisplay auf einem Bosch Hausgerät mit Drehregler, der in die Glasscheibe geschnitten wurde. Eine elegante, visuell überzeugende Lösung, für die das Unternehmen bei den UX Design Awards ausgezeichnet wurde.
Digital-analog: In die Hausgeräte der neusten Generation integrierte die Bosch Hausgeräte AG den Digital Ring. Er besteht nicht nur aus einem digitalen Touchdisplay, sondern auch aus einem physischen Element: der aus analogen Geräten vertrauten Form des Drehreglers, die in die Glasscheibe geschnitten wurde. Eine elegante, visuell überzeugende Lösung, für die das Unternehmen bei den UX Design Awards ausgezeichnet wurde.

Braucht es für die Gestaltung von Internet-of-Things-Dis­plays überhaupt spezielles Know-how? »Interface Design ist ein spartenübergreifendes Handwerk«, sagt Frank Rausch, User Interface Typographer aus Berlin. »Ähnlich wie bei Ty­pografie: Wer kompetent mit Schrift umgehen kann, ist in der Lage, sowohl einen Lesetext als auch ein Plakat zu gestalten.« Ohne Kenntnisse über das Gerät und seine Nutzung geht es allerdings nicht: »Man sollte schon wissen, welche besonderen Anforderungen mit dem spezifischen Use Case – etwa Fahrzeuginnenraum oder Heizthermostat – verbunden sind«, so Rausch. »Im Auto etwa ist die Betrach­tungsdauer und auch die Konzentrationsspanne anders, als wenn ich gemütlich an meinem Smartphone rumtippe.«

Digitales Interface vor schwarzem Hintergrund

Fehlende Standards für IoT

Der vielleicht größte Unterschied zum App- und Webdesign: Für IoT gibt es noch keine Standards. Man gestaltet nicht für iOS oder Android, sondern meist für proprietäre Lösungen. Vielleicht der Grund dafür, warum diese Interfaces bei den Unternehmen zunehmend selbst entwickelt werden. Wie bei der Robert Bosch Hausgeräte GmbH. Seit 2014 ist Christoph Ortmann dort Head of UI und hat in dieser Zeit ein zehnköpfiges Inhouse-Designteam mit einem großen Spektrum an Kompetenzen aufgebaut. Zwar arbei­ten die Kreativen auch immer wieder mit Agenturen zusam­men, zum Beispiel für Spezialthemen wie Motion, aber das Kerndesign erfolgt inhouse. »Bei all unseren Produkten ist die Konfiguration des Displays und des Prozessors dahinter eine Eigenentwicklung für die jeweils spezifischen Anforderungen«, erklärt Christoph Ortmann. »So muss zum Beispiel das Display eines Backofens mehr Hitze vertragen können als das einer Waschmaschine.«

 

Eigenentwicklung hin oder her, die Bedienung des Inter­faces soll sich vertraut anfühlen, schließlich will man nicht für jedes Gerät eine neue Bedienung erlernen müssen. Für Frank Rausch ist deshalb eins unerlässlich: »Wer fürs Inter­net of Things gestaltet, sollte sich sehr gut mit den Bedienkonzepten von Smartphones und Desktop-Betriebssystemen auskennen und sich daran orientieren.« Christoph Ort­mann kann dem nur zustimmen, denn die Bedienung der Geräte spiele eine immer größere Rolle bei der Kaufentscheidung: »Vertraut müssen aber nicht nur die digitalen Elemente sein, wir brauchen auch die analoge Vertrautheit von gelernten Bedienmustern, wie eben ein Drehschalter für die Bedienung von Öfen gelernt ist.«

Zwei Welten verschmelzen

Wie man analog und digital optimal zusammenbringt, zeigt der Bosch Digital Ring. Die vertraute Form des Drehreglers wurde in die Glasscheibe der Ofenfront geschnitten und poliert und dann mit einem dahinterliegenden Touchdisplay verschmolzen. So hat man ein digitales Display, durch den Glasschliff aber auch noch ein physisches Element. Ein intuitives Design mit bekannten App-Interaktionsmus­tern wie Karussells, Listen oder digitalen Drehreglern führt die User:innen durch die Einstellungen.

Der Digital Ring kommt in diversen Hausgeräten zum Einsatz, um nicht bei jedem Gerät wieder bei null anzufan­gen, arbeiten Christoph Ortmann und sein Team gerade an der Entwicklung eines Design­sys­tems in Figma und QML. Was im Kommunika­tions­design längst selbstverständlich ist, beginnt sich für Produkt­interfaces gerade erst durchzusetzen. Der Ring ist zu­gleich ein Schlüsselelement der Marke Bosch. Ein weiteres ist die Hausschrift, die 2005 von Erik Spiekermann und Christian Schwartz gestaltete Bosch Sans. »Bislang haben wir ausschließlich den Light-Schnitt verwendet, jetzt kommt für Headlines noch die Bosch Sans Medium hinzu – das sorgt für Präg­nanz und Klarheit«, so Ortmann.

Schrift passt sich an

In digitalen Displays von Autos spielt Schrift eine besondere Rolle. Anzeigen müssen ausgezeichnet lesbar sein, damit die Aufmerksamkeit des Fahrenden schnell wieder zum Straßenverkehr wandert. Zugleich soll die Typo die Marke transportieren. Gut gelungen ist das bei der von Hannes von Döhren gestalteten VW Schrift, die im Zuge der von MetaDesign entwickelten neuen Brand Identity des Autokonzerns entstand. »Für die digitalen Displays haben wir die Schrift etwas bearbeitet«, erklärt der Berliner Typedesigner. »Damit am System selbst nicht viel geändert werden musste, haben wir die Laufweite so angepasst, dass etwa Zeilenumbrüche erhalten blieben.«

Unterschiedliche Automodelle haben unterschiedliche Displays und die wiederum oft unterschiedli­che Renderingsysteme. »Da mussten wir wirklich ge­nau hinschauen, wie die Schrift in welchem Auto dar­gestellt wird, um die Fonts entsprechend hinten zu können.« Das alles passierte im engen Zusammenspiel mit dem Inhouse-Designteam bei Volkswagen. Anpassungen gab es auch bei den Zahlen, die vor al­lem auf dem Tacho sehr präsent und meist im Kreis angeordnet sind. »Für einen harmonischen Eindruck und eine bessere Lesbarkeit haben wir zum Beispiel aus der ursprünglich geschlossenen 4 eine offene ge­macht«, erklärt von Döhren.

Typo im Fokus
In digitalen Autodisplays spielt die Typografie eine große Rolle. Um lange Ablenkung zu verhindern, müssen Informationen sofort erfassbar sein, und auch als Projektion auf die Windschutzscheibe bei Head-up-Displays funktionieren. Typedesigner Hannes von Döhren passte deshalb seine für VW entwickelte Schrift für die Displays an (Bild: Volkswagen AG)

Komplex und menschlich zugleich

Ein wichtiger und besonders sensibler IoT-Bereich ist die Medizintechnik. »Von einem medizinischen Gerät darf kein Risiko für die Patient:innen ausgehen, darauf zielt die gesamte Produktentwicklung ab«, sagt Anja Kaiser. Sie leitet bei Siemens Healthineers den Designbereich, der nicht nur die visuelle Gestaltung von Softwareoberflächen umfasst, sondern die komplette User Experience inklusive des De­signs der Geräte selbst. Bei Siemens Healthineers fin­det ein Großteil der Arbeit inhouse statt, denn die Ent­wicklung von Medizinprodukten ist stark reguliert und sehr komplex – ein Feld, in das man sich als externe Agentur nicht mal eben so einarbeitet.

Ganz vertraut
Bei der Gestaltung von Interfaces für medizinische Geräte achtet Siemens Health­ineers darauf, bekannte Elemente aus Web- und Appdesign zu verwenden. So erinnert etwa die Oberfläche der Software Syngo Carbon Space, mit der Radio-log:innen Röntgen-, MRT- oder CT-Bilder beurteilen, an ein Smartphone-Interface.

Beim Interfaces Design achtet das Team darauf, bekannte Elemente aus Web- und Appdesign zu übernehmen. »Unsere Nutzer, vor allem Ärzt:in­nen oder Pflegepersonal, sind ja nicht per se IT-affin«, sagt Kaiser. »Aber im privaten Bereich haben sie mit ihren Smart Devices Routine entwickelt, wie sie mit di­gitalen Systemen interagieren. Diese Erfahrung wol­­­len wir auf unsere Geräte übertragen, damit der Zugang so einfach wie möglich wird.« Denn was Design im Gesundheitswesen so besonders macht – und Kai­ser sehr wichtig ist: »Wir gestalten für Menschen in einer sehr sensiblen Lage. Unsere Geräte sol­len das Personal nicht beschäftigen, sondern ent­las­ten. Da­mit sie den Fokus auf den Patienten legen kön­nen und sich die Situation für alle menschlich anfühlt.«

Darüber hinaus soll natürlich die Marke Siemens Healthineers erkennbar sein. Dazu verwendet das Designteam die Hausschriften Siemens Sans und Siemens Healthineers Bree in allen Applikationen, auch in den Gerätedisplays. Ebenso die Hausfarben Petrol (Siemens) und Orange (Healthineers). Nach Möglichkeit geht das global agierende Unternehmen auch bei der Interfacegestaltung auf die Bedürfnisse der verschiedenen Märkte ein. »Funktionalität hat aber immer Vorrang, es wird jetzt nicht quietschbunt, nur um kulturgeprägte Sehgewohnheiten zu berücksich­tigen«, berichtet Anja Kaiser.

Ein langes Leben

Worauf müssen Kreative sich im Bereich IoT einstel­len? Im Gesundheitswesen etwa muss man Komple­xität mögen. »Wir können nicht so frei gestalten wie jemand, der eine Website für eine Consumer Brand entwickelt«, sagt Anja Kaiser. »Es gibt einfach wahn­sinnig viele Anforderungen – technische, fachliche und regulatorische. Die alle unter einen Hut zu brin­gen und dabei noch ein cooles Design hinzubekommen macht viel Spaß, ist aber auch herausfordernd.«

Christoph Ortmann erklärt, dass man Freude daran haben sollte, mit reduzierter Rechenleis­tung zu ar­beiten. Animationen etwa seien nicht im­mer mög­lich. Zudem brauche es den Blick fürs Ganze. »Man muss das Produkt verstehen und eine Passion dafür mitbringen. Nicht nur aufs schwarze Kästl gucken, sondern das Gerät als Ganzes betrach­ten mit allem, was dahintersteckt.« Das schöne am Job sei, dass so ein Produkt dann dastehe und den Alltag der Menschen präge. »Wir gestalten extrem langlebige Dinge, die nicht nach dem nächsten Update, schwups, einfach verschwunden sind.«

»Das beste Interface ist kein Interface«

Die Niederländerin Lieke Ypma studierte Design und Engineering. Nach Stationen bei Audi und Vodafone gründete sie im Ap­ril 2022 das auf UX Design spezialisierte Telling Studio in Berlin. Wir sprachen mit ihr darüber, worauf es bei der Gestaltung für Mobility-Systeme ankommt.

Portrait Lieke Ypma

Du bezeichnest dich als Product Designer. Was steckt dahinter?
Lieke Ypma: Dass wir über das Display hinausdenken müssen. Wenn wir IoT-Interfaces gestalten, gestalten wir ein System. Der amerikanische Begriff Product Designer, der das Produkt als die Summe von Funktio­nalitäten und Visualisierungen versteht, die die Bedürfnisse der Nutzerinnen und Nutzer befriedigen, finde ich passend.

Welche Skills braucht es dafür?
Es geht immer um dasselbe Ziel – egal, ob wir Apps gestalten oder proprietäre Interfaces. Das Interface kommuniziert den Systemstatus an den Nutzer. Es geht nicht um ein ingenieurmäßig korrektes Sys­tem­diagramm, sondern um eine nutzbare Schnittstelle. Ist die Maschine an? Ist die Bluetooth-Box connec­ted? Sind die Sicherheitssysteme aktiv? Dabei hilft es, die gut erforschten Standards aus App- und Webdesign zu kennen.

Kannst du ein Beispiel nennen?
Bei mit dem Internet verbundenen Fahrrädern ist zum Beispiel das Schloss eine Herausforderung. Ob es abgeschlossen ist oder nicht, kann man direkt am Rad und in der App signalisieren. Wir müssen herausfinden, wann Nutzer:innen wo hinschauen. Dazu kommen praktische Überlegungen: Entscheidet man, es am Fahrrad zu signalisieren, dauert die Umsetzung bestenfalls ein halbes Jahr, in der App wenige Wochen. Aber wenn das Handy keinen Empfang hat oder der Akku leer ist, kann ich das Fahrrad nicht auf- oder abschließen. Idealerweise sind Fahrrad und App im­mer online, signalisieren dasselbe zur selben Zeit, und das Abschließen funktioniert auch ohne Netz.

E-Bikes sind dein Steckenpferd. Was fasziniert dich daran?
Hier gibt es noch so viel Luft nach oben. Zum Beispiel die Integration intelligenter Systeme wie ein Antiblockiersystem – dafür bräuchte es gar nicht un­bedingt ein großes Display. Die Funktion könnte ein­fach im Hintergrund Sicherheit geben. So, wie ich weiß: Fahre ich einen Volvo, ist das Licht an, immer und zuverlässig.

Keine Ablenkung
Das Interface am Dance-Bike kommt mit wenigen farbigen Status-LEDs und Tasten aus. Eindeutig gestaltet, erlauben solche einfachen proprietären Interfaces am IoT-Gerät – ganz ohne Display – eine Nutzung ohne Ablenkung.

Aber für andere Dinge wie die Akkuladung braucht man ja schon ein Display …
Natürlich muss absolut klar sein, ob der Akku voll oder leer ist, das Licht an oder aus. Aber dafür reichen ein paar Status-LEDs und Icons, sodass man sich aufs Fahren konzentrieren kann. Ich finde, wo es geht, müssen wir weg von großen Displays.

Zumal gewöhnliche Fahrradcomputer ja häufig auch visuell nicht gerade überzeugend sind.
VanMoof hat eine sehr schöne Lösung entwickelt und die Anzeige in den Rahmen integriert. Beim neusten Modell ist das Interface auf vier Tasten und mehrere Status-LEDs reduziert. Dazu gibt es eine Halterung für das Smartphone, sodass die App als zusätz­liche Schnittstelle zur Maschine gilt. Die E-Bike-Brand Dance geht einen ähnlichen Weg, wobei hier die Tas­ten mit einem Icon beschriftet sind.

Konsistenz bitte!
Beim VanMoof X3 ist die Anzeige in den Rahmen integriert und zeigt dort die gleichen Inhalte wie die App.

 

Die Kombination aus Status-LEDs und Smartphone-App bietet also für jeden, was er braucht. Wer gar nicht so viele Infos haben will, kann das Handy einfach in die Tasche stecken.
Richtig. Die App bietet volle Kontrolle und Details für Tech-Verliebte. Das Fahrrad-Interface ohne App bie­tet alles Notwendige, ohne Ablenkung. Wir soll­ten mit IoT-Geräten nicht das anbieten, was technisch möglich, sondern das, was für eine gute Erfahrung wünschenswert ist. Nicht die Technik entwickeln und sie dann den Nutzer:innen erklären, sondern das System aus Nutzer:innensicht designen und die Anforderungen an die Technik daraus ableiten.

Die Konsistenz zwischen proprietärem Interface und App ist eine Herausforderung im UX Design. Denn eine App lässt sich schneller und einfacher updaten als ein Hardware-Interface. Zudem kann man sie oft mit mehreren Geräte­generationen verbinden. Bild: ©Asylab

Dieser Artikel ist in PAGE 07.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 07.2023

Packaging für junge D2C-Marken ++ Designlehre an der Hochschule ++ Type und UI Design fürs IoT ++ B2B Branding ++ ENGLISH SPECIAL House of Gül ++ New Work: Tools & Workflows ++ Making-of: iOS-App Heavy Mental ++ VR-Produktion bei BECC Agency ++ E-Commerce: Transparente Check-outs ++ Start in die Designlehre

9,90 €
AGB

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren