Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

Interface-Design für die Apple Watch: 6 Tipps für deine erste Smartwatch-App

    Interface-Design für die Apple Watch: 6 Tipps für deine erste Smartwatch-App

(Grafiken: Apple, Montage: t3n)

Noch steckt sie in den Kinderschuhe und doch wird die Apple Watch wohl ein neues Zeitalter einleiten, was die Usability von Apps und unsere Gewohnheiten in der Kommunikation angeht. Wie du dich schon jetzt für die ersten App-Designs der neuen Uhr vorbereitest und was du auf dem kleinen Bildschirm zu beachten hast, zeigen wir dir.

Die Apple Watch: Umdenken und neue Wege gehen

Ob Smartwatches wirklich Einzug in unseren Alltag halten werden, ist noch umstritten, aber letztendlich eine logische Schlussfolgerung der momentanen Entwicklung. Unser Auto funktioniert per Sprachsteuerung, wir kontrollieren unseren Stromverbrauch per App und wischen zum nächsten Fernsehprogramm per Gestensteuerung.

Die Apple Watch bietet die Möglichkeit, umzudenken und neue Wege zu gehen, was unseren alltäglichen Umgang mit Apps und die Kommunikation betrifft. Und egal, ob du nun ein Startup aus dem Boden stampfst oder bestehende iPhone-Apps für die intelligente Uhr weiterentwickelst: Es gibt einiges zu beachten.

Guidelines für die Apple Watch. (Screenshot: Apple)
Guidelines für die Apple Watch. (Screenshot: Apple)

1. Halte dich an die Guidelines

(Screenshot: Apple)
(Screenshot: Apple)

Neue Ideen bergen einen Zauber in sich, aber sie können dich auch schnell zur Verzweiflung bringen und dich viel Zeit kosten. Vor deinem ersten Brainstorming kannst du die Apple-Watch-Human-Interface-Guidelines außer Acht lassen, um Out of the Box ungestört Ideen zu entwickeln. Direkt danach solltest du dir die Richtlinien von Apple zur Gestaltung für die Smartwatch aber dringend zu Gemüte führen. Du lernst dadurch nicht nur, was Apple verbietet, sondern bekommst auch einen Einblick, welche neuen Funktionen die Apple Watch mitbringt.

2. KISS: Keep it stupid and simple

Das betrifft nicht nur das Design der App, sondern auch den Inhalt, der wiedergegeben wird. Egal ob sich der Nutzer deiner App für die 38- oder die 42-Millimeter-Variante der intelligenten Uhr aus Cupertino entschieden hat: Die zur Verfügung stehende Fläche für Inhalte und Gesten ist sehr klein und sollte nur mit dem Nötigsten befüllt werden.

Versuche nicht, möglichst viele Informationen auf einen Screen zu bekommen, sondern teile deine Inhalte zum Beispiel auf mehrere Screens intelligent auf, die per einfacher Swipe-Geste zu erreichen sind.

Fokussiere dich beim Gestalten auf die Funktionalität und den Mehrwert. (Screenshot: Apple)
Fokussiere dich beim Gestalten auf die Funktionalität und den Mehrwert. (Screenshot: Apple)

3. Die Steuerung muss grobmotorisch und intuitiv sein

Deine App wird nur dann genutzt, wenn sie Spaß macht und einen Mehrwert bietet. Eine intuitive Bedienung kann entscheidend für den Erfolg deiner App sein. Ein gutes Beispiel dafür ist Tinder. Es gibt unzählige Dating-Portale, aber es ist das einfache nach links und nach rechts Wischen, dass die Entscheidung für den passenden Partner spielerisch und leicht macht.

Apps wie die von SoundCloud oder Spotify haben das Finden und Abspielen von Musik perfektioniert. Durch einfaches nach links oder rechts Wischen springst du in der Playlist vorwärts oder rückwärts, nach unten wischen zeigt die Suche, nach oben wischen lässt dich die Lautstärke bestimmen.

4. Überrasche durch neue Funktionen: Nutze Force-Touch und Vibrationen

Die Apple Watch ist Neuland und selbst die Mitarbeiter im Apple-Store können dir zu vielen Fragen rund um die Smartwatch noch keine qualifizierte Antwort geben. Umso besser, wenn du schon beim Design und der Konzeption auf die Nutzung der neuen Features achtest und Wert darauf legst.

Ein neues Feature ist zum Beispiel Force-Touch. Die Apple Watch merkt nicht mehr nur, dass du auf das Display drückst, sie analysiert auch, wie stark. Das bietet dir die Möglichkeit, eine Art Schnellnavigation vorzusehen, über die der Nutzer die wichtigsten drei Funktionen zum Beispiel jederzeit abrufen kann.

Du entwickelst eine App, die von Hinweisen und Interaktion lebt? Dann versuch, die leichten Vibrationen der Smartwatch zu nutzen, um auf deine App aufmerksam zu machen.

5. Halte das Datenvolumen gering

Schon im Designprozess solltest du darauf achten, keine Informationen einzubauen, die zu viel Ladezeit beanspruchen. Die Apple Watch hat selbst keinen Internetzugriff, sondern verbindet sich über Bluetooth mit deinem iPhone. Wer die Apple Watch schon mal genutzt hat, weiß, wie lang eine Server-Anfrage dauern kann.

Auch hier gilt: Weniger ist mehr. Nutze schlanke Grafiken und gib nur die wirklich wichtigen Informationen wieder.

6. Gestalte die Eingabe einfach

Kurze Wörter sind ein Gewinn für eine simple Bedienbarkeit der App. (Screenshot: Apple)
Kurze Wörter sind ein Gewinn für eine simple Bedienbarkeit der App. (Screenshot: Apple)

Die Apple Watch bietet keine klassische Eingabefunktion für Text per Tastatur. Der Input erfolgt also entweder per Sprachsteuerung oder über Buttons. Aufgrund der langsamen Verbindung zu Siri und der Tatsache, dass man nicht unbedingt in der Öffentlichkeit mit seiner Uhr sprechen will, macht die letztere Variante zur komfortableren Lösung.

Aufgrund des kleinen Displays von 272 x 340 Pixeln oder 312 x 390 Pixeln solltest du für eine einfache Interaktion auch einfache Entscheidungsgrundlagen bieten. Ja. Nein. Play. Pause. Hinzufügen. Löschen. Kurze Wörter sind hier definitiv ein Gewinn für eine simple Bedienbarkeit der App.

Eine alternative und oft bessere Lösung dafür sind Icons. Klein, im besten Fall eindeutig und international zu verstehen, ist die Bedienung über mit Icons belegten Buttons die eleganteste Lösung, um durch die App zu navigieren.

So startest du dein erstes Apple-Watch-App-Design

In den Apple-Watch-Human-Interface-Guidelines findest du neben nützlichen Tipps zum Format und der User-Experience auch Template-Vorlagen für Photoshop und sogar Sketch, das in Sachen App-Design aufgrund seiner einfachen Bedienbarkeit immer mehr Anhänger findet.

Wenn du in Photoshop gestalten willst, bist du mit der Apple-Watch-GUI-PSD von Pek Pongpaet gut bedient. Dort findest du eine Übersicht der gängigsten Formatvorlagen und Use-Cases, die definitiv für die Gestaltung und Funktionalität von Nutzen sein können.

Wenn du in Photoshop gestalten willst, bist du mit der Apple-Watch-GUI-PSD von Pek Pongpaet gut bedient.
Wenn du in Photoshop gestalten willst, bist du mit der Apple-Watch-GUI-PSD von Pek Pongpaet gut bedient.

Falls du lieber direkt im Device layoutest, bietet sich eine Vorlage an, die einen Teil der Uhr zeigt, um den finalen Look & Feel vor Augen zu haben. Das Apple-Watch-Template von Medialot ist eine simple, aber schöne Grundlage zum Gestalten und für die Präsentation beim Kunden, die nahezu alle Variationen der Apple Watch aufzeigt.

Du hast es wahrscheinlich schon mitbekommen: Vektor ist King und Sketch ist langsam, aber sich auf dem Vormarsch. Der Vorteil ist neben den schnellen Ladezeiten die maximale Schärfe, welche die Vektor-Elemente unendlich skalierbar machen. Somit ist auch die aktuell beste Vorlage für deine nächste Apple-Watch-App die „Apple Watch GUI Kit .sketch resource“ von Jan Losert.

Jan war nicht nur so nett, dieses Kit kostenlos zur Verfügung zu stellen, sondern hat auch noch das Pendant in Photoshop dazu gestaltet. Aufgrund der vielen Downloads und des Erfolgs dieses Kits wurde es schon geupdated und enthält jetzt über 40 Screens, die alle den Apple-Watch-Typeface-Guidelines entsprechen. Definitiv eine Vorlage, die dir viel Arbeit abnimmt und deinen Start mit der Apple Watch ebnen.

Und welche App wollt ihr auf Apples Smartwatch bringen?

Finde einen Job, den du liebst zum Thema iOS, Android

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen