Flickr Easter Egg
Wer als Inhaber eines Pro-Accounts bei Flickr die Statistiken aktiviert, wird mit einem netten Easter Egg belohnt. Da es offenbar mehrere Tage dauern kann, die Nutzungsstatistiken zu einem Account zu berechnen, zeigt Flickr dem wartenden Nutzer eine Meldung mitsamt wechselnden, knuffigen »Under Construction« Animationen an.

Tipp: Wenn schon Google Maps Anfahrtskizze, dann mit Link
Google macht es jedem, der die altbackene Anfahrtskizze auf seiner Webseite durch eine interaktive Google Map ersetzen will, ziemlich leicht.
Der Standard-Code, den Google hierfür in seiner Maps-Anwendung ausgibt, enthält unterhalb der Kartendarstellung auch einen Link »Größere Kartenansicht«. Dieser führt (im selben Fenster) zu Google Maps. Klar, könnte man denken, hier will Google uns den werten Besucher abwerben und auf seinen Service ziehen!
Wie wichtig und hilfreich dieser Link aber aus Sicht des Nutzers sein kann, stellt sich heraus, wenn er mal fehlt. Ein Beispiel:

Die (nebenbei deutlich zu kleine) Karte hilft mir ohne die weiteren Google-Maps-Funktionen kaum weiter. Zwar kann ich mir auf der Karte ansehen, wo die betreffende Örtlichkeit liegt. Den eigentlichen Zweck, mir eine Anfahrtbeschreibung zu liefern, leistet die Darstellung aber nicht. (Obiges Beispiel scheint darüber hinaus nicht mit dem Standardcode zur Einbettung zu arbeiten, sonst würde die Bubble zum Restaurant noch mehr Funktionen und Informationen enthalten. Trotzdem funktioniert es als Beispiel.)
Zum Vergleich: Der entsprechende Google Maps Deeplink liefert die interaktive Routenplanung, Nutzerbewertungen und mehr.
Wer seinen Nutzern hier einen Mehrwert bieten möchte, darf nicht vor dem externen Link zurückschrecken. Das ist auch im Web des Jahres 2010 offenbar noch nicht selbstverständlich und gilt mitnichten nur für Links zu Google Maps.
Kommentieren (2 Kommentare)
Eine kurze Sackgasse
Ein Beitrag von Jürgen Schmidt auf heise security hat mich zum Nachdenken gebracht.
Zusammengefasst geht es darum, dass wir überlange (SEO optimierte) und bisweilen kryptische (garnicht optimierte) URLs, die sich keiner merken kann, mittlerweile dank bit.ly, ow.ly, tinyurl.com und anderen URL-Verkürzungsservices überwunden haben. Praktisch für Twitter, E-Mails und tatsächlich auch die mündliche Übermittlung.
Doch bei den Short-URL-Diensten sind wir eigentlich in eine User-Experience-Sackgasse gefahren. Denn langfristig kann es so nicht funktionieren.
Weiterlesen und kommentieren (6 Kommentare)
Warum wir uns um URL-Weiterleitungen kümmern sollten. Ein Beispiel aus der Praxis.
Das Konzept »URL« ist einer der wesentlichen Bausteine, auf dem das Internet, wie wir es kennen, aufbaut. Höchste Zeit, dass wir uns mehr darum kümmern. Hier möchte ich gerne dafür sensibilisieren, dass eine URL ein sehr, sehr langes Leben führen kann – weit länger, als uns manchmal lieb ist. Und gleichzeitig ein bisschen über unsere Aufgaben sprechen, wenn wir als UX-Verantwortliche uns mit dem Thema befassen wollen.
»Cool URIs don’t change«
ist der Titel eines Artikels von Tim Berners-Lee. Mehr Wunsch als Wirklichkeit ist das. Das echte Leben ist bei weitem nicht so perfekt. Permanent zwingen uns technische Überarbeitungen von Websites, inhaltliche Aspekte, konzeptionelle Überlegungen, neue Content Management Systeme und viele andere Gründe, URLs von Ressourcen im Web zu verändern.
Weiterlesen und kommentieren (12 Kommentare)
Noch schönere Hilfetexte in Textfeldern
Bisher gab es für mich (a) klassische, (b) nett gemeinte und (c) gute Hilfetexte/Label für Textfelder. Jetzt kommen noch (d) sehr gute hinzu.
Das klassische Label (a) steht vor dem Textfeld und hat hoffentlich auch einen Label-Tag, so dass man es anklicken kann.
Das nett gemeinte (b) zeigt den Labeltext innerhalb des Textfelds, löscht einem dan aber die eigene Eingabe, wenn man erneut in das Textfeld klickt.
Das macht das gute (c) besser, in dem es auch den Fall abdeckt, bei dem Nutzer mit und ohne eigener Eingabe mehrfach in die Textfelder klicken und vielleicht sogar farblich zwischen Hilfetext (Grau) und Eingabe (Rot) unterscheidet.
Bisher war ich damit auch glücklich und zufrieden. Bis 37signals jetzt noch einen drauf setzt und für die Anmeldemaske in ihrem Launchpad zwei sehr schöne Details umsetzt und damit (d) sehr gut ist:
- Der Hilfetext verschwindet erst bei der Zeicheneingabe. Nicht wie sonst üblich beim Klick in das Textfeld.
- Sie verwenden eine zweiten helleren Grauton dafür um zu signalisieren, dass jetzt getippt werden kann.
Natürlich machen sie auch all die anderen Details richtig, die ich oben erwähnt habe.
Hier kommt das ganze als kurzer Screencast. Und wer jetzt nochmal sehen möchte, wo genau die Unterschiede sind zum heute sonst üblichen Verhalten (c), dem empfehle ich den A List Apart Artikel zu diesem Thema mit seiner Demo und dieses jQuery Plugin.
Performance Testing mit Webpagetest.org
Wer unseren letzten Beitrag über Website Performance gelesen hat, hat schon mitbekommen, dass das Thema in diesem Jahr an Bedeutung gewinnen dürfte. Denn die Spekulationen, dass Google die Ladezeit einer Website in die Liste der Ranking-Kriterien aufnimmt, gewinnen an Substanz.
Matt Cutts, bekannt aus den Google Webmaster Central Videos, hat in seinem kürzlich veröffentlichten Wrap-Up eines Konferenzbeitrags neben dem ebenfalls oben schon gezeigten Google Page Speed ein weiteres nützliches Werkzeug vorgestellt, ausnahmsweise mal nicht aus dem Hause Google:
Der Dienst Webpagetest.org erlaubt die detaillierte Auswertung der Ladezeiten einer Webseite, ähnlich wie es Google Page Speed und Yahoo! YSlow machen. Allerdings sind die Optimierungs-Tipps, die Webpagetest.org liefert, nicht mit diesen Tools deckungsgleich, sondern ergänzen diese sehr gut. Man muss dafür auch keinen bestimmten Browser mit diversen Add-Ons installieren, sondern geht einfach auf die Website und gibt seine eigene URL ein. Dann wählt man auf Wunsch noch den Standort des Test-Clients (für Europäer ist momentan ein Standort in Großbritannien sinnvoll) und wartet etwa eine Minute auf das Ergebnis.
Der Report ist öffentlich unter einer URL abrufbar und kann somit problemlos an Dritte weitergegeben werden. Wer will, kann sich als Beispiel den Report für uxzentrisch.de ansehen.
Der obige Screenshot (Klick zum Vergrößern) zeigt einen Ausschnit aus dem »Waterfall« Diagramm. Dieses stellt dar, wann der Browser welche Ressourcen vom Server geladen hat und wie lange er dafür gebraucht hat.
An dieser Darstellung kann man beispielsweise sehen, dass zwei eingebundene Bilder in Artikeln, ein Gravatar-Bild (daher kommen unsere Autoren-Bildchen) und ein Video von Screenr recht lange brauchen, bis sie geladen werden (Zeile 5 bis 8). Weil der Browser (im Test ein IE7) maximal 4 parallele Downloads durchführt, vergeht sehr viel Zeit, bis der nächste Download (Zeile 9) starten kann. Grund genug, sich die betreffenden Ressourcen mal genauer anzusehen.








Letzte Kommentare
Heute hat Zappos begonnen sein visuelles Design zu verbessern. Die Primärnavi ist schon neu. Über alle anderen Themen
OK, hilf mir bitte mal auf die Sprünge. Wie müsste es richtig heißen?
"Den eigentlichen Zweck, mir eine Anfahrtbeschreibung zu liefern, leistet die Darstellung aber nicht" - du hast hier ne
Ein weiteres Beispiel von davidhellmann.com
Hi Marian, nein, eigentlich ich meinte das Canonical Tag von Google und Co. Der kopierte Code-Schnipsel wurde aber a