Beginnen Sie mit einer gemeinsamen Kundenaufgabe
Stellen Sie sich einen Budapester Geräteverleih vor, der Website und App für Veranstalter vorbereitet. Kunden stellen eine Geräteliste zusammen und fordern ein Angebot an. Am Laptop kann eine Tabelle den Vergleich mehrerer Artikel erleichtern; am Smartphone ist möglicherweise eine kompakte Liste besser bedienbar. Beide sollten dieselben Geräte und Anforderungen beschreiben.
Verfassen Sie vor der Prüfung ausgearbeiteter Ansichten eine kurze Verhaltensbeschreibung: Welches Zubehör ist verpflichtend, was bedeuten die Mengenangaben und wann wird ein Entwurf zur eingereichten Anfrage? Bezeichnet die App einen Entwurf als „bestätigt“, behebt ein passendes Logo das Missverständnis nicht. Dies sind vorgeschlagene Regeln für einen hypothetischen Dienst, keine Aussagen über einen bestehenden Kunden.
Vereinheitlichen Sie Bedeutungen, bevor Sie Komponenten kopieren
Fordern Sie einen kleinen Katalog gemeinsamer Gestaltungsentscheidungen an. Benannte Werte, oft Design-Tokens genannt, können Markenfarbe, Textfunktionen, Abstände und das Erscheinungsbild von Warnungen beschreiben. Bezeichnungen wie „primäre Aktion“ erklären, warum ein Wert existiert; „blauer Button“ sagt weniger über seinen Zweck. Ergänzen Sie jeden Wert um seine Bedeutung und ein Beispiel.
Der Katalog sollte auch gemeinsame Formulierungen und Zustände abdecken. Für den Entwurf einer Angebotsanfrage, eine zur Prüfung anstehende und eine abgeschlossene Anfrage braucht es abgestimmte Bezeichnungen. Gemeinsame Komponenten können Doppelarbeit reduzieren. Die Anpassung einer komplizierten Universalkomponente kann aber mehr Aufwand verursachen als die Pflege zweier einfacher Bedienelemente. Wiederverwendung sollte künftige Änderungen verständlicher machen.
Erlauben Sie Unterschiede, die Kunden helfen
React Native unterstützt getrennte Implementierungen je Plattform. Android empfiehlt ebenfalls Layouts für unterschiedliche Bildschirme. Im Verleihbeispiel können die Desktop-Tabelle und die Smartphone-Liste somit dieselbe Aufgabe erfüllen, ohne jedes gestalterische Detail zu teilen.
Legen Sie fest, was „Zurück“ bewirkt, wo eine unfertige Angebotsanfrage verfügbar bleibt und wie Kunden Gerätedetails wieder öffnen. Prüfen Sie die Tastaturbedienung der Website und die Touchbedienung der App. Androids Hinweise zur Barrierefreiheit empfehlen außerdem Alternativen zu ausschließlich gestengesteuerten Aktionen. In diesem Beispiel sollte das Entfernen eines Artikels ein auffindbares Bedienelement haben, auch wenn zusätzlich eine Wischgeste angeboten wird.
Machen Sie Unterschiede für das Team sichtbar
Führen Sie eine Vergleichstabelle mit Kundenaufgabe, gemeinsamer Regel, Webumsetzung, App-Umsetzung und verantwortlicher Person. Jeder Unterschied braucht eine Erklärung: Die Tabelle unterstützt Vergleiche, während die Smartphone-Liste jedem Artikel mehr Platz lässt. Ein unerklärter Unterschied beim Pflichtzubehör ist dagegen ein zu untersuchender Fehler.
Ermitteln Sie bei Änderungen einer gemeinsamen Regel vor der Veröffentlichung alle betroffenen Ansichten. Dokumentieren Sie die Regelversion und vorübergehend nicht unterstütztes Verhalten. Ist nur eine Plattform bereit, entscheiden Sie, ob Sie die Änderung verschieben oder ihre Verfügbarkeit klar begrenzen. Eine gemeinsame Designdatei allein hält getrennt veröffentlichte Produkte nicht auf demselben Stand.
Nutzen Sie diese Checkliste bei der nächsten Prüfung
Beginnen Sie mit dem Ablauf der Angebotsanfrage und wiederholen Sie die Prüfung, sobald sich dessen Regeln ändern. Lassen Sie sich die folgenden Nachweise anhand funktionsfähiger Versionen beider Produkte zeigen.
- Verwenden Sie dieselben Beispielgeräte und Mengen; vergleichen Sie Anforderungen und Zustandsbezeichnungen.
- Ordnen Sie jede gemeinsame Farbe, Textfunktion und Warnung einer abgestimmten Definition zu.
- Testen Sie auf jeder Plattform Navigation, Artikelentfernung und Rückkehr zu einer unfertigen Angebotsanfrage.
- Dokumentieren Sie beabsichtigte Unterschiede, ungelöste Abweichungen und die Verantwortung für die nächste Änderung.