Der folgende Beitrag wurde von Ben Terrill verfasst. Ben arbeitet für Mobify und leitet das Team, das seinen Großkunden (wie Starbucks und Threadless) dabei hilft, exzellente mobile und Tablet-Erlebnisse zu schaffen. Ben ist Co-Autor des E-Books 50 Ways to Please Your Customers: Ein Leitfaden für Best Practices im Mobile Webdesign.
Julie Szabo von Mobify schrieb mir, um das Buch ein wenig zu bewerben. Ihr wisst, dass ich das selten tue – also nur zur Klarstellung: Dies ist kein gesponserter Beitrag, es wurde kein Geld ausgetauscht, und das Buch ist gut und kostenlos.
Ich schlug vor, dass sie etwas als Gastbeitrag schreiben, und sie kamen dem mit einigen "Best of"-Auszügen aus dem Buch nach. Ich habe hier und da ein paar Dinge hinzugefügt, wo ich zusätzliche Informationen zu teilen hatte. Viel Spaß!
Bei Mobify haben wir kürzlich Daten von mehr als 200 Millionen Besuchern der Websites unserer E-Commerce-Kunden analysiert und festgestellt, dass 27 % der Website-Besuche von Personen stammten, die auf Smartphones und Tablets einkauften. Für einige Länder, wie Brasilien, stellten wir fest, dass fast die Hälfte des gesamten E-Commerce-Traffics über mobile Geräte lief.
Es ist heute Realität, dass jedes Unternehmen und jeder Publisher im Web eine Mobile-Web-Strategie benötigt. Wir haben ein E-Book geschrieben, wie man eine großartige mobile Website erstellt, und hier sind neun Tipps aus dem Buch zur Optimierung Ihrer Website für all diese mobilen Website-Besucher.
Hinweis und Enthüllung (AKA: Progressive Disclosure)
Mobile Geräte sind klein und die meisten Websites präsentieren viele Informationen. Verwenden Sie progressive disclosure, um den Nutzern zu zeigen, welche Aktionen sie ausführen können, um die gesuchten Inhalte zu entdecken. Überladen Sie sie nicht sofort mit einem Berg an Informationen. Lassen Sie sie stattdessen Inhalte erweitern oder enthüllen, wenn sie sie benötigen.
Akkordeons können süße Musik spielen
Akkordeons können sich als effektive Taktik erweisen, um Inhalte anzuzeigen, ohne die Seite ins Unendliche und darüber hinaus zu dehnen. Verwenden Sie sie im richtigen Kontext. Behalten Sie diesen Kontext bei. Stellen Sie sicher, dass Sie ein konsistentes Zeichen für das Erweitern und Zusammenklappen bereitstellen.
Beispiel aus Brad Frosts Pattern Library auf CodePen.
Karussells machen Nutzer glücklich
Karussells können die perfekte Lösung für Bilderschauen, Hero Images und verwandte Inhalte sein. Stellen Sie sicher, dass Sie Ihren Nutzern anzeigen, wie viele Elemente im Karussell vorhanden sind und wo sie sich gerade befinden. Wenn Sie Ihren Slider automatisch durchschalten lassen, stellen Sie sicher, dass Sie die automatische Weiterleitung stoppen, wenn der Nutzer beginnt zu interagieren.
Respektieren Sie die dicken Finger und wackeligen Taps Ihrer Nutzer
Keiner von uns ist auf seinen mobilen Geräten so geschickt, wie wir es gerne wären. Wir alle können unter leichten "dicken Finger"-Symptomen leiden. Gestalten Sie Ihre Aktionen also entsprechend. Machen Sie die Berührungsziele groß. Wir empfehlen 40px mal 40px. Geben Sie den Zielen auch viel Abstand. Wir empfehlen mindestens 10px Abstand um die Ziele. Primäre Aktionen sollten immer groß und antippbar sein.
Anmerkung des Herausgebers: Apple empfiehlt 44×44. Mehr Infos.
Sparen Sie Zeit mit schriftenbasierten Icons
Wir ♥ Icons! Sie peppen Ihre Designs auf. Um die Verwaltung eines Sprite-Sheets mit Retina-Assets und kleineren Icons zu vermeiden, entscheiden Sie sich für ein schriftenbasiertes Icon-Set wie: Font Awesome; glyphish; iconsweets; oder symbolset. Oder erstellen Sie Ihre eigenen. Hier erfahren Sie, wie.
Anmerkung des Herausgebers: Ressourcen auf dieser Website umfassen einen Artikel über das richtige HTML für die Verwendung von Icon-Fonts, eine Zusammenfassung verschiedener Icon-Fonts und ein Screencast über die Erstellung eigener Icon-Fonts.
Nutzen Sie ein wenig Asset-Management-Magie
Generieren Sie Retina-Icons und verwenden Sie das CSS-Attribut background-size, um sie für Nicht-Retina-Geräte zu verkleinern. Sie werden immer noch gut aussehen und nicht viel mehr Platz beanspruchen als die kleineren Versionen.
Anmerkung des Herausgebers: Retina Media Queries sind ziemlich einfach. Auf diese Weise können Sie Retina-Bilder nur für Bildschirme bereitstellen, die sie verwenden können. Nicht-Retina-Bildschirme = 1x-Bilder in voller Größe, Retina-Bildschirme = 2x-Bilder in halber Größe.
Kennen Sie Ihre nutzbare Viewport-Größe und halten Sie sie flüssig
Sicher, die Bildschirmgröße eines iPhones 4 mag 320px mal 480px betragen (oder 960px mal 640px mit Pixeldichte in Apples Marketing), aber wie groß ist der tatsächliche Bildschirm mit dem Browser-Chrome? Das ist es, was Ihr Nutzer tatsächlich erleben wird. (Antwort: 320px mal 414px.) Kennen Sie Ihre nutzbare Bildschirmgröße und halten Sie Ihr Design flüssig, um sie in beiden Ausrichtungen (Hoch- und Querformat) zu nutzen. Nutzen Sie sie und machen Sie Ihre Nutzer glücklich.
Machen Sie Ihre Standard-Schriftgröße mindestens 14 px
Auch wenn das sehr groß erscheint, ist es das Richtige. Die einzige Ausnahme, bei der Sie kleiner gehen können (und nur bis zu einem Minimum von 12 px), sind sehr präzise Beschriftungen für Formulare.
Nutzen Sie die weite Welt der Geräte-APIs
Beim Umwandeln einer Desktop-Website für Mobilgeräte vergessen wir manchmal, dass Smartphones und andere mobile Geräte auf den Standort des Benutzers zugreifen, Anrufe tätigen, Bilder aufnehmen und vieles mehr können. Beschränken Sie Ihre Kreativität nicht auf das, was auf Ihrer Desktop-Website verfügbar ist.
Danke für den Tipp zur Auflösung, Chris :). Vor ein paar Wochen habe ich eine Benutzeroberfläche für Mobiltelefone entwickelt. Es war eine Katastrophe für mich, als ich nach einer optimalen Auflösung suchte. Jetzt bin ich mir bei der Auswahl sicherer. Die Karussell-Idee ist auch cool. Ich denke sogar darüber nach, meine Schritt-für-Schritt-Lösung neu zu implementieren. Und ich denke, Pfeile im Karussell wären nützlich, um dem Benutzer zu zeigen, dass er es tatsächlich vor- und zurückscrollen kann, anstatt die Schaltflächen unten zu klicken.
Danke, danke, danke für die maßgebliche Entscheidung bezüglich der Schriftgröße. Auf dass meine Kunden endlich nachgeben.
Huh. Okay, also ich finde Mobify wirklich ziemlich nett, und sobald ich auf Senden klicke, werde ich dieses E-Book herunterladen. Aber, nun ja – ähm.
Mögen die Leute wirklich Hero Units und Karussells?
Ich schätze, es kommt alles auf Ihre Zielgruppe an, aber an der Universität, an der ich arbeite, besteht der Großteil aus webaffinen Studierenden/Dozenten der 20-30er Jahre des 21. Jahrhunderts, und wissen Sie, was der Trend bei Karussells in unserer lokalen UX-Umfrage war? Niemand hat sie gelesen. Sicher, sie wechseln. Unsere Marketingleute lieben das Karussell. Könnten sich die Studierenden fünf Minuten nach dem Betrachten der Titelseite an die vorherige Folie erinnern? Nein.
Das ergibt für mich Sinn. So surfe ich im Web. Ich kann Ihnen nicht sagen, wann ich das letzte Mal ein Karussell wirklich beachtet habe. Wenn überhaupt, weil ich mich, genauso wie ich mich an automatisch schließende Popups und das Überfliegen von Web-Anzeigen gewöhnt habe, daran gewöhnt habe, die Inhalte in Karussells ebenso oberflächlich zu behandeln.
Hallo Michael,
Ich arbeite bei Mobify als Designer und habe zu diesem E-Book beigetragen. Ich schätze es sehr, dass Sie sich die Zeit genommen haben, es zu lesen!
Karussells/Slider auf Mobilgeräten haben einen ganz anderen Anwendungsfall als auf dem Desktop. Auf dem Desktop werden sie im Allgemeinen wie von Ihnen vorgeschlagen verwendet – für Marketingmaterial oder um mehr Aktionen auf dem Bildschirm unterzubringen. Und ich denke, Sie haben Recht, sie können Benutzeraktionen verwässern und das Erlebnis unklar machen.
Wo sie auf Mobilgeräten wirklich glänzen, ist die Offenlegung zusätzlicher kontextbezogener Inhalte, nicht die Bereitstellung von Marketinginformationen. Denken Sie an den Apple App Store und wie sie Karussells verwenden, um Sie durch verwandte Apps in Kategorien zu bewegen. Für Mobilgeräte können und sollten Slider und ähnliches oft (an den richtigen Stellen, natürlich) verwendet werden, um vertikales Scrollen zu vermeiden, das einen Nutzer schnell aus dem Kontext reißen kann.
Zum Beispiel arbeiten wir bei Mobify an vielen E-Commerce-Websites. Unsere Forschung hat gezeigt, dass Nutzer große Produktbilder mögen, aber auch die "In den Warenkorb"-Buttons oberhalb der "Fold" bevorzugen. Wir können dieses Problem lösen, indem wir am oberen Rand der Seite einen schönen, großen Slider implementieren, mit dem Nutzer durch die Produktbilder blättern können – er eignet sich hervorragend, um das Produkt zu präsentieren und ermöglicht dem Nutzer den schnellen Zugriff auf weitere kontextbezogene Informationen.
Ich hoffe, das hat Ihre Frage beantwortet. Wenn Sie weitere Fragen haben, können Sie mir gerne eine E-Mail senden oder mich auf Twitter kontaktieren, um diese Unterhaltung fortzusetzen. @kpeatt oder [vorname]@mobify.com.
Kyle,
Weißt du, obwohl der Artikel von mobilem Design handelte, hast du absolut Recht – ich dachte an Karussells in einer Desktop-Umgebung. Sie haben noch mehr Recht, wenn ich darüber nachdenke, wie nützlich Karussells für die Navigation sind. Es gibt einen psychologischen Unterschied zwischen dem Schwenken nach links oder rechts auf dem Bildschirm, was sich wie Stöbern anfühlt, und dem Scrollen nach unten – was sich, wenn überhaupt, tief anfühlt.
Das ist eine ausgezeichnete Art, darüber nachzudenken. Swipe-Interaktionen bedeuten, dass Sie nach mehr vom Gleichen fragen, Scrollen bedeutet, dass Sie nach mehr von etwas anderem fragen.
Es scheint, dass Karussells ihren Platz haben, aber es scheint nicht eines dieser Dinge zu sein, die nur um ihrer selbst willen verwendet werden sollten (was heutzutage üblich ist). Designs werden um Inhalte herum aufgebaut, also wenn das bei der Entwicklung/Gestaltung der Website berücksichtigt wird, scheint es, dass ein Karussell ein zentrales Element für den Nutzer sein könnte, um Informationen zu sammeln.
Wo diese Entwicklung interessant ist, ist bei Windows 8 und Touchscreen-Monitoren. Sicher, Touchscreen-Monitore sind wahrscheinlich kaum verbreitet, aber da sie immer beliebter werden – könnten Karussells potenziell so notwendig (oder üblich) werden wie ein Navigationsmenü. Auf einem mobilen Gerät scheinen Karussells weniger notwendig oder benutzerfreundlich zu sein – aber das Potenzial für Desktops könnte in Zukunft riesig sein.
Fußzeilentext wie Copyright- und rechtliche Hinweise können ebenfalls eine kleine Schriftgröße verwenden. Nutzer, die diese lesen müssen, können heranzoomen, sodass es keinen Grund gibt, das Design weiter zu überladen, als es bereits sein muss.
Hey zzzzzBov,
Sie haben einen fairen Punkt. Ich denke, Sie haben Recht, dass Sie Copyright-Hinweise auf eine kleinere Schriftgröße reduzieren könnten. 12px ist in diesem Fall wahrscheinlich angemessen.
Allerdings möchte ich persönlich die Notwendigkeit des Zooms so weit wie möglich vermeiden. Mein Gefühl ist, dass, wenn ich meine Arbeit richtig gemacht habe, der Nutzer nie zoomen müsste, weil ich meine Inhalte entsprechend präsentiert habe. Sie würden wahrscheinlich nicht den gleichen Kommentar über eine Desktop-Website machen – teilweise, weil das Zoomen auf einem Computer weniger natürlich ist, aber auch, weil es nicht notwendig sein sollte. In diesem Fall sprechen wir wahrscheinlich über den ganz unteren Teil der Seite. Nutzer, die diese Informationen nicht suchen, werden nicht so weit scrollen und sich nicht an etwas mehr Platz am unteren Rand der Seite stören. Nutzer, die diese Inhalte suchen, werden es zu schätzen wissen, dass Sie sich die Mühe gemacht haben, sie leicht auffindbar und lesbar zu machen. Wenn der Inhalt wichtig genug ist, um ihn auf Ihrer Website aufzunehmen, ist er wichtig genug, um ihn lesbar zu machen.
Wenn Sie weitere Fragen haben, können Sie mir gerne eine E-Mail senden oder mich auf Twitter kontaktieren, um diese Unterhaltung fortzusetzen. @kpeatt oder [vorname]@mobify.com.
Kyle,
Ich stimme der Vermeidung der Notwendigkeit des Zooms zu. Die Wahrheit ist, dass die überwiegende Mehrheit der Nutzer die Copyright-Hinweise in der Fußzeile nicht lesen wird, weshalb es sicher ist, den Text so klein zu machen.
Eigentlich doch.
Nicht immer, der Text in der Fußzeile ist oft aus rechtlichen Gründen wichtig und könnte vom Gesamtdesign ablenken. Sogar die Website User Experience Stackexchange verwendet eine Schriftgröße kleiner als
12pxfür ihre Copyright-Texte.Das alles gesagt, gibt es keinen Grund, warum der Copyright-Text nicht eine größere, lesbare Schrift sein könnte. Ich kritisiere hauptsächlich die Verwendung einer absoluten Aussage ("die einzige Zeit", Hervorhebung von mir) und gebe ein Beispiel, wo die Regel nicht zutrifft.
Das stimmt auf jeden Fall. Wie bei allen Best Practices sollten diese niemals als absolute Regeln betrachtet werden. Es wird eine Fülle von Situationen geben, in denen eine dieser Empfehlungen nicht zutrifft. Ich werde sehen, ob wir das "nur" in unserer nächsten Ausgabe streichen können.
Toller Artikel... mit klaren und praktischen Tipps, die sofort umgesetzt werden können.
Großartige Artikel mit tollen Tipps. Ich wünschte, solche Gastbeiträge wären hier auf CSS-tricks häufiger.
Das ist eine sehr gute Liste, ich werde mir das Buch ansehen.
Guter Artikel Chris, du hast mir mehr Informationen gegeben, insbesondere zur Schriftgröße :)
Tolle Tipps und danke für die Veröffentlichung eines kostenlosen Inhalts. Gibt es eine Chance, dass das Buch in anderen mobilfreundlichen Formaten veröffentlicht wird? Ich persönlich empfinde PDFs als unterlegene mobile Erfahrung.
Danke für diese Informationen. Diese 9 Tipps waren definitiv nützlich, und es sieht so aus, als würde dieses Buch gleich heruntergeladen. Machen Sie weiter so!
Einige großartige Tipps hier. Ich habe in letzter Zeit mit JQuery Mobile herumgespielt, was mobilen Websites ein stärker natives Gefühl verleiht. Es ist großartig und sehr schnell, aber ich denke, Responsive Design ist der richtige Weg – einige wirklich schöne Dinge werden damit gemacht (insbesondere mit den jüngsten Neugestaltungen von Mashable und The Next Web). Danke für die Tipps und ich werde mir dieses E-Book ansehen :D
Tolle Tipps und Kommentare, besonders zum Einsatz von Karussells für mobile E-Commerce-Websites.
Karussells verursachen unnötigen Overhead für Mobilgeräte. Nicht jeder ist mit großen Datenleitungen gesegnet. Zusätzliche 60-250k können eine echte Tortur für die UX sein.
Ursprünglich wollte ich einen Slider (RoyalSlider, um genau zu sein) verwenden, um eine Reihe von Videos zu implementieren, damit die Nutzer durch eine Playlist wischen und das gewünschte abspielen können.
Auf dem Papier gefiel es mir. In der Realität erhöhte es die Ladezeit, verlängerte die Aufgabe und ehrlich gesagt waren es (sowie mehrere andere beliebte Slider und Videoplayer, die ich ausprobiert habe) nicht für die Aufgabe geeignet – insbesondere auf Mobilgeräten. Alle möglichen schwierigen, unvorhergesehenen Verhaltensweisen, die Pfusch erfordern würden.
Am Ende habe ich mich für ein Video und einfache Links entschieden, um die Videos in denselben div zu laden. Leichtgewichtig, kostenlos, schnell und funktionierte einwandfrei. Fallback mit dem href für diejenigen mit deaktiviertem JS, und ich habe etwas, das gut aussieht und auf einer erheblichen Anzahl von Desktop- und mobilen Browsern funktioniert.
Öfter als nicht, ist Einfachheit am besten.
Das ist wirklich ein schöner Artikel. 2 Jahre nach seiner Veröffentlichung immer noch anwendbar