Gerade eben bin ich wieder komplett darauf reingefallen. Beim Reinstecken einer Getränkedose kam die Meldung, dass der Barcode nicht zum Sortiment des Marktes gehört. Vorne an der Kasse (nach langem Anstehen) erfahre ich dann, dass ich den anderen Automaten hätte nehmen müssen. (Auf die Idee bin ich trotz meiner Erfahrungen mit den Automaten nicht gekommen, die Fehlermeldung hat mich davon abgehalten). Also wieder zurück, das Ding rein und wieder anstellen.

Anschließend habe ich, wie jedes mal, wenn mir so etwas passiert, an der Kasse den Vorschlag gemacht, man könne doch einfach an die Automaten dranschreiben, was reinkommt. Und mit schöner Regelmäßigkeit erhalte ich Antworten der folgenden Art:

“Ich erkläre es Ihnen jetzt, und beim nächsten Mal wissen Sie es dann.”

“Wenn sie richtig lesen, dann können Sie sehen, dass auf den Automaten drauf steht, was reinkommt.” (Wo, das hat mir noch keiner gezeigt.)

“Ja, könnte man machen.”

Nun könnte man ja denken: Ok, man probiert einfach durch, welche Flaschen wo passen. Nur macht das besonders viel Spaß, wenn an beiden Automaten lange Schlangen stehen mit Leuten mit blauen Ikea-Taschen voller Flaschen. Oder wenn der Automat die Flasche nicht auf Anhieb erkennt. Wenn man dann beide Automaten durch hat, probiert man es am ersten Automat wieder. Oder man geht zur Kasse und wird mit launigem Unterton zurück zum Automaten geschickt.

Ich gehe dann jedes Mal furchtbar schlecht gelaunt aus diesem Markt raus. Und in der Regel dann auch nicht mehr dort hin zum Einkaufen. Aber hin und wieder ist es doch ganz praktisch, wenn man die Flaschen nicht erst ins Auto packen muss um sie in einem anderen Markt zu schippern.

Was lernen wir aus diesem Offline-Usability-Lehrstück: (Dranschreiben was reinkommt) Die Funktion selbsterklärend gestalten oder leicht und verständlich erklären – das vermeidet Fehler. Und wenn ein Fehler dennoch auftaucht, verständliche und hilfreiche Fehlermeldungen ausgeben.

PS: Bin ich Job-geschädigt, weil ich an jedem Usability-Fauxpas hängen bleibe oder ist das noch nachvollziehbar? ;)

——————————————
NACHTRAG 23.07.2010

Gestern habe ich beim HIT in Kastel den gleichen Automaten entdeckt, an dem ein Aufkleber klebt, auf dem man sieht, welche Flaschen er annimmt! Genau so soll es sein! (Naja, fast: Warum gibt’s den Aufkleber doppelt? Warum ist der rechte Teil etwas abgesetzt? Handelt es sich bei den Mehrwegflaschen nur um Plastik- oder auch um Glasflaschen?) Aber nichts desto trotz: Es gibt nur einen Automaten und trotzdem steht dran, was man reintun darf! Da könnte sich der REWE mal ordentlich was von abschneiden!

Seit Wochen warte ich auf das HTC Desire – jetzt ist es endlich auch in Deutschland verfügbar und ich wollte direkt zuschlagen. Nicht bei Amazon, sondern bei T-Mobile, denn da ist es 30 Euro günstiger. Ab in den Warenkorb … und los ging es mit dem Ärger:

• Es gibt keine alternative Versandadresse! Wo gibt’s denn sowas? Anscheinend nur noch bei T-Mobile, denn eine zusätzliche Adresse zur Rechnungsadresse ist doch schon seit Jahren Standard!
• Es gibt als Zahlungsmöglichkeiten nur Kreditkarte und Nachnahme. Kein Paypal? Nix sonstiges? Oder kriege ich die nicht angezeit, weil ich in einer komischen Straße wohne? Aber dann hätte ich auch keine Kreditkarte zur Auswahl, oder?
• Nach Eingabe der Kreditkartendaten wird nach einem Mastercard Securecode gefragt. Hm, peinlich … aber davon hatte ich bis dato noch nie gehört. Ich habe dann auch nicht herausfinden können, wie man an solch einen Code herankommt. Insbesondere auf dieser Seite hier von T-Mobile im Checkout gab es keinen Link zur Registrierung.

Meine Anfrage bei T-Mobile brachte folgende Antwort:

Der dreistellige Code steht auf der Rückseite Ihrer Kreditkarte.
Mit freundlichen Grüßen
Ihr Kundenservice
Telekom Deutschland GmbH

Liebe Telekom, bitte informiere doch deinen Kundenservice mal über den Mastercard Securecode! Danke.

Weiteres Gejammere auf Twitter und Twitpic brachte dann den Auslöser meines Dilemmas zum Vorschein: Das Formular im T-Mobile-Checkout ist die Registrierung für den Mastercard Securecode! Ich dachte, das wären die zusätzlichen Fragen, die man beantworten muss, wenn man bereits registriert ist! Bin nur ich so doof oder ist das schlecht gemacht? Da fehlt doch definitiv der Hinweis, dass man sich an dieser Stelle registriert!

Nochmal: Man soll sich also innerhalb der T-Mobile-Website für einen zusätzlichen Sicherheitsdienst von Mastercard registrieren? Ich soll dort nach den Kreditkartendaten auch noch meine Kontonummer angeben? Und mir auch dort dann noch den Sicherheitscode ausdenken? Nein, liebe Mastercard, und nein liebe Telekom, das erscheint mir alles andere als sicher.

Will man mit einer VISA-Card bei T-Mobile bezahlen, wird man aus dem Checkout zur Kartenausgebenden Bank weitergeleitet, kann sich dort für Verified by Visacard registrieren und dann problemlos weiter einkaufen. So stelle ich mir das auch vor, so würde ich das auch machen! Aber nicht bei T-Mobile selbst!

Werde das HTC Desire dann wohl doch bei Amazon bestellen. Die von T-Mobile sollen ja eh gebrandet sein. :(

Und wer, so wie ich, noch nicht wusste, was dieser komische Mastercard Securecode ist, kann sich hier bei Kartensicherheit.de darüber informieren!

Wie sieht’s aus? Es wirkt sehr viel aufgeräumter:
Alle Infos und Funktionen, die direkt zum Video gehören, werden nun gesammelt darunter angezeigt. Alle Funktionen erscheinen erst On-Click. Rechts daneben werden nur noch weitere Videovorschläge angezeigt.

_______________________________

Zum Vergleich nochmal das alte Youtube:

Neu scheinen auch die ausführlichen Statistiken zu dem Video zu sein, die direkt darunter angezeigt werden. (Zumindest kannte ich diese Darstellung bisher nicht.)

Nachtrag:

Mittlerweile bin ich besser informiert ;-) aber trotzdem nicht wirklich schlauer :( … im Dezember hat Youtube in Testtube “Feather” als Lite-Version freigeschaltet. Damals war es auch als tatsächliche Lite-Version vorgestellt worden, so wie es auch von Facebook eine alternative Lite-Version gibt. Im Vergleich zur im Dezember vorgestellten Lite beinhaltet die jetzt im Chrome aktuell sichtbare Version jedoch alle Funktionen der normalen Website. Was ist denn dann nun aus der “alten” Lite-Version geworden?

Mit Jimdo kann man sich wunderbar einfach eine Website erstellen – und zwar komplett ohne Fachkenntnisse, weil das Baukastenprinzip so easy und intuitiv aufgebaut ist, dass wirklich jeder damit zurecht kommen muss. Nun mag man meinen, dass Websites in Zeiten nach Web 2.0 doch längst out und durch Blogs oder Facebook-Fanpages ersetzt sein müssten. Aber eine ordentliche Website, auf der man alle Freiheiten hat, ist als Basis doch oft unerlässlich. Zum Beispiel für Musikbands, für Fanclubs, für Ärzte oder Heilpraktiker, fürs Hobby oder wen auch immer. Und hier liegt auch noch zusätzlich eine Besonderheit von Jimdo, denn man kann alle Aktivitäten und Inhalte von den typischen Web 2.0-Plattformen wie Flickr, Twitter etc. ganz einfach in die Jimdo-Website reinlaufen lassen. Ein Blog ist auch integriert und nun seit ein paar Tagen auch noch ein eigener Shop! Ein Shop für Jedermann sozusagen.

Das Ganze funktioniert nach dem Freemium-Prinzip: Die einfache Website mit ein klein wenig Jimdo-Werbung ist kostenlos, ohne die Werbung und mit eigener URL kostet es dann ein bisschen was. Bestimmte Shop-Funktionen haben noch mal ein eigenes Preismodell und ein klein wenig Umsatzprovision wird ab Sommer auch anfallen.

Eine Website erstellen

Man loggt sich auf seiner Jimdo-Seite über einen Link unten rechts ein und sieht dann während der gesamten Bastel-Phase die Website im Hintergrund. Oben drauf liegt am rechten Bildschirmrand ein Layer mit den Werkzeugen.

Hier kann man aus einer großen Menge Designs und Raster wählen, Farben und Schriften anpassen, den Header selbst gestalten und auch sonst noch wirklich alles von Suchmaschinen-Infos bis zum Favicon einstellen. Was ich besonders mag sind die Feinheiten, wie die Optionen hier angeboten werden: In den Designs, die zur Auswahl stehen, sind die vorher gewählten Farben und der Header bereits zu sehen! Über CSS kann man aber auch sonst noch beliebig am Design rumschrauben.

Eine ausführliche Statistik gibt’s auch und man kann sogar auch Betreiber von anderen Jimdo-Websites als Freunde hinzufügen und sich auch Nachrichten schreiben.

Um jetzt eine Seite zu befüllen, klickt man auf der Website auf ein Inhaltsmodul, dann erscheint ein Layer mit einem + für ein neues Inhaltsmodul, eine Tonne zum Löschen des Moduls und zwei Pfeile zum verschieben. So kann man an jede Stelle neue Inhalte einfügen. Zur Verfügung stehen eine ganze Menge vorgefertigter Module wie Text mit Bild, Tabelle, Bildergalerie, Formular, Youtube-Videos, Delicious-Links, Widgets, RSS-Feeds, Google-Maps, Musikplayer und vieles mehr.

Aber jetzt mal zum eigentlichen Thema:

Einen Shop erstellen

Auf den ersten Blick ein wenig ungewohnt, dann aber doch Jimdo-typisch, funktioniert das Einrichten des Shops. Man fügt einfach das Inhaltsmodul “Shop-Produkt” in eine Seite und schwups hat man quasi eine Produktdetailseite, wie man sie aus den klassischen Online-Shops kennt. Produktname, Bild, Beschreibung, Preis und Produktvarianten (Farben oder Größen) stellt man hier direkt ein.

Anschließend kann man dann auf die gleiche Art und Weise eine Produktübersicht erstellen: Einfach das Modul “Produktübersicht” in eine Seite einfügen, alle angelegten Produkte werden dann automatisch angezeigt. Eine Einschränkung kann man über Tags einrichten. Hat man die Produkte entsprechend getaggt, kann man hiermit also diverse Kategorien einrichten und auf verschiedene Seiten verteilen.

Fertig eingerichtet sieht das dann in meinem Fall so aus: paulinepauline.jimdo.com

Links die Produktliste als Listenansicht (auch eine Galeriedarstellung ist möglich) und rechts die Detailseite, auf der ich darunter eine Kommentarfunktion eingebaut habe. Mehrere Bilder kann man auch hochladen, den Superzoom gibt’s automatisch dazu.

Auf der Startseite habe ich einen Teaser zu einem Produkt eingebaut. Diesen Teaser habe ich als “Produktübersicht” angelegt, die nur Produkte mit dem Tag “Teaser” anzeigt. So könnte man z.B. sehr einfach das auf der Startseite angezeigt Produkt ändern, indem man immer dem gewünschten Produkt das Tag “Teaser” verpasst.

Um aus dieser Produktdarstellung einen funktionalen Shop zu machen, benötigt es aber noch einen Warenkorb, einen Checkout und natürlich auch Zahlungsmöglichkeiten und Versandoptionen. Und hier hat Jimdo super Arbeit geleistet! Warenkorb und Checkout sind einwandfrei aufgebaut und mit allen Standardfunktionen ausgestattet, die ein Shop heutzutage bieten muss. Als Zahlungsmöglichkeiten gibt’s Paypal für die kostenlos-Accounts und Vorauszahlung, Bar, auf Rechnung, bei Abholung oder Lieferung für die kostenpflichtigen Accounts.

Hat man ein Produkt in den Warenkorb gelegt, erscheint eine kleine Warenkorb-Box am linken Bildschirm. Die kleine Box sieht man hier im Bild links, daneben die eigentliche Warenkorb-Seite.

Weiterhin kann der Shopbetreiber Versandoptionen für Standard und International einstellen, es gibt eine Versandkosten-Obergrenze, eine Bestellwertgrenze für kostenfreien Versand sowie individuelle Kosten für einzelne Artikel. Man kann wählen, ob man die Preise mit oder ohne Mehrwertsteuer ausweist. Und sogar die Texte für die Bestellbestätigung und automatisch generierte E-Mails sind bereits vorgefertigt und können angepasst werden. Auf eventuell benötigte AGB und Hinweise zu Datenschutz und Widerrufsrecht wird hingewiesen, Texthilfen gibt’s hier aber leider nicht. (man muss ja auch mal was kritisieren;)

Dazu kommt, dass bei einer Bestellung nicht einfach nur eine E-Mail an den Shopbetreiber generiert wird, wie das selbst bei so einigen professionell betriebenen Shops der Fall ist, nein, es gibt auch noch eine Bestellverwaltung, in der alle Bestellungen aufgelistet sind und als bezahlt, verschickt etc. markiert werden können.

Wenn man sich ein bisschen Zeit nimmt und sich ein paar schlaue Gedanken macht, kann man aus den Bordmitteln einen wunderhübschen Shop zusammen bauen, ohne auch nur ein bisschen Programmieren zu müssen. Was dabei rauskommen kann, sieht man beispielsweise hier: bobsmade.com oder patradesign.com oder pictoo.info.

Also … ich bin total begeistert und überlege schon seit Tagen, was ich nun tatsächlich verkaufen könnte! :-)

Ich starte wie immer auf post.de und klicke auf “Online frankieren”, dann landet man (neuerdings?) auf https://internetmarke.deutschepost.de. Wie man sieht, befindet man sich direkt im Warenkorb, was mich ein wenig verwirrt. Schließlich habe ich doch noch gar kein Porto gewählt. Und die Briefmarken, die schon im Warenkorb liegen, erst recht nicht. Komisch.

Nach einigem Suchen und motzigen Twittern finde ich ganz unten den Button “Paket oder Päckchen”. Ich wähle also mein Zielland “Frankreich” und “Päckchen”. Kostet 8,60 €. Seltsamer Weise erscheint aber ein Gesamtpreis von 14,10 €! Ahso, die ungewünschten Briefmarken sind ja noch im Warenkorb! Doof.

Nachdem die Briefmarken also raus sind, kann man mit dem Eingeben der Adressen beginnen. Nun ist in meinem Beispiel der Empfänger Private Outlet nicht sparsam, was die Adresse angeht.

Folgendes muss in das Formular reingequetscht werden:

PRIVATE OUTLET
Service Retours
Bestellnummer: POC00000000000
c/o L4 LOGISTICS
Zl de l’Orme Pomponne
44 Avenue Paul Langevin
91130 Ris Orange – FRANCE

Und so sieht das bereitstehende Formular aus:

Wie soll das bitte schön passen? Sollte die Post da nicht noch weitere optionale Felder anbieten? Und wie sieht’s aus mit Länderspezialitäten? Die Hausnummer in Frankreich wird z.B. immer vor die Straße gestellt. Ich habe zwar hier bereits Frankreich als Zielland angegeben, aber das Formular zeigt die Hausnummer immer noch hinter der Straße an.

Wenn ich alles reinquetsche zeigt mir die Vorschau, dass ausgerechnet meine Bestellnummer dran glauben muss und nicht mehr angezeigt wird. Ich hatte sie in die erste Zeile hinter “Service Retours” geschrieben. Doof.

Gehen wir weiter zu Schritt 2: “Bezahlart auswählen”. Hier gibt es neuerdings einen Mindestzahlbetrag von 10 € bei Zahlung per PayPal oder GiroPay. Na super! Ich muss also bei der Post 1,40 € Guthaben parken, bis ich mal wieder was frankiere. Damit bin ich eigentlich nicht einverstanden.

Nächster Schritt: Porto ausdrucken. Klappt widererwarten, auch wenn das PDF, das sich öffnet, fett “MUSTER” über der Adresse stehen hat. Im Ausdruck ist alles richtig (bis auf die fehlende Bestellnummer).

Weiter unten auf der Seite gibt’s dann eine “Kurz-Registrierung”, welche diesen Namen aber nicht verdient. Unter “kurz” verstehe ich “E-Mail-Adresse” und “Passwort”. Hier aber wird die komplette Adresse verlangt. Wobei mir einfällt, dass ich ja bei der Angabe des Absenders bereits meine Adresse angegeben habe. Warum wird diese dann hier nicht vorausgefüllt?

Leider war dies nun immer noch nicht der finale Schritt, denn mein Wunschpasswort hat sich als nicht Post-kompatibel herausgestellt.

Hier frage ich mich zum Einen, warum Sonderzeichen verboten sind (schließlich werden Passwörter dadurch doch sicherer), und zum Anderen warum diese Info nicht vorher bereits angegeben wurde. Doof.

Danach hat mich eigentlich nur noch gestört, dass in der Bestätigungs-E-Mail weder Produkt noch Preis genannt wurden. Eine solche Quittung muss ich aber an Private Outlet senden, um die Portokosten zurückerstattet zu bekommen. Was also tun? Eine Mail an die Post schicken und nachfragen. Die Antwort:

Als registrierter Kunde erhalten Sie eine Rechnung über Ihre Käufe per Post zugesandt.

Das ist nicht deren Ernst, oder? Man frankiert ONLINE und erhält die Rechnung PER POST?

Nachträglich ist mir dann aufgefallen, dass sich ja immerhin auf der Seite “Porto ausdrucken” auch ein Lieferschein als PDF befindet. Den habe dann an Private Outlet gemailt.

Also mal ganz ehrlich: Wer von Euch hat so viel Geduld? Ich halte das Online frankieren für ein Top-Angebot der Post, aber ein klein wenig Optimierungsbedarf ist noch vorhanden, oder?

Letztens gab’s eine Alessi-Aktion in einem der Shopping-Clubs. Da mir schon lange keine Alessi-Sachen mehr über den Weg gelaufen sind, habe ich mich gefragt, ob Alessi immer noch so aussieht wie früher. Denn die Produkte, die ich in Erinnerung habe, haben den Style der 80er oder 90er. So kam ich also auf die Idee, mal auf Alessi.com nach den Produkten zu schauen.

Alessi
Ich habe also die Website Alessi.com aufgerufen und dabei folgendes vorgefunden:

Man sieht erstmal kaum Produkte, stattdessen ein durchlaufender Banner als Bühne und darunter Einstiege nach Environment, Typology, Color, Brand und Designer.

In Environment, Designer und Brands muss man noch zwei mal klicken, bis man endlich mal Produkte sieht. Allerdings nur winzig kleine Bildchen. Dazu gibt’s aber eine Art Filter, in dem man neben Typology noch Brands und Designer kombinieren kann. Das ist zwar praktisch, aber sehr frickelig gelöst.

Bei Colors erhält man 6 Bildchen, die sich bei Klick auf den Pfeilkreis langsam austauschen. Was zwar schick aussieht, aber auf Dauer langwierig und langweilig ist. Außerdem: kleine Bildchen.

Die generelle Produktliste zeigt kaum Bild, dafür um so mehr Text:

Und auch auf der Detailseite wird das Bild nicht groß genug. Eine Zoom-Funktion gibt es leider auch nicht:

Typology nutzt den gleichen Filter wie Environment, Designer und Brands, allerdings erweitert um Typology. Warum der Filter nicht überall gleich ist, ist mir nicht ganz klar geworden.

Ebenfalls verwirrend finde ich die Unterkategorien in Catalogue, die nämlich nicht den Einsteigen auf der Startseite entsprechen. Hier gibt’s noch zusätzlich Materials und Thematic paths.

Wer sich nicht selbst durchklicken will, kann sich auch diesen Screencast anschauen:

Fazit Alessi.com
Also alles in allem wirkt die Seite so, als hätte sich jemand sehr viel Gedanken um die Kategorisierung der Produkte gemacht, sich dann aber letztendlich in einem zu Viel an Navigation verloren. Es braucht viele Kicks, bis man mal Produkte sieht, und dann immer nur in kleinen Bildchen. Selbst auf Produktdetailseiten gibt es keinen Zoom.

.

Reisenthel
Nachdem ich also enttäuscht eine gefühlte Ewigkeit durch die Website von Alessi geklickt hatte, fiel mit Reisenthel.de ein. Die luftig fluffige Website mit den umherfliegenden Taschen. Ein wunderschönes Gegenbeispiel, wie man Produkte aus einer Kombination von “praktisch” und “unterhaltsam” präsentieren und zugänglich machen kann.

Die Seite startet mit einem einzigen großen Teaser, dadurch wirkt sie frei und nicht überladen. Irgendwie erfrischend, dass mal nicht alles mit Teasern zugepflastert ist. Der Klick auf “Produkte” zeigt erstmal alle Produkte! Zwar sind diese dann auch relativ klein, aber die Seite ist sehr eindrucksvoll!

Verschiedene Kategorien können über die Navigation ausgewählt werden (hier: Einkauf, sortiert nach Farbe):

Unten kann man auch nach Farbe wählen. Je weniger Produkte sich in der Auswahl befinden, desto größer werden sie dargestellt.

Aber das beste ist: Bei jedem Klick wandern die Produkte quer über die Seite zu ihrem neuen Platz! Damit könnte man einen halben Tag zubringen. ;)

Die Detailseite fokussiert auf das Produkt und reduziert die Funktionen der Website auf das Nötigste:

Die Navigation ist sehr schön reduziert. Oben rechts die Kategorien:

Und unten die Farben / Sortierungen.

Und auch von Reisenthel habe ich einen Screencast gemacht, allerdings ruckelts etwas. Die Produkte fliegen wohl zu schnell über die Seite:

Fazit Reisenthel
Das ist zwar alles mit Flash gemacht (und ich bin nicht grad der größte Flash-Fan), aber dieser spielerische Umgang mit den Produkten macht einfach wesentlich mehr Spaß als die Alessi-Seite. Und ist zudem noch sehr übersichtlich! Vor allem, da sich die Website auf die Produkte konzentriert und das Design der Website komplett im Hintergrund steht.

Alles in Allem …
… gefällt mir Reisenthel sehr viel besser, wobei man dazu sagen muss, dass Reisenthel weniger Produkte auf der Seite hat (gefühlt zumindest, wer wie viele Produkte hat, weiß ich nicht) und mit Flash gemacht ist.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Registrierung und Login
Formulare und Prozesse nutzerfreundlich und effektiv gestalten

Ein Registrierungsformular, eine Login-Box oben in der Ecke des Bildschirms und ein Link „Passwort vergessen“ – das sind die üblichen Elemente, die es braucht, damit sich ein Nutzer auf einer Website registrieren und auch einloggen kann. Diese Elemente und die dahinter liegenden Prozesse sind so „normal“ und bekannt, dass man sie all zu gerne einsetzt, ohne sich ausführlich Gedanken darüber zu machen, wie sie wirklich nutzerfreundlich und auch effektiv aufgebaut werden können. Registrierung und Login sind zu wichtige Knackpunkte, als dass man ihnen zu wenig Zeit widmet.

Was kann man tun, um die Registrierung und das Einloggen für den Nutzer so einfach und angenehm wie nur möglich zu gestalten und ihm im Anschluss Hilfestellung für die Nutzung der Seite zu geben? Der wichtigste Ansatzpunkt ist, sich in den Nutzer hineinzuversetzen und alle Eventualitäten, die auftreten können, durchzuspielen.

1. Die Registrierung

Warum überhaupt registrieren?
Für den Website-Anbieter sind die Vorteile meist eindeutig, für den Nutzer dafür umso weniger. Will man seine Nutzer dazu bringen, sich zu registrieren, müssen die Vorteile und Nutzungsmöglichkeiten klar und deutlich kommuniziert werden. Und zwar bereits bevor der Nutzer auf den Link „Registrieren“ klickt. Dabei kann es sich um eine knackige Auflistung der Vorteile oder Features ebenso handeln wie um einen Vorab-Einblick in einen geschlossenen Bereich.

Beispiel Flickr.com: Vier Nutzungsbeispiele, die jeweils auf eine Seite der Tour verlinken, die ausführlichere Informationen dazu bietet.

Wann zur Registrierung auffordern?
Wie fast überall gilt es auch hier, den richtigen Moment abzuwarten. Sicherlich kann man den Nutzer direkt bei Betreten der Website auffordern, sich zu registrieren. Aber dazu gehört eine Menge Überzeugungsarbeit. Wesentlich einfacher ist es, dem Besucher die Nutzung der Website auch ohne Registrierung zu ermöglichen, und ihn erst dann zur Registrierung aufzufordern, wenn diese bereits automatisch sinnvoll erscheint. Wenn er sich beispielsweise auf einer Immobilienseite ein Angebot merken möchte, oder in einem Online-Shop seine Adresse- und Zahlungsdaten speichern möchte, um sie bei der nächsten Bestellung wieder nutzen zu können.

Wie viele Daten sollte man abfragen?
Nicht allzu neugierig sein – wenn dem Nutzer nicht klar ist, wofür die Daten benötigt werden, wird er schnell misstrauisch und sich im schlimmsten Fall gar nicht registrieren. Statt das Registrierungsformular zu überfrachten, ist es wesentlich eleganter, weitere interessante Daten erst in einem nachgelagerten Schritt abzufragen. Eine kleine Incentivierung motiviert den Nutzer, mehr über sich preiszugeben.
Hochsicherheits-Passwörter aus Mehrfachkombinationen mit Sonderzeichen, Zahlen und Groß- oder Kleinbuchstaben sollten nur dann verlangt werden, wenn dies wirklich notwendig ist. Die meisten Nutzer verwenden in der Regel nur ein der zwei Passwörter und zu komplexe Varianten erhöhen die Gefahr, dass der Nutzer sich beim Login nicht mehr daran erinnern kann und es erst umständlich und zeitraubend anfordern muss.

Nach der Registrierung geht’s noch weiter!
Nach dem Absenden des Formulars ist die Registrierung rein formal abgeschlossen. Eine gute Nutzerführung geht aber noch weiter. Was kann man dem Nutzer nun bieten, damit es für ihn so komfortabel wie möglich wird, damit er seine neue Mitgliedschaft bzw. sein neues Nutzerkonto auch ausführlich nutzt?

• Hat er sich innerhalb eines bestimmten Prozesses registriert, muss er im Anschluss automatisch wieder zu der Stelle geleitet werden, an der er zur Registrierung rausgerissen wurde. Alle von ihm bereits gesammelten Daten, Produkte oder sonstige Angaben müssen noch vorhanden sein. Zusätzlich kann man ihm in seinem Konto bzw. seiner persönlichen Startseite vorübergehend ein paar Tipps zur Nutzung bieten.
• Hat er sich nicht prozessintegriert registriert, ist es hilfreich, anschließend ein paar Erläuterungen zur Website oder Vorschläge, wie er seine neue Mitgliedschaft noch vorteilhafter nutzen kann zu erhalten. Evtl. kann man ihn hier auch dazu bewegen, weitere Daten von sich preiszugeben.
• Meist erhält der Nutzer auch eine E-Mail, welche die Registrierung bestätigt. Diese Mail lässt sich hervorragend dafür nutzen, ihm die nächsten Schritte zu erläutern, welche er auf der Website unternehmen kann.

Beispiel Plurk.com: Mit 4 kleinen Schritten (zum durch- oder auch wegklicken) werden Funktionen und Aufbau der Website erläutert.

2. Der Login

Gestaltung und Platzierung der Loginfelder
Man kann voraussetzen, dass der Nutzer zwei Eingabefelder neben- oder untereinander direkt als Login-Möglichkeit erkennt. Dennoch ist es hilfreich, die Login-Felder grafisch vom Rest der Website ein wenig abzusetzen, insbesondere, wenn es auf der Seite noch weitere Eingabefelder gibt, beispielsweise zur Abfrage von Reiseverbindungen.
Eine Platzierung in Navigationsnähe hat den Vorteil, dass die Eingabefelder permanent zu sehen sind, und diese Stelle auch nach Login für die Anzeige von Nutzernamen, Statusmeldungen, Link zum Konto etc. genutzt werden kann.
Greift ein Nutzer von extern durch einen Link (z.B. aus einer E-Mail) auf eine Seite zu, für die er sich erst einloggen muss, sollte ihn eine speziell gestaltete Login-Landingpage empfangen und ihn nach dem Login ohne Umwege zur entsprechenden Seite führen. Das Abschreckendste, auf was er treffen kann, ist ein Hinweis, dass er auf die aufgerufene Seite nicht zugreifen darf – eine Standard-Fehlermeldung, wenn er nicht eingeloggt ist.

Zum ersten Mal eingeloggt
Direkt nach der Registrierung weiß der Nutzer in der Regel noch sehr wenig, was ihn erwartet. Er hat also andere Bedürfnisse als andere Nutzer, die sich bereits gut auskennen. Zu Beginn sollte man ihm Erläuterungen zu den wichtigsten Features bieten, oder Tipps und Vorschläge, was er als nächstes tun kann. So lernt er schneller die Funktionen der Website kennen und wird auch schneller zu einem wertvollen Community-Mitglied, bzw. liefert schneller verwertbare Daten.

Beispiel Twitter.com: Obwohl die Website einen nur sehr geringen Funktionsumfang bietet, erhält der Nutzer in der ersten Zeit der Nutzung ein paar Tipps, was er nun tun kann.
Viele interessante Beispiele bietet der Report „Patterns for Sign Up & Ramp Up“ von Adaptive Path.

Prozessintegriertes Einloggen
Bestimmte Prozesse, wie die Auswahl von Produkten oder die Suche von Reiseverbindungen können in den meisten Fällen auch ohne Login begonnen werden. Es reicht völlig aus, ähnlich wie bei der Registrierung, den Nutzer erst innerhalb des Prozesses zum Login aufzufordern, wenn Daten längerfristig gespeichert werden sollen oder auf bereits gespeicherte Daten zurückgegriffen werden muss. Aber auch hier ist es ganz wichtig, dass der Prozess an der Stelle weiter geführt wird, an der er für das Einloggen unterbrochen wurde und der Nutzer nicht wieder von vorne beginnen muss, weil beispielsweise die Verbindungsdaten für die Reise nicht zwischengespeichert wurden.

Fehler bei der Eingabe
War der Login-Versuch nicht erfolgreich, ist es für den Nutzer hilfreich, zu wissen, ob er den Benutzername falsch eingegeben hat und dieser nicht existiert, oder ihm beim Passwort ein Fehler unterlaufen ist. Es vereinfacht ihm die Suche nach der richtigen Kombination, falls er sich bei beiden Eingaben unsicher ist. Der einfache Hinweis, dass das Login nicht durchgeführt werden konnte, gibt zu viele Rätsel auf. Stellt er beim Login-Versuch fest, dass er doch nicht registriert ist, benötigt er an dieser Stelle auch einen Link zur Registrierung.

Zugangsdaten wiederherstellen
Um vergessene Passwörter wieder herzustellen gibt es die unterschiedlichsten Methoden. Die für den Nutzer sicherlich einfachste Variante ist die, dass er selbst wählen kann, ob er E-Mail-Adresse oder Benutzernamen eingibt und einen Link zu einer Seite erhält, auf der ein neues Passwort festlegen kann. Natürlich kann auch mal ein Benutzername vergessen werden. Daher macht es wenig Sinn, Benutzername und E-Mail-Adresse zusammen abzufragen.
Schwierig wird’s allerdings, wenn die verwendete E-Mail-Adresse nicht mehr existiert. Auch das muss bedacht werden und einen Ersatz-Workflow geboten werden.

3. Formulardesign

Formulare richtig gestalten
Wie bei jedem Formular gelten auch bei Registrierung und Login die Regeln eines guten Formulardesigns. Das visuelle Design hat einen erheblichen Einfluss auf die Usability. Ist das Formular sehr lang, erleichtert das Gruppieren von zusammengehörigen Feldern den Überblick. Platziert man die Bezeichnungen der Eingabefelder vor statt über dem Feld, kann man das Formular optisch verkürzen. Dies und weitere Erläuterungen zum Design von Formularen finden sich im Artikel „Web Application Form Design“ von Luke Wroblewski.
Erstreckt sich das Formular über mehrere Seiten, ist es hilfreich, eine Prozesskette ähnlich wie in einem Warenkorb zu integrieren, um dem Nutzer eine Orientierung zu geben, wie viel er noch vor sich hat.
Der Nutzer sollte außerdem nicht durch zusätzliche Optionen abgelenkt und die Seite auf die reinen Formulardaten reduziert werden. Viele Websites blenden sogar die allgemeine Navigation der Seite aus. Völlig falsch platziert sind an dieser Stelle Werbebanner, die den Nutzer sogar von der Website weglotsen.

Dem Nutzer beim Ausfüllen Unterstützung bieten
Müssen die Daten in einem bestimmten Format eingegeben werden, sollte dies dem Nutzer schon direkt bei der Eingabe mitgeteilt werden. Kaum etwas ist frustrierender als erst nach Absenden des Formulars in der Fehlermeldung zu erfahren, dass das Passwort eine bestimmte Länge aufweisen und auch noch Sonderzeichen enthalten muss. Benötigen nur wenige Felder solche Hinweise, kann man die Angaben direkt unter das Feld schreiben, möglichst in einer unauffälligeren Schriftfarbe als der Rest der Feldbezeichnungen. Handelt es sich um sehr viele erläuternde Angaben, kann man sie als Tooltips erst dann anzeigen, wenn der Nutzer in das entsprechende Feld klickt. Das hat den Vorteil, dass de Seite nicht zu voll und unübersichtlich erscheint.

Aus Fehlermeldungen positive Hinweise machen
Fehlermeldungen sollten deutlich mehr aussagen als der typische Satz „Es ist ein Fehler aufgetreten.“ Sind die betroffenen Felder markiert und eine freundlich formulierte Erläuterung direkt daneben platziert, kommt der Nutzer viel schneller zum Ziel.
Mit AJAX und JavaScript können die meisten Daten bereits während der Eingabe validiert werden. So zum Beispiel, ob der gewünschte Benutzername noch verfügbar ist, oder ob das E-Mail-Feld korrekt ausgefüllt ist. Damit erspart man dem Nutzer die Fehlermeldungen, wenn er glaubt, mit dem Klick auf „Absenden“ seine Registrierung abgeschlossen zu haben.

Testing: Der Nutzer sollte das letzte Wort haben
Selbst wenn man davon überzeugt ist, Registrierung und Login optimal gestaltet zu haben, sollte man doch lieber den Nutzern die Entscheidung überlassen, ob es wirklich funktioniert und verständlich ist. Gestaltung und Prozesse sollten mit Probanden aus der Zielgruppe in Usability-Tests überprüft werden. Besonders aussagekräftig sind Auswertungen aus dem Live-Betrieb, auf welchen Seiten oder, noch genauer, bei welchen Feldern die Nutzer den Prozess abbrechen und die Seite verlassen.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

So, und wer nun nach all dieser Theorie das Bedürfnis hat, sich praktisch irgendwo registrieren zu müssen, der sollte das hier tun. Vielen Dank! :)

Ich lasse jetzt mal das Thema Lifestream beiseite, denn ich war ebenso wie Mark Krynsky vom Lifestream-Blog total begeistert von der Art und Weise, mit der man beim Google-Profil seine anderen Accounts hinzufügt. Das nimmt einem nämlich Google ab! Wenn man seinen Friendfeed-Account einträgt, nutzt Google diese Infos und zieht sich alle Profile, die man in Friendfeed gespeichert hat!

Und das sieht so aus:

Mein leeres Google-Profil:

Mein Google-Profil im Bearbeiten-Modus:

Der Abschnitt “Links” – noch bevor ich Friendfeed eingetragen habe:

Der Abschnitt “Links” – nachdem ich Friendfeed eingetragen habe:

Der Abschnitt “Links” – zum Übertragen der Profile muss man sie einfach nur der Reihe nach durchklicken:

Mein ausgefülltes Profil:

Warum geht das nicht überall so? Ich melde mich bei soooo vielen Diensten an, bei denen man seine Accounts hinzufügen kann, und überall muss man pro Account mind. 3 mal klicken, ein neues Tab aufmachen, den Account auf der entsprechenden Site aufrufen, die Profil-Url kopieren, wieder zurück und ins Profil eintragen. Das ist soooo umständlich!

Einen ersten Ansatz in die Richtung, wie Google es macht, hatte ich vor einem Jahr schon mal in dem Beitrag über “Automatische Aggregation” vorgestellt. Hier hatte Readr.com immerhin den Usernamen schon mal zum Profilesuche verwendet. Man musste dann nur noch bestätigen, dass dieser Username der richtige ist.

Das, was Google macht, ist aber noch viel besser! Google versucht dem User so wenig Aufwand wie möglich aufzuhalsen. Schließlich will Google ja, dass die User ihre Profile ausfüllen.
Ach ja, Google-Profile wie Youtube und Google-Reader waren natürlich automatisch schon gefunden.

Dumm ist es nur, wenn man den Friendfeed-Account als letztes einträgt! ;.-)

Was ich beim Google-Account übrigens sehr süß finde, sind die Angaben zur Person, die man machen kann:

Leider ist mir noch nix eingefallen, was ich da eintragen kann. :(

Und um nochmal zurück zum Lifestreaming zu kommen: Wo ist jetzt eigentlich der Lifestream bei Google? ;-)

.-.-.-.

NACHTRAG: Es gibt vom Open Web Podcast ganz aktuell eine Folge über “Distributed Social Networking“. Wer also mehr wissen will, über das, worüber ich hier beim Google-Profil gestolpert bin, und was mir Carsten, Dirk, Markus und Sebastian in den Kommentaren so nett erklärt haben, sollte hier mal reinhören!

Die wahrscheinlich größten WUD-Veranstaltungen in Deutschland finden in Berlin und Hamburg statt, zumindest sind diese am lautesten bei mir aufgeschlagen. ;)

Mehr zum WUD in Berlin, der ein sehr umfangreiches Programm bietet gibt’s hier: WUD Berlin

Und mehr zum WUD in Hamburg

Der WUD in allen anderen Städten in Deutschland.

Was ist überhaupt der WUD? Einmal als deutsche Version und hier auf englisch zum Nachlesen. :)

Kommt denn noch jemand aus der Rhein-Mainer-Gegend nach Wiesbaden? :)

Chocri ist Schokolade ganz nach dem persönlichen Geschmack! Man kann sich die Zutaten nämlich selbst zusammen stellen. Also so wie (obligatorische Vergleiche) Mymuesli und Sonntagmorgen. Es gibt drei Basissorten nämlich Vollmilch, Zartbitter und weiße Schokolade (jeweils Bio Fair) und dazu kann man sich nun aus einer langen Liste die Zutaten zum veredeln rausuchen. Bis zu 4 Zutaten passen drauf, wie Trockenfrüchte, Nüsse und Kerne, Gewürze, was für die Optik oder auch von Wald und Wiese. Also Klassiker wie Kokosraspeln oder Haselnusskrokant oder auch exotisches wie Japanische Bouls oder kandierte Rosenblätter. Und … ganz komische Sachen wie Fenchel, ganze Chilis oder Knoblauchgranulat. Fragt mich nicht, wer sich letzteres auf Schokolade draufpackt, aber es wird angeboten. ;)

So sieht sie aus, die in diesem Fall besonders hübsch gestaltete Schokolade:

Und so wird sie gemacht:



Am 1.9. startet das Ganze … und warum schreib ich jetzt schon darüber? Weil ich heute morgen eine solche Tafel bekommen habe! :) Die Chocri-Jungs haben mich vor ner Woche oder oder so angerufen und mir eröffnet, dass ich mit dem Chocri-Rennen beginnen darf. Das Chocri-Rennen ist eine sehr witzige Blog-Aktion, bei der sich eine Bloggerin (in dem Fall ich) und ein Blogger jeweils zu Beginn eine Schoki-Mischung aussuchen und dann zwei Tafeln zusammenstellen und an andere Blogger verschenken dürfen. Und zwar nur Blogger an Blogger und Bloggerinnen an Bloggerinnen. Denn das Ganze ist ein Rennen bei dem Jungs gegen Mädels antreten. Insgesamt 200 Tafeln werden verschenkt und wer zuerst die 100 verteilt hat, hat gewonnen!

Also habe ich mir weiße Schokolade mit Haselnußkrokant und Bananen Chips und rosa Schokoladentropfen(Erdbeer) ausgesucht und folgende Tafeln verschenkt:

An meine Freundin Ulli, die ganz frisch mit ihrem Blog unter dem Namen daehaex gestartet ist:
Vollmilch Bio Fair mit Erdbeeren und geröstete Erdnüsse und Smartis

Und an Angela mit ihrem Blog Reinseite:
Vollmilch Bio Fair mit Mais Cornflakes und Cranberries und gebrannte Mandeln

Und obwohl ich einen starken Konkurrenten hatte, nämlich Till von Sonntagmorgen.com, muss ich sagen, dass wir Mädels ein sauberes Rennen geliefert und die Jungs gnadenlos abgehängt haben! Genau nachverfolgen kann man das Rennen im Chocri-Blog und dort gibt es auch diesen tollen Verlauf des Rennens zu sehen:

Stand 14.08 16 Uhr

Woran es liegt, dass wir Mädels so flott waren, kann ich nicht sagen … vielleicht sind unsere Mädels-Blogs doch besser vernetzt als ihr Männer immer denkt ;) oder wir fahren einfach mehr auf Schoki ab … (alle Blogbeiträge dazu)
Ich glaube, mittlerweile sind die Chocri-Jungs ganz schön am Rödeln, um die Mädels zu stoppen, die gar nicht mehr aufhören wollen, die Schokolade zu verschenken. ;)

Nun denn, heute morgen kam meine Schokolade hier an … und naja … es hapert ein wenig an der Verpackung. :( Denn die Schokolade war durchgebrochen und einige der Zutaten runtergefallen.

Irgendwie hatten alle, denen ich davon erzählt hatte, erwartet, dass die Zutaten in der Schokolade mit drinnen wären. Aber sie werden auf die Unterseite gepackt. Wie man an dem Bild oben erkennen kann, kann das ja sehr schön aussehen. Wird’s denn auf der fertigen Website dann einen Konfigurator geben? Wo man sich das Ergebnis dann schon mal vorab anschauen kann? So wie bei T-Shirts zum Beispiel? Das wäre ja ganz praktisch. Weitere Beispiele sieht man bei Robert.

Und wie gesagt, liebe Chocris, an der Verpackung müsst Ihr noch ein bisschen arbeiten. Nicht einfach ein wenig Packpapier reinstopfen, sondern die Tafel weich betten, damit ihr nichts zustoßen kann. Und was passiert, wenn’s draußen mal richtig heiß ist? Ich glaube nicht, dass die Post ihre Pakete gekühlt transportiert.

ABER … die Schokolade ist richtig LECKER!

Und ich hab noch ein paar Gutscheine mitgeschickt bekommen. Wer will, kann sich gerne bei mir melden, ich schick Euch dann den Gutschein-Code. Und zwar sind das zwei mal kostenloser Versand, ein mal 1 Euro Rabatt, einmal 10% Rabatt und einmal 20% Rabatt. Wer welchen Gutschein bekommt, entscheide ich nach Zufall. ;)