Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt

Heute geht es noch immer um das Design von Watch-Apps. Ich liebe Fallstudien, daher macht es mir nichts aus, mich drei Wochen hintereinander mit demselben Thema zu befassen. Geben Sie unten die Übersetzung ein.

Wallaby ist eine App für persönliche Finanzen, die Ihnen dabei helfen kann, beim Einkaufen an verschiedenen Orten die am besten geeignete Kreditkarte für die Zahlung auszuwählen, um Rabatte oder Punkte zu maximieren. Nach unserem Verständnis kommt es in der Realität jedoch häufig vor, dass viele Nutzer beim Bezahlvorgang vergessen oder zu faul sind, ihr Mobiltelefon herauszuholen, um die von Wallaby bereitgestellten Funktionen zu nutzen.

Wir hoffen, dass die Apple Watch-Version von Wallaby dieses Problem teilweise lösen kann. Tatsächlich haben wir zuvor bereits Versionen für Pebbel, Android Wear, Samsung Galaxy Gear und sogar Google Glass erstellt, sodass wir eine klare Vorstellung davon haben, welche Funktionen für tragbare Geräte besser geeignet sind.

Im Wesentlichen dreht sich beim Design von Wearables alles um den Kontext und die Effizienz der Mensch-Maschine-Interaktion. Einige wichtige Funktionen der Apple Watch, darunter die ultrakleine Bildschirmgröße, die Möglichkeit, sie immer am Handgelenk zu tragen und verschiedene Interaktionsmethoden, haben es uns ermöglicht, im Designprozess viel Neues zu lernen, darunter neue Designparadigmen und wie man neue Herausforderungen im UX-Design löst.

Navigation

Derzeit bietet die Apple Watch nur zwei Navigationsmodi: hierarchisch und seitenbasiert.

Die hierarchische Navigation eignet sich für Produkte mit komplexeren Funktionen und Daten. Wenn Sie schrittweise auf bestimmte Funktionen oder Inhalte zugreifen müssen, ist dieser Navigationsmodus offensichtlich am besten geeignet. Die seitenbasierte Navigation eignet sich besser für Produkte mit relativ einfachen Informationsmodellen und keiner direkten Datenverknüpfung zwischen verschiedenen Modulen.

Wir haben für Wallaby eine seitenbasierte Navigation verwendet. Aus Sicht der Informationsstruktur sind die einzelnen Funktionsmodule nicht stark miteinander verbunden und es gibt auch nicht zu viele hierarchische Inhalte, sodass sie nicht durch hierarchische Navigation organisiert werden müssen. Aus Sicht der Interaktion können Sie im Rahmen der Seitennavigation zwischen verschiedenen Funktionsmodulen wechseln, indem Sie nach links und rechts wischen. Im Modul „In der Nähe“ können Sie nach oben und unten wischen oder die Krone scrollen, um Kreditkarten anzuzeigen, die für nahe gelegene Einkaufsmöglichkeiten gelten. Die Effizienz der Mensch-Computer-Interaktion ist sehr hoch und es besteht keine Notwendigkeit, Benutzer zu zwingen, wie bei der hierarchischen Navigation genau auf eine winzige Schaltfläche zu klicken, um auf weitere Inhalte zuzugreifen. Insbesondere in den typischen Nutzungsszenarien von Wallaby – wenn der Benutzer steht und geht – ist der Unterschied im Interaktionsaufwand zwischen den beiden Navigationsmodi immer noch sehr deutlich.

benachrichtigen

Bei richtiger Konzeption kann Ihre App den Benutzern zur richtigen Zeit und am richtigen Ort die richtigen Benachrichtigungen übermitteln und Ihr Produkt hat das Potenzial, sich vom Mittelmaß zum Erfolg zu entwickeln – insbesondere bei Watch-Apps.

Die Uhr wird ständig am Handgelenk des Benutzers getragen und die Distanz zwischen Mensch und Maschine ist geringer als bei früheren Geräten. Sie müssen daher den Benachrichtigungsmechanismus einschränken, um sicherzustellen, dass nur die wichtigsten und kontextbezogensten Informationen gesendet werden. Diese müssen in der kürzestmöglichen Form dargestellt werden. Andernfalls kommt es zu ständigen und schwerwiegenden Störungen für die Benutzer, sodass diese gezwungen sind, die Benachrichtigungsinformationen Ihrer Produkte vollständig zu blockieren.

Wallaby beschränkt die Benachrichtigungen derzeit auf wichtige Ereignisse, etwa die Information der Benutzer, dass für eine bestimmte Karte heute ein Rabatt gewährt wird, sowie Informationen zu Rechnungen und Jahresgebühren. Da sich die Hardwarefunktionen der Uhr in Zukunft weiter verbessern, können wir den Standort des Benutzers genau ermitteln, ohne dass die Uhr und das iPhone zu viel Strom verbrauchen. Zu diesem Zeitpunkt können wir sofortige Benachrichtigungen senden, wenn der Benutzer ein Geschäft oder ein Einkaufszentrum betritt, und ihn darüber informieren, welche Kreditkarten für den dortigen Verbrauch geeignet sind, sodass Benutzer die für die aktuelle Situation und die Aktionsziele am besten geeigneten Informationen erhalten können, ohne selbst Abfragen initiieren zu müssen.

Komplexe Aufgaben

Komplexe Aufgaben mit zu vielen Eingaben und Einstellungen sind für ein Gerät wie die Watch aufgrund ihres extrem kleinen Bildschirms und der damit verbundenen schwierigen Bedienung grundsätzlich nicht geeignet.

Für diese Art von Funktionen ist die Bedienung über das iPhone sinnvoller. Um ein nahtloses Erlebnis über mehrere Geräte hinweg zu gewährleisten, haben wir die Handoff-Funktion von iOS genutzt.

Wenn Benutzer komplexere Aufgaben erledigen müssen, z. B. ein Konto erstellen, eine Autorisierung einholen, eine Verbindung zu Bankdaten herstellen usw., zeigen wir eine Meldung an, die den Benutzern mitteilt, dass der nächste Vorgang auf dem iPhone ausgeführt werden muss. Schaltet man das iPhone ein, wechselt die Oberfläche automatisch zum entsprechenden Vorgang und führt die auf der Watch unterbrochenen Schritte fort.

Animation

Erlesene und ausdrucksstarke Bewegungseffekte können das interaktive Erlebnis bereichern und die Freude am Produkt steigern. Normalerweise verwenden wir Framer, um interaktive Prototypen zu erstellen und verschiedene Eigenschaften von Animationen zu debuggen.

Es ist wichtig zu beachten, dass Sie sich beim Erstellen von Animationen für Watch-Apps nicht wie bisher darauf verlassen können, dass Entwickler diese per Code fertigstellen – die Animationen in Watch werden durch Bildsequenzen erstellt, Sie können den Entwicklern aber auch keine GIF-Animationen zum Einfügen in die Benutzeroberfläche vorlegen. Als Designer müssen Sie für jedes Einzelbild der Animation ein statisches Bild bereitstellen.

Am effizientesten ist es, die Animationsdatei in After Effects oder Photoshop zu importieren und anschließend die Bildsequenz zu exportieren. Hier ist eine kurze Beschreibung, wie wir es in Photoshop machen:

1. Öffnen Sie das GIF oder importieren Sie die MOV-Datei in Photoshop.

2. Passen Sie bei Bedarf die Bildrate der Animation an.

3. Wählen Sie „Datei – Exportieren – Video rendern“

4. Nehmen Sie Einstellungen wie z.B. die Benennung vor, sodass die Bildsequenz mit der Ordnungszahl „1“ beginnt. Nach dem Klicken auf die Schaltfläche „Rendern“ zerlegt Photoshop die Animation Bild für Bild und speichert sie als Bild im angegebenen Format.

5. Sie können Tools wie TinyPNG oder ImageOptim verwenden, um diese Bilder zu optimieren und sicherzustellen, dass die Dateigröße nicht zu groß wird.

Tun Sie den Entwicklern abschließend einen Gefallen und fügen Sie diesen Dateien das Suffix @2x hinzu. Wenn es zu viele Dateien sind, empfiehlt es sich, ein Tool wie Automator zu verwenden, um sie zu vervollständigen:

Öffnen Sie Automator und wählen Sie „Service“.

Ziehen Sie die Dateien hinein, die Sie umbenennen möchten.

Wählen Sie „Dateien und Ordner“ und doppelklicken Sie auf „Finder-Elemente umbenennen“. Daraufhin wird ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob Sie von jedem Bild eine Kopie hinzufügen möchten, um die ursprüngliche Dateibenennungsmethode zu schützen. Sie können sich dafür entscheiden, keine Kopie hinzuzufügen, indem Sie auf „Nicht hinzufügen“ klicken.

Wählen Sie „Text hinzufügen“ in der Dropdown-Liste, geben Sie „@2x“ ein und wählen Sie „nach Name“ als Einfügeposition.

Klicken Sie abschließend oben rechts auf die Schaltfläche „Ausführen“ und Sie sind fertig.

Zusammenfassung

Das Designen für die Apple Watch macht viel Spaß. Derzeit unterliegen wir tatsächlich vielen Einschränkungen beim Design. Aus einer anderen Perspektive erfordert dies jedoch auch, dass wir uns auf das Kernerlebnis konzentrieren, die grundlegendste und einfachste Schnittstelle und den einfachsten Interaktionsprozess erstellen und den kontextbezogensten Benachrichtigungsmechanismus basierend auf den Merkmalen unserer eigenen Produkte entwerfen. Wenn es sich um komplexere Funktionen handelt, sollten Sie zur Durchführung die Verwendung von Handoff mit dem iPhone in Betracht ziehen. Vergessen Sie außerdem nicht, an den entsprechenden Stellen sinnvolle Bewegungseffekte einzusetzen, um das interaktive Erlebnis des Produkts zu verbessern.