Definition

Flat Design kommt aus dem Bereich des Interface Designs von Applikationen und Internetpräsenzen. Wie der Name, „flat“ wie flach und „Design“ wie Gestaltung, bereits deutlich macht, geht es dabei um die möglichst einfache Gestaltung einer Benutzeroberfläche. Genauer gesagt heißt das, dass auf Schattierungen, aufwendige 3D Effekte sowie Verzierungen fast gänzlich verzichtet wird. Komplexe Objekte werden ausschließlich durch Umrisse oder die Silhouette zweidimensional dargestellt. Man handelt getreu dem Motto „weniger ist mehr“. Flat Design stellt also den Gegenpart zum sogenannten Skeumorphismus dar, denn dort wird darauf abgezielt, Objekte wie Uhren oder Telefone grafisch ins Interface eingebettet, um die Interaktion mit dem User zu fördern (beispielsweise das Diskettensymbol in jeder Textdatei als Knopf zum Speichern).

Trend geht in Richtung Flat Design

Derzeit geht der Trend bei Hardware- und Softwareentwickler klar zum Flat Design. Beispiele hierfür sind Microsofts Windows Phone und die Kachelfunktion bei Windows 8 und höher. Ebenfalls auf diese Form des Interface setzt Apple. Die Firma aus dem Silicon Valley steht seit Firmengründung für möglichst einfach zu handhabende Benutzeroberflächen. Mit dem iOS 7 änderte man zudem alle bisher bekannten UI-Elemente hin zu vereinfachten Versionen.

Das Prinzip des schlanken Designs ist gerade erst auf dem Vormarsch und wird sich weiter etablieren. Dennoch geht der Trend dahin, dass Interfaces zwar so kompakt und trivial wie möglich gehalten werden, aber mit minimalen Effekten wie beispielsweise Schattierungen versehen werden, um der oben genannten Gefahr zur Langeweile aus dem Weg zu gehen.

Im sich ein Bild von guten Websites die im Flat Design erstellt wurden zu machen können Sie awwwards einen kurzen Besuch abstatten.

Vorteile

Der Vorteil dieses minimalistischen Prinzips liegt in seiner einfachen Anwendung. Nutzer finden sich sofort auf der Benutzeroberfläche zurecht. Des Weiteren beschleunigt das schlanke Design die Ladezeiten von Webseiten sowie eine einfache Anpassung an verschiedene Bildschirmgrößen. In Zeiten der Coexistenz von PC und Smartphones ist letzterer Punkt auf dem Vormarsch der digitalen Endgeräte besonders von Bedeutung in Zukunft. Zudem rückt beim minimalistischen Design der Content in den Vordergrund. Unternehmen können Kunden gezielt auf ihren Content aufmerksam machen, ohne sie mit ausgefallenen Interfaces zu verwirren.

Nachteile

Aufgrund der Einfachheit von Objekten fällt es Unternehmen zunehmend schwer, individuelle Interfaces zu erstellen, welche denen der Konkurrenz nicht ähneln. Auf Dauer könnte dieser Trend also eher zum Langweiler werden. Des Weiteren besteht die Gefahr, dass Webseiten dadurch nicht responsive sind. Dem Nutzer fällt es durch das einfache Interface möglicherweise schwer, klickbare von nicht-klickbaren Elementen zu trennen.

Tipps und Tricks

Bei der Erstellung solcher Objekte ist auf die Pixelgenauigkeit zu achten. Sowohl bei Vektor- als auch bei Rastergrafiken müssen die Pixel genau sein, um eine gute Skalierbarkeit zu gewährleisten. Außerdem ist es von Vorteil, mit Farben zu experimentieren. Die komplexen Objekte werden möglichst vereinfacht, aber mit Hilfe von lebhaften Farben ansehnlich gestaltet. Ein weiterer Tipp für ein gutes Design ist die Verwendung von Typografie anstatt von Standardschriften.

Captcha

Definition

Unter Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) versteht man einen Sicherheitsmechanismus, der darauf abzielt, Menschen von Software zu unterscheiden. Dadurch soll die Sicherheit für Nutzer sowie Betreiber von Webseiten verbessert und Missbrauch verhindert werden.

Einsatzgebiete

Captcha wird häufig bei Kontaktformularen, Registrierungen oder Umfragen im Internet verwendet, um zu verhindern, dass Formulare automatisch durch sogenannte Bots befüllt und abgesendet werden.

Funktionsweise Captcha

Um festzustellen, ob es sich bei dem Nutzer der Seite um einen Menschen oder eine Maschine handelt, werden für gewöhnlich sogenannte Challenge-Response-Tests verwendet, bei denen der Nutzer eine Aufgabe lösen muss, die für einen Menschen einfach, für eine Maschine jedoch sehr schwer zu lösen ist. Oftmals werden dem Nutzer dabei zufällig generierte, verzerrte Zahlen- oder Buchstabenreihen sowie Bilder oder Rechenaufgaben angezeigt. Es gibt jedoch auch Aufgaben, die Audio- oder Videoaufzeichnungen beinhalten. Wichtige Merkmale dieser Tests sind für gewöhnlich, die zufällige Generierung der Aufgabe und die Veröffentlichung der verwendeten Algorithmen, wodurch die Sicherheit der verwendeten Algorithmen durch Experten verifiziert werden kann.

Vorteile und Nachteile

Die zu lösenden Aufgaben sind oftmals nicht barrierefrei, sodass es für sehbehinderte Menschen problematisch sein kann, diese Aufgaben zu lösen. Auch Benutzer von textbasierten Browsern werden durch den Einsatz dieser Tests von der Nutzung der Seite ausgeschlossen. Zudem gibt es immer bessere und ausgeklügeltere Software am Markt, die es schafft, die gestellten Aufgaben automatisch zu lösen und somit Missbrauch Tür und Tor öffnet. Dass dieser Mechanismus jedoch für Betreiber von Webseiten unerlässlich ist, um falsche Registrierungen und Angriffe auf ihr System zu reduzieren, ist offensichtlich.

Tipps und Tricks

Eine einfache und leicht verständliche Gestaltung von Challenge-Response-Tests erhöht in der Regel die Zufriedenheit der Benutzer und reduziert Nutzungsabbrüche sowie Fehlermeldungen. Google bietet durch seine Software ReCaptcha seit einigen Jahren einen benutzerfreundlichen Mechanismus an, um zu überprüfen, dass es sich bei Nutzern einer Webseite um Menschen und nicht um Maschinen handelt. Dabei analysiert die Software das Verhalten des Benutzers auf der Seite und zeigt im Falle eines positiven Ergebnisses lediglich die Meldung „Ich bin kein Roboter“ an. Klickt der Benutzer auf diese Meldung, kann er das Formular ohne weitere Aktionen absenden.

Fazit

Captcha ist ein notwendiger Sicherheitsmechanismus, um unautorisierten Zugriff zu verhindern und somit die Sicherheit für alle Beteiligten zu erhöhen. Der Einsatz von Challenge-Response-Tests bietet jedoch keinen hundertprozentigen Schutz vor Angriffen und Spam.

User Experience

Die Definition von User Experience kurz (UX)

User Experience (ISO 9241-11(Usability)/210(UX) ist das Kriterium für den Erfolg einer (Firmen-)Website oder App: Wenn das Anwender- und Nutzererlebnis für den Seitenbesucher zu einer positiven Interaktion wird, kann das vorgestellte Produkt oder die beworbene Dienstleistung enorm davon profitieren.  Benutzerzentriertes Design mit interaktiven Oberflächen und mobilen Lösungen konzipieren, gestalten, fortentwickeln und evaluieren ist das Ziel der Zukunft.

Dabei gibt es drei Erfolgskriterien:

  1. Festigkeit, im Sinne von Sicherheit vor Hackerangriffen und EDV-Systemstabilität aber auch Stabilität unter Gesichtspunkten der Datenpflege und der Kontaktgeschwindigkeit.
  2. Nützlichkeit, sinnvolle, weiterbringende Funktionalitäten, wie zum Beispiel Kontaktformulare, Videobeiträge oder aktuelle Blogposts. Die subjektive Wertigkeit kann mithilfe von UEQ (User Experience Questionnaires) evaluiert werden. Wie schnell vermitteln sich dem User Sinn, Konzeption und Zweck einer Website? Das „Warum?“ sollte im Mittelpunkt stehen: Kennt man Gründe für bestimmte Verhaltensweisen, werden Optimierungspotentiale offensichtlich.
  3. Schönheit – zur Maximierung der durchschnittlichen Verweildauer in einer schnelllebigen Zeit (quantifizierbar z.B. durch die Blickerfassungsmethode). Dazu gehören ästhetische Ansprüche, Ergonomie aber auch die emotionale Nutzeransprache nach der AIDA-Formel: attention, interest, desire and action bzw. der darüber hinaus gehenden Dagmar-Formel: Defining Advertising Goals for Measured Advertising Results. Basis sind wahrnehmungspsychologische Grundlagen.

Erfolgsrezept Erlebnisorientierung

Erlebnisse, so Studien, machen nicht nur glücklicher als Produkte; sie erscheinen dem „User“ auch als die lohnendere, Freude bringende Investition. Die Entwicklung läuft von der materiellen Glückseligkeit hin zu immaterieller Erfüllung durch befriedigendes Erleben. Vor Produkterwerb und Konsum steht somit die Befriedigung ästhetischer Ansprüche bei Vorabinformation. Online-Erleben als sinnlicher, emotionaler, räumlich-zeitlicher Ablauf im Kopf der Benutzer. Daher sollte humane User Experience also bei Evaluation und Marktforschung einen Schwerpunkt auf die entstehenden Erlebnisse setzen und nicht nur auf spezifische Attribute der Produkte (USP). Eine UX-Vision dient umgekehrt auch der Produktgestaltung; sie soll inspirieren und Leitfaden für Designentscheidungen sein. Dabei geht UX über starre Styleguide-Vorgaben hinaus: Screen und Bedienoberflächen bieten den Anwendern alle Funktionalitäten, die erforderlich sind, in nachvollziehbarer Ansicht. Gestaltungsprinzipien und der Fokus auf Teamarbeit beim Weg von Entwurf über Visualisierung und Umsetzung lassen mehr Freiräume für kreative Erfolgsgeschichten bei gleichzeitiger Kenntnis der technischen Möglichkeiten von Programmcode.

Trendschau UX – Wohin geht’s?

Das Mozilla Open Innovation Toolkit z.B. beschreibt in übersichtlicher Machart Methoden für Stategien, Produktentwicklung, Ideenfindung und Evaluation hinsichtlich der Frage: Wie verschaffe ich mir und meinen Web-Inhalten mehr Aufmerksamkeit und Relevanz bei der Zielgruppe? Die Ära gesichtsloser Web-Firmen-Accounts ist passé – Kunden suchen nach menschlichen Vertrauenspersonen mit Wiedererkennungswert, die sie durch die virtuelle Welt mit enormem Bewegtbildpotential lotsen. Der Anwendungskontext muss zum großen Ganzen passen.

Heatmap

Was ist eine Heatmap?

Mithilfe einer Heatmap analysiert man das Besucherverhalten auf einer Webseite um diese darauf zu optimieren. Eine Heatmap wird in Form von Temperaturschwankungen dargestellt. Auf diese Weise lässt sich das Besucherverhalten bzw. die Verweildauer eines Besuchers auf einem bestimmten Punkt analysieren. Dabei wird zwischen vier Arten von Heatmaps unterschieden.

Klassische Heatmap:

Mit einer klassischen Heat Map ist es dem Webmaster möglich, visuell die Häufigkeit der Klicks, welche von Webseiten-Besuchern getätigt werden. Dabei werden die am häufigsten angeklickten Bereiche der Webseite als heiß (weiß) dargestellt, während die Bereiche, die am wenigsten geklickt werden, blau, also kalt dargestellt werden.
Diese Darstellung ermöglicht es den Webmaster, seine Seite hinsichtlich der Conversion weiter zu optimieren.

Eyetracking:

Das Eyetracking ist wie der Name schon verrät, dass Messen von Augenbewegungen und Blickverläufen. Hierbei sitz der Proband vor einem Bildschirm und seine Augenbewegungen werden dabei aufgezeichnet, während er sich Inhalte von Webseiten ansieht. Mittlerweile gibt es auch Simulatoren die menschliches Verhalten beim Betrachten von Webseiten simulieren. Dabei wurden viele Datenmengen von klassischen Aufzeichnungen gesammelt und diese per Software visualisiert. Diese Simulation entsprechenden mit einer hoher Wahrscheinlichkeit, den Fixationen und Sakkaden, also den Augenbewegungen, eines menschlichen Betrachters.

Mouse Movement Map:

Bei dieser Form der Heat Maps handelt es sich um eine Analyse, welche die Mausbewegungen der Besucher aufzeichnet. Auf diese Weise weiß der Webmaster, welche Bereiche der Seite für den Besucher am Hilfreichsten ist. Dadurch ist es möglich, genau diese Bereiche bei der Optimierung noch einmal mehr in den Vordergrund zu rücken. Eine Mouse Movement Map gleicht einer Eye Tracking Analyse, ist jedoch nicht ganz so hilfreich bzw. genau.

Clickmap:

Bei dieser Analyse werden die einzelnen Klicks ausgewertet. Das ist im Hinblick auf die Usability sehr wichtig. So kann der Webmaster mit Hilfe der Clickmap nachvollziehen, welche Links besonders oft angeklickt werden, oder welche Bilder oder Menüs sie besondere Beachtung schenken. Diese Bereiche können auf Basis der Analysedaten verändern werden, oder einen Call-to-Action an einer anderen, besseren Stelle angebracht werden. Für Onlineshops ist diese Analyse ebenfalls sehr wichtig, um zum Beispiel den Warenkorb an eine geeignete Stelle zu platzieren.

Scrollmap:

Die Scrollmap dient dazu das Scrollverhalten der Besucher grafisch darzustellen. Alles was sich unterhalb des sogenannten “Above the Fold”-Bereich befindet, kann vom Besucher nur durch scrollen wahrgenommen werden. Deshalb wird der “Below the Fold”-Bereich von Usern wenig beachtet. Mittels der Scrollmap Analyse, sieht der Webmaster, welche Bereiche der Webseite für den User nützlich sind.

Wie sollte eine Heatmap am besten nutzen und auf was sollte man achten?

Bei der Head Map Analyse einer Webseite hat der Betreiber der Seite viele Möglichkeiten sie einzusetzen. Aber es gibt ein paar Punkte, die man bei der Nutzung einer solchen Analyse beachten muss.
Zum einen ist ein Blick auf den Traffic sehr wichtig. Will man eine derartige Analyse starten, sollte man bedenken, dass auch entsprechend genug Traffic auf der Seite vorhanden ist. Eine Analyse zu starten, obwohl man nur 10-20 Besucher am Tag hat, bringt keine wirklichen Erkenntnisse. Auch wenn man den Test ein paar Wochen laufen lässt.

Ein weiterer wichtiger Aspekt ist die Art der Webseite, die man analysieren möchte. Eine statische Webseite eignet sich deutlich besser als eine dynamische Seite. Den bei einer Seite, bei der sich der Content regelmäßig ändert, zum Beispiel bei Blogs, sind die Klicks meist großflächig auf der Seite verteilt.

Stößt der Webmaster nach einer Heat Map Analyse auf Punkte, die optimiert werden sollten, hat es sich als äußerst nützlich herausgestellt einzeln vorgehen und die Bereiche nach der Optimierung erstmal weiter beobachten. Sonst kann man nur schwer sagen, wie viel die Optimierung gebracht hat.

Welche Anbieter (kleine Auswahl) von Heatmap Tool gibt es und was sind Ihre Unterschiede:

  • eTracker (Webanalyse-Software mit verschiedensten Heatmap-Funktionen)
  • Lucky Orange (Datenserver in den USA, keine Formularanalyse, leichte Installation)
  • overheat (Deutsches Unternehmen, Heatmap, Formular Analyse, Funnel, kostengünstig)

Die Funktionsweisen und der Umfang der angeboten Tools sind recht unterschiedlich. Bei der Auswahl sollte man daher im Vorhinein genauestens bestimmten was man messen möchte und wie die gewonnenen Daten eingesetzt werden können.

Breadcrumb

Was bedeutet der Begriff?

Das Wort Breadcrumb kommt aus dem Englischen und bedeutet übersetzt Brotkrümel. Doch was hat dies mit Webseiten zu tun? In diesem Artikel erklären wir Ihnen den Zusammenhang.

Warum sollte man Breadcrumbs verwenden?

Der Begriff ist an das Märchen „Hänsel und Gretel“ angelehnt, wo Brotkrumen verstreut werden, um den Weg zurück zu finden. Die Breadcrumbs auf einer Internetseite haben die gleiche Funktion! Sie werden als Navigationselement eingesetzt und sollen dem User, also dem Benutzer zeigen, wo er sich gerade befindet und ihm so bei der Orientierung auf der Seite helfen.

Eine Breadcrumb-Navigation kann gerade in sehr verzweigten Strukturen sinnvoll sein, wo ein Menü eventuell an seine Grenzen kommt und nicht die genaue Position des Users anzeigt. Dank der Breadcrumb-Navigation weiß man so aber genau, wo man sich befindet und kann bei Bedarf jederzeit problemlos zurück zum Ausgangspunkt gelangen, was wiederum für eine gute Usability, also Benutzerfreundlichkeit sorgt.

Wie verwendet man eine Breadcrumb-Navigation richtig?

Die Breadcrumb-Navigation soll natürlich gut sichtbar aber nicht zu dominant und präsent sein. Aus diesem Grund empfiehlt es sich hier, auf eine kleinere Schriftart oder Schriftgröße zurückzugreifen oder aber eine dezentere Farbe zu wählen. Damit sie jedoch gleich gefunden werden kann, sollte sie im besten Fall über dem Hauptinhalt der Internetseite platziert werden. Je nach Layout / Design ist es aber auch möglich, dass sie über dem Header (Kopfbereich) positioniert werden.

Damit das Navigationselement die ihm angedachte Aufgabe erfüllt, sollten die einzelnen Punkte identisch mit den Menüpunkten sein und auch zu dem jeweiligen Text verlinken. So landet man unabhängig davon, welche Navigation verwendet wird, auf der identischen Seite.

Die Breadcrumb-Navigation sollte mit der Nennung der Startseite beginnen – je nach Webseite wäre das „Startseite“, „Home“ oder aber „Willkommen“. Das Ende bildet dann der Name der aktiven Seite. Während alle aufgeführten Punkte zu der dazugehörigen Seite verlinkt werden, ist der letzte Punkt der aktiven Seite nicht verlinkt.

Damit die einzelnen „Brotkrumen“ voneinander getrennt werden und dies auf den ersten Blick sofort erkennbar ist, hat sich die Verwendung des Symbols „»“ etabliert.

Welche Arten gibt es?

Es gibt verschiedene Arten von Brotkrumen-Navigationen. Die wohl am häufigsten verwendete Variante ist die location based Breadcrumb-Navigation, bei der die aktuelle Position des Users in der Hierarchie der Webseite aufgeführt wird.

Bei dem Klickpfad (Path) werden die Seiten, die man vorher geöffnet hat, chronologisch wiedergegeben. Dies ist gerade bei komplexen Webseiten mit tiefgehender Struktur nur bedingt geeignet. Der User könnte auch einfach die Vor- und Zurück-Buttons des Internetbrowsers verwenden, um das gleiche Resultat zu erhalten.

In Onlineshops werden oft die attributbasierten Breadcrumb-Navigationen verwendet, die dem User einen Überblick über die Kategorien gibt, zu der die gerade besuchte Seite gehört. Die Verwendung einer solchen Brotkrumen-Navigation ist um einiges komplexer, denn hier muss die Navigation gegebenenfalls die Datenbank angepasst werden.

Welche Bedeutung hat die Breadcrumb-Navigation für die Suchmaschinenoptimierung?

Damit die Breadcrumb-Navigation sich positiv auf die OnPage Optimierung auswirkt, ist es wichtig, dass die Brotkrumen richtig implementiert werden. Dies sollte man im Quelltext mit Hilfe von Mikrodaten oder RFDa machen.

Der Google Crawler kann die Elemente, die semantisch ausgezeichnet sind, auslesen und im Index speichern. Teilweise wird so das Navigationselement bei Google in den SERPs, also den Search Engine Result Pages, als Rich Snippets in der URL-Zeile angezeigt.

Linkjuice

Linkjuice

Link & Juice (zu deutsch: Linksaft) entsteht, wenn durch eine Vererbung des Page Ranks der linkgebenden Seite. Der PageRank ist ein ausgeklügelter Algorithmus, mit dessen Hilfe man die Wichtigkeit einer Webseite im Vergleich mit anderen Seiten bewertet und Internetinhalte für User von Suchmaschinen hierarchisiert, um diesen optimale Ergebnisse zu liefern. Dieser Page Rank wird über Links vererbt und steigert somit die Relevanz der verlinkten Seite.

Eine verlinkte Seite wird am Linkjuice einer hochgerankten Seite beteiligt und bekommt so PageRank vererbt. Dabei zählt nicht nur die Häufigkeit der Links, mit denen auf eine Webseite verwiesen wird, sondern auch die Qualität der vorangehenden Seiten. Die Gestaltung der internen Linkstruktur  ist einer der mächtigsten Hebel in der Informationsarchitektur.

Vorsicht bei der Verteilung von Linkjuice

Er unterliegt einer Aufteilung. Wenn eine Seite mit vier Links auf Unterseiten verweist, erhält nicht jede Unterseite den gesamten Linkpower, sondern jede ein Viertel. Dementsprechend profitiert eine Unterseite bei der Vererbung des Page Ranks einer Oberseite mit zehn Links auch nur von einem Zehntel des Linkjuice.

Je mehr Links von hochwertigen Webseites zu einer anderen Webseite führen, desto mehr Linkjuice erhält diese. Es gilt jedoch auch: Je weniger Links eine Webseite aufführt, desto mehr Linkjuice wird an die nächste Webseite weitergegeben. Bei der Nutzung von Linkjuice ist auf eine sparsame, effiziente Informationsarchitektur zu achten.

Die interne Verlinkung nutzen

Eine Möglichkeit, findet sich in der internen Verlinkung. Wenn ein Internetdienst oder Webseite häufig mit Links auf Content der eigenen Seite verweist, erzeugt dies eine Erhöhung der Link Power der Seite. Diese Webseite kann wiederum der folgenden Unterseite die positiven Eigenschaften weiter, die zuvor erhalten wurden weitergeben.

Der Linkjuice muss sinnvoll über die Seite verteilt werden. Es ist beispielsweise unsinnig, eine Subpage mit einem Dutzend verschiedener Links zu versehen, weil dabei Linkjuice verloren geht. Vielmehr ist es ratsam, ausgehend von der Hauptseite (der Seite mit dem höchsten PageRank) ein verzweigtes Netzwerk zu erstellen, in dem zunächst die Hauptseite den Linkjuice an die Unterseiten weitergibt. Die Unterseiten können sich dann gegenseitig wieder mit Linkjuice versorgen, indem sie mit Links aufeinander verweisen.

Wie Sie die interne Verlinkung optimieren können erfahren sie in einem sehr guten Beitrag von Hanns Kronenberg:

Interne Verlinkung optimieren