Kategorien
Apps Programmierung

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),

Kategorien
Apps Programmierung

Projektmanagement-Apps für das iPhone und Smartphones

Auch unterwegs soll das Projektmanagement reibungslos funktionieren. Glücklicherweise gibt es genügend Applikationen für das iPhone und sonstige Smartphones. Hier nun eine kleine Auswahl empfehlenswerter Apps für das Projektmanagement.

iBluesky

Mit diesem Mindmapping-App können die eigenen Gedanken und Pläne sortiert werden. Gerade bei der Planung von Projekten ist das ein großer Vorteil. Die Bedienung ist denkbar einfach: Alle Mindmaps beginnen mit einem zentralen Knotenpunkt beziehungsweise dem Anfangspunkt. Von hier aus werden die neuen Arme hinzugefügt. All diese Arme können im Nachhinein umbenannt, umgesetzt, ausgeschnitten, kopiert oder gelöscht werden. Die Mindmaps lassen sich als PDF-, PNG- und Textdatei sowie in verschiedenen Mindmapping-Formaten exportieren. Einziger Wermutstropfen bei iBluesky: Aufgrund des kleinen Bildschirms geht gelegentlich die Übersicht verloren.
Preis: 6,99 Euro
Weitere Infos


Ein Mindmap bei iBluesky

Mindmeister

Der Mindmeister ist die logische Alternative zu iBluesky. Auch hiermit können Mindmaps erstellt, bearbeitet, betrachtet, exportiert und zudem sogar mit dem Online-Konto bei Mindmeister synchronisiert werden. Dank der vollen Drag & Drop- sowie der Zoom Unterstützung gestaltet sich die Bedienung verhältnismäßig einfach. Außerdem lassen sich die Icons, Farben und Formate beliebig verändern. Ärgerlich ist nur, dass der Export via E-Mails nicht möglich ist und dass ein Horizontalmodus fehlt.
Preis: 5,49 Euro
Weitere Infos

Projectplace

Projectplace, Europas Marktführer für webbasiertes Projektmanagement, bietet eine iPhone Applikation mit sehr breiter Funktionalität, bei der jeder Anwender einen halben Gigabyte Speicherplatz kostenlos zur Verfügung gestellt bekommt. Projekte, Besprechungen, Dokumente, Meilensteine etc. können angesehen sowie kommentiert werden. Die Suche nach Dokumenten gestaltet sich ebenso einfach wie das Abspeichern von Informationen in einem Projekt. Eine echte Besonderheit ist die GPS-Funktion, mit der zum Beispiel Teammitglieder geortet werden können.
Preis: kostenlos
Weitere Infos

Mobile To Do List

Mit der Mobile To Do List gerät kein Termin in Vergessenheit. Termine und Aufgaben können verschiedenen Rubriken, wie zum Beispiel unterschiedlichen Projekten, zugeordnet und mit einer Prioritätsstufe versehen werden. Erledigte Aufgaben werden anschließend abgeharkt.
Preis: Bei den meisten iPhones bereits enthalten
Weitere Infos

Now Do This

Now Do This ist zwar eine Applikation mit verhältnismäßig schmaler Funktionalität. Dafür aber ist sie kostenlos und für manche Anwender völlig ausreichend. Alle Aufgaben können in einer Liste archiviert werden. Bei jedem Start wird eine Aufgabe präsentiert, die jetzt zu erledigen ist. Sobald diese erledigt ist, kann der Eintrag abgeharkt und in das Archiv verschoben werden.
Preis: kostenlos
Weitere Infos

Die Erledigungsliste bei Now Do This

Things

Things ist ein mittlerweile sehr populäres Aufgabenverwaltungs-App. Aufgaben, Notizen und Fälligkeitsdaten lassen sich kinderleicht verwalten. Das heißt: Tagespläne und entfernte Zukunftspläne lassen sich detailliert erstellen. Außerdem ist dank der Erinnerungsfunktion dafür gesorgt, dass nie wieder ein Termin in Vergessenheit gerät. Gerade bei einem Projektmanagement ist diese gesamte Funktionalität sinnvoll. So lassen sich mehrere Aufgaben einem Projekt zuordnen, und das Projekt kann ebenfalls mit einem Fälligkeitsdatum versehen werden.
Preis: 7,99 Euro
Weitere Infos

Action Method

Die umfangreiche Aufgabenverwaltung ist eine hervorragende Alternative zu Things. Auch hier können Aufgaben definiert und einer Person, einer Personengruppe oder einem Projekt zugeordnet werden. Unter einem Projekt sind dann alle dazu gehörigen Aufgaben zu finden. Eine Besonderheit ist, dass die App mit der umfangreichen Action Method Online-Anwendung synchronisiert werden kann.
Preis: kostenlos
Weitere Infos

Encamp

Das beliebte Online-Projektmanagement-Tool Basecamp dürfte mittlerweile weiträumig bekannt sein. Passend dazu wurde ein App für das iPhone, praktisch ein mobiles Basecamp, auf den Markt gebracht. Die breite Funktionalität stößt auf Gefallen. So können unter anderem Projekte, Nachrichten, Meilensteine und Aufgabenlisten bedienerfreundlich auf dem iPhone erstellt und bearbeitet werden.
Preis: kostenlos
Weitere Infos

Sums

Das oberste Gebot beim Projektmanagement lautet: Immer die Kosten im Auge behalten. Dank dieser Inventur Applikation gestaltet sich das nun äußerst einfach. Jede Position kann mit einer Ziffer, zum Beispiel einem Preis, versehen werden. Die App rechnet alle Positionen zusammen und zeigt die Endsumme an. Dabei werden positive Zahlen addiert und negative Zahlen subtrahiert. Selbstverständlich können nicht nur Geldbeträge sondern auch Kilos, Liter etc. zusammengerechnet werden.
Preis: 2,99 US-Dollar
Weitere Infos

Eine Kostenkalkulation bei Sums

Merlin

Merlin gilt als die führende Projektmanagement Software auf Mac OS X. Die Applikation für das iPhone ist eine Ergänzung dazu und dient praktisch als verlängerter Arm des Desktop-Merlin. So können bereits bestehende Projekte unterwegs betrachtet sowie bearbeitet werden.
Preis: kostenlos
Weitere Infos

Xing

Zugegeben: Die Xing Applikation ist nicht unbedingt eine Projekt-Management-App. Trotzdem kann die Übersicht und der Zugriff auf alle beruflichen Kontakte bei einem Projekt sehr nützlich sein. Und genau dafür ist die kostenlose iPhone-App programmiert worden. Xing-Nutzer können zum Beispiel Nachrichten lesen und die Kontakte aufrufen. Der gleiche Funktionsumfang wie bei der Online-Version wird aber leider nicht geboten. So können Kontaktanfragen zum Beispiel angenommen, jedoch nicht abgelehnt werden. Für den mobilen Einsatz ist die App aber dennoch ausreichend. Außerdem ist zukünftig mit einer Funktionserweiterung zu rechnen.
Preis: Kostenlos
Weitere Infos

FinarX timesheet Pro

Mit dieser App können die Arbeitszeiten erfasst und protokolliert werden. Die Zeiten lassen sich dann zum Beispiel einem Projekt, einem Kunden oder einer bestimmten Tätigkeit zuordnen. Für die Budget-Kontrolle ist diese Übersicht ein echter Segen. Später lassen sich die einzelnen Einträge nach Kunden, Zeiten, Projekten oder Tätigkeiten filtern. Eine sinnvolle optionale Erweiterung ist der E-Mail Export eines PDF Stundenzettels für konfigurierbare Zeit-, Tätigkeits-, Projekt- und Kundenauswahl.
Preis: 7,99 Euro
Weitere Infos

ZS-Time Calculator

Der ZS-Time Calculator bietet eine komplette Zeiterfassung für unterwegs. Die Funktionalität umfasst die Datenerfassung, Pflege und Auswertung von Arbeitszeiten sowie die Erfassung von Kosten, Budgets, Stundensätzen und Projekten. Ein großer Vorteil ist, dass die mobil erfassten Daten mit der Online-Version des ZS Time Calculator synchronisiert werden können und sogar eine Übernahme nach MS-Excel oder in andere CSV-kompatible Anwendungen möglich ist. Einziger Wermutstropfen: der verhältnismäßig hohe Preis.
Preis: 25 Euro
Weitere Infos

Der ZS-Time Calculator

IFee

Insbesondere unter Grafikern und Designern gilt iFee als ein nützliches Tool, denn diese App hilft bei der Preisgestaltung. Der Anwender gibt seinen Stundensatz, die Arbeitsdauer, den Schwierigkeitsgrad und das Nutzungsgebiet an, sodass iFee einen fairen Preis vorschlagen kann.
Preis: 2,39 Euro
Weitere Infos

(mm),