Kategorien
Design Illustrator Photoshop Webdesign

Variable Schriften: Einsatzbereit in Adobe und Chrome

Die Idee variabler Schriften gibt es schon länger. Statt mehrerer verschiedener Schriftschnitte sollten Strichstärke und Schriftweite einer Schrift zukünftig variabel in einer einzelnen Schriftdatei vereint werden. Mit der neuen Creative Cloud von Adobe und dem neuen Chrome von Google lassen sich variable Schriften nun auch in der Praxis anwenden.

Eine Schrift, aber beliebige Strichstärken und Schriftweiten

Bislang mussten unterschiedliche Strichstärken und Weiten einer Schrift in einzelne Schnitte aufgeteilt werden. Bei gut ausgebauten Schriften findet man Schnitte, deren Strichstärke von „thin“ bis „heavy“ geht. Dazu kommen Schnitte mit unterschiedlichen Schriftweiten wie „condensed“, „compressed“ oder „wide“. In Kombination entstehen nicht selten dutzende einzelne Schnitte pro Schrift – vor allem wenn man die kursiven Schnitte in verschiedenen Variationen auch noch dazu rechnet.

Bei den neuen variablen Schriften sind alle diese einzelnen Merkmale in einem einzelnen Schnitt vereint. Besser noch: Die Strichstärke und die Schriftweite können stufenlos angepasst werden. Bislang war man auf festgelegte Werte angewiesen. Mit variablen Schriften ist man wesentlich flexibler unterwegs und kann die Strichstärke passgenau für verschiedene Schriftgrößen anpassen.

Formal handelt es sich bei den neuen variablen Schriften um OpenType-Schriften der Version 1.8. Bei dem Format werden Eigenschaften für das Aussehen einer Schrift definiert – einschließlich der möglichen Strichstärken und Schriftweiten. Die jeweilige Darstellung der Schrift mit bestimmten Werten wird über die Anwendung – zum Beispiel Adobes Illustrator oder Googles Chrome – interpoliert.

Creative Cloud 2017 unterstützt variable Schriften

Dass es bislang kaum variable Schriften gibt, liegt natürlich auch daran, dass man sie bislang einfach nicht einsetzen konnte. Mit der neuen Version der Creative Cloud hingegen lassen sich die neuen Schriften endlich auch anwenden.

So unterstützen jetzt zum Beispiel Illustrator und Photoshop variable Schriften. Hat man eine solche Schrift ausgewählt, gibt es im „Zeichen“-Fenster ein zusätzliches Icon, welches ein Fenster mit drei Schieberegler öffnet. Dort kannst du dann die Stärke, Breite und Neigung der Schrift definieren.

Variable Schriften in Adobe Illustrator

Darüber hinaus besteht auch weiterhin die Möglichkeit, vordefinierte Schnitte wie “Bold Condensed Italic” auszuwählen, ohne die Einstellungen selbst vorzunehmen.

Natürlich liefert Adobe auch gleich erste variable Schriften mit. So sind die „Myriad“, „Minion“, „Acumin“, und „Source“ fortan als variable Schriften in der Creative Cloud enthalten.

Auch Chrome 62 unterstützt variable Schriften

Fast zeitgleich mit Adobe hat auch Google eine neue Version seines Browsers Chrome herausgebracht, der variable Schriften unterstützt. Denn variable Schriften lassen sich auch als Webfonts bereitstellen und in gewohnter Weise in ein Stylesheet einbinden.

So kannst du dir in Chrome 62 mit den bekannten CSS-Eigenschaften „font-weight“, „font-stretch“ und „font-style“ deinen eigenen Schnitt zusammenstellen, ohne per „@font-face“ mehrere Schriftdateien einbinden zu müssen.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-weight: 700;
  font-stretch: 75;
}

Im Beispiel wird für ein „<h1>“-Element die Strichstärke auf 700 und die Schriftweite auf 75 gesetzt.

Die genannten CSS-Eigenschaften unterstützen allerdings nur gängige Werte. So kennt „font-weight“ neben den Schlüsselwörtern „normal“ und „bold“ auch Zahlen wie „100“ und “900”. Die Bandbreite der Möglichkeiten ist mitunter jedoch größer als die Werte, welche die Eigenschaften „font-weight“, „font-stretch“ und „font-style“ kennen.

Mit der der CSS-Eigenschaft „font-variation-settings“ hast du jedoch Zugriff auf alle Eigenschaften einer OpenType-Schrift. Je nach Schrift stehen dir also zusätzliche Werte zur Verfügung, welche die normalen „font-*“-Eigenschaften nicht unterstützen.

So definierst du zum Beispiel per „wght“ die Strichstärke und per „wdth“ die Schriftweite einer Schrift.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-variation-settings: “wght” 700, “wdth” 75;
}

Das zweite Beispiel enthält die identischen Werte für die Stärke und Weite, allerdings über die „font-variation-settings“-Eigenschaft definiert.

Die Eigenschaft „font-variation-settings“ hat im Übrigen noch den Vorteil, dass sie animierbar ist. Zusammen mit der CSS-Eigenschaft „transition“ oder „animation“ lassen sich auf diese Weise auch schöne bewegliche Texteffekte realisieren.

Zur Hervorhebung eines Textes kann dann zum Beispiel die Strichstärke oder die Schriftweite per Animation verändert werden.

Wie variable Schriften im Einsatz aussehen, kannst du dir auf der Seite Axispraxis anschauen. Du wählst zwischen verschiedenen variablen Schriften aus und hast dann die Möglichkeit, anhand von Schiebereglern die Strichstärke und Schriftweite anzupassen.

Variable Schriften auf Axispraxis

Per JavaScript werden dabei die entsprechenden CSS-Eigenschaften dynamisch verändert.

Ein weiterer Vorteil variabler Schriften – vor allem im Webdesign – ist die geringere Dateigröße. Statt mehrere Schriftdateien ist fortan nur noch eine Datei nötig, in welcher die Schriftinformationen wesentlich kompakter untergebracht sind.

Weitere Browserunterstützung und Einsatzmöglichkeiten

Neben dem Chrome unterstützt auch Apples Safari bereits variable Schriften. Das ist insofern nicht verwunderlich, weil das neue Schriftformat von Adobe, Microsoft und Apple entwickelt wurde. Aber auch andere Browser werden in naher Zukunft nachziehen.

Neben Schriften lassen sich mit dem neuen Format im Übrigen auch Iconfonts realisieren, bei denen sich dann zum Beispiel die Strichstärke der Icons dynamisch anpassen lässt.

Das neue Format der variablen Schriften wird für Grafik- und Webdesigner also eine große Bereicherung sein.

Kategorien
Design HTML/CSS Responsive Design Webdesign

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays

Als Apple vor einigen Jahren anfing, seine iPhones, iPads und MacBooks mit hochauflösenden Displays – den sogenannten Retina-Displays – auszustatten, hat das zu einer deutlichen Verbesserung der Darstellungsqualität geführt. Einzelne Pixel sind auf diesen Displays nicht mehr als solche zu erkennen. Mittlerweile sind hochauflösende Displays längst keine Besonderheit mehr. Vor allem aktuelle Mobilgeräte sind schon in der Mittelklasse hochauflösend. Während viele Apps für Mobilgeräte schon länger auf die hohe Auflösung ausgerichtet sind, lassen sich mittlerweile auch per HTML5, CSS3 und JavaScript hochauflösende Websites realisieren – ohne zusätzliche JavaScript-Bibliotheken.

Doppelt so scharf dank doppelter Pixeldichte

Als Standardbreite für Mobilgeräte haben sich – historisch bedingt – 320 Pixel etabliert. Viele mobile Websites sind auf diese Breite ausgerichtet. Hochauflösende Displays haben doppelt so viele oder noch mehr Pixel. Damit eine Website auf diesen Displays nicht halb so groß erscheint, wird die Seite quasi hochskaliert. Bei Schriften und Vektorgrafiken ist das kein Problen. Bitmap-basierte Formate wie JPEG- und PNG-Dateien sehen hingegen unscharf und pixelig aus.

Da solche Displays immer häufiger werden, wird es natürlich für Webdesigner und -entwickler zunehmend wichtiger, Webprojekte in hochauflösender Qualität bereitzustellen.

HTML5 und die „srcset“-Eigenschaft

Lange wurde darum gerungen, wie man in HTML5 Bilder für hochauflösende Displays bereitstellen kann. Mittlerweile herrscht Gewissheit und das „srcset“-Attribut hat sich etabliert. Über das Attribut können mehrere Dateiquellen für verschiedene Pixeldichten angegeben werden. Die Pixeldichte wird per Leerzeichen getrennt hinter den Dateiverweis notiert – zum Beispiel „2x“ für die doppelte Pixeldichte.

<img srcset="bild.jpg, bild@2x.jpg 2x" src="bild.jpg" width="320" height="160" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Im Beispiel werden per „srcset“ zwei Dateien angegeben. Die erste Datei wird bei Displays mit einfacher Pixeldichte geladen. Der Wert „1x“ kann bei einfachen Pixeldichten weggelassen werden. Es folgt eine Datei für Displays mit doppelter Pixeldichte. Als Fallback für ältere Browser sollte man immer auch das bekannte „src“-Attribut angegeben. Dort sollte dann das „normale“ Bild referenziert werden.


HTML5 & CSS3: mache deine Website fit für hochauflösende Displays
Vergleich zwischen Bild mit doppelter Pixeldichte (oben) und einfacher Pixeldichte (unten) auf einem hochauflösenden Display

Statt die Pixeldichte anzugeben, gibt es auch die Möglichkeit, die physische Breite oder Höhe eines Bildes an die jeweiligen Dateiquellen innerhalb des „srcset“-Attributes anzuhängen.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" src="bild-640w.jpg" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Entscheidet man sich für diese Variante, wird das Bild immer auf die gesamte  Browser- beziehungsweise Fensterbreite skaliert – vorausgesetzt, es werden keine „height“- und „width“-Attribute gesetzt.Der Browser wählt dann jeweils die Datei aus, die für die Darstellung benötigt wird. Wird das Bild im Beispiel in einer Breite von bis zu 320 Pixel dargestellt, wird die Datei „bild-320w.jpg“ genommen. Bei Auflösungen darüber wird die Datei „bild-640w.jpg“ verwendet.

Über das „sizes“-Attribut hat man nun noch die Möglichkeit, die darzustellende Breite des Bildes zu beeinflussen. Dazu werden Media-Angaben in Kombination mit der gewünschten Darstellungsbreite des Bildes angegeben.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" sizes="(min-width: 320px) 50vw, (max-width: 320px) 100vw" src="bild-640w.jpg" alt="" />

Im Beispiel wird das Bild bei einer Viewport-Breite von mindestens 320 Pixel („min-width: 320px“) so skaliert, dass es 50 Prozent der Breite des Viewports („50vw“) einnimmt. Bei einer Viewport-Breite von weniger als 320 Pixel nimmt das Bild den gesamten Viewport in der Breite ein („100vw“).

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays
Unterschiedliche Darstellungsbreite: Im Portrait-Modus 100 Prozent und im Landscape-Modus 50 Prozent des Viewports

Innerhalb einer „srcset“-Dateireferenz kann immer nur die Pixeldichte (zum Beispiel „2x“) oder Breite und Höhe (zum Beispiel „320w 160h“) angegeben werden. Eine Kombination von Pixeldichte und Breite beziehungsweise Höhe ist nicht möglich.

Das „srcset“-Attribut funktioniert auch in Kombination mit dem neuen „<picture>“- und dem dazugehörigen „<source>“-Element. Über das „<picture>“-Element hat man die Möglichkeit, Bilder für verschiedene Display- beziehungsweise Fenstergrößen festzulegen. Auch hier können dann Quellen für unterschiedliche Pixeldichten hinterlegt werden.

<picture>
  <source srcset="bild-640w.jpg, bild-640w@2x.jpg 2x" media="(min-width: 320px)" />
  <source srcset="bild-320w.jpg, bild-320w@2x.jpg 2x" media="(max-width: 320px)" />
  <img src="bild-640w.jpg" width="320" height="160" alt="" />
</picture>

Im Beispiel werden über die beiden „<source>“-Elemente insgesamt vier Dateiquellen referenziert. Display- beziehungsweise Fensterbreiten bis 320 Pixel stellen die Dateien „bild-320w.jpg“ und „bild-320w@2x.jpg“ (je nach Pixeldichte) dar. Bei größeren Breiten werden die Dateien „bild-640w.jpg“ und „bild-640w@2x.jpg“ aufgerufen. Berücksichtigen muss man, dass das „<source>“-Element keine „width“- und „height“-Attribute kennt. Will man die Größenangaben festlegen, muss man dies per CSS machen.

Auch hierbei sollte man wieder ein „<img>“-Fallback bereitstellen, um ältere Browser nicht außen vor zu lassen.

Das „srcset“- und „sizes“-Attribut sowie das „<picture>“-Element werden von Chrome und Firefox jeweils ab Version 38 unterstützt. Der Internet Explorer unterstützt die Attribute und das Element derzeit noch nicht. Android-Chrome ist ab Version 40, iOS-Safari ab Version 8.1 dabei. Letzterer unterstützt „sizes“ aber nur eingeschränkt.

Wer das „srcset“-Attribut auch für Browser verwenden möchten, die es noch nicht unterstützen, kann sich mit einem Polyfill behelfen, welches die Funktionalität für ältere Browser nachbildet.

CSS3 und „image-set()“

Auch per CSS3 gibt es mittlerweile eine Möglichkeit, unterschiedliche Bildquellen für verschiedene Pixeldichten anzugeben. Hierfür steht die „image-set()“-Notation zur Verfügung. In dieser lassen sich ähnlich wie beim HTML5-Attribut „srcset“ mehrere Dateien per „url()“ referenzieren. Die Notation „image-set()“ kann überall dort eingesetzt werden, wo eine Bildquelle per „url()“ angegeben wird.

body {
  background-image: url("hg.jpg");
  background-image: image-set(
    url("hg.jpg") 1x,
    url("hg@2x.jpg") 2x
  );
}

Im Beispiel wird per „image-set()“ eine Hintergrundgrafik für zwei Pixeldichten definiert. Derzeit sollte man die Notation mit entsprechenden Vendor-Präfixen auszeichnen – zum Beispiel „-webkit-image-set()“. Außerdem ist es auch hier ratsam, für ein Fallback zu sorgen. Wichtig ist, dass das Fallback wie im Beispiel vor der „image-set()“-Variante notiert wird. Browser, die „image-set()“ nicht kennen, werden die zweite „background-image“-Eigenschaft ignorieren. Alle anderen Browser werden die zweite Eigenschaft ausführen und somit die erste damit überschreiben.

html5-css3-pixeldichte-hg
Hochauflösender Hintergrund (oben) und normal aufgelöster Hintergrund (unten)

Die „image-set()“-Notation wird derzeit vom Chrome ab Version 31 unterstützt. Firefox und Internet Explorer unterstützen sie nicht. Außerdem kennen der iOS-Safari ab Version 7.1 und der Android-Chrome ab Version 40 diese Notation.

Neben der „image-set()“-Notation, welche unterschiedliche Pixeldichte nur bei Bildern berücksichtigt, gibt es auch noch die Media-Query-Angaben „min-resolution“ und „max-resolution“. Hier können beliebige CSS-Eigenschaften für verschiedene Pixeldichten berücksichtigt werden.

@media screen and (min-resolution: 2dppx) {
  body {
    background: url("hg@2x.jpg");
  }
}

Im Beispiel wird per „min-resolution“ eine Hintergrundgrafik für Displays mit doppelter Pixeldichte definiert. Die Einheit „dppx“ steht für „dot per pixel“ und somit für die Pixeldichte. Es stehen aber auch andere Einheiten zur Verfügung. So kann man beispielsweise „dpi“ für „dots per inch“ verwenden. Damit ist es beispielsweise möglich, Bilder in Druckauflösung bereitzustellen. Als letzte Einheit gibt es noch „dpcm“, was für „dots per centimeter“ steht. Für die Darstellung auf Monitoren sollte man die Einheit „dppx“ verwenden.

Das „resolution“-Feature wird von Chrome ab Version 31 und Firefox ab Version 35 unterstützt. Der Internet Explorer unterstützt das Feature ab Version 9, aber nur mit der Einheit „dpi“. Android-Chrome kennt das Feature seit Version 40 und iOS-Safari ab Version 7.1 – allerdings nur in der veralteten Schreibweise „min-device-pixel-ratio“ beziehungsweise „max-device-pixel-ratio“.

Alternative: Bitmaps grundsätzlich in hoher Auflösung bereitstellen

Die neuen HTML5-Elemente und -Attribute ermöglichen es zwar, Bilder für verschiedene Auflösungen und Pixeldichten bereitzustellen. Allerdings müssen meist mehrere unterschiedliche Dateien für ein Bild generiert werden. Content-Management-Systeme wie TYPO3 automatisieren dies zwar. Aber bei handgemachten Webprojekten, die ohne serverseitige Programmiersprache auskommen müssen, steht man vor der Aufgabe, all diese Dateivarianten manuell zu generieren.

Wer diesen Aufwand scheut, aber dennoch auch hohe Pixeldichten berücksichtigen möchte, kann einen Zwischenweg gehen, bei dem man mit jeweils einer Datei für alle Pixeldichten auskommt. Dazu wird die Bilddatei direkt in doppelter Auflösung erstellt – am Besten in reduzierter Qualität –, dann aber mit halber Auflösung in ein HTML-Dokument eingebunden. Ein Bild mit 640 mal 320 Pixel Größe würde dann also in dieser Weise verwendet.

<img src="bild-640w.jpg" width="320" height="160" alt="" />

Während hochauflösende Displays die volle physische Auflösung darstellen, wird auf „normalen“ Displays das Bild auf die Hälfte der Größe herunter skaliert. Bei normaler Pixeldichte wird die schlechte Qualität durch die verkleinerte Darstellung wett gemacht. Bei doppelter Pixeldichte hat man immer noch eine bessere Qualität als bei der Verwendung eines Bildes in normaler Auflösung.

Der Nachteil dieser Herangehensweise ist natürlich, dass bei Displays mit einfacher Pixeldichte eine unnötig große Datei heruntergeladen wird. Daher bietet es sich an, diese Möglichkeit nur mit etwas stärker komprimierten JPEG-Dateien einzusetzen.

html5-css3-pixeldichte-kompression
Stark komprimierte JPEG-Datei in halber Auflösung (oben)

Auch per CSS können Bilder in doppelter Auflösung eingebunden werden. Mit der Eigenschaft „background-size“ hat man hierbei die Möglichkeit, das Bild auf die Hälfte der Auflösung herunter zu skalieren.

body {
  background-image: url("hg.jpg");
  background-size: 32px 16px;

Hat das Hintergrundbild im Beispiel eine Auflösung von 64 mal 32 Pixel, wird es um 50 Prozent verkleinert dargestellt. Man erreicht somit denselben Effekt wie beim HTML-Beispiel.

SVG-Grafiken und Iconfonts verwenden

Alle aktuellen Browser unterstützen mittlerweile das vektorbasierte SVG-Format. Vor allem Logos und viele andere grafischen Elemente sind ja meist als Vektorgrafiken vorhanden und wurden bislang als GIF- oder PNG-Datei in eine Website eingebunden. Dank des SVG-Formates können diese auch direkt als Vektorgrafik in einer Website dargestellt werden – sei es per HTML über das „<img>“-Element oder per CSS über „url()“.

Der Vorteil des SVG-Formates liegt auf der Hand: Da es vektorbasiert ist, wird es stets in bester Auflösung dargestellt. Zudem schont es die Bandbreite und spart Arbeit, da es nicht für die verschiedenen Auflösungen und Pixeldichten bereitgestellt werden muss.

Alternativ zu SVG-Grafiken sind Iconfonts bestens für hochauflösende Displays geeignet. Schließlich sind ebenso Schriften vektorbasiert und werden daher immer in optimaler Auflösung dargestellt.

Wer bei SVG-Grafiken auf Nummer sicher gehen und ältere Browser ohne SVG-Unterstützung berücksichtigen will, kann mit einigen Kniffen hierfür Fallback-Lösungen einbauen.

Pixeldichte mit JavaScript feststellen

Gelegentlich werden Bilder per JavaScript geladen – zum Beispiel bei Galerien. Statt ein „<img>“-Element mit allen „srcset“-Referenzen per JavaScript zu generieren, kann auch direkt die richtige Bildquelle in der für das Gerät zutreffenden Pixeldichte geladen werden.

Denn JavaScript kennt die Eigenschaft „devicePixelRatio“, mit der die Pixeldichte abgefragt werden kann.

if (window.devicePixelRatio > 1) {
  document.getElementsByTagName("img")[0].src = "bild@2x.jpg";
}

Im Beispiel wird eine Bilddatei geladen, wenn die Pixeldichte größer 1 ist. Logischerweise kann die Eigenschaft nur ausgelesen werden.

Eine Sache sollte man bei der Verwendung von „devicePixelRatio“ beachten. Denn der durch diese Eigenschaft ermittelte Wert ist immer abhängig vom jeweiligen Zoomfaktor des Browsers. Wird ein Dokument per Browserzoom in einer Größe von 150 Prozent dargestellt, liefert „devicePixelRatio“ einen Wert von „1.5“ – bei einfacher Pixeldichte. Bei doppelter Pixeldichte würde bei diesem Zoomfaktor der Wert „3“ zurückgegeben werden.

Fazit und Links zum Beitrag

Webprojekte für hochauflösende Displays fit zu machen, kann eine recht umfangreiche Aufgabe sein. Allerdings sollte man – gerade bei neuen Projekten – hohe Pixeldichten immer berücksichtigen. Alle vorgestellten Lösungen können relativ einfach mit Fallbacks ausgestattet werden, sodass man nie Gefahr läuft, ältere Browser außen vor zu lassen.

(Der Artikel erschien erstmalig am 16. März 2015 und wurde von dem Autor vor seiner erneuten Veröffentlichung auf seine Aktualität hin geprüft.)
(dpe, DO)

Kategorien
Design Webdesign

Colorfonts: Die Zukunft der Typografie ist bunt

Colorfonts beleben die Welt der Typografie. Mehrfarbige Schriften schicken sich an, Grafik- und Webdesign zu erobern.

Kategorien
Webdesign

Sonar: Kostenloses Tool von Microsoft hilft dir Fehler auf deiner Website aufzuspüren

In der Vergangenheit legte Microsoft nicht viel Wert auf Webstandards. Aber spätestens mit dem neuen Browser Edge ist man auch bei Microsoft interessiert daran, sich an HTML- und CSS-Standards zu halten. Mit Sonar gibt es nun sogar ein Tool, welches Websites auf die Einhaltung solcher Standards überprüft. Darüber hinaus weist Sonar auf Optimierungsmöglichkeiten und auf Sicherheitsmängel hin.

Sonar: Website angeben und auf Ergebnisse warten

Um deine Website mit dem Tool zu prüfen, gibst du ganz einfach die URL deiner Website an und wartest auf die Ergebnisse. Es kann ein paar Minuten dauern, bis Sonar deine Website geprüft hat. Über einen Permalink rufst du die Ergebnisse anschließend einfach ab.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Übersicht der Ergebnisse

Sonar prüft deine Website in fünf verschiedenen Kategorien. Als erstes ist die Barrierefreiheit an der Reihe. Dabei richtet sich Sonar an die WCAG-Richtlinie des W3C, die vorgibt, wie eine Website ausgezeichnet sein muss, damit sie als barrierefrei gilt. Dazu gehört zum Beispiel, dass Nicht-Text-Inhalte wie Bilder mit alternativen Informationen für Sehbehinderte ausgezeichnet werden.

Die zweite Kategorie beschäftigt sich mit Interoperabilität und prüft zum Beispiel, ob eine Website mit validem HTML ausgezeichnet wurde und ob alle wichtigen Angaben im HTML-Kopf gemacht wurden. Dazu zählen unter anderem Angaben zum Zeichensatz und zum Viewport.

Speziell für den Internet Explorer prüft Sonar, ob Fehlerseiten eine Mindestgröße von 256 Bytes haben, da der alte Microsoft-Browser ansonsten eigene Fehlerseiten ausgibt.

Sonar macht Optimierungsvorschläge für schnellere Websites

In der Kategorie Performance bekommst Vorschläge gemacht, wie deine Website schneller und performanter werden kann. So findet Sonar unter anderem heraus, ob du in Sachen Bildkomprimierung bereits alles gegeben hat. Sonar verrät dir sogar, wie viele Kilobytes du bei entsprechend guter Komprimierung einsparen kannst.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Performance-Vorschläge

Wer Accelerated Mobile Pages (AMP) nutzt, um Inhalte einer Website speziell für Mobilgeräte auszugeben, wird per Sonar auch über Fehler bezüglich der AMP-Auszeichnung informiert.

Das Besondere an AMP ist, dass solch ausgezeichnete Inhalte schneller geladen werden können, da sie auf speziellen Servern zwischengespeichert sind. Dieses Zwischenspeichern funktioniert jedoch nur, wenn die Auszeichnung valide ist. Neben Google unterstützt im Übrigen auch Microsofts Suchmaschine Bing AMP.

Unterstützung von Progressive Web Applications (PWA)

Noch eine weitere recht neue Technologie wird unterstützt: nämlich Progressive Web Applications. Darunter versteht man Webanwendungen, die fast wie native Apps auf Smartphones und Tablets laufen.

Sonar prüft hierbei, ob das notwendige Manifest für PWAs vorhanden ist und ob entsprechende Icons zur Darstellung auf dem Startbildschirm existieren. Außerdem prüft Sonar, ob ein App-Name im Manifest angegeben ist. All diese Angaben sind notwendig, damit eine Website als Progressive Web Application auf einem Mobilgerät ausgeführt werden kann.

Sonar hilft Sicherheitsmängel festzustellen

Zu guter Letzt wird geprüft, ob eine Website Sicherheitsmängel aufweist, die zum Beispiel Angriffe auf eine Website begünstigen können. So prüft Sonar zum Beispiel, ob bestimmte verzichtbare und potenziell unsichere Header verschickt werden.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Sicherheitsvorschläge

So kann es beispielsweise vorkommen, dass Servertechnologien wie PHP und ASP.NET Informationen über die verwendete Technologie und Version über einen Header ausgeben. Für einen Hacker sind solche Informationen interessant, da es einfacher ist, vorhandene Sicherheitslücken in der Technologie auszunutzen.

Ebenfalls geprüft wird, ob bei Verweisen protokoll-relative Links verwendet werden. So sollten Links grundsätzlich immer mit „http://“ oder „https://“ beginnen. Seitdem verschlüsselte Websites immer mehr Beachtung finden, beginnen – zum Beispiel beim Einbinden von JavaScript von Fremdanbietern wie Google – Links einfach mit „//“, was dazu führt, dass immer das Protokoll der einbindenden Website verwendet wird.

Auch in Sachen Cookies informiert Sonar dich, ob diese so gesetzt sind, dass keine Gefahr ausgeht. Im Idealfall werden Cookies nur von sicheren Verbindungen akzeptiert und können nur per HTTP (also nicht per JavaScript) ausgelesen werden.

sonar liefert zusätzliche Informationen zu Fehlern und Warnungen

Neben der Übersicht, die über die Anzahl der Fehler und Warnungen jeder Kategorie informiert, erhältst du eine Liste mit allen gefundenen Fehlern beziehungsweise Warnungen. Dort ist kurz und knapp erklärt, was du verbessern beziehungsweise in Ordnung bringen solltest.

Außerdem gibt es zu jedem Punkt einen Link zur Sonar-Dokumentation, in der du eine ausführliche Beschreibung erhältst, was geprüft wurde, wie es geprüft wurde und warum es wichtig und sinnvoll ist, den entsprechenden Fehler oder die Warnung aus der Welt zu schaffen.

Sonar selbst installieren

Microsoft hat Sonar unter Open-Source-Lizenz gestellt und bietet den Quelltext zum Herunterladen an. So kannst du dir das Tool selbst auf einem Server installieren. Voraussetzung ist, dass dort Node.js läuft.

Nach der Einrichtung von Sonar kannst du deine Webprojekte bequem über die Kommandozeile starten. So lässt sich das Tool nach deinen Wünschen konfigurieren.

So legst du Beispielsweise fest, welche Regeln geprüft werden sollen und welche für dich verzichtbar sind.

Kategorien
Design Design-News Webdesign

Die hässlichsten Schriftarten werden im Osten der USA genutzt

Ich sage nur: Comic Sans. Wer mit diesem Font positive Erinnerungen verbindet, möge mir bitte eine E-Mail schreiben. Du kannst dir denken, ich rechne nicht mit viel Post aus diesem Anlass.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Sonstige Programme Webdesign

Adobe Photoshop Elements 2018: Der Alltagshelfer für Fotoaufgaben wird immer besser

Adobe Photoshop Elements 2018 ist da und kommt mit einigen guten Argumenten für den spontanen Kauf. Wir sagen dir, welche das sind.

Kategorien
E-Commerce UI/UX Webdesign

In 6 Schritten zur optimalen Onlineshop-Usability

Über 1000 Usabilityprojekte haben mich gelehrt, dass die Onlineshop-Usability ein entscheidender Faktor für eine hohe Conversion ist. Doch welche Fragen sollten sich E-Commerce-Betreiber stellen, um die Kaufbereitschaft zu steigern und Kunden langfristig zu binden? Und woher wissen sie, was Usability konkret auf ihrer eigenen Seite bedeutet?

E-Commerce-Plattformen stehen heute in harter Konkurrenz mit den bekannten Platzhirschen. Während ein Markt-Primus wie Amazon mit einer Conversion Rate von mindestens 13 % glänzt (bei Prime-Mitgliedschaften sollen es sogar 74 % sein), hängt der Durchschnitt der Betreiber mit 0,9 bis 2,5 Prozent weit hinterher. Eigentlich sollten alle Shopbetreiber ihre Plattformen mittlerweile perfekt im Griff haben. Das dem offensichtlich nicht so ist, liegt an zwei Problemen:

  1. Onlineshop-Usability wird selten als komplexer Prozess über den gesamten Sales Funnel betrachtet.
  2. Die Usability wird noch seltener detailliert getestet.

Dabei kann die Berücksichtigung von Kaufprozess und gezieltem Testing die Zunge an der Waage sein, wie ich bei unseren Projekten immer wieder erlebe. Eine gute Onlineshop-Usability spielt eben nicht nur auf einen möglichst schnellen Kaufabschluss direkt ab Startseite ein. Vielmehr geht es neben Conversion Rate auch um die Absprungrate innerhalb des Kaufprozesses, die Wiederkaufrate sowie die grundlegende Kundenzufriedenheit. Insbesondere die Wiederkaufrate wird häufig vernachlässigt. Dabei konvertieren Bestandskunden im Schnitt 5 bis 9 Mal besser als Erstkunden.

An welchen Stellen sollten eCommerce-Betreiber also ihre Usability berücksichtigen und testen?

 

Onlineshop-Usability in den sechs Phasen des Kaufes

Der potentielle Käufer durchläuft sechs Phasen:

  1. Suche nach dem richtigen Anbieter im Internet
  2. Erster Eindruck
  3. Produktsuche
  4. Entscheidung für ein Produkt
  5. Checkout
  6. Wiederkauf

 

RapidUsertests-DrWeb-Onlineshop-Usability-eCommerce_Customer-Journey
Testen lassen sich Webdesigns bereits in der Entwurfphase, bevor viel Geld ausgegeben wird (Quelle: RapidUsertests)

 

In jeder dieser Phasen durchläuft der Käufer verschiedene Emotionen. Online-Marketing-Pionier Bryan Eysenberg spricht dabei von einem “Inneren Dialog”, den Besucher einer Webseite führen.

Ziel einer optimalen Onlineshop-Usability ist, diese inneren Anforderungen der Käufer in den einzelnen Phasen des Sales Funnels zu befriedigen. Wie genau solch ein innerer Dialog von potentiellen Käufern klingt, können Shopbetreiber z.B. sehr genau über Crowdtesting herausbekommen. Das Portal RapidUsertests bietet hierfür umfangreiche Usability-Tests. Echte potentielle Käufer erhalten dort mehrere Aufgaben für einen Onlineshop, die sie an ihrem eigenen Gerät durchführen und kontinuierlich kommentieren sollen. Das Verhalten des Käufers wird als sogenanntes Think-aloud-Video mitgeschnitten. Onlineshop-Betreiber erhalten somit einen Screencast der Customer Journey sowie die laut gedachten Gedanken und Emotionen des Kunden. Diese Methode ermöglicht für alle sechs Phasen eine sehr detaillierte und echte Abbildung der Anforderungen potentieller Shopbesucher. Die hier gelisteten Tipps skizzieren die wichtigsten Erkenntnisse aus über 1000 Crowdtesting-Projekten auf RapidUsertests.

1. Suche nach dem richtigen Onlineshop

In dieser ersten Phase zählt vor allem Relevanz und Sichtbarkeit. Hier geht es also nicht um klassische Usability-Themen wie Grafik, Elemente und Seitenstruktur. Vielmehr haben SEO- und SEA-Aspekte Gewicht.

Als Onlineshop-Betreiber sollte man sich hier die folgenden Fragen beantworten:
Mit welchen Keywords wird eigentlich nach dem Produkt gesucht?
Auf welche Suchergebnisse und Google-Anzeigen wird geklickt?
Welchen Weg nimmt der Nutzer eigentlich bis er auf meiner Shopseite landet?

Onlineshop-Usability beginnt somit weit vor der eigenen Webseite – als passgenaue Zielgruppenansprache bei ihrer Suche nach dem besten Shop.

Neben der Analyse der Keywords, Trends und Wettbewerber sollten eCommerce-Betreiber deshalb das Suchverhalten ihrer Zielgruppe kontinuierlich testen. Als Crowdtest funktioniert dies z. B. folgendermaßen: Ihre Tester sollen über die Einstiegsseite von Google nach Produkten suchen, die Sie in Ihrem Shop anbieten. Diese Suche können die Tester anhand festgelegter Kategorien, Produktnamen oder aber in freier Suche durchführen.

2. Erster Eindruck und Orientierung

Wie im wahren Leben zählt der erste Eindruck beim Kunden. Auf der Start- oder Landingpage müssen Besucher vor allem zwei Dinge empfinden, um dabei zu bleiben: Orientierung und Vertrauen.

Innerhalb weniger Sekunden stellen sich die potentiellen Käufer folgende Fragen:
Ist diese Webseite vertrauenswürdig?
Passt das Angebot des Shops zu dem, was ich suche?
Ist sofort erkennbar, wie ich ins Sortiment gelange?
Ist der Shop übersichtlich und ansprechend gestaltet?

Fallen die Antworten negativ aus, ist eine hohe Absprungrate garantiert. Wer seine Besucher halten möchte, sollte sich mindestens an folgende Grundregeln halten, die sich immer wieder in unseren Usability-Tests bestätigen:

  • Übersichtliches, klares Menü mit wenigen Unterpunkten, denn der Besucher möchte sich schnell zurechtfinden und zur eigentlichen Suche übergehen.
  • Keine redundante Navigation (z. B. im Header und an der Seite), denn der Besucher erwartet eine klare Führung.
  • Ausreichend Informationen auf Landingpages, denn der Besucher erwartet eine eindeutige Antwort auf seine Frage. Zudem sollten sich bereits hier die relevanten Informationen der Startseite (vertrauensbildende Elemente, Bewertungen, Zahlmethoden etc.) finden.
  • Übersichtliche Anzahl an Angeboten, denn der Besucher ist aus einem bestimmten Grund hier und sollte nicht gleich abgelenkt werden.

3. Produktsuche

Bewerten die Besucher die Startseite als vertrauenswürdig, beginnt die konkrete Suche. Kommen sie von einer Landingpage, gehen sie direkt zur Produktseite.

Auch in dieser Phase bleibt das Gefühl einer guten Orientierung entscheidender Faktor. Sie wird jedoch durch den Wunsch nach Stimulanz ergänzt, welche durch relevante Produkte zufriedengestellt werden muss.

Die Fragen die sich Käufer dabei stellen, sind:
Sprechen mich die Kategorien an? Ergeben Sie für meine Suche Sinn?
Erhalte ich schnell für mich relevante Suchergebnisse?
Kann ich meine Suche einfach und gezielt nach meinen persönlichen Bedürfnissen einschränken?

Onlineshop-Betreiber stehen hier vor der Herausforderung, beide Wege der Suche perfekt zu gestalten. Besucher müssen sowohl über die Direktsuche, also auch über die Kategoriensuche sicher an ihr Ziel geführt werden. Ausschlaggebend sind zwei Features: eine intelligente Suchmaske sowie die Filter. In den von uns begleiteten Usability-Crowdtests zeigen sich bei Onlineshops noch immer regelmäßig Defizite. In der Regel sind nur die Hälfte der Tester mit der Funktionalität zufrieden.

 

RapidUsertests-Amazon-Autosuggest-Onlineshop-Usability
Ein Autosuggest berücksichtigt die typischsten Tippfehler und kann zugleich weitere Kaufideen vermitteln (Quelle: amazon.de)

 

Die wichtigsten Take-Aways unserer Tests sind:

  • Die Suchfunktion sollte sowohl die Hauptkategorien als auch relevante Tags und Synonyme berücksichtigen. Oftmals werden nur Produktnamen oder Artikelbeschreibungen indexiert. So zeigte sich beim Test eines Elektronik-Onlinehändlers, dass bei der Direktsuche nach Hifi-Anlage nur drei Ergebnisse angezeigt wurden, obwohl in der gleichnamigen Kategorie über 200 Hifi-Anlagen gelistet waren.
  • Die Suchfunktion sollte alternative Suchbegriffe beinhalten. Zum einen wissen Käufer oftmals nicht die konkrete Produktbezeichnung und können somit besser geführt werden. Zum anderen versteckt sich hinter den alternativen Suchbegriffen ein hohes Crossselling-Potential. Jedoch sollte diese Funktion mit Maßen zum Einsatz kommen, um den Käufer nicht zu verwirren.
  • Die Suchfunktion sollte die gängigen Tippfehler berücksichtigen.
  • Die Autosuggest-Funktion für Produktsuchen sollte übersichtlich gestaltet werden und semantisch sinnvolle Angebote machen. Hier lohnt sich immer noch ein Blick auf die Branchenprimus der Autosuggestion: Google und Amazon.

Der entscheidende Hebel liegt somit auch bei einer guten Produktdatenbank, die ein optimales Tagging erlaubt.

Ein Hauptbestandteil der Suche sind heutzutage zusätzliche Filter, welche an die Erwartungen der Käufer angepasst sind. Ihre Form ist stark abhängig vom Onlineshop, und eine vollständige Übersicht würde den Rahmen dieses Beitrags bei weitem sprengen. Daher sollen hier nur die wichtigsten Ergebnisse aus unseren Crowdtests skizziert werden:

  • Filter sind kein Spielgerät, sondern sollen die Suche eingrenzend unterstützen.
  • Vermeiden Sie ein Autoreload der Ergebnisliste auf mobilen Seiten.
  • Designen Sie die Filter entsprechend des natürlichen Suchverhaltens.

4. Auswahl des Produkts

Die Auswahl des Produkts erfolgt in zwei Schritten:

  1. Gefilterte Produktübersicht
  2. Produktseite

Bei beiden Schritten ist weiterhin die Stimulanz wichtig, dass es passende Produkte für den Käufer gibt. Hinzu kommt die Emotion der Rückversicherung, bei der sich der Käufer die folgenden Fragen stellt:
Gibt es das Produkt in der für mich richtigen Ausführung?
Ist es verfügbar?
Ist der Preis ok?
Kann ich sicher und bequem bezahlen?

 

RapidUsertests-Cyberport-Produktuebersicht-Onlineshop-Usability
Eine gute Produktübersicht zeigt die wichtigsten Eckdaten sauber sortiert auf einen Blick (Quelle: Cyberport Onlineshop)

 

Die Aspekte können bereits größtenteils auf der Produktübersichtseite befriedigt werden. Neben der erwähnten sinnvollen Sortierung zählen hier:

  • ein aussagekräftiges Produktfoto,
  • Produktname,
  • Kerneigenschaften aus der Filterfunktion,
  • Preis.

Bezahlmöglichkeiten können z. B. durchgehend in der Seitenspalte angegeben werden.

In unseren Tests erhalten wir zudem positive Rückmeldungen, wenn bereits das voraussichtlichen Lieferdatum sowie Bewertungen oder Testergebnisse angezeigt werden. Letzteres kann mittlerweile über semantische Schnittstellen realisiert werden.

Auf der eigentlichen Produktseite möchte der Käufer anschließend überzeugt werden. Dementsprechend sollten Produktseiten sehr sorgfältig konzipiert werden:

  • Mehrere gut aufgelöste Produktfotos aus verschiedenen Perspektiven anbieten. Der Kauf funktioniert häufig vorrangig visuell.
  • Zoomfunktion für die Produktfotos anbieten, z. B. per Mouseover.
  • Bei der Farbauswahl sollte sich auch das Produktfoto entsprechend ändern.
  • Ausführliche, aber übersichtliche Produktbeschreibung einfügen.
  • Bei Farbfiltern auf Barrierefreiheit achten.
  • Bewertungen und Testergebnisse einbinden.
  • Crossselling-Elemente einbinden, jedoch nicht übertreiben.
  • Lieferdatum und Versandkosten anzeigen.
  • Umtauschzeitraum kommunizieren.
  • Nochmals Bezahlmöglichkeiten anzeigen.

 

Userlutions-Clickdummy-MagineTV-Onlineshop-Usability
Testen lassen sich Webdesigns bereits in der Entwurfphase, bevor viel Geld ausgegeben wird (Quelle: RapidUsertests)

 

Für die Gestaltung der Produktseite muss die Zielgruppe bekannt sein, um die richtige Ansprache zu erreichen:
Sind die Käufer detailverliebt und erwarten umfassende Informationen oder nicht?
Sind die Käufer technikaffin?
Zählen Features oder Vorteile?
Welche Form der Präsentation erwarten die Käufer?

Diese Fragen lassen sich nur durch die Zielgruppe selbst beantworten. Auch hier empfehlen sich deshalb bereits in der Konzeptionsphase Crowdtests, z. B. auf Basis von Mockups oder Klick-Dummys. So lassen sich auch die durchschnittlichen Abbruchraten von 50 % in Onlineshops deutlich reduzieren.

Wie sensibel Käufer auf die Produktseite reagieren, zeigte sich uns z. B. in einem Usability-Test-Projekt für Magine TV. Die Online-TV-Plattform klagte über hohe Seitenabbruchraten. Nach der Optimierung steigerte Magine TV seine Conversion um 40 %.

5. Checkout

Selbst beim Checkout brechen noch immer knapp 32 % aller Käufer den Onlinekauf ab. Der Hintergrund ist fast immer fehlende Sicherheit sowie schlechter Komfort. Schließlich geht es beim Checkout um den finalen Schritt der Geldübergabe.

Für Käufer zählen rückversichernde Antworten auf die Fragen:
Kann ich unkompliziert bestellen?
Wirkt der Checkout seriös?
Kann ich Änderungen vornehmen?
Kommt die Lieferung pünktlich an?
Kann ich ohne Probleme (kostenfrei, über längeren Zeitraum) umtauschen?
Sind die Lieferbedingungen und angebotenen Zahlungsmöglichkeiten zufriedenstellend?

All diese Fragen sollten übersichtlich und eindeutig beantwortet werden – auf einen Blick und ohne zusätzliche Klickaktionen.

Unsere Erfahrungswerte zeigen, dass gerade im Checkoutbereich die Interessen der Käufer und der Onlineshop-Betreiber kollidieren. Der Käufer möchte schnell und ohne großen Datentransfer den Kauf abschließen. Die Onlineshop-Betreiber möchten möglichst umfassende Informationen vom Käufer erhalten, den Einkauf verlängern und zugleich den Abbruch mit allen Mitteln verhindern.

Aus über 1000 Crowdtests haben wir den Schluss gezogen, dass Onlineshop-Betreiber unbedingt auf die Käufer hören sollten:

  • Ein Gastzugang sollte möglich sein. Nach dem Kauf kann immer noch auf eine Registrierung hingewiesen werden und klare Vorteile einer Registrierung benannt werden.
  • Der Kunden muss stets in Sicherheit gewiegt werden. Das wird u.a. durch eine aufmerksamkeitsstarke Präsenz von Gütesiegeln wie “Trusted Shop”, sowie der Anzeige der (vertrauenswürdigen und unkomplizierten) Zahlungsmethoden und Versandpartner realisiert werden.
  • Das Crossselling ist verlockend, doch sollten Ablenkungen vermieden werden.
  • Dem Kunden sollte immer die Kontrolle überlassen werden. Er sollte die Bestellung und Adressangaben bearbeiten können. Auch die Tickboxen für Newsletter und AGBs sollten nicht per Default angekreuzt sein.
  • Nur relevante Informationen abfragen, die für die Bestellbestätigung und den Versand notwendig sind.

6. Wiederkauf

Die Anforderungen an die Onlineshop-Usability enden nicht beim Checkout. Nach dem Kauf ist vor dem Kauf. Und wer einmal einen Kunden von sich überzeugt hat, wird ihn mit großer Wahrscheinlichkeit länger binden und kann beim nächsten Besuch mit einer 5 bis 9 Mal höheren Conversionrate rechnen.

In der Phase über die Entscheidung eines Wiederkaufs erfolgt durch den Käufer die Bewertung des Onlineshops. Hierbei werden verschiedene Aspekte hinterfragt:
Ist die Lieferung pünktlich?
Sind Verpackung und Produkt einwandfrei?
Ist der Service freundlich, hilfsbereit und kulant?

Auch diese Aspekte können durch Crowdtests bewertet und optimiert werden. So genannte End-To-End-Tests gehen mit den Testern den vollständigen Bestellprozess durch und erlauben so eine Aussage zur Qualität der Verpackung sowie des Services.

Zusätzlich kommt in der Phase des Wiederkaufs die langfristige Kundenbindung und Kaufmotivation durch Newsletter und Social Media-Angebote zum Tragen. Auch hier sollten die richtige Ansprache berücksichtigt und getestet werden.

Insbesondere der Newsletter wird häufig unterschätzt. Unsere Testergebnisse zeigen jedoch, dass sie grafisch und textlich genauso ernst genommen werden sollten wie eine Webseite:
Ist das Produkt ansprechend inszeniert?
Werden Preise und Angebote im Newsletter transparent kommuniziert?
Ist der Newsletter funktional und übersichtlich gestaltet?
Erhalte ich als Abonnent besondere Angebote (Mehrwert)?

 

Onlineshop-Usability wird nicht ausgedacht, sondern getestet

Um Ideen für die eigene Onlineshop-Usability zu erhalten, kann sich natürlich zu aller erst an den Besten orientiert werden. Onlinehändler wie Cyberport, Devolo und Mister Spex haben für ihre Shops z. B. den renommierten Usablity-Award erhalten und zeigen damit, wie es funktionieren kann. Doch man bei allen Tipps und Tricks und Best Practises sollte nicht vergessen werden, dass es für die Usability eines Onlineshops kein One-fits-all gibt.

Deshalb machen auch die etablierten Onlinehändler mit hervorragender Usability vor allem eins: Sie testen kontinuierlich ihre Performance und Usability mit Crowdtests und passen ihre Plattformen entsprechend an. Das Testen eines Onlineshops beginnt dabei bereits in der Entwurfphase und kann auch Wettbewerbertests, Anzeigentests, Newslettertests sowie Tests von Sonderaktionen und Relaunches beinhalten. Die Möglichkeiten sind hier vielfältig, wie der aktuelle Vergleich der Crowdtestanbieter zeigt. Vor allem erhalten Onlinehändler schnell und direkt aussagekräftige Ergebnisse.

Usability ist weniger IKEA-Bauanleitung. Die beste Usability findet Sie vor allem durch die richtigen Fragen und ein rigoroses Testen der Annahmen. Mit Think-aloud-Videos erhalten Sie einen optimalen Einblick in das Suchverhalten Ihrer Kunden. Und wer als Onlinehändler dem inneren Dialog seiner Kunden lauscht, besitzt die besten Voraussetzungen, seine Conversion- und Wiederkaufraten in die Höhe zu treiben.

 

Kategorien
Boilerplates & andere Tools Programmierung Sonstige Programmiersprachen Webdesign

Hologram: Kostenlose Mac-App für den geschmeidigen WebVR-Einstieg

Freelancer, die ihr Geld mit Kundenprojekten verdienen, haben wenig Zeit für brandneue Technologien. Mit Hologram kannst du einen Blick auf WebVR werfen, ohne dabei ganze Monatseinkommen zu verlieren.

Kategorien
Webdesign

Webdesign Trends 2017

Webdesign findet die perfekte Balance zwischen Funktion, Form und Design. Dabei wird Webdesign durch neue Technologien und Designgrundsätze beeinflusst. Die wachsende Beliebtheit mobiler Endgeräte, native in-Browser, die Übernahme von CC3, HTML 5 und die erhöhte Bandbreite sorgen für Veränderungen in den Webdesign-Paradigmen. Design trifft Funktion und sorgt dafür, dass Webseiten entstehen, die ein wenig vom Abstrakten weg und hin zur Realität führen. Dieser Beitrag zeigt, welche Trends das Jahr 2017 im Webdesign setzt.

Individualität bei der Menüführung

Sidebar oder Top. Die zwei Standardformen der Menüführung erhalten Zuwachs und mit dem Aufkommen des responsive Webdesign steht zu den üblichen Menüformen das Hamburger-Menü zur Auswahl. Diese Lösung ist praktikabel für das mobile Design. Doch es gibt neben den drei Standardformen auch die Möglichkeit, ganz auf das Menü zu verzichten. Usern wird nicht mehr gesagt, was sie auf einer Webseite anklicken sollen, sondern lässt sie selbst suchen, was sie finden möchten. Einige Webdesigner verzichten komplett auf die Menüs und setzen einen neuen Trend. Durch die wachsende Beliebtheit von Tablets und Smartphones eröffnen sich neue Welten für das Side-Scrolling. Statt sich zwischen einem Menü für mobile Endgeräte und Desktop zu entscheiden, zeigt das Hamburger Menü drei kleine Linien und spart wertvollen Platz auf dem Bildschirm. Designer beschränken sich nicht auf die echten Hamburger Icons, sondern variieren mit der Typografie, die Nutzern zeigt, wo geklickt werden muss, um an das Menü zu gelangen. Eine gute Alternative bietet das Drop-Down Menü, das aufpoppt und an beliebiger Stelle platziert werden kann. Das Popover bietet eine leichte Abwandlung und lässt das Menü die komplette Seite bedecken, wenn es gewünscht ist. Auffallend und ein wenig aufdringlich erinnert die Popover-Variante an das Inhaltsverzeichnis eines Buches.

Aus eins mach zwei – Split Screens

Der Bildschirm wird vertikal in zwei gleich große Teile getrennt. Split Screens sind auffallend und wecken die Erinnerung an ein aufgeklapptes Buch, sodass der Bildschirm einen natürlichen Touch erhält. Der Trend ist vielseitig und macht es möglich, auf kleineren Bildschirmen und Displays einfach eine Seite zuzuklappen. Zwei aufeinander folgende Seiten können einfach zu Blöcken gestapelt werden oder man wandelt sie in eine Side-Panel-Navigation um.

Professionelle Webseiten

Ob für private oder geschäftliche Zwecke: ein professioneller Internetauftritt ist nahezu unerlässlich und wird seinen Eroberungszug weiter fortsetzen. Die Möglichkeiten sind fast unbegrenzt und Nutzer benötigen keine Programmierkenntnisse, um eine Webseite erstellen zu lassen. Professionelle Designs und responsive Webseiten von websitebutler.de, die auf allen Endgeräten optimal dargestellt werden, sorgen für ein einzigartiges Nutzererlebnis. Auf Wunsch werden die Social Media Kanäle integriert und die Wunschdomain inklusive E-Mail Adressen inkludiert. Modernes Design wird mit der Einbettung von persönlichen Infografiken, Videos, Tutorials Animationen und Fotos abgerundet.

Retro und Vintage erobern die Bildschirme

Vorhandenes Corporate Design, Farbpsychologie, die Branche oder der individuelle Geschmack. Egal, welche Farbgebung bevorzugt wird: Durch einen Instagram-Filter erhalten Farben einen warmen Touch und wecken ein Gefühl der Nostalgie.

Digitales und Greifbares verschmelzen

Das Material-Design bietet mehr Farbverläufe sowie Schatten und erzeugt die Illusion eines dreidimensionalen Raumes auf einem flachen Bildschirm. Im Jahr 2017 dreht es sich darum, fühlbare, physische und greifbare Welten auf das Display zu zaubern, die fast nahtlos mit der digitalen Welt verschmelzen. Fotografische Elemente werden nicht in Ecken gequetscht, sondern aus ihrer Umgebung genommen und in völlig digitale und animierte Umgebungen gesetzt. Licht und Schatten bleiben, aber die Regeln der Realität werden gesprengt. Physische Objekte finden in digitalen Räumen Platz und die Grenzen zwischen Bildschirm und der realen Welt verschwimmen. Dadurch werden emotionale Verbindungen zu den Bildschirmbildern aufgebaut.

Card-Design

Cards wurden von Pinterest eingeführt und sind heute fast schon omnipräsent. Informationen werden in kleinen Häppchen aufbereitet, die man leicht einscannen kann. Jede Card fungiert als einheitliches Konzept und es ist aufgrund der rechteckigen Form einfach, verschiedene Breakpoints anzuordnen.

Parallax und Interaktion

Parallax-Webdesign erfreut sich 2017 größerer Beliebtheit. Nicht alle Seiten, sondern einzelne werden als One-Pager ausgegeben. Einzigartige Parallax-Ergebnisse werden erreicht, weil gängige Grid-Systeme gebrochen werden. Mikro-Interaktionen sind im UI-sowie UX-Design wichtig. Die Interaktionen sind unterhaltsam, klein und sorgen dafür, dass Benutzer Feedback visualisieren. Nutzer werden durch Micro-Interaktionen über das informiert, was gerade läuft.

Kategorien
Design UI/UX Webdesign

Flat Design kann teurer sein als du denkst

Nanu? War Flat Design nicht das Beste seit Bier in Dosen? Eine neue Studie der Nielsen Norman Group zeigt, dass das Gegenteil der Fall sein kann.

Kategorien
Design Essentials Icons & Fonts Webdesign

Font Review Journal: Gute Schriften von Designern analysiert

Das Erstellen einer Schrift ist eine aufwändige Sache, die Hunderte Stunden an Konzeptionierung und Ausarbeitung erfordert. Im Netz finden wir die Schrift dann lediglich mit einem halben Absatz Text erläutert. Das Font Review Journal will das ändern.

Warum gibt es den Font X und wofür?

Das neue Magazin „Font Review Journal“ (FRJ) ist ein Muss für jeden Typografie-Fan. Gegründet von der US-amerikanischen Designerin Bethany Heck will das FRJ ein Typografie-Magazin von Designern für Designer sein. Derzeit ist Bethany noch die einzige Autorin. Das könnte sich allerdings zügig ändern.

Die Idee für das FRJ kam Bethany, die sehr viel Wert auf Typografie in ihren Designs legt, auf der Suche nach geeigneten Schriften. Warum erfährt der geneigte Kunde kaum mehr über einen beliebigen Font, als dass er existiert und zu welchem Preis er verkauft wird? Warum erklärt der Type-Designer nicht, wie er seinerseits auf die Idee kam, genau diesen Stil zu entwickeln, was ihn inspiriert hat oder für welchen Einsatzzweck er den Font für besonders geeignet hält?

Bethany will genau diese Bereiche mit den Reviews auf ihrem „Font Review Journal“ genauer beleuchten. Und das tut sie wirklich. Die fünf Reviews, mit denen sie das Magazin gestartet hat, sind randvoll mit Informationen zum jeweiligen Font und zudem reich bebildert. Jeder Bericht stellt ein Designwerk in sich dar, von den Inhalten ganz abgesehen.

Jede Woche ein ausführliches Review ist geplant

Bethany plant vorerst, jede Woche einen weiteren Font vorzustellen. Das erscheint wenig, ist aber angesichts des gewaltigen Recherche- und Erstellungsaufwands, den Bethany mit zwanzig Stunden pro Beitrag beziffert, schon ein großes Versprechen. Das FRJ startet zunächst nicht mit einem Geschäftsmodell. Langfristig will Bethany aber wenigstens die Basiskosten über Einnahmen decken. Sponsored Posts und Bannerwerbung will sie allerdings nicht anbieten.

Reviews folgen einem immer gleichen Aufbau.

Bei der Erstellung der Reviews folgt Bethany einem wiederkehrenden Muster, wodurch es für den Leser leicht wird, unterschiedliche Fonts miteinander zu vergleichen. Besonders die historische Einordnung nebst bildhafter Nachweise, sowie die Verwendungsbeispiele in aktuellen Designs finde ich persönlich überaus interessant.

Auch Kritik an den vorgestellten Schriften wird nicht ausgespart. Es handelt sich also nicht um eine Art Schrein für die Glorifizierung von Fonts, sondern um eine praxisbezogene Darstellung der Vor-, aber auch der Nachteile und Eigenartigkeiten der betrachteten Schriften.

Designer, die der englischen Sprache mächtig sind, sollten das „Font Review Journal“ auf jeden Fall in ihre Bookmarks aufnehmen.

Kategorien
Webdesign

So erstellst du benutzerfreundliche Formulare

Anhand einiger exemplarischen Kontaktformulare von Firmen worüber Neukunden Kontakt aufnehmen können, Kundenregistrierungen bei Onlineshops und Anmeldung bei Social Media-Portalen möchte ich Ideen und theoretische Ansätze aufzeigen um Teile der Eingabe-Prozedur schlanker zu halten und gleichzeitig weniger Frust und Hürden zu generieren.

Ich habe mich bemüht für Web-Entwickler, sowie Marketeer als auch für den Redakteur etwas zu integrieren. Gerne können Sie den Artikel also auch Ihrem Spezialisten weiterleiten und den Sinn und die Möglichkeiten im Einzelfall besprechen. Es ist für jeden Punkt abzuwägen. Testen, lernen und iterieren (LEAP*) lautet somit die Devise.
*Quelle: https://blog.twitter.com/2015/leap-a-guide-to-ab-testing-tips-and-resources

Sehen Sie folgende Gedanken über Formulare nicht als Maß an. Auch ein Standard-Kontakt-Formular wie es bei einem schönen Theme für WordPress mitkommt, kann seinen Zweck erfüllen und gut aussehen. Gerade bei knappem Budget oder einem anderen Focus aber auch eventuell schwer anpassbaren Systemen kann (und muss!) nicht jede Optimierung durchgeführt werden.

Zu Beginn werden einige interessante Ansätze aufgezeigt wie Formulare auch aussehen können.

Natural Language Forms

Eine neue Variante ist die “Natural Language Form”. Statt normalen gelabelten Eingabefeldern werden Auswahlfelder einem ~natürlichen Satzbau nachempfunden. Auch hier kann sich der Bereich dynamisch verhalten wie in folgenden Beispielen verdeutlicht:

Bei der Auswahl von “Angebote” kann anderer Inhalt ausgespielt werden also bei “Projekte”.

Quelle: http://www.staedelmuseum.de

Bei der Auswahl von “email” wird das Email-Feld ausgegeben oder das Telefonfeld.

Quelle: https://prospek.ca/en/contact-us/

Felder Positionierung

Quelle: https://tympanus.net/Tutorials/NaturalLanguageForm/

Dynamische Felder

Quelle: http://www.theverge.com/tip-us

Eine Idee wäre, das nach Wahl des Grundes hierfür nicht benötigte Inhaltsfelder auch ein- und ausgeblendet werden, wie dies bei obigen Beispiel bereits im Einsatz ist.

Seit einiger Zeit ist “Tabbed Content” – Inhalt der sich bspw hinter Tabs befindet – auch für SEO kein Problem mehr.
Quelle: https://www.searchenginejournal.com/google-says-now-ok-put-content-behind-tabs/178020/

Felder-Anzahl

Trenne soweit wie möglich die Daten die du für die Registrierung benötigst von den optionalen Feldern. Wie bei einer Datenbank-Normalisierungs-Stufe kann man auch hier überlegen, welche Felder man vereinheitlichen und zusammenfassen kann. Dadurch wird keine weitere Aktipon wie das Drücken der Tab-Taste oder das Klicken der Maus/des Touchpads notwendig um in das andere Feld zu wechseln.

Es kann auch vorkommen, dass man unterwegs auf dem Smartphone gerne Produkte sucht aber den eigentlichen Bestellprozess daheim am Laptop vornimmt, da man dort vielleicht gewillter ist die Kreditkartendaten einzugeben als im öffentlichen WLAN oder im Blickwinkel von anderen Fahrgästen im Nahverkehr. Den Prozess des Einloggens oder die Bestellung zu einem späteren Zeitpunkt anzubieten, z.B von Zuhause aus, kann hier helfen.

Wie auch bei amazon mit ihrem “1 click”-Button, soll es schnell gehen.

Quelle: https://www.ebay-kleinanzeigen.de/m-benutzer-anmeldung.html

So wundert es auch nicht, dass trotz eventuellen Datenschutzbedenken das Einloggen mit dem eigenen Google-Konto genutzt wird.

Quelle: canva.com
Quelle: twitter.com

Auch Felder die inhaltlich eigentlich getrennt sind aber sinnhaft zusammengehören können unter einer neuen Bezeichnung vereint werden. Bsp: Zum Login gibt es ein Eingabefeld für E-Mail, Telefon oder Benutzernamen – siehe Facebook/Twitter (…)

Quelle: https://twitter.com/?lang=de

Beim Registriervorgang kann für die ordentliche Validierung und das passend öffnende Tastaturlayout zwischen den Feldern auch getrennt oder wie bei Twitter hin- und her geschaltet werden.

Quelle: https://mobile.twitter.com/signup

Achtung: Beachte hierbei dass bei Abhängigkeiten sowie einem Zusammenspiel mit eventuell angebundener Warenwirtschaft- oder anderen Systemen von der Datenbank gewisse Felder benötigt werden können.

Feldüberschrift

Das Label sollte optimalerweise links neben oder oberhalb des Eingabefeldes sitzen. So ist die Wahrscheinlichkeit geringer, dass es beim Scrollen oder Springen durch Sprungmarken, als auch von der Handy-Tastatur, überdeckt wird. Evaluiere deine Seite, eventuell gibt es Social-Media-Icons oder andere mitlaufende Elemente wie einen Rückruf-/Chat-Button der dies überdecken könnte. Android Native Autocomplete-Vorschläge können darüber oder darunter aufgehen je nachdem wieviel Platz diese zur Verfügung haben.

Quelle: Quora.com

Tipp: Schaue dir daher das Formular auch mal mit einem richtigen Smartphone an und emuliere verschiedene Devices.

Alternativ: Browser-Screenshots mit Browserstack.

Wenn es links neben den Feldern stattfinden soll, dann am besten den Text rechts ausrichten, so dass er bei unterschiedlich langen Texten direkt neben dem Eingabefeld ist. Achte bei der Position auch auf die Sprache-Umschalt-Funktion deiner Webseite.

Achtung: Andere Länder haben womöglich anders lange Labels und können zu anderen Abständen und oder Umbrüchen führen.

Achte bei einer responsiven Website darauf, dass das label nicht unterhalb der Eingabemaske rutscht, insbesondere wenn du den Text rechts positioniert haben solltest. Darunter würde es von der Smartphone-Tastatur verdeckt werden können beim Scrollen. Am leichtesten für das Auge ist der geringste Abstand von Bezeichnung zur Eingabe.

Placeholder

Der Placeholder ist nicht als Feld-Bezeichnung geeignet und sollte als Feld-Eingabe-Beschreibungshilfe nur unterstützen.

Stelle dir mehrere Felder ohne Label nur mit Placeholder-Text vor, indem jedes Feld bereits ausgefüllt wurde. Weisst du noch genau was zu was gehört?

Quelle: dropbox.com

Zudem könnte es passieren, dass Felder mit Placeholder weniger beachtet werden da diese bereits ausgefüllt aussehen.

Felder Positionierung

Nicht nur für Mobilgeräte, auch auf dem Desktop ist eine Aufteilung der Spalten nicht immer notwendig. In einigen Fällen kann es auch angenehmer sein dies von oben nach unten zu lesen und zu navigieren. Andernfalls springt das Auge im Zick-Zack. Der rechte Platz auf dem Desktop kann auch für Hinweisfelder (wenn notwendig) genutzt werden. Dies dann nicht unbedingt von vornherein wie im Beispiel von Baidu.

Eine kompakte visuelle Darstellung ohne große Abstände hat sich für mich subjektiv als besonders angenehm gezeigt.

Quelle: http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

Eine gewohnte Reihenfolge der Felder ist ebenfalls sinnvoll. Dies kann sich in manchen Ländern unterscheiden, in Deutschland befindet sich das Feld „Plz“ meinst links neben der „Stadt“.

Validierung

Ein Placeholder der als Input-Mask dient um eine visuelle Validierungs-Hilfe zu realisieren, kann auch erst bei Klick in das Feld initialisiert werden. So kann bspw. bei der Eingabe der Kreditkartennummer optisch nach jeder vierten Ziffer getrennt werden, sodass man dies bei der Eingabe besser abgleichen kann. Beachte, dass andere Eingabemethoden wie das Kopieren und Einfügen oder Spracheingaben auch möglich sein können. Zur eigenen Validierung des Codes kann das Formular auch Stresstests unterzogen werden wie hier mit Gremlin.js.

So sieht ein Formular aus, was in kurzen Intervall beschrieben wird:

Weitere Alternativen:

http://www.webpagetest.org/
https://mochajs.org/
https://jasmine.github.io/

Personalisierung

Beispiel: Email
Bei verteilter Leserschaft wäre es denkbar eine Segmentierung vorzunehmen und gezielte Postleitzahlenbereiche der Newsletter-Empfänger anzusprechen, die beim Klick auf die jeweilige Variante der Landingpage landen (Quelle: http://kb.mailchimp.com/lists/segments/all-the-segmenting-options)

Achtung: Beachte hierbei, dass auch wenn der Empfänger in einer Stadt wohnt aber nicht dort geboren wurde, noch lange nicht die dortige Dialektgruppe oder Sprache verstehen muss.
Beispiel: Stuttgart und Schwäbisch. Frankfurt a. M. und Hessisch usw.

Die Qualität der Daten ist hierbei wichtig.
Beispiel: Anzeigenschaltung
Über Facebook Ads können eine Reihe von Targeting-Möglichkeiten genutzt werden um gezielt auf bestimmte Seiten / Bereiche zu verlinken.

Quelle: https://de-de.facebook.com/business/a/online-sales/ad-targeting-details

Quelle: facebook.com

Wie wäre es mit einem Gruppen-Rabatt-Code für Facebook-”Freunde” von Personen mit bevorstehendem Geburtstag für Ihr Restaurant ?

Achtung: Bei Gewinnspielen kann es von Vorteil sein dass das Produkt zu der Zielgruppe passt. Technikgeschenke wie Ipads werden sicherlich auch von vielen ausgefüllt die keine potentiellen Kunden sind.

  • Geburtstage / Freunde von Geburtstagen -> Gratis (ab x Freunden)
  • Neue Arbeitsstelle -> Mit Kollegen essen -> Firmenrabatt
  • Mittagspause (10-13 Uhr) -> Rabatt
  • Wissen -> Wussten Sie dass (…). Mehr Weisheiten zu / in

Quelle: https://www.google.de/ads/displaynetwork/manage-your-ads/targeting-tools.html#tab=contextual-targeting

Quelle: https://ok.ru/

Je nach Zielgruppe kann es auch sinnvoll sein, mal ein Blick auf weitere Suchmaschinen und soziale Netzwerke zu werfen. Russisch-sprechende (auch in Deutschland lebende) verwenden bspw “odnoklassniki” statt- oder zusätzlich zu Facebook oder Yandex als Suchmaschine. Asiaten hingegen womöglich Baidu.
Beispiel: CMS
Es gibt auch einige Möglichkeiten personalisierten Inhalt in Ihrem CMS zu erstellen, in der Theorie wären das wie folgt u.a.:

  • Location – city, country, region
  • Device – iPhone, iPad, Android phone/tablet, Windows, Mac, Linux
  • Search keywords – did they arrive while searching for shoes or shirts?
  • Visitor frequency – First , second, third, fifth time visitor?
  • Date and time of day, proximity to payday
  • Referring URL – where did they come from?
  • Customer history – have bought before, what, how much did it cost?
  • Sessions behaviour – navigation clicks, page views

Achtung: Wägen Sie den Sinn und Einsatz aber gut ab, den Performance-Einbußen der Webseiten oder nervige Popup-Fenster mit der Abfrage der Location kann schnell stören.

Quelle: https://conversionxl.com/how-to-use-personalized-content-and-behavioral-targeting-for-improved-conversions/

 

Felder

Nun folgen einzelne Bereiche des Formulars mit den Optimierungsmöglichkeiten.

Betreff / Grund / Subject

 

 

Feldposition

Eine mögliche Optimierung wäre welche Felder welche Auswahl benötigt (siehe hierzu auch: Dynamische Felder in Teil 1).

Benötige ich wie in diesem Beispiel für Produktunterlagen die hier postalisch zugestellt werden (nicht als Download / PDF) ausser der Lieferadresse Felder wie Geburtsdatum, Telefonnummer oder die Email-Adresse ?
Ändern sich vielleicht auch die Definition was einer Pflichteingabe entsprechen sollte ? Oder gar andere Felder ? Einmalige Bestellung / Bei Neuerscheinung dauerhaft auf Widerruf als Radiobuttons.
Wann sind sie zu erreichen bei Zustellung ? Nachbar Abgabe ? Stockwerk ? Besonderheiten bei Lieferung Fahrstuhl. Brauche ich ein Nachrichtenfeld als Pflichtfeld wenn ich nur die Infobroschüre haben möchte ?

 

Anrede

Wie spreche ich Sie an ?

Quelle: MailChimp.com (Englisch)
Quelle: WordPress Backend (Deutsch)

IP-Basierende Abfragen ermöglichen umgangssprachlichen Context und könnten gemacht werden um so geo-basierenden Bezug herzustellen. Ob der Aufwand dies Wert ist, sollte man überdenken.

Ein „Gude“ könnte Personen aus Hessen ansprechen, wenn dies thematisch und Zielgruppengerecht ist.

Wer dies testen möchte, findet hier einige Ansätze:

GeoIP Products


http://wordpress.stackexchange.com/questions/228628/location-based-content

GeoTargeting Lite – WordPress Geolocation

http://freegeoip.net/json/?q=xx.x.xx.xxx
{„ip“:“xx.x.xx.xxx“,“country_code“:“DE“,“country_name“:“Germany“,“region_code“:“BW“,“region_name“:“Baden-Württemberg Region“,“city“:“Stuttgart“,“zip_code“:“70000″,“time_zone“:“Europe/Berlin“,“latitude“:xx.xxxx,“longitude“:xx.xxxx,“metro_code“:0}

Achtung: Bei Mobile kann dies zu starken Abweichungen kommen, so dass eine Zuordnung nicht sinnvoll sein kann.

So wurde eventuell bisher das männliche Geschlecht anders als das weibliche Geschlecht in der E-Mail angesprochen oder die E-Mail stereotypischer aufgebaut werden. Vielleicht auch andere Farben gewählt, andere Bilder oder sei es nur die Anrede die vom Geschlecht abgeleitet wurde. Die herkömmlichen Geschlechter-Auswahl muss nicht zwingend Rückschluss darauf geben, welche Attribute die Zielpersonen ansprechen.

Quelle: yahoo.com

Bei einer Umfrage in der UK wurden über 25 Vorschläge vorgestellt die ein Geschlecht beschreiben.

Ein Ausschnitt hiervon zeigt die Vielfalt:

  • Girl
  • Boy
  • Tomboy
  • Gender-fluid
  • Agender
  • (…)

Die ganze Liste können Sie auf folgende Url auf englisch nachlesen:
Quelle: https://blog.surveygizmo.com/how-to-write-survey-gender-questions

Dies wird aktuell (Stand 19.1.2017) bereits bei großen Webseiten berücksichtigt.
Ein Beispiel hierfür ist Facebook, wo dies bereits 2014 in einem Beitrag öffentlich Stelle genommen wurde.

Quelle: https://www.facebook.com/photo.php?fbid=567587973337709&set=a.196865713743272.42938.105225179573993&type=1

Das Registrierungsform bietet diese Optionen nicht, auch eine einfache dritte Auswahl wie eine “non-binary” (Nicht festlegen) nicht an. Auch kann man es nicht abwählen.

Ähnliches gilt übrigens für die akademischen Grade, wie in dessen mehrfacher Benutzung wie z.B. “Dr. prof. Med. (…)”.
https://de.wikipedia.org/wiki/Liste_akademischer_Grade_(Deutschland)

In einer Facebook-Gruppe für Psychologie-Studenten habe ich zusätzlich eine kleine Umfrage gestartet.

Das Ergebnis am 13.2.2017 um 20:14 war wie folgt:

Quelle: Facebook.com

Achtung: Eine Analyse nach weiteren möglichen Faktoren wie das Alter der Befragten wurde nicht durchgeführt !

Nach der Registrierung kann man bei Facebook das Geschlecht zwischen “männlich”, “weiblich” und “Benutzerdefiniert” wählen. Bei dessen Auswahl hat man dann die optimale angesprochene Vielfalt. Ein Autocomplete-Eingabefeld erleichtert das Vorgehen.

Quelle: facebook.com

Andere große Anbieter bieten ähnliche Machbarkeiten an oder verzichten gänzlich wie bspw twitter.

Das Geschlecht wird in den überwiegenden derzeitigen Formularen von KMUs allerdings benutzt um eine korrekte Anrede abzuleiten. So wird ein Mann mit “Sehr geehrter Herr” und eine Frau mit “Sehr geehrte Frau” angeredet.

Wegen Sie daher im Einzelfall (des Formulars) ab ob das entsprechendes Klientel / Zielgruppe benötigt – dies hat auch regionale und/oder internationalen Ansichten – eine gewisse förmliche aktive Anrede flächendeckend benötigt oder ob direkt auf das Geschlecht und/oder Anrede verzichtet werden kann.

Wird dies benötigt, gibt es noch andere Ansätze für eine optimale Anrede in der vom Formular generierten E-Mail.

Liegen bereits keine Daten von vorherigen Tracking/Analyse und Pixel vor, wäre ein UX-Optimiertes Feld sinnvoll.
Achten Sie hierbei darauf dass bei einem Dropdown-Feld ein weitere Klick hinzukommt und je nach Aufzählung Möglichkeiten ein scrollen hinderlich sein kann.

Um die minimalen optimalen Anforderungen zu erfüllen, wäre es daher sinnvoll zwischen “Keine Angabe” / Männlich und Weiblich zu unterscheiden. Somit kann keine Aussage getroffen werden. Bei einer bspw Bewerbung müsste man sich somit also auch direkt nicht festlegen, wenn man dies nicht möchte. Besser wäre allerdings direkt darauf zu verzichten.

Hier einige weitere Ansätze zur Erhebung der Daten:
Beispiel
Der Name kann(!) auf das Geschlecht schließen, aber wie oben erwähnt kann sich “der” Empfänger davon nicht angesprochen fühlen.

Hierfür gibt es einige Datenbanken (pro Land) die beispielsweise der Vorname “Peter” als Mann erkennen und eine “Julia” als Frau. Dies funktioniert teilweise sogar mit der E-Mail wenn entsprechende Namen vorkommen.

Testen Sie dies gerne mal unter folgenden Urls:
Quelle: https://www.npmjs.com/package/gender-detection

Quelle: sex/gender
https://html.spec.whatwg.org/multipage/forms.html#autofill

Bei Newslettern und einer überschaubarer Nutzerschaft wäre ebenfalls denkbar, eine eigene Anredezeile in Mailchimp zu definieren und nur wenn diese nicht existiert die Daten abfragen.

So kann gezielt die E-Mail personalisiert werden und auch Umgangssprache oder Spitznamen oder Fragen nach etwas was man vom letzten Telefonat weiß einbinden. “Wie geht es Ihrem xyz ? Ist Ihr/e xyz wieder gesund / Erkältung” etc.

http://kb.mailchimp.com/merge-tags/all-the-merge-tags-cheat-sheet

Zusätzliche Informationen hierzu:
Quelle: http://www.knigge.de/themen/kommunikation/briefe-11616.htm

Gedanke: Captcha-ähnlich könnte ein normales Bild beschrieben werden, nach dem Spiegel-Effekt in der Psychologie ließe sich dann möglicherweise gezielter auf den Charakter schließen. Aber das ist sicherlich ein etwas unkonventioneller Gedanke :)

 

Ihr Name

Felder-Anzahl
Statt mehreren Eingabefeldern für ein später zusammengefassten Wert wie womöglich verschiedene Vornamen, Mittelname, Titel und Nachnamen für den Namen kann hier eine Vereinfachung der Felder ermöglicht werden und zu einem werden.

Beispiel: “Peter Alexander Ferdinand Maximilian Neumayer”-
Auch interessant hierzu: https://css-tricks.com/peoples-names-break-websites/
Label
Evalierung
Der vollständige Name kann ebenfalls als Geschlecht (wenn notwendig!) evaluiert werden, ggf werden hier sogar eher noch weitere Name eingebracht.

Nachteil
Sollten Sie gezielt bei der Du-Form – wie gerade im englischen Raum üblich – den User begrüßen wird es hierbei schwierig ohne bei der Reihenfolge der Eingabe und dem Vor- und Nachnamen zu raten und den Namen technisch aufzuteilen.

 

PLZ, Wohnort

Bei Bau- oder Supermärkten wird man manchmal nach der PLZ gefragt. Aus Marketingsicht hier sinnvoll, denn so kann das Einzugsgebiet ermittelt werden. Eine Verteilung von Prospekten kann somit vermehrt oder weniger in den Gebieten getätigt werden. Auch der Bau eine weitere Filiale könnte zu einer Entscheidung womöglich – wenn auch im kleinen Teil – beitragen.
Quelle: http://zuhause.chip.de/an-der-kasse-nach-der-postleitzahl-gefragt-werden-das-steckt-dahinter_57356

Auch bei einem Kontaktformular könnte dies sicherlich zur Auswertung beitragen.

Wenn das Dorf keine eigene Postleitzahl hat, kann man auch die der dazugehörigen Stadt verwenden, trotzdem kann es Wohnorte geben die keine Postleitzahl haben. Nicht nur die Tillyschanze (Münden) hat keine Postleitzahl und wurde da ansonsten der behördliche Computer sonst die Annahme verweigerte zu 00000 :)
Quelle: https://de.wikipedia.org/wiki/Tillyschanze_(M%C3%BCnden)

Für Schweizer-Adressaten wird bspw das “CH” vor die Postleitzahl gestellt.

Auch spanische Adressdaten können einige Zusätze aufweisen da oft keine Namensschildern an Türe oder Klingelschilder zu finden sind, alle mögliche Informationen dazu um die Haustüre zu finden. Bei der Postleitzahl (falls vorhanden) kann zur Validierung auch Buchstaben wie „E-“ davor. Oder „C.P.“ was soviel wie codigo postal (übersetzung) bedeutet.

Wenn es ein Postfach ist, dann heisste es Departamento postal Nº.

Eine Abfrage mit vielen Einzelfeldern wie Straße, Hausnummer, Plz, Wohnort ist unübersichtlich, wirkt überladen und benötigt eine hohe Aktionsrate (Tab, Tab, Tab, zurück).
Aus diesem Grund macht eine direkte postalische Anschrift durchaus Sinn.
Validierung
Je nach Validierung wäre eine Vereinfachung der Felder auch sinnvoll.
Es gibt hierfür spezielle Autofill-Libraries die bei Eingabe direkt Vorschläge machen und die Adresse vervollständigen können.
Die Daten basieren überwiegend auf Google Maps oder OpenStreetMaps.

Quelle: https://community.algolia.com/places/documentation.html
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=de

Platzierung

Die Adresse zählt zu den Daten die man womöglich weniger gerne mitteilt als andere, abgesehen von Ausnahmen mit positiven Erwartungen wie Essenslieferant-Bestellungen oder gratis T-Shirts zur Belohnung.

So wäre es bei gerade bei mehreren wichtigen Feldern vorteilhaft für die Conversion die Reihenfolge sinnvoll zu setzen. Die Adresse kann mit Hilfe von einer Multi-Step-Form sowie einem Fortschrittsbalken in einem späteren Bereich abgefragt werden. Falls es sich um einen Login handelt, können diese Informationen natürlich auch später im Profil nachgetragen werden.
Bei der WordPress-Registrierung – im folgenden Screenshot – reichen erstmal die Grunddaten aus um den Opt-In anzustoßen, das Profil kann man optional direkt im Anschluss weiter ausfüllen oder später – wenn man möchte.

 

Quelle: wordpress

Psychologisch sicherlich interessant wie die Bereitschaft für das ausfüllen von optionalen Feldern im Gegensatz zu Pflichtfeldern aussieht und ob so auch falsche Eingaben verzichtet werden kann. Kleiner Test, erinnern Sie sich wie oft Sie eine “0” als Telefonnummer eingegeben haben oder eine Wegwerf Email-Adresse weil Sie gezwungen waren etwas einzugeben ? Wie haben Sie sich beim Versuch dies zu umgehen gefühlt und wie oft haben Sie Daten mit Freude ausgefüllt obwohl Sie es nicht mussten ?

Weiteres hierzu: https://de.wikipedia.org/wiki/Verlustaversion

Pick-And-Carry ist ebenfalls eine gute Variante, hierbei kann man eine Filiale in seiner Nähe auswählen wo das gekaufte für Sie vorrätig gehalten wird, sodass eine Adresse nur eingegeben werden muss, wenn man keine in der Nähe hat oder dies nicht möchte.

Multi-Step-Form
Quelle: http://parsleyjs.org/doc/examples/multisteps.html
Fortschrittsbalken (…)
Datenschutz
Bedenken Sie bei brisanten Daten unbedingt den Datenschutz und die sichere Aufbewahrung.
Eine zusätzlicher SSL Verschlüsselung (Bspw LetsEncrypt) gibt es ebenfalls bei vielen Hosting-Anbietern.

https://html.spec.whatwg.org/multipage/forms.html#autofill

Quelle: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=de

Beachten Sie Eine Validierung im Browser sowie später per Server sind notwendig.

Um Missverständnisse zu vermeiden ist hier ratsam einen kurzen kleinen Text dazu zu schreiben oder mit Symbolik zu verdeutlichen was benötigt wird. Man sollte nicht groß nachdenken müssen was hier gebraucht wird.

Hier spontan einige möglichen Varianten:

  • Herkunftsland von der Formulare Ausfüllenden Person
  • Herkunftsland des Protagonisten bzw der im Auftrag handelten Person
  • Land wo möglicher Versand hin geht
  • Land wo mögliche Firma sitzt
  • Mehrere Standorte möglich
  • Land an welches das Formular/Anfrage geschickt werden soll
  • Land welches Teil der Anfrage wäre (Produktionsstätte)

Tipp: Beachten Sie dass das Land nicht gleichzusetzen ist mit Sprache bei einem Dropdown-Feld.
Feldauswahl
Ich habe bereits die passende tld aufgerufen, bspw de für deutschland und abgesehen von trendigen Ausnahmen wie .io wird mir auch automatisch
die deutsche sprache angezeigt. Theoretisch könnten die Länder nun auf deutschsprachige gefiltert werden ? Oder ist es überhaupt notwendig ?
Kann wenn es sein muss dann nicht bereits Deutschland vorausgewählt sein ? Die Reihenfolge der Wahrscheinlichkeiten anzupassen wäre auch einen Test wert.
Für die alphabetische Suche dann allerdings ebenfalls darunter auswählbar. Beispiel: Land 1 2 3 —- Land A B C
Mit der GeoIp oder nach der jeweiligen Sprache (WPML) ausgewählt.

Email

Validierung
Einige Top-Level-Domains (TLDs) – also das Ende der Domain, hinter dem letzten Punkt – haben zwei bis drei Zeichen, wie bspw:

  • .de
  • .com
  • .net
  • .org
  • .gov

Es gibt allerdings auch andere längere TLDs wie z.B.

  • .info
  • .blog
  • .chat
  • .berlin

So dass das die bisherige “Standard”-Validierung oder definierte Pattern (Angabe wie der korrekte Aufbau der erlaubten Eingabezeichen ist) hierfür nicht ausreichen könnten.

Quelle: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern4

Auch habe ich schon Validierung gesehen wo eine TLD nicht eingegeben werden musste. Das Formular begnügte sich mit „info@domain“ ohne „.de“ am Ende.
Hier kann ein Test im Hintergrund auf vorhanden E-Mail von Vorteil sein.
Eine doppelte Eingabe von E-Mail Feldern zu Abprüfung auf Schreibfehler kann man mit dieser Überprüfung auch vernachlässigen. Gerade bei langen E-Mail-Adressen ist die Chance groß dass diese nur kopiert und eingefügt wird statt erneut abgetippt.
Optimal hierfür ist eine Überprüfung beim tippen. Gibt man “max.mustermann@g” ein, folgen Vorschläge die man mit der Cursortaste nach rechts oder Tab schnell vervollständigen kann und so wird automatisch “@googlemail.com” dran gehängt.
Eine weitere praktische Vorgehensweise ist eine Validierung der Domain. So wird bei Tippfehlern bei “gm.xnet” oder ähnlich direkt “gmx.net” vorgeschlagne und ggbf bei Klick direkt gefixt.

Ein schönes Beispiel verwendet Facebook indem es in einem Feld eine Handynummer oder E-Mail-Adresse abfragt. Zwei Nachteile hat dies allerdings, denn mobile kann bei einem Eingabefeld mit dem Typ „Nummer“ auch das passende Keyboard mit Zahlen aufgehen statt dem Standard.

Quelle: facebook.com

Des Weiteren lassen einige Webseiten einige Email-Adressen mit dem Namen „Info“ nicht zu.
Wenn dies die derzeit einzige Geschäfts Email ist, kann dies ebenfalls eine Hürde darstellen.
Vorstellbar ist dass es sich hierbei um einen Schutz handelt.

Eine Zeitlang gab es @googlemail und @gmail.
Es ist dasselbe Google Konto, wird bei vielen Anbietern als verschiedene behandelt.
Bspw habe ich bei bei der Dropbox somit aus versehen zwei Konten angelegt und verwechsle es beim Login immer wieder. So wäre eine Alias-abfrage interessant.
Falls Sie vorhaben Cold Leads zu generieren die Sie auch nutzen wollen, könnten Sie auch gegen bekannte Einweg-E-Mail-Adressen oder Wegwerf-Email-Adressen validieren. Diese werden allerdings regelmäßig erweitert.

Telefon

Beachten Sie dass durch immer günstig werdende Flatrates die Anzahl der Festnetztelefone abnimmt. Bei steigender Zahl der Smartphone-Nutzer kann es aber auch vorkommen dass man wie ich seine eigene (neue) nicht auswendig weiss. Daher müsste man hier auf dem Gerät den Browser kurzfristig verlassen um nachzuschauen im Adressspeicher.
Womöglich möchte man auch keinen telefonischen Kontakt oder teilt sich den Anschluss. Auch aus Sicherheitsgründen wie bei einer Geheimnummer kann es schwierig sein. Lassen Sie die Kontaktmöglichkeit wenn möglich variable.

Alter

Das Alter wird eher im Profil als im Checkout abgefragt.

Das Feld kann als normales Eingabefeld, Nummernfeld oder wenn man den Geburtstag abfragt auch als Datumsfeld vorkommen.
Aufwendig wird es allerdings wenn die Felder getrennt werden und man drei Selectbox-Felder anklicken und auswählen muss.Um einen Bereich abfragen kann es auch Radiobutton oder Dropdown erscheinen.

Wofür benötigt man dies ?
Bei ValveTM wird dies obwohl die Daten im eingeloggten Profil gespeichert sind immer wieder bei jugendgefährdenden Artikeln abgefragt dass man von Google/Foren etc nicht direkt auf einem Artikel landet der vielleicht verstörende Bilder enthält.

Quelle: http://steamcommunity.com/discussions/forum/10/846940248118585609/

Das Alter abfragen kann aber auch für eine Segmentierung zu Marketingzwecken genutzt werden. Ist dies der Fall kann dies auch durch statistische Auswertung des Vornamens passieren. Kann sehr ungenau sein, aber dies wiederum kann man auch eine wiederholte Validierung vornehmen. Testen und optimieren.

Testen es gerne mal hier:
https://cebus.net/de/age.php

Wird das Alter in Form eines Geburtsdatum abgefragt, dann wäre eine Erklärung gut. Bekommt man an dem Tag ein Geschenk in Form von Guthaben/Prozenten ?

Das lange Scrollen gerade beim Jahr kann die Stimmung runterziehen.
Wir haben 2017, ich bin 1984 geboren. Das sind 33 Jahre, bei einem kleinen Display wo vielleicht 10 Jahre zu sehen sind, muss ich lange scrollen. Und ich bezeichne mich noch als jung. Werfen Sie mal ein Blick in Ihrer Auswertung.

Der derzeit statistisch älteste Mensch ist 145 Jahre alt und wurde 1870 geboren. Ich vermute mal dass er sicherlich mit seinem Alter bereits Schwierigkeiten hat sich im Internet zu registrieren :) Gesundheit !

Quelle: tumbler

Die ein oder andere Werbung zeigt dass man für seine Kinder bereits Accounts anlegen kann, ein weitere nicht durchschnittlicher Fall aber bin gespannt auf den Test wenn das Kind noch kein Jahr alt ist. Oder auf den anstehenden Geburtstermin als Validierung.

Quelle:
https://login.yahoo.com/account/create
http://www.stern.de/gesundheit/gesundheitsnews/aeltester-mensch-der-welt-145-7030026.html

https://de.wikipedia.org/wiki/Liste_der_%C3%A4ltesten_Menschen#.C3.84lteste_Menschen_weltweit

Vielen Dank für das lesen meines ersten Artikels. Ich hoffe es war das ein oder andere für Sie dabei.

LG !

Kategorien
IMHO Webdesign

Warum Designer Dribbble und Behance so lieben

Dribbble und Behance sind die Top-Selbstbeweihräucherungsplattformen der Zunft. Und das dient einem ganz natürlichen Zweck.

Kategorien
Illustrator Webdesign

40 herausragende SVG-Tools und dutzende Icon-Sets

Einerseits wird das Netz immer visueller und selbst kürzeste Textpassagen werden mit einem Bild unterstrichen. Andererseits müssen wir stark auf die Ladezeiten achten, um weder Besucher noch Google zu vergrämen. Mit der Entwicklung des Responsive Web ist eine dritte Komponente hinzu gekommen: die Fähigkeit einer Grafik, mit den verschiedensten Auflösungen klar zu kommen.

Kategorien
Design IMHO UI/UX Webdesign

Wie steht es eigentlich um die Ethik im Design?

Ethik und Design gehören im Kontext betrachtet. Trotz vieler Lippenbekenntnisse passiert das viel zu selten.

Kategorien
Design E-Business Freelance Webdesign

Modernes Webdesign bedeutet Zielerreichung

Bevor du beginnst, Designvorschläge zu skizzieren, solltest du klar herausarbeiten, was das Ziel der zu erstellenden Website ist. Dann kannst du dich gleich auf das Wesentliche konzentrieren.