Was ist eine Conversion Rate?

Als “Conversion” bezeichnen wir im Online Marketing eine messbare Konvertierung, also die Umwandlung eines Besuchers zu einem potenziellen Kunden. Der Besucher hat also jene Handlung gesetzt, die der Websitebetreiber auch vorgesehen hat. Das können viele verschiedene Dinge sein, wie das Ausfüllen eines Formulars, die Anmeldung zum Newsletter oder der Kauf im Online-Shop. Die Conversion Rate beschreibt das Verhältnis zwischen Besuchern einer Website und der Anzahl der Interaktionen, die als Conversion festgelegt wurden. Melden sich etwa 10 von insgesamt 1.000 Besuchern der Webseite zum Newsletter an, dann liegt die Conversion Rate bei 1 Prozent.

Ist eine hohe Conversion Rate gut?

Die kurze Antwort: Ja, das ist sie. Eine hohe Conversion Rate ist ein sehr guter Ausgangspunkt, um die gesteckten Unternehmensziele mittels Online-Marketing-Maßnahmen zu erreichen. Aber: Eine hohe Conversion Rate ist nicht alles. Sie ist der Anfang einer umfassenden Kundenreise, die es bestmöglich zu gestalten gilt.

Was allerdings eine gute Conversion Rate ist, lässt sich nicht so einfach festlegen. Das hängt von vielen, manchmal sehr individuellen Faktoren ab. Der zentrale Hebel für hohe Conversion Rates ist die richtige Zielgruppe. Personen, die sich nicht für das Angebot interessieren, werden auch nicht konvertieren. Auch die Qualität des Angebots spielt eine zentrale Rolle auf dem Weg zum qualifizierten Lead. Darüber hinaus spielt auch die Usability Ihrer Webseite ein entscheidender Faktor sein, genauso wie die Branche, Ihre Markenbekanntheit, der Wettbewerb sowie das Ranking bei Suchmaschinen.

Sie wollen konkrete Zahlen? Das verstehen wir. Statistiken zu Conversion Rates gibt es auf Google unzählige, hier ein erster Eindruck: Die Conversion Rate von Bannern gehört mit unter einem Prozent zu den niedrigsten, Google Ads liegen im Durchschnitt bei etwa 3,5 Prozent und bei der Partnersuche kann man sich über eine Conversion Rate von knapp unter zehn Prozent freuen. Versuchen Sie bei Ihren ersten Versuchen einer Optimierung, einen ersten Näherungswert als Richtwert festzulegen. Sie werden rasch merken, ob dieser zu Ihnen und Ihrem Business passt.

Warum ist die Optimierung der Conversion Rate so wichtig?

Aus mühsam generiertem Traffic das Beste herauszuholen, das ist das Ziel einer Conversion Rate Optimierung (CRO). So erreichen wir mehr Aufträge, Interessenten und Umsatz. Die Optimierung der Conversion Rate ist aber nicht immer einfach. Der steigende Online-Wettbewerb und die Reizüberflutung auf Traffic-Kanälen erschwert es zunehmend, die Umwandlung von Besuchern zu Interessenten und Käufern zu steigern. Deshalb darf es im Online Marketing nicht mehr nur darum gehen, den Traffic zu erhöhen, sondern die Konvertierung zu verbessern. Aber wie kann man eine gelungene Strategie zur CRO aufsetzen? Welche Hebel können wir bedienen?

Was beeinflusst die Conversion Rate?

Es gibt sehr viele Faktoren, die auf die Conversion Rate Einfluss nehmen. Aufgrund dieser großen Zahl lassen sich nicht alle auflisten und beschreiben, aber es lassen sich zwei grundlegende Arten unterscheiden:

• kurzfristig, kontrollierbare
• langfristig, nicht kontrollierbare

Während die kurzfristigen Einflussfaktoren durch wiederholtes Testen und Anpassen kontrolliert werden können, sind die langfristigen Faktoren nur schwer oder gar nicht kontrollierbar.

Zu diesen kurzfristigen Faktoren zählen unter vielen anderen:

• Traffic-Kanäle
• Produkte & Angebote
• Content (Vielfalt und Anpassung an die Customer Journey)
• Sicherheit der Website
• Usability-Prozess

Die Liste potenzieller Einflussfaktoren ist lang. Es sollte daher nicht planlos probiert, getauscht und getestet werden. Wichtig ist, sich zu Beginn einige wenige Punkte genau anzuschauen, konkrete Thesen zu formulieren und diese dann zu verifizieren oder eben zu falsifizieren. Sinnvoll und klar definierte Hypothesen sind die Grundlage für eine gelungene CRO. Wie sieht es mit den langfristigen Faktoren aus? Dabei handelt es sich meist um gesellschaftspolitische Entwicklungen, auf die wir als Unternehmen so gut wie keinen Einfluss haben: Veränderte Gesetzeslagen, kriegerische Auseinandersetzungen oder auch gesellschaftliche Trends können die Performance unserer Conversion Rate beeinflussen – positiv wie negativ. Eine besondere Stellung nehmen saisonale Schwankungen ein, etwa Buchungen für Ski-Urlaube oder auch Sonnenschutzmittel. Das ist nichts Ungewöhnliches, sollte jedoch in einer CRO-Strategie berücksichtigt werden.

Methoden zur Optimierung der Conversion Rate

Viele Faktoren bedingen viele Methoden und Ansätze für CRO. Bevor wir zu jenen aus dem Bereich der User Experience kommen, hier noch einmal eine kurze Erinnerung, welche Methoden zur Optimierung der CR immer funktionieren:

• Mehr und besseren Traffic generieren
• Call to Actions mit passenden Lead-Magneten kombinieren
• Mobile Ansicht und Ladegeschwindigkeit optimieren
• Besseren, d.h. zielgruppenoptimierten Content veröffentlichen
• Verfeinerung der Customer Journey
• Anpassung der Keywords
• Vereinfachung und “Entrümpelung” der Website
• Text als UX-Faktor bei der Conversion Optimierung

Bei der User Experience, also des Nutzererlebnisses, spielt der Text eine wichtige Rolle. Anders als bei der Usability (Nutzerfreundlichkeit), wo es primär um einen klaren Aufbau und reibungslosen Ablauf auf der Website geht, will das UX Design ein bestmögliches Gefühl beim Besucher hervorrufen. Die passenden Worte, Umschreibungen und Begriffe bringen den Besucher in die richtige Stimmung, sorgen für Kopfkino und Emotionen. Es ist also sehr wichtig, die eigene Zielgruppe zu kennen und zu wissen, welche Keywords tatsächlich genutzt werden und ob man den Ton der Buyer Persona trifft.

Es können so banale Dinge sein, wie der Unterschied zwischen Erdäpfel und Kartoffel, der Besucher zum Klicken animiert. Wissen Sie, woher Ihre Besucher kommen? Dann passen sie sich an ihre Sprache an.

Farben bei der CRO

Farben gehören zu den wichtigsten Werkzeugen, wenn es darum geht, Menschen in die richtige Stimmung zu versetzen. Verschiedene Farben rufen unterschiedliche Emotionen hervor und können die Aufmerksamkeit der Nutzer auf sich ziehen. ​​Die Farbpaletten, die wir wählen, sind mehr als nur eine visuelle Dekoration, sie können spielentscheidende Auswirkungen auf die Conversion Rate haben. Ein CTA-Button etwa setzt sich aus vier wichtigen Faktoren zusammen: Platzierung, Form, Text und Farbe. Wenn diese vier Aspekte aufeinander abgestimmt sind, haben Sie einen großartigen Effekt. Die Farbe der Schaltfläche ist eine der am längsten andauernden Debatten bei der CRO. Es gibt zahlreiche A/B-Testergebnisse, die zeigen, dass eine Änderung der Farbe eines CTA-Buttons einen massiven Einfluss auf die Zahl der Conversions hat.

Sie möchten farbtechnisch etwas ausprobieren? Dann schauen Sie doch zum Adobe Color Reel oder auch coolors.Typografie, Bild und Video für bessere Conversions. Wie gesagt, geht es um ein passendes Stimmungsbild, das den User dort abholt, wo er steht. Das gilt nicht nur für Sprache, sondern auch für visuelle Eindrücke auf der Website. Die Wahl der Typographie (Schriftart, Schriftgröße), die genutzte Bildsprache und die Aufmachung der Videos können viel zur Akzeptanz des Angebots beitragen. Ziel ist es, unsere Zielgruppe in “Kauflaune” zu versetzen, also eine Wohlfühl-Atmosphäre zu schaffen.

Was genau unsere Zielgruppe sehen will, können wir nur Schritt für Schritt herausfinden. Je besser wir unsere Buyer Persona kennen, ihre Vorlieben und Gewohnheiten – z.B. ob diese Person eher liest oder doch lieber Videos schaut – desto leichter wird uns die CRO fallen.

CTA-Buttons für die Conversion Rate anpassen

Wenn wir unsere Websitebesucher mit den richtigen Texten und Bildern zum Call-to-Action begleitet haben, sollte eben dieser Button auch ins Auge fallen. Die Größe, Platzierung und Farbe des CTA-Buttons sollte jederzeit stark hervorstechen. Um die Conversion Rate zu erhöhen, kann man den Knopf auch sticky platzieren, d.h. er scrollt jederzeit mit und bleibt im Sichtfeld. Wenn man Google glauben schenkt, dann ist der ideale Platz für CTAs knapp über der “above the fold” Grenze und die ideale Form eine vertikale.

Auch die Position des CTA-Buttons ist wichtig. Es gibt Stellen, wo unser Aufruf zum Klicken einfach besser performt, als bei anderen. Hier haben Grow & Convert eine spannende Tabelle – mit Verweis auf persönliche Erfahrungen mit Newsletteranmeldungen – zusammengestellt.

• CR in der Seitenleiste: 0,5 – 1,5%
• CR am Ende des Beitrags: 0.5 – 1.5%
• CR mit Pop-ups: 1 – 8%
• CR mit Slidern und Bars: 1 – 5%
• CR mit einem Full-Screen-Willkommens-Opt-in: 10 – 25%
• CR von Highlight-Boxen: 3 – 9%
• Navigationsleiste: variabel

Das Ausprobieren von CTA-Buttons ist einer der ersten und einfachsten Schritte, um die Conversion Rate zu verändern. Wichtig ist, dass Sie nicht zu viel auf einmal verändern, denn damit wird unklar, was die Veränderung der CR tatsächlich verursacht hat.

Formulare im CRO-Prozess

Formulare sind ein wichtiger Teil der Kundenreise, ein Punkt, wo sich sehr deutlich zeigt, ob wir unsere Arbeit bis dorthin gut gemacht haben. Wenn der User uns bis zum Formular gefolgt und willens ist, dieses auszufüllen, dann haben wir ausreichend Vertrauen aufbauen können. Springen User beim Formular ab, wissen wir, dass wir hier mit unserer Optimierung ansetzen müssen. Grundsätzlich gilt: Je weniger Eingabefelder, desto größer ist die Conversion Rate. Es lohnt sich daher im ersten Schritt, nur die wirklich notwendigen Felder abzufragen – alles andere kann warten.

Conversion Rate: Fazit

Die Optimierung von Conversion Rates ist ein iterativer Prozess, es gibt immer etwas, das man ausprobieren und verbessern kann. Zudem ändern sich die Vorlieben unserer Zielgruppe auch mit den Trends der Zeit – ein richtiges “Ende” der Optimierung ist daher eher unwahrscheinlich. Auch wenn das Thema riesig und die Optimierungsmöglichkeiten nahezu unendlich sind, lohnt es sich, den Prozess strategisch und überlegt anzugehen. Gestützt durch handfeste Nutzerdaten (siehe auch unseren Beitrag zum Golden Record können rasch die passenden Stellhebel für die CRO gefunden werden.

The post Steigerung der ​​Conversion Rate mit UX first appeared on Zensations.

Für mich als Designer stellt so ein Projekte immer etwas ganz Besonderes dar. Wie oft hat man sonst schon die Möglichkeit, seiner Kreativität freien Lauf zu lassen. Auf der anderen Seite sind jedoch keine Schriften, Farben oder Logos definiert, auf die man sein Design stützen kann und man beginnt buchstäblich mit einem weißen Blatt Papier.

Back to the roots – Logogestaltung mit Stift und Papier

Zu Beginn des Designprozesses stand die Gestaltung eines passenden Logos für den Markenauftritt am Plan. Die Exklusivität und Professionalität des Zertifikats sollten besondere Beachtung finden. Doch wie kann ein Logo die passenden Werte transportieren? Noch dazu, wo es doch schon so viele Logos da draußen gibt! Und genau hier begann mein erster Ansatz – ich recherchierte, was sich andere zu diesem Thema einfallen haben lassen. Nach dem Motto “kenne deinen Feind” ist es immer gut zu wissen, welchen Auftritt ähnliche Branchen pflegen und wie man sich am Besten von ihnen abheben kann. Es ist immer interessant zu beobachten, wie sich die eigene Aufmerksamkeit nach außen ändert, wenn man sich intensiv mit einem Thema beschäftigt. Es schien, als ob plötzlich an jeder Ecke dutzende Logos auftauchen, von denen ich ganz sicher war, dass sie davor noch nicht da standen. Dieses Gefühl kennt bestimmt jeder – man kauft sich zum Beispiel ein neues Auto und plötzlich fällt einem auf, wie oft dieses Fahrzeug, diese Marke oder diese Farbe auf den Straßen auftaucht.

Außerdem wurde viel mit den Kollegen gebrainstormed, gesprochen und diskutiert. Welche Emotionen, Symboliken und Stichworte verbinden sie mit dem Thema Accessibillity? Ich war erstaunt, wie unterschiedlich die Antworten dazu ausfielen und wie unterschiedlich die Ansätze waren – sollte man das Logo auf abstrakte Formen, etablierte Icons oder doch eher auf ein Schriftbild aufbauen? Mit all diesen Inputs schnappte ich mir, ganz old-school, Stift, Papier, meine Kopfhörer und eine Packung Manner-Schnitten und zog mich in eine Ecke zurück. Ich brachte alles, was mir in den Kopf kam, auch wenn es scheinbar noch so unsinnig wirkte, zu Papier bis der Bleistift qualmte. Nur um immer wieder festzustellen: “Hmm. Dieser Ansatz gefällt mir gut. Das könnte funktionieren! Ach verdammt, das sieht doch so ähnlich wie das Logo der Marke XY aus!”. An diesem Punkt sollte man den Kopf nicht in den Sand stecken, oder, wie ich es gerne mache, die gesamten Schreibutensilien gegen die Wand werfen. Viele Logos wurden in langen Prozessen erstellt, um einen optimalen Wiedererkennungswert zu schaffen und brennen sich so in das Unterbewusstsein ein. Es kann auch helfen, während des Prozesses die Skizzen mit Kollegen zu besprechen. Sie haben einen anderen Blickwinkel darauf und bemerken Dinge, die einem vielleicht nicht sofort aufgefallen sind.

Schlussendlich entstand ein schlichter, moderner Schriftzug. Da das Thema Accessibility in diesem Projekt natürlich besonders große Beachtung fand, wurde in dessen Anlehnung eine abgewandelte Braille-Schrift als grafisches Element eingearbeitet. Durch die leichte Größenvariation der Braille-Punkte wirkt das Logo dynamisch und besinnt sich dennoch auf seinen Ursprung.

Die optimale Farbgestaltung

Anschließend stand die Farbdefinition an. Ich entschied mich für kräftige Blau- und Grüntöne, um einen modernen und frischen Eindruck zu erwecken. Durch die Mischung der beiden Farben wirkt der Gesamtauftritt beruhigend, entspannend und befreiend aber gleichzeitig auch kraftvoll und freundlich. Wenn man mehrere Farben für das Design verwendet will, sollte man unbedingt auch beachten, wie die Farbwirkung in diversen Sehbeeinträchtigungen wirken. Eine weit verbreitete Farbfehlsichtigkeit stellt die Rot-Grün-Sehschwäche dar. Das bedeutet, dass die Betroffenen die Farben Rot und Grün, und demnach auch alle Mischfarben, die diese Farben beinhalten, schwerer unterscheiden können. Hierbei gibt es einige Untergruppierungen. Im schlimmsten Fall würde ein roter Button neben einem grünen Button also komplett gleich aussehen. Um diese Farbfehlsichtigkeit zu simulieren bietet Color Oracle ein hilfreiches Tool. Damit kann man die gängigsten Sehschwächen Deuteranopia (Grünschwäche), Protanopia (Rotschwäche) und Tritanopia (Gelb-Blau-Schwäche) kontrollieren.

Neben dem Farbkontrast ist auch der Helligkeitskontrast bei der Farbauswahl entscheidend. Auch hier wurde natürlich großer Wert auf die Accessibility gelegt und um für die Zukunft gewappnet zu sein der WCAG-2.1-Standard berücksichtigt. Dieser gibt einen Farbkontrast von 4.5:1 für Texte bzw. 3:1 für große Texte (mindestens 18pt was in etwa 24px entspricht) vor. Das ist notwendig, damit alle User den Text optimal lesen können. Für die Kontrolle des Farbkontrasts gibt es diverse Tools im Internet. Ich verwende meistens den Color Contrast Checker von WebAIM, da dieser intuitiv und einfach zu bedienen ist. Um die Grundfarben, die man definiert hat, zu optimieren, kann es hilfreich sein im HSV-Farbmodus zu experimentieren. Damit kann man Farbnuancen feiner definieren ohne die komplette Farbwirkung zu ändern.

Accessible Websites – alles andere als langweilig Für das Webdesign wollte ich einen freundlichen und hellen Eindruck schaffen. Noch immer sind viele Unternehmen vom Thema Accessibility abgeschreckt und assoziieren damit langweilige und sterile Gestaltung. Mit dem neuen Design wollte ich zeigen, dass es sehr wohl möglich ist, ein ansprechendes accessible Design zu schaffen. Offene, hellgraue Bereiche werden immer wieder durch moderne und auffällige, satte Farbverläufe von Grün zu Blau unterbrochen und ziehen sich durch das gesamte Design. Damit können wichtige Akzente gesetzt und die Aufmerksamkeit des Users gelenkt werden.

Elemente des Material Designs, welches eine klare, saubere Strukturierung von komplexen Inhalten auszeichnet, wurden in das Design eingearbeitet. Ein wesentliches Merkmal ist die Simulation von Licht und Schatten mithilfe von Schlagschatten. Richtig gelesen – die Schlagschatten aus den Anfängen des Internets sind zurück! Das kann sehr hilfreich sein, wenn man viele Informationen in unterschiedliche Ebenen priorisieren möchte, sollte aber dezent eingesetzt und nicht übertrieben werden. Und wer sich jetzt fragt, ob animierte Laufschriften und Glitzereffekte ebenfalls zurückgekehrt sind – NEIN das sind sie nicht!

Die Typografie habe ich schlicht und großzügig gewählt. Das erleichtert das Lesen und unterstreicht in Zusammenhang mit großzügigen Whitespaces den offenen Charakter der Website. Selbstverständlich wurde das gesamte Layout responsive gestaltet, um allen Besuchern auf allen Endgeräten ein optimales Erlebnis bieten zu können.

Auf in eine barrierefrei Zukunft

Durch die laufende Erweiterung von Inhalten und Funktionen stellt die WACA-Website die erste Anlaufstelle für alle Themen rund um Accessibility dar. Sie bildet eine zentrale Plattform für alle Angelegenheiten der Zertifizierung für eine inklusive Gesellschaft im Web. Wenn ihr jetzt überlegt, auch eure Websites zertifizieren zu lassen, schaut doch mal auf www.waca.at vorbei oder lest euch Wolfgangs Blog-Post zur Zertifizierung durch. Wenn ihr euch noch nicht sicher seid, solltet ihr den Artikel von Jo lesen, der euch erklärt, warum Accessibility im Web ein wichtiges Thema ist.

Für mich war das Web Accessibility Certificate Austria Projekt sehr spannend und lehrreich. Ein komplettes CI zu kreieren war anfangs zwar herausfordernd, machte mir aber riesig Spaß. Es gibt viele Dinge zu beachten und auszuarbeiten, die ich als Webdesigner nicht jeden Tag mache. Vor allem die Möglichkeit zu zeigen, dass accessible Webdesign auch ansprechend und schön sein kann, war für mich eine große Motivation. Ich hoffe, dass ich dadurch einen Teil zu einer barrierefreien Zukunft beitragen kann und sich viele Unternehmen dafür entscheiden, das Zertifikat für eine barrierefreien Website zu erlangen.

The post Barrierefreies Corporate Design für WACA first appeared on Zensations.

Von Photoshop zu Sketch

Sketch ist ein sehr schlankes Programm. Dadurch ist es möglich, das gesamte Design einer Website in einer Datei zu speichern (bei Photoshop führte das ja oft zu endlosen langen Lade- und Speicherzeiten). Die App lässt sich aber auch um ein Vielfaches erweitern, da es unzählige Plugins und kompatible 3rd-Party-Programme gibt, z.B. für Prototyping. Wer versucht, Sketch mit Photoshop, Illustrator oder InDesign zu vergleichen, der kommt schnell an seine Grenzen. Es handelt sich zwar wie bei Illustrator um ein Vektor-Programm, aber es ist weniger auf Illustration, sondern wirklich auf UI- und Web-Design ausgelegt. Daher ersetzt es keines dieser Programme gänzlich. Adobe bietet als Alternative die App Adobe Experience Design. Diese ist zwar vielversprechend, hinkt aber Sketch noch hinterher.

Gliederung der Inhalte

Sketch spielt in einer ganz anderen Liga. Da die App für UI- und Web-Design optimiert ist, bietet sie ganz neue Möglichkeiten, zum Beispiel bei der Gliederung der Inhalte.

Pages

Zur Gliederung für die Unterseiten verwende ich Pages – also es gibt bei mir eine Page für die Landingpage, eine für die Newsübersicht, eine für die Artikeldetailseite usw.

Artboards

Um wiederum verschiedene Ausprägungen von den Unterseiten anzuzeigen, sind Artboards sehr praktisch. So kann ich z.B. bei der Page “Kontaktseite” jeweils ein Artboard erstellen für das Kontakt-Formular

• vor dem Ausfüllen (leeres Formular)
• während des Ausfüllens (Darstellung der Inline Errors)
• nach dem Ausfüllen (Erfolgsmessage)

Dasselbe gilt für die Darstellung verschiedener responsiver Optionen. So können z.B. Artboards für Desktop, Tablet und Mobile mit von Sketch vorgeschlagenen Maßen erstellt werden.

Symbole

Das nächste tolle built-in Feature sind die Symbole. Sie funktionieren ähnlich wie Smart-Objects in Photoshop, doch sie bieten noch ganz andere Möglichkeiten. Wenn man beispielsweise mehrere Icon-Symbole in derselben Größe erstellt, kann man sie im Design per Dropdown auswechseln. Das funktioniert sogar, wenn man Symbole verschachtelt. Sehr praktisch sind in diesem Zusammenhang auch Namenskonventionen. Wenn ein Button beispielsweise einen hover, focus und active State aufweist, so können die Symbole gruppiert werden, indem man sie “button/hover”, “button/focus” und “button/active” nennt. Das trägt sowohl zur Übersichtlichkeit als auch zur schnelleren Auffindbarkeit bei.

Textstyles

Ähnlich wie in anderen Programmen funktionieren auch die Textstyles in Sketch. Für eine übersichtliche Darstellung habe ich die einzelnen Styles durchnummeriert. Für die Trennung von Semantik und Optik kann schon in Sketch der Grundstein gelegt werden. Unsere Überschriften tragen die Namen Heading XXL bis Heading S. Nennt man sie beispielsweise Heading1, so kann das irreführend sein, weil damit das h1-Element gemeint sein könnte. Meistens stimmen die optischen und semantischen Überschriften zwar überein, aber sie müssen auch oft extra gesetzt werden, beispielsweise wenn bei einer Blogübersichtsseite nach der großen Überschrift (h1) kleinere Blogtitel folgen.

Erstellung von Layouts

Beim Webdesign ist es essentiell, dass sich der Designer an einem Grid orientiert. Für dieses Grid wird eine Gesamtbreite festgelegt und man teilt es in eine bestimmte Anzahl von Spalten (meist zwölf). Zudem wird eine Spaltenbreite definiert und daraus ergibt sich auch die Breite des Spaltenzwischenraums. Durch die Definition eines Grids wird gewährleistet, dass das Design gut umsetzbar ist. Das Erstellen eines solchen Grids ist oft mühsam, egal ob es von einem CSS-Framework wie Bootstrap oder Foundation vorgegeben wird, oder ob es in Absprache mit dem Development manuell berechnet oder mit Hilfe von Online-Kalkulatoren erstellt wird. Sketch bietet daher die Option “Layout Settings”, wo bequem die gewünschten Werte für das jeweilige Artboard eingetragen werden können und das “Grid” bzw. “Layout”, wie es in Sketch heißt, automatisch angezeigt wird.

Responsive Design mit Resizing

Egal ob man den Mobile First Ansatz verwendet, oder klassisch von Desktop auf Mobil runterbricht, Sketch bietet für beide Varianten ein tolles Tool an. Die Option “Resizing” ermöglicht es, das Verhalten von Objekten zu definieren. Der Designer kann also festlegen, an welchen Ecken ein Objekt fixiert ist und ob die Größe des Objekts beim Resizing gleich groß bleibt oder prozentuell mitwächst bzw. -schrumpft. Eine genaue Erklärung wie dieses Tool funktioniert findet ihr in Jon Moores Artikel Sketch 44 Resizing: How does it work???.

Exportieren von Komponenten

Für den Export bietet Sketch eine sehr innovatives System. Jedes Element kann rechts unten über die Schaltfläche “Make Exportable” zu den exportierbaren Komponenten hinzugefügt werden. Dann kann ausgewählt werden, in welcher Auflösung das Element gespeichert werden soll. Spezielle Auswahlmöglichkeiten z.B. für Retina Anzeigen, Präfix/Suffix und Dateiformate machen das Exportieren so einfach wie noch nie. Im Anschluss können alle exportierbaren Komponenten mit einem Klick in dem ausgewählten Format gespeichert werden.

Shortcuts

An dieser Stelle alle Sketch Shortcuts anzuführen ist ein Ding der Unmöglichkeit und würde den Rahmen dieses Blogartikels sprengen. So mancher Shortcut stellt eine enorme Zeitersparnis dar, wie beispielsweise die Verwendung der Alt-Taste zum Anzeigen von Abständen zwischen Elementen. Wer sich genauer über Shortcuts informieren will, dem empfehle ich folgende Lektüre von designcode.io.

Plugins

Ebenso wie bei den Shortcuts gibt es auch bei den Plugins so unendliche viele, dass ich sie hier nicht alle anführen kann. Dennoch möchte ich ein paar an dieser Stelle vorstellen, die mir gute Hilfestellungen leisten.

• Ganz oben auf der Liste steht Craft von Invision. Das Plugin hat viele Funktionen, ich nütze sie hauptsächlich für Dummy Content. Es können Bilder z.B. von Unsplash oder aus einem bestimmten Ordner zufällig eingefügt werden. Aber auch Namen, Adressen, Telefonnummern können automatisch hinzugefügt werden.
• Auch sehr praktisch ist das Plugin Clipboard Fill, das es ermöglicht, ein Bild in eine bestimmte Form einzufügen. Da Sketch dieses Feature nicht nativ anbietet, ist dieses Plugin von großem Vorteil.
• Das Plugin Magic Mirror ermöglicht perspektivische Transformationen mit einem Klick darzustellen. So können z.B. Screens schnell in Shapes (z.B. einen IPhone-Screen) eingefügt werden.

Prototyping

Da das Web nun einmal nicht statisch, sondern agil ist, sind Prototyping Tools unerlässlich im Designprozess. Sketch allein ermöglicht kein Prototyping, allerdings gibt es viele kompatible Programme:

• Zeplin: Zeigt Farben, Assets und Schriften an und es können Guidelines erstellt werden. Zudem gibt es eine Kommentarfunktion für Besprechungen mit Developern. Außerdem kann Source Code (ios/android) exportiert werden.
• Invision App: Hier handelt es sich um ein Online Prototyping Tool, das für ein Projekt kostenlos ist. Für mehrere Projekte gibt es verschiedene Pricing-Modelle. Mit der Invision App lassen sich Click-Dummies erstellen und sie hat ebenfalls eine Kommentarfunktion.
• Flinto: Ist ein Prototyping Tool, mit dem Scrolling, Transitions und Microinteractions animiert werden können.
• Principle: Ist ebenfalls für Animationen geeignet.
• Marvel: Bietet alles von Design über Prototyping bis hin zu Collaborations.

Fazit

Ich liebe Sketch! Und würde es jedem ans Herz legen, es selbst zu testen.

The post Erste Erfahrungen mit Sketch first appeared on Zensations.

Noch vor der eigentlichen Konferenz wurde am 7.11. mit einem vom Accessibility Club organisierten Workshop gestartet. Nach Vorträgen von Karl Groves, der für die Paciello Group arbeitet, und uns Tenon.io präsentierte, sowie von Job, der uns Screenreader demonstrierte, ging die Veranstaltung in ein Barcamp über. Es wurden viele Themen besprochen, unter anderem auch wie die Lage in Österreich ist, nachdem hier die Gesetzeslage Dienstleister dazu verpflichtet ihre Produkte barrierefrei zu präsentieren – auch online.

Am Abend fanden sich einige Teilnehmer der Konferenz in der Microsoft Digital Eatery ein, wo es spannende Vorträge zu den Themen “Seductive web design”, “Why I love type”, “The emoji family in JavaScipt” und “Create more personal computing” gab. Danach lud das Unternehmen auf Snacks ein, wobei sich die Konferenzteilnehmer und Speaker des Abends untereinander austauschen konnten.

DJ Beats, Radiohead und One Direction

Tag eins der Konferenz startete mit vielen erstaunten Ohren. Der Admiralspalast wurde bereits um 9 Uhr vormittags von DJ Tobi Lessnow beschallt. Auch die zu Beginn etwas Skeptischen im Publikum ließen sich von der Motivation und der Begeisterung anstecken.

Im ersten Talk erklärte Paul Bakaus in seinem Vortrag “Progressive Web AMPs”, dass 53% der Nutzer eine Website verlassen, wenn sie nach drei Sekunden noch nicht geladen ist. Die meiste Ladezeit nimmt dabei Werbung ein – im Schnitt sogar 50%. Der Vorteil von progressive web AMPs ist, dass beispielsweise Werbungen mit weniger Priorität geladen werden als der Inhalt und daher weniger Nutzer die Website frühzeitig verlassen. Außerdem ist die JS library open source und wird von Unternehmen wie Google, Twitter und Pinterest verwendet.

Im Anschluss sprach Ariel Cotton über “The World is your Interface”. Die emotionale Ansprache enthielt viele Anekdoten aus ihrem Leben und Erkenntnisse die sie gesammelt hat. Dazu zählt, dass nichts original ist, da alles nur eine Imitation von etwas anderem ist – und das ist auch in Ordnung so. Das Leben sieht sie als Lehrschule für User Experience. Achtsamkeit erachtet sie als besonders wichtige Eigenschaft eines Designers. Als solcher muss man seine persönlichen Träume vergessen und stattdessen die Bedürfnisse der User in den Mittelpunkt stellen. Die Aufgabe eines Designers ist es, den Menschen zu helfen.

! L ife is a study in UX.

Der dritte Talk mit dem Titel “How the tech sector could move in one direction” von Sacha Judd hat viele von den Socken gehauen, da es die erste Hälfte um die Boygroup “One Direction” ging und es letztendlich mit dem Thema Diversity endete. Die Fangemeinde der Band hat ihrer Meinung nach unglaubliches Potential. Viele der jungen Frauen haben Fanblogs (Tumblr) programmiert, doch kaum eine von ihnen sich für gut genug, um im technischen Bereich zu arbeiten. Sacha sieht das Problem im Bewerbungsprozess. Die Vergangenheit, Herkunft und das Geschlecht sollte weniger Rolle spielen, da das für die geleistete Arbeit irrelevant ist.

Mehr Verantwortung, weniger Probleme und jeden Tag eine Zeichnung

Tim Kadlec beschrieb in seinem Vortrag “Unseen” nicht nur die sichtbaren Hürden für die Nutzung des Internets, wie die Fähigkeit der Nutzer, den Antrieb, die Leistbarkeit und die Infrastruktur, sondern auch die drei großen unsichtbaren Hürden Sicherheit, Zugänglichkeit und Performance. Um sie sichtbar zu machen empfiehlt er beispielsweise aXe für Accessibility Tests zu verwenden. Es gibt keine perfekte Sicherheit, Zugänglichkeit und Performance – das Wichtigste ist, es zu versuchen und sich stets zu verbessern.

Als nächstes wurde allen, die es noch nicht wussten, klar, warum Mike Monteiro einer der heiß ersehntestes Speaker der Konferenz war. In seinem Vortrag “Let us now praise ordinary people” appellierte er an die Designer ihrer Profession mit Verantwortungsgefühl nachzugehen. Designer sind nichts besonderes, nur “ordinary people”, aber diese sind es, die die Welt verändern können. Und man hat auch das Recht, nein zu sagen. Es ist unsere Entscheidung, womit wir unsere Lebenszeit verbringen und in welche Projekte wir unsere Energie investieren.

! As a designer you have the responsibility to leave the world in a better state than you found it.

Einen hands-on Talk hörten wir im Anschluss von Heydon Pickering. Seine Tipps bezogen sich auf “Writing less damned code”. Sein erster Ratschlag war, sich bei einem Kundengespräch auf den Boden zu kauern und aus dem Raum rauszurollen, sollte dieser ein Carousel wünschen. Er plädiert dafür, den Inhalt für eine bessere Usability und Accessibility untereinander und nicht nebeneinander anzuordnen. Wie viel unnötigen Code ein Twitter-Button erzeugt, beschrieb er in seinem zweiten Statement. Auch WAI-ARIA solle nur für Elemente eingesetzt werden, wo es tatsächlich nötig ist. Von der Font-Resizing Funktion riet er ebenso ab, da diese auch mit einfachen Browsereinstellungen zu erreichen ist. Niemals sollte man außerdem Device Breakpoints erstellen, Content Breakpoints sind dem vorzuziehen. Bei Grids empfiehlt er den Mobile First Ansatz. Keinesfalls sollten Widgets links oder rechts vom Main Content platziert werden (Zitat: „It’s nice that you tell me what i can ignore“). Des Weiteren hält er alle Zurück- Buttons für überflüssig, da sie sowieso in jeden Browser integriert sind. Sein Fazit: Less is less. Less code, less problems.

Danny Gregory erzählte in seinem Talk “Everyday matters!” seine persönliche Geschichte, wie er wieder zum Zeichnen zurückfand. Ein Schicksalsschlag hat ihn dazu bewogen. Nicht um Künstler zu werden, sondern um des Zeichnens Willen. Talent sieht er als eine Kombination aus Passion, harter Arbeit und Persistenz. Zudem unterscheidet er zwischen Art (= Kunst im Museum und die Kunstindustrie) und art (= Momente des Lebens dokumentieren, im hier und jetzt sein). „Remember. You once knew how.”

Typografie, Patterns und Bildoptimierung

Mike Kus verriet in seinem Talk „Be the black sheep“ wie man als Webdesigner nach 2020 noch überleben kann. Das Wichtigste ist, zu erkennen, dass die Identität des Unternehmens einzigartig sein muss und das Fundament für das Design darstellt. Der Kunde muss wissen, was er will. So setzt sich dann das Portfolio eines guten Designers aus verschiedenen Identitäten der Kunden zusammen und bildet dadurch die des Designers selbst.

In “Typography is code” beschreibt Frank Rausch die Wichtigkeit von guter Typografie im Web. Dazu bezieht er sich auf die App Viki (von Raureif Berlin), die Wikipedia in typographisch korrekter Weise wiedergibt. Besonders wichtig ist, dass nur ca. 60 Zeichen pro Zeile angezeigt werden. Weitere wichtige Punkte für die Typografie sind: Auswahl der Typeface, Schriftgröße, Zeilenhöhe, Stil, Zeilenlänge und das Tracking. Auch auf die richtigen Anführungszeichen, ein echtes Minus, dem Umbruch nach einem Doppelpunkt und spezielle Abstände, beispielsweise vor Gewichts- oder Distanzangaben wie kg und cm ist zu achten. Besondere Features sind ein Nachtmodus / hoher Kontrastmoduls sowie die Vergrößerung der Schriftgröße beim Gehen. Die JavaScript Library smarty pants kann zum Konvertierung von sogenannter Microtypography verwendet warden. Gerade in Bezug auf Typografie betont Frank Rausch wie wichtig es ist, dass Designer auch in den Prototyping und Development Prozess involviert sein sollen.

Charlotte Jackson sprach in Ihrem Vortrag “From pages to patterns” das Problem von unlesbarem und inkonsistenten Code an. Die Lösung liegt ihrer Meinung nach in Frontend Style Guides (= Component libraries = Pattern libraries). Mithilfe von Paper Prototyping kann man firmenintern Bezeichnungen für unterschiedliche Komponenten finden. Diese Bezeichnungen sollten dann mit dem gesamten Team geteilt werden oder im Idealfall sogar für alle ersichtlich auf einer Wand aufgehängt werden und Teil der Firmensprache werden.

Harry Roberts riet in seinem Talk „Refactoring CSS without losing your mind“ dazu eine shame.css Datei anzulegen, um Hacks zu isolieren. Darin soll dokumentiert werden, warum man welchen Hack eingebaut hat. Dadurch lässt sich gut nachvollziehen, wo und warum ein Hack eingebaut wurde und ob bei den Mitarbeitern eventuell Bedarf für Erklärungen oder Hilfestellungen besteht.

„The Joy of Optimizing“ brachte uns Una Kravets näher. Da 2016 erstmals die Zahl der Smartphones und Tablets die der Desktop-Computer überschritten hat, werden Ladezeiten von Webseiten ein immer größeres Thema. Zu den bekannten Bildformaten JPG, GIF und PNG erwähnte sie auch noch WebP. Dieses Format kann sowohl lossy als auch lossless speichern und unterstützt Animationen. Unterstützt wird es von Safari und Firefox und es gibt ein Photoshop- Plugin zur Erstellung. Eingebunden wird dieses mithilfe des HTML picture elements. WebM ist das dazugehörige Videoformat. Dessen Vorteil ist die geringere Dateigröße im Vergleich zu anderen Videoformaten.

In Zukunft spannend werden die Bildformate BPG (= better portable graphics) und FLIF (= free lossless image format) für responsive Images – hier können mehrere Bilder in einer Datei gespeichert werden. Derzeit befindet sich die Technologie im Beta-Stadium. Derzeit kann man sich Abhilfe schaffen durch die Verwendung von ImageMagick®, ImageAlpha, ImageOptim, Compressor oder SVG Online Optimizier.

Una Kravets gab zudem noch weitere Profitipps:

• Während dem Ladevorgang können beispielsweise geblurrte Bilder angezeigt werden. Ein Bild, das normal rund 400kB aufweist, ist im geblurrten Zustand nur ca. 0,5kB groß und kann somit sofort dargestellt werden, während das Originalbild noch geladen wird.
• Schwarz-weiß Bilder, die mithilfe eines Blend Modes eine bestimmte Farbwirkung erzielen, laden ebenfalls schneller. Less colors, less problems.
• Bei GIFs sollte man redundante Frames löschen. Oder man steigt gleich auf GIFV um – kleine Autoplay Videos in besser Qualität als GIFs.
• Bei Bildern soll immer eine max width definiert werden, die der größten responsive Breite entspricht. Auch für Retina ist es nicht nötig eine 200%ige Auflösung zu verwenden, da das menschliche Auge diese feinen Unterschiede kaum wahrnimmt.
• Verwende WebP statt Jpg.
• Unter http://una.im/CSSgram/ stellt Una eine Library zur Verfügung, um Instagram Filter mithile von CSS Filtern und Blend Modes nachzuahmen.

Storytelling und Naivität

Im Vortrag “Beyond Measure” ging Erika Hall auf das Thema Storytelling und das Stellen der richtigen Fragen ein. Der Mensch ist ein imperfektes Wesen, der nicht rein rational entscheidet / entscheiden kann. Daher haben Geschichten ein so großes Potential. Und im Gegensatz zur gängigen Meinung sagen hingegen quantitative Studien oft nichts aus, weil sie nicht die richtigen Fragen stellen. Es müssen beantwortbare Fragen gestellt werden – und diese findet man oft erst durch eine qualitative Studie im Vorfeld.

Jeff Greenspan rät in seinem Talk “Be Stubborn. Be Naive.” zu eben genau dem: seid stur, seid naiv. Nicht in jeder Lebenslage mag dieser Tipp ein guter sein, doch wenn es um kreative Ideen gehen, dann sollte man immer selbst daran glauben (naiv) und sie auch durchsetzen (stubborn). Jeff Greenspan selbst hat mit dieser Methode viele Kunstprojekte umgesetzt, die Menschen wachrütteln sollen. Hätte er sie zu sehr auf ihre Umsetzbarkeit und ihre Erfolgschancen hinterfragt, so hätte er sich vermutlich dafür entschieden, sie nicht zu verwirklichen. Aber glücklicherweise war er auf diesem Gebiet naiv und stur genug, um es zu wagen.

Wer gerne mehr Details zu den einzelnen Talks möchte, kann sich die Videoaufzeichnungen auf Vimeo dazu ansehen.

Alles in allem war die Konferenz nicht nur gefüllt mit mitreißenden Vorträgen, die zum Denken anregten und einiges zum Lernen vermittelten, sondern auch ein gut organisiertes, schön präsentiertes, spannendes Erlebnis. Thumbs up, große Empfehlung!

The post Ein Blick beyond tellerrand first appeared on Zensations.

Fluch oder Segen?

Die Präsenz in den Medien ist nicht zu übersehen, viele Zeitungen und Online-Portrale berichten von teilweise wahnwitzigen Vorfällen mit dem Spiel. Sogar der ÖAMTC meldete sich besorgt zu Wort und warnte vor der Ablenkung am Steuer: “So wendet ein Autofahrer auf der Autobahn, um eines der Monster zu erreichen […]”.

Es ist unglaublich, welches Suchtpotential in dem MMORPG-ähnlichem Spiel steckt und wie schnell sich die AR-Monsterjagd durchgesetzt hat. Manche Unternehmen oder Institutionen reagieren zum Teil sehr kritisch auf das Spiel, andere wiederum nutzen den neuen Trend für sich und hängen sich an naheliegende Pokestops. Genauso gibt es aber Menschen, die Angst vor diesem neuen Trend haben und sich in einer Abwehrhaltung vor dieser Innovation verstecken.

Ehrlich gesagt war es doch schon längst an der Zeit, dass ein AR/VR-Spiel in dieser Dimension auf den Markt kommt. Die Technologien dazu gibt es schon seit Jahren, es hat nur das richtige Spiel mit einer halbwegs spannenden Story und ausreichend “Suchtpotential” gefehlt. Nur 13 Stunden nach dem Launch war Pokemon Go in den USA die Nummer 1 im App Store. Mittlerweile verbringen Nutzer im Schnitt pro Tag unglaubliche 43 Minuten mit Pokemon Go während für WhatsApp nur 30 und für Instagram 25 Minuten übrig bleiben. Die Investition von 30 Millionen Dollar hat sich für Nintendo und Google anscheinend gelohnt.

Doch was macht das Spiel nun so erfolgreich? Wir sehen uns nachfolgend eine Handvoll möglicher Gründe für den überragenden Erfolg des interaktiven Monstersammelns an.

Enjoy the Flow

Bei einem Spiel von Gamification zu sprechen scheint wohl etwas absurd, aber genau die Prinzipien der “Verspieltheit” sind ausschlaggebend für den langanhaltenden Erfolg von Pokemon Go. Spiele sind dann erfolgreich, wenn sie über ein Design verfügen, dass einen möglichst langen Flow-Zustand beim Nutzer hervorruft. Aus psychologischer Sicht befindet man sich dann in einem Flow, wenn man sich an einem Punkt zwischen Unruhe und Langeweile befindet. In einem solchen Zustand verliert man jegliches Zeitgefühl, man geht total im Moment auf und spürt eine scheinbar unendliche Motivation.

Während wir in den vergangenen Jahrhunderten (oder Jahrzehnten) über Dinge wie Malen, Musizieren oder die Arbeit am Feld den Flow erreichten, sind es heute das Internet, Tinder und Smartphone-Spiele (hoffentlich nicht ausschließlich).

Pokemon Go gelingt es, den Großteil der Nutzer genau in diese “Flow Zone” zu katapultieren. Beim Spielen befindet man sich genau in dem wünschenswerten Bereich zwischen “Shut Down” und “Not Engaged”.

Back to the 90s

Wenn wir (die Generation Y) ehrlich sind, haben wir uns doch schon lange nach einer Neuauflage des Pokemon-Spiels gesehnt. Das Phänomen von Pokemon Go ist dieser Hinsicht eigentlich sehr einfach zu erklären, denn oft sehnen wir uns nach glücklicheren Zeiten. Und Pokemon Go erweckt in uns Erinnerungen an die gute alte Game Boy-Zeit. Viele von uns verbinden damit ihre jugendlichen, unbeschwerten Jahre. Da wird schnell klar, warum wir so sehr auf das Spiel abfahren! Dieses Comeback-Phänomen lässt sich unter anderem auch bei Zeitschriften und Fernsehserien beobachten.

Catch them all!

Fast alle Menschen sammeln irgendetwas – Briefmarken, Zitate aus Glückskeksen, Autos, Handtaschen, Sneakers und eben auch Monster. Würden wir nicht sammeln, so hätten wir als Spezies vermutlich nicht überlebt. Die Motive hinter dem Sammeln sind aus psychologischer Sicht sehr unterschiedlich. Für die einen Menschen ist es eine reine Leidenschaft, für die anderen eine Form der Bestätigung. Pokemon nutzt diesen Sammeltrieb, um uns zu motivieren, immer mehr der kleinen Monster zu sammeln. Es gibt immer bessere Monster zu entdecken und schließlich möchte man auch die Liste ebenso voll wie die Kollegen haben.

Reinforcement

Wie gelingt es, die Spieler dauerhaft zu motivieren, um für eine Belohnung zu spielen? Damit beschäftigt sich die Wissenschaft unter dem Begriff “Reinforcement”. In Casinos wird bei einarmigen Banditen ein variabler “Zeitplan” genutzt, um die Spieler zu belohnen. Darum haben die Spieler auch den Drang, ständig Münzen in den Automaten zu werfen (auch bekannt als “Operant Conditioning”). Wie die Belohnungen (also die Monster und die weiteren Gegenstände) bei Pokemon Go verteilt werden und in welchen Zeitabständen sie vergeben werden, ist zur Zeit unbekannt. Auf jeden Fall nutzt das Spiel eine Art des “Reinforcements”, um die Spieler ein kleines bisschen süchtig zu machen.

Fun, fun, fun

Ein weiterer, einfacher Grund warum Pokemon Go so extrem gespielt wird: es macht einfach Spaß. Es verbindet Sammeln mit Wettbewerb. So kann man nicht nur dem inneren Sammeldrang nachgehen, man kann sich auch sozialisieren und mit anderen Spielern messen. Schließlich sorgt Pokemon Go auch für eine kurzweilige Ablenkung vom oft stressigen Alltag und erlaubt uns kurz abzuschalten (eine bessere Alternative dazu wäre vielleicht eine regelmäßige Meditationspraxis).

The post Warum Pokemon Go so erfolgreich ist first appeared on Zensations.

Trainingstag

Die Konferenz begann mit einem Trainingstag, wobei zwei Tracks zu den Themen Google Tag Manager und ein Einstieg in Google Analytics angeboten wurden. Ich habe mich für den Google Analytics-Teil entschieden. Während des Trainings wurden alle wesentlichen Bereiche des Tools ausführlich erklärt. Der Vormittag bestand aus einer grundlegenden Einführung in die Begriffe und die Bedienung der Oberfläche sowie der Seiten- und Zielanalyse.

Die Zeit am Nachmittag war leider etwas eng und daher konnten nicht alle Punkte im Detail vorgestellt werden. Ich hätte mir etwas mehr Input zur Analyse der gesamten Customer Journey gewünscht. Dennoch war der erste Trainingstag ein Erfolg und ich konnte auch als langjähriger Analytics-Nutzer einige neue Insights mitnehmen. Vielleicht werde ich mich demnächst an die Google Analytics-Prüfung herantrauen.

Die große Konferenz

Der Dienstag war ein deutlicher Kontrast zum Trainingstag: mehr Besucher und ausschließlich Frontalvorträge. Das zentrale Thema der Konferenz wurde schnell klar. Überall hörte man “Customer Centricity”. Die Keynote hielt Thorben Fasching, Vizepräsident des Bundesverband Digitale Wirtschaft in Deutschland, für mich eines der Highlights am ersten Tag. In einer Zeit der Informationsflut wird es immer wichtiger den Kunden zuzuhören. Fasching lieferte auf die wichtigsten Themen unseres Konsumzeitalters keine Antworten sondern tiefergehende Fragen: Wie können Kunden heute entscheiden, was wirklich relevant ist? Wie kann man sich von seinen Mitbewerbern abheben?

Fasching zufolge liegt der Erfolg der Veränderung darin, sämtliche Energie auf den Aufbau von etwas Neuem zu konzentrieren und den Kunden zum Helden zu machen. Produkte oder Services sind schon lange keine Helden mehr. Und wenn es um Kunden geht, dann sollte man sich auf seine besten Kunden(gruppen) konzentrieren. Man muss die gesammelten Daten zu seinem Vorteil nutzen und die richtige Information zum richtigen Zeitpunkt am richtigen Ort zur Verfügung stellen.

DIE MEISTEN VORTRÄGE DES KONFERENZTAGES BESCHÄFTIGTEN SICH MIT FAKTEN AUS DER DIGITALEN WELT, DIE EIGENTLICH SCHON LANGE KLAR AUF DER HAND LIEGEN:

• Die Kunden erwarten sich ein durchgängiges Einkaufserlebnis unabhängig vom benutzten Channel.
• Eine der größten Hürden ist die Veränderung in den Denkweisen des Managements und das Loslassen von alten Prinzipien.
• Immer mehr Menschen kaufen online und mobil ein, der Zugriff auf Echtzeitdaten beeinflusst das Einkaufsverhalten.
• Das Prinzip “Mobile First” lässt die On- und Offline-Welt immer weiter miteinander verschmelzen.
• Neue Unternehmen können aufgrund der digitalen Disruption innerhalb kürzester Zeit einen ganzen Markt verändern (Stichwort Uber und airbnb).
• Eine Cross-Channel-Strategie ist nicht mehr genug, On- und Offline muss als Gesamtsystem betrachtet werden.

Ein letztes Highlight am Konferenztag war für mich das Panel zum Thema “Reinvent or Die”. Harald Gutschi von der Unito Gruppe erzählte von der Transformation des OTTO Versands vom Katalog-Business zum äußerst erfolgreichen Onlinehändler. Die schrumpfende Aufmerksamkeitsspanne (von etwa neun Sekunden) sieht Gutschi als eine der großen Herausforderungen in der Zukunft. “Der Fernseher ist das Lagerfeuer der Zukunft” – da erkennen sich wohl viele junge Erwachsene wieder. Familien sitzen heute vor dem Fernsehprogramm während sie auf ihren Smartphones im Internet surfen. Soziale Medien und Buy Buttons werden damit immer wichtiger im Online-Business.

Workshops & Best Practices

Am letzten Tag boten internationale Branchenexperten einen Einblick in fortgeschrittene Analysemethoden und Trends im E-Commerce. Während im einen Saal über den Einsatz von Beacons (nicht Bacon!) gesprochen wurde, wurde im anderen Saal über Trigger und Variablen im Google Tag Manager philosophiert.

Besonders spannend fand ich am letzten Tag die Vorstellung der Design Thinking-Methode. Dabei handelt es sich um eine Innovationmethode zur Ideengenerierung. Im besten Fall werden bei dieser Methode Menschen mit unterschiedlichem Backgroundwissen zusammengewürfelt.

Wir wurden während des Workshops in drei Gruppen eingeteilt, um den stationären Weinhandel neu zu erfinden. Mit drei unterschiedlichen Tools haben wir dann versucht das Einkaufserlebnis für den Kunden neu zu entwickeln. Der Output war nicht unbedingt revolutionär, es wurden Ideen wie mobile Payment, ein Kundenprogramm und eine bessere Beratung hervorgebracht. Nichtsdestotrotz war die Anwendung der unterschiedlichen Tools eine interessante Erfahrung. Und die persönliche Werkzeugkiste an kreativen Methoden kann nie groß genug sein!

Bin ich jetzt ein Analytics-Profi?

Für mich war die dreitätige Google Analytics Konferenz ein spannendes Erlebnis. Vom ersten Tag konnte ich hinsichtlich des Analysetools vom großen G einiges mitnehmen. Der zweite und dritte Tag standen für mich eher im Zeichen des E-Commerce. Wie so oft wurde viel heiße Luft um die bereits bekannten Herausforderungen des digitalen Zeitalters gemacht. Abgesehen davon waren aber viele spannende Persönlichkeiten vor Ort, die auch sehr intime Einblicke in ihr Business gaben. Unterm Strich konnte ich einiges an Input und Inspiration für die (Buzzword) Digitale Transformation (/Buzzword) mitnehmen. Dazu kommt ein besserer Umgang mit Google Analytics.

The post It’s All About Analytics – Google Analytics Konferenz 2016 first appeared on Zensations.

Essl Foundation

Firstly, I want to introduce you to the organization behind this event. As read on their website, the Zero Project is an initiative of the Essl Foundation, which has been established in March 2008 and which focus is set on the Zero Project. The Essl Social Prize – an award for outstanding social entrepreneurs, supporting social innovation with a emphasis on persons with disabilities and job creation in Austria, Sinnstifter – joint activities with other Austrian Foundations and the “Verband für Gemeinnütziges Stiften” for supporting philanthropy in Austria.

Behind the Zero Project

The Zero Project itself focuses on the rights of persons with disabilities globally. It provides a platform, where the most innovative and effective solutions to problems that persons with disabilities face, are shared. Its sole objective is to assist in creating a world without barriers.

They use a solution-based approach for their work. Together with their continuously growing network of over 3,000 disability experts in over 150 countries, they seek to identify the most innovative and effective policies & practices that improve the lives of persons with disabilities. More information can be found on their website.

Impressions

Now I want share my impressions, which started on the second day of this event with the official opening ceremony and ended with the final plenary. I appreciate this experience outside of my used surroundings in the last years. There was a little bit of a coming back to the fields of activity where I have been for years and meeting people again after a long time as well as meeting new ones which resulted in interesting conversations. Therefore I want to thank Zero Project a lot for the invitation.

CROSS SECTION SUBJECT AS PROGRAM

It was not possible to attend all sessions because there were three sessions at the same time. As a result I was only focussing on sessions which met my personal and professional interest. The conference topics can be so far roughly summarized in three fields: Policy, Education and Information & Communication Technology. I have to mention that the field of disability, inclusion, accessibilility and sustainability is a large cross section subject. Hence, it is its nature that these are controversial topics, too.

SHORTCOMINGS

For me it is important to have the possibility to discuss on a well balanced and fair manner and these have been a shortcoming for deaf people with sign language as their first language. Because there was only one room providing sign language interpreting. The interpreter has done an incredible work because they were doing an unbelievable extra effort. Every room was providing english captions of the spoken topics. If deaf people wanted to share on discussions there was no possibility, only if they have brought their own interpreter. And networking without sign language interpreting is a matter of enormous extra effort for the most of them. Therefore I would say, it was only a partially accessible event.

PR STUNT VS. ACCESSIBILITY

We cannot really talk about inclusion if there is partial exclusion even if not intented. I am not sure how hard of hearing people or people with cochlea implants were thinking about. Because only one room have been clearly marked out by providing an induction loop for access with hearing aids. Maybe this has been a public relations stunt of the event sponsor which have in their own session in this room only been talking about costs and benefits of their hearing implant technology and surprisingly drop really important and neutral arguments in the session summary in the final plenary. I was missing fairness in this issue and the session chair was not biased. One of these arguments will be explained here later.

ACCESSIBILITY IS A FULL SERVICE

It is not only a matter of money or intent whether you provide a service or not. It is a cause of clear communication or information. As I am always writing accessibility is a business of balance in a range of possibilities. If you are providing a service then do it as a fullservice and make clear statements. Partial service is likely to be a russish roulette gun for public relations. Clear communication, clear information and clear services – then you can be sure there will be a greater atmosphere and experience for all stakeholders which can emerge a new culture in sharing expertise and understanding people. It is not about providing everything but to keep a well-thought balance within the possibilities.

It is not my intent to blame the event. No, I want to point out possible blind spots which can be improved for future activities. Nonetheless, it has been an interesting experience getting the possibility to attend the Zero Project Conference, which left me inspired to get some more insights. Therefore it is great effort of the Essl Foundation to make this possible. Chapeau!

ASSISTIVE TECHNOLOGY

As I am familiar with conferences in the field of web accessibility there were different approaches concerning the topics. The focus had a strong bias on assisitive technologies in general. Despite of their importance, they are only one side on the bridge of overall accessibility. Technology alone is not granting the involvement of any stakeholders because it is a matter of culture, too. Imagine, if you have access to anything but you have not the feeling of being welcomed or being touched? You would miss something and won’t stay long. I am sure if there is a sense for that then technology will be understood and used well. Why are you doing that? In what you are believing in? This is important to get commitment of the stakeholders. I think it is also a matter of how people with disability will be seen in general. They are not homogenous, they are diverse. To be fair this is only a small impression and I haven’t attended the complete session program.

UNIVERSAL DESIGN

Nonetheless, the discussions were interesting on this international level. For example the piece of information about accessibility as an issue in the negotations about TTIP (Transatlantic Trade and Investment Partnership). A very appealing issue for me has been the strong bias on Universal Design. It’s role in accessible tourism, urban developement and sustainability. Especially the material produced by the Centre for Excellence in Universal Design in Ireland was really impressive. As well as some pieces of the technology show. It gave me some impressions outside of my personal bias.

INVESTMENT AND RETURN

And the most impressive statement which left me thinking a lot has been made by Dr. Christian Schober from the NPO Competence Centre at the Vienna University of Economics and Business. He said in the session about “Increasing access by using hearing implant technology” that it is not about costs and benefits but about investment and return, no matter which cause. I recognized the general meaning of his statement, not only for this session and it was indeed an eye opener even for the business in general.

Conclusion

At the Zero Project Conference there was much more in session program which is not covered by this blog post. And there are much more statements I have missed for sure. Despite of the facts I have stated above I would go there again if I get the possibility.

The post For a world with zero barriers first appeared on Zensations.

Ganz besonders hängengeblieben ist bei mir die Aussage von einem hochrangigen Vertreter der Wirtschaftskammer (WKO), der meinte, dass es “der Wirtschaft nicht klar sei”, was Barrierefreiheit sei, nämlich wo sie anfängt und wo sie aufhört. Es liegt mir fern, diese Aussage zu kommentieren oder zu erwidern. Ich nehme es einfach als Inspiration für diesen Artikel.

10-Jahres-Rückblick

Bevor ich hier näher darauf eingehe, gehen wir zunächst kurz einmal zehn Jahre zurück. Am 1. 1. 2006 trat in Österreich das Behindertengleichstellungsgesetz in Kraft, dessen Regelungen die gesellschaftliche Teilhabe von Menschen mit Behinderung verbessern sollte. Dabei wurde für bauliche Maßnahmen eine 10-jährige Übergangsfrist festgelegt, welche mit 1. 1. 2016 endete und auch der eigentliche Grund für diese aktuelle Berichterstattung ist. Damit markiert der Jahresbeginn 2016 eine kleine Zeitenwende, wo man gut beraten ist, eine gesamtheitliche Strategie im Umgang mit Barrierefreieheit zu verfolgen.

Querschnittsmaterie Barrierefreiheit

Es ist verständlich, dass aufgrund dieser Gegebenheiten allgemein eine gewisse Unklarheit herrscht, besonders dann, wenn man bisher kaum oder wenig damit zu tun hatte. Denn die Sachlage ist konservativ betrachtet auf den ersten Blick komplex und umfasst eine Querschnittsmaterie, die man nicht sofort durchblickt. Jedoch kann man es herunterbrechen, um es verständlicher zu machen.

Accessibility

Der englische Begriff für Barrierefreiheit umschreibt in seiner Wortbedeutung etwas ganz wesentliches, nämlich das ermöglichen von Zugängen, um generell eine gesellschaftliche Teilhabe zu ermöglichen: Accessibility. Und das bedeutet nichts weniger als das Sicherstellen eines Mindestmaßes an Komfort, sodass jeder Mensch selbständig und unabhängig mit der Umgebung interagieren, sich bewegen, sowie Leistungen oder Dienstleistungen in Anspruch nehmen kann, ohne auf gröbere Schwierigkeiten zu stoßen.

Gewohnte Einstellung hinterfragen

Sehr hinderlich im Verstehen dieser Materie ist die Tatsache, dass der Fokus auf Barrierefreiheit meist nur auf Menschen mit Behinderung reduziert wird und der Großteil der Menschen sich selbst davon ausnimmt (und dabei vergisst, dass selbst seine eigene Natur nicht vor Veränderungen gefeit ist). Das bedeutet, man fühlt sich gar nicht angesprochen und nimmt es nicht weiter ernst. Und genau dort beginnen die eigentlichen Probleme bei der ganzen Debatte, die konzeptionelle Folgen mit sich bringen und eigentlich den Kern dessen ausmachen, was sich allgemein in einer medialen Erregung niederschlägt.

Sinn von Accessibility

Es geht dabei unter, worum es eigentlich wirklich geht: Ein Mindestkomfort, der dazu noch möglichst barrierefrei ist. Und dieser Komfort ist nichts weniger als eine gewisse Balance, der sich erst in einem Kontext einer gewissen Umgebung (räumlich, digital oder auch kommunikativ) bildet, wobei die Gegebenheiten stets andere sind und man nie in einem fixem Schema denken sollte. Das bedeutet, man hat im Rahmen der Möglichkeiten sehr wohl einen Gestaltungsspielraum. Nur wird das nicht sofort gesehen. Denn es heißt sehr schnell, dass es nicht möglich sei. Die Wahrheit ist, dass dahinter oft aufgrund von Gewohnheiten die eigene Unzulänglichkeit, diese Thematik zu verstehen, zutage tritt. Denn oft trennt man Dinge, die zusammengehören und miteinander erst ein gewisses Erlebnis (User- Customer- und Stakeholder-Experience) ausmachen, deren Basis dieser Komfort ist. Detaillierte Ausführungen und wie Accessibility, UX und Usability dabei in Zusammenhang Kontext stehen habe ich in diesem Beitrag bereits erläutert.

Märkte sind Gespräche

In der Marketingsprache spricht man von der sogenannten Lead-Generierung, was nichts anderes bedeutet, als Interessenten zu gewinnen und zu potentiellen Kunden zu machen. Genau in diesem Sinne ist das Einbeziehen von Maßnahmen zur Barrierefreiheit zu sehen. Damit sind wir schon wieder bei der Wirtschaft. Es wird viel Geld für Maßnahmen ausgeben, um sich selbst bekannter zu machen oder um dem Kunden Qualität zu bieten. Doch Barrierefreiheit wird dabei oft nicht mitbedacht. Und das alles nur deswegen – wie hier oben schon erwähnt -, weil man den Fokus auf eine bestimmte und gesellschaftlich vermeintlich homogene Gruppe von Menschen reduziert und dabei völlig vergisst, wie vielfältig und bunt die menschliche Natur ist. Es geht nicht nur darum, dass ein Rollstuhlfahrer ins Geschäft kann, sondern gleichzeitig auch dass eine Mutter mit einem Kinderwagen einen gewissen Komfort hat. Ähnlich ist das auch im Web, es geht um das Gestalten von Zugängen, sodass Gespräche und Interaktionen möglich sind, denn Märkte sind nichts anderes.

Brücken- bzw. Schnittstellenfunktion

Es ist ein Kardinalfehler, Menschen mit Behinderung als eine homogene Zielgruppe zu betrachten. Denn sie sind genauso divers wie die Gesellschaft insgesamt. Und alle Maßnahmen für Barrierefreiheit sind Brücken bzw. Schnittstellen, welche künstlich getrenntes wieder zusammenbringt. Das können auch Familien sein, wo die Oma im Rollstuhl sitzt, ein Kind gehörlos ist und sie gemeinsam einkaufen gehen. Und was allen damit gemein ist, sie miteinander etwas erleben und dabei auch gleichzeitig selbstständig agieren. Damit das möglich ist, braucht es einen gewissen Rahmen, den man gestalten kann. Und wenn dieser nicht vorhanden ist, dann stellt das natürlich eine Investitionsfrage dar. Und wer nicht in sich investiert, den verschlingt irgendwann der Markt. Die Wirtschaft braucht faire Wettbewerbsbedingungen, das ist keine Frage. Jedoch steht sie sich selbst im Weg, wenn sie es nicht als Chance begreift, Qualität zu verbessern.

Chancen für Unternehmen

Natürlich gibt es auch Situationen, in denen die Herausforderung für die Wirtschaft eine enorme ist. Trotzdem kann man nicht sofort alles in Frage stellen. Wer das tut, stellt sich in Wahrheit selbst in Frage und Menschen mit Behinderung sowie die Barrierefreiheit sind dafür nichts anderes als eine Projektionsfläche. Es spricht viel dafür, dass man hier sachlich bleibt und man die Möglichkeiten anschaut und darauf aufbaut. Jedes Projekt ist eine Chance und wie wir das bewerkstelligen ist immer eine individuelle Geschichte. Durch Erfahrungen entwickelt sich die Gesellschaft und auch die Wirtschaft, denn sie sind der Nährboden für Innovationen.

Apple als Vorreiter

Dass dies funktioniert, beweist in der digitalen Welt Apple. Die wenigsten wissen, dass in den Geräten, die sie kaufen, auch Barrierefreiheit inkludiert ist, selbst wenn bestimmte Dinge gar nicht benötigt werden. Aber man schafft damit ein funktionierendes digitales Ökosystem, das möglichst alle Menschen nutzen können. Es ist inzwischen unbestritten, welchen Beitrag dieser Ansatz in der Welt liefert. Barrierefreiheit erhöht die generelle User Experience und sorgt für eine bessere Durchgängigkeit im digitalen Ökosystem. Dennoch ist hier noch anzumerken, dass es noch genug zu tun gibt. Apps oder digitale Produkte von Drittanbietern sind noch nicht überwiegend zugänglich für jeden, selbst das Web ist ist davon nicht ausgenommen. Doch es wird immer mehr! Die Welt wird es durch ihre Vieltfalt danken, die in Innovationen münden, die wir uns jetzt noch gar nicht ausdenken können.

The post Accessibility im Jahr 2016 first appeared on Zensations.

Trends, die blieben & bleiben

Wer nicht völlig neu ins Webdesign einsteigt, der kennt sie zur Genüge, die seit geraumer Zeit immer wiederkehrenden Begriffe: Responsive, Flat und Material Design. Sie werden uns noch länger erhalten bleiben. Auch das gehassliebte Hamburger Menü wird nicht so schnell von der Bildfläche verschwinden. Und dass Scrollen das neue Klicken ist, wissen wir, seit die One Page Seiten mit Parallax Scrolling wie Pilze aus der Erde schossen und seither zwar nicht mehr so exzessiv eingesetzt werden, aber immer wieder in neuen Varianten auftauchen.

Trends, die 2015 prägten

Vieles aus unserer Prognose vom Vorjahr hat sich bewahrheitet: Animationen sind keine Ausnahmen mehr, sondern sind schon zu einer Voraussetzung für zeitgemäßes Design geworden. Die Typografie hat an Größe zugelegt, ebenso wie die Hintergrundbilder. Und Fullwidth-Videos haben dieses Jahr viele Award Winning Seiten geschmückt. Damit kam aber auch ein neuer, wenngleich nicht so erfreulicher Trend auf: die Intro-Seiten. Diese beinhalten nichts als einen (meist kreativ gestalteten) Ladebalken. Selbst wenn diese Lade-Animationen oft super unterhaltsam sind, verlieren sie spätestens beim 5. Aufruf der Website ihren Reiz. Wir wünschen uns daher, dass dieser Trend nicht lange anhält (und schicken hiermit alle Vertreter dieser Unart auf eine Content Diet!).

Trends, die 2016 kommen

Trends richten sich nicht nach dem Kalenderjahr, schon jetzt findet man sie vereinzelt. Der Split Content ist beispielsweise aktuell hoch im Kurs. Die Website wird in zwei Spalten unterteilt und die Inhalte tauschen sich, meist gegengleich, beim Scrollen aus. Auch dabei zeigt sich: das wohl spannendste Thema ist und bleiben Animationen. Bisher wurde viel mit Mikro-Interaktionen gearbeitet, die kleine Rückmeldungen zu Statusänderungen liefern. Doch jetzt kommt zusätzlich das Storytelling ins Spiel. Die User werden interaktiv durch Prozesse und Geschichten geführt. Dazu wird oft ein Stil zum Einsatz kommen, der einem Storyboard ähnelt: der User kann sich durch einzelne Elemente klicken oder wird per Scroll von einer Szene zur nächsten geleitet. Das stellt eine willkommene Abwechslung zu bloßem Text mit Bildern dar. Um noch mehr Individualität zu zeigen, wird in Zukunft wieder verstärkt mit handgezeichneten Illustrationen gearbeitet. Die Ladezeiten sollen allerdings kurz bleiben, daher gibt es ein wachsendes Interesse in Kurzanimationen, sogenannte Cinemagraphs. Dabei handelt es sich um Standfotos mit einer kleinen, sich wiederholenden Bewegung. Sie werden derzeit entweder als GIFs oder als kurze animierte Videos eingebunden. Interessant wird in diesem Zusammenhang, ob das Format BPG seinen Weg ins Web finden wird. Das leichtgewichtige Pendant für animierte Vektorgraphiken SVG wird bereits immer beliebter.

Trends, über die keiner spricht

Es gibt aber auch Trends, die still und heimlich vorausgesetzt werden, ohne dass sie je thematisiert wurden. Dazu zählen Aspekte wie Usability, Accessibility und User Experience. Diese Themen sind aber der Grund, weshalb manche Trends sich halten und als erstrebenswert erachtet werden, und andere eher nur aufgrund mangelnder Alternativen eingesetzt werden. Zu den letzteren zählen – offensichtlich – die Introseiten. Sie sind aufgekommen, weil viele den Trend zu großen Bildern, Videos und aufwendigen Animationen aufgegriffen haben und damit einen Content Overload erzeugten. Dabei ist aus meiner Sicht das wichtigste als Designer, niemals den Hype um eine neue Entwicklung über die Bedienbarkeit und die Zugänglichkeit einer Website zu stellen. Es muss immer ein Weg gefunden werden, beides zu gewährleisten. Falls dies nicht möglich ist, steht immer noch das Erlebnis des Users im Vordergrund – und ein Ladebalken, der den Benutzer mehr als zehn Sekunden warten lässt, steht dem eindeutig im Weg.

Dieses kleine Beispiel soll zeigen, dass wir trotz aller verführerischer neuer Trends nicht auf das Wesentlichste vergessen dürfen: die einfache Bedienbarkeit (Usability), die Zugänglichkeit für alle (Accessibility) und – zum Teil daraus resultierend – das positive Erlebnis des Benutzers (User Experience), dass ihn dazu bringt, die Website als angenehm wahrzunehmen und daher gerne zu besuchen.

The post Was war/bleibt/kommt. Eine Analyse. first appeared on Zensations.