Content Strategie. Flohmarkt Anwendung

Gestern war ich zum allerersten Mal auf einem Flohmarkt als Ausstellerin. Ich muss zugeben Verkaufstalent ist nicht mein zweiter Name. Und auch nicht der zehnte. Aber da meine Tochter ein Klavier braucht, einigten wir uns darauf, ihr altes Spielzeug und Kleidung am Flohmarkt zu verkaufen, um das Geld für ihr neues Klavier zu sammeln. Und so kam es dazu, dass eine Content Strategin um 3:30 in der Früh am Sonntag (!) aufstand, um auf Flohmarkt zu fahren.

Was hat Flohmarkt mit Content Strategie gemeinsam?

Das ist einfach. Wenn man eigene Ware als Content und Flohmarkt-Besucher (und Aussteller) als User betrachtet, dann ergibt der Vergleich plötzlich Sinn.

World Wide Web. In der Content Strategie geht es uns die meiste Zeit darum, einen mit Content überlasteten User mit eigenem richtigen Content am richtigen Ort (Plattform und Gerät) und zur richtigen Zeit zu überzeugen.

Am Flohmarkt hat man genau so einen Besucher, der vor lauter bunter Vielfalt die Hälfte übersieht. Außerdem ist nicht jeder Besucher an deiner Ware interessiert, insbesondere wenn es um Kinderkleidung und Spielzeug geht.

In WWW würden wir mit Landing pages Traffic auf die Seite leiten, wo durch ein durchdachte User Journey jeder Besucher an den Content kommt, den er braucht und entweder ein Kauf oder ein weiterer Schritt im Kundenbeziehung-Aufbau findet statt.

Am Flohmarkt schnappt man die Aufmerksamkeit von den potenziellen Käufern und leitet diese durch die sinnvoll ausgestellte Ware, sodass jeder Besucher schnell und leicht die (für ihn) richtigen Ware findet und im besten Fall auch den Kauf abschließt.

Ich muss vorwarnen, dass ich so ziemlich viel falsch gemacht habe und vielleicht ein paar Sachen richtig. Und dank meinem Studium in Content Strategie habe ich viel gelernt. Hier sind meine Learnings aus dem 8-stündigen Jänner-Frischluft-Flohmarkt Erfahrung.

User Research und SFO

Benutzerforschung ist eine großgeschriebene Thema in Content Strategie. Genauso am Flohmarkt. Hinter eigenem Stand stehend hat man keine Ahnung wie der Stand und die Platzierung von der Ware auf die Besucher wirken. Man sollte in Bewegung bleiben und den eigenen Stand aus der User-Perspektive immer wieder ansehen und auch immer wieder Änderungen vornehmen – sprich SFO (Stand-am-Flohmarkt-Optimierung).

Herumwandern um eigenen Stand empfiehlt sich auch für diejenigen, die an einem Frischluft-Flohmarkt mitten im Jänner ausstellen. User Research hilft beim Aufwärmen.

Sortieren, löschen, konsolidieren

Dieser Prinzip ist gut für deine Webseite und auch für deinen Flohmarktstand ist er sehr hilfreich. Denn als die Sachen verkauft werden, sollten die Leerplätze aufgefüllt werden. Wenn man Suchverhalten von Besuchern beobachtet, kann man die Gruppierung (Konsolidierung) von den Waren umstrukturieren und anpassen. Zum Beispiel anstatt Oberteile nur nach Größen zu sortieren, diese nach Geschlecht (Rosa vs. Blau) aufzuteilen.

Eyecatcher als Flohmarkt-Landing page

Um die Aufmerksamkeit von der Zielgruppe zu eigenem Stand zu lenken braucht man einen Eyecatcher. Etwas was das Thema angibt und auffallend schön oder interessant ist. Dieses Etwas sollte man gut sichtbar platzieren. Dafür dienen oft Sachen, die gar nicht Flohmarkt-tauglich sind. Ich habe dafür schöne Babywippe verwendet. Sie hat mir einige Besucher und Käufer verschafft, wurde selbst aber nicht verkauft.

User Journey durch Flohmarktstand

Eyecatcher gut platzieren ist der erste Schritt zur Erstellung einer User Journey auf deinem Flohmarktstand. Man sollte wieder auf User Research greifen und den Besucher-Flow von allen Richtungen anschauen.

Bei den Webseiten schauen Content Strategen, woher die Besucher kommen, denn die Möglichkeiten sich nahezu unbegrenzt. Zum Glück ist es am Flohmarkt einfacher. Da kommen die Besucher entweder von rechts oder von links. Und so sollte man sich den eigenen Stand von diesen beiden Perspektiven anschauen und dabei an User Journey denken.

Accessibility ist ein Thema

Aus Kostengründen versucht man an einem möglichst kleinem Stand möglichst viele Ware zu präsentieren. In diesem Kontext bekommt das Wort User Journey eine weitere Bedeutung, denn potenziele Käufer sollen zu den Waren auch dazukommen. Contenthaufen sowie Berge von den Waren will keiner besteigen. Sachen sollen auch nicht am Weg stehen oder unzugänglich platziert werden, denn dann stellen sie eine Barriere dar und hindern den Verkauf.

Zusammengefasst hat die Flohmarkt-Content-Strategie sehr viel mit digitalem Welt gemeinsam.

  • User Research
  • SEO
  • Sales funnel (Landing pages)
  • User Journey
  • Accessibility

Überraschenderweise finden diese Content Strategie Grundlagen eine sehr breite Anwendung und das ist genau das, was ich an meinem Studium so toll finde.
Ahja, das Klavier ist 80 Euro näher geworden 😉

Das kannst du für die mobile Barrierefreiheit tun

Marcy Sutton ist eine Barrierefreiheit Ingeneurin bei Adobe in Seatle. Sie wünscht sich, dass wirklich alle Menschen ihr Software benutzen können. Sie möchte das Bewusstsein für die Accessibility verbreiten und die Qualität von mobilen Web-Applikationen in dieser Hinsicht auf den Stand von native Apps bringen. Deswegen informiert sie andere Entwickler darüber, welchen Beitrag sie für einen barrierefreien mobilen Web leisten können.

Mobiles Web versus Native Apps

Wie sehen die Voraussetzungen für die Barrierefreiheit in diesen zwei Welten aus?
Native Applikationen sind klar im Vorteil. Sie genießen all die ausgearbeiteten und funktionierenden Richtlinien. In mobilen Applikationen gibt es keine Richtlinien und keine einheitliche Qualitätskontrolle. Jeder macht praktisch das, was er will oder was er kann.
Marcy ist überzeugt, dass mobiles Web nicht immer so schlecht in Sachen Barrierefreiheit sein wird. Dafür muss man sich die Frage stellen, wie konkret jeder Entwickler auf dem Weg für ein besseres mobiles Web mitwirken kann?

Accessibility Funktionen – iOS versus Android

In ihrem Talk in Berlin in 2015 zeigte sie eine Statistik über die Verwendung von Bildschirmlesers. Sie demonstrierte, dass 70% von Screenreader-Benutzern arbeiten an iOS Betriebssystem und nur 21% nutzen Android. Daraus könnte man schließen, dass iOS sich am meisten Gedanken um Barrierefreiheit macht und deren Produkte und Software zugänglich gestalten. Dabei sieht das Set von Barrierefreiheit Funktionen an beiden Betriebssystemen ähnlich aus:

iOS Funktionen für die Barrierefreiheit:

  • Voice-Over
  • Diktiergerät
  • Zoom
  • Farbschema umstellen / Graustufen
  • Schaltersteuerung

Android Funktionen für die Barrierefreiheit:

  • TalkBack (Bildschirmleser)
  • Schaltersteuerung
  • Unterstützung der Braille-Geräte
  • hoher Kontrast
  • Vergrößerung

Der Unterschied dabei liegt darin, dass iOS Applikationen sind so ausgelegt, dass all diese Funktionen auch einsetzbar und sinnvoll sind. Bei Android gibt es keine Barrierefreiheit-Richtlinien und obwohl diese Funktionen prinzipiell zur Verfügung stehen, können diese über viele Barrieren bei den mobilen Applikationen nicht ‚drüberhupfen‘. Einfach gesagt, die Funktionen nutzen nichts, wenn deren Einsatz bei der Entwicklung von Apps nicht berücksichtigt bzw. ermöglicht wird.

Häufige Barrieren im Web

Entwickler sollen besser über die möglichen Barrieren im Web informiert werden. Nur dann können sie ihren Beitrag für die Accessibility leisten. Das sind die typischen Barriere:

  • gesperrtes Zoom
  • verhindertes Scrollen
  • der Text ist zu klein
  • visuelle Unordnung und Überlastung
  • mehrdeutige Icons ohne begleitenden Text
  • Berührung- und Wischen-lästige Designs (Können Bildschirmleser-User das benutzen?)
  • versteckte Inhalte, die zu eine Falle werden

Die letzte Barriere ist ein extrem häufiges Problem, die man auch als eine Navigationsfalle bezeichnen kann.

Navigationsfalle: Popup, Overlay und versteckte Inhalte

Oft werden Popup-Fenster angewandt, welche ein standart Benutzer leicht bedienen bzw. schliessen kann. Für Screenreader-Benutzer kann so ein Overlay-Fenster zum Verhängnis werden. Der Grund dafür ist, dass die Inhalte, welche in der Hintergrund sind bzw. ausgeblendet sind, nicht wirklich versteckt sind. Das bedeutet, dass die Tastatur-Navigation durch das Popup-Fenster irgendwann das Fenster verlässt und durch die Inhalte vom Hintergrund navigiert. Da das Fenster aber nicht weggeklickt wurde und immer noch oben schwebt, ist keine weitere Interaktion im Hintergrund möglich. Der Screenreader kann dies aber nicht sehen und sitzt quasi in der Falle. Da der Grund dafür für ihn nicht nachvollziehbar ist, muss er gezwungenermaßen die Seite verlassen.

Auf dem Weg zur mobilen Barrierefreiheit

Es sind viele Kleinigkeiten, die man berücksichtigen soll, wenn man eine Accessibility gewährleisten will. Inzwischen gibt es viele Richtlinien für Entwickler, die helfen eine Standartisierung in Bezug auf Barrierefreiheit im mobilen Web zu erreichen. Der Weg dorthin ist dennoch lang, deswegen findest du hier die DOs und DONTs von Marcy Sutton’s Konferenzvortrag vor. Das sind konkrete Dinge, die du bei der Entwicklung berücksichtigen kannst.

DOs für Barrierefreiheit

  • Zoom von der Seite und dem Text soll zu jederzeit ermöglichen. So können Menschen, die nicht so gut sehen können, die Applikation bedienen bzw. den Content konsumieren.
  • Die Struktur und Layout von der Seite klar darstellen. Die kognitive Belastung durch visuelle und strukturelle Elemente soll bewusst reguliert werden. Sucht eine goldene Mitte zwischen zu leere Seite und eine mit Inhalten vollgestopfte Seite.
  • Grafische Icons (als Buttons oder Links) zu jederzeit mit dem beschreibenden Text begleiten.
  • Bei der Entwicklung eine Applikation, die sehr stark mit den Gesten wie wischen bedient werden soll,  Geste-Alternativen für Screenreader-Usern überlegen und zur Verfügung stellen.
  • Im HTML jedes Element mit dem dafür vorgesehenen Semantik einsetzten. <button> für die Buttons usw. Nur so können Screenreader die Applikation verstehen und damit interagieren. <div> Elemente können sie nicht wahrnehmen.
  • Touch Targets oder Berührungsflächen ausreichend Platz geben, damit man es auch leicht bedienen bzw. treffen kann.
  • Versteckte Inhalte unerreichbar für Screenreader machen.

DONTs für Barrierefreiheit

  • Scroll Hijacking immer vermieden. Dabei geht es um diverse Spielereien rund um Scroll Bar, welche die User Experience beeinträchtigen und eher schlecht von Benutzern angenommen werden.

Zusammenfassung

Als Entwickler können wir nicht wissen mit welchen Geräten und Funktionen Benutzer unserer Software einsetzten werden. Man kann nur loslassen und so entwickeln, dass unabhängig von all diesen Benutzer-spezifischen Faktoren der Inhalt der Applikation gut und leicht zugänglich ist. Auch wenn es nicht so schön aussieht, wie man es gern hätte.
Gerne bist du eingeladen dich in dieses Thema zu vertiefen. Hier findest du die empfohlenen BBC Richtlinien für mobile Barrierefreiheit und den Link zur Marcy Sutton’s Konferenzvortrag: ‚How to Win at Mobile Accessibility‘.

Barrierefreies Webdesign

Seit 1. Januar 2016 sollten alle österreichischen Webseiten barrierefrei zugänglich sein.
Die Seite für Barrierefreies Webdesign in Österreich informiert über die Barrierefreiheit im österreichischen Web und erfasst die grundlegenden Prinzipe dafür wie folgt:

  1. Alt-Attribute bei Bildern immer verwenden, um deren Inhalt in Worten darzustellen
  2. Menüführung über Tastatur oder Joystick ermöglichen
  3. alternative Layouts, zu denen der Betroffene nach Bedarf wechseln kann
  4. Videoinhalte mit ergänzendem Text ausstatten
  5. leichte Sprache für die Texte verwenden

Barrierefreies Webdesign auf der Oberfläche

Manche Sachen wie z.B. Alt-Attribute einpflegen, können auch relativ spät in der Entwicklung bzw. Website-Pflege berücksichtigt werden. Es werden heute häufig diverse Barrierefreiheit-Plugins für Content Management Systeme benutzt. Sie sind sehr nützlich und ermöglichen die Schrift zu vergrößern und Kontrast zu verbessern. Solche Plugins können die Navigation erleichtern und dafür notwendige Markierungen setzen. Wenn eine Seite mit einem Keyboard oder Joystick navigiert wird, können aktive Elemente besser hervorgehoben bzw. beschrieben werden.

Barrierefreies Webdesign gründlich gemacht

Obwohl Accessibility-Plugins Entwicklern und Content-Strategen viel Arbeit abnehmen, bleibt noch genug Arbeit für Content-Strategen über. Menüführung, Texte, Verwendung von Bilder und Videos, alternative Layouts – das sollte man sich bereits in der Konzeptions-Phase überlegen.

Beispiel 1. Bei der Entwicklung einer Seite für eine ärztliche Ordination, die sich auf motorische Erkrankungen spezialisiert, sollte ein großes Augenmerk auf die Navigation gelegt werden und sichergestellt, dass alle Inhalte möglichst schnell gefunden und erreicht werden können. Denn einige Besucher dieser Seite werden diese eben mittels Keyboard oder Joystick navigieren.

Beispiel 2. Es macht auch wenig Sinn viel Foto-Inhalte auf eine Seite zu platzieren, welche stark von visuell beeinträchtigten Benutzern verwendet wird. Da immer mehr Sprach-Assistenten wie Siri, Alexa und Co. eingesetzt werden, werden viele Inhalte im Web auf sogenannte gesprochene Sprache geändert. Das bedeutet, dass die Texte, wenn sie vorgelesen werden, gut und einfach verständlich sind. Von dieser Tendenz profitieren auch Menschen, die sich Inhalte mit der Text-zu-Sprache Lesegeräten anhören.

Mit diesem AChecker Tool für die Barrierefreiheit kann jede Webseite relativ schnell überprüft werden. Dabei kann man auf unterschiedliche Standarte prüfen lassen. WCAG 2.0 (Level AA) ist aktuell eine empfohlene Richtlinie. Level AAA ist quasi das höchste und ist oft schwer zu erreichen.

Was wurde für die Barrierefreiheit dieser Seite gemacht?

Diese Seite (die du gerade liest) verwendet eine von den letzten WordPress Template und ist dadurch sehr gut für diverse Bildschirmgrößen skalierbar. Ich habe hier auch alle Bilder mit einem alternativen Text versehen und ein WP Accessibility Plugin
eingesetzt.

Wie schneidet diese Seite bei dem Barrierefreiheit-Test ab?

Aktuelle Prüfung der Seite durch den AChecker nach WCAG2.0 Level AA ergibt 0 Probleme. Dennoch die Prüfung nach dem Niveau AAA zeigt 12 Probleme an. Alle 12 Probleme zeigen auf einen stellenweise mangelnden Kontrast auf der Seite. Der WP Accessibility Plugin macht es für die Benutzer möglich den Kontrast selbst zu verstärken, daher stellt der mangelnde Kontrast keine wirkliche Barriere für Benutzer dar.

Ich hoffe, mein Artikel hat dir ein wenig Einblick in das Thema Barrierefreiheit gegeben.
Noch viel viel mehr kann man darüber auf der Web Accessibility Initiative Webseite nachlesen.
Über die leichte Sprache und wie man sie richtig anwendet kann man sich gut in dem Blog-Beitrag von Michael Stangl informieren.
Und natürlich freue ich mich über deinen Kommentar, insbesondere wie ich diese Seite noch besser in Hinsicht auf Barrierefreiheit machen kann.