Vor einige Zeit haben wir schon ausführlich über Contentslider und deren (richtigen) Einsatz geschrieben. Heute soll es um die Optimierung von Slidern für mobile Devices gehen.
Zunächst einmal muss überlegt werden, ob der Slider wirklich so relevant im Kontext für die Webseite und den Content ist, dass er auch in der responsive Variante der Seite benötigt wird. Meistens ist dies nicht unbedingt der Fall, aussparen hilft dem User am Smartphone oder Tablet.
Zusätzlich könnte man auch andenken, den Inhalt des Sliders in einer anderen Form zu präsentieren, was für reine Contentslider besser funktioniert, als für Bildergalerien. Beispielsweise wäre auch für Tablets ein Touchslider (swipen) sinnvoll, oder ab der Größe eines Smartphones die Inhalte des Sliders in Boxen darzustellen, heisst alle Inhalte des Sliders am kleinen Screen komplett untereinander aufzulösen.
Das ganze ist nicht nur einer Frage des Ressourcenverbrauchs – vielleicht passt der Slider gar nicht in das mobile Konzept der Webseite oder würde den User nur unnötig verwirren?
Ein simpler Slider stiftet Verwirrung?
Für uns Internetaffines Volk, ist eher klar, dass wir zwischen den Items eines Sliders durch swipen, mit unserem Finger wechseln können. Aber glaubt ihr, dass dies allen anderen Usern das genauso klar ist? Unserer Erfahrung nach ist dies nicht immer so.
Navigationspfeile als Lösung?
Wir denken, dass Links-Rechts-Pfeile nicht die optimale Lösung sind. Zunächst haben wir die Verantwortung die User zu erziehen – das heißt mit den Pfeilen zeigen wir dem User, dass eine mobile Seite genauso wie am Desktop bedient wird. Das ist in dem Fall keine gute Erziehung, denn durch die Fingergesten haben wir viele andere Möglichkeiten eine Webseite zu bedienen! Außerdem müssten diese Pfeile eine gewisse Größe haben, damit der User diese auch antippen kann (siehe in unserem Blogbeitrag zu Mobile Optimierung von Webseiten).
Die User sind ja nicht dumm
Stellt euch nun eine mobile Bildergalerie vor: ein Item erstreckt sich über die gesamte Bildschirmbreite eures Smartphone und wir haben keine sichtbaren Navigationselemente. Wie weiß der User nun, dass das nicht nur ein Bild ist, sondern, dass er über swipen zum nächsten Bild kommt? Der User ist nicht dumm, braucht aber vielleicht einen Hinweis. Ich glaube auch nicht, dass das große Problem das swipen ist, sondern zu zeigen „hey, ich bin ein Slider!“. Sobald dies klar ist, kommt der User in den meisten Fällen sicher von selbst darauf, wie das Element zu bedienen ist. Deswegen hab ich mir mal meinen Hausverstand gepackt um ein paar simple Lösungen zu finden, um dem User zu zeigen, dass er einen Slider vor sich hat.
- bei Bildergalerien in beispielsweise Blogbeiträgen bietet es sich an, den Slider anzukündigen. „In der Bildergalerie am Ende des Artikels könnt ihr meine neuen Briefmarken bewundern“ – oder so ähnlich.
- Die Slideritems automatisch durchlaufen lassen – wie zb auf unserer Webseite für die Digital Visions
- Einen Zähler anzeigen, wie zum Beispiel „2 von 4“ oder mittels den bekannten Sliderpunkten (bei dieser Methode könnte der User aber annehmen, dass er durch tippen auf einen Knödel zwischen den Items navigieren kann)
- Eine kurze Animation bei der schnell über alle Items gewechselt wird sobald der Slider sich im sichtbaren Bereich befindet
- Den User textlich auffordern zu swipen – á la „Swipe to navigate“
- Wenn sich auf der Seite mehrere Elemente befinden deren Bedienung erklärt werden sollte, könnte ein kurzes Tutorial eingeblendet werden. (zB bei der Fotobearbeitungsapp Snapseed
Wir persönlich finden die Variante mit der Animation über alle Items am besten. Der User sieht gleich, dass es sich um einen Slider handelt – außerdem sieht es auch noch toll aus.
Der Touchslider
Nun aber zur Technik hinter den Touch Slidern! Wir verwenden sehr gerne den Touchslider https://github.com/lusever/TouchSlider. Einen tollen Artikel zur technischen Umsetzung findet ihr auch hier http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
Fazit
Verwendet Touch Slider! 🙂 Wir sind für die Erziehung unserer User zuständig und dürfen sie nicht mit alten „Traditionen“ verhätscheln, oder gar denken, dass sie so einfache Konzepte nicht verstehen. In den meisten Fällen kann ein mobiler Slider für Stimmungsbilder jedoch ausgespart werden.
Und dann noch weil ich’s so witzig finde:
Im Android SDK gibt es die wunderbare Methode isUserAMonkey „Returns „true“ if the user interface is currently being messed with by a monkey.“. User dürfen keine Angst haben, dass sie etwas kaputt machen könnten – auch wenn sie sich wie ein Äffchen aufführen – deswegen ist es auch wichtig robuste Anwendungen zu basteln.
