iPad Magazine Interface Design

Ein großartiges Magazin ist mehr als nur eine Sammlung von Artikeln zu einem Thema oder einer Idee, es ist eine kuratierte redaktionelle Erfahrung. Durch Layout-Design und -Kopie können Sie an verschiedene Orte gebracht und neue Dinge gelernt werden. Die Veröffentlichung des iPad hat das jüngste Kapitel in der Geschichte des Magazinsentwurfs begonnen. Ich habe mit einem Startup, Sideways.com, zusammengearbeitet, um eine eigene Plattform für die Veröffentlichung von Zeitschriften zu erstellen.

Dieser Beitrag ist Tag 10 unserer Interface Design Session. Creative Sessions

Wo wir angefangen haben

Vor der Veröffentlichung des iPad haben wir an einem iPhone-Magazin namens TapTilt gearbeitet, in dem wir einige unserer Ideen testen konnten. Langfristiges Ziel war es nicht nur, Zeitschriften zu veröffentlichen, sondern auch eine Veröffentlichungsplattform aufzubauen, mit der andere ihre Bücher und Zeitschriften problemlos als App in den iTunes Store holen können.

Von Natur aus hat iTunes bereits ein Buchformat (ePub) und es gibt eine Kindle-App auf iPhone und iPad, die ebenfalls das ePub-Format verwendet. EPubs funktionieren gut für Text, aber nicht für interaktivere Erlebnisse. Zeitschriften, Kinderbücher, Graphic Novels und andere Publikationen, die stark auf Illustrationen oder Interaktionen angewiesen sind, werden in einem ePub-Dokument nicht gut bedient.

Andere Magazine betrachten

Printmagazine sind weitgehend auf ganzseitige Anzeigen angewiesen, um ihre Produktionskosten zu decken. Bei der Portierung ihrer Inhalte auf das iPad im vollständigen Seitenformat war dies eine einfache Möglichkeit, diese Anzeigen intakt zu halten. Sie zögern auch, ihre Formate und Inhalte drastisch zu ändern, da die digitalen Ausgaben nicht zu ihrer Gesamtauflage zählen. Um sicherzustellen, dass die Leser diese Anzeigen sehen, bleiben die meisten Zeitschriften bei der Idee, links und rechts durch Seiten zu blättern, als würden sie ihre Druckversionen sehen. Zusätzlich zum Navigieren durch Wischen hin und her fahren viele frühe iPad-Magazine mit neuen Navigationsarten.

Als wir uns die verfügbaren Zeitschriften für das Gerät angesehen haben, wollten wir sehen, was sie gut machen und wo sie sich verbessern können. Die meisten brachten Videos in ihre Publikationen und versuchten, mit den beiden verschiedenen Bildschirmausrichtungen des iPads umzugehen. Diese frühen Zeitschriften-Apps nutzten jedoch nicht einige der grundlegenden Funktionen des Internets, wie z. B. Hyperlinks. Viele haben nicht einmal Live-Text (der Text wird als Bild oder als nicht lesbares Format gerendert), sodass Sie nicht danach suchen können Text kopieren, einfügen oder die Größe ändern, um die Lesbarkeit zu verbessern.

Die bislang bekannteste (und erfolgreichste Magazin-App) auf dem iPad war die Juni-Ausgabe von Wired. Ein Blick hinter die Kulissen der Konstruktion der App verdeutlicht die Herausforderungen, denen sich viele Zeitschriftenverlage stellen müssen, wenn sie ihre Inhalte portieren.

Starten einer Plattform (Erstellen mit HTML und CSS)

Viele der Schwächen, die wir in anderen Zeitschriften gefunden haben, sind auf unsere Erfahrungen beim Aufbau des Internets zurückzuführen. Sie sind Zeitschriftenverleger, die versuchen, das Web zu verstehen, und wir waren Webdesigner, die die Zeitschriftenveröffentlichung verstehen wollten. Wir könnten das Teilen und Diskutieren über soziale Medien wie Twitter und Facebook nutzen. Wir könnten unsere Musikrezensionen veröffentlichen, an denen der Tag veröffentlicht wurde, anstatt einen ganzen Monat auf die Veröffentlichung zu warten. Wir könnten auch in den iTunes Store integrieren, damit Benutzer die Songs direkt in der App vorhören können. Und dies kratzt nur an der Oberfläche dessen, was Sie in einer Magazin-App tun können.

Um all das zu nutzen, schien es ein Kinderspiel zu sein, HTML und CSS als unsere primäre Art der Bereitstellung von Inhalten zu verwenden. Wir hatten auch den zusätzlichen Vorteil, dass Webkit (Mobile Safari) unsere Layouts renderte. Das lässt uns mit HTML5 und CSS3 spielen, ohne sich um die Abwärtskompatibilität mit älteren Browsern kümmern zu müssen. Dies reduziert die Entwicklungszeit am Frontend erheblich.

Da die Navigation in einigen anderen von uns verwendeten Zeitschriften-Apps eine Inkonsistenz war, wurde es schon früh zu einer Priorität, mit etwas Universellerem zu experimentieren. Wenn Sie das Magazin im Hochformat anzeigen, erhalten Sie eine vollständige Seitenansicht, wobei die Navigation oben links auf dem Bildschirm angezeigt wird. Drehen Sie sich in das Querformat, um eine statische Navigation auf der linken Seite des Bildschirms anzuzeigen. In der nächsten Ausgabe versuchen wir, die Navigation von der Querformat-Orientierung zu entfernen und sie auf eine Schaltfläche nach oben zu verschieben, um mehr Platz für die Layoutgestaltung zu erhalten.

Laden Sie die Sideways App herunter

Die Veröffentlichung auf dem iPad steht erst am Anfang. Studien zur Benutzerfreundlichkeit (wie dieses von Jakob Nielsen) werden die Art und Weise, wie wir mobile Geräte gestalten, weiter prägen. Eine Sache ist sicher, es ist ein fesselndes Medium, für das man entwerfen kann.


Dieser Beitrag ist Tag 10 unserer Interface Design Session. Creative Sessions