HTML5-Apps für iPhone und Android - HTML5, CSS3 und jQuery Mobile: Design, Programmierung und Veröffentlichung plattformübergreifender Apps

• Der Bildschirm ist wesentlich kleiner.
• Der Benutzer bedient die Anwendung mit dem Finger, nicht mit der Maus.
• Die Texteingabe ist selbst bei High-End-Telefonen immer noch keine Freude.
• Der Benutzer hat unterwegs andere Anforderungen an eine Anwendung oder Webseite als zu Hause oder bei der Arbeit am PC.
• Trotz UMTS und anderer Technologien ist das mobile Internet nicht beständig schnell, ein Nutzer kann sogar in Gebiete ohne Empfang kommen.

Um diese Probleme so gut wie möglich zu lösen, sollten Sie bei dem Anwendungsdesign einer mobilen Anwendung auf folgende Dinge achten:

• Machen Sie sich am Anfang Ihres Konzepts klar, was Ihr zukünftiger Benutzer für Vorteile hat, wenn er Ihre Anwendung unterwegs benutzt. Was könnte die Hauptnutzung, der hauptsächliche sogenannte »Use Case«, Ihrer Anwendung sein?
• Eine mobile Anwendung wird wahrscheinlich nicht erfolgreich sein, wenn sie unterwegs keinen Sinn ergibt oder die Funktionen, die für die Benutzung unterwegs wenig sinnvoll sind, gegenüber anderen Funktionen heraushebt.
• Nicht alle Inhalte eignen sich für die mobile Nutzung: Große Grafiken oder extrem lange Texte sind ungeeignet, verursachen lange Ladezeiten oder passen nicht in das Design für kleine Bildschirme. Versuchen Sie, angepasste Inhalte zu verwenden.
• Wenn nicht der falsche Use Case oder Designansatz den Erfolg einer mobilen Anwendung »killt«, dann ist es die fehlende Geschwindigkeit. Der mobile Benutzer ist in der Regel viel ungeduldiger und erwartet – insbesondere von einer Seite oder Anwendung, die für die mobile Nutzung optimiert ist – auch eine optimierte Geschwindigkeit.
• Versuchen Sie, die Texteingabe so weit wie möglich zu minimieren. An jeder Stelle, an der der Benutzer Ihrer mobilen Anwendung längere Informationen eingeben muss, ist Scheitern programmiert. Zwar bietet insbesondere das iPhone eine für mobile Geräte recht komfortable Eingabemethode, dennoch wird ein Großteil Ihrer Benutzer Eingabefelder so weit wie möglich meiden.
• Falls Sie nicht um bestimmte Texteingabefelder herumkommen, versuchen Sie nach Möglichkeit, diese schon vorher sinnvoll auszufüllen. In diesem Fall hat der Benutzer immer noch die Chance, den vorgeschlagenen Inhalt zu verändern oder zu löschen, kann ihn aber auch einfach ohne Texteingabe akzeptieren, wenn er mit dem Vorschlag einverstanden ist.
• Vermeiden Sie komplexe Formulare mit Texteingabe. Die meisten Touchscreen-Telefone blenden eine Bildschirmtastatur ein, die einen Großteil des Bildschirms verdeckt. Unter Umständen sehen Sie gar nicht mehr, was Sie eingeben sollen, da sich die Bildschirmtastatur über die Felder gelegt und der Fokus sich verschoben hat.
• Mittels HTML5 können Sie glücklicherweise wesentlich flexiblere Texteingabefelder definieren. Mehr dazu lesen Sie im Abschnitt 2.2.2 »Neue Input-Typen, Auto-Korrektur und Auto-Großschreibung«.
• Lassen Sie sich nicht von der Traumvorstellung des mobilen Nutzers verführen! Er ist ein ganz normaler Anwender, nicht unbedingt technisch versiert, wenig interessiert am »Entdecken« von Funktionen und Bereichen einer mobilen Anwendung, und er kommt meistens auch ohne Superfinger mit Stylus-Durchmesser daher. Gestalten Sie daher Ihre Schaltflächen auch für etwas dickere Finger.

Auch wenn sich die gerade aufgeführten Punkte nach einer Reihe von Einschränkungen anhören und den Spaß am Anwendungsdesign verderben, so bieten mobile Anwendungen auch einzigartige Möglichkeiten:

• Der Benutzer kann Ihre mobile Anwendung oder Webseite immer bei sich tragen. Dazu ist Ihre Kreation auf dem Medium und dem Gerät da, mit dem der Benutzer einen Großteil seiner Kommunikation abwickelt. Bieten Sie in Ihrer Anwendung oder Webseite Schnittstellen zu den Telefonfunktionen an, wenn es Sinn ergibt. Aus einer Webseite und natürlich auch aus einer Anwendung heraus können Sie Telefonanrufe initiieren, Inhalte per E-Mail verschicken oder sie im Internet direkt vom Handy aus verbreiten.
• Insbesondere HTML5 bringt mit den Location-Funktionen die aktuelle Position des Benutzers zu Ihnen. Wenn Sie wissen, wo auf der Welt sich Ihr Nutzer befindet, können Sie passgenaue Dienste anbieten. Allein durch die Verfügbarkeit dieser Information lassen sich Tausende mobilspezifische Anwendungen bauen.
• Mit den Offlinekapazitäten von HTML5 haben Sie die Chance, mobile Anwendungen zu konzipieren, die auch ohne Internetverbindung auskommen oder kurze Verbindungsausfälle, wie sie mit einem Telefon schon mal vorkommen, ganz geschickt zu überspielen.
• JavaScript und HTML5 bieten Ihnen unglaubliche Möglichkeiten, nicht immer eine ganze Seite, sondern nur bestimmte Teile der Seite neu zu laden. Machen Sie davon Gebrauch – wenn es sinnvoll ist!

Falls Sie Photoshop besitzen und sich mit dem Programm auskennen, können Sie vorgefertigte Bibliotheken mit den verschiedenen iPhone-typischen Elementen wie Titelleisten, Buttons, Eingabefeldern, Tastatur etc. laden und in Photoshop zu der idealen Oberfläche Ihrer Anwendung anordnen.

Auch für diejenigen, die sich speziell für Android-Webanwendungen oder mittels PhoneGap auch für Android-Apps interessieren, gibt es zahlreiche Photoshop-Vorlagen im Internet.

Besitzen Sie weder Photoshop noch einen Mac, gibt es immer noch zahlreiche Möglichkeiten, Flows visuell zu erstellen. Diese werden keine so detaillierte Darstellung der Benutzeroberfläche bieten, können aber immer noch jede Menge Probleme beim Userflow aufzeigen. Persönlich verwende ich auf dem Mac die...