webthreads.de » Usability

Dark Patterns: User Interfaces Designed to Trick People

Markus Kühle — Mon, 31 Jan 2011 04:00:14 +0000

Ich denke viele kennen den Begriff “Design Pattern” als Vorlage wie man ein bestimmtes Problem am besten umsetzt. Aber wer kenn den Begriff “Dark Pattern”? Eine komplette Webseite, darkpatterns.org, behandelt das Thema wie mit User Interfaces getrickst wird. Auf den ersten Blick denkt man sich bei solchen manchen User Interfaces, dass es so einfach nur ein Fehler sein kann aber der eigentliche Grund dahinter ist reines Kalkül.

Normally when you think of “bad design”, you think of laziness or mistakes. These are known as design anti-patterns. Dark Patterns are different – they are not mistakes, they are carefully crafted with a solid understanding of human psychology, and they do not have the user’s interests in mind.

Eine Einführung in das Thema gibt auch die Präsentation direkt auf der Startseite.

Auf der Webseite sind einige interessante Beispiele, wie z.B. auch das Facebook Privatsphäre Thema, denn eigentlich könnte Privatsphäre so einfach sein.. aber möchte das Facebook überhaupt?

(Danke an Lars für die Info)

Einfachster Usabilitiy Test – erklärt und verwendet vom Usability Lab bei SinnerSchrader

Markus Kühle — Wed, 05 May 2010 04:00:01 +0000

Die einfachste Variante die Usability einer Webseite auszutesten ist eine Testperson, die in etwas den Zielpersonen entspricht bzw. die nicht mit der Webseite vertraut ist, einfach mal auf der Webseite herumklicken und das gewünschte Ziel erreichen zu lassen. Dabei steht man als Entwickler und als Verantwortlicher dahinter, schaut sich das sehr genau an und notiert sich jede Bewegung die einem auffällt. Interessant ist, dass die Testperson oft Sachen klickt oder nicht findet die man nie für möglich gehalten hätte. Alle Notizen werden anschließend ausgewertet und evtl. in die Usabiltiy Webseite eignearbeitet.

SinnerSchrader hat dieses Vorgehen schön in ein Video zusammengefasst, denn sie gehen auch so vor und erläutern das ansprechend in knapp 2 Minuten:

Diese Art zu testen ist die wirklich einfachste und schnellste – nur machen das am Ende doch die wenigsten.

Earth Hour 2010 – Big Picture mit Fade Effekt für vorher/nacher Ansicht

Markus Kühle — Wed, 31 Mar 2010 04:00:19 +0000

The Big Picture ist schon lange Bestandteil in meinem RSS Reader und diesmal lohnt sich der Blick auf den Artikel über die Earth Hour noch etwas mehr denn es wurde ein schöner Fade Effekt für die vorher/nacher Ansicht verwendet.
Für den Earth Hour Tag wurden auf der ganzen Welt bei bekannten Gebäuden für eine Stunde der Strom abgestellt bzw. die Beleuchtung abgeschaltet, wie im folgenden Bild der Petronas Zwillingstürme in Malaysia. Bei zwei exakt gleichen Bildern aus der gleichen Position bietet es sich natürlich erst recht an einen solchen Fade Effekt einzubauen.

Das schöne an diesem Fade Effekt ist, dass er mit JavaScript umgesetzt ist und als Beispiel für gute Usability bei Bildern ist. Noch vor ein paar Jahren hat man einen solchen Effekt grundsätzlich mit Flash umgesetzt. Ich habe vor kurzem genau diesen Fade Effekt mit der JavaScript Bibliothek jQuery umgesetzt und vielleicht zeige ich diese Umsetzung mit Anleitung demnächst mal hier auf webthreads.

GMail denkt mit wenn man vergessen hat den Anhang hochzuladen

Markus Kühle — Tue, 09 Mar 2010 05:00:50 +0000

Ein kleines aber sehr nützliches Feature bietet GMail wenn man auf einen Anhang verweist, diesen aber noch nicht hochgeladen hat. In diesem Fall fragt GMail noch einmal nach bevor die Email wirklich versendet wird:

Nett!

Entwicklung des YouTube Player Layouts über vier Jahre

Markus Kühle — Mon, 08 Mar 2010 05:00:59 +0000

Der Blog uxzentrisch.de hat sich mal die Mühe gemacht und die Entwicklung des YouTube Players zusammengesucht. Herausgekommen ist das Fazit, dass der Player im Grund seine Form behalten hat:

Mehr Gedanken zu der Entwicklung und die Links zu den Quellen findet man auf uxzentrisch.de im Artikel von Tobias Jordans.

12 Rich Internet Applications Layout Design Pattern mit über 80 Beispielen

Markus Kühle — Wed, 17 Feb 2010 05:00:16 +0000

Vor gut einem Jahr hat Theresa Neil, die Autorin von Designing Web Interfaces, ein Artikel erstellt indem sie 12 Standard Layouts für Rich Internet Applications zeigt und für jedes Layout mehrere Beispiele auflistet.

Den Artikel von damals kann man sich auch als PDF, welches viele Details enthält, herunterladen.

Jetzt hat sie diesen Artikel überarbeitet und als neuen Artikel auf uxmag.com mit der Überschrift “Rich Internet Application Screen Design” online gestellt. Neben der Aufteilung der verschiedenen Arten von Screen Designs wurden sechs Prinzipien herausgearbeitet:

Make It Direct
Keep It Lightweight
Stay in the Page
Provide Invitations
Use Transitions
React Immediately

Die über 80 Beispiele für die verschiedenen Screen Design, wie z.B. Master/Detail, Tabbed oder Search Results, sind diesmal in einer Präsentation zusammengestellt worden. Neben dem eigentlichen Artikel mit vielen Erläuterungen lohnt es sich diese mal durchzusehen:

Ich denke, dass sich die meisten immer noch viel zu wenig Gedanken rund um das User Interface, vor allem bei Web Anwendungen, machen. Von daher ist dieser Artikel doch schon mal ein sehr guter Anfang ;).

Filialsuche der Post mit Google Maps umgesetzt

Markus Kühle — Sat, 24 Oct 2009 12:27:28 +0000

Ich habe eben nach den Öffnungszeiten einer bestimmten Postfiliale in Mainz suchen wollen und war ganz überrascht wie sich die Postseite in Sachen Usability verändert hat. So ist neben der nun wesentlich übersichtlicheren Startseite (auf der man nun direkt die Möglichkeit hat Porto zu berechnen) auch die Filialsuche deutlich überarbeitet worden. Richtig überrascht hat mich allerdings die wirklich gut umgesetzte Google Maps Einbindung, wie im folgenden Screenshot zu sehen:

Auch sehr lobenswert ist die Übernahme der Suchparameter in die URL, so dass man die Suche einfach Bookmarken oder weitergeben kann. Falls einer die Filialen rund um den Bahnhof von Mainz braucht hier ist der Link ;).

Insgesamt eine wirklich sehr schönes Beispiel für eine sinnvolle Nutzung von Google Maps und einer guten Umsetzung.

Usability Features: Session Timeout Countdown und Infoboxen

Markus Kühle — Thu, 04 Jun 2009 06:00:38 +0000

Man darf ja auch mal etwas loben wenn es gut gemacht ist – in diesem Fall ist es ein klitzekleines Feature auf der Online Banking Oberfläche der ING-DiBa: der Session Timeout.
Gerade bei Online Banking ist ein Session Timout wirklich wichtig und wird oft relativ kurz z.B. auf 5 oder 10 Minuten gesetzt. Aktualisiert man lokal irgendwelche Sheets oder schaut in Rechnungen nach (oder was auch immer) und klickt in dieser Zeit nicht in der Online Banking Anwendung herum passiert es schnell, dass der Session Timeout greift und man sich neu einloggen muss. Und das ist wirklich nervig – gerade bei der ING-DiBa, die einen zweistufigen Login haben. Um so schöner ist es dass sehr schön der Timeout oben rechts heruntergezählt wird und farblich hervorgehoben ist wieviel meiner Session Zeit:

Ein wahrlich kleines Detail welches ich persönlich allerdings als wirklich sehr nützlich empfinde und es sich lohnt dieses auch noch hier zu notieren auf das es Nachahmer findet =).

Und in der Tat wurde ich am Ende sogar durch den angezeigten Session Timeout abgemeldet – funktioniert somit auch ;):

Hier noch ein weiteres kleines Detail was vorbildlich gelöst wurde: die Infobox. Viele Elemente haben ein eingerahmtes “i” nebendran stehen auf das man klicken kann und sich anschließend direkt eine kleine Infobox mit einer Kurzbeschreibung direkt auf der Seite öffnet. So ist es auch neben dem Session Timout Timer. Klickt man auf dieses “i” Icon bekommt man die Anzeige auch direkt erklärt:

Zwei sehr einfache Features die man auf dieser Seite wohl selbstverständlich hinnimmt aber leider findet man genau diese einfachen und wirklich nützlichen Features selten. Aus diesem Grund dachte ich mir, dass man auch mal ein Lob weitergeben kann =). Die ING-DiBa hat das schön gelöst und einen für den Moment glücklichen Kunden hinterlassen =).

Artikelempfehlung: Barrierefreie Formulare mit Html und CSS

Markus Kühle — Tue, 26 May 2009 07:00:12 +0000

Ich habe einen wirklich guten Artikel von der “Initiative der Aktion Mensch für ein barrierefreies Internet” über die Erstellung von Formularen mit dem Titel “Reine Formsache – Barrierefreie Formulare mit Html und CSS” gefunden und das muss ich einfach kurz weiterleiten. Der Artikel selbst ist relativ lang und erstreckt sich über mehrere Seiten aber wenn man sich mit dieser Materie beschäftigt sieht man das eher als schöne Ausführlichkeit an.

Hier die Unterteilung des Artikels:

Reine Formsache
Formulare sind der Kern interaktiver Angebote und Grundlage der Kommunikation zwischen Anbieter und Nutzer …
HTML-Elemente für Formulare
Die Grundfunktionen eines Formulars müssen mit allen möglichen Mitteln der Bedienung und der Ausgabe gelingen …
Formulardesign
Ein gutes Design unterstützt den Nutzer in der Bewältigung der Aufgabe …
Toleranz und Rücksicht
Gerade bei Formularen sollte man strikt in dem sein, was man ausliefert, und tolerant bei dem, was man akzeptiert …
Dynamik in Formularen
Dynamische Inhalte sind für viele Computer-Hilfsmittel ein echtes Problem …
Testen von Formularen und Web-basierten Anwendungen
Testen, testen, testen und immer an den Nutzer denken …
Strittige Punkte
Es gibt einige Punkte, bei denen selbst unter Experten und Betroffenen keine Einigkeit herrscht …

Auf den Artikel bin ich gestoßen weil ich wissen wollte wie man heute zu Formularen in Tabellen aufgrund des Layouts steht. Um dieses eine Teilthema aus dem obigen Artikel kurz vorwegzunehmen kommt hier mein Fazit dazu:
Heutige Browser unterstützen ohne Probleme CSS und somit können auch Formulare ordentlich mit Hilfe von CSS formatiert werden. Die falsche Verwendung von Tabellen als Layouthilfsmittel ist somit nicht mehr gerechtfertigt und kann sogar negative Effekte bei Hilfsmittel wie z.B. Screenreader hervorbringen. Vielmehr kann man Tabellen wieder wirklich im eigentlichen Sinn verwenden: nämlich als Datentabelle.
Natürlich gibt es auch hier eine Ausnahme denn hat man Daten die tabellarisch angezeigt werden und die man direkt bearbeiten sollen kann steht natürlich der Tabelle in dem Formular nichts im Wege.

Selbst wenn man nicht das Ziel hat eine perfekte barrierefreie Webseite zu erstellen ist dieser Artikel dennoch sehr zu empfehlen. Ich glaube er trägt einiges zum Verständnis für ordentliches Design und Entwickeln von Web Anwendungen bei.

9 verbreitete Usability Fehler bei Webseiten

Markus Kühle — Thu, 19 Feb 2009 21:00:24 +0000

Ich habe einen Artikel gelesen der genau das über die Fehler von Usability bei Webseiten aussagt die ich so wie sie da stehen übernehmen kann. Der Artikel “9 Common Usability Mistakes In Web Design” im Smashing Magazine behandelt exakt die Fehler die ich selbst als größte Usability Fehler bei der Entwicklung von Web Anwendungen sehe, die aber dennoch von vielen Entwicklern überhaupt nicht erkannt oder angenommen werden.

Im folgenden die neun im Artikel behandelten Fehler sowie eine Kurzbeschreibung von mir. Die Punkte die ich persönlich für sehr wichtig erachte habe ich fett hervorgehoben:

Tiny clickable areas: klickbare Bereiche sind zu klein und dadurch nicht deutlich erkennbar.
Pagination used for the wrong purpose: Pagination (Blättern) sollte wirklich nur da benutzt werden wo es Sinn macht. Angekreidet wird Pagination in Artikel wie z.B. Blog Artikel.
Duplicate page titles: Jede Seite sollte einen eindeutigen HTML Titel (< Element) besitzen. Nicht nur aus SEO Gründen sondern auch für die User ist das sehr sinnvoll.
Content that is difficult to scan: Überlade die Seite nicht und erstelle klare “Fokuspunkte”. Oft ist weniger mehr.
No way to get in touch: Stelle eine einfache Kontaktmöglichkeit her. Der “Kunde” (Webseitenbesucher) soll eine schnelle und einfache Möglichkeit bekommen Fragen zu stellen oder Probleme zu äußern.
No way to search: Schnell und einfach nach Inhalten suchen können. Oft weiß man noch die Webseite auf der der Artikel stand aber kann diesen nicht finden. Ist dann noch die Suche schlecht oder gar nicht vorhanden kommt man wohl so schnell nicht wieder.
Too much functionality that requires registration: Viele Features könnte man auch ohne Registrierung anbieten und somit Besucher der Webseite dazu bringen auch ein Statement, Bewertung oder abzugeben oder einfach nur noch einmal wiederzukommen.
Old permalinks pointing nowhere: Nichts ist schlimmer als ein Link auf eine 404 Seite. Hat man seine URL verändert oder den Link zu einem Blog Artikel sollte man den User so transparent wie möglich auf die neue URL umleiten. Dazu existiert extra der 301 Redirect Befehl des Webservers – so merken das auch die Suchmaschinen.
Long registration forms: Möchte man, dass sich Leute bei einem Registrieren sollte man dem User entgegenkommen und die Registrierung so kurz und so einfach wie möglich machen. An der Formel “Je länger das Formular umso weniger Registrierungen” könnte was Wahres dran sein.

All die hervorgehobenen Punkte sind mir, nicht zuletzt durch eigene Erfahrung, bei verschiedensten Projekten sehr deutlich geworden. Mittlerweile stehe ich auf dem Standpunkt, dass eine Anwendung so einfach und so benutzerfreundlich wie nur möglich sein soll. Oft denkt man viel zu kompliziert und möchte viele Möglichkeiten für den User bereitstellen aber letztlich ist die einfachste, vielleicht dadurch auch eingeschränkte, Lösung oft auch die beste.

Als einfaches Beispiel zur Verdeutlichung dient z.B. die Bewertung von etwas. Man kann einen User ohne Registrierung eine Bewertung abgeben lassen oder nur User bewerten lassen die auch registriert sind. Das die Akzeptanz für eine Bewertung viel höher ist wenn man sich nicht erst registrieren muss versteht sich von selbst. Möchte man also Bewertungen zu etwas haben sollte man nicht noch eine Hürde einbauen. Diese Beispielliste könnte man mit vielen Punkten fortsetzen.

In dem Artikel auf smashingmagazine.com sind zu jedem Punkt auch Beispiele mit Bildern vorhanden um die Überschrift zu verdeutlichen.

Und da wir schon bei der Usability sind verweise ich doch auch gleich noch auf einen weiteren wirklich sehr guten Artikel vom Smashing Magazine: 12 Richtlinien um den HTML Code sauber zu halten

Jeder Punkt ist mit einer Grafik beschrieben und es liest sich somit sehr flüssig. Generell treffen die Punkte der Liste (fast alle) genau die typischen Probleme bei der Entwicklung von HTML Seiten.

World Usability Day 2008 – Pragmatisches User Centered Design bei bahn.de

Markus Kühle — Fri, 14 Nov 2008 08:30:44 +0000

Gestern habe ich noch kurz berichtet, dass der World Usability Day 2008 stattfindet und heute habe ich auf dem Blog von namics eine kleine Präsentation über die Neuentwicklung von bahn.de durchgeblättert die gestern in Hamburg präsentiert wurde.

In der 32 seitigen Präsentation (ca 1.9 MB) wird unter dem Titel “Pragmatisches User Centered Design (UCD)” oder “Nutzerfreundlichkeit sichert die Geschäftsziele” auf die Entwicklung und das Vorgehen für die Neugestaltung von bahn.de unter dem Gesichtspunkt Usability eingegangen.

Die ganze Präsentation ist wirklich interessant und man darf gespannt sein ob die neuen Ziele für bahn.de erreicht werden. Bisher finde ich die bahn.de Seite auch sehr komplex und seit dem sie an der Stelle der Reiseangaben die Login Angaben platziert haben suche ich regelmäßig den Platz für die Reiseangaben..

Heute ist der “World Usability Day 2008″

Markus Kühle — Thu, 13 Nov 2008 12:30:22 +0000

Heute ist der World Usability Day 2008, wie manch einer bestimmt schon mitbekommen hat.

Usability wird dabei wie folgt beschrieben:

Usability, auch Gebrauchstauglichkeit oder Benutzerfreundlichkeit genannt, ist eine Produkteigenschaft, die definiert, wie einfach ein Produkt zu benutzen ist. Maßgebend dabei ist, wie

effektiv

effizient und

zufriedenstellend

man ein Produkt nutzen kann.

Im Radio habe ich heute morgen z.b. gehört, dass viele Leute (egal ob alt oder jung) mit der Usability von Handys große Probleme haben aber auch der Fahrkartenautomat der Bahn ein negatives Beispiel in Sachen Usability ist. Als positives Beispiel wurde z.B. die Packstation der Post genannt, was ich bestätigen kann: sehr einfach und simpel zu bedienen und dabei mit großem Nutzen.

Aber auch für Webanwendungen gerade im “Web 2.0″ ist Usability der Schlüssel zu den Usern. Viele unterschätzen dieses Thema oder machen den Fehler die User mit der angebotenen Usability zu vergraulen. Stichwörter dabei sind Komplexität, Unübersichtlichkeit oder aber auch Schlicht das unterschätzte oder falsch eingeschätzte Userverhalten.

In Deutschland gibt es eine ganze Reihe von Veranstaltungen die heute zu diesem Thema kostenlos angeboten werden.

Für mich wäre z. B. die Veranstaltung an der Fachhochschule Wiesbaden sehr passend aber leider klappt das jetzt zeitlich nicht. Vielleicht möchte ja der ein oder andere noch spontan dort teilnehmen. Beginn ist 15:30 Uhr.

(Vielen Dank an Lars für dieses Info =)