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)
4 Jahre Designevolution des YouTube Players
Es ist schon erstaunlich, wie stark sich der YouTube Player in den letzten Jahren unter unser aller Augen weiter entwickelt hat. Und obwohl das Design des Players – und damit meine ich hauptsächlich seine Interaktionselemente – sich kontinuierlich verändert, kann ich mich nur an zwei Momente erinnern, bei denen mir diese Designverbesserungen wirklich aufgefallen sind.
Unsere Kollegin Christina hat für uns die Google Imagesuche angeschmissen und aus dem impliziten Webarchiv vieler Tutorials und Blogeinträge einen Zeitstrahl an YouTube-Player-Designs erstellt.
Evolution ohne Identitätsverlust
Betrachtet man die Player in dieser Abfolge, wird deutlich, welche gute Arbeit die Google-Designer geleistet haben. Jeder Designer hätte sicher erstmal gesagt, dass das 2007er Design nicht mehr zu retten ist und grundlegend anders aufgebaut werden muss.
Die Google-YouTube-Crew ist zum Glück einen anderen Weg gegangen und hat den Player in kleinen Schritten weiter entwickelt. Abgesehen von dem Player von 2006 haben sie alle Elemente, die zwar angepasst, aber niemals komplett geändert wurden. Zum Beispiel und offensichtlich das Rot der Statusanzeige. Aber auch die Reihenfolge der Elemente ist gleich geblieben: In allen Playern findet man die beiden Zeitangaben rechts neben der Statusanzeige direkt vor dem Lautstärkeregler. Auch Grau als Basisfarbe ist erhalten geblieben.
Trotzdem hat Google den Player stark verbessert. Gerade das neue Player Design Ende 2008 halte ich für hervorragend. Es zeigt sehr schön, wie sich Google bemüht, alle unnötigen Linien, Flächen und Abstände loszuwerden. Und wie daraus ein klarerer, einfacherer Player wird.
Eine weitere Verbesserung – und der Anlass für diesen Artikel – ist die Optimierung des Fullscreen-Buttons. Seit 2007 hatte YouTube diese beiden Quadrate, die aus mir nicht ersichtlichen Gründen „Fullscreen“ symbolisieren sollten. Einzig durch die Animation dieses Buttons konnte man überhaupt verstehen, was es tut.
Erst jetzt, Anfang 2010 hat Google sich getraut diese Altlast über Bord zu werfen und ein neues und sprechenderes Fullscreen-Icon aus Pfeilen einzusetzen.
Aber genug geredet, seht selbst:
September 2009 (Design wie Okt 2008)
Oktober 2009 (Design wie Okt 2008)
November 2009 (Design wie Okt 2008)
Dezember 2009 (Design wie Okt 2008)
Januar 2010
PS: Vielen Dank, Christina, für die Recherche.
Kommentieren (1 Kommentar)
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)
Wo ist der Anmelde-Button?
Hier geht es um eine Einstiegsseite zu einer Onlineumfrage, bei der man sich zur Teilnahme anmelden muss.
Den im Text erwähnten Anmelde-Button und noch viele andere beschriebene Features fehlen auf der Seite. Was also tun? Belohnt wird, wer den ganzen Text liest, denn dort steht tatsächlich, dass man den Schließen-Button klicken soll um weiterzumachen. Alles klar?
Ich bin gespannt, wieviele Teilnehmer diese Umfrage wirklich haben wird. Die Vorraussetzungen sind schlecht.
Hier kann man sich live überzeugen: http://www.latitudesurvey.com/FutureRequests/Under12/
Kommentieren (1 Kommentar)
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…