Usability und Webdesign Blog

Die richtige Gestaltung von Formularen ist eh schon schwierig genug, wenn es aber um die Gestaltung von Formularen zum Bezahlen geht wird es richtig knifflig.

Der folgende Tweet zeigt ein kurzes Video wie man ein Kreditkarten-Formular gestalten kann.

Search API will now always return “real” Twitter user IDs. The with_twitter_user_id parameter is no longer necessary. An era has ended. ^TS

— Twitter API (@twitterapi) November7, 2011

Was mich in Deutschland immer nervt sind schlecht gemachte Formulare für Überweisungen. Je nach Bank oder Online Shop sind die Felder Bankleitzahl und Kontonummer anders positioniert. Die Feldlänge des Formulars wird zu genau geprüft dadurch kann nicht einfach die Konto- & Bank-Nummer aus einem PDF rauskopieren weil diese noch nach dem Schema XXX-XXX-XX aufgebaut sind.

Einfach mal selber ein paar Tests machen würde schon helfen. Hier eine Kurz Formular Checkliste:

• Lassen sich Kontonummer, Bankleitzahl, Kreditkartennummer per Cut & Paste einfügen? Auch wenn diese Leerzeichen, Bindestriche oder sonstige Sonderzeichen enthalten?
• Kann man durch drücken der Tab-Taste von einem Formularfeld zum nächsten springen? Wenn nicht haben alle Felder einen Tabindex im HTML Code?
• Haben die Felder im HTML-Code Deutsche Bezeichnungen um auch eine Accessibility für Blinde zu haben? Sind die Bezeichnungen gänging damit im Browser Auto-Fill funktioniert?

Sinn und Zweck der Internen Verlinkung ist es dem Benutzer eine bessere Navigation zu liefern und Suchmaschinen Informationen über den Inhalt der Zielseite zu liefern.

Deshalb wundert es mich immer wieder wenn ich Links mit dem Titel “hier” oder “hier klicken” sehe. Jakob Nielsen hat den Fehler mit den Click here Links schon 2005 unter den Top 10 Webdesign Mistakes 2005 gelistet.

Praktisch der selbe Text. Das zweite Beispiel ist jedoch deutlich besser, weil der Besucher der Seite und die Suchmaschine erkennen können, dass die Zielseite vom Thema Publisher Specials handelt.

Lösungansatz: (weiterlesen …)

Mit Ausgabe 15 erscheint das Magazin USABILITYtrend erstmals in neuem Design und unter dem neuen Namen Nutzenforschung Report.

Neben einem überarbeiteten Layout finden sich auch inhaltliche Änderungen im Magazin, die für ein größeres Themenspektrum sorgen. Zu den bisherigen Schwerpunkten Marktforschung, Usability und Technologie sollen nun auch die Themen Marketing, Research, Testing, Monitoring, User Centred Design, Brand- und Media-Measurement verstärkt beleuchtet werden. Nutzenforschung Report berichtet über Innovationen, Forschungsansätze, Studien und Methoden die das Potenzial haben, die Nützlichkeit und den Mehrwert der Dinge auszumachen.

Das ist neu! Die Nutzenforschung ist eine neue Leistungskategorie: Untersucht wird der Nutzen in der Beziehung zwischen Marke, Maschine und Mensch. Nutzenforschung optimiert die Nutzenleistung von technischem Gerät, Kommunikation und Software. Nutzenforschung hat als Ziel die mühelose Funktion, die sinnvolle Leistung und den befriedigenden Gewinn.

Mehr bei Sirvaluse

Wenn man sich auf dem Spielemarkt mal umschaut, fällt auf daß der Trend sich immer weiter vom Einzelhandel entfernt und zu Browsergames und Internetbasierten spielen übergeht. Dabei kann man zwei Stile ausmachen Klick und Point spiele und Browsergames.

Klick and Point Spiele sind kleine Spiele für die Mittagspause. Dabei geht es meistens um Geschicklichkeit. Man muß eine Aufgabe in einer bestimmten Zeit erfüllen oder Punkte sammeln. Als Beispiel kann das kleine Rennspiel von Kfz.net dienen. Dort soll man drei Runden fahren und mit der schnellsten kann man sich im Highscore eintragen. Solche Online-Spiele benötigen keine Einarbeitungszeit und man muß auch keine Anleitung lesen.

Multiplayer Browserspiele sind die alternative dazu. Ohne große Software-Installation hat man sofort ein tolles spiel (meistens auf Flash und Javscript Basis). Kostenlose Browsergames handeln von Simulationen und Strategie spielen wo etwas gehandelt und aufgebaut werden muß. Zum Beispiel ein Dorf soll mit natürlichen Ressourcen aufgebaut werden oder eine Raumstation die mit anderen Planeten handel betreibt und sich ausdehnt.

(weiterlesen …)

Es gibt mehrere Punkte, die beim Design von Webformularen unbedingt beachtet werden sollten:

Mussfelder sollten klar gekennzeichnet werden!

Benutzer sind bestrebt möglichst wenig Daten preiszugeben, sie sollten wissen, welche Eingaben unbedingt erforderlich sind. Mussfelder sollten entweder farblich oder durch ein Sternsymbol (*) gekennzeichnet werden.

Formularelemente sollten dem jeweiligen Zweck entsprechend verwendet werden.

Es kommt häufig vor, dass Benutzer nur Alternativantworten (mit Radiobuttons realisiert) geben können, obwohl Mehrfachnennungen (mit Checkboxes realisiert) möglich wären. Der Benutzer schätzt es nicht wenn ihm sein Antwortverhalten durch falsches Design aufgezwungen wird.

Eingabeformate anzeigen (z.B.Datum: tt-mm-jjjj)!

Der Benutzer sollte stets klar erkennen können welches Eingabeformat benötigt wird. Es sollte nicht nötig sein, nur durch Versuch & Irrtum Formularefelder zu bewältigen.

Felder die Eingabefehler enthalten kennzeichnen!

Kommt es zu falschen oder fehlenden Eingaben sollten die entsprechenden Felder deutlich gekennzeichnet werden und der jeweilige Fehler beschrieben werden. “Bitte überprüfen Sie Ihre Eingaben noch einmal!” reicht als Feedback keineswegs aus!

Ein Reset-Button um Eingaben vollständig zu löschen ist unnötig!

Auf Webformularen wird ein Reset-Button NICHT benötigt. Er wird jedoch vom Benutzer häufig irrtümlich an Stelle des Submit-Buttons gedrückt.

Weitere Tipps zum Gestalten eines Webformulars

Eine Abbruchquote von 75 Prozent bei Webformularen ist hoch.  Heutzutage muss man das Vertrauen der User gewinnen, um ihre Daten zu bekommen. Vertrauen kann man gewinnen, indem man direkt eine proaktive Information verrät, die das Interesse des Besuchers weckt. Zudem sollte man wirklich nur die notwendigen Daten abfragen und offen auf die aktuellen Datenschutzbestimmungen verweisen und vermerken, dass man danach handelt.

Das Image des Anbieters ist ein wesentlicher Faktor und entscheidet über den Erfolg. Nur transparente Kommunikation kann zum Ziel führen und kann auch zu mehr Anfragen führen. Bei Kontaktformularen ist es daher enorm wichtig glaubwürdig zu erscheinen und nur Punkte abzufragen, die auch für die folgende Aktion sinnvoll sind. So kann bestimmt keiner nachvollziehen, warum bei einigen Newsletter-Anmeldungsformularen auch die Telefonnummer abgefragt wird.

Dieses Konzept der transparenten Kommunikation zieht sich dabei durch alle Bereiche. Vom Image des Anbieters, über die Art der Datenabfrage bis hin zur Gestaltung der Webseite. Auch diese sollte transparent, leicht verständlich und vertrauenswürdig aussehen. So sollten die wichtigen Buttons für Anfragen und Downloads in das Blickfeld rücken.

Auf jedem Webformular sollte zudem gut sichtbar ein Link zu den Datenschutzbestimmungen sein.

Zum zweiten Mal wird der Shop Usability Award, von Shoplupe, an die nutzerfreundlichsten und kreativsten Online-Shops verliehen. Aus den Erfahrungen vom letzten Jahr haben wir viele neue Ideen und Vorschläge aufgenommen, die dieses Jahr zum Tragen kommen. Neu in 2009 ist daher:

• Die Verleihung findet in 12 Produktgruppen statt. Damit werden die branchengleichen Shops untereinander verglichen und nicht mehr nur einzelne Elemente des Shops. Ein spannendes Rennen mit Ihren Wettbewerbern.
• Wir suchen wieder 10 schöne Ideen und Features eines Shops. Die Ideen werden wir präsentieren und mit einem Kongress Ticket der Internet World Fachtagung im Wert von 1290,00 € belohnen.
• Jeder teilnehmende Online-Shop erhält ein Info Paket von Shoplupe mit zahlreichen Informationen, Angeboten und einem Trusted Shops 50,00 € Gutschein.
• Die 5 nominierten Shops jeder Kategorie laden wir herzlich zur Fachtagung nach München ein. Eine Eintrittskarte senden wir zu.

Noch nie war’s so spannend. Melden Sie sich einfach an. www.shop-usability-award.de

Wie schon lange angekündigt starte ich meine Usability Bashing Video Reihe. Dabei zeige ich auf Video welche Usability Probleme es auf Seiten gibt die ich öfters mal nutze. Den Anfang macht die Plattform Xing, wo es ein kleines Problem bei der erweiterten Suche gibt. Das Element “suchen, in meinen Kontakten” ist 2x mal auf der Plattform vorhanden bloß leider unterschiedlich implementiert (die buttons sind verdreht) der Fehler ist so klein daß es ziemlich schwer aufzuspüren ist, führt aber dazu, daß man den Eindruck hat, daß die Erweiterte Suche nicht immer richtig funktioniert.

Link:

Kommentare und Feedbacks im Blog oder auf Sevenload, ob ihr mehr davon sehen wollt, sind willkommen.

Was sind Linktexte?

Das ist der Link der genutzt wird um eine andere Seite im Netz zu verlinken. Dabei handelt es sich um den Texte der sich im HREF HTML Tag befindet. Im Englischen wird dieser auch als Anchor Text benutzt.

Warum sind Linktexte wichtig?

Ersten werden sie von den Besuchern als Navigations Elemente benutzt. Zweitens benutzen Suchmaschinen, wie Google, den Inhalt von Linktexten um zu entscheiden welche Seiten bei einer bestimmten Suche auf der ersten Seite erscheinen sollen.

Wenn viele Seiten mit dem Wort “Automobil” auf eine Seite linken, dann denkt die Suchmaschine, daß die Zielseite etwas mit dem Wort Automobil zu tun haben muß.

Wie schreibt man gute Linktexte?

Mit einfachen Regeln können Sie die Navigation für die Benutzer auf Ihren Seiten verbessern und noch etwas für Ihre Suchmaschinenplatzierung tun.

1. Schreiben Sie normale Texte als ob es keine Suchmaschinen gäbe, denken Sie zuerst an dem Benutzer.
2. Beschreiben Sie nicht das verhalten hinter einem Link sondern den zweck des Links. Beispiel statt: “hier klicken für mehr Informationen” sondern eher “Weitere Informationen zu den Autonews“
3. Benutzen Sie leicht verständliche Wörter für Ihre Linktexte. Man sollte auch außerhalb des Kontextes (also ohne den Text drumherum) verstehen wohin der Link führt.
4. Vermeiden Sie Überraschungen wenn sich unter dem Link Video Inhalte, PDFs etc. oder eben andere Inhalte als eine Normale Seite verbergen, sollten Sie das in dem Linktext sichtbar machen. Satt “hier Klicken” lieber “PDF Dokumentation”.

Viele Besucher lesen Texte auf Webseiten nicht, sondern überfliegen oder “scannen” diesen nur nach hervorgehobenen Wörtern bzw. sind auf der Suche nach Links. Deshalb sollte man die Linktexte auch ohne den umliegenden Text leicht verstehen.

Ich bin ja immer wieder überrascht welche lustige Fehlermeldungen in den verschiedenen Web Interfaces zu tage kommen. Neulich in meiner Projektmanagment Software Basecamp habe ich erfahren, daß ich meinem Co-Worker nicht die Schuld für bestimmte Sachen zuweisen kann, es ist einfach nicht erlaubt!

Bei Redesign des Autoportals KfzNet trat in der Software folgende Meldung auf:

“Sebastian isn’t responsible for anything“