Der Aufbau eines erfolgreichen Online-Business ist keine leichte Aufgabe. Dazu braucht man Zeit, Mühe und Engagement, angefangen beim Aufstellen eines Geschäftsplans und einem Alleinstellungsmerkmal bis hin zum Entwerfen und Verwalten Ihrer Website und dem Optimieren für Suchmaschinen-Rankings.
Warum sollten Sie sich also angesichts all dieser Arbeit, die in Ihre Website einfließt, nur auf einen einsprachigen Markt beschränken?

Wenn Sie sich dazu entschließen, sich bei Ihrer Internet-Präsenz an nur eine einzige Sprache zu halten, schließen Sie damit eine enorme Anzahl potenzieller Kunden aus der Gruppe der 1,8 Milliarden Menschen aus, die derzeit weltweit online sind. Sollten Sie sich für Deutsch als Sprache Ihrer Wahl entscheiden, erreichen Sie damit lediglich 72,3 % der potenziellen Kunden – selbst englische Muttersprachler machen weniger als ein Drittel aller Internetsurfer aus (internetworldstats). Insbesondere für Online-Unternehmen ist eine mehrsprachige Internet-Präsenz entscheidend, da Untersuchungen zufolge 85% der Verbraucher – selbst der mehrsprachigen – nur dann auf einer Website kaufen, wenn sie dort Produktinformationen in ihrer Muttersprache vorfinden (Common Sense Advisory).

Wie stellt man es also an, aus einer einsprachigen Website mit einem einzigen Zielmarkt ein Großunternehmen mit virtuellen Filialen in der ganzen Welt zu machen, das die Weltmärkte erobert?

Lokalisierung

Die goldene Regel lautet, dass man „regional denken“ muss. Dies bedeutet, zunächst festzustellen, welche E-Commerce-Märkte welcher Länder eine Lücke aufweisen, die Ihr Produkt füllen kann, und anschließend individuelle regionale Websites für jeden einzelnen Markt zu entwerfen, die in der Landessprache verfasst sind und deren Design den regional vorherrschenden ästhetischen Vorlieben gerecht wird und mit Blick auf deren Kultur vermarktet wird. Fürs erste ist es wichtig, lieber individuelle Domains für jede regionale Website zu haben – vorzugsweise solche, die auf Servern im Zielland gehostet werden – als Sub-Domains Ihrer Haupt-Website (zum Beispiel: eher www.mycompany.cn als www.mycompany.com/intl/china).

Dies ist aus zwei Gründen wichtig: für eine erhöhte Glaubwürdigkeit bei Ihren Kunden in jedem Land und, was noch wichtiger ist, für Ihre SEO, da Google im Hinblick auf Suchen vor Ort einer regionalen Domain ein höheres Ranking einräumt als einer internationalen.

Design

Verschiedene Kulturen stellen auch unterschiedliche Erwartungen daran, was sie im Hinblick auf eine Website mögen – man sehe sich nur die Unterschiede der japanischen und der schwedischen Website von Coca Cola an oder McDonalds britische und indische Website.

Man braucht im Wesentlichen eine Design-Grundstruktur, die eine einheitliche Markenbildung verfolgt, aber auch flexibel genug ist, damit Änderungen von einer regionalen Website zur anderen vorgenommen werden können. Denken Sie außerdem gründlich über Ihre Farbzusammenstellung nach, denn Farben können in verschiedenen Kulturen ganz unterschiedliche Bedeutungen haben, wie an diesem Schaubild abzulesen ist. Sorgen sie auch dafür, dass unterschiedliche Navigationsanforderungen im Hinblick auf Sprachen, die von links nach rechts und solchen, die von rechts nach links geschrieben werden, berücksichtigt werden. Ein horizontales Navigationssystem und ein symmetrisches Design bieten sich hier als Lösung an.

Technisch gesehen sollten Sie das Prinzip Design und Inhalt zu trennen besonders beachten. Eine sinnvolle CSS-Definition spart bei der Erstellung einzelner Sprachversionen Zeit und Mühe. Darüber hinaus sollte auch noch Unicode UTF-8 als Zeichensatz verwendet werden. Dadurch wird eine große Anzahl an Schriftzeichen unterstützt und Sie sind für zukünftige Sprachversionen bestens gerüstet.

Inhalt

Selbstverständlich müssen die lokalisierten Websites in die Sprache – oder gar Sprachen – des jeweiligen Ziellandes übersetzt werden; es ergibt wenig Sinn, eine Website für China mit ausschließlich englischem Inhalt anzubieten.

Wichtiger als eine bloße Übersetzung des Textes ist es jedoch, dafür zu sorgen, dass der Text eigens für die gedachte Zielgruppe geschrieben wird, idealerweise von einem Muttersprachler, der über einige Erfahrungen im Schreiben von Werbetexten verfügt. Während beispielsweise im Vereinigten Königreich ein salopper Ton gut ankommt, ist in Deutschland das genaue Gegenteil der Fall.

Wenn ein Sprachenprofi Ihre Inhalte formuliert, übersetzt oder prüft, sind Sie außerdem vor einem linguistischen Fauxpas sicher, der sich als peinlich erweisen kann: Als Coca Cola in China auf den Markt kam, wurde der Markenname mit „Ke-Ke-Ken-La“ übersetzt. Erst nachdem Tausende Aufschriften gedruckt waren, wurde dem Unternehmen klar, dass dieser neue Markenname, je nach Dialekt, entweder „beiß in die Wachs-Kaulquappe“ oder „mit Wachs ausgestopfte Stute“ bedeutete.

Es sind aber nicht die sprachlichen Entgleisungen allein, die Sie dabei in Schwierigkeiten bringen können – ein fehlendes Verständnis der einheimischen Kultur kann ebenfalls Probleme bereiten. So wurde zum Beispiel Pepsi im Jahr 2004 von der indischen Stadt Hyderabad wegen einer Fernsehwerbung verklagt, in der das indische Cricket-Team zu sehen war, das einen Sieg feierte. Ein Junge servierte dabei Pepsi. Die Klägerin brachte (einigermaßen vernünftig) vor, der Werbespot verherrliche Kinderarbeit.

Marketing

In Bezug auf Ihre SEO ist der wichtigste Aspekt, gezielt die beliebteste Suchmaschine in jedem Markt anzusprechen – zum Beispiel für Russland eher Yandex als Google – und auf keinen Fall Keywords einfach zu übersetzen.
Direkte Übersetzungen sind häufig nicht die beliebtesten Suchbegriffe. Keywords sind nicht Wörter im eigentlichen Sinn, sondern eher der formulierte Ausdruck eines Wunsches – und jeder sprachliche Markt zeichnet sich durch eine ganz eigene Art und Weise aus, solch einen Wunsch zum Ausdruck zu bringen. Dabei kann es sich um eine Jargon-Wendung handeln, um einen Begriff der regionalen Sprache oder um Redewendungen, die aus dem Englischen oder aus einer anderen Sprache übernommen wurden.

Zu recherchieren, welche Keywords in jedem Markt am häufigsten benutzt werden, ist der einzige Weg, um sicherzustellen, dass Sie die richtigen Keywords verwenden. Dazu kann man entweder einen Keyword-Finder wie den von Google verwenden oder, wo dies möglich ist, die Hilfe eines SEO-Experten im Land selbst in Anspruch nehmen.

Wenn es Ihnen gelingt, sich selbst in die Lage der Internetbenutzer in jedem Ihrer ausländischen Zielmärkte zu versetzen, haben Sie eine weit höhere Chance, die Wettbewerber vor Ort aus dem Feld zu schlagen und von einem Lokalanbieter zu einem international erfolgreichen Unternehmer zu werden.

Über den Autor

Christian Arno ist Gründer und Geschäftsführer des internationalen Übersetzungsunternehmens und Lokalisierungsspezialisten Lingo24. Das im Jahr 2001
gegründete Unternehmen beschäftigt mittlerweile mehr als 120 Angestellte auf vier Kontinenten und ist für Kunden in über 60 Ländern tätig.

Keine änlichen Beiträge.

© Markus Kapferer für grafixx.at, 2010. | Permalink
Post tags: Content, Inhalt, Internationalisierung, Sprachen, Übersetzung

Formularvalildierung

Was macht eine gute Website aus? Da gehören sicherlich viele Punkte dazu, aber eine sehr gute Website unterscheidet sich vom guten Durchschnitt oft in den kleinen Details, durch die sich eine Website bei der Bedienung gut “anfühlt”. Dazu gehört auch eine exzellente Formularvalidierung. Aber welche Unterschiede und Qualitätsfaktoren gibt es bei den Datenüberprüfungen?

Wann sollen die Daten überprüft werden?

Am Besten und meiner Meinung nach nutzerfreundlichsten ist eine Überprüfung direkt bei der Eingabe des Users. Also eine Inline Form Validation. Zu diesem Zeitpunkt konzentriert sich der Benutzer auf den Inhalt des Feldes. Genau zu diesem Zeitpunkt sollte man auf Fehler bei der Eingabe aufmerksam gemacht werden. Wird der User erst später auf unkorrekte Eingaben hingewiesen muss dieser im schlimmsten Fall erst wieder zum entsprechenden Feld scrollen und sich wieder mit den nötigen Daten beschäftigen. Daher sollte die primäre Validierung der Daten direkt nach der Eingabe erfolgen. Um auch bei deaktiviertem Javascript korrekte Eingaben zu erhalten muss eine sekundäre Überprüfung serverseitig geschehen.
Achtung: Bei Fehlern unbedingt sicherstellen, dass die Eingaben des Benutzers erhalten bleiben.

Zu ähnlichen Ergebnissen kommt auch Luke Wroblewski in seiner Testreihe. In diesen Tests wurde eine Steigerung der Conversionrate und der benötigten Zeit um ein Formular erfolgreich abzusenden belegt.

Bei meinen Recherchen zu diesem Beitrag wurde mir wieder einmal vor Augen geführt, dass diese Methode der Formularüberprüfung auch auf vielen großen Websites nicht eingesetzt wird. Das seltsame hierbei ist, dass viele Websites von Firmen deren Umsatz bzw. Geschäftsmodell sehr stark an den Formularen auf der Website hängen. Doch unverständlicher Weise scheinen genau diese Formulare stiefmütterlich behandelt zu werden. So war Fehlermeldungen erst nach dem Absenden des Buttons sichtbar und dann noch dazu optisch nicht hervorgehoben, die Felder mit fehlerhaften Eingaben wurden nicht gekennzeichnet und in einigen Fällen gingen sogar die Eingaben des vorigen Versuchs verloren. Wenn man sich jetzt überlegt, dass  beispielsweise jeder zwanzigste Besucher das Formular nicht erfolgreich absendet, kann man sich leicht vorstellen, dass sich kleine Optimierungen sehr schnell bezahlt machen können.

Die Kür

Mit einer Überprüfung in nahezu Echtzeit bei der Eingabe hat man schon viel erreicht. Aber es geht noch besser. Warum sollte man sich damit begnügen die Fehler möglichst rasch anzuzeigen? Viel schöner wäre es doch eine große Zahl an Fehlern schon im Vorfeld zu vermeiden. Dazu empfiehlt es sich bei Feldern die nicht ganz eindeutig sind einen kurzen Hilfetext einzublenden. Das kann beispielsweise in ähnlicher Form wie die Fehelrmeldungen gesche, farblich halt etwas dezenter. Wichtig ist hierbei allerdings, dass man nicht zuviele Hilfetexte anbietet. Daher empfehle ich entsprechende Hilfen erst  darzustellen wenn das Feld den focus erhält. So wird beim Click in das Textfeld eine erläuternde Info angezeigt. Nachdem der Benutzer zum nächsten Feld gesprungen ist wird der Hinweis wieder ausgeblendet.
Als i-Tüpfelchen bietet es sich dann noch an korrekt befüllte Felder mit einem Symbol zu kennzeichnen. Ein gutes Beispiel für diese Punkte bietet Yahoo (siehe Showcase).

Scripts zur Inline Form Validation

Um das Ganze umzusetzen gibt es einige Javascript Bibliotheken die einem das Leben erleichtern.
Ketchup Plugin – jQuery Formularvalidierung
Position Absolute Form Validation – jQuery Formvalidierung mit optionaler AJAX Unterstützung
Leigeber Form Validation – Javascript Formularvalidierung beim Submit
bassistance.de Validation – jQuery Formularvalidierung
jQuery Live Form Validation
LiveValidation – Formularvalidierung in 2 Versionen: Prototype und Standalone
Mootools Form Validation – Formularvalidierung mit Mootools
jVal Form Field Validation

Showcase

Schone Beispiele zur Gestaltung von Formularen und den entsprechenden Fehlerhinweisen.

Formularvalidierung Yahoo

Formularvalidierung bei Twitter

Formvalidation omgpop.com

Formularvalidierung brightkite.com

Formularvalildierung: Position Absolute Demo

jVal Formolarüberprüfung Demo

© Markus Kapferer für grafixx.at, 2010. | Permalink
Post tags: Conversion, Formulare, Konzeption & Usability

Navigation Neckermann.at

Es gibt ja schon seit längerem einen kleinen Trend dazu überdimensionale Overlay Navigationionen auf Websites einzubinden. Das will ich in diesem Beitrag kurz aufgreifen, da ich hierbei ein großes Potential sehe. Durch entsprechende Navigationselemente lassen sich sehr umfangreiche Menüstrukturen übersichtlich darstellen. Aber nicht nur die schiere Anzahl an Kategorien und Unterseiten kann zum ausschlaggebenden Element werden. Daher habe ich ein paar Beispiele herausgepickt und versuche die positiven Aspekte hierbei zu beleuchten.

Große Menge an Inhalten bändigen

Am öftesten sieht man mehrspaltige und sehr großflächige Menüs wohl bei Online Shops. So scheinen die umfangreichen Angebote der großen Universalversender ein optimaler Einsatzzweck zu sein. Daher hat wohl auch Neckermann.at oder Otto.de auf eine entsprechende Variante gesetzt.

Navigation Otto

Neckermann präsentiert die Unternavigation in einem optisch aufgeräumten und relativ übersichtlichen, zweispaltigem Layout.  Hierbei ist schön zu sehen, dass bewusst mit Freiräumen gearbeitet wird und die einzelnen Links durch Bereichsüberschriften kategorisiert werden. Das ist auch sehr wichtig, da ansonsten schnell die Übersichtlichkeit verloren gehen würde und man anstatt der Vereinfachung der Navigation genau das Gegenteil erreichen könnte.

Eine interessante Variante hatte auch Quelle eingesetzt. Um die Aufmerksamkeit der Benutzer auf die Navigation zu lenken wurde hier, nachdem öffnen der Navigation, die restliche Website aufgehellt. Das aber nur als Randbemerkung, da die eigentliche Navigation nichts mit dem Thema zu tun hatte.

Zusatzinformationen bieten

Layernavigation Mirapodo

Mirapodo, ein Onlinehändler der sich auf Schuhe spezialisiert hat, nützt die Navigation gleichzeitig um elegant eine kleine Begriffsdefinition zu integrieren. Sehr gelungen werden hier die Schuhformen durch die entsprechenden Icons erklärt. So wird auch für Laien in Sachen Schuhe schnell klar wo die Unterschiede zwischen Sandalen und Sandaletten oder zwischen Ballerinas, flachen Slippern und Halbschuhen liegen. Wie bei Neckermann wird auch hier vorbildlich mit Weißräumen gearbeitet und eine Farbnavigation eingesetzt um die Übersichtlichkeit zu gewährleisten und das Auge nicht zu überforden.

Image vermitteln & Promotion

Layernavigation Red Bull Salzburg

Ein Beispiel aus dem Sportbereich bietet die Website vom Fußballverein Red Bull Salzburg. Diese Website setzt schon mehrere Jahre auf diese Art der Navigation und zeigt, dass es nicht immer nur Seiten mit sehr komplexen Navigationsstrukturen sein müssen. Red Bull nützt einen breiten Layer und promoted einzelne Elemente bewusst durch Bilder. Aus meiner Sicht leidet die Übersichtlichkeit in diesem Beispiel zwar etwas und es ist nicht immer klar ob die Bilder clickbare Menüpunkte sind oder nicht. Aber der Ansatz an sich ist durchaus interessant und die Seite hat ja auch schon ein paar Jährchen auf dem Buckel.

Tipps zur Gestaltung

Ein großer Vorteil dieser Art der Navigation ist, dass der Benutzer sehr schnell die gesamte bzw. einen großen Teil der Navigationsstruktur des gewählten Bereiches sehen kann. Das birgt aber auch die Gefahr, dass das Ganze unübersichtlich wird und den Betrachter überfordert.

Aus diesem Grund ist es wichtig mit gestalterischen Mitteln bewusst dagegen vorzugehen. So sollte bewusst  mit Weißräumen gearbeitet werden. Abstände erhöhen die Übersichtlichkeit und helfen dem Betrachter einzelne Elemente besser erfassen zu können.

Ein weiteres Augenmerk sollte auf die Gliederung und Kategorisierung der einzelnen Elemente gelegt werden. Eine Unterteilung der Menüpunkte in Unterkategorien, Trennung durch grafische Stilmittel wie Linien oder der Einsatz von Aufzählungssymbolen erhöhen die Übersichtlichkeit deutlich.

Darüber hinaus sollte auch eine konsequente Typografie mit klar erkennbaren Unterschieden zwischen Überschriften, Navigationselementen und Untermenüpunkten eingesetzt werden. Auch hier gilt im Zweifelsfall “mehr ist mehr”. Die unterschiedlichen Formatierungen müssen klar und schnell warnehmbar sein. Daher also nicht Überschriften in 11px und Links in 10px darstellen, etc.

Showcase

Abschließend habe ich noch ein paar gelungene Beispiele zusammengetragen.

Navigation heine.de

Navigation sitzclub.de

Navigation Otto.de

Navigation Neckermann.at

Layernavigation Mirapodo

Navigation Red Bull Salzburg

Navigation whitehouse.gov

Navigation Audi

Navigation Mercedes-Benz

Navigation Puma

Navigation Reuters

Navigation tnttrailsand

Navigation Asos

Weiterführende Beiträge von anderen Websites:

• Praxistipps: Conversion Optimierung mit Mega Drop-downs
• Mega Drop-Down Navigation Menus Work Well
• Fly-Out-Navigationen: Segen oder Fluch?

© Markus Kapferer für grafixx.at, 2010. | Permalink
Post tags: Design, eCommerce, Konzeption, Konzeption & Usability, Navigation

Zu den wichtigsten Elementen einer Website gehört auf jeden Fall die Navigation, denn die besten Inhalte nützen nur wenig sofern diese nicht gefunden werden können. Ziel beim Navigationsdesign ist es eine intuitive, der Zielgruppe und der Inhalte entsprechende Menüführung zu entwickeln.

Navigationstiefe

Zu den ersten Überlegungen beim Erstellen einer Menüstruktur gehört die Anzahl der Navigationsebenen. Später wird ein Großteil der Programmierung auf dieser Struktur aufbauen und dementsprechend große Probleme könnte eine nachträgliche Änderung der Navigationstiefe aufwerfen. Es empfiehlt sich als diese Überlegungen sorgfältig durchzuführen und im Zweifelsfall sollte lieber eine Ebene mehr eingeplant werden. Dadurch ist die Website auch für zukünftige Erweiterungen gerüstet.

Die Navigationstiefe ist abhängig vom Umfang und dem hierarchischen Aufbau der Inhalte. Dementsprechend kann eine flache oder tiefe Navigationsstruktur gewählt werden. Beide Varianten haben Vor- aber auch Nachteile.

Eine flache Struktur ermöglicht ein schnelles erreichen der Inhalte, der Benutzer wird später alle Inhalte mit wenigen Clicks erreichen können. Bei hohem Informationsumfang bedeutet das allerdings, dass der User dementsprechend viele Auswahlmöglichkeiten vorfindet, da schon in den hohen Navigations-Ebenen viele Seiten zur Auswahl stehen.

Flache Navigationsstruktur

Eine tiefe Struktur wirkt genau entgegengesetzt. Hier werden mehr Schritte benötigt um auf die Inhalte zugreifen zu können. Im Ausgleich dazu wird der Benutzer allerdings nicht mehr mit so vielen Auswahlmöglichkeiten konfrontiert.

Tiefe Navigationsstruktur

Die Wahl der optimalen Navigationsstruktur kann nicht pauschal beantwortet werden. Es hängt von den Inhalten und der Zielgruppe ab. Bei Websites mit sehr umfangreichen Content wird oft eine stark taillierte Struktur verwendet. In dieser Struktur werden in der obersten Navigationsebene sehr wenige Auswahlmöglichkeiten geboten. Mit zunehmender Navigationstiefe erhöhen sich die Navigationsmöglichkeiten. Diese Strukturierung basiert unter anderem auf den Beobachtungen, dass die Nutzbarkeit mit steigendem Wissen und Interesse an dem Inhalt steigt. So bereitet es einem Hardwarespezialisten im Normalfall weniger Probleme aus 15 Hardwaregruppen die benötigte auszuwählen als Personen ohne spezielles Fach-Know-How. Aus diesem Grund wird zuerst eine sehr allgemeine Gruppierung vorgenommen. Mit zunehmender Tiefe und Spezifizierung des Inhaltes können mehr Auswahlmöglichkeiten zur Verfügung gestellt werden. Nachrichtenseiten oder Online Shoppingportale verwenden hingegen oft eine sehr breite, flache Struktur.

Beispiele:
Flache Navigationsarchitekturen werden gerne von Nachrichtenportalen verwendet. Da hier sehr viele wiederkehrende Besucher möglichst schnell zum gewünschten Thema gelangen wollen. So nützt auch derStandard eine entsprchend flache Hierarchie in der alle Hauptthemen in der obersten Navigationsebene auswählbar sind. Darunter gibt es nur mehr eine Navigationsebene um das Thema näher einzuschränken.

Navigation derstandard.at

Auf opel.de findet man das Gegenbeispiel zu den klassischen Nachrichtenseiten. Hier wurde eine sehr tiefe Navigationsstruktur, die Ihren Ausgangspunkt in 5 Hauptmenüpunkten hat verwendet.

Navigation opel.de

Fortsetzung: Navigationsmetaphern: Menüpunkte visualisieren

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Konzeption, Konzeption & Usability, Metapher, Navigation

Formulare stellen meistens eine große Hemmschwelle dar. Fast immer sind auch bei Formularen die höchsten Abbruchraten zu verzeichnen. Um dem entgegenzuwirken sollten Formulare zumindest schön Gestaltet sein, einwandfrei funktionieren und intuitiv bedienbar sein.

Das Thema mit der einwandfreien Funktion sollte natürlich selbstverständlich sein und viel mehr gibt es hierzu nicht zu sagen. Außer testen, testen, testen. Damit meine ich testen in verschiedenen Browsern, testen unterschiedlicher Benutzer und testen auf verschiedenen Endgeräten.

Gestaltung und intuitive Bedienung liegen dagegen oft nahe beieinander und überschneiden sich zum Teil. Bei der Gestaltung sollte ein guter Mittelweg zwischen “altmodisch” anmutenden Standardformularfeldern und “durch Styles so veränderten Feldern, dass man diese nicht mehr als Eingabefelder erkennen kann”, gefunden werden. Das heißt: Submit Buttons sollten immer als Buttons erkennbar bleiben, je nach Design und Zielgruppe kann das jetzt etwas konservativer oder auch modernern ausfallen. Besonders wichtig ist auch, dass Pflichtfelder eindeutig als solche gekennzeichnet werden. Dadurch können einige Besucher die nicht bereit sind sämtliche Informationen anzugeben, doch  noch zur Angabe der Pflichtfelder ermuntert werden.

Mehrseitige Formulare
Lange Formulare sollten auf jeden Fall vermieden werden. Falls  viele Informationen abgefragt werden müssen, sollten diese in kleinere appetitliche Happen aufgeteilt werden. Daher sollte sich das Formular über mehrere Seiten erstrecken. Hierbei ist wichtig, dass an jeder Stelle ersichtlich ist, wie viele Seiten noch ausgefüllt werden müssen. Also die klassische Funktion sie befinden sich in Schritt 2 von 5, wie man sie von den klassischen Kaufprozessen von Onlineshops kennt. Zusätzlich muss auch die Funktion des Seiten wechseln berücksichtigt werden. Will also der Benutzer von Schritt 3 auf Schritt 2 wechseln, muss dieses möglich sein. Selbstverständlich muss ich hier nicht erwähnen, dass die zuvor angegebenen Daten noch vorhanden sein müssen. ;-)

Hilfetexte anbieten
Werden komplexere Informationen abgefrabgt sollten Hilfetexte angeboten werden. Hier hat es sich eingebürgert ein kleines Hilfesymbol neben dem Formularfeld zu implementieren. Bei Mouseover wird dann ein entsprechender Hilfetext eingeblendet. Solche kleinen Helferlein steigern neben den Konvertions auch die Datenqualität und sollten daher unbedingt implementiert werden. Nebenbei wirkt es auch sehr seriös und steigert das Vertrauen das der Benutzer in eine Website hat.

Google Adwords Hilfe

Formularüberprüfung in Echtzeit

Sehr schön finde ich persönlich eine Überprüfung der Formularinhlate in Echtzeit. So, dass z.B. direkt nach der Eingabe das entsprechende Feld rot eingerahmt wird, wenn eine fehlerhafte Eingabe vorliegt. Zusätzlich muss natürlich auch noch die Ursache für den Fehler nebenbei erklärt werden. Oder ein weiteres Beispiel ist ein Counter der die aktuell verfügbaren Zeichen anzeigt.

Sehr schön wurde das unter anderem bei webnews.de realisiert. Hier wird direkt nach der Eingabe des Captcha Codes eine Meldung “Sie haben den korrekten Code eingegeben” eingeblendet. Dadurch entfällt das oftmals lästige rätseln ob denn das jetzt ein I oder ein l ist. Einfach ausprobieren und man weiß schon vor dem Absenden ob es richtig war oder nicht.

Captcha Feld

Allerdings wurde hier auf eine Barrierefreie Version verzichtet. Je nach Zielgruppe oder, für öffentliche Organisationen Verpflichtung, muss auch noch eine Barrierefreie Variante angeboten werden. Auf vielen Seiten wird so etwas mit einem Link “Lassen Sie sich den Code vorlesen” realisiert. Aber das erwähne ich hier nur der Vollständigkeit wegen.

Zusammenfassende Tipps zur Formulargestaltung:

• Bei Click auf die Bezeichnung eines Formularfeldes sollte der Fokus direkt auf das entsprechende Feld gelegt werden.
• Sinnvollen Tabindex festlegen: Überprüfen ob beim Betäigen der Tab Taste die Felder in der korrekten Reihenfolge aktiviert werden.
• Submit Button: Nach dem Absenden Button deaktivieren um dopplte Versendungen zu verhindern.
• Fehlermeldungen sollten aussagekräftig sein
• Lange Formulare sollten in mehrere Schritte unterteilt werden.
• Wird ein Fehler erst auf der Bestätigungsseite bemerkt, sollte der Benutzer mit einer eindeutigen Fehlermeldung zum ausgefüllten Formular zurückgeleitet werden. Es kommt immer wieder vor, dass in solchen Feldern sämtliche Eingaben des Benutzers gelöscht werden. Genau das muss verhindert werden.
• Bei Komplexen Informationen sollten Hilfetexte angeboten werden.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Captcha, Conversions, Formulare, Gestaltung, Konzeption & Usability, Tabindex, Validierung

Diesmal geht’s um das alte Thema: Einerseits soll eine Website modern, schlicht und vorallem übersichtlich wirken, Andererseits aber müssen aus den diversesten Gründen unzählige Inhalte direkt auf der Startseite platziert werden. Nachfolgend werde ich ein paar Möglichkeiten um platzsparend, übersichtlich und verständlich relativ viele Inhalte zu transportieren.

Klein wird ganz Groß
Ein ähnlicher Ansatz ist es kleine Elemente bei Mouseover oder Click zu vergrößern. Das bietet sich besonders bei Landkarten die schon auf der Startseite platziert werden sollen an. Eine Karte wird klein auf der Website platziert. Auf dieser kleinen Karte kann man schon grob erkennen wo man sich befindet.So etwas ist besonders bei Tourismusregionen sehr beliebt. Schließlich sollen auch Gäste die, das Urlaubsgebiet nicht so genau kennen wissen wo der entsprechende Ort liegt. Sobald man mit der Maus über die Karte fährt wird die Map vergrößert und über dem Content der Website dargestellt. Jetzt ist es möglich mehr Details zu zeigen und Schnelleinstiege zu Sehenswürdigkeiten, Livecams, etc. anzubieten.

Sehr schön hat das die Tourismusorganisation von Montenegro gelöst:

Montenegro: geografische Navigation

Slideshows und Teaser
Slideshows bzw. rotierende Teaserbilder werden schon sehr oft eingesetzt. Vorallem in Online Shops ist eine solche Art der Produkt- bzw. Kampagnenpräsentation besonders beliebt. Durchdas animierte Wechseln der Bilder kann die Fläche mehrfach genützt und entsprechend mehr Informationen transportiert werden. Hierbei ist allerdings zu beachten, dass man es mit der Animation nicht übertreibt und dem Benutzer alternativ auch eine Möglichkeit zum direkten Aufruf eines Teasers gibt. Nichts ist nerviger als wenn man sich einen Teaser ansehen will aber erst warten muss bis 5 andere “durch gelaufen” sind.

Beispiel:
L.A. Daily News
Grafisch kann man das zwar sicher schöner lösen, aber die Funktionsweise wir hier sehr deutlich.

L.A. Daily News Teaser

Zufallseffekt
Eine weitere Möglichkeit ist immer per Zufall ein Element aus einem Pool von mehreren darzustellen. Das Kann ein Produkt in einem Online Shop, ein Teil des Wellnessbereichs eines Hotels oder ein simpler Werbebanner sein. Diese Möglichkeit hat den positiven Effekt, dass der Benutzer das Gefühl hat, dass sich auf der Website etwas tut und sich so auch eine eher spärliche Datenwartung etwas kaschieren lässt. Allerdings sollte beachtet werden, dass man dadurch den Benutzer auch verwirren kann. So kann es durchaus passieren, dass ein Benutzer ein schönes Produkt in einem Onlineshop entdeckt und am Abend will dieser das Produkt mit seiner Familie noch einmal begutachten und bestellen. Nur Blöd wenn dieses Produkt per Zufall angezeigt wurde und sich für den Benutzer dann nicht mehr über die für ihn gewohnte Position finden lässt. Also ihr seht auf was ich hinaus will … falls mit zufälligen Darstellungen gearbeitet wird sollte man auch einen Link bzw. eine Auflistung aller möglichen Flächen anbieten, so dass das Wiederfinden etwas leichter fällt.

Inhalte erst bei Bedarf anzeigen
Oft ist es garnicht nötig sämtliche Inhalte sofort anzuzeigen. Mittels Javascript / Ajax gibt es inzwischen schon viele Möglichkeiten um sehr schön Daten nachzuladen bzw. erst bei Bedarf anzuzeigen. Auch wenn es schon gelerntem Nutzerverhalten etwas Widerspricht ist das eine schöne Möglichkeit um elegant Platz zu sparen. Allerdings können unerfahrene Benutzer durch solche proprietären Nutzungsmöglichkeiten durchaus überfordert werden. Daher nicht unbedingt für alle Zielgruppen geeignet bzw. muss entsprechend mehr Aufwand in Usabilitytests gesteckt werden.

So nützt GMX beispielsweise solche Möglichkeiten um noch mehr Content auf der Startseite unterzubringen. Auf der Startseite wird mit “Tabbed Boxes” gearbeitet über die dort angebotenen Karteikartenreiter kann schnell auf das gewünschte Themengebiet geschaltet werden. Zusätzlich werden bei der Box “Im Blickpunkt” die News erst beim Mouse Over in einer größeren Variante dargestellt.

Platz sparen bei Gmx.de

Fazit:
Überladene Websites wirken weder ästethisch noch können diese besonders gut Bedient werden, da Benutzer oft von der Informationsflut  überfordert werden. Falls man aber keine andere Wahl hat und viele Informationen auf kleinem Raum unterbringen muss macht es durchaus Sinn sich mit einer der gezeigten Konzepte zu helfen.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Ajax, Content, Konzeption, Konzeption & Usability

Es hat sich in den letzten Jahren ja schon herumgesprochen, dass man Benutzern zeigen soll wo sie sich befinden und sich so ein User einfach innerhalb einer Website orientieren kann. Doch so einfach das klingt, so oft wird dieses Gebot missachtet bzw. gibt es hier einige Feinheiten die sich doch noch nicht überall herumgesprochen haben.

Aktiven Menüpunkt selektieren
Zum Standard gehört es inzwischen aktive Menüpunkte zu selektieren. Hierbei gilt diese Selektion optisch deutlich erkennbar zu gestalten. Der Unterschied zwischen selektieren undnicht selektierten Navigationselementen sollte sofort auf einen Blick erkennbar sein. Darüber hinaus sollte noch beachtet werden, dass in allen Navigationslevels mit Hervorhebungen gearbeitet wird. Immer wieder sieht man Websites in denen der Hauptmenüpunkt schön selektiert wird, aber ab der zweiten oder dritten Ebene bricht das optische Chaos aus.

Breadcrumb Navigation integrieren
Je komplexer und tiefer die Navigationsstruktur einer Website aufgebaut ist, desto wichtiger ist eine Breadcrumb Navigation. Dadurch kann man sich einige Probleme vom Hals schaffen und hat ein globalen Bezugspunkt für den Benutzer geschaffen. Allerdings sollte eine Breadcrumb nie die einzige Navigationsmöglichkeit darstellen. Aus meiner Sicht dienen die “Brotkrumen” zur schnellen Orientierung und im Notfall können überforderte User diese auch zum Navigieren missbrauchen.

Jeder Seite ihren Menüpunkt
Jede Seite sollte einem Menüpunkt zugeordnet werden. Besonders auf der Startseite sieht man oft Unterpunkte die in der Navigation nirgends abgebildet werden. Dadurch ergeben sich Seiten die sich mehr oder weniger im “Luftleeren” Raum befinden. Klassische Beispiele hierfür bieten beispielsweise Seiten die auf der Startseite über einen Banner verlinkt, aber dann keinem Menüpunkt zugeordnet werden. Der User clickt auf entsprechenden Banner und hat anschließend keinen Anhaltspunkt wo er sich befindet. Gleichzeitig stellt die “Home” Seite nur eine Seite dar und sollte nicht unzählige Unterseiten enthalten.

Zurückbutton nicht vergessen!
Ein Klassiker: die Website sollte ohne Verwendung des “Zurück”-Buttons im Browser funktionieren. Daher unbedingt Zurück-Buttons an den richtigen Stellen implementieren. Mit richtigen Stellen meine ich, dass der Button nur da aufscheinen soll wo man ihn benötigt. So ist ein Zurück Link auf der Startseite ziemlich sinnlos. Erst auf Detailseiten die über einen “mehr lesen” Link und nicht über das Menü erreichbar sind macht´s aus meiner Sicht Sinn.

Integrierte Sitemaps
Eine weitere Möglichkeit dem Benutzer eine schöne Übersicht über die Seitenstruktur zu geben bieten integrierte Sitemaps. Damit meine ich diese global, im Footer integrierten Sitemaps die man in den letzten Jahren immer öfters sieht. Ehrlich gesagt hab ich keine Ahnung wie man die Dinger offiziell nennt, aber ichfinde diese ziemlich praktisch und ganz nebenbei lassen sich diese Sitemaps auch gut zu SEO Zwecken nutzen.

Fazit:
Das waren ein paar Tipps um den Benutzer besser durch die Website zu leiten und auch weniger internetafine User ohne Frust durch die Website zu führen. Natürlich wird das Ganze mit zunehmender Komplexität und Navigationstiefe immer schwieriger und besonders knifflig wird es wenn nachträgich Navigationslevels in bestehende Websites eingebaut werden sollen. Daher lieber zu Beginn eines Projektes schon eine Level mehr einkalkulieren.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Konzeption, Konzeption & Usability, Navigation, Navigationsarchitektur

Der Gestaltung von Registrierungsseiten wird leider sehr oft viel zu wenig Aufmerksamkeit geschenkt. Oft kommt es vor, dass viel Arbeit in die Entwicklung des Designs einer Website gesteckt wird, dabei aber Unterseiten wie Registrieungsseiten leider vergessen werden. Genau in solchen Situationen geschieht es dann, dass entsprechende Seiten dann nach Schema 0815 vom Programmierer in das vorhandene grafische Raster gesteckt werden. Da gerade die Registirerungsprozesse zu den wichtigsten Seiten vieler Websites zählen – geht es doch schließlich um Neukundengewinnung – scheint das etwas unverständlich. Daher sollte man sich ganz bewusst Zeit nehmen und die entsprechende Seite in Konzept und Screendesign berücksichtigen.

In diesem Artikel definiere ich Registrierungsseiten als Informationsseiten, deren Aufgabe es ist den Besucher nötige Informationen zu liefern und zu überzeugen. Das eigentliche Registrierungsformular ist meist eine gesonderte Seite. Bei sehr kurzen Formularen, wie z.B.: Newsletterregistrierung kann es aber auch durchaus Sinn machen Beides auf einer Seite darzustellen.

Als kleinen Inspiration liste ich jetzt potentielle Elemente / Inhalte von Registrierungsseiten auf. Selbstverständlich sind nicht alle Elemente für jeden Zweck sinnvoll, je nachdem zu welchem Zweck die Registrierung dienen soll, werden teilweise verschiedene Punkte relevanter sein als Andere.

• Elevator pitch

Hierbei handelt es sich um einen möglichst kurze Zusammenfassung des Sinns der Website / Applikation, etc. für die man sich registrieren soll. Bei Flickr ist das beispielsweise “Zeigen Sie Ihre Fotos. Sehen Sie der Welt zu.”

• Allgemeine Beschreibung

Eine allgemeine Beschreibung des Produkts sollte möglichst bildhaft und leicht verständlich formuliert werden. Beschreibungen lassen sich in diesem Fall sehr gut mit Unterstützung von Icons vermitteln. Weiter unten habe ich ein Beispiel von Tripit aufgezeigt. Auf dieser Site wird das aus meiner Sicht vorbildlich umgesetzt.

• Auflistung der Leistungen

Auflistung der Leistungen und Funktionen die nach der Registierung zur Verfügung stehen, helfen den Benutzer zu Überzeugen sich zu registrieren.

• Auflistung des Nutzens für den Benutzer

hier gilt das selbe wie bei den Leistungen im Punkt darüber. Jedoch sollte hier der Nutzen den der Benutzer durch seine Registrierung hat klar hervorgehoben werde.

• Call to action

Mit einem grafisch prominenten Button wird es dem Benutzer möglichste einfach gemacht, zu, Registrierungsformular zu gelangen. Noch schöner finde ich es wenn eine kleine Version des Formulars direkt auf der Registrierungsseite integriert wird. So werden zum Beispiel die Felder Benutzername und Email Adresse direkt abgefragt. Nach Ausfüllen dieser Daten kann der User dann auf ein ausführliches Formular mit den restlichen Feldern geleitet werden. Diese Vorgangsweise reduziert zum Einen die Hemmschwelle mit dem Registrierungsprozess zu beginnen, zum Anderen können Formularabbrüche statistisch erfasst werden und per eMail zu einen späteren Zeitpunkt ein Reminder versendet werden. In diesem Fall sollte der Versand des eMails direkt im ersten Schritt per Checkbox akzeptiert werden.

• Testimonials/ Referenzen

Testimonials und/oder Referenzen zählen vorallem bei kommerziellen Leistungen schon zum Standard. Zufriedene Kunden vermitteln Vertrauen und wirkt sich sicherlich positiv aus.

• Tour / Screenshots

Virtuelle Produkttouren bieten sich bei Softwareprodukten an. Gerade in diesem Segment ist es oft schwierig für den Benutzer eine Vorstellung zu haben, was ihn erwartet. Dem kann mit Screenshots und virtuellen Touren sehr gut entgegengewirkt werden.

• Anzeige der notwendigen Schritte bis zum Abschluss

Nach dem Motto “In 3 Schritten zu Ihrer Website” können diese Schritte direkt auf der Registrierungsseite aufgelistet werden. Dadurch nimmt man dem Benutzer gleich am Anfang die Angst vor endlosen Formularen und komplizierter Handhabung.

Beispiele:

Flickr Registrierungsseite

Tripit

Linkedin Registrierungsseite

Optimierungstipps zur Formularseite habe ich bereits in einem früheren Beitrag zusammengefasst. Dieser ist hier abrufbar: Conversions steigern durch bessere Formulare.

Keine änlichen Beiträge.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Conversion, Formulare, Konzeption & Usability, Optimierung, Registierung