Informationsarchitektur – anwendbar.ch

Alternativen zum Homepage-Slider

Renato — Fri, 19 Jan 2018 16:01:54 +0000

Im Beitrag “Slider – Bühne frei oder Abgang?” wurde auf die Vor- und Nachteile von Slidern/Karussellen/Bühnen (folgend Slider) eingegangen. Unbeantwortet blieb, welche Alternativen es zu diesen Interaktionselementen eigentlich gibt. Dieser Artikel geht genau dieser Fragestellung nach.

Um sich dem Thema anzunähern wurden in einem ersten Schritt bekannte und (vermutlich) stark frequentierte Schweizer Websites auf deren Lösungsansatz hinsichtlich des Slider-Einsatzes (oder eben nicht) analysiert. Hinweis: Alle Screenshots wurden im Oktober 2017 gemacht.

Screenshot	Beschreibung
Screenshot www.zurich.ch - Homepage Sliderbereich	Zürich Versicherungs-Gesellschaft AG Verzichten auf einen animierten Slider. Anstelle dessen wird ein grosses Headerbild, mit dazugehörender Headline und zwei integrierten Handlungsaufforderungen eingesetzt. Interessant sind zudem die drei darunterfolgenden, vom Bild abgesetzten Links, welche die Benutzenden direkt bei ihren Bedürfnissen abholen sollen.
Screenshot www.20min.ch - Homepage Sliderbereich	20 Minuten Kein Slider im Einsatz - stattdessen werden einzelne durch Bildgrösse gewichtete Thementeaser eingesetzt. Dabei werden unterhalb der Teaser immer Links zu ähnlich gelagerten Artikel geführt.
Screenshot www.zalando.ch - Homepage Sliderbereich	Zalando Schweiz Ebenfalls: Slider gleich Fehlanzeige. An seiner Stelle wurde ein grosses Bild zu den Herbstaktionen eingefügt. Mit Klick auf das Bild gelangt man direkt zu eben diesen Aktionsangeboten. Direkt unterhalb des Bildes folgt eine Handlungsaufforderung "Jetzt shoppen".
Screenshot www.roche.ch - Homepage Sliderbereich	Hoffmann-La Roche Ltd Auch Roche verzichtet auf einen animierten Slider. Auf der Startseite ist eine grossflächige Aufnahme von Basel und dem Rhein zu sehen, welche die Zugehörigkeit zu Schweiz unterstützt. Als erster Contentblock direkt unterhalb des Bildes, wird festgehalten, was die Kerngeschäfte des des Unternehmens sind. Weiter rechts werden diese Einträge ergänzt durch Links zu den jeweiligen Angeboten aus Diagnostik und Pharma.
Screenshot www.swisscom.ch - Homepage Sliderbereich	Swisscom (Privatkunden) Auch Swisscom setzt keinen Slider mehr ein. Stattdessen ist ein aktuelles Handyangebot geführt, welches direkt über Klick auf die Fläche oder eine Handlungsaufforderung die innerhalb des Bilder angebracht ist, angeklickt werden kann. Direkt unter dem Element wird man in der Swisscom-Welt willkommen geheissen und entsprechende Verlinkungen zu weiterführenden Informationen angeboten.
Screenshot www.srf.ch - Homepage Sliderbereich	Schweizer Fernsehen Die Website des Schweizer Fernsehen kommt ebenfalls ohne Slider aus. Die Startseite ist hauptsächlich mit Teaserboxen (Überschrift, Bild, Anriss) besetzt. Interessantes Detail: Bei teil Artikeln ist ein Icon überlagernd im Bildbereich eingesetzt. Das Icon signalisiert, dass die Benutzenden an Media-Assets (bsp. Video, Galerie etc. auf der Artikelseite erwarten.
Screenshot www.sonova.ch - Homepage Sliderbereich	Sonova Endlich wieder einmal ein Slider. Sonova setzt das Element direkt unter der Hauptnavigation ein. Der Slider zeigt immer einzelne Themen mit Überschrift, Kurztext und Bild. Als Navigationselemente stehen die "obligaten" Punkte, sowie Pfeile am linken und rechten Brwoserrand zur Verfügung. Die Pfeile erscheinen jedoch nur dann, wenn die Benutzenden mit dem Mauscursor in Sliderbereich "fahren".
Screenshot www.che.sika.com - Homepage Sliderbereich	SIKA Ein klassischer Slider. Die Sujets ändern sich periodisch oder können mit den Navigationselementen unten links angesteuert werden. Fahren die Benutzenden mit dem Mauscursor über das Element, so erscheinen unterhalb des Teasertextes oben links zusätzlicher Inhalt. Das Objekt kann, wenn es auch eine explizite Handlungsaufforderung aufweist, an einem beliebigen Ort geklickt werden, um auf die Detailseite zu gelangen.
Screenshot www.nzz.ch - Homepage Sliderbereich	NZZ Auf der NZZ-Startseite wird kein Karussell eingesetzt. Die Online-Version der Tageszeitung zeigt ein grosses Bild mit Überschrift und einleitendem Kurztext.
Screenshot www.nestle.ch/de - Homepage Sliderbereich	Nestlé Auf der Startseite von Nestlé wird ein Slider eingesetzt der mit verschiedenen Themen bespielt ist. Auch hier wechseln sich die Sujets automatisch nach einem vorgegeben Zeitintervall ab, oder die Benutzenden interagieren über die Pfeile ganzen in den Bildecken rechts und links oder der Punktnavigation.
	Nespresso Auf der Startseite wird ein Slider eingesetzt, welcher "nett" in das Gesamtdesign eingebunden ist. Die einzelnen Slides wechseln automatisch und beinhalten immer eine Handlungsaufforderung. Interessant ist die Thumbnail-Ansicht (mit Texthinweis), wenn die Benutzenden mit dem Cursor über die Punktnavigation fahren.
Screenshot www.leshop.ch - Homepage Sliderbereich	LeShop.ch Auf der Startseite wird kein Slider angezeigt. Die Migros-Shoplösung präsentiert direkt Produkte die eingekauft werden können.
Screenshot www.digitec.ch - Homepage Sliderbereich	digitec.ch digitec hat sich ebenfalls vom Slider verabschiedet. Stattdessen wird ein grösser Bildbereich angezeigt, in welchem ein Produkt angezeigt wird.
Screenshot www.credit-suisse.com/ch/de.html - Homepage Sliderbereich	Credit Suisse Die Grossbank setzt auf der Startseite auf das Slider-Objekt. Das Karussell unterscheidet sich aber insofern von anderen Lösungen, als dass es zwar mehrer Slides aufnimmt, diese jedoch nicht automatisch wechseln. Ein Slidewechsel ist ausschliesslich über eine Benutzendeninteraktion möglich. Die Links auf die Inhaltsseite ist auf dem Titel und dem "Zum Artikel >" hinterlegt - was die Navigation nicht vereinfacht.
Screenshot http://new.abb.com/ch - Homepage Sliderbereich	Credit Suisse Auf der ABB-Website wird (ebenfalls) kein Slider eingesetzt. Das Unternehmen arbeitet lediglich mit einem grossen Bild bzw. einem dazugehörenden aktuellen Thema.

Fazit der Analyse

Es ist offensichtlich: Das Sliderobjekt wird nur noch zurückhaltend eingesetzt. Es hat nicht mehr die Verbreitung wie vor drei bis vier Jahren, als quasi keine Website vom Stapel ging ohne Slider. Im Rahmen der Überprüfung konnte nicht festgestellt werden, ob es gewisse Branchen/Bereich gibt, welche noch auf das Objekt setzen oder eben nicht. Vielmehr scheint es so, als dass sich die Website-Betreiber zunehmend den Nachteilen des Elemente (siehe dazu “Slider – Bühne frei oder Abgang?“, Absatz Nachteile von Slidern) bewusst werden bzw. der “fancy Bildwechseleffekt” langsam aber sicher ausgedient hat.

Alternativen zum (Homepage-)Slider

Welche Darstellungsoptionen gibt es aber eigentlich zum Slider? Im Folgenden werden einige Anwendungsbeispiele gezeigt, die Orientierung bieten und gleichsam Aussagekräftig sind.

Option 1: Nur Text (typografische Lösung)

Beispiel: www.team23.de (Stand 01.02.2018)

Es muss nicht immer ein Bilder oder ein Video sein. Manchmal reicht nur ein aussagekräftiger Text um eine Nachricht zu kommunizieren. Sicherlich unterstützt im oben aufgeführten Beispiel das grosszügige Hintergrundbild den Text.

Option 2: Bild mit Headline und Teasertext

Beispiel: http://www.faz.net/aktuell/ (Stand 01.02.2018)

Ein grosses Bild, ergänzend mit einführenden Textinformationen – ohne Bildwechsel. Dieser Lösungsansatz ist häufig auf Seiten von Medienhäuser zu sehen.

Option 3: Bild mit Handlungsaufforderung

Beispiel: www.wwf.ch (Stand: 01.02.2018)

Ein grosses, “starkes” Bild ergänzt mit einer Headline, einem Teaser und eine Handlungsaufforderung.

Option 4: Bild/Video mit Eingabeaufforderung

Beispiel: www.ryte.com (Stand: 01.02.2018)

Den Benutzenden direkt die Möglichkeiten geben eine Interaktion zu tätigen. Auf der Website ryte.com erfolgt das mit einem Formularfeld, in welchem man sicher für einen Testaccount für das SEO-Tool einschrieben kann.

Eine weitere Anwendung könnte zudem sein, die Benutzenden über eine Frage, oder eine Art Konfigurator bei ihren Bedürfnissen abzuholen. Ein im Ansatz gut umgesetztes Beispiel ist auf der Startseite der FFHS zu sehen:

Beispiel: www.ffhs.ch (Stand: 01.02.2018)

Mit der Abfrage nach dem passenden Studium werden die Besuchenden, welche sich nach einem Studiengang umsehen, direkt abgeholt und gelangen rasch zu den gewünschten Informationen.

Option 5: Auswahlmöglichkeit über Bildraster

Beispiel: https://www.georgiacenter.uga.edu/ (Stand: 01.02.2018)

Anstelle von einem grossen Bild können mehre Bilder eingesetzt werden. Im obigen Beispiel werden die Bildelemente nebeneinander angeordnet und bieten Schnelleinstieg zu (vermutlich) wichtigen Inhalten.

Natürlich geht es auch heftiger. Bei folgenden Beispiel wird ein ganzer Bildteppich als Einstieg eingesetzt.

Beispiel: www.viktoriaklein.de (Stand: 01.02.2018)

Option 6: Bewegtbild (Video)

Manchmal kann ein Bild eine Botschaft nicht alleine transportieren. In diesem Fall ist die Integration eines Videos oder einer Animation ein gute Möglichkeit, um die Aufmerksamkeit der Benutzenden zu gewinnen. Nur der “coolness” wegen sollten aber keine Videos eingesetzt werden. Die Bewegtbilder sollten etwas vermitteln, was über ein Einzelbild oder eine Diashow nicht möglich ist. Weiter sollte darauf geachtet werden, dass die Benutzenden auf über Alternativen (zum Beispiel Videotranskriptionen) an die Inhalte kommen.

Beispiel: https://www.american.edu/ (Stand: 01.02.2018)

Bitte auch daran denken: Gute gemachte Videos sind in der Regel aufwändig zu produzieren, beanspruchen Ladezeit und wenn sie von den Benutzenden einmal gesehen worden sind …

Welche Alternativlösung ist die Beste?

Wer hätte es gedacht: Ich kann/möchte an dieser Stelle keine Empfehlung abgeben. Keinesfalls würde ich auch kommunizieren, dass Sliderlösungen im allgemeinen zu verbannen sind. Im Zentrum der Überlegungen sollte immer die Anwendung bzw. die damit verbundenen Ziele /Absichten der Website stehen – natürlich ohne die Benutzenden-Perspektive zu vergessen.

Wichtig erscheint es mir, dass der Inhalt im Objekt “lebt”. Was nützt das “coolste” Video auf der Startseite, wenn es mehrere Monate auf der Website ist. Dieser Faktor muss zwingend in die Überlegungen mit einbezogen werden. Geht man beispielsweise davon aus, dass man das Element nicht häufig verändern kann/will, so sollte der entsprechende Bereich auch nicht allzu gross gewählt werden bzw. ehe auf “statische Lösungen” zurückgegriffen werden.

The post Alternativen zum Homepage-Slider appeared first on anwendbar.ch.

Slider – Bühne frei oder Abgang?

Renato — Thu, 12 Oct 2017 15:35:01 +0000

Sie sind auf vielen Desktop-Websites auf der Homepage anzutreffen: “Slider”, “Karusselle” (engl. “Carousel”), “Bildbühnen”, “Slideshows”, “Image Slider”, “Image Rotator” oder wie sie auch bezeichnet werden.

Auch wenn der Slider heute nicht mehr so häufig wie vor wenigen Jahren anzutreffen noch ist, so wird er noch immer sehr intensiv eingesetzt. Dies mag nicht erstaunen, da durch den Slider verhältnismässig viele Informationen auf kleinem Raum abgebildet werden können. Diese primär visuellen getriebenen Möglichkeiten überdeckten lange die Usability-Probleme, welche ein Slider-Einsatz mit sich bringt. Dieser Artikel soll die Vor- und Nachteile von Slider auf Websites aufzeigen und Hinweise geben, auf was zu achten ist bei der Verwendung eines Sliders.

Definition(-sversuch) Slider

In der Literatur konnte keine eindeutige Definition des Begriffs im Sinne der Anwendung bei interaktiven Systemen gefunden werden. Grundsätzlich kann festgehalten werden, dass Slider an einer festen Position (in der Regel am Seitenanfang oben) verschiedene Inhalte (Bild, Video, Kurztexte) aufnehmen. Ein Slider besteht dabei häufig aus einzelnen Slides die bildlich gesprochen übereinander liegen – wobei immer nur ein Slide zu sehen ist. Die Elemente (Slides) wechseln sich automatisch oder ausgelöst durch eine User-Interaktion (MouseOver oder Klick) ab.

Beispielanwendungen Slider

Folgend werden verschiedene Desktop-Slider gezeigt bzw. deren Interaktionskonzept beschrieben.

Beispiel www.ethz.ch

Bildschirmausschnitt Slider der Homepage der ETH Zürich (www.ethz.ch, 06.10.2017)

Am Seitenanfang direkt unter der Hauptnavigation platziert – nicht über gesamte Seitenbreite. Die Beiträge wechseln sich in einer bestimmten Zeit ab. Alternativ lassen sie sich die Slides über die “Beitragpunkte” (grün) durch die Benutzenden steuern. Ist der Mauscursor auf einem Beitrag so wechselt dieser nicht automatisch weiter. Zusätzlich gibt es einen Play/Pause-Button. Die vor- und zurück Pfeile (Bild links und rechts) erscheinen nur wenn der Mauscursor auf dem Bild steht.

Der Slider ist intuitiv zu “bedienen” und überlässt den Benutzenden die Kontrolle.

Beispiel www.blick.ch

Bildschirmausschnitt Slider der Homepage von Blick (www.blick.ch, 06.10.2017)

Der vermutlich bekannteste Slider der Schweiz: Schlagzeilen auf blick.ch. Immer mit grossen Bilder und grossen Schriften. Zieht sehr viel Aufmerksamkeit auf sich. Die Beiträge wechseln sich ebenfalls nach einer bestimmten Zeit ab. Dabei spielt es keine Rolle ob die Benutzenden mit dem Cursor auf oder neben dem Slider sind. Steuern lässt sich der Slider über die unten angezeigten “Thumbs” oder die Pfeile links und rechts. Beim MouseOver über die Thumbs (Beispiel ganz links) wird angezeigt, wie viele Elemente (4/10) enthalten sind.

Der Slider ist nicht benutzerfreundlich realisiert. Er lässt sich nur schwer steuern mit den Pfeilen links und recht. Möchte man sich eine Schlagzeile genauer anschauen, so muss der Cursor unten auf dem Thumb sein. Hinzu kommt, dass max. 5 Beiträge im sichtbaren Bereich sind. Im obigen Beispiel sind fünf weitere nicht zu sehen bzw. müssen “annavigiert” werden.

Beispiel www.sp-ps.ch

Bildschirmausschnitt Slider der Homepage der SP Schweiz (www.sp-ps.ch, 06.10.2017)

Auch auf Politik-Websites sind Slider zu finden – im Beispiel jener der SP Schweiz. Die Textelemente rechts sind die eigentliche Slidernavigation. Mit dem Mauscursor haben die Benutzenden die Möglichkeit, sich die unterschiedlichen Beiträge anzuschauen. Die Bilder links passen sich mit leichter Verzögerung (um “Flackern” zu verhindern) den Mausbewegungen an.

Einfach gehaltener Slider, der sich intuitiv bedienen lässt und gleichzeitig nicht inhaltlich überladen ist.

Beispiel www.coop.ch

Bildschirmausschnitt Slider der Homepage COOP (www.coop.ch, 06.10.2017)

Der am Seitenanfang stehende Slider lockt mit grossen Bildern. Die Navigation funktioniert ähnlich, wie bei jenem der ETH Zürich. Einzig wechselt der Slider die Beiträge auch, wenn der Mauscursor auf dem Bild ist. Ansonsten helfen die Pfeile die nach links und rechts zeigen, sowie die “Punkt-Navigation” unten. Auffallend an diesem Beispiel ist die hinzugesetzte Handlungsaufforderung (“Call2Action”).

Der Slider verhält sich so, wie es sich die Benutzenden gewöhnt sind. Er überlässt den Benutzenden weitestgehend die Kontrolle.

Beispiel www.adidas.ch

Bildschirmausschnitt Slider der Homepage von Adidas (http://www.adidas.ch, 06.10.2017)

Ist das ein Slider oder “integriertes Screendesign”? Entgegen anderen Beispielen hat Adidas den Slider originell in das Design integriert, so dass er nicht als isoliertes Objekt wahrgenommen wird. Die Interaktion funktioniert (wie gehabt) über die Pfeil- und “Punktnavigation”. Die Beiträge wechseln sich nicht, wenn der Mauscursor auf dem Objekt ist. Die beiden Bilder unten gehören nicht mehr zum Slider. Auffallend sind auch die beiden blau gehaltenen Handlungsaufforderungen.

Der Slider wird nicht als solcher wahrgenommen. Die sich wechselnden Bilder sind sehr dominant, vermitteln gleichzeitig eine kräftige Portion “Adidas”. Die Bedienelemente werden wohl bewusst zurückhaltend eingesetzt.

Beispiel: www.syndicom.ch

Bildschirmausschnitt Slider der Homepage der Gewerrkschaft syndicom (http://www.syndicom.ch, 06.10.2017)

Der grossflächige Slider ist unterteilt in einen Bildbereich, einen Bereich der sich inhaltlich auf das Bild bezieht und einem erweiterten Inhaltsbereich unten, der gleichzeitig als Navigation dient. Die Beiträge wechseln sich nach einer gewissen Zeit ab. Gleichzeitig können die Benutzenden über die Navigation unten die gewünschten Beiträge ansteuern – wobei ein Klick notwendig ist. Bei MouseOver wird zwar ein entsprechender Status angezeigt, aber die Beiträge ändern sich nicht.

Der Slider ist einfach durch die Benutzenden zu “handeln”. Etwas gewöhnungsbedürftig ist die Navigation im unteren Bereich, da die Elemente nicht aufeinander abgestimmt erscheinen.

Beispiel: www.porsche.ch

Bildschirmausschnitt Slider der Homepage von Porsche Schweiz (http://www.porsche.ch, 06.10.2017)

Auf der Schweizer Porsche-Website wird ganz zu Anfang ein Slider eingesetzt um die Sprachwahl zu treffen. RIchtig gelesen. D.h. der Slider besteht aus drei Elementen: Deutsch, Französisch, Italienisch – die aufeinander folgen. Die Optionen werden also nicht direkt angeboten, sondern müssen “Stück-für-Stück” angewählt werden. Haben sich die Benutzenden für eine Sprache entschieden, erscheint abermals ein Slider der dann “wirkliche Inhalte” aufnimmt.

Ein Slider als “Sprachweiche” einzusetzen ist mit Sicherheit nicht die richtige Wahl. Es stellt sich zudem die Frage, wie sinnvoll es ist, mehrere Slider nacheinander anzubieten. Da nützen auch schnelle Autos nichts …

Vorteile von Slidern

Slider können (sofern sie gut gemacht sind) attraktive Website-Elemente sein, die als “Catcher” für Schlagzeilen, Sonderangebote etc. auf einer Homepage einen wichtigen Platz einnehmen können. Sie haben die Fähigkeit “viele” Inhalte auf begrenztem Platz aufzunehmen – so können beliebige Dienstleistungen oder Produkte eines Unternehmens “durchrotiert” werden.

Nachteile von Slidern

Slider werden nicht betrachtet

2012 veröffentliche die Nielsen Norman Group einen Beitrag (https://www.nngroup.com/articles/auto-forwarding/) in welchem aufgezeigt wurde, dass Slider (wie auch Inhalte in der rechten Spalte und Werbe-Banner) kaum beachtet werden. Der Beitrag basiert auf einem Test der Siemens-Website, auf welcher in einem Slider ein 100£-Gutschein beim Waschmaschinen-Kauf angeboten wurde.

Testaufgabe: “Does Siemens have any special deals on washing machines?” (Quelle: https://www.nngroup.com/articles/auto-forwarding/)

Das “Angebot” funktionierte nur unzureichend (kaum betrachtet und geklickt), wobei die Untersuchung folgende Hauptgründe ausmachen konnte:

Der Slider wirkt wie ein “mühsamer” Werbebanner und wurde nicht als Angebot des Website-Betreibers wahrgenommen.
Auch der enthaltene Text wirkte auf die Benutzenden aufdringlich, wie jener eines konventionellen Werbebanners.
Ein weiteres, technisches Problem, war die Rotationsgeschwindigkeit des Banner. Die Beiträge wechselten sich so rasch, als dass den Benutzenden die Zeit fehlte, sich die Anzeige genauer zu betrachten.

Kritische Betrachtung: Es wäre nicht korrekt Rückschluss auf alle Slider zu nehmen aufgrund der Erkenntnisse dieses Versuchs. Schliesslich ist es eine individuelle Slider-Anwendung des Website-Betreibers. Wie hätte der Versuch geendet, wenn der Slider-Beitrag nicht derart plakativ gewesen wäre?

Slider werden nicht geklickt

Repräsentativer war eine Untersuchung im Jahr 2013 der University of Notre Dame (https://www.nd.edu). Die Untersuchungsgrundlage bildete ein Slider der auf mehreren Website mit unterschiedlichen Ausrichtungen und Anspruchsgruppen platziert wurde, um die Betrachtungs- bzw. Interaktionsfähigkeit zu beurteilen. Die unter https://erikrunyon.com/2013/01/carousel-stats publizierten Ergebnisse zeigen auf, dass lediglich 1 bis 2% der Besuchenden auf den Slider klicken – wobei 84% nur den ersten Slide berücksichtigen! Die Ergebnisse waren zwar von Website zu Website etwas unterschiedlich, aber es konnte eindeutig festgestellt werden: Benutzende interagieren kaum mit Slidern.

Schlechte Klickraten bei Slidern – lediglich der erste Slide wird anangeschaut (Quelle: https://erikrunyon.com/2013/01/carousel-stats/)

Slider brauchen sehr viel Platz

Slider-Elemente sind in der Regel grosszügig gehalten, so dass sie meist grosse Teile des sichtbaren Bereichs einer Website beanspruchen. Es stellt sich in diesem Zusammenhang die Frage, ob die grosse, verschwendete Fläche nicht besser für konkrete Inhalte genutzt werden sollte, um den Benutzenden passende Inhalte anstatt irgendwelche unwichtigen Schlagzeilen zu zeigen.

Slider sind nicht auf “benutzerfreundliche Bedienung” ausgelegt

Häufig bieten Slider den Benutzenden schlechte Kontrolle – sie sind dem Slider ausgesetzt. D.h. Benutzende können nicht selber darüber entscheiden, was sie wie lange anschauen möchten. Dies ist insofern problematisch, als dass sich Aufnahmefähigkeit bzw. das Konsumverhalten von Inhalten stark unterscheidet. Bei mach Benutzenden kann es kaum schnell genug gehen, wogegen andere sich Zeit für Bild und Text nehmen möchten.

Slider sind nicht (oder nur bedingt) für mobile Webangebote geeignet

Eine Pauschalaussage ist in diesem Zusammenhang natürlich nicht zulässig. Aber ein Grossteil der eingesetzten Slider eignen sich nicht für die Anwendung auf Smartphone. Die Bedienung der Slider ist auf mobilen Endgeräten häufig “kniffelig” und beinhaltet in der Regel ein grosses Frustpotenzial. Ganz ärgerlich wird es, wenn man den Slider nicht nach rechts oder links (Swipe) verschieben kann – sofern dieses Interaktionsmuster überhaupt erkannt wird.

Slider machen die Website langsam

Ein Slider der mehrere grosse Bilder laden muss, verlangsamt die Ladezeiten von Websites offensichtlich. Da viele der Sliderbilder beim initialen Seitenaufruf nicht sichtbar sind, “verschlimmert” sich dieses Problem wesentlich.

Slider bieten wenig Orientierung

Durch die dauernd wechselnden “Slidebeiträge”, mit den wechselnden Motiven, Inhalten und damit verbundenen Aussagen sind Benutzende leicht zu verwirren. In diesem Zusammenhang müssen auch die kurzen Anzeigezeiten der Slider erwähnt werden – sie lassen kaum Zeit das Gesehene zu erfassen bzw. zu verarbeiten.

Slider sprechen passive Benutzende an

Um in den “Genuss” der Silderbeiträge zu kommen, müssten Benutzende wie im Kino eine Website “anschauen”. Dies geschieht aber bekanntlich nicht. Benutzende sind “bedürfnisorientiert ungeduldig” und nur selten bereit explorativ eine Website zu “erforschen”. Wird nicht das gefunden, wonach die Benutzenden auf der Suche sind, wechseln sie das Webangebot. Der Slider braucht schlichtweg zu viel Zeit um das zu zeigen, was er inhaltlich aufgenommen hat.

Slider sind nicht “accessible”

Die Bewegung/Animation des Slider ist für Benutzende, welche die Maus nicht gut (oder gar nicht) benutzen können ein Problem – sie sind dem Slider quasi ausgesetzt.

Fazit

Es kann nicht wegdiskutiert werden: Die Nachteile überwiegen die positiven Aspekte von Slidern.

Trotzdem: Es gibt (womöglich) immer wieder gute Gründe einen Slider einzusetzen. Die folgenden Tipps sollen dabei helfen einen passenden, auf die Benutzenden zugeschnittenen Slider zu realisieren:

Den Benutzenden gehört die Kontrolle! Der Slider soll so angelegt sein, als dass er problemlos navigiert werden kann. Der Benutzende soll bestimmen können, wie lange er welchen Slide anschaut. Es reicht nicht, lediglich die Anzahl Slides durch eine “Punktnavigation” anzuzeigen. Besser werden Teaser oder Thumbs verwendet, welche aufzeigen, was die Benutzenden erwartet.
Der Slider sollte maximal fünf “Slides” aufnehmen. Bei produktgetriebenen Websites dürfen es mehr sein. Es sollte immer gezeigt werden wie viele einzelne Slides beinhaltet sind bzw. auf welchem sich die Benutzenden befinden. Die häufig verwendeten Punkte sind in der Regel viel zu klein, zu fummelig und zu unauffällig. Etabliert haben sich die etwas grosszügigeren Pfeile oder Slider-Beschriftungen, welche direkt als Navigationselement dienen. Auf Mobilgeräten sollte unbedingt “swipen” integriert werden.
Je nach Seite/Branche/Ausrichtung der Website sollte der Slider den Benutzenden direkt zeigen worum es auf der Seite geht.
Ein einzelner Slide soll immer als Ganzes einen Link darstellen. Es sollte darauf verzichtet lediglich einzelne Bereiche als Link auszuzeichnen, d.h. unterschiedliche Links pro Slide einzusetzen. Um die Handlungsaufforderung zu verstärken können zusätzlich Buttons und Co. eingesetzt werden.
Gutes Bildmaterial ist wichtig. Es ist daran zu denken, dass die Fotos keinen zu “werberischen Eindruck” hinterlassen. Sie sollen authentisch sein und die Aussage des jeweiligen Slides unterstützen. Gleichzeitig gilt es daran zu denken, dass das Bild auch auf kleinen Bildschirmen funktionieren muss.
Auf Smartphone funktionieren Slider praktisch nicht. Deshalb sollte wenn immer möglich der Desktop-Slider gänzlich weggelassen werden auf mobilen Endgeräten. Es empfiehlt sich die einzelnen Slides als einzelne “Teaserelemente” aufzuführen, welche untereinander erscheinen.
Die einzelnen Slide-Elemente dürfen sich nicht zu schnell abwechseln. Den Benutzenden soll genügend Zeit gelassen werden ein Objekt nach deren Erfassung zu klicken. Wechseln die Slides zu rasch, müssen sich die Benutzenden mit dem ganzen Interaktionskonzept des Slides vertraut machen, da sie nicht warten möchten, bis genau der Slider wieder einmal erscheint. Weniger als fünf Sekunden sollten es nicht sein. Bei mehr als 12-15 Sekunden gehen wohl die meisten Benutzenden davon aus, dass etwas nicht stimmt bzw. haben die Seite längst verlassen.
Wenn immer möglich wird der Slider nicht als Ganzes geladen, sonder zuerst nur diejenigen “Anzeigen” welches es für die korrekte Initialdarstellung benötigt.
Ein Slider sollte immer eine Beschriftung aufweisen. Helfen Sie den Benutzenden mit einfachen, klar formulierten Kurztexten zu erkennen, wohin der nächste Klick führt. Bei Bedarf können noch längere Texte integriert werden.
Achten Sie auf guten Textkontrast zwischen Text und Bild
Davon ausgehend, dass die viele Benutzende den Slider überhaupt nicht betrachten, sollten alternative Zugänge zu den relevanten Informationen angeboten werden.

The post Slider – Bühne frei oder Abgang? appeared first on anwendbar.ch.

Ein neues Fenster für externe Links?

Renato — Mon, 26 Oct 2015 09:17:11 +0000

Die Frage, ob externe Links in einem neuen Bowserfenster geöffnet werden sollen oder nicht ist ja eigentlich fast so alt wir das “kommerzielle” World Wide Web. Was spricht dafür, was degegen? Gibt es überhaupt eine allgemeingültige Lösung für diese Problemstellungen?

Betrachten wir uns einmal die Vor- und Nachteile beim Öffnen von Links in neuen Fenster – oder eben in demselben, im welchem der Link geklickt wird.

Vorteile beim Öffnen eines neuen Fensters:

Es gibt offensichtliche Anwendungsfälle bei denen eine neues Fenster angezeigt ist. Beispielsweise Formulare mit Hilfefunktionen. Die Hilfen werden “extern” angezeigt, ohne dass die Formularinhalte verschwinden. Ein weiteres Beispiel stellen Streamingservices (Audio) dar, bei welchen der Player idealerweise in einem externen Fenster läuft.
Durch dass ein neues Fenster bzw. eine neuer Tab geöffnet wird, bleibt der Benutzende auf der ursprünglich angepeilten Seite – was möglicherweise seinen eigentlich Motiven entspricht
Durch das Öffnen eines Links werden die Benutzenden im Lesefluss gestört. Natürlich kann man diesem Aspekt entgegen halten, dass man die Links auch erst zum Schluss vom Artikel klicken könnte. Aber häufig fehlt einem dazu schlichtweg die Geduld …
Das mag sich jetzt gar trivial lesen, aber viele Benutzende wissen nicht wie man ein zweites Fenster, geschweige denn einen neuen Tab öffnet.

Nachteile eines sich öffnenden Browserfenster:

Eigentlich handelt es sich um eine Bevormundung der Benutzenden. Es wird eine Interaktion ausgelöst, die möglicherweise nicht gewünscht ist.
Bei mobilen Anwendungen setzen neue Fenster/Tabs Wissen voraus – das Wechseln zwischen geöffneten Fenstern bei Smartphones ist nicht so einfach. Häufig vergisst man auch, was gerade geöffnet wurde … zumindest mir geht es so.
Unschön aber wahr: Der “Zurück-Button” erfreut sich nach wie vor grösster Beliebtheit und wird folglich sehr viel eingesetzt. Diese Browserfunktion funktioniert natürlich bei neuen Fenstern nicht.
Ein technischer Schnick-Schnack: Das target-Attribut “_blank” war grundsätzlich vorgesehen um neue externe Browserfenster zu öffnen – nicht aber Tabs.

Praxistipps

Links welche die aktuelle Seite verlassen in einem neuen Fenster öffnen und durch ein Icon kennzeichnen. Alle anderen Links im gleichen Fenster öffnen.
Links, welche in einem neuen Fenster öffnen im title-Attribut entsprechend kennzeichnen. Gemäss WCAG 2.0 ist eine extra Kennzeichnung für Screen-Reader nicht mehr erforderlich, da moderne Screen-Reader das target-Attribut erkennen und entsprechend einen Hinweis erzeugen.

Fazit

Sicherlich sind da noch etliche Pros und Contras mehr. Schlussendlich bin ich zum heutigen Zeitpunkt davon überzeugt, dass es nicht ein Allerweltsmittel bzw. die Lösung für diese Problemstellung gibt. Entscheidend erscheinen die “Surfgewohnheiten”, der Umgang mit dem Browser und die Fähigkeiten der Benutzenden welche das Informationsangebot besuchen.

The post Ein neues Fenster für externe Links? appeared first on anwendbar.ch.

Mega-Menü – Übersichtlich oder Wirrwarr?

Renato — Sat, 21 Feb 2015 20:29:18 +0000

Problemstellung

Das Problem ist bekannt: Websites werden immer umfangreicher, beinhalten immer mehr Inhalte die mit möglichst wenigen Klicks in möglichst kurzer Zeit erreichbar sein sollen. Entsprechend kommt einer einfach zugänglichen und auf die Benutzenden ausgerichtete Navigation(-struktur) einen hohen Stellenwert zu.

Neuzeitlich werden immer häufiger sogenannte Mega-Menü (oder Mega Drop-Down) eingesetzt. Eigentlich handelt es sich bei diesen “Navigationsinstrumenten” um erweiterte Drop-Down-Menüs so wie sie beispielsweise in vielen Formularen eingesetzt werden. Die Navigationselemente werden als vertikale, wie auch horizontale Menüs eingesetzt und können bei Bedarf strukturiert bzw. mit Layoutelementen angereichert werden. Die Menüs wiedergeben in der Regel einen Grossteil der jeweiligen Seitenstruktur (in Anlehnung an die konventionellen Sitemaps und die FatFooter) und unterscheiden sich je nach Anwendungsfall in der Grösse.

Vor- und Nachteile

Vorteile von Mega-Menüs

Inhaltsangebot wird rasch fassbar.
Mehr als eine Ebene abbildbar.
Visuelle Auszeichnungen innerhalb des Menus möglich. D.h. das Erscheinungsbild kann den Bedürfnissen entsprechend angepasst werden.
Strukturierung möglich – zusammenpassende Links können gruppiert werden für eine klare Trennung der Inhalte.
Mehr alle ein Navigation im klassischen Sinne.

Nachteile von Mega-Menüs

Konventionelle Mega-Menüs eignen sich nicht für Smartphone-Darstellungen.
Bei “aufklappendem” Menü werden häufig Teile des eigentlichen Inhaltsbereich verdeckt.
Mega-Menüs bieten wenig was die Orientierung innerhalb einer Seite betrifft.
Je nach Umfang/Codequalität des Mega-Menüs können Probleme bezüglich Suchmaschinenfreundlichkeit auftauchen.
Die meisten Menüs sind nicht nach Accessibility-Gesichtspunkten ausgeführt.
Flüchtige Bildschirmpräsenz: Das Menü schliesst sich nach dem Klick auf einen Menupunkt wieder und muss immer wieder aufgerufen werden.

Empfehlungen Mega-Menü

Gruppieren von Inhaltselementen
Gegenüber konventionellen Navigationen handelt es sich hierbei sicherlich um das herausragende Unterscheidungsmerkmal. Es gilt aus Besuchendensicht zu überlegen, welche Elemente zusammengehören, welche sich ergänzen, welche sich auszuzeichnen lohnen. Schlussendlich sollten die einzelnen Gruppen eine Zusammenfassung der darin enthaltenen Inhalte wiedergeben.

Der zusätzliche Einsatz von sinnstiftenden Bildern kann für den Benutzenden hilfreich sein.

In diesem Kontext sollte insbesondere darauf geachtet werden, dass nicht unnötig viele Inhalte/Elemente geführt werden (Verwirrung, Unübersichtlichkeit, Ablenkung). Es wird empfohlen mittels Einbezug der Zielgruppen (bzw. dem Personakonzept) passende Auswahlen zu treffen. In Bezug auf die Themenorientierung eignen sich beschreibende Überschriften, die nicht zwingend verlinkt sein müssen – sie dienen zudem der “Scanability”. Zu Bedenken: Das Menu ist keine Sitemap der Website, sondern eine Zusammenfassung der Inhalte!

Visuelle Elemente helfen das Mega-Menü im Sinne der Übersichtlichkeit bzw. Lesbarkeit zu gliedern.
Visuelle Auszeichnungen verwenden
Die Menus können vielseitig ausgestaltet werden – so bieten sich eine Reihe von Möglichkeiten die Inhalte optisch ansprechend und leicht verständlich darzustellen bzw. bei Bedarf auch voneinander zu trennen. Es ist jedoch Vorsicht geboten, dass die Menus nicht zu einem Spielplatz verkommen, der zwar nett aussieht, aber den Benutzenden nicht mit seinem Bedürfnis abholt (Übersicht verschaffen, zu Inhalten finden etc.).

Beispiel eines überfüllten MegaMenus, bei welchem die Navigationselemente scheinbar willkürlich angeordnet sind.
Mega-Menü – ein Navigationselement
Komplexe Interaktionen bzw. Funktionalitäten sollten nicht in einem Mega-Menü untergebracht werden. Die Besuchenden fühlen sich rasch überfordert, zumal die Elemente immer wieder erscheinen. Solche Elemente sind auf entsprechenden Themenseiten zu verorten.

Es empfiehlt sich nicht, umfassende Mega-Menüs mit zusätzlichen Funktionen zu “überfüllen”
Technische Rahmenbedingungen
Hover oder Klick?
Ein Mega-Menü sollte wenn immer möglich als ganzes angezeigt werden. D.h. dass der Ladeprozess keinesfalls etappenweise erfolgen sollte. Natürlich darf die “Pause” zwischen der Benutzerinteraktion zum Anzeigen des Menus und dem Erscheinen eben dieses Menus nicht zu lange ausfallen. Idealerweise wird ein Wert von weiger als 0,5 Sekunden angestrebt.
Es muss nicht immer alles schnell gehen …
Ein häufiges Problem bei schlecht angelegten Mega-Menüs sind die schlecht ausgewählte Timings für Mouse-In/Mouse-out. Das Menu sollte keinesfalls zu schnell auf den Hover des auszulösenden Navigationselementes reagieren, um eine “Flacker-Effekt” zu vermeiden. Dies gilt vorallem dann, wenn Benutzende zwischen verschiedenen Menüpunkten wechselt, die jeweils ein Menu auslösen bzw. sich Benutzende mit dem Mauszeige durch die Website “scannen”.
Fallbacks berücksichtigen
Halten Sie für Benutzende oder aber Anzeigegeräte welche mit dem Mega-Menü nicht zurechtkommen eine Alternative zur Verfügung. Dies kann beispielsweise eine konventionelle HTML-Seite mit den Inhalten sein, wie sie auch im Menu angezeigt werden.
Sinnvolle Navigations-Bezeichnungen verwenden
Dieser Punkt ist insofern wichtig, dass bei Mega-Menüs häufig etliche Menupunkte miteinander angezeigt werden. Natürlich empfiehlt es sich, wie oben beschrieben, diese bereits mit optischen Elementen zu gruppieren. Andererseits muss sollte unbedingt darauf geachtet werden, dass die Begrifflichkeiten sinnvoll bezeichnet werden. Nielsen bezeichnet diesen Ansatz als “descriptive label” und vereint darunter folgende anzuwendenen Regeln:
- Im Sinne der Scanability soll ein Navigationspunkt immer vom ausdrucksstärksten Begriff (Inhaltsgehalt) angeführt werden
- Kurzformen verwenden
- Ähnliche Beschriftungen sind auseinander zu halten
  Übersichtliches MegaMenu mit klaren Menubezeichnungen
Wenn das Menu zum Erlebnis wird …
Ja, ein Mega-Menü kann sich gut anfühlen. Dafür ausschlaggebend sind die oben erwähnten Reaktionsgeschwindigkeiten auf die Benutzendeninteraktionen (Ein- und Ausblendverzögerung), Fade in/out des Menus und Veränderungen des Hintergrundes (beispielsweise Lightbox-Effekt). Natürlich besteht in diesem Zusammenhang die Gefahr, dass es zu Spielereien kommt die unnötig sind bzw. als störend empfunden werden. Deshalb sollte keine Effekthascherei betrieben werden und nur so viel Effekte wie wirklich nötig und sinnvoll eingesetzt werden.

Bitte nicht so: Die Website des “Weissen Haus” beinhaltet ein MegaMenu, welches in vielerlei Hinsicht schlecht gelöst ist. Das Menü wird an unterschiedlichen Orten in unterschiedlichen Dimensionen geöffnet. Die Inhalte sind nicht strukturiert, was einen negativen Einfluss auf die Lesequalität hat.
Accessibilty sicherstellen
Eine zwingende Anforderung in der heutigen Zeit. Es ist sicherzustellen, dass das Navigationelement über die Tastatur bedient werden kann und gleichzeitig auch Screenreader-Kompatibel ist. In diesem Zusammenhang könnte ein Lösungsansatz wie folgt ausgeführt sein: http://adobe-accessibility.github.io/Accessible-Mega-Menu/
Allgemeine Hinweise
- Sofern die Website ein Suchfunktion beinhaltet, sollte darauf geachtet werden, dass diese nicht durch das Mega-Menü verdeckt werden.
- Menupunkte auf welche bei MouseOver/Klick ein Mega-Menü erscheint, werden idealerweise visuell gekennzeichnet.
- Das Menu weist idealerweise immer dieselbe Grösse auf.
Testen
Das Wichtigste zum Schluss: Mit dem Testen des Menus können Probleme aufgedeckt werden bzw. optimierungen vorgenommen werden. Dabei bedarf es nicht zwingend kostenintensiven Usabilitylabors und dergeleichen – ganze einfach ausgelegte Testszenarien können beispielsweise von einem Arbeitskollegen durchlaufen werden.

Quellen

The post Mega-Menü – Übersichtlich oder Wirrwarr? appeared first on anwendbar.ch.