Kategorie: Design

Usability: Dafür lohnt der Klick nicht

Die Wirtschaftswoche ist doch eigentlich eine renommierte Zeitschrift. Warum dann noch in der Usability 10 Jahre hintendran. Wenn man schon ein Bild zur Vergrößerung markiert, dann sollte das Bild idealerweise nicht in einem Popup erscheinen und idealerweise auch größer sein :-)

 

Daür lohnt es sich nicht zu klicken.

Google +1 (plus one) für Contao

Der neue “I like” von Google funktioniert in soweit relativ einfach. Eine Anleitung gibt es bei Google. Der Einbau in Contao geht auch problemlos. Für die gewünschten Seiten:

1. Im Seitenlayout-> Zusätzliche <head>-Tags -> das JS-script eingeben:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

2. Unter Einstellungen -> Erlaubte HTML-Tags – > <g:plusone> einpflegen

Nun muss man Contao mitteilen, daß der <g:plusone>-Tag zu den erlaubten Tags gehört und nicht automatisch entfernt wird. Dazu gibt man <g:plusone> in die Liste der erlaubten Tags ein. Dies geschieht im Backend bei den Einstellungen.

gplusone Tag im Backend erlauben

3. An gewünschter Stelle -> Neues Element (HTML-Code) – >

<g:plusone size="medium"></g:plusone>

Wenn man den Button anpassen will, dann muss er in ein <div>-Tag z.B:

<div style="margin-left:45px;"><g:plusone size="medium"></g:plusone></div>

[ Update: Wer den Text aus WordPress rauskopiert muss an die Anführungszeichen denken! WordPress macht daraus andere & ich weiß nicht wie ich das ändern kann]

Fundstück: Coole Navigation “wir machen das”

Eine sehr gelungende Navigation "Wir machen das"Durch Zufall auf  http://www.rudolfstudio.de/ gefunden. Einfach, klar, strukturiert und eine gute Idee.

Neue Seite online: Wäscherei Buchholz

Die neue Seite der Wäscherei Buchholz ist online. Zufinden ist sie hier – Wäscherei Buchholz. Das Design wurde ein wenig an die Partnerseiten, insbesondere des DRESS-Line Vebundes angepasst.

Gutes Design: Formular von remember the milk

gutes-formularDieses Formular besticht nicht nur durch seine Einfachheit, sonder auch durch intelligentes Design. Sehr gut gelöst sind mehrere Punkte:

Abgefragte Daten

Alle abgefragten Informationen sind verpflichtend, es entfällt also die Kennzeichnung der optionalen Felder. Die Anzahl der notwendigen Eingaben ist gering, im Idealfall muss der neue Nutzer 6 Eingaben machen: Vorname, Nachname, Passwort, Passwort, E-Mailadresse und Nutzungsbedingungen akzeptieren.

Intelligente Vorauswahl

Der Benutzername wird nach TAB oder klick  intelligent aus Vorname.Nachname erstellt. Diese Eingabe wird sofort auf Bestehen überprüft. Gut auch, daß der überpüfte Benutzername noch mal angezeigt wird (im Format  max.mustermann ist verfügbar). Vorausgewählt ist auch das Datumsformat, dies geschieht sehr wahrscheinlich IP-basiert.  Gut ist es hier eine Frage zu nutzen und nicht “Datumsformat” oder ähnliches. Verbesserungsvorschlag: noch den Monat auszuschreiben(FEB, JUL,  AUG etc.)  um Verwechslungen unmöglich zu machen. Gut ist wiederum, daß der Tag >12 (14. Februar) gewählt wurde und so eine verwechslung Monat/Tag erschwert.

Validierung

Alle Eingaben werden validiert.  Richtige Eingaben werden durch ein blaues Häkchen, Falsche durch ein orangenes X markiert. Wenn das Formular eine falsche Eingabe bemerkt wird der detailierte Grund neben dem Feld angezeigt.

Layout

Das Formular ist 3 spaltig von oben nach unten designed. Der registrieren Button ist relativ klein, aber dadurch, daß er bündig mit der mittleren Spalte anfängt als call-to-action erkennbar. Vielleicht könnte man den Button etwas länger machen (z.b. genauso lange wie die Eingabeboxen) um ihn herauszuheben. Interessant ist auch, daß die linke Spalte mit der Feldbeschreibung rechtsbündig formatiert ist und so direkt an der mittleren Spalte “anliegt”. Neutral ist die Position der letzten beiden Validierungen zu vermerken, die direkt nach der Eingabe kommen und mit der Formatierung der oberen 6 Zeilen nicht auf einer Linie liegt.

Gut auch die Kette Logo (incl. Firmenname), Signup, Formularkasten.