[GUIuiui] - Formular-Usability

Auch dies ist ein Schritt in Richtung verbesserte Usability, der noch viel zu selten gegangen wird:
Noch wärend der Eingabe in ein Formular werden die Felder überprüft und ggf. sofort eingeblendet, wenn bspw. ein Nutzername schon vergeben ist, die Mailadresse invalide ist oder die Passworteingabe nicht stimmte.
Leider ist das immer noch die Außnahme.

[GUIuiui] - Mißverständliche Buttons

Sueddeutsche.de hat beim Design der Formulare der Profilverwaltung für Forumsmitglieder irgendwie gepennt:

Wie sonst ist es zu erklären, dass alle Buttons grau mit grauer Schrift sind, so als seien sie nicht anklickbar:



Da sucht man erst die halbe Seite nach dem Button ab, den man klicken kann, um dann doch zaghaft auf die grauen Buttons zu klicken, um zu schauen, ob sie nicht doch gehen.

Zumal es auf der Seite auch noch andere Buttons gibt, die weniger nach "Ausgegraut" aussehen:

[GUIuiui] - Formulare und Mailadressen

Es gibt wohl kaum ein Anmeldeformular für irgendwas im Netz, bei dem man nicht seine Mailadresse zweimal eingeben muss. Bei allem Verständnis für den Sinn einer solchen Maßnahme, ist es aber komplett witzlos, wenn die Nutzer ihre Mailadresse einfach mit Copy&Paste aus dem ersten Feld übernehmen.
Zumindest praktiziere ich das seit Jahren so.

Heute ist mir nun zum ersten mal ein Formular untergekommen, dass dieses Kopieren sinnvollerweise unterbindet:



So sieht die Vollendung der doppelten Mailadresse in Formularen aus!

[GUIuiui] - Picabee - Eine Stilkritik

Picabee ist wohl ein Service, bei dem man kostenlos und ohne Versandkosten Papierabzüge seiner Digitalfotos bestellen kann. 2x30 Stück pro Monat.
Ich teste den Service gerade und suche noch den Haken.

Aber dabei ist mir einiges an der auf den ersten Blick recht hübschen und typisch Neuwebbigen Oberfläche aufgefallen.



Wenn man genauer hinschaut, wird es allerdings kritisch.
So gibt es 2 große Schaltflächen mit der Beschriftung "Bilder hochladen". Wenn man zweimal auf den falschen Button geklickt hat, stellt der lesende Nutzer (eine aussterbende Rasse!) fest, dass die eine Schaltfläche nur die Hilfe zum Bilder-Hochladen aufruft.

Button 1 zum Hochladen von Bildern: Leider der falsche. Der startet nur die Hilfe.

Der richtige Button, leider ein wenig unprominenter ins Auge fallend.

Dafür kommt die Hilfe aber dann direkter und helfender daher - keine extra aufpoppenden Fenster oder lange Texte - ganz im Flashzeitalter angekommen direkt dort, wo man sie haben möchte:



Läd man ein Foto hoch, erscheint im dafür vorgesehenen Feld die Prozentangabe des Fortschritts - ein Muss.
Allerdings hätte man sie bei dieser mikroskopischen Größe auch gleich ganz weglassen können:


Man braucht wohl eine Einladung, um bei Picabee mitmachen zu können. Auch das ganz Neuwebbig like im Guerilla-Marketing-Stil.

[GUIuiui] - Wortwolkengenerator

Wordle ist ein sehr schönes Java-Applet zum Erstellen von Wortwolken (Word-Clouds).
Man kann zwischen verschiedenen Fonts und Farbschemata wählen.
Und fast immer sieht die fertige Wortwolke künstlerisch ansprechend und "Wandkunstwerkverdächtig" aus.

Wie hier eine Wolke aus meinem letzten Eurovis-Paper:

[GUIuiui] - Fontsuchmaschine

Bei WhatTheFont kann man Fonts von Texten identifizieren lassen, die man zwar als Bild oder Screenshot vorliegen hat, deren Namen man aber nicht kennt, um sie beispielsweise in eigenen Arbeiten einsetzen zu können.

Man läd einfach ein Bild mit ein wenig Schrift hoch, identifiziert die betroffenen Buchstaben und der Algorithmus schlägt einem einige Fonts vor, die passen könnten.
Funktioniert nicht immer (so konnte ich so nicht den Font des "Schlag den Raab"-Logos finden) ist aber eine nette Hilfe.

[GUIuiui] - Sinnfreie Formulare

Was sich manche Entwickler so denken, wenn sie Formulare oder Dialoge aufsetzen. Wahrscheinlich eher weniger.

So hier zum Beispiel die Eingabemaske bei O2, um sein Wunschhandy am schnellsten zu finden, ohne die gefühlten 200 Handys einzeln begutachten zu müssen:



Da ist doch die Liste der Feature, aus denen man wählen kann, tatsächlich eine Listbox mit einfacher Auswahl.
Man kann immer nur ein Feature anwählen!
Nichts mit: ich hätte gern ne Digicam, UMTS und ein Farbdisplay.
Damit ist das ganze so sinnfrei wie ein Handyverkäufer ohne Haargel und mit Abitur.

Preisauswahl bei Amazon.de

Bei der Auswahl des Preises bietet sich das gleiche Trauerspiel. Nichts mit Eingabe einer Ober- und Untergrenze für die Handypreise.

Aber das kann Amazon auch noch toppen:

Wenn ich hier ein Produkt nicht nur in einem sehr eng abgesteckten Preissegment suche, sondern vielleicht was zwischen 50 und 300€, dann ist es schon vorbei mit der Usability.

[GUIuiui] - Design von Volkswagen

Wer sich ein wenig für Design, Corporate Identity und Schriften interessiert, der sollte den Beitrag im Fontblog zur neueren Geschichte des Designs der Marke Volkswagen lesen.
Dort erfährt man viel wissenswertes von der Geschichte des Logos, über das "Volkswagen Corporate Design Net" und die Hausschrift von Volkswagen.

[GUIuiui] - Neue Microsoft Fonts

Die neuen Fonts, die Microsoft im Office 2007 Paket mitliefert und standardmäßig in Word&Co nutzt, sind wirklich nützlich.
So man denn mit Word arbeiten muss, sehen die Dokumente jetzt nicht mehr 0815 aus - zumindest so lange nicht, wie sich kaum einer an das neue Erscheinungsbild der Nach-Arial-Zeit gewöhnt hat.

Jensen Harris stellt die Fonts Consolas, Calibri, Cambria, Constantia, Corbel und Candara auf seinem Blog vor (zugegebener Maßen in einem etwas älteren Beitrag).

Und wenn man diese Fonts auch ohne Office 2007 oder Windows Vista nutzen möchte, so kann man sie sich als ClearType Font Collection bei Microsoft herunterladen.

[GUIuiui] - Usability im Netz

Das ist ja auch mal lustig. Auf der Seite des Notepad++ (welches übrigens sehr gut zum XML-Dateien bearbeiten geeignet ist) hat man die Grundprinzipien des Web mal eben umgekehrt:

Nichtklickbare Überschriften sind blau(!) und unterstrichen(!) und Links sind dezent orange auf weißem Hintergrund.
Sind ja auch nicht so wichtig, die Links auf einer Downloadseite.

[GUIuiui] - Blogkritik

Das Layout von Blogs ist ja mittlerweile ein Thema für sich.
Es gibt sowas, wie einen kleinsten gemeinsamen Nenner: Alle Postings nach Erscheinungsdatum absteigend sortiert hintereinander weg.
Dann vielleicht noch ein paar Rubriken (meist unwichtig) und die Möglichkeit, bequem weiterblättern zu können (wird meist unterschätzt und vermurkst).

Für mich persönlich kommen dann noch Faktoren hinzu wie:
- gute Lesbarkeit (nicht zu kleine Schrift)
- gute Erkennbarkeit des Postingdatums (geht oft völlig unter oder steht manchmal auch gar nicht da)
- klare Trennung der Postings, damit man weiß wo welches anfängt
- automatische Benachrichtigung wenn man kommentiert hat und neue Kommentare hinzukommen

Wenn dann noch Werbeanzeigen hinzukommen, ist die Fähigkeit des Blogautors gefragt, das alles soweit in Einklang zu bringen, dass es unabhängig vom Inhalt ein lesenswertes Blog ist. Zwar steht der Inhalt immer und überall aus meiner Sicht an erster Stelle. Doch wenn dieser nicht einzigartig ist, hat man in der Masse der Blogangebote heutzutage schnell ein anders Blog gefunden, welches ähnlich spannend ist, aber aus Sicht der Usability und der Optik wesentlich angenehmer daherkommt.

Ein solches Negativbeispiel ist das Blog von Torsten Maue. Ich lese es sporadisch, weil er hier um die Ecke wohnt und eine vielleicht sowas wie gewisse Magdeburger Verbundenheit besteht.
Wenn ich mir aber die Gestaltung anschaue, bin ich immer ziemlich schnell wieder weg:



Da werden Google-Werbeanzeigen mitten in die Postings gepackt - ein No-Go aus meiner Sicht! Ein Abstand zum Text von 0px packt der Unlesbarkeit dann noch oben eins drauf. Das merkwürdige: Torsten hält in der Seitenleiste einen Platz für Anzeigen frei, der allerdings leer ist.
Und was sollen diese mehrzeiligen Icons unter jedem Posting? Die sind meist länger als die Postings selbst, verschwenden Platz, lenken ab und nerven einfach nur. Wenn der Autor will, dass seine Posting bei all den Diensten gelistet werden, kann er sie ja wohl selber hinzufügen.

Wenn man sich die Homepage hinter dem Blog anschaut, verwundert das vermurkste Aussehen des Blog allerdings wenigs: Das ist von "Promotion" die Rede, von "Toplists", "Suchmaschinenoptimierung", "Free-SMS" und "Content Napping".
Wenn man dann noch liest, dass der Autor sowas wie eine "Agentur" für Webseiten betreibt kann man nur den Kopf schütteln.

Nachtrag: Inzwischen wurde auf der Seite das Theme umgestellt. An der Lesbarkeit ändert dies allerdings nichts.

[GUIuiui] - Google-Maps-Fortschritte

Google Maps macht Fortschritte.
Eine Sache, die mich persönlich schon lange störte, war die fehlende topographische Darstellung. Sprich, man konnte sich nicht wirklich ein gutes Bild der Landschaft oder des Geländes machen, so wie man es aus Atlanten gewohnt ist, und wie es dort seit Jahrhunderten verfeinert und perfektioniert wurde.

Nun gibt es eine solche Darstellung:

[GUIuiui] - Analoguhr als Bildschirmschoner

Ich renne ja sonst nicht den ganzen Bildschirmschoner-Gimmicks hinterher und hatte bisher ein simples Schwarz.
Aber die analoge Klappuhr Fliqlo von 9031 ist mir sofort ans Herz gewachsen. Einfach, klassisch, unaufdringlich.



[via Fontwerk]

[GUIuiui] - Tutorial zur Illustration

Ich stöbere aus Forschersicht gerade durch die Welte der (medizinischen) Illustratoren. Dabei bin ich über dieses Tutorial zur Illustration mit Illustrator und Photoshop gestolpert.
Nur, falls mal wer selbst Hand anlegen möchte :-)

[GUIuiui] - Icons für Photoshop & Co

Im Photoshop-Weblog werden eine ganze Reihe Alternativen für die neuen Icons von Adobe für die CS3-Reihe präsentiert.
Ich muss sagen, mir gefallen die Originale sehr gut. Besser noch als die letzten Icons von Adobe, auch wenn diese nicht schlecht waren. Aber mir sagt man ja auch einen Hang zur Minimalistik nach, den viele schon wieder unschön finden. Da kommen zwei dezente Buchstaben wie "LR" oder "PS" mit einem leicht verlaufenden Hintergrund gerade richtig ;-)

[GUIuiui] - CD- und DVD-Maße

Nur mal, weil ich es eben schon wieder schnell brauchte:
Wer wissen will, welche Abmaße Cover und Inlays von DVDs und CDs haben, der schaut am besten auf dieser Seite hier vorbei. Dort findet man alles, was das Coverdesignerherz™ begehrt.

[GUIuiui] - Ähnliche Logos

Kommt nur mir das so vor, oder sieht das Logo unseres örtlichen Theaters in Magdeburg dem Logo des Goethe-Instituts wirklich verdammt ähnlich?

[GUIuiui] - WISO-Setup und der Geburtstag

Viel zu oft habe ich den Eindruck, Einwickler scheren sich einen Dreck um die GUI.
So auch beim Setup von WISO, welches ich gerade installiert habe. Dort hat man ohne nachzudenken ein Standard-GUI-Element eines Kalenders eingebaut, um dem Nutzer die Eingabe des eigenen Geburtstages zu ermöglichen.
Es sei mal dahingestellt, wie nützlich es ist, den eigenen Geburtstag durch monatsweises zurückblättern um 20 oder 30 Jahre im Kalender einzugeben, anstelle das wohlbekannte Datum mit maximal 8 Stellen einzutippen.
Aber dass dieser Kalender - für den Geburtstag des Benutzers wohlgemerkt - auch noch einen "Today"-Button hat ist ja nun wirklich die Virtualisierung der Sinnlosigkeit.

[GUIuiui] - Windows beenden

Im neuen Windows Vista scheint es über 15 Möglichkeiten zu geben, das System herunterzufahren (wenn man einen Laptop hat), hat Joel Spolsky herausgefunden.

Darauf hin hat sich einer der involvierten Entwickler von Microsoft, Moishe Lettvin, in seinem Blog zu Wort gemeldet und die gesamte Hierarchie, die Konflikte der verschiedenen Teams und seinen Leidensweg zu diesem Menu dargelegt. Ein sehr lesenswerter Beitrag. Vor allem der Hinweis belustigt dann schon:
"We had a Mac that we looked to as a paragon of clean UI."

[GUIuiui] - Design des WDR

Wie genau haben die Logos der Sender aus dem Hause WDR auszusehen? Welche Fonts werden für das Corporate Design genutzt? Und welche Farben?
Antworten darauf gibt das WDR Corporate Design Manual (veraltet!).

Nachtrag: Das Manual ist nach Aussage von Sabine Scharn vom WDR nicht mehr aktuell und wir derzeit überarbeitet. Wer immer auf dem aktuellsten Stand sein möchte, was das Design des WDR angeht, dem wird unter www.wdrdesign.de weitergeholfen.