iPhone Interface-Design

Read The Manual

Planung und Design von iPhone Apps

• Product Definition Statement

• Beschreibt die Anwendung kurz und prägnant

  • Alleinstellungsmerkmale
  • Lösungen, Features
  • Zielgruppe

• Empfehlung: Anwendung vor der Implementierung komplett mit allen Interaktionen auf Papier skizzieren.

• Photoshop Stencil: http://www.teehanlax.com/blog/?p=1628

• OmniGraffle Stencils: http://iphonedevelopertips.com/design/omnigraffle-iphone-stencil.html

Navigationselemente korrekt verwenden

Navigation Bar I

Navigation Bar II

• Aufbau der Screens über Animationen von links nach rechts, vom Allgemeinen ins Spezifische.
• Titel sollten kurz und prägnant sein, da sie dem Benutzer bei der Navigation (insbesondere bei Zurück) als Orientierung dienen.
• Icons sind 20 x 20 Pixel groß.

Toolbar

• Toolbar-Items sind Aktionen, die sich unmittelbar auf das aktuell sichtbare View beziehen.
• Darf nicht als Tab Bar verwendet werden, d.h. nicht zwischen verschiedenen Views umschalten.
• Icons sind 20 x 20 Pixel groß.

Tab Bar

• Funktionieren wie “Schubladen”, Umschalten zwischen unterschiedlichen Bereichen der Anwendung, die separat voneinander sind.
• Bei mehr als fünf Einträgen erscheint ein “Mehr”-Button, und der Benutzer hat die Möglichkeit, die angezeigten Tabs zu konfigurieren.
• Kann Badges (Zahlen) zeigen, um Änderungen in einem Tab zu signalisieren.
• Icons sind 30 x 30 Pixel groß.

Arten von Anwendungen

Design für das iPhone: Touch-Bedienung

• Verglichen mit Mausbedienung sehr direkt und natürlich.
• Touch ist unpräzise - interaktive Elemente sollten mindestens 44x44 Pixel groß sein.
• Passen Gesten für die Bedienung der Anwendungen? (single/double tap, drag, touch and hold, flick/schnippen, swipe, pinch open/close, shake).
• Finger verdecken Teile der GUI - wichtige Information in der oberen Bildschirmhälfte platzieren.

Design für das iPhone: Keep it simple

• Nur eine Anwendung und ein Fenster pro Anwendung gleichzeitig.

• Fokus auf das Wichtigste - wenig interaktive Elemente gleichzeitig, Texte kurz halten.

• Benutzer möchte schnell Ergebnisse

  • Wenn möglich auf Texteingabe verzichten und stattdessen Auswahl aus mehreren Optionen anbieten.
  • Modalität vermeiden, Texteingaben bis zum Ende verzögern.
  • Dem Benutzer das Erforschen der Anwendung erlauben und keine bestimmte Reihenfolge aufzwängen.

Design für das iPhone: Look & Feel

• Abgesehen von immersiven Anwendungen empfiehlt sich die Verwendung von UIKit-Controls (müssen nicht erst erlernt werden).

• Optische Gestaltung, Animationen und Sound können die Anwendung erklären und dem Anwender sehr intuitiv Feedback geben

  • Texturen, Schattierungen, Lichteffekte (z.B. abrundete Ecken, Farbverlauf, Gloss-Effekt = Button)
  • Springendes Mail-Icon beim Verschieben von Mails
  • Sound beim Entsperren, Kamera, etc.

Design für das iPhone: Reagieren auf Unterbrechungen

• Eine iPhone-Anwendung kann jederzeit unterbrochen werden, zum Beispiel durch einen Anruf: Beim Beenden aktuellen Zustand sichern und beim nächsten Start wieder herstellen.
• Datendienste können unterbrochen werden oder gar nicht erst vorhanden sein (Flugmodus), ebenso ist die momentane Position des Geräts nicht immer verfügbar: Entsprechend mit Fallback reagieren oder den Benutzer informieren.
• Eine Anwendung sollte sich nur im äußersten Notfall selbst beenden.

Design für das iPhone: Einstellungen

• Einstellungen nur sehr sparsam einsetzen, möglichst nur einmalige Konfiguration (z.B. Anschrift einmal erfassen wenn sie zum ersten mal benötigt wird).
• Voreinstellungen sollten so gehalten sein, dass 80% der Benutzer keine Anpassung vornehmen müssen.
• Den Anwender kennenlernen: Präferenzen automatisch erkennen und speichern (z.B. letzter Aufenthaltsort, letzte Suchabfragen).

Rotierbare Views

• UIViewController kann das verwaltete UIView automatisch rotieren:

  @implementation SomeUIViewController
  
  - (BOOL) shouldAutorotateToInterfaceOrientation:
              (UIInterfaceOrientation)interfaceOrientation {
      return YES;
  }
  
  // ...

• View muss im Interface Builder oder programmatisch über autoresizingMask bzw. layoutSubviews entsprechend skalierbar gestaltet werden.