Der 4-Pixel Rhythmus im iOS: Eine neue Maßeinheit zur Interface-Gestaltung

iPhone-Entwickler die derzeit an ihren Benutzeroberflächen schrauben, haben, vor allem wenn es um die Gestaltung der Eingabe-Elemente geht, vor allem eine Zahl im Hinterkopf: Den 44-Pixel Block.

Folgt man Apples „Human Interface Guidelines“ (PDF), sollten alle Knöpfe, Schieberegler, Buttons und Auswahl-Elemente mindestens 44px x 44px messen, um so ein komfortables Antippen des ausgewählten Blocks zu ermöglichen. Kleinere Knöpfe lassen sich mit dem Zeigefinger nur unzureichend treffen, größere wirken wie ein Schluckauf im sonst so einheitlichen Erscheinungsbild der meisten iPhone-Anwendungen.

iOS-Entwickler Aen Tan hat sich der 44px-Logik jetzt in dem ausführlichen Essay „New Visual Proportions for the iOS User Interface“ angenommen und kritisiert das bislang wenig hinterfragte UI-Modell scharf.

Entwickler die Apples 44-Pixel-Schema implementieren, würden zu oft auf Kompromisse bei der Interface-Gestaltung setzen. Anstatt ihre Bildschirme aus kleineren Teilmengen des Daumen-großen Abstands aufzubauen, kommt üblicherweise die 20px hohe Statusbar zum Einsatz, 29px große Button zur Navigation und 49px hohe Tab-Bar-Elemente wie etwa in der Musik-Applikation würden regelmäßig verbaut.

Eine Unsitte, gegen die Aen Tan mit dem 4-Pixel Rhythmus nun das passende Rezept gefunden zu haben scheint. Gliedert man das iPhone interface in kleine Blöcke von 4px x 4px lassen sich die Bedienelemente auf dem ganzen iPhone-Bildschirm in Gruppen von 4, 8, 16 und 32 Pixeln Höhe anlegen.

So you see as Apple added more and more fea­tures with­out recon­sid­er­ing the lay­out, the visual integrity barely holds itself together with com­pro­mises and arbi­trari­ness. […] I recently exper­i­mented with an alter­nate approach in design­ing the UI for Lik­ables for iPhone, with a 4-pixel rhythm. No major no minor. Just 4 pix­els as a basic inter­val unit. […] The beauty of using a 4-pixel rhythm is that lit­tle change is needed to mod­ify cur­rent native ele­ments into the new pro­por­tions. The sta­tus bar can remain as 20-pixel tall. The height of but­tons can be bumped from 30 to 32 pix­els. The tab bar can drop a pixel to 48-pixels tall. The nav­i­ga­tion bar with prompt can be 72-pixels tall instead of 74.

Ein ausgesprochener Lese-Tipp.