Archiv mit Beiträgen in der Kategorie ‘Usability’

How to iPad

Astrid Sackel veröffentlicht am 28. Juni 2010 von
Team-Autor: Astrid Sackel Xing

Bereits 3 Millionen verkaufte Exemplare nach nur 80 Tagen zeigen, dass das iPad mehr ist als nur ein Spielzeug. Es gilt vor allem für die Verlagswelt als revolutionär. Doch eines muss man dabei beachten, auch wenn es wirkt wie eine Kreuzung aus Touchscreen Handy und Laptop: Das iPad ist ein neues Medium und hat damit seine ganz eigenen Regeln.

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

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

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.

Button-Design und die Kunst der Besucherführung

Nina King veröffentlicht am 10. Dezember 2009 von
Team-Autor: Nina King Xing

Wie bereits in unserem Artikel “Button-Faktor” beschrieben sollte die Aufforderung zur Aktion (Call-to-Action) auf keiner Internetseite fehlen. In Webshops ist das selten der Fall – wohl aber auf vielen Unternehmensseiten. Spätestens wenn die Awareness dafür geschaffen wurde, dass über das Internet Kontakte und damit Umsätze generiert werden können ist er aber da: Der Button, der zum Konversionsziel (Kauf, Newsletterabo, PDF-Download etc.) führt.

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)

Der Button-Faktor

Nina King veröffentlicht am 27. August 2009 von
Team-Autor: Nina King Xing

Meine kleine 4jährige Nichte Lena macht es vor: Wo immer sich ein Button auf erklimmbarer Höhe befindet wird er auch gedrückt. Licht an, Licht aus. Radio an, Radio aus. Was für ein Spaß!

© Volha Khakhlova - Fotolia.com

Vergleichen wir das mit unserem Verhalten im Internet sieht das ähnlich aus – wenn es eine Interaktionsmöglichkeit in Form eines Start- Kontakt-, oder Infobuttons gibt, nutzen wir diese auch. Ein Button an sich ist schon als Call-to-Action zu werten. Er führt dem Besucher nicht nur konsequent vor Augen, was möglich ist, sondern gibt einen konkreten Anreiz: Schreite in Aktion! Und befriedigt ganz nebenbei unseren natürlichen Spieltrieb.

Die Schande ist nur: Viele Webseiten, die ich mir ansehe (und das gerade im B2B-Bereich) besitzen keinen Button. Da werden zeilenweise Details und Vorteile des Produkts genannt und man fragt sich als Besucher schließlich: “Und was jetzt?”. Oftmals bleiben am Ende nur die Kontaktdetails aus dem Impressum mit direktem Draht zur Empfangspforte. Kundenservice ist etwas Anders! Und in Online-Shops fehlt der “Jetzt kaufen”-Button doch auch nicht!

Besonders schön hat das z.B. der Portalfräsmaschinenhersteller F. Zimmermann auf Produktdetail-Level gelöst. Ein Button “Ansprechpartner”, ein Button “Prospektdownload” zu jedem Produkt. Endlich wissen wir Webseitenbesucher wieder, was zu tun ist!

Unsere neue Kaffeemaschine – aus der Sicht einer Designerin

Astrid Sackel veröffentlicht am 29. Juli 2009 von
Team-Autor: Astrid Sackel Xing

Design, Usability und Genuss-Experte WMF 1000

Das MOSAIQ MEDIA Team hat ein neues wichtiges Mitglied aufgenommen: Unsere neue Kaffeemaschine, die WMF 1000. Ein Glanzstück in unserer Küche, einfach zu bedienen und der steigende Kaffeekonsum bestätigt ihren Ruf als professionellen Kaffeespezialitäten Vollautomat. Bereits 30 Minuten nachdem das Paket geliefert wurde, war die Maschine einsatzbereit und der erste Kaffee wurde verkostet, Latte Macchiato, wenn schon, denn schon, mit cremigem Milchschaum und Schichten. An den Einstellungen musste noch etwas gefeilt werden, aber nachdem Mahlgrad und Kaffeemehlmenge – “entscheidend für die Ausbildung von Körper oder Fülle des Kaffees” optimiert wurden, und einige Kaffees durchliefen, bildeten sich auch mehr und mehr die Latte Macchiato Schichten heraus.

Ein wahres Usability-Vorzeige-Exemplar ist die Machine auch. Auf einfachste und schon fast geniale Weise werden die vier Hauptkaffee-Spezialitäten in einem Kreis angeordnet: Espresso, Café Crème, Cappuccino und Latte Macchiato. Prägnante und intuitive Icons verdeutlichen die Kaffeeauswahl. Statusmeldungen und Anweisungen für den Benutzer (“Auslauf nach unten in Getränkeposition”) werden auf dem Display oberhalb angezeigt. Die Maschine kommuniziert quasi mit dem Benutzer. Somit wird das nervige Lesen der Bedienungsanleitung am Anfang fast überflüssig.

Und die Maschinen kann noch mehr: Cappucino, Cafe Latte, Espresso, Cafe Creme – unser neues Herzstück kann alles! Selbst Kakao-Genießer und Tee-Trinker kommen hier zu ihrem Genuss und das tägliche “Kaffeepause?!” entwickelt sich zu einem Erlebnis ganz besonderer Art.

Kurzum mich hat das Team-Mitglied überzeugt und ich heiße es herzlichst willkommen bei MOSAIQ.
Selbst wenn der Vollprofi etwas mehr Pflege und Zuneigung verlangt wie unser vorheriger Kandidat (Reinigungstablette rein und los gehts), so investieren wir diese Zeit doch gerne für einen bessere Kaffeegenuß.

Kritiker sind gerne eingeladen zum Selbsttesten.