Wie man mit diesen Regeln umgehen kann, zeigen zwei Adaptionen von Printzeitschriften auf das junge Medium iPad:

Die Spiegel-App für das iPad wurde stark kritisiert. So wurde von vielen bemängelt, das Print-Layout wäre vollkommen uninspiriert übernommen worden ohne auf die neuen Gegebenheiten des iPads einzugehen wobei auch viele unschöne typographische Fehler auftraten.

Das US-Magazin Wired zeigt wie es trotz noch bestehender Mängel besser geht und gilt trotz grafischer Kinderkrankheiten als wegweisend im iPad-Publishing.

Wired und Problemkind Spiegel auf dem iPad

So designt man auf dem iPad

Der kleine Bildschirm mit einer pixeldichten 1024×768-Auflösung bietet leider nicht viel Platz für ein ausgefallenes Seitenlayout. Daher sollte der Fokus auf Inhalt und Weißraum liegen, ohne ablenkende irreführende Verschnörkelungen. Zudem kommt der breite schwarze Rahmen des Gerätes hinzu, der jedes Design zunehmend eingrenzt und schmälert.

Nur eine Handbewegung des Benutzers entscheidet zwischen Hoch- und Querformat. Das haptische dreidimensionale Blättererlebnis gibt es nun also auch in 2D. Das bedeutet, Inhalte müssen variabel angelegt werden, hochausgeklügelte Spalten-Raster und Doppelseiten-Konstrukte aus Printzeiten gehören auf dem iPad der Vergangenheit an. Flexibilität, Reduzierung und Interaktivität sind die großen Schlagworte beim iPad-Design.

Viel mehr als wir es bereits im Internet gewöhnt sind, geht es beim iPad um Beständigkeit von Funktionselementen z.B. der Position und dem Aussehen von Navigationspunkten.

Mehrspaltiges Leseproblem auf dem iPad

Von einem Spaltenlayout ist eher abzuraten. Auch im Querformat lässt sich ein einspaltiger Text mit viel Freiraum oder Bild schneller lesen als mehrspaltige Texte, die den Lesefluss irritieren – vor allem wenn in 2D geblättert wird. Und im Gegensatz zum Print hat das iPad keinerlei Seitenbeschränkung.

Oberstes Gebot beim iPad-Publishing: digitaler Text soll schnell und bestmöglich lesbar sein. Daher sollten an die Bildschirmdarstellung optimierte Screen-Fonts verwendet werden, um dem Effekt des sogenannten Schrift-Renderns, der den Text unscharf macht, auf dem iPad entgegenzuwirken. Schriftgröße, Zeilenabstand und Spaltenabstand müssen großzügiger gewählt werden je kleiner der Bildschirm ist.

Werbung sollte eher vollflächig eingebunden werden. So hat sie genug Platz, wird dennoch als weniger störend empfunden und eventuell sogar als kleine Atempause zwischen all den ganzen anderen Inhalten angesehen.

Vor allem muss die iPad-App interaktiv sein. Die Kosten-Nutzen Relation muss überzeugen. Denn während zu Anfang noch der Hype wirkt, als erste App zu erscheinen, so zeigt der Spiegel, daß dieser Glanz schnell verzogen ist, wenn die App nicht hält, was die Papierausgabe verspricht. Sicher ist: digitale Inhalte müssen Mehrwert bieten gegenüber ihrer Ausgabe auf dem Papier.

Die Argumente, jederzeit mobil und abrufbar zu sein, überzeugen längst nicht jeden Nutzer, eine digitale Zeitschriftenausgabe zu kaufen. Denn der Preis stellt auch oft noch eine Schwelle dar: dank Apples Anteil an dem Kaufpreis kann der Preis für die App sogar über dem Preis der Printausgabe liegen (Spiegel-Printausgabe für 3,85 EUR,  Spiegel-iPad-App 3,99 EUR).

Fazit

Eine iPad-App muss den hohen Ansprüchen digitaler Leser gerecht werden, um die User zufrieden zu stellen. Es müssen Funktionen vorhanden sein wie z.B. eine ausgefeilte Volltextsuche, Zoom- und Kopierfunktion, weiterführende Links, Videos, Audio-Files, die Möglichkeit in alle Richtungen zu Blättern, mit Querverweisen zu navigieren usw.

Die Möglichkeiten des iPads müssen sich wohl noch erst entwickeln, aber es zeigt sich schon jetzt, „iPad is not iPaper“ (Erik Spiekermann). Eine Zeitschrift auf dem iPad will mehr sein als ein digitaler Export seiner Print-Ausgabe, um diesem neuen Medium gerecht zu werden.

Ich bin gespannt auf die Entwicklung und hoffe, dass in Zukunft mehr glänzende iPad-Magazine wie das Wired aus dem Boden sprießen, vor allem auch im deutschsprachigen Raum.

Ein gutes Design verstärkt hierbei den Impuls zur Nutzung des Buttons. Das Magazin Smashingmagazin hat hierzu eine sehr gute Zusammenfassung verfasst, worauf zu achten ist:

1. Aufmerksamkeit durch Button-Größe
   Je größer ein Element der Webseite, desto wichtiger erscheint es. Call-to-action-Buttons sollten daher größer als andere ihn umgebende Elemente sein. Wenn mehrere Buttons vorhanden sind, sollte der (für das Unternehmen) wichtigere größer sein als alle restlichen Buttons.
2. Aufmerksamkeit durch prominente Platzierung
   Eine prominente Platzierung kann beispielsweise im Headerbereich oben oder in der absoluten Mitte der Inhaltsseite erreicht werden
3. Hervorheben durch Nutzung kontrastreicher Farben
   Starke, kontrastreiche Farben werden vom Auge sofort wahrgenommen. Hebt sich der Button gestalterisch von der restlichen Farbgebung ab wird die Aufmerksamkeit sofort darauf gelenkt.
4. Anbieten von alternativen Optionen
   Viele Webseiten verfolgen mehrere Konversionsziele und auch Besucher haben teilweise unterschiedliche Bedürfnisse: Der Eine möchte sofort bestellen – der andere erst noch weitere Informationen erhalten. Hier sollten den zwei Buttons unterschiedliche Gewichtung gegeben werden: Der “Kaufen” Button kann durch die bereits beschriebenen Maßnahmen (insbesondere farbliche Herorhebung) gegenüber dem weniger wichtigen Button hervorgehoben werden.
   
5. Aktionsaufforderung durch das Vermitteln von Dringlichkeit
   Ein einmaliges Angebot zu erhalten, was nur kurze Zeit zur Verfügung steht fördert die Aktionslust. Button-Bezeichnungen wie “Jetzt” oder Erklärung wie “Nur kurze Zeit”oder “Einführungspreis”vermittelt das Gefühl ein Schnäppchen zu machen – bei dem man besser früher als später zuschlägt
6. Einfachheit der Aktion transportieren
   Ein oft übersehener Punkt in der Gestaltung von Buttons (und Formularen).Erfährt der Besucher, dass die Anmeldung zum Newsletter nur 30 Sekunden dauert, ist die Hürde sich anzumelden um Einiges geringer.
7. Den Besucher darüber aufklären was zu erwarten ist
   Ganz klassische Kardinalfehler, der mir insbesondere bei Newslettern zuhauf begegnet. Viele Webseiten, Webshops, Online-Magazine bieten Newsletter an, aber sehr wenige klären mich darüber auf, was ich mit der Anmeldung wirklich zu erwarten habe (Vorteile, Inhalte, Rhythmus).

Das sind alles keine neuen, erstaunlichen Erkenntnisse – trotzdem werden sie nicht immer beherzigt – was zu Lasten der Konversionsraten geht.

Linktipps zum Weiterlesen mit vielen Beispielen:

Call to Action Buttons: Examples and Best Practices

80 Examples of Add to Cart Buttons for Design Inspiration

Add-to-Cart E-Book (deutsch)

So begann ich meine Suche bei Google. Suchwörter waren nach einigen Versuchen gefunden: portabel, ladegerät, akku, iphone, usb. In verschiedenen Kombinationen gesucht fand ich schnell Tests, Onlineshops und Preisvergleichportale. Zuerst viel mir natürlich Googles eigene Produktsuche Froogle auf. Froogle ist schön aufbereitet, einfach zu überblicken und gut zu bedienen. Nebenbei ist es natürlich noch prominent im Suchergebnis dargestellt. Schnell hatte ich die ersten Angebote gesichtet.
Deshalb mein Tipp 1: Produkte unbedingt in Froogle einstellen.

Schnell war klar, dass ich von Ladegeräten und Akkus wenig Ahnung habe. Die Amperestunde mAh war mir zwar ein Begriff, dass damit aber auch die zur Verfügung stehende Ladung von Akkus beschrieben wird nicht. Ich wusste auch nicht, wieviel Ladung ich brauchte um ein iPhone einmal aufzuladen. Also musste ich Google befragen und habe durch einige Suchen die Zahl 2.200 mAh herausgefunden.
Deshalb mein Tipp 2: Produktbeschreibungen in Onlineshops sollten auch für Laien verständlich sein. Technische Daten sind da zwar wichtig und richtig, sollten aber auch erläutert werden.

Positiv war, dass alle Onlineshops, soweit ich das oberflächlich beurteilen konnte, technisch funktioniert haben und viele der Shops auch über Lagerbestand und Lieferzeit Auskunft gaben. Die Bestellung in 24h zu erhalten, stellte sich allerdings schnell als unmöglich heraus. Also suchte ich nach einem Onlineshop mit Ladengeschäft in der Region Stuttgart. Hier scheiterten alle Preisvergleichsportale, einschließlich Froogle. Ich musste also händisch in jedem Onlineshop einzeln nach der Adresse suchen. Nun fiel mir die teilweise katastrophale Usability der Shops auf. Glücklicherweise suchte ich aber nur die Adresse und die war über das Impressum mehr oder weniger schnell gefunden.
Deshalb mein Tipp 3: Die Usability des Onlineshops sollte geprüft und optimiert werden. Besucher wollen gesuchte Informationen möglichst schnell erhalten.

Ich war froh, als ich dann endlich einen Shop gefunden habe, der aus der Region kam und neben der Produktbeschreibung ein grünes Symbol mit der Erklärung “Auf Lager (1 Tag Lieferzeit)” darstellte. Ich bestellte den Artikel und markierte die Option “Selbstabholung”. Man wies mich darauf hin, dass ich eine E-Mail erhalte, sobald der Artikel zur Abholung bereitliegt. Als ich nach einer Stunde immer noch keine Abholbenachrichtigung erhielt habe ich die Produktseite nochmals aufgerufen, auf der das grüne Symbol immer noch angezeigt wurde. Dann las ich die Hilfeseite, auf der die Symbole erläutert wurden. Grün ist nicht hellgrün. Grün bedeutet der Artikel ist beim Lieferanten auf Lager, hellgrün bedeutet, der Artikel ist im Shop auf Lager. Die Abholung ist nur bei hellgrün möglich.
Deshalb mein Tipp 4: Siehe auch Tipp 3. Die Usability ist wichtig. Nicht nur Symbolik, sondern auch Hinweistexte auf der Seite müssen so formuliert sein, dass der Kunde schnell weiß, was gemeint ist.

So bringt mir die Bestellung nichts, also stornierte ich den georderten Artikel. Leider gab es keine Stornofunktion im Kundenbereich des Onlineshops, dafür eine E-Mailadresse. An die wendete ich mich dann auch. Allerdings wusste ich nicht ob meine E-Mail ankam. Nach vier Stunden rief ich an und fragte ob mein Stornierungsgesuch angekommen sei. Die Kundenberaterin konnte keine E-Mail finden, die Stornierung war dann von ihr innerhalb einiger Minuten erledigt.
Deshalb mein Tipp 5: Bestätigungen nach Erhalt einer E-Mail sind hilfreich, viele Ticketsysteme unterstützen solche automatischen Meldungen. Oder gar nicht erst E-Mails entstehen lassen, in dem Funktionen wie die Stornierung einer Bestellung über den Kundenbereich online angeboten werden.

Die Wartezeit suchte ich natürlich weiter und fand schnell einen weiteren Onlineshop aus der Region. Auch dort war vermerkt, dass der Artikel auf Lager sei, allerdings konnte ich bei der Bestellung keine Option “Selbstabholung” aktivieren. Nicht weiter tragisch, der Onlineshop pries sein Ladengeschäft mit einer Telefonnummer an. Ich rief an um anzufragen, ob eine Selbstabholung auch möglich sei. Leider ging keiner ans Telefon. Auch nach mehreren weiteren Anrufversuchen war niemand niemand erreichbar. Ich gab entnervt auf.
Deshalb mein Tipp 6: Wenn eine Telefonnummer genannt wird, sollte diese Nummer auch irgendwie erreichbar sein. Für einen Onlineshop gilt da dasselbe wie für einen normalen Laden in der Stadt.

Nächster Versuch: Da das gewünschte Produkt einfach nicht zu finden war, änderte ich meinen Wunschartikel und suchte wieder nach einem Onlineshop. Ein großer Computer-/Elektronikanbieter war schnell gefunden. Leider war der Artikel aber in den Filialen nicht zu erhalten, dafür in der Versandzentrale. Da aber der Versand in 24h nicht möglich ist, rief ich an und fragte, ob es denn möglich sei, den Artikel dort auch abzuholen (die Versandzentrale war in der Nähe). Das Call-Center beantwortete die Frage schnell mit einem “Nein”.
Deshalb mein Tipp 7: Nicht immer praktikabel, aber Flexibilität und Kundenorientierung anzubieten und auch “unmögliche” Sachen möglich zu machen wäre optimal. Das gilt nicht nur für Onlineshops.

Einen ähnlichen Artikel habe ich dann übrigens bei Amazon gefunden und per Express bestellt. Inklusive aller gewünschten Benachrichtigungs-E-Mails. Die Bestellung kam wie versprochen am nächsten Tag vor 12:00 Uhr an.

Deshalb Tipp 8: Vieles bei Amazon abschauen :-).

Jakob Nielsen, bekannter Usability-Experte aus den USA, war von der ersten Stunde an dabei. Seit 25 Jahren beschäftigt er sich nun mit dem Thema Usability. Die Grundsätze in der Gestaltung benutzerfreundlichen Designs seien heute wie damals die gleichen geblieben. Seine Vorschläge für das Vorgehen:

• Konzentrieren Sie sich auf den Benutzer und betreiben Sie Feldforschung bevor Sie ein Design entwickeln
• Führen Sie empirische Usability-Studien während der Entwicklung durch.
• Nutzen Sie einen iterativen Ansatz im Design-Prozess

Was macht nun eine besonders benutzerfreundliches Design aus? Auch hier hat Jakob Nielsen durch seine “Usability 101” einen Überblick geschaffen und zeigt die 5 wichtigsten Komponenten auf:

1. Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
2. Efficiency: Once users have learned the design, how quickly can they perform tasks?
3. Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
4. Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
5. Satisfaction: How pleasant is it to use the design?

Auch wenn Nielsen in der Vergangenheit immer wieder in der Kritik war – insbesondere durch seine teilweise konservativen Ansichten bzgl. des Einsatzes von neuen Technologien: Es lohnt sich einen Blick in sein Kompendium von Beiträgen und Erkenntnissen zum Thema Usability zu werfen. Sie bieten einen Einblick in die Geschichte der Usability von 1995 bis heute.

Der Usablilty-Guru Jacob Nielson veröffentlicht jedes Jahr eine Hitlist “10 Fehler im Webdesign” unter denen “nicht scannbarer Text” jedes Jahr ganz oben steht. Ziel eines für das Web geschriebenen Textes ist es daher ihn leicht lesbar zu machen, um seine Inhalten auch an den Mann bzw. die Frau zu bringen.

Probieren Sie es selbst aus, durch:

• Hervorheben von wichtigen Keywords (z.B. fett oder kursiv markieren)
• aussagekräftige Untertitel
• Nummerierung und Aufzählungszeichen
• Nennung einer Idee pro Absatz
• kurze Paragraphen
• Beginnen des Artikels mit dem Fazit (“inverted pyramid”)
• Reduzierung der Wortanzahl auf die Hälfte
• einem einfachen Schreibstil mit kurzen Sätzen

Ich beobachte auch sehr oft, dass das Potential für kurze Erklärungen, z.B. zu Produkten nicht vollends ausgeschöpft wird. Allzuoft treffe ich nämlich unter der Kategorie “Produkte” eine leblose Liste von Produktnamen an, auf die ich klicken soll. Aber gerade hier ist der perfekte Platz das Produkt und seine Vorteile kurz zu erklären. Erst dann hat Ihre Zielgruppe auch einen Grund sich das einzelne Produkt genauer anzuschauen.

Übernehmen Sie also nicht einfach Ihre Broschüren-Texte für Ihre Webseite. Machen Sie es den Webseitenbesuchern so leicht wie möglich die Inhalte aufzunehmen, durch optimierte Texte, guter Usability, Beratungs-Funktionen und Grafiken/Bildern. Erst dann wird er sich die Zeit nehmen sich eine Produktbroschüre mit Detailinfos genauer anzuschauen.