flying sparks ein Weblog von Tobias Jordans zu den Themen software designstudium web2.0 webdesign informationsdesign oekologie werbung usability tj video interfacedesign marketing // alle Themen...

Alle Funken für das Thema usability:

Mozilla Labs Design Challenge: 5 of 5 Designs fail

Mozilla Labs just asked everyone to vote for their favorite concept of the new home tab.

This is the last step of the Mozilla Labs Design Challenge in which users where asked to illustrate their ideas of the Hometab (Read more about it).

You may have a look at the 5 results after you added your eMail-Address to register yourself for voting.

This is why I am writing about it: I am sorry to say it but in my opinion all five designs fail to show a good, easy, usable concept for the hometab. I am sure everyone who contributed spend some time on their ideas (and the video they created for it) and that is a great contribution to the community (thanks!).

But from a UX and usability point of view those designs don't show a solution. Instead they are great examples of how to clutter an interface with tons of features and loose all simplicity in this process.

At least I dont see my hometab as a dashboard of widgets that show and pull tons of information on a small space, as one contribution suggested. If you want this, make your Netvibes Page or iGoogle Page your homepage. Or add yourself a weather-widget to you operation system. Dont look at the hometab as if there where no OS, Widgets and Apps around your browser. At least not until Chrome OS rules us all.

And I dont want it to be a copy of my social networks as well. I have my Tweet-App, Newsreader and all the other good apps for that. None of those apps could be as good as the apps that are already out there for years with their own community an user base. Try using Flock „the social browser" that no one uses.

And I dont want a hometab that changes every time I visit a website. Even Microsoft got it know that formulas that try to adapt to users behavior are much less effective than a UI that reinforces habits. When I am used to seeing my facebook-link at the bottom of the list I will find it there without thinking. Dont move everything around just because I use it.

That being said I voted with one 1 and four 0 on the challenge and hope, the UI-experts at mozilla will take over from here.

Its will be interesting to see if this kind of open source design will produce any mentionable results in the future. And how this design challenge will influence the community-process.

Von Game Design für User Experience Design lernen — Gute Präsentation/Zusammenfassung

Eine kurze Empfehlung:

Die Präsentation von Sebastian Deterding über Game Design ist sehr gut. Die beste Zusammenfassung für das Thema, die ich bisher gelesen habe.

Tipp: Vollbild anschalten und die Slidebescheibung in Ruhe lesen.

Update: 26.2.2010: Den Vortrag gibt es jetzt auch als Video. Leider klappt das AVI nicht, aber die Flashplayer Version funktioniert. Quelle: http://www.informatik.haw-hamburg.de/usability.html

Autodesk wechselt zum Ribbon mit Hilfe von PaperPrototyping und Statistik

Mit Office 2007 wurde das Ribbon eingeführt und mit ihm hat die User Experience und das User Centered Design bei Microsoft Office und viele anderen, ähnlich komplexen Programmen, Einzug gehalten.

Endlich hat man verstanden, dass es nicht darum geht, 10 Features mehr zu veröffentlichen, sondern die bestehenden besser zugänglich und leichter bedienbar zu machen.

Als Office 2007 eingeführt wurde, hat Jensen Harris über viele der Entscheidungen gebloggt (und ich wiederum über ihn). Die frühen Folger wie MindManager , die kurze Zeit später das Ribbon ebenfalls eingeführt haben, waren leider nicht so offen.

Autodesk dagegen teilt mit uns einige ihrer Erfahrungen! Zwar berichten auch sie erst nach dem fertigen Release von ihrem Prozess — dafür legen sie jetzt richtig los: Es gibt schon zwei Blogs (1, 2) die sich mit User Experience für Autodesk befassen und Artikel wie „The Foundation of a Great User Experience" , die zeigen, dass Autodesk sich die volle UX-Spritze gesetzt hat :).

Video 1: Der Prozess zum neuen Interface mit Magneten, Papier und Statistik.

Was hat Autodesk also gemacht? — Sie haben alle Menüeinträge/Befehle auf Magneten geschrieben und auf einem Whiteboard arrangiert und kommentiert.
Das ganze fand irgendwo statt, wo alle Kollegen immer auf den Stand der Dinge schauen konnten um Kommentare abzugeben und mitzumachen. — Ein wichtiges Detail, wie ich finde, schon allein um die Akzeptanz einer solch großen Änderung im Unternehmen zu steigern.

Auf diese Weise konnten sie verschiedene neue Gruppierungen für das zukünftige Ribbon austesten. Die Zwischenschritte wurden über Fotos dokumentiert.

rubbon autodesk commands
Schritt 1: Die Informationsarchitektur schaffen.

Anschließend wurden Prototypen des neuen Ribbon erstellt und getestet. Zuerst waren es Papierprototypen, dann inaktive Webseiten und später erste Softwareprototypen. Alle wurden mit Kunden getestet.

Viele Tests wurden dabei remote durchgeführt um Zeit zu sparen. Zudem gab es „validation tests" — wahrscheinlich sind damit Langzeittests unter realen Bedingungen gemeint.

autodesk ribbon paper prototype
Schritt 2: Testing auf allen Wegen (Papier, Web, Software)
Mehr über die Testmethode und den Auswahlprozess.

Die Rückmeldung von Kunden war, dass sie sich über die vielen neuen Funktionen in der Software freuen würden. Damit hat Autodesk die gleiche Erfahrung gemacht wie zuvor Jensen Harris in Office 2007: Eine sinnvolle Neuanordnung von Funktionen in Aufgabenbezogenen Gruppen, schafft eine Transparenz, die es den Kunden erlaubt, mehr Funktionen zu sehen und zu verwenden. — Denn bei beiden Applikationen wurden kaum neuen Feature eingeführt; sie wurden nur besser präsentiert.

Die Entscheidungen, welche Funktionen in welcher Größe im Ribbon dargestellt werden, wurde auch bei Autodesk auf Basis von Kundendaten getroffen. Im Video sieht man in Minute 2:35 verschiedene Diagramme, die die Nutzungshäufigkeit von Funktionen widerspiegeln. Auf Basis dieser Informationen konnte man entscheiden, welche Funktionen/Button wie groß dargestellt werden sollen.

autodesk ribbon data
Schritt 3: Finetunig auf Basis von statistischen Daten

Video 2: Das neue Interface in Aktion mit neuen Funktionen für Einsteiger und Experten.

Mit diesem Video bekommt man einen guten Eindruck von der Funktionsweise der neuen Ribbon-Oberfläche.

Zwei Dinge sind mir besonders aufgefallen:

Zu Einen wurde neuen Nutzern der Softwareeinstieg sehr viel leichter gemacht. Zum Beispiel sind die neue SuperTooltipps (mehr) ein tolles Hilfsmittel, um eine Funktion schnell zu verstehen und zu erlernen. Ebenso das Paradigma von Office2007, Effekte und Funktionen mit möglich hohem visuellen Feedback anzubieten. In diesem Fall betrifft das den Wechsel von reinen Text-Listen zu Vorschau+Text-Listen.

autodesk super tooltipp
SuperTooltipps erklären über Text und Bild (Quelle)

Auf der anderen Seite fallen kleine Details auf, die das Autodesk-Interface von dem Office 2007-Interface unterscheiden. Zum Beispiel die Möglichkeit, das Ribbon in zwei Stufen zu verkleinern. Ein kluger Schritt, wie ich finde, da Autodesk im Vergleich zu den Officeprodukten eine größere Experten-Nutzerschaft hat, die mit solche Detailfunktionen gut klarkommen werden.

In RobiNZ CAD Weblog erfährt man von weiteren solcher Expertenfunktionen. So soll zum Beispiel möglich sein, die „Menüs" zu personalisieren. Diese Funktion wurde in Office2007 bewusst deaktiviert — für die Akzeptanz von AutoCAD durch seine Expertencommunity, kann sie jedoch durchaus von entscheidender Bedeutung sein. Auch, wenn dadurch die Software komplexer wird.

Fazit:

Was User Experience und Usability vom Industrial Design lernen können

Henrik Arndt hat auf der IA Konferenz 2007 einen Vortrag „Der unvermeidbare Einfluss der Informationsarchitektur auf die User Experience jenseits der Usablity" gehalten, den man sich bei SlideShare anhören/angucken kann.

Seine Nettobotschaft ist schnell zusammengefasst: Es gibt keine reine Usability, alle anderen Faktoren müssen mit betrachtet werden bzw. beeinflussen gewollt und ungewollt ein Produkt.

Gut gefallen hat mir dabei die Herleitung am Beispiel des Industrial Designs, die er mit einigen guten Beispielen spickt.

Unten meine eigenen Stichworte als Schnell-Zusammenfassung.

Stichworte:

Buttongestaltung in Webformularen im Usability-Test

Primary & Secondary Actions in Web Forms

Das hat mich schon immer interessiert! Die als letzte dargestellte Variante wäre mein Favorit gewesen. Meiner Meinung nach sollte die Primäraktion stark von der Sekundäraktion getrennt werden. Und eigentlich sollte damit die letzte Variante diejenige sein, die am Besten abschneidet. Ganz so einfach ist die Welt aber nicht.

Kurz zusammengefasst:

  • Die erste Variante (und damit die konventionellste) schneidet am Besten ab, wenn es um Schnelligkeit geht.
  • Die letzte Variante ist nur dann zu favorisieren, wenn es nicht um Schnelligkeit geht, sondern darum, die Wahl zu vereinfachen und deutlicher zu machen.

Alle Ergebnisse im Detail inklusive Eyetracking und weitere Varianten gibt es im Artikel Primary & Secondary Actions in Web Forms von LukeW.

Diesen Artikel hat Niels in unserem internen Blog gepostet und da er den Kern trifft und ich ihn nur hätte nachtexten können, zitiere ich lieber gleich ganz.

Ich war wirklich erstaunt über dieses Ergebnis von LukeW, das auch seinen älteren Aussagen zu diesem Thema, über die ich nur am Rande bloggte, in gewissen Anwendungsfällen widerspricht.

Die einzige Erklärung, die ich für dieses Ergebnis habe, ist, dass die Ausbildung von Gewohnheiten (hier: „bei zwei Button unter einem Formular ist der linke der ‚Gute'") einfach viel zu stark ist. Neue Methoden funktionieren zwar und mögen sogar Vorteile haben, noch sind sie aber nicht allgemein empfehlenswerter als die gewohnten alten.

PS: Eine Frage am Rande: Ich habe für dieses Posting ein Zitat von Jacob Nielsen gesucht von dem ich sich war, dass er es einmal geschrieben hat. Sinngemäß sagt es, dass ein neues Interface nur Sinn macht, wenn es 100% besser funktioniert als das alte. Leider konnte ich nichts dergleichen bei useit.com finden — irre ich mich?

Paper Prototyping-Artikelsammlung

Seit dem Continuity-Seminar versuche ich verstärkt, die Methoden des Paper Prototyping umzusetzen. Warum? Weil wir beispielsweise erst mit Hilfe der vielfältigen und leistungsstarken Methoden, die man diesem Schlagwort zuordnet, unser Abschlussexperiment, die Neukonzeption des Interfaces für den DB-Fernverkehrsautomaten, umsetzen konnten.

Aber was ist Paper Prototyping?

Shawn Medero beschreibt das aktuell bei A List Apart (via Tim). Der Artikel geht nicht gerade in die Details und betrachtet auch nicht alle Möglichkeiten, gibt aber einen guten Überblick.

Insbesondere die Beispiel-Scans/Fotos solltet ihr euch anschauen, da sie offen-sichtlich machen, worum es geht und wie Paper-Prototypen im Prinzip funktionieren.

alistapart.com/articles/paperprototypingPaper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces
Amazon search inside

Wer wirklich mehr über das Potential von Konzeption, Entwurf und Testen mit Stift und Papier wissen möchte, sollte ich das Buch Paper Prototyping von Carolyn Snyder zulegen! Es scheint das Standard-Werk zu sein, gehört inzwischen auf meinen coffee table.

Dieses Buch empfielt übrigens nicht nur Shawn in seinem ALA-Artikel, sondern auch Jensen Harris in seinem Office User Interface Blog. In dem Artikel Paper Prototypes beschreibt er, wie das Office 12-Team auf die Idee für das radikal neue Office-Interface gekommen ist.

Jensen zeigt damit auch, wie vielfältig Papier-Prototypen ausgelegt werden. Es geht nicht nur um Stift und Papier, sondern auch um Interface-Ausdrucke, wie er auch in The Wall of Ribbons beschreibt und zeigt.

Persönlich reizt mich an dieser Arbeitsweise, dass die Arbeit mit Stift und Papier immer noch viel intuitiver ist, als den Umweg über Software zu gehen. Trotzdem gibt es auch gerade hier viel zu lesen: Jensen Harris schreibt über Prototyping With PowerPoint und bei boxesandarrows kann man über Prototypenentwicklung mit Dreamweaver und Visio lesen. Gerade was die PowerPoint- und Dreamweaver-Verwendung angeht, bin ich skeptisch :).

Vielversprechender dagegen finde ich den Ansatz von Prof. James Landay: DENIM Einmal, weil er mit Tablet-PCs arbeitet und somit die praktische Stifteingabe berücksichtigt. Zum Zweiten aber auch, weil sein Ansatz den gesamten Prototyping-Prozess in einer Anwendung berücksichtigt. In welche Richtung das geht, zeigen seine Videos.

Doch wieder weg von der Software:

In dem Artikel An Introduction to Using Patterns in Web Design beschreibt Ryan Singer schon 2004, wie er durch Papierskizzen seinen Konzeptionsprozess beschleunigt und anschließend direkt in die Umsetzung springen kann.

In den Kapiteln There's Nothing Functional about a Functional Spec und Don't Do Dead Documents des Getting-Real-Buchs, das ja bekanntlich inzwischen kostenlos online steht, geht 37signals ebenfalls auf diesen Vorteil ein: Im Rahmen des Feldzugs gegen Spezifikationsdokumente werden die Chancen der schnellen Papierskizze hervorgehoben: Build, don't write. If you need to explain something, try mocking it up and prototyping it rather than writing a longwinded document.

flow|state beschreibt noch einen anderen Vorteil in dem Artikel Matching design sketches to the desired level of design feedback. Kurz gesagt: Zu hübsch kann nachteilig sein, da es den Blick vom Konzept hin zu visuellen und unwichtigen Details (ab)lenkt. Schaut euch die vier Beispielbilder des gleichen Interfaces an und ihr versteht, worauf Jan Miksovsky hinaus will.

Und wen das alles noch nicht überzeugt hat: Auch Jakob Nielsen finden Paper Prototypen gut — wenn das kein Argument ist? ;-)

Tastaturdesign #2 und capsoff.org

Mein Artikel Tastaturdesign bekam im Laufe der Zeit vier Updates erhalten und zwei interessante Kommentare.

Zusammengefasst handelt Artikel #1 von den beiden Tastaturbelegungsansätzen Qwerty/Quertz (aktuell) und Dvorak (besser), berichtet von Menschen die wirklich umgelernt haben, linkt auf die Entstehungsgeschichte beider Ansätze und in den Kommentaren zu speziellen deutschsprachigen Optimierungsansätzen.

Matthias Schroeder (von Schroeder+Wendt) beschreibt in seinem „Interface Design und Usability Blog" jetzt zwei weitere interessante Lösungen, die ich unten zitiere.

Unten findet ihr außerdem einen Hinweis auf die capsOFF-Kampagne gegen die Capslock-Taste!

weitere alternative Ansätze

TypeMatrix 2030 ist an einigen Stellen radikal, an anderen gewöhnlich. Das Promo-Video (YouTube) zeigt recht gut, was verändert wurde:

Schön ist, dass es sowohl ein Qwerty- als auch ein Dvorak-Layout gibt. Dem Rückgaberecht bei Unzufriedenheit vertraue ich dabei jedoch nicht ganz. Auch wenn die Firma schon länger im Bereich der Tastaturoptimierung arbeitet, wie dieser Vergleich von TypeMatric 2020 vs. 2030 zeigt.

Was das Verkaufsversprechen für die 110 $ teure TypeMatrix angeht, Benutzer würden ihre Tipp-Schmerzen loswerden, stimme ich Matthias nur zum Teil zu: Das Problem haben nicht viele, ein paar jedoch schon. Jensen Harris und Geoffrey Grosenbach zum Beispiel wie im Artikel #1 erwähnt. Mich interessiert auch eher der Geschwindigkeits- und Entspannungsvorteil dieser Layouts. Dabei spielt aber meiner Meinung nach die grade oder versetzte Anordnung der Tasten keine Rolle.

Nett ist auch die Idee der combimouse die Matthias zeigt.

combimouse.com

Auch hier gibt es Video — leider ist es viel zu kurz und zeigt nur wenige Bewegungen, die es mir nicht ermöglichen, die Bedienungsqualität zu beurteilen…

CAPSoff-Kampagne

Zufällig war das gestern noch Thema auf einer Party: Als ich sagte, dass die Capslock-Taste verboten gehöre, weil sie total Sinnlos sei, fand ich mich prompt in der Defensive wieder und musste mich rechtfertigen, wie ich es wagen könne, etwas weg nehmen zu wollen, das eventuell jemand auf der Welt nutzen könnte.

Quatsch! Die Taste ist auf 99,9% der Tastaturen nutzlos und in noch mehr Fällen richtet sie mehr Schaden an, als sie gutes Tut — und sei es nur der Zeit-Verlust durch nötige Korrekturen.

Jacob Nielsen würde jetzt wahrscheinlich (wie damals bei Antialiasing von Text) ausrechnen, wie viele Millionen eine Volkswirtschaft im Jahr durch die böse Capslockstaste verliert…

Pieter Hintjens geht einen anderen Weg, wie ich heute über diesen Spiegel-Artikel (Danke Manuel) erfahre. Er startet die CAPSoff-Kampagne und möchte 1 Million Dollar sammeln, um sie dem zu geben, der eine bessere Tastatur gestaltet.

In seinem Blog zur Aktion ließt man über die unterschiedlichen, meist emotionalen Reaktionen auf sein Vorhaben sowie davon, dass in diesem Zuge auch die nahezu funktionslosen Print, NumLock und ein paar andere Tasten verschwinden sollen.

Ich habe dieses Problem übrigens für mich persönlich schon vor 2 Jahren behoben, als ich nach einiger Recherche den tollen Artikel von T. Haller fand: Disable Caps Lock (mittels eines Registry-Eintrags)

PS: Ich wünschte, Hintjens würde in diesem Zuge gleichzeitig dafür sorgen, dass eine neue Standard-Tasten eingeführt wird: Arbeitstitel „Second-F-Function"-Taste. Ich ärgere mich jedes Mal, wenn ich an einer der Microsoft- oder Logitech-Tastaturen sitze. Zwar wurden dort tolle neue Funktionsbelegungen für die F-Tasten ersonnen, diese jedoch mit einer typisch-modalen „F-An/Aus"-Taste versehen. Warum ließt dort eigentlich niemand Jef Raskin?

[tag]tastatur, ergonomie, kampagne, hardware, produkt, usability, raskin[/tag]