Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
  • Apps
Sven Read 20. August 2010

iPhone-Apps gestalten – Erfahrungsbericht mit Tipps & Tricks

Wenn ich vor zwei Jahren jeman­dem erzählt hät­te, dass ich beruf­lich iPhone Apps gestal­te, hät­te ich wahr­schein­lich eine Gegenfrage wie „Hää? Was tust Du?“ geern­tet. Heute bekom­me ich eher ein „Cool, wie geht denn das?“ als Reaktion. Tja, eine klei­ne Frage, auf die es lei­der kei­ne kur­ze Antwort gibt. Beginnen wir also in der Stunde Null.


GRAFIK: GrandCentrix

Als ich zum ers­ten Mal ein iPhone in der Hand hielt, fand ich das Ding ein­fach nur beein­dru­ckend. Toll. Super. Fantastisch. Als ich kurz danach zum ers­ten Mal eine iPhone App gestal­ten soll­te, war es für mich gar nicht mehr so super. Auf den ers­ten Blick war die­ses klei­ne Gerät für mich als Designer eine ein­zi­ge gro­ße Einschränkung. Es gibt kei­ne Tastatur, kei­ne Maus, kei­nen Joystick oder sons­ti­ge Peripherie an die­sem klei­nen Telefon. Nur einen klei­nen Bildschirm, der fast den kom­plet­ten ver­füg­ba­ren Raum ein­nimmt. Die gesam­te Bedienung erfolgt also über die Berührung die­ses Touchscreens. Ich wuss­te nicht so recht, wo ich anfan­gen soll­te. Eine Anwendung zu ent­wi­ckeln, die in die­ser unge­wohn­ten Umgebung funk­tio­niert, stell­te mich vor vie­le uner­war­te­te Herausforderungen. Einige davon mach­ten mir anfangs schwer zu schaf­fen. Andere wie­der­um erwie­sen sich mit der Zeit als weni­ger kom­pli­ziert, als ich zuerst dach­te. Diesen Lernprozess will ich für Sie ein wenig abkür­zen. Denn eigent­lich ist es nicht schwer, eine iPhone App zu gestal­ten, wenn man es rich­tig macht.

Besonderheiten von iPhone-Apps

Apps auf dem iPhone sind ein­fa­che und unkom­pli­zier­te Anwendungen. Sie sind dar­auf aus­ge­rich­tet, ein Problem zu lösen oder ein Ziel zu errei­chen. Überladene oder mul­ti­funk­tio­na­le Apps gibt es kaum, und wenn doch, sind sie sel­ten erfolg­reich. Mit Recht, wie ich fin­de. Das iPhone ist zu aller­erst immer noch ein Handy. Es wird meist benutzt, wäh­rend man unter­wegs ist oder gera­de kei­nen aus­ge­wach­se­nen 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 kom­ple­xe Navigationen hin­ein­fin­den oder eine sei­ten­lan­ge Anleitung lesen, um sein Ziel zu errei­chen. Er erwar­tet schlicht und ein­fach, dass die Anwendung funk­tio­niert, ohne dass er kost­ba­re Zeit oder Energie inves­tie­ren muss. Der Konkurrenzkampf ist hart, die Alternativen güns­tig und schnell erreich­bar. Über 80 Prozent der Apps wer­den nur ein­mal gestar­tet, danach nie wie­der.

Für uns Designer bie­tet das iPhone eini­ges, was unser Herz vor Freude den Moonwalk machen lässt. Die Auflösung, der Farbenreichtum und der gute Kontrast des Bildschirms sind schlicht wun­der­voll. Das atem­be­rau­ben­de Retina Display des iPhone 4 ist hier aber­mals ein Sprung nach vorn. Die Ästhetik des sys­tem­ei­ge­nen User Interfaces bie­tet 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 kei­nem ande­ren mir bekann­ten Gerät wur­de sie so kon­se­quent und ele­gant umge­setzt.

Apple bie­tet außer­dem einen gut aus­ge­stat­te­ten Entwickler-Bereich an. Dort fin­den Sie, neben vie­len wei­te­ren Dokumentationen, die iPhone Human Interface Guidelines, in denen Sie vie­le wert­vol­le Hilfestellungen fin­den wer­den. Dort wer­den auch die Rahmenbedingungen für Ihr Design ziem­lich klar abge­steckt. Diese soll­ten Sie so gut es geht berück­sich­ti­gen. Anderernfalls könn­te es pas­sie­ren, dass Sie im App Store Review abge­lehnt wer­den. Das wäre ärger­lich.

Der TouchScreen

Die Bedienung über einen Touchscreen hat vie­le bemer­kens­wer­te Vorteile, jedoch auch eini­ge Nachteile. Direkt auf den gewünsch­ten Gegenstand drü­cken zu kön­nen, um eine Reaktion zu erhal­ten, ist für uns ein natür­li­cher und logi­scher Vorgang, der kei­ner wei­te­ren Erklärung bedarf. Die Lernkurve ist des­halb unge­wöhn­lich steil, auch für Menschen mit gerin­ger Computer-Erfahrung. Diese sehr intui­ti­ve Art der Bedienung mini­miert die Fehlerquote in der Bedienung dras­tisch. Insgesamt bie­tet sie einen sehr hohen Benutzerkomfort und eine her­vor­ra­gen­de User Experience.

Aber natür­lich gibt es auch ein paar Nachteile, die Sie im Hinterkopf behal­ten soll­ten. Bedingt durch die Größe unse­rer Finger, ist die Eingabe oft unprä­zi­se. Lange Phasen der Bedienung wir­ken schnell ermü­dend. Darüber hin­aus ver­de­cken wir uns oft selbst die Sicht mit unse­rer Hand.

Praxis-Tipps

  1. Planen Sie also eine Mindestgröße für die Objekte ein, mit denen die User inter­agie­ren. Als Faustregel gilt hier 44px x 22px mit einem Abstand von 12px zum nächs­ten Touch-Element.
  2. Vermeiden Sie außer­dem die Eingabe von umfang­rei­chen Daten.
  3. Verwenden Sie aus­wähl­ba­re Optionen, wo immer es mög­lich ist.

Mit die­sen drei Tipps ver­mei­den Sie schon eini­ge der gröbs­ten Usability-Fehler.

Das User Interface

Beim User Interface hat Apple gan­ze Arbeit geleis­tet. Die Entwickler haben ein bril­lan­tes Navigations- und Interaktionskonzept ent­wor­fen. Es bie­tet die Möglichkeit, tief in hier­ar­chi­sche Strukturen ein­zu­tau­chen, ohne die­se als sol­che wahr­zu­neh­men. Informationen las­sen sich ein­fach hin­zu­fü­gen, ent­fer­nen oder ändern, ohne die kon­tex­tu­el­le Orientierung zu ver­lie­ren.

Das mag tri­vi­al erschei­nen, aber das ist es ganz und gar nicht. Schließlich bedie­nen wir einen klei­nen Computer mit­samt sei­nes kom­ple­xen Betriebsystems und abs­trak­ten Verzeichnisstrukturen. Das macht zwar die Computer nicht mensch­li­cher, aber es erlaubt uns, etwas mehr Mensch sein zu kön­nen, wäh­rend wir an ihnen arbei­ten. Alle die­se vor­ge­ge­be­nen User Interface Elemente ste­hen Ihnen beim Gestalten der App zur Verfügung.

Praxis-Tipp: Greifen Sie auf die­se Elemente zu, wo auch immer es mög­lich ist. Damit las­sen sich vie­le Probleme und Missverständnisse à la: “Verhält sich das Objekt so, wie es der User von ihm erwar­ten wird?”, ver­mei­den.

Die Werkzeuge

Zunächst benö­ti­gen Sie ein iPhone oder einen iPod Touch. Außerdem einen Intel-basier­ten Mac mit min­des­tens OS X 10.5.5. Anschließend kön­nen Sie sich das kos­ten­lo­se iPhone SDK her­un­ter­la­den (Link), das Apples Entwicklungsumgebung Xcode beinhal­tet. Um Ihre App am Ende in den AppStore zur Prüfung ein­zu­rei­chen, müs­sen Sie noch an Apples iPhone Developer Programm teil­neh­men, was ein­ma­lig 99 US Dollar kos­tet. Ansonsten brau­chen 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 sei­ner Wichtigkeit immer wie­der unter­schätzt. Machen Sie bit­te nicht den­sel­ben Fehler. Nehmen Sie sich die Zeit, die Sie brau­chen, um ein trag­fä­hi­ges Konzept Ihrer App zu ent­wer­fen und anschlie­ßend zu prü­fen.

Über die­se ele­men­ta­ren Fragen soll­ten Sie sorg­fäl­tig nach­den­ken und die nöti­gen Informationen dazu ein­ho­len:

  • Welches Problem soll unse­re App lösen? Welchen Mehrwert kön­nen wir anbie­ten?
  • Welche Zielgruppe wol­len wir anspre­chen? Und was erwar­tet die­se von Ihrer App?
  • Wer ist unse­re Konkurrenz? Was macht die­se beson­ders gut? Was müs­sen wir bes­ser lösen?
  • Was hebt uns von unse­rer Konkurrenz ab? Was macht uns unver­wech­sel­bar?

Die ersten MockUps

Nachdem nun grund­le­gend klar sein soll­te, wohin die Reise geht, erstel­len wir die ers­ten MockUps. Ob Sie die­se am Computer oder lie­ber auf dem guten alten Papier (hier gibt es auch vor­ge­fer­tig­te Stencil Kits, sie­he Ressourcen) erstel­len, spielt kei­ne Rolle. Ich per­sön­lich bevor­zu­ge mitt­ler­wei­le OmniGraffle. Worauf Sie lie­ber arbei­ten, bleibt Ihnen über­las­sen. Hauptsache, Sie skiz­zie­ren grob jeden ver­füg­ba­ren Screen Ihrer App. Gehen Sie dabei nicht zu sehr ins Detail. Die gra­fi­schen Feinheiten kom­men erst spä­ter, jetzt geht’s nur ums Gerüst. Eine gro­be Darstellung des Contents und der Navigation reicht völ­lig aus, um einen guten Überblick zu erhal­ten und Probleme früh­zei­tig zu erken­nen.

Praxis-Tipp: Achten Sie unbe­dingt auf die ver­schie­de­nen Interaktions-Pfade, die Ihre User benut­zen wer­den. Wie man von A nach B kommt (und zurück!), ist für die User Experience essen­ti­ell. Brüche oder Hindernisse im Use Flow las­sen sich so früh­zei­tig ent­de­cken und ver­mei­den. Versuchen Sie auch, über­flüs­si­ge Informationen zu ent­fer­nen und beschrän­ken Sie sich auf wirk­lich rele­van­te. Hier kön­nen Sie ruhig expe­ri­men­tie­ren und aus­pro­bie­ren, um das für Sie Passende zu fin­den.

Gängige Konzepte

Anschließend noch ein paar Infos zu den drei gän­gigs­ten Konzepten:

Die Tab Bar

Der ver­mut­lich häu­figs­te Ansatz, die Information und Navigation anzu­ord­nen, läuft über den Tab Bar Controller. Am unte­ren Rand des Screens wird hier­bei eine fixe Navigationsleiste ein­ge­blen­det, auf der dann bis zu fünf Symbole (oft auch mit Text) Platz fin­den. Dies ist beson­ders emp­feh­lens­wert, wenn Ihre App über meh­re­re Bereiche ver­fügt, die getrennt ange­zeigt wer­den sol­len.

Mit die­sem Konzept kann man eigent­lich nicht viel falsch machen. Es ist über­sicht­lich, schnell und die User sind damit ver­traut. Nachteilig ist hier die Begrenzung auf fünf Elemente. Ein gutes Beispiel hier­für ist die App von Twitter.

Single Main View

Bei die­sem Modell wird die Information in ein­zel­nen, fixen Blöcken dar­ge­stellt, die durch hori­zon­ta­les Scrollen navi­giert wer­den. Das Design ist durch­gän­gig und starr. Der Vorteil ist, dass Sie hier eine Vielzahl von Blöcken anzei­gen kön­nen.

Gut geeig­net für eine gro­ße Menge ähn­lich auf­ge­bau­ter Informationen. Der User navi­giert auf sehr natür­li­che Art und Weise durch die Information. Allerdings gibt es hier kei­nen direk­ten Weg von Block zwei zu Block vier, was zusätz­li­chen Aufwand erfor­dert. Gutes Beispiel hier: Die App von ESPN.

Die Table View

Hier wird die Navigation als bild­schirm­fül­len­de und scroll­ba­re Liste ange­zeigt. Dies ist eine simp­le und ein­fach ver­ständ­li­che Art der Navigation, mit der die User eben­falls kei­ne Probleme haben wer­den.

Vorteil: Durch Gruppierung und Sortierung lässt sich leicht eine Ordnung her­stel­len und ver­mit­teln.

Nachteil: Dafür gibt es inner­halb der Option A aber auch kei­nen direk­ten Weg zu Option B, was wie­der­um zusätz­li­chen Aufwand für den User bedeu­tet, wenn er die Informationen nur scan­nen will.

Geeignet für: Sehr umfang­rei­che Informationen.

Vorbildlich: Things von Culture Code.

Sie kön­nen selbst­ver­ständ­lich auch meh­re­re ver­schie­de­ne Konzept in Ihrer App ein­set­zen, falls das nötig sein soll­te. Falls Sie das Bedürfnis ver­spü­ren, einen ganz eige­nen Weg zu gehen, hier ein kur­zer Überblick über die Möglichkeiten.

Das Custom Design

Die gera­de bespro­che­nen Konzepte sind sozu­sa­gen die von Apple vor­ge­se­he­nen Standardmodelle. Daran ist nichts Falsches. Diese Modelle haben sich bewährt und erlau­ben es den Usern, auf bereits erwor­be­nes Wissen zurück­zu­grei­fen. Sie soll­ten, wann immer mög­lich, auf eines oder meh­re­re die­ser Konzepte zurück­grei­fen.

Natürlich gibt es auch Anforderungen, die über das hin­aus­ge­hen, was mit die­sen Standards mög­lich ist. Eines der bekann­tes­ten und auch beein­dru­ckends­ten Beispiele sind die bei­den Apps Weightbot und Convertbot von Tapbots. Beide haben ein von Grund auf neu ent­wi­ckel­tes User Interface, das genau auf deren Anforderungen zuge­schnit­ten ist. Außerdem sind die bei­den ein gutes Beispiel für eine belieb­te Variante des Custom Designs, das soge­nann­te Metaphor-Design, auch Pseudo-Realism genannt.

Metaphore-Design

Dieser Ansatz ver­sucht, bekann­te Bedienkonzepte aus der rea­len Welt zu imi­tie­ren. Das hat den Vorteil, dass User sich schnel­ler inner­halb der Anwendung zurecht­fin­den, wenn sie ihre Erfahrung aus der rea­len Welt dar­auf über­tra­gen kön­nen. Das kann aller­dings auch schnell zum Nachteil wer­den, wenn die­ser Use Flow Brüche auf­weist. Dann ist der Benutzer nicht nur ver­wirrt, son­dern auch sein Vertrauen in die­se Metapher wird erschüt­tert. Schließlich wur­de er gera­de von ihr hin­ters Licht geführt. Diesen Umstand soll­ten Sie also ver­mei­den.

Metaphor-Designs haben dar­über hin­aus auch oft das Pech, dass ihre Designer ange­sichts des Vergleichs mit der rea­len Welt etwas über­mo­ti­viert zu Werke gehen. Viele die­ser Apps lei­den unter oppu­len­tem gra­fi­schem Wildwuchs. Das ist zwar mal schön anzu­schau­en, danach beginnt es jedoch, zu ner­ven. Schade um die gute Arbeit. Ausführlicheres zu die­sem Thema fin­den Sie auch in den Human Interface Guidelines von Apple.

Entwicklung

Ihre Planung ist nun abge­schlos­sen. Jetzt geht’s an die Entwicklung und Produktion. Für Sie wird das viel Arbeit in Photoshop bedeu­ten (Grafiken erstel­len, zuschnei­den und anpas­sen und so wei­ter). Aber es lohnt sich. Ab hier kann ich Ihnen lei­der nicht mehr viel hel­fen. Nun brau­chen Sie einen fähi­gen Objective-C-Entwickler, der Ihre Konzepte und Designs in Code gießt. Meiner Erfahrung nach wer­den Sie eini­ge Zeit mit­ein­an­der ver­brin­gen, also soll­te es jemand sein, der Sie ver­steht und Respekt vor Ihrer Arbeit hat. Sonst macht das kei­nen Spaß. Nehmen Sie sich Zeit, die pas­sen­de Person aus­zu­wäh­len. Ich wün­sche Ihnen viel Erfolg und gutes Gelingen.

Informationsquellen zur Bedienung per TouchScreen:

Ressourcen zum Wireframen:

(mm),

Sven Read

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.

8 Kommentare

  1. Interessant wäre es auch zu wis­sen wie der Prozeß von der Einreichung bis zur Veröffentlichung im Appstore ist. Gibt es da eine Statusmeldung? Wird man infor­miert, wenn die App für den Appstore frei­ge­schal­ten ist. Wie ist der Statistikbereich für die eige­nen Apps, was kann man sehen? (Zahl der Downloads, Zahl der abge­bro­che­nen Downloads, etc).

    • Hi! Bei der Kontrolle des Apps durch Apple wirst du durch­ge­hend infor­miert, aller­dings nur solan­ge du selbst die Initative zeigst und nach­fragst. Die Statistiken sind eben­falls ein­seh­bar. Was meinst du mit “Zahl der abge­bro­che­nen Downloads”?

    • Mit “Zahl der abge­bro­che­nen Downloads” ist wahr­schein­lich gemeint, wie hoch die Anzahl ist, wenn man sich dazu ent­schie­den hat einen App run­ter­zu­la­den, aber im letz­ten Moment dann doch noch einen Rückzieher macht. Den Download also umgeht.

  2. ERSTER! Zum ers­ten mal in mei­nem Leben :p

    Der Artikel ist schön! Schön scho­ckie­rend! Nein der ist super, aber dass echt 80% nur ein­mal gestar­tet wer­den fin­de ich schon krass. So rich­tig traue ich mich nicht an die iPhone App Entwicklung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.