# Mobile-App-UX für vernetzte Produkte: Design-Tipps

> Die fünf Fragen, die jeder Bildschirm eines vernetzten Produkts beantworten sollte, und einige Regeln für Smartphone-Bildschirme. Eine Framework-unabhängige Zusammenfassung zu mobiler UX für IoT-Apps, mit dem vollständigen Video.

![Mobile-App-UX für vernetzte Produkte: Design-Tipps](https://tago.io/og/de/blog/mobile-ux-connected-products.png)

Sie wissen, dass vernetzte mobile Apps Design-Herausforderungen mit sich bringen, die normale Apps nicht haben. Was wir gelernt haben, steckt in einem kurzen Video: fünf Fragen, die jeder Bildschirm beantworten sollte, und einige Regeln für Smartphone-Bildschirme. Hier die Zusammenfassung. Das Video zeigt jeden Punkt in einer echten App.

<iframe src="https://www.youtube-nocookie.com/embed/Ur5x06xnT_E" title="Mobile-App-UX für vernetzte Produkte" class="aspect-video h-auto w-full rounded-xl" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

*Sehen Sie sich den vollständigen Walkthrough an. Er dauert weniger als sechs Minuten und zeigt jeden Tipp in einer laufenden App.*

## Von Entscheidungen ausgehen, nicht von Daten

Sensoren senden einen Strom von Werten, aber Ihre Nutzer interessiert keine Liste von Messwerten. Sie interessiert eine Entscheidung, etwa ob sie handeln müssen oder nicht. Bauen Sie jeden Bildschirm um diesen Moment herum und zeigen Sie nur, was bei der Entscheidung hilft.

## Fünf Fragen, die jeder Bildschirm beantworten sollte

Ein guter Bildschirm für ein vernetztes Produkt lässt Nutzer auf einen Blick entscheiden, indem er fünf Fragen in dieser Reihenfolge beantwortet.

![Folie mit dem Titel Fragen, auf die Nutzer schnelle Antworten wollen, dem Leitsatz Don't make me think und fünf nummerierten Fragen: Ist alles in Ordnung, Kann ich dem trauen, Was hat sich geändert, Was soll ich tun, Hat es funktioniert.](https://tago.io/images/blog/mobile-ux-connected-products/five-questions.webp)

- **Ist alles in Ordnung?** Zuerst der Status, daneben die Anzahl, Probleme ganz oben. Wenn alles in Ordnung ist, sollte der Bildschirm langweilig aussehen.
- **Kann ich dem trauen?** Eine Zahl ohne Uhrzeit daneben ist eine Vermutung. Versehen Sie jeden Wert mit einem Zeitstempel und grauen Sie veraltete Werte aus.
- **Was hat sich geändert?** Eine Benachrichtigung pro Problem, nicht eine pro Messwert, und jede nennt das betroffene Asset.
- **Was soll ich tun?** Platzieren Sie die Aktion direkt neben dem Problem, einen Tipp entfernt, und lassen Sie alles bestätigen, was sich nicht rückgängig machen lässt.
- **Hat es funktioniert?** Ein Befehl braucht Zeit, bis er das Gerät erreicht. Zeigen Sie also "ausstehend", dann "bestätigt" oder "fehlgeschlagen", und wann.

## Ein Smartphone ist kein kleiner Desktop

Ein Dashboard für einen großen Monitor wird auf dem Smartphone zu einer Wand aus winzigen Zahlen. Dort stehen die Leute, bedienen es mit einem Daumen und schauen nur ein paar Sekunden hin. Sechs Regeln halten es lesbar:

![Folie mit dem Titel Ein Smartphone ist kein kleiner Desktop, den Regeln, die einen Bildschirm auf einen Blick lesbar halten, und sechs Kacheln: eine Zahl pro Kachel, Tabellen werden Karten, ein Diagramm eine Datenreihe, Farbe braucht ein Wort, Karten nur für Standorte, zwei Tipps statt zehn.](https://tago.io/images/blog/mobile-ux-connected-products/phone-rules.webp)

- Eine Zahl pro Kachel, mit Einheit und Alter.
- Tabellen werden zu Karten, ein Wert pro Zeile, das Wichtige oben.
- Ein Diagramm, eine Datenreihe; ein einziger Zeitraum, Details per Tipp.
- Farbe braucht ein Wort, denn nicht alle sehen Farben gleich.
- Landkarten nur, wenn es um den Standort geht; sonst ist eine Liste schneller.
- Zwei Tipps, nicht zehn; Einrichtungsassistenten und Massenbearbeitung bleiben im Browser.

Nichts davon hängt davon ab, womit Sie bauen. Nativ, React oder ein anderes Framework: Es sind Entscheidungen darüber, was Nutzer sehen und tun müssen. Wenn die fünf Fragen sitzen, spüren Ihre Nutzer den Unterschied.

**[Das vollständige Video ansehen](https://youtu.be/Ur5x06xnT_E)**.

[llms.txt](https://tago.io/llms.txt)