Wir entwerfen am Telefon, nicht in Figma

Wenn man sein sorgfältig entworfenes Figma-Mockup zum ersten Mal auf einem echten Telefon öffnet, ist man immer wieder überrascht.

Der Text ist kleiner, als du gedacht hast. Die Tippziele liegen näher beieinander, als du gedacht hast. Das gesamte Layout wirkt überladener als auf dem Monitor – denn auf dem Monitor hast du das Design isoliert betrachtet. Auf dem Smartphone siehst du es neben all den anderen Dingen, die deine Hand gerade tut.

Wir nutzen nach wie vor Design-Tools. Sie eignen sich gut dazu, Ideen schnell zu erarbeiten, Optionen zu vergleichen und die Einheitlichkeit der Komponenten zu gewährleisten. Was wir jedoch nicht tun, ist, sie als Ort zu betrachten, an dem ein Design genehmigt wird.

Unsere Regel

Keine Designentscheidung ist endgültig, bevor sie nicht mindestens 48 Stunden lang auf einem echten Smartphone getestet wurde. Nicht auf einem Simulator. Nicht als Spiegelbild auf einem Laptop. Ein Smartphone, in der Hand, bei Tageslicht, in einem dunklen Raum, in der U-Bahn, in der Hosentasche, während der Bildschirm aus- und wieder eingeschaltet ist.

Nach diesem Test ändern sich die meisten Entscheidungen. Die Schriftgröße wird erhöht. Die Abstände werden etwas großzügiger gestaltet. Aus dem eleganten, dünnen Strich wird ein 2-Pixel-Strich, da ein 1-Pixel-Strich an einer sonnigen Bushaltestelle nicht lesbar ist.

Wie wir Designs auf ein Gerät übertragen

Der schnellste Weg ist in der Regel eher eine grobe Umsetzung als ein ausgefeilter Prototyp. Ein Bildschirm mit echten Daten, echten Schriftarten und echtem Bildlauf sagt mehr aus als ein perfektes, anklickbares Mockup, da er sich so verhält, wie es die App später tun wird. Kleine Änderungen bauen wir einfach in eine Testversion ein und installieren diese noch am selben Tag auf unseren eigenen Smartphones.

Echte Daten sind genauso wichtig wie das eigentliche Gerät. Ein Modell mit drei übersichtlich benannten Einträgen sagt nichts darüber aus, was passiert, wenn jemand eine lange Liste, einen sehr langen Namen oder noch gar nichts hat. Deshalb testen wir mit unübersichtlichen Inhalten: eine Gästeliste mit Namen in verschiedenen Schriftarten, eine Reise mit einem Dutzend Zwischenstopps, ein Garten, in den über Monate hinweg Pflanzen hinzugefügt wurden.

Mehr als nur ein Telefon

Das gleiche Prinzip gilt auch für unsere anderen Plattformen. Windows-Apps werden auf einem gewöhnlichen Laptop-Bildschirm bei normaler Skalierung getestet, nicht nur auf einem großen externen Monitor. Browser-Erweiterungen werden in einer echten Symbolleiste getestet, wobei sich das Popup über echten Webseiten öffnet. iPhone-Apps, die auf einem Mac laufen, werden in einem in der Größe anpassbaren Fenster geprüft. Jede Oberfläche weist ihre eigene Variante der Diskrepanz zwischen Modell und Realität auf.

Was das Telefon Ihnen beibringt

Das lehrt einen Demut. Designs, die im Mockup-Tool raffiniert wirkten, sehen auf dem eigentlichen Gerät spärlich oder verwirrend aus. Gesten, die sich clever anfühlten, wirken umständlich, wenn man versucht, sie mit einer Hand auszuführen. Animationen, die auf einem Monitor mit hoher Bildwiederholfrequenz flüssig wirkten, sehen auf einem drei Jahre alten Android ruckelig aus.

Was wir falsch gemacht haben

Früher haben wir Mockups bis zur Perfektion ausgefeilt, bevor irgendetwas auf einem Gerät lief, und dann tagelang Entscheidungen verteidigt, die in der Praxis eindeutig nicht funktionierten. Durch diese Perfektion wirkten die Entwürfe endgültig, obwohl sie es gar nicht waren. Jetzt halten wir Mockups bewusst unausgereift und bringen sie so früh wie möglich auf ein Gerät, damit eine Änderung unserer Meinung nur geringe Kosten verursacht.

Der Nachteil dabei ist, dass frühe Versionen noch unfertig wirken, und es erfordert eine gewisse Disziplin, sie nicht nach ihrem Aussehen zu beurteilen. Aber ein Layout in der ersten Woche zu korrigieren, ist weitaus kostengünstiger, als es nach der Veröffentlichung zu überarbeiten.

Das ist keine schlechte Nachricht. Es ist einfach die reale Oberfläche, auf der Ihre Arbeit zum Leben erwacht. Je früher Ihr Entwurf auf diese Oberfläche trifft, desto besser wird das Endergebnis.