Wenn man sein sorgf\u00e4ltig entworfenes Figma-Mockup zum ersten Mal auf einem echten Telefon \u00f6ffnet, ist man immer wieder \u00fcberrascht.<\/p>\n
Der Text ist kleiner, als du gedacht hast. Die Tippziele liegen n\u00e4her beieinander, als du gedacht hast. Das gesamte Layout wirkt \u00fcberladener als auf dem Monitor \u2013 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.<\/p>\n
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\u00e4hrleisten. Was wir jedoch nicht tun, ist, sie als Ort zu betrachten, an dem ein Design genehmigt wird.<\/p>\n
Keine Designentscheidung ist endg\u00fcltig, 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\u00e4hrend der Bildschirm aus- und wieder eingeschaltet ist.<\/p>\n
Nach diesem Test \u00e4ndern sich die meisten Entscheidungen. Die Schriftgr\u00f6\u00dfe wird erh\u00f6ht. Die Abst\u00e4nde werden etwas gro\u00dfz\u00fcgiger gestaltet. Aus dem eleganten, d\u00fcnnen Strich wird ein 2-Pixel-Strich, da ein 1-Pixel-Strich an einer sonnigen Bushaltestelle nicht lesbar ist.<\/p>\n
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\u00e4lt, wie es die App sp\u00e4ter tun wird. Kleine \u00c4nderungen bauen wir einfach in eine Testversion ein und installieren diese noch am selben Tag auf unseren eigenen Smartphones.<\/p>\n
Echte Daten sind genauso wichtig wie das eigentliche Ger\u00e4t. Ein Modell mit drei \u00fcbersichtlich benannten Eintr\u00e4gen sagt nichts dar\u00fcber aus, was passiert, wenn jemand eine lange Liste, einen sehr langen Namen oder noch gar nichts hat. Deshalb testen wir mit un\u00fcbersichtlichen Inhalten: eine G\u00e4steliste mit Namen in verschiedenen Schriftarten, eine Reise mit einem Dutzend Zwischenstopps, ein Garten, in den \u00fcber Monate hinweg Pflanzen hinzugef\u00fcgt wurden.<\/p>\n
Das gleiche Prinzip gilt auch f\u00fcr unsere anderen Plattformen. Windows-Apps werden auf einem gew\u00f6hnlichen Laptop-Bildschirm bei normaler Skalierung getestet, nicht nur auf einem gro\u00dfen externen Monitor. Browser-Erweiterungen werden in einer echten Symbolleiste getestet, wobei sich das Popup \u00fcber echten Webseiten \u00f6ffnet. iPhone-Apps, die auf einem Mac laufen, werden in einem in der Gr\u00f6\u00dfe anpassbaren Fenster gepr\u00fcft. Jede Oberfl\u00e4che weist ihre eigene Variante der Diskrepanz zwischen Modell und Realit\u00e4t auf.<\/p>\n
Das lehrt einen Demut. Designs, die im Mockup-Tool raffiniert wirkten, sehen auf dem eigentlichen Ger\u00e4t sp\u00e4rlich oder verwirrend aus. Gesten, die sich clever anf\u00fchlten, wirken umst\u00e4ndlich, wenn man versucht, sie mit einer Hand auszuf\u00fchren. Animationen, die auf einem Monitor mit hoher Bildwiederholfrequenz fl\u00fcssig wirkten, sehen auf einem drei Jahre alten Android ruckelig aus.<\/p>\n
Fr\u00fcher haben wir Mockups bis zur Perfektion ausgefeilt, bevor irgendetwas auf einem Ger\u00e4t lief, und dann tagelang Entscheidungen verteidigt, die in der Praxis eindeutig nicht funktionierten. Durch diese Perfektion wirkten die Entw\u00fcrfe endg\u00fcltig, obwohl sie es gar nicht waren. Jetzt halten wir Mockups bewusst unausgereift und bringen sie so fr\u00fch wie m\u00f6glich auf ein Ger\u00e4t, damit eine \u00c4nderung unserer Meinung nur geringe Kosten verursacht.<\/p>\n
Der Nachteil dabei ist, dass fr\u00fche 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\u00fcnstiger, als es nach der Ver\u00f6ffentlichung zu \u00fcberarbeiten.<\/p>\n
Das ist keine schlechte Nachricht. Es ist einfach die reale Oberfl\u00e4che, auf der Ihre Arbeit zum Leben erwacht. Je fr\u00fcher Ihr Entwurf auf diese Oberfl\u00e4che trifft, desto besser wird das Endergebnis.<\/p>","protected":false},"excerpt":{"rendered":"
Figma makes things look good on a 27-inch monitor. Phones are not 27-inch monitors. Here’s what actually happens when you test on a real device.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-449","post","type-post","status-publish","format-standard","hentry","category-journal"],"yoast_head":"\n