iPhone-Apps gestalten – Erfahrungsbericht mit Tipps & Tricks

Wenn ich vor zwei Jahren jemandem erzählt hätte, dass ich beruflich iPhone Apps gestalte, hätte ich wahrscheinlich eine Gegenfrage wie „Hää? Was tust Du?“ geerntet. Heute bekomme ich eher ein „Cool, wie geht denn das?“ als Reaktion. Tja, eine kleine Frage, auf die es leider keine kurze Antwort gibt. Beginnen wir also in der Stunde Null.


GRAFIK: GrandCentrix

Als ich zum ersten Mal ein iPhone in der Hand hielt, fand ich das Ding einfach nur beeindruckend. Toll. Super. Fantastisch. Als ich kurz danach zum ersten Mal eine iPhone App gestalten sollte, war es für mich gar nicht mehr so super. Auf den ersten Blick war dieses kleine Gerät für mich als Designer eine einzige große Einschränkung. Es gibt keine Tastatur, keine Maus, keinen Joystick oder sonstige Peripherie an diesem kleinen Telefon. Nur einen kleinen Bildschirm, der fast den kompletten verfügbaren Raum einnimmt. Die gesamte Bedienung erfolgt also über die Berührung dieses Touchscreens. Ich wusste nicht so recht, wo ich anfangen sollte. Eine Anwendung zu entwickeln, die in dieser ungewohnten Umgebung funktioniert, stellte mich vor viele unerwartete Herausforderungen. Einige davon machten mir anfangs schwer zu schaffen. Andere wiederum erwiesen sich mit der Zeit als weniger kompliziert, als ich zuerst dachte. Diesen Lernprozess will ich für Sie ein wenig abkürzen. Denn eigentlich ist es nicht schwer, eine iPhone App zu gestalten, wenn man es richtig macht.

Besonderheiten von iPhone-Apps

Apps auf dem iPhone sind einfache und unkomplizierte Anwendungen. Sie sind darauf ausgerichtet, ein Problem zu lösen oder ein Ziel zu erreichen. Überladene oder multifunktionale Apps gibt es kaum, und wenn doch, sind sie selten erfolgreich. Mit Recht, wie ich finde. Das iPhone ist zu allererst immer noch ein Handy. Es wird meist benutzt, während man unterwegs ist oder gerade keinen ausgewachsenen Desktop-Computer zur Verfügung hat. Der Benutzer hat in der Regel wenig Zeit, Konzentration und Geduld.

Über 80 Prozent werden nur einmal gestartet

Verständlicherweise kann und will er sich nicht erst in eine komplexe Navigationen hineinfinden oder eine seitenlange Anleitung lesen, um sein Ziel zu erreichen. Er erwartet schlicht und einfach, dass die Anwendung funktioniert, ohne dass er kostbare Zeit oder Energie investieren muss. Der Konkurrenzkampf ist hart, die Alternativen günstig und schnell erreichbar. Über 80 Prozent der Apps werden nur einmal gestartet, danach nie wieder.

Für uns Designer bietet das iPhone einiges, was unser Herz vor Freude den Moonwalk machen lässt. Die Auflösung, der Farbenreichtum und der gute Kontrast des Bildschirms sind schlicht wundervoll. Das atemberaubende Retina Display des iPhone 4 ist hier abermals ein Sprung nach vorn. Die Ästhetik des systemeigenen User Interfaces bietet eine Umgebung, in der Gestaltung leicht fällt und Spaß macht. Die Bedienung per Touchscreen ist ein Feature, dem mit Sicherheit die Zukunft gehört. Auf keinem anderen mir bekannten Gerät wurde sie so konsequent und elegant umgesetzt.

Apple bietet außerdem einen gut ausgestatteten Entwickler-Bereich an. Dort finden Sie, neben vielen weiteren Dokumentationen, die iPhone Human Interface Guidelines, in denen Sie viele wertvolle Hilfestellungen finden werden. Dort werden auch die Rahmenbedingungen für Ihr Design ziemlich klar abgesteckt. Diese sollten Sie so gut es geht berücksichtigen. Anderernfalls könnte es passieren, dass Sie im App Store Review abgelehnt werden. Das wäre ärgerlich.

Der TouchScreen

Die Bedienung über einen Touchscreen hat viele bemerkenswerte Vorteile, jedoch auch einige Nachteile. Direkt auf den gewünschten Gegenstand drücken zu können, um eine Reaktion zu erhalten, ist für uns ein natürlicher und logischer Vorgang, der keiner weiteren Erklärung bedarf. Die Lernkurve ist deshalb ungewöhnlich steil, auch für Menschen mit geringer Computer-Erfahrung. Diese sehr intuitive Art der Bedienung minimiert die Fehlerquote in der Bedienung drastisch. Insgesamt bietet sie einen sehr hohen Benutzerkomfort und eine hervorragende User Experience.

Aber natürlich gibt es auch ein paar Nachteile, die Sie im Hinterkopf behalten sollten. Bedingt durch die Größe unserer Finger, ist die Eingabe oft unpräzise. Lange Phasen der Bedienung wirken schnell ermüdend. Darüber hinaus verdecken wir uns oft selbst die Sicht mit unserer Hand.

Praxis-Tipps

  1. Planen Sie also eine Mindestgröße für die Objekte ein, mit denen die User interagieren. Als Faustregel gilt hier 44px x 22px mit einem Abstand von 12px zum nächsten Touch-Element.
  2. Vermeiden Sie außerdem die Eingabe von umfangreichen Daten.
  3. Verwenden Sie auswählbare Optionen, wo immer es möglich ist.

Mit diesen drei Tipps vermeiden Sie schon einige der gröbsten Usability-Fehler.

Das User Interface

Beim User Interface hat Apple ganze Arbeit geleistet. Die Entwickler haben ein brillantes Navigations- und Interaktionskonzept entworfen. Es bietet die Möglichkeit, tief in hierarchische Strukturen einzutauchen, ohne diese als solche wahrzunehmen. Informationen lassen sich einfach hinzufügen, entfernen oder ändern, ohne die kontextuelle Orientierung zu verlieren.

Das mag trivial erscheinen, aber das ist es ganz und gar nicht. Schließlich bedienen wir einen kleinen Computer mitsamt seines komplexen Betriebsystems und abstrakten Verzeichnisstrukturen. Das macht zwar die Computer nicht menschlicher, aber es erlaubt uns, etwas mehr Mensch sein zu können, während wir an ihnen arbeiten. Alle diese vorgegebenen User Interface Elemente stehen Ihnen beim Gestalten der App zur Verfügung.

Praxis-Tipp: Greifen Sie auf diese Elemente zu, wo auch immer es möglich ist. Damit lassen sich viele Probleme und Missverständnisse à la: „Verhält sich das Objekt so, wie es der User von ihm erwarten wird?“, vermeiden.

Die Werkzeuge

Zunächst benötigen Sie ein iPhone oder einen iPod Touch. Außerdem einen Intel-basierten Mac mit mindestens OS X 10.5.5. Anschließend können Sie sich das kostenlose iPhone SDK herunterladen (Link), das Apples Entwicklungsumgebung Xcode beinhaltet. Um Ihre App am Ende in den AppStore zur Prüfung einzureichen, müssen Sie noch an Apples iPhone Developer Programm teilnehmen, was einmalig 99 US Dollar kostet. Ansonsten brauchen Sie nur Photoshop, Papier und Bleistift.

Planung

Jetzt wird’s ernst: Eine gute Planung spart in der Entwicklungsphase viel Zeit und Ärger. Dieser Part wird in seiner Wichtigkeit immer wieder unterschätzt. Machen Sie bitte nicht denselben Fehler. Nehmen Sie sich die Zeit, die Sie brauchen, um ein tragfähiges Konzept Ihrer App zu entwerfen und anschließend zu prüfen.

Über diese elementaren Fragen sollten Sie sorgfältig nachdenken und die nötigen Informationen dazu einholen:

  • Welches Problem soll unsere App lösen? Welchen Mehrwert können wir anbieten?
  • Welche Zielgruppe wollen wir ansprechen? Und was erwartet diese von Ihrer App?
  • Wer ist unsere Konkurrenz? Was macht diese besonders gut? Was müssen wir besser lösen?
  • Was hebt uns von unserer Konkurrenz ab? Was macht uns unverwechselbar?

Die ersten MockUps

Nachdem nun grundlegend klar sein sollte, wohin die Reise geht, erstellen wir die ersten MockUps. Ob Sie diese am Computer oder lieber auf dem guten alten Papier (hier gibt es auch vorgefertigte Stencil Kits, siehe Ressourcen) erstellen, spielt keine Rolle. Ich persönlich bevorzuge mittlerweile OmniGraffle. Worauf Sie lieber arbeiten, bleibt Ihnen überlassen. Hauptsache, Sie skizzieren grob jeden verfügbaren Screen Ihrer App. Gehen Sie dabei nicht zu sehr ins Detail. Die grafischen Feinheiten kommen erst später, jetzt geht’s nur ums Gerüst. Eine grobe Darstellung des Contents und der Navigation reicht völlig aus, um einen guten Überblick zu erhalten und Probleme frühzeitig zu erkennen.

Praxis-Tipp: Achten Sie unbedingt auf die verschiedenen Interaktions-Pfade, die Ihre User benutzen werden. Wie man von A nach B kommt (und zurück!), ist für die User Experience essentiell. Brüche oder Hindernisse im Use Flow lassen sich so frühzeitig entdecken und vermeiden. Versuchen Sie auch, überflüssige Informationen zu entfernen und beschränken Sie sich auf wirklich relevante. Hier können Sie ruhig experimentieren und ausprobieren, um das für Sie Passende zu finden.

Gängige Konzepte

Anschließend noch ein paar Infos zu den drei gängigsten Konzepten:

Die Tab Bar

Der vermutlich häufigste Ansatz, die Information und Navigation anzuordnen, läuft über den Tab Bar Controller. Am unteren Rand des Screens wird hierbei eine fixe Navigationsleiste eingeblendet, auf der dann bis zu fünf Symbole (oft auch mit Text) Platz finden. Dies ist besonders empfehlenswert, wenn Ihre App über mehrere Bereiche verfügt, die getrennt angezeigt werden sollen.

Mit diesem Konzept kann man eigentlich nicht viel falsch machen. Es ist übersichtlich, schnell und die User sind damit vertraut. Nachteilig ist hier die Begrenzung auf fünf Elemente. Ein gutes Beispiel hierfür ist die App von Twitter.

Single Main View

Bei diesem Modell wird die Information in einzelnen, fixen Blöcken dargestellt, die durch horizontales Scrollen navigiert werden. Das Design ist durchgängig und starr. Der Vorteil ist, dass Sie hier eine Vielzahl von Blöcken anzeigen können.

Gut geeignet für eine große Menge ähnlich aufgebauter Informationen. Der User navigiert auf sehr natürliche Art und Weise durch die Information. Allerdings gibt es hier keinen direkten Weg von Block zwei zu Block vier, was zusätzlichen Aufwand erfordert. Gutes Beispiel hier: Die App von ESPN.

Die Table View

Hier wird die Navigation als bildschirmfüllende und scrollbare Liste angezeigt. Dies ist eine simple und einfach verständliche Art der Navigation, mit der die User ebenfalls keine Probleme haben werden.

Vorteil: Durch Gruppierung und Sortierung lässt sich leicht eine Ordnung herstellen und vermitteln.

Nachteil: Dafür gibt es innerhalb der Option A aber auch keinen direkten Weg zu Option B, was wiederum zusätzlichen Aufwand für den User bedeutet, wenn er die Informationen nur scannen will.

Geeignet für: Sehr umfangreiche Informationen.

Vorbildlich: Things von Culture Code.

Sie können selbstverständlich auch mehrere verschiedene Konzept in Ihrer App einsetzen, falls das nötig sein sollte. Falls Sie das Bedürfnis verspüren, einen ganz eigenen Weg zu gehen, hier ein kurzer Überblick über die Möglichkeiten.

Das Custom Design

Die gerade besprochenen Konzepte sind sozusagen die von Apple vorgesehenen Standardmodelle. Daran ist nichts Falsches. Diese Modelle haben sich bewährt und erlauben es den Usern, auf bereits erworbenes Wissen zurückzugreifen. Sie sollten, wann immer möglich, auf eines oder mehrere dieser Konzepte zurückgreifen.

Natürlich gibt es auch Anforderungen, die über das hinausgehen, was mit diesen Standards möglich ist. Eines der bekanntesten und auch beeindruckendsten Beispiele sind die beiden Apps Weightbot und Convertbot von Tapbots. Beide haben ein von Grund auf neu entwickeltes User Interface, das genau auf deren Anforderungen zugeschnitten ist. Außerdem sind die beiden ein gutes Beispiel für eine beliebte Variante des Custom Designs, das sogenannte Metaphor-Design, auch Pseudo-Realism genannt.

Metaphore-Design

Dieser Ansatz versucht, bekannte Bedienkonzepte aus der realen Welt zu imitieren. Das hat den Vorteil, dass User sich schneller innerhalb der Anwendung zurechtfinden, wenn sie ihre Erfahrung aus der realen Welt darauf übertragen können. Das kann allerdings auch schnell zum Nachteil werden, wenn dieser Use Flow Brüche aufweist. Dann ist der Benutzer nicht nur verwirrt, sondern auch sein Vertrauen in diese Metapher wird erschüttert. Schließlich wurde er gerade von ihr hinters Licht geführt. Diesen Umstand sollten Sie also vermeiden.

Metaphor-Designs haben darüber hinaus auch oft das Pech, dass ihre Designer angesichts des Vergleichs mit der realen Welt etwas übermotiviert zu Werke gehen. Viele dieser Apps leiden unter oppulentem grafischem Wildwuchs. Das ist zwar mal schön anzuschauen, danach beginnt es jedoch, zu nerven. Schade um die gute Arbeit. Ausführlicheres zu diesem Thema finden Sie auch in den Human Interface Guidelines von Apple.

Entwicklung

Ihre Planung ist nun abgeschlossen. Jetzt geht’s an die Entwicklung und Produktion. Für Sie wird das viel Arbeit in Photoshop bedeuten (Grafiken erstellen, zuschneiden und anpassen und so weiter). Aber es lohnt sich. Ab hier kann ich Ihnen leider nicht mehr viel helfen. Nun brauchen Sie einen fähigen Objective-C-Entwickler, der Ihre Konzepte und Designs in Code gießt. Meiner Erfahrung nach werden Sie einige Zeit miteinander verbringen, also sollte es jemand sein, der Sie versteht und Respekt vor Ihrer Arbeit hat. Sonst macht das keinen Spaß. Nehmen Sie sich Zeit, die passende Person auszuwählen. Ich wünsche Ihnen viel Erfolg und gutes Gelingen.

Informationsquellen zur Bedienung per TouchScreen:

Ressourcen zum Wireframen:

(mm),

Ich bin ein Art-Director, UI-Designer und Frontend-Entwickler aus München, mit Vorlieben für InterfaceDesign, Usability und Web Standards. Privat bevorzuge ich die Ruhe und Abgeschiedenheit des Landlebens, zusammen mit meiner wundervollen Frau und unseren beiden Kindern. Twitter.

Sortiert nach:   neueste | älteste | beste Bewertung
mr92
Gast
6 Jahre 7 Tage her

ERSTER! Zum ersten mal in meinem Leben :p

Der Artikel ist schön! Schön schockierend! Nein der ist super, aber dass echt 80% nur einmal gestartet werden finde ich schon krass. So richtig traue ich mich nicht an die iPhone App Entwicklung

trackback

[…] iPhone-Apps gestalten – Erfahrungsbericht mit Tipps & Tricks Tipps zur Entwicklung von iPhone-Apps […]

trackback

[…] iPhone-Apps gestalten – Erfahrungsbericht mit Tipps & Tricks | | Dr. Web Magazin (tags: apps) […]

trackback

[…] – iPhone-Apps gestalten – Erfahrungsbericht mit Tipps &Tricks Lesenswerter Beitrag eines Entwicklers. Schlagworte (Tags): programmieren apps, […]

trackback

[…] iPhone-Apps gestalten – Erfahrungsbericht mit Tipps &TricksLesenswerter Beitrag eines Entwicklers.(Tags: programmieren apps, iPhone,) […]

Torsten
Gast
6 Jahre 3 Tage her

Interessant wäre es auch zu wissen wie der Prozeß von der Einreichung bis zur Veröffentlichung im Appstore ist. Gibt es da eine Statusmeldung? Wird man informiert, wenn die App für den Appstore freigeschalten ist. Wie ist der Statistikbereich für die eigenen Apps, was kann man sehen? (Zahl der Downloads, Zahl der abgebrochenen Downloads, etc).

mr92
Gast
6 Jahre 2 Tage her

Hi! Bei der Kontrolle des Apps durch Apple wirst du durchgehend informiert, allerdings nur solange du selbst die Initative zeigst und nachfragst. Die Statistiken sind ebenfalls einsehbar. Was meinst du mit „Zahl der abgebrochenen Downloads“?

Hänfling
Gast
6 Jahre 1 Tag her

Mit „Zahl der abgebrochenen Downloads“ ist wahrscheinlich gemeint, wie hoch die Anzahl ist, wenn man sich dazu entschieden hat einen App runterzuladen, aber im letzten Moment dann doch noch einen Rückzieher macht. Den Download also umgeht.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen