heise online für iPhone und iPad

Donnerstag, 19. Januar 2012
Nachdem wir bereits im letzten Jahr die heise Android App für den Zeitschriften Verlag verwirklicht haben, flatterte kurz darauf der Folgeauftrag ins Haus: eine Komplett-Überarbeitung der aktuellen iPhone-App als Universal App, d.h. auch für's iPad.
Und jetzt ist es soweit: Die heise online iOS Universal App ist im App Store gelandet.

Wie auch schon für Android haben wir Konzept, Design und Entwicklung komplett übernommen (ausgenommen Preisvergleich). Die Idee war, die besten Ideen und Konzepte aus der ursprünglichen iPhone App und der Android App herauszupicken und das ganze mit neuen Ideen von heise und uns, sowie heise-Benutzermeinungen zu einer neuen Super-App (natürlich alles im Rahmen des Budgets) zu verschmelzen. Ob uns das gelungen ist, mag der geneigte Leser und Benutzer selbst entscheiden.

Screenshots: Dashboard iPhone und iPad


Dashboard iPad Dashboard


Konzeption einer Universal App - Wie fängt man an?



Wireframe iPhone DashboardAm Anfang sind die Vorgaben, User-Kommentare, Brainstorming, die Schranken des Angebots. Scribbles werden angefertigt und weggeworfen, einzelne Wireframes dem Kunden präsentiert, übearbeitet, wieder präsentiert. Man kennt das ja.

Sobald man sich jedoch auf eine grobe Richtung geeinigt hat, starten wir mit dem Clickdummy. Und hier hören wir nun oft die Frage: iPhone oder iPad zuerst konzepten? Beides gleichzeitig? Was ist sinnvoller?

Wir haben bis jetzt recht erfolgreich mit der Variante "erst iPhone, dann iPad" gearbeitet. Gemäß dem "mobile first"-Ansatz ist man so gezwungen, sich zunächst auf's Wesentliche zu konzentrieren. Was auf einen iPhone-Screen passt, passt immer auch auf einen iPad-Screen, andersherum wird jedoch kein Schuh daraus. Zudem ist es immer einfacher, noch etwas hinzuzufügen, als etwas zu entfernen, für das man auf dem kleineren Screen keinen Platz mehr hat.

Noch wichtiger jedoch ist, dass man sich so jede Menge Arbeitsaufwand spart. Bis ein Clickdummy-Konzept fertig und für den Kunden zufriedenstellend ist, sind mehrere Iterationen nötig. Müssen Änderungen erstmal nur in einen Clickdummy eingearbeitet werden, anstatt in zwei, ist nur die Hälfte an Aufwand nötig um den Clickdummy zu updaten.
Ist das Konzept für's iPhone dann fertig und der Kunde damit zufrieden, können viele Elemente aus dem iPhone-Clickdummy im iPad-Clickdummy wiederverwendet werden, was selbstverständlich auch wieder Zeit und damit Aufwand einspart.

Einflüsse der Android App


Dashboard


Dashboard - AndroidDashboard
Ins Konzept der App sind viele Learnings aus der Verwendung der Android App eingeflossen. Dazu gehört unter anderem der Aufbau des Dashboards. Die zweigeteilte, aufklappbare Darstellung der Themen-Websites in der heise online Android App hat sich beispielsweise nicht so richtig bewährt. Von daher entschieden wir uns für die iOS App, alle Themen-Websites sofort anzuzeigen und dafür die Favoriten an erster Stelle hervorzuheben.

Forum


Forum - AndroidForum - ThreadAuch beim Forum haben wir dazu gelernt. In der Android App hatten wir uns dazu entschieden, alle Einträge in einem Thread auf gleicher Ebene zu betrachten, damit auf dem kleinen Screen mehr zu sehen ist. Leider büßte das Forum so einiges an Übersichtlichkeit für die User ein. Für die iOS App haben wir nun einen Weg gefunden, Platz zu sparen und gleichzeitig die Baumstruktur der heise online Foren auf's Smartphone zu übertragen, ohne die App unnötig zu verkomplizieren. Dafür haben wir uns an der mobilen heise Website orientiert, die heise selbst im vergangenen Jahr realisiert hat.

Navigationskonzept


Channelansicht - AndroidChannelübersichtAndere Konzepte aus der Android App, wie die Navigation zwischen den Themen-Websites, können nicht für's iPhone übernommen werden, weil es keine entsprechenden UI Elemente dafür gibt. Anstelle dessen haben wir die Tabs aus der iPhone-Vorgängerversion verwendet, die ihren Zweck ja auch erfüllen. Sie führen den Benutzer schnell zu seinen favorisierten Themen-Websites und bieten auch einen Weg zu den weiteren Themen-Websites.
Damit hat sich die "Tabfrage" aber noch nicht erledigt. Denn was tun mit den Tabs beim iPad? Tabs im iPad sind nämlich nicht besonders benutzerfreundlich und wirken auch oft deplatziert. Sowohl, wenn sie über die gesamte Breite gehen, als auch, wenn sie nur einen Teil der SplitView betreffen. Sinnvoll sind die Tabs an der Stelle aber - aus oben genannten Gründen - schon. Hier sind wir dann wieder einen Schritt zurück zu der Android-Navigation gegangen, wo die Auswahl der Themen-Websites über ein Dropdown realisiert wird. Im Gegensatz zum iPhone, ist das beim iPad auch üblicher und deutlich eleganter als die Tabs.

Vielen Dank an das heise Team für die produktive, unkomplizierte und sehr angenehme Zusammenarbeit!

Link zum App Store: heise.de iPhone und iPad App




Schreibe einen Kommentar

Achten Sie darauf, die erforderlichen Informationen einzugeben (mit Stern * gekennzeichnet).
HTML-Code ist nicht erlaubt.