search home list

iOS 7 App Prototyping

Wie die Mondlandung im Jahr 1969 haben wir am 10. Juni dieses Jahres die Vorstellung von iOS 7 gespannt mitverfolgt, denn wir stecken gerade mitten im Konzeptionsprozess für eine iOS App, die dann unter dem neuen Betriebsystem laufen wird.

Schritt 1: Sketching

Da wir bis dahin nicht wussten, wie genau iOS 7 aussehen wird haben wir in der ersten Phase, beim Sketching, auf die alten iOS 6 Stile zurückgegriffen und in Omni Graffle die ersten Screens entworfen.

iOSApp Sketching Screenshot

Schritt 2: Prototyping

Die für dieses Thema interessantere Designphase war aber das Prototyping. Hierfür stehen einem für iOS Apps viele Möglichkeiten offen, beispielsweise mit dem Quartz Composer von Apple zu designen. Nach reiflichen Überlegungen haben wir uns dann aber dafür entschieden den Prototyp mit HTML, CSS und JavaScript zu entwickeln.

Grundlage für unseren Prototypen war das Framework Ratchet, das die notwendigsten UI Komponenten von iOS mitliefert. Auch mit im Paket ist ein JavaScript, das die einzelnen HTML Dateien miteinander verbindet und das auf solch elegante Weise, dass es sich anfühlt wie eine native App.

Für alle SASS Fans gibt es von Stephen Way eine Compass Version von Ratchet.

Da Ratchet natürlich noch im iOS 6 Stil geliefert wurde, mussten wir alle Komponenten an das Design von iOS7 anpassen. Dazu haben wir uns durch die neuen iOS Human Interface Guidelines und den iOS 7 Transition Guide (Verfügbar mit einem Apple Developer Account) gearbeitet. Zusätzlich dazu haben wir weitere Komponenten, die wir eigens für unsere App konzipiert hatten, und nicht Standard unter iOS sind, eingefügt. Im Zuge dieses Prozesse haben wir gleich vieles vom normalen Box Model auf Flexbox umgebaut. Zu den Erfahrungen mit Flexbox folgt demnächst ein eigener Blogbeitrag.

iOSApp Prototyp

Vorteile

  • Geschwindigkeit
    Da HTML & CSS zu unserem Alltag gehören, wie das Trinken von mindestens 3 Liter Wasser, waren wir beim Entwickeln sehr schnell. Im Vergleich dazu: Für den Quartz Composer hätten wir Komponenten, die nicht iOS Standard sind neu entwickeln müssen, was sehr viel Zeit in Anspruch genommen hätte. Hätten wir mit Wireframes weitergemacht, hätten wir jeden Wireframe einzeln an iOS7 anpassen müssen, was einen immensen Zeitaufwand bedeutet hätte.
  • Flexibilität
    Änderungen können sehr leicht und vor allem schnell durchgeführt werden, was ein riesiger Vorteil von einem Web-Prototyp ist.
  • Wiederverwendbarkeit
    Im Zuge dieses Projekts haben wir uns ein eigenes iOS7 Prototyping Framework entwickelt, das wir sicher auch für alle folgenden Projekte weiterverwenden werden.
  • Testing & Präsentation
    Mit so einem Prototyp können sehr gut Usertests durchgeführt und Präsentationen beim Kunden gemacht werden.

Nachteile

  • Caching
    Testen auf dem iPhone kann mitunter sehr mühsam sein, da man für JavaScript Dateien den Cache manuell löschen muss, was nur mit JailBreak möglich ist. Tauscht man Grafiken aus, werden diese auch erst neu geladen, wenn die Web-App gelöscht und neu hinzugefügt wird.

Fazit

Diese Form des Prototyping eignet sich hervorragend um einzelne UI Komponenten zu testen aber auch um ganze Szenarien damit abzubilden.

Show all articles

What do you think?