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.
Dropdown mit LivePreview
Kürzlich habe ich mit The Unarchiver ein Archiv entpackt. Offensichtlich gab es dabei ein Problem bei der Interpretation von Sonderzeichen wie dem Ö. Wie geht The Unarchiver damit um? Anstatt mir eine technisch-abstrakte Auswahl von Zeichensätzen anzubieten, zeigt er hübsch eingerückt daneben direkt eine Vorschau des problematischen Namens. Hervorragend!
Besonders überrascht von diesem Verhalten war ich, weil The Unarchiver eigentlich eine kleine, kostenlose Software ist, die kaum GUI verwendet sondern einfach ohne Dialog bei Klick ein Archiv entpackt.
Kommentieren (1 Kommentar)
Neue Informationen für Buspendler in Köln
Heute morgen bei der Fahrt ins Büro habe ich wieder einmal über die immer umfassenderen Möglichkeiten der Informationsvisualisierung im öffentlichen Raum staunen dürfen. Die Kölner Verkehrsbetriebe haben seit neuestem auch an vielen Bushaltestellen aktuelle Fahrtenanzeigen und gleichzeitig das neue Feature, dass ein Bus als im Stau stehend abgebildet werden kann. Die Technologien werden immer besser, der Fortschritt ist nicht aufzuhalten!
Aber was nützt mir das Wissen das ein ein Bus im Stau steht? Soll ich mich nach Alternativen umschauen? Aber woran mache ich das fest? Bedeutet Stau, dass der Bus viel später kommt? Ist es so schlimm, dass die KVB nicht wagt zu vermuten, wann er endlich eintrifft? Man kann es schlecht einschätzen, die Information »Stau« ist reichlich nutzlos.
Dann doch lieber wieder die alte Angabe der erwarteten Ankunftszeit und einfach ein paar Minuten draufschlagen. Damit kann ich was anfangen.
Kommentieren (3 Kommentare)
Einer dieser wunderbaren Dialoge, mit denen Microsoft immer wieder daran erinnert, dass sie lieber die Symptome als deren Ursachen bekämpfen. Aber vielleicht ändert sich ja auch das mit der Zeit.
Kommentieren (4 Kommentare)
Über Umwege zu schnellen Websites
Im Dezember haben verschiedene Meldungen nahegelegt (z.B. im webworker blog), dass im Jahr 2010 das Thema Ladezeiten von Webseiten eine ganz neue Bedeutung bekommen wird. Diesmal getrieben von Google.
Anlass war unter anderem eine Erweiterung der Google Webmaster Tools. Dort bekommen Site-Betreiber nun auch Aufschluss über die Ladezeiten auf Ihrer Website. Diese Daten erhebt Google über den Google Toolbar. Neben der Statistik erhält der Site-Betreiber konkrete Empfehlungen, wie er die Performance seiner Site verbessern kann.
Weiterlesen und kommentieren (3 Kommentare)
»We estimate that the extra requirement of serving this both into desktop browsers and mobile browsers only adds about 5 % extra engineering effort–which I find remarkable.«
Lars Rasmussen bezifferte während seiner Google Wave-Vorstellung auf der Google IO im Mai 2009 den Aufwand, mobile Applikationen mit dem Google Web Toolkit zu erstellen. Hier ist die genaue Stelle im Video. Und wer dann nocheinmal sehen möchte, wie Wave sich am Handy anfühlt, der muss zu Minute 25 zurückspulen.
Einblicke in die iterative Konzeption+Entwicklung von Trendly.com
Das richtige mentale Grundmodel zu finden, auf dem man seine Webapplikation aufbaut, ist eine der schwierigsten Aufgaben bei der Produktentwicklung. Avi Bryant, einer der CEO der Web-Datenbank DabbleDB, führt uns in seinem Vortrag auf der FutureRuby-Konferenz durch diesen Prozess am Beispiel seines Produkts Trendly.
Trendly nutzt die Roh-Daten von Google Analytics und visualisiert sie zusammen mit Ereignissen wie Blogposts, Links aus anderen Blogs, Vorträgen, die man gehalten hat… – Auf diese Weise versucht Avi Bryant, die Zugriffe auf seine Website besser zu verstehen.
In seinem Vortrag beschreibt er, wie sie zu Beginn in vielen Iterationen, viele Ideen ausprobiert haben. Ziel sei es, möglichst viel auszubrobieren um es dann verwerfen zu können. »Fail early, fail often.«
Letzte Kommentare
Bei Youtube müsste man eigentlich jede Woche Screenshots machen, so schnell wie sich da das Interface verändert. Wem …
Und schon wieder hat sich etwas getan. Zwar nicht direkt am Player, aber an den Funktionen rund um den Player. So sin…
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…