Über Björn Amherd

User Experience Aficionado & Prototyper

Benennung der Anmeldelinks für Neu- und Bestandeskunden

Im Anschluss zur Heatmap der Lage der Links (Blog-Artikel vom 3. Mai 2011) hier die Rangliste der in den untersuchten Websites am meisten verwendeten Begriffe:

3591-naming_links.png

Erstaunlich ist, dass Neukunden meistens im Stich gelassen werden. Diese müssen sich umständlich über Links und Buttons im Inhaltsbereich der Seite in den Registrationsprozess begeben. Oder sie gelangen nach dem Drücken auf den „Login“-Link auf eine Formular für die Anmeldefunktion – mit dem Hinweis, dass dies nur für bereits registrierte Kunden zu benutzen ist. Ein Beispiel (unter vielen) dafür ist die populäre Preisvergleichsseite comparis.ch.

Auf allen Seiten ist oben rechts das „myComparis-Login“ erreichbar…

3593-comparis-thumb-500x303-3592.png

…und nach dem Klicken auf den Link gelangt der Benutzer direkt aufs Formular für Benutzername und Passwort – mit dem unscheinbaren Hinweis für potentielle Neukunden:

3596-comparis2-thumb-500x253-3595.png

Fazit:
Ausgenommen von den Seiten ohne Berücksichtigung der Neukunden lässt sich sagen: (In der Schweiz) kommen idealerweise oben rechts die beiden Links für „Registrieren“ und „Login“ hin, da dies den Benutzern am geläufigsten ist.

Unsere supersimple Homepage könnte dann (kombiniert mit einem grossen Button für potentielle Neukunden) so aussehen:

3598-lage_loginregisterlinks.png

Trefferlisten vor- und zurückblättern – Best Practices und Empfehlungen für die ideale Paginierung

Täglich durchforsten wir Trefferlisten und versuchen, das „richtige“ Resultat aus den meist überzähligen Ergebnissen herauszupicken. Ganz egal, ob wir Google, Amazon oder eBay benutzen – immer sind Trefferlisten irgendeiner Art im Einsatz.

Die Paginierung (engl. „Pagination“) kommt immer dann zum Tragen, wenn dem Benutzer eine grosse Trefferzahl aufgestückelt präsentiert werden soll. Gleichzeitig liefert sie Angaben darüber, wie gross die Trefferzahl insgesamt ist und wie viele Treffer der Benutzer bereits angeschaut/abgearbeitet hat.

Damit jede Trefferliste benutzerfreundlich wird, sollten einige grundlegenden Eigenschaften vorherrschen. Folgende Bestandteile sollten dem Benutzer immer zur Verfügung gestellt werden:

1. Die aktuell angewählte Seite
Wie bei der Seitennavigation, so muss der Benutzer auch bei der Paginierung immer die aktuell angewählte Seite sehen können. Diese sollte entsprechend visuell ausgezeichnet werden und ist nicht durch den Benutzer anklickbar.

3158-1-paginierung.png

Beispiel aus dem Web: eBay

3166-ebay-paginierung.jpg

2. Anklickbare Seitenzahlen
Alle sichtbaren Seitenzahlen sind (bis auf die aktuelle Seite) anklickbar.

3159-2-paginierung.png

Beispiel aus dem Web: Google

3167-google-paginierung.jpg

3. Buttons zum vor- und zurückblättern
Nebst den Seitenzahlen kann der Benutzer auch auf die – möglichst als Pfeile aufbereiteten – Buttons vor- und zurückblättern. Die Buttons sollten immer angezeigt werden, auch wenn ein vor- oder zurückblättern aufgrund der aktuellen Seite nicht möglich ist. Befindet sich der Besucher beispielsweise auf Seite 1, so ist der Button zum zurückblättern zwar sicht- jedoch nicht klickbar (z.b. ausgegraut).

3158-1-paginierung.png
3160-3-paginierung.png

Beispiel aus dem Web: Amazon

3168-amzn-paginierung.png

4. Die insgesamt gefundenen Resultate resp. generierten Seiten
Da die Trefferliste in den meisten Fällen aufgrund einer Suchanfrage entstanden ist, müssen dem Besucher auch die so total gefundenen Treffer („es wurden n Treffer für ‚Suchbegriff‘ gefunden“) und generierten Seiten („Seite n von n“) präsentiert werden. Mit dieser Angabe kann der Benutzer – sofern gewollt – die Suchanfrage verfeinern, um schon von vornherein weniger und deshalb exaktere Resultate zu erhalten.

3161-4-paginierung.png

Beispiel aus dem Web: eBay

3169-ebayseite-paginierung.png

5. „rollender“ gleichbleibender Seitenbereich zum Anklicken
Bewegt sich der Benutzer in den Seiten vor oder zurück, sollte sich der wählbare Bereich immer gleichmässig mitbewegen. Dabei ist die Anzahl der anklickbaren Seiten (z.B. 1 bis 7, 7 bis 13) immer gleich gross und die aktuell angewählte Seite befindet sich in der Mitte der Liste.

3162-5-paginierung.png

Beispiel aus dem Web: Yahoo!

3170-yahoo-paginierung.png

6. Speziallfall Artikel und Produkte: Wählbare Artikel pro Seite
Werden von Benutzer Produkte oder Artikel gesucht, so werden diese Resultate meistens in einem Raster mit einer fixen Spaltenanzahl dargestellt. Damit der Benutzer die Anzahl der Artikel mit einem Klick erhöhen kann, sollten ihm die entsprechenden Alternativen via Button (kein Dropdown!) angeboten werden.

3163-6-paginierung.png

Beispiel aus dem Web: Thinkgeek

3172-tg-paginierung2.png

7. Paginierung oben und unten mit allen Funktionen anbieten
Sämtliche verfügbaren Funktionen (siehe obige Punkte 1 bis 6) sollten dem Benutzer auf einer Resultatseite unter- und oberhalb der Resultateliste angeboten werden. Gerade bei Benutzern, welche den Seiteninhalt rasch von oben nach unten nach oben überfliegen ist diese Doppelung wirksam.

Zusatz: Suchformular und gesuchten Begriff auf der Resultatseite wiederholen
Suche und die Darstelllung von Suchresultaten ergeben an und für sich schon eine Menge separater Artikel. An dieser Stelle soll nur darauf hingewiesen werden, dass auf der Ergebnisseite sowohl der gesuchte Begriff als auch das Suchformular (inkl. dem eingegebenen Begriff) wiederholt werden sollten. Zusammen mit Tipp 7 ergibt sich folgende – sehr generische und keineswegs durchdesignte (!), aber funktionale Webseite:

3165-7-paginierung-thumb-500x543-3164.png

Hinweis: Nebst der Paginierung setzen immer mehr Seiten das „Continuous Scrolling“ ein. Dabei werden beim Erreichen des unteren Seitenrandes Inhalte/Treffer nachgeladen (automatisch oder durch einen Klick des Benutzers). Mehr dazu (insbesondere zu Vor- und Nachteilen) in einem späteren Artikel.

Skype für Mac mit zu viel Whitespace

Das neue Skype für den Mac hat von Haus aus eindeutig zu viel Whitespace. Zugegeben, Whitespace (also passende Abstände und „Luft“ um die Elemente) macht in ziemlich vielen Fällen Sinn, aber nicht in einem Chat-Fenster.

Wie ich gerade herausgefunden habe, kann Skype mit Styles auch customized werden. So zum Beispiel mit dem Chat Style „Brief“ von @miekd.

Voher (mit dem Skype-eigenen Style „Panamericana“):

3067-skype_ohne2-thumb-500x502-3066.jpg

Nachher (mit dem „Brief“-Style):

3070-skype_brief2-thumb-500x507-3069.jpg

Und so geht’s (Anleitung für Mac-User):

  1. Style herunterladen und entpacken
  2. Das entpackte File in ~/Library/Application Support/Skype/ChatStyles verschieben (Die beiden Ordner „Skype“ und „ChatStyles“ müssen u.U. erstellt werden, falls sie nicht vorhanden sind)
  3. Skype neu starten
  4. In Skype via Einstellungen > Chat & SMS > Stil den neuen Stil auswählen
  5. Skype nochmals neu starten und fertig!

Skype ist bei Namics übrigens fester Bestandteil der Kommunikation(stools). Über unsere 5 Standorte in der Schweiz und Deutschland hinweg gibt es nichts schnelleres und praktischeres :)