MApps: Optimierung des eStudy-Moduls "Nachrichten" für mobile Endgeräte

Aus THM-Wiki
Wechseln zu: Navigation, Suche
Dokumentation
Arbeitstitel Optimierung des eStudy-Moduls "Nachrichten" für mobile Endgeräte
Kurs Mobile Applications
Semester SS 10
Teilnehmer Christian Ketter



In diesem Artikel wird die Überarbeitung des Nachrichten-Moduls für mobile Endgeräte beschrieben. Hierbei soll nach den Empfehlungen des W3Cs vorgegangen werden.

IST-Analyse

Im Rahmen des im Wintersemesters 2008/2009 angebotenen Kurses "New Trends in IT" wurde die Projektarbeit "Nachrichten-Modul optimized for iPhone" fertiggestellt. Wie der Name vermuten lässt, wurden bereits einige Optimierungen für das Nachrichten-Modul implementiert. Nachfolgend wird nun ein kleiner Oberflächentest inklusive einer Analyse des Quellcodes in der SOLL-Analyse mit dem W3C Mobile Checker durchgeführt.

Aufruf des Nachrichtenmoduls

Login-Menü

Nach einer erfolgreichen Authentifizierung, die durch die Eingabe der Login-Daten in das obige Login-Menü geschieht, wird dem Benutzer der Startbildschirm angezeigt.

Startbildschirm "Nachrichten"

Nun hat der Benutzer die Möglichkeit, eines der acht Startmodule, darunter das Nachrichtenmodul aufzurufen. Im Falle von nicht gelesenen Nachrichten wird die Anzahl dieser, analog zu der "Mail"-Komponente des iPhone OS, in einem Tooltip angezeigt.

Startbildschirm des Nachrichtenmoduls

Übersicht eingegangene und ausgegangene Nachrichten

Durch das Icon "Desktop" hat der Benutzer die Möglichkeit, zu der nicht für mobile Endgeräte optimierten Ansicht für Desktop-Systeme zu wechseln. In der ersten Zeile befindet sich eine Übersicht der eingegangenen -, in der zweiten Zeile eine der ausgegangenen Nachrichten. Bei nicht-gelesenen Nachrichten wird die Anzahl dieser in Klammern in der Form "(<Anzahl ungelesener Nachrichten> ungelesen)" hinter dem Label Ein- bzw. Ausgang angezeigt. Im Footer-Bereich ist auf der linken Seite ein Icon, mit dem die Angabe der ungelesenen Nachrichten aktualisiert werden kann. Auf der rechten Seite befindet sich ein Icon, welches auf den Nachrichten-Verfassen Dialog verweist.

Nachrichteneingang und -ausgang

In diesem Abschnitt wird der Nachrichtenein- und Nachrichtenausgang analysiert. Da diese vom dem Aufbau und der Struktur gesehen weitgehendst identisch sind, werden sie zusammen betrachtet.

Nachrichteneingang

Im oberen Bereich der Seite wird die bereits bekannte Verlinkung auf den Destop-Style angezeigt. Danach folgt spaltenweise die Übersicht der Nachrichten, wobei der Absender/Empfänger, sowie der Titel der Mail angezeigt werden.

Nachricht-Detail Ansicht

Die Nachricht-Detail Ansicht wird aufgerufen, sobald auf eine Nachricht "getoucht" oder geklickt wird. Es werden Absender, Titel und Inhalt der Nachricht angezeigt.

Nachrichten-Detail Ansicht

Im unteren Bereich der Seite besteht die Möglichkeit, eine Nachricht zu löschen, zu archivieren oder eine neue Nachricht zu schreiben. Die direkte Beantwortung der Nachricht mit automatisch ausgefülltem Empfänger ist nicht möglich. "Archiviert" bedeutet in diesem Zusammenhang, dass die Nachricht nicht nach der standardmäßig festgelegten Zeitspanne von 6 Monaten automatisch gelöscht wird.

Nachricht verfassen

Zu diesem Dialog kann der Benutzer entweder über die Nachrichten-Übersichtsseite oder über die Nachrichten-Detail Ansicht gelangen.

Nachricht verfassen

Absender, Titel und der Inhalt werden eingetragen und über den obigen "Senden"-Button verschickt.

SOLL-Anlayse

W3C mobileOK Checker

Nach einer gründlichen Überprüfung der einzelnen Seiten durch den W3C mobileOK Checker, welcher die Eignung einer HTML-Seite für mobile Endgeräte in Prozent ausgibt, existieren nur wenige Optimierungen auf Quellcode-Ebene. Die Werte liegen im Schnitt zwischen 90 und 19 %. Die Beanstandungen, welche hierbei auftraten, waren größtenteils fehlende CSS-Angaben, da der Checker auf diese nicht zugreifen kann.

W3C mobileOK Checker


Usability

Die Usability des Moduls ist bereits gut. Das Modul kann intuitiv bedient werden, unter Anderem weil das Design ist an das bekannte Mail-Modul von Apple angelehnt. Einige Punkte sind aber durchaus noch verbesserungsbedürftig. In der Nachrichtenübersicht (Ein- sowie Ausgang) werden alle Nachrichten des Benutzers angezeigt. Dies kann schnell zur Unübersichtlichkeit führen, da i.d.R. nur die ersten 5-10 Nachrichten verwendet werden. An dieser Stelle würde es sich anbieten, nur 25 Nachrichten anzuzeigen, um eine klarere Struktur zu schaffen. Bei Bedarf können die Restlichen noch manuell angezeigt werden (siehe Mail-Modul). In der Nachrichten-Detail Ansicht befindet sich das Icon "archivieren". An dieser Stelle ist es diskussionswürdig, ob der Benutzer dies an dieser Stelle entscheiden sollte, da er dies auch in der Desktop-Ansicht machen kann. Das Icon verfügt über keine Hilfestellung, so dass ein Großteil der Benutzer nicht versteht, welche Funktion das Archivieren von Nachrichten hat. In der Nachricht-Verfassen Ansicht muss man den vollständigen Vor- und Nachnamen des Empfängers kennen, was bei neu gebildeten Kursen/Lerngruppen in der Regel nicht der Fall ist. Eine Plausibilitätsprüfung findet erst nach dem Drücken auf Senden statt, der geschriebene Text bei negativ ausfallender Plausibilitätsprüfung bleibt erhalten. Hier wäre es besser, den Namen sofort zu prüfen oder per AJAX sich die passenden Mitglieder zu den bereits eingegebenen Buchstaben in einer Liste anzeigen zu lassen. Allerdings bleibt zu testen, inwiefern sich das auf die Performance auswirkt und wie der Name platzsparend angezeigt werden kann. Eine ähnliche Funktion ist bereits im Mitglieder-Modul implementiert.

Namensvervollständigung im Modul "Mitglieder" (Desktop-Style)


Eine weitere wichtige Funktion wäre die Antwort auf eine Nachricht im Eingang. Aktuell kann man über die Nachrichten-Detail Ansicht nur eine Nachricht neu verfassen, wobei der Empfänger manuell eingegeben wird. Benutzerfreundlicher ist es, wenn der Benutzer direkt nach dem Klick auf ein "Antworten"-Icon zu dem Nachrichten-Verfassen Dialog mit automatisch ausgefülltem Empfänger gelangt.


Synergien mit dem Mitglieder-Modul

Durch die Zusammenarbeit mit dem Mitglieder-Modul, welches von Herrn Henry überarbeitet wird, können einige Mehrwerte aus technischer und anwendungsfreundlicher Sicht geschaffen werden. So sollte der Name in einer E-Mail direkt anklickbar sein, von der der User direkt auf die Profilseite dieser Person weitergeleitet wird. Über diese Profilseite kann er ihm direkt eine SMS schicken oder anrufen, sofern dieser Benutzer diese Information eingegeben und freigegeben hat. Die bereits schon angesprochene AJAX-Komplettierung der Mitglieder bei Eingabe eines Vor- oder Nachnamens soll ebenfalls im Mitglieder-Modul realisiert werden.

Mobile Funktionen und damit verbundene Optimierungen und Mehrwerte

Da dieses Modul hauptsächlich mobil mit einem Smartphone genutzt wird, ergeben sich andere Anforderungen im Vergleich zur Desktop-Vartiante. Einige Funktionen werden weggelassen, um eine höhere Usability zu erreichen. Allerdings existieren auch einige Mehrwerte, d.h. Funktionen, die nur der mobilen Variante vorenthalten sind.

Nachrichten Detail-Ansicht.png

Ein Feature, dass bei der mobilen Variante wegfällt, ist das Archivieren von Nachrichten. Für den Standard-Benutzer ist die dieses Features, dessen Sinn im Kapitel Usability bereits beschrieben wurde, nicht intuitiv ersichtlich. Bei einer Einbindung dieser Funktion müsste dementsprechend ein Hilfe-Text angezeigt werden, der den Benutzer darüber aufklärt. Um die Seite nicht unnötig aufzublähen und die Übersicht zu verschlechtern, wird auf eine Implementierung dieser Funktion in der mobilen Variante verzichtet.

Das "Nachrichten"-Modul ist das Kommunikationsmedium, um gezielt eine Menge von Empfängern anzusprechen. Jedem User, hierbei muss es sich nicht um einen Digital Native handeln, kennt diese Art der Kommunikation. Dies muss nicht zwangsweise der digitale Weg sein, sondern kann auch in Form eines traditionellen Briefes sein. Dementsprechend wird das Nachrichten-Modul eines der zentralen Funktionen des mobilen eStudys bieten und die Kommunikation über persönliche Nachrichten im eStudy-Portal fördern und aufwerten. Für angemeldete User kann dies eine kostenlose Alternative zum Versand vom SMS oder E-Mail darstellen. Darüber hinaus ist diese Kommunikation sicher, da die Verbindung zu eStudy SSL-verschlüsselt ist, was beim Verschicken von E-Mails standardmäßig nicht der Fall ist.

Weitere Mehrwerte bieten sich durch die Verknüpfung mit dem Mitglieder-Modul. Die bereits im Artikel MApps: Optimierung des eStudy Moduls Mitglieder für iPhone beschriebenen Mehrwerte sind das Anrufen und Verschicken von SMS an Mitglieder. Beim Verfassen oder Lesen einer Nachricht kann jeder auftauchende Name angetoucht werden, worauf der User auf die Profil-Seite dieses Benutzers gelangt. Nun kann dieser auf durch den Klick auf eine Nummer diese anrufen. Darüber hinaus kann er an diesen Benutzer eine SMS versenden, indem er in der unteren Hälfte des Profils auf "SMS" klickt. Diese SMS kann anschließend über das SMS-Modul im iPhone (über den Mobilfunk-Vertrag des Users) versendet werden.


Die Verknüpfung mit dem Mitglieder-Modul wird in allen mobilen Modulen stattfinden, um einen hohen Grad von intermodularen Vernetzungen zu erreichen. Dies erhöht die Gesamt-Usability vom mobilen eStudy signifikant und wird von Usern, von dem ein Großteil Studierende sind und diese dementsprechend Smartphones häufig benutzen (z.B. in öffentlichen Verkehrsmitteln), gerne angenommen.

Seitenlayout und Bedienungswege nach der Optimierung

Die Startseite, nachdem sich der Benutzer eingeloggt hat

In Startseite von eStudy2go wird das Nachrichten-Modul als oberstes Modul angezeigt. Durch die Indikatoren wird direkt erkennbar, wieviele Neuigkeiten - in diesem Fall neue Nachrichten - für den Benutzer eingetroffen sind.

Die Nachrichtenübersicht

Mit einem Touch auf die Zeile mit "Nachrichten" wird ihm eine Übersicht über den Nachrichtenein- und Nachrichtenausgang angezeigt. Der graue Indikator gibt hierbei die Anzahl der Gesamtnachrichten an. Im Gegensatz dazu zeigt ihm der ihm bereits bekannte rote Indikator die Anzahl der neuen Nachrichten an. Über das Home-Icon auf der linken Seite der Statusbar gelangt er zurück zur Startseite von eStudy2Go. Über das Plus-Icon auf der rechten Seite der Statusbar hat er die Möglichkeit, eine neue Nachricht zu verfassen.


Nach einem Touch auf den Ein- bzw. dem Ausgang bekommt er eine Übersicht über die entsprechenden Nachrichten. Zeilenweise werden ihm die Betreffe angezeigt, wobei neue Nachrichten durch einen hellblau schimmernden Kreis auf der rechten Seite sofort erkennbar ins Auge springen.



In der Nachricht-Detail Ansicht wird die Nachricht gelesen. Über die Icons am unteren Ende der Seite kann der Benutzer die Nachricht beantworten, an alle beantworten (inklusive evtl. vorhandenen CC's), weiterleiten oder löschen.


Der Nachricht-Verfassen Dialog

In der Nachricht-Verfassen Ansicht kann er durch das selbsterklärende Ausfüllen von Empfänger, Betreff und Text intuitiv seine Nachrichten portalintern verschicken.

Datenbank auf Clientseite

localStorage und sessionStorage

Aufgrund der geringen Menge an Daten auf sämtlichen im Nachrichten-Modul angezeigten Seiten wird auf eine clientseitige Datenbank verzichtet.

Bonusaufgabe "GPS-Scanner"

Eine Bonusaufgabe in diesen Kurs bestand in der Konzeption und Implementierung einer (kleinen) iPhone-App nativ durch die Xcode-SDK in Verbindung mit Objective C.

Beschreibung der GPS-Scanner App


In diesem Rahmen entstand ein GPS-Scanner, der die aktuelle GPS-Daten ausliest und auf einer GoogleMaps-Karte anzeigt. Darüber hinaus hat der Benutzer die Möglichkeit, sich den Standort als Adresse anzeigen zu lassen.

Sobald sich der Benutzer bewegt, verändert sich auch der Standort entsprechend. Er kann außerdem mit Fingergesten in den Standort hinein und aus dem Standort heraus zoomen.

Technische Details

Zur Umwandlung der GEO-Koordinaten in eine Adresse wurde die MKReverseGeocoder-Klasse benutzt. Die Ortung des Standpunkts (durch die Property "showsUserLocation") und Anzeige von diesem auf der Karte wurden durch die MKMapView realisiert.


--Christian.ketter:mni 10:41, 1. Sep. 2010 (CEST)

Weiterführende Verweise

Die Mobile-Variante in der aktuellsten Version (viertelstündig aktualisiert): https://estudy.fh-giessen-friedberg.de/mobile/index.html

Die Mobile-Variante in der Produktion: https://estudy.fh-giessen-friedberg.de/mobile/index.html