IPhonisierung von eStudy

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Einleitung

eStudy auf dem iPhone

Die immer größer werdende Verbreitung von internetfähigen mobilen Endgeräten stellt eine neue Herausforderung für die Betreiber von Webseiten dar. Die Seiten sind meist nicht dafür ausgelegt, auf sehr kleinen Displays dargestellt zu werden. Aber besonders Apples iPhone hat durch die Integration eines vollwertigen Browsers dazu beigetragen, dass immer mehr Nutzer mit ihrem Handy im Internet surfen. Dabei kommt selbstverständlich der Wunsch auf, dass die angesteuerte Webseite korrekt angezeigt wird und natürlich auch nutzbar ist. Während im Prinzip die korrekte Anzeige der Webseite durch die Einhaltung der Webstandards sichergestellt werden kann, bedarf es für die Nutzbarkeit meist noch einiges an Arbeit. Dies wird klar, wenn einmal die Kurswolke von eStudy auf dem iPhone aufgerufen wird. Da eStudy bekanntlich die Webstandards einhält, bereitet die Darstellung der Seite dem Browser keine Probleme. Jedoch ist das Ergebnis nicht wirklich nutzbar! Die Texte sind nicht lesbar und die Links kaum zu erreichen. Daher wird auch die Unterscheidung zwischen entwickelten und unentwickelten Webseiten gemacht.

Unentwickelte Webseiten können weiter zwischen kompatibel und inkompatibel unterschieden werden. Eine Seite gilt als inkompatibel, wenn zum Beispiel Technologien zum Einsatz kommen, die auf dem Gerät nicht zur Verfügung stehen. Beim iPhone wäre dies zum Beispiel das Verwenden von Flash. Aber auch das Nutzen von sehr kleinen Schriftarten macht eine Webseite inkompatibel. Dies gilt, da der Benutzer dazu gezwungen wird den Inhalt zu zoomen, weil er ihn sonst nicht lesen kann. Eine Webseite gilt dagegen als kompatibel, wenn bereits einige Anstrengungen unternommen worden sind, damit die Webseite auf dem Gerät benutzbar ist.

Bei entwickelten Webseiten wird zwischen freundlich und optimiert unterschieden. Beispielsweise ist eine Seite iPhone freundlich, wenn spezielle Tags in die Seite eingebaut wurden, die direkten Einfluss auf die Darstellung der Seite im Browser des iPhones haben. Und als optimiert gelten schließlich all jene Seiten, die speziell für ein Gerät entwickelt wurden.

Dieser Artikel geht nicht auf die Details ein, wie eine Webseite konkret iPhone optimiert werden kann. Aber sie stellt einige wichtige Usability-Regeln und -Hinweise zusammen. Anhand der Lern- und Kollaborationsplattform eStudy und dem iPhone werden diese Regeln und Hinweise verdeutlicht. Viele der hier angesprochenen Punkte beziehen sich aber nicht ausschließlich auf mobile Endgeräte, sondern gelten universell. Der Artikel ist damit eine ideale Anlaufstelle für alle Entwickler von eStudy, die generell die Nutzbarkeit ihrer Module verbessern wollen.

Da selbstverständlich nicht jeder Entwickler Zugriff auf ein iPhone hat, ist die Demo des iPhone-Interfaces der Blogsoftware Typepad eine gute Einführung. In diesem Video wird eine für das iPhone optimierte Webseite gezeigt. Die Oberfläche ist minimalistisch, der Fokus liegt klar auf der Bedienbarkeit. Auch Grafiken werden nur spärlich eingesetzt, damit die Seite auch über langsame Verbindungen (EDGE in diesem Beispiel) zügig zur Anzeige gebracht wird. Die Seiten sind sowohl im Porträt- als auch im Landschaftsmodus des iPhones darstellbar.

Damit sind schon einige wichtige Punkte genannt: Um der stark reduzierten Displaygröße Rechnung zu tragen, ist die einfache Liste die Hauptform der Darstellungsarten. Nicht immer steht eine schnelle Verbindung zur Verfügung, dennoch muss ein schneller Seitenaufbau garantiert werden. Beide Modi des iPhones müssen unterstützt werden.

Ein Blick auf bestehende iPhone Weboberflächen

Einige Dienste bieten bereits iPhone optimierte Webseiten an. Es lohnt sich daher, die folgenden Seiten etwas genauer zu betrachten:

  • Foxmarks (synchronisiert Firefox Lesezeichen)
  • Friendfeed (aggregiert Inhalte diverser Dienste, die anschließend kommentiert und bewertet werden können)
  • Google Reader (RSS Leser)
  • Meebo (Instant Messenger, IM)

Die Login Seiten der verschiedenen Dienste sind extrem einfach gehalten. Die Foxmarks-Seite beschränkt sich auf das absolute Minimum, wohingegen die übrigen Seiten gestalterisch mit mehr aufwarten. Friendfeed fällt mit einer unglücklichen Lokalisierung auf: Es gibt sowohl einen unerwarteten Zeilenumbruch in der Kopfzeile, als auch holpriges Deutsch.

Foxmarks, Google Reader und Meebo verwenden eine Liste als Darstellung ihrer Inhalte. Google Reader lädt seine Inhalte durch Auswählen eines Listenelementes per Ajax nach und zeigt sie innerhalb der Liste an. Dadurch lassen sich die Artikel sehr flüssig und ohne größere Wartezeiten lesen. Die Überschriften sind als Links ausreichend groß. Dagegen ist der Stern zum Markieren von Artikeln zu nahe am Rand und daher wird ab und zu ein "Klick" entweder nicht registriert oder teilweise auch der Überschrift zugeordnet. Die Links in der Fußzeile eines Artikels bieten trotz ihrer geringen Schriftgröße ausreichend Auswahlfläche.

Foxmarks beschränkt sich ausschließlich auf das Anzeigen der Lesezeichen. Das Wählen eines Lesezeichen öffnet dieses direkt. Das Öffnen eines Lesezeichen-Ordners lädt die Seite neu, was zu etwas Wartezeit führt.

Die Kontaktliste von Meebo zeigt zusätzlich eingegangene Nachrichten an. Dabei wird das Logo des IM-Netzwerks mit der Anzahl der Nachrichten versehen. iPhone Nutzer kennen dieses Verhalten bereits von ihrem Home-Bildschirm. Ein Klick auf einen Kontakt lädt das Nachrichtenfenster. Dort findet auschließlich die Kommunikation statt. Erreicht den Nutzer während dessen eine Nachricht von einem anderen Kontakt, wird diese Nachricht separat eingeblendet.

Friendfeed ist die einzige Anwendung, die den Funktionsumfang für das iPhone nicht reduziert hat. Auch wurde die Darstellung des Inhalts nicht verändert. Dadurch sind die Links nur schwer erreichbar. Diese Seite ist damit nur iPhone freundlich. Damit ist auch der wirkliche Unterschied zwischen iPhone freundlich und iPhone optimiert klar: Eine optimierte Seite muss die Funktionsvielfalt einschränken, da auf dem kleinen Display nur sehr wenige Informationen Platz finden. Außerdem muss darauf geachtet werden, dass die Auswahlflächen (Buttons, Links usw.) ausreichend groß sind, damit sie problemlos mit einem Finger erreicht werden können. Wenn möglich sollte auf Ajax zurückgegriffen werden, um das Neuladen von Seiten zu minimieren.

Apples "Human Interface Principles"

Die Beispiele haben gezeigt, wie vielfältig iPhone Weboberflächen aussehen können. Trotzdem haben diese Oberflächen einige Gemeinsamkeiten. Die deutlichste ist die bereits angesprochene Listendarstellung. Diese und einige weitere Prinzipien wurden von Apple zu den "Human Interface Principles" zusammengefasst.

Metaphern

Für Bedienelemente kann es von Vorteil sein, wenn sie den Nutzer an Objekte aus der realen Welt erinnern. Mit solchen Elementen kann der Nutzer in der Regel ohne lange zu Überlegen etwas anfangen. Beispiele für Metaphern sind die Wiedergabesteuerung des iPods oder das "Glücksrad", um einen Eintrag aus einer Liste von Elementen zu wählen (picker wheel). Foxmarks hat die Metapher der Ordner verwendet. Viele weitere Metaphern wurden direkt im iPhone OS eingesetzt. Die iUI Bibliothek von Joe Hewitt bringt diese Metaphern ins Web, so dass hier das Rad nicht neu erfunden werden muss.

Direktes Manipulieren

Direktes Manipulieren bedeutet, dass der Nutzer Aktionen auf einem Element durchführen kann. Dabei bleibt das Element gut sichtbar und das durch die Aktion hervorgerufene Ergebnis wird sofort angezeigt. Ein Beispiel sind die An/Aus-Schieberegler des iPhones. Aber auch der Google Reader kann hier genannt werden: Das Öffnen eines Eintrags durch das Berühren von dessen Überschrift ist eine direkte Manipulation.

Durch den Einsatz dieser Technik erhält der Benutzer ein Gefühl der Kontrolle. Verstärkt wird dies vor allem dadurch, dass der Benutzer mit seinem Finger die Elemente berühren kann. Die Manipulation ist also noch direkter, als dies zum Beispiel über eine Maus je sein könnte.

See and Point

Obwohl das iPhone eine komplette QWERTZ-Tastatur anbietet, ist dies dennoch kein Grund, den Benutzer unnötig tippen zu lassen. Statt dessen sollten dem Benutzer immer Auswahlmöglichkeiten angeboten werden. Eine Texteingabe ist nur in sehr begrenzten Ausnahmefällen sinnvoll. Der Verzicht auf Textfelder erspart dem Programmierer im Übrigen eine möglicherweise komplizierte Validierung der Eingabe.

Feedback

Genau wie das direkte Manipulieren, ist auch dieser Punkt wichtig, um dem Nutzer noch mehr Gefühl von Kontrolle zu geben. Akustisches Feedback kann eine Möglichkeit sein. Das Kontrollrad der iPods beispielsweise gab bei jeder Benutzung ein leises Geräusch von sich. Und natürlich geben auch die meisten Aktionen am iPhone ein akustisches Feedback. Allerdings ist es im Web kaum möglich, Audio abzuspielen. Und selbst wenn es einfach ginge, kann das iPhone auf lautlos gestellt sein. Daher muss immer auch ein optisches Feedback vorhanden sein.

Für Aktionen, die nicht sofort beendet werden können, muss ein Fortschrittsbalken angezeigt werden. Der Nutzer darf aber niemals zu lange und zu oft warten, da er dadurch wieder das Gefühl der Kontrolle verliert. Wenn eine Operation mehrere Schritte benötigt, bietet sich der Hinweis an, wie viele Schritte bis zur Fertigstellung noch benötigt werden. Aber auch hier gilt: Der Benutzer sollte mit möglichst wenig Schritten zum Ziel kommen.

Benutzersteuerung

Der Benutzer startet und kontrolliert die Anwendungen, nicht die Anwendung. Soweit möglich sollten die Standard-Bedienelemente eingesetzt werden. Hier bietet sich wieder iUI an. Der Benutzer soll möglichst nichts Neues lernen müssen, um die Anwendung bedienen zu können. Wichtig ist auch, dass der Benutzer eine Aktion jederzeit abbrechen kann. Bei desktruktiven Aktionen muss der Benutzer außerdem nochmals gefragt werden, ob er wirklich fortfahren möchte.

Ästhetische Integrität

Damit ist gemeint, dass die Optik der Anwendung sich an ihren Funktionen anlehnen sollte. Nur so ergibt sich ein einheitliches Gesamtbild. Für die Wahl des richtigen Designs kann auch die Zielgruppe der Anwendung aufschlussreich sein.

8 Faustregeln

In der Usability-Studie "How people really use the iPhone" von Bill Westerman werden acht Faustregeln für das Entwickeln von iPhone Programmen vorgestellt:

Erlerntes Verhalten ausnutzen

Durch das Positionieren von UI-Elementen an der gleichen Stelle wie in anderen Anwendungen findet sich ein Nutzer sehr schnell zurecht. Bei den Standardprogrammen des iPhones befindet sich beispielsweise die Suchleiste meist am oberen Ende und die gängisten Funktionen am unteren Ende des Schirms. Wird dies auch in einer eigenen Anwendung so übernommen, ist der Nutzer sofort mit dem Verhalten vertraut.

Inkonsistente Bedienung vermeiden

Bedienelemente, welche die gleiche Funktionalität aufweisen, sollen nicht an unterschiedlichen Stellen platziert werden. Auch soll das Aussehen möglichst identisch bleiben. Nichts ist mehr verwirrend, als in 9 von 10 Fällen dem selben Element die Funktion A zu geben, aber in genau einem Fall die Funktion B, welche mit A aber nichts zu tun hat.

Konzeptionelle Verbindung zwischen Elementen verdeutlichen

Besonders wenn die Bedienelemente über den gesamten Schirm verteilt sind, ist es oftmals schwer direkt zu erkennen, welche Elemente konzeptionell zusammenhängen. Der Safari Webbrowser des iPhones hat beispielsweise am oberen Ende des Schirms die Adresszeile um die URL direkt zu manipulieren. Am unteren Ende gibt es weitere Elemente, die ebenfalls die Adresszeile verändern können (Lesezeichen). Der Nutzer muss solche Elemente in Zusammenhang bringen können, ansonsten wird er sie nicht oder nur schwer verstehen.

Ausreichend Abstand zwischen Elementen lassen

Elemente die Daten manipulieren können, müssen ausreichend Platz zu anderen Elementen haben. Sonst besteht die Gefahr, dass der Nutzer eigentlich ein nebenstehendes Element verwenden wollte, aber versehentlich das Andere erwischt. Besonders deutlich wird dies bei der Bildschirmtastatur: Hier befinden sich sowohl Eingabetaste als auch die Rücktaste in unmittelbarer Nähe. Möchte der Nutzer eine Eingabe korrigieren, besteht die Gefahr, dass er versehentlich die gesamte Eingabe absendet.

Auf versehentliche Berührungen einstellen

Um Inhalte zu Scrollen muss der Benutzer über das Display "wischen". Dabei kann es vorkommen, dass dabei versehentlich zum Beispiel Elemente in der Fußzeile ausgeführt werden, die nicht zum gescrollten Inhalt gehören. Die Anwendung muss auf dieses Ereignis gefasst sein und erkennen, dass der Benutzer eigentlich scrollen und nicht eine Funktion aufrufen wollte.

Nicht ausschließlich Multi-Touch verwenden

Manchem Nutzer ist die ständige Verwendung von Multi-Touch-Gesten zu umständlich. Es ist daher von Vorteil, eine Funktion auf unterschiedliche Weise ausführen zu können. Beispielsweise kann in Safari der Inhalt einer Webseite über Multi-Touch gezoomt werden, aber auch durch einen "Doppelklick".

Visuelles Feedback anbieten

Jede Aktion sollte ein visuelles Feedback nach sich ziehen. Und zwar nicht nur aus Gründen der Ästhetik, sondern auch weil es ein Gefühl der Kontrolle vermittelt.

Handlungsaufforderungen anbieten

Mit ein paar Tricks kann dem Nutzer sofort klargemacht werden, dass hier die Möglichkeit einer Interaktion besteht. Wenn zum Beispiel Inhalte scrollbar sind, aber eine fixe Fußzeile auf dem Schirm sichtbar ist, kann diese Fußzeile durchsichtig dargestellt werden. Dem Benutzer wird dadurch sofort mitgeteilt, dass die Liste nicht mit der Fußzeile oder dem Ende des sichtbaren Bereiches aufhört, sondern dass noch weitere Inhalte durch Scrollen verfügbar sind.


--Thelen-CTh 14:19, 9. Dez. 2008 (UTC)

Literatur

  • Westerman, Bill: How people really use the iPhone. Create With Context, 2008. (PDF)
  • Allen, Christopher; Appelcline, Shannon: iPhone in Action - Introduction to Web and SDK development. Manning Publications, 2008.
  • Apple Inc: iPhone Human Interface Guidelines. Apple Inc, 2008.
  • Snell, Steven: Mobile Web Design Trends For 2009. Smashing Magazine, 2009.