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 interaktion:

5 interessante Interfaceschnipsel aus dem neuen Backpack

37signals hat eine neue Version von Backpack veröffentlicht (Preview-Artikel 1, 2, 3) und es gibt fünf Dinge, die man aus Interface- und Konzept-Sicht einmal bewusst wahrgenommen haben sollte:

Der (neue) „Blank Slate"

Blank Slate nennt 37signals in ihrem Buch den Zustand einer Seite, in dem noch keine Informationen eingetragen wurden. In der Vergangenheit, haben sie häufig mit Demo-Content als Screenshot gearbeitet, jetzt wird — grafisch schön oder zumindest auffällig umgesetzt — auf die Neues-Element-Links hingewiesen.

backpack drop page
(aus dem Video MOV)

In dem älteren Hilfe-Video über Tags (MOV) sieht man, wie diese Funktion vorher gelöst war:

backpack new-links

Das verbesserte und erweiterte Drag & Drop

Man kann Seitenelemente jetzt per Drag & Drop auf der Seite aber auch zwischen Seiten und in neue Seiten verschieben. Das Interaktionsverhalten ist dabei sehr gut im Detail umgesetzt: Die Bewegung des markierten Elements, das Highlighting der Zielseite, der Hilfetext OnMouseOver, der Ladebalken beim Verschieben, …

Besser als der Screenshot, ist das Video (MOV):

backpack drag and drop

Die optimierte „Give this page a name"-Funktion (neue Seite)

Typisch für 37signals und ihr Bestreben, die Arbeit so einfach wie möglich zu machen, ist das Verhalten beim Erstellen einer neuen Seite: Der Title ist direkt im Edit-Modus, es gibt kein eigenes Label sonder der Inhalt dient als Beschreibung, ist aber direkt markiert, so dass man direkt seinen Titel eintippen kann und mit Enter die Erstellung abschließt.
Genau das meint Raskin, wenn er in seinem Buch von der Minimierung von Interaktionsschritten spricht (Stichwort KLM).

backpack page title
(auch aus dem Video)

Die richtig versteckten Funktionen Edit, Move, Delete und Rename

Nicht wirklich neu aber gut gemacht: Basecamp versteckt die Bearbeiten-Funktionen für seine Seiten-Elemente so lange, bis der Benutzer mit der Maus über ein Element fährt.

Sehr gut sieht man das in dem Demo-Video (MOV) über das Verschieben.

backpack move

Der große Vorteil: Die Backpack-Seiten sind im Standard-Zustand sehr übersichtlich, es kann auf eine eigene Admin-Umgebung verzichtet werden (getreu dem Motto „one interface") und der Benutzer muss nur eine Interaktionsmetapher lernen: Die bearbeiten-Funktionen im Content-Bereich stehen onmouseover links neben der Überschrift.

Einziger Schönheitsfehler: Die Funktionen sollten meine Meinung nach auch dann erscheinen, wenn man mit der Maus links von der Überschrift ist. Im Video sieht man, dass bei vielen Verschiebe-Aktionen, ständig die ungewohnte Umweg-Bewegung über die Überschrift gemacht werden musste.

Das Thema OpenID und Open Bar

Dem Thema sollte man eigentlich einen ganzen Post widmen, weil 37signals mit ihrer OpenBar eine gute und sehr schön anschaulich-praktische Integration von openID umgesetzt haben. Kurz gesagt: Sie nutzen openID als (externe) single-sign-on-Lösung für ihre Produkte und beginnen ihre bis dahin mäßig vernetzen Einzelprodukte über die OpenBar zu verknüpfen.

[tags]37signals, raskin, openid, interaktion, drag-and-drop, webapplikation, interfacedesign, continuity,klm, blank-slate [/tags]

Warum verstecken wir alle den Datepicker?

Ich fühle mich schon ein bisschen vorgeführt, wenn ich im 37signals-Produktblog eine so einfache und bisher unerreicht schnelle Lösung für das schnelle Eingeben von Datumwerten sehe:

Den Datepicker-Kalender einfach nicht verstecken sondern immer anzeigen… — genial einfach :-).

datumsauswahl in basecamp

Warum sieht man das eigentlich zum ersten Mal? Sicher auch, weil kaum ein Interface so reduziert konzipiert wird, wie bei 37signals. Dann kann man es sich auch mal leisten, für eines der wichtigen Formularelemente etwas mehr Platz zu nutzen.

Nebenbei: Meine eigenen Ideen mit JavaScript-Spielchen die textbasierte Eingabe zu beschleunigen, habe ich leider immernoch nirgends umgesetzt zu sehen. Das wäre im Übrigen auch der wichtige Verbesserungsschritt, den ich jetzt im Basecamp-Interface sehe: Den „Due: June 12, 2007"-Text durch ein Inputfeld zu ersetzen, in dass man auch per Hand Daten reinschreiben/-pasten kann.

Und wenn man dafür keinen Platz hat?

Auch dann kann man die Klick-Arbeit und -Zeit noch reduzieren. Yahoo hat nämlich ebenfalls mit einer Quasi-Konvention gebrochen und zeigt die Datumsauswahl nicht „OnClick auf Button" sondern „OnFocus in Textfeld" an. Wieder einen Klick und damit 10.000 $ pro Jahr gespart, wie Jacob Nielsen sagen würde ;-).

datepicker bei yahoo yui

Im Übrigen ist der Yahoo-Kalender auch sonst sehr gut optimiert und damit sogar dem OpenSource-Quasi-Standard vorzuziehen.

PS: Zum Schluss noch etwas Visuelles und Technisches für Interessierte.

[tags]javascript, gui, benutzereingabe, datum, interaktion, interfacedesign, optimierung, 37signals[/tags]

Ist die Mausbewegung eine relevante Information?

Auf dem gestrigen (wieder sehr schönen) Webmontag kam das Gespräch mit Oliver auf das Thema Mausbewegung und Klickverhalten.

Liest man die Mausbewegung und Klickposition aus, kann man offensichtlich recht einfach, eine Heatmap daraus erstellen. Das zeigt zum Beispiel crazyegg.com. Man darf den Informationsgehalt dieser Darstellung jedoch nicht mit der typischen Verwendung von Heatmaps zur Visualisierung von Eye-Tracking-Daten verwechseln.

Beim Eyetracking ist die Aussage:

Augenbewegung/-fixierung = Aufmerksamkeit. Man kann also etwas über die Wahrnehmung: Gewichtung, Scan-Verhalten und das Zentrum der Aufmerksamkeit (vgl. Raskin) erfahren.

Beim Maustracking dagegen:

Mausbewegung != Aufmerksamkeit.

Den Informationsgehalt hier sehe ich eher auf Detailebene: Betrachtet man nur eine einzelne Listendarstellung, klickt der Benutzer eher links/rechts in den Weißraum oder auf einen Anfasser? An welchen Stellen verklickt er sich (bzw erwartet er eine Interaktion?).

Wirklich wertvolle Informationen erwarte ich dabei eher bei interaktionsreichen/desktop-artigen Webanwendungen — das Beispiel von crazyegg dagegen (oben Rechts auf Heatmap klicken) bleibt hinter seinen Möglichkeiten und ist nur eine besserer Zahlen-Visualisierung…

crazyegg.com/snapshots/report

Klickverhalten und Wahrnehmung:

Interessant in diesem Zusammenhang sind die beiden Click-Surveys von blog.outer-court.com (Old Survey, New Survey), die überzeugend einfach zeigen, wie vorhersehbar unsere Wahrnehmung unser (Click-)Verhalten bestimmt…

blog.outer-court.com/click2

[tag]heatmap, statistik, interaktion, wahrnehmung, raskin, umfrage, hci[/tag]

Multi-Touch-Screen — Geschichte, Zukunft, neues Video

Es gibt ein neues Video des Multitouch-Screens von Jefferson Han.

FastCompany.com stellt es zusammen mit einem sehr guten Artikel „Can't Touch This" vor.

Schön zusammengetragen, stellt Adam L. Penenberg für FastCompany Han's* Lebensgeschichte und die Entwicklung seines Multitouch-Screens vor.

Dabei muss ich die zeitlichen Angaben aus meinem letzten Multitouch-Post korrigieren: Erst war die TED-Präsentation, dann das YouTube-/Perceptive Pixel-Video. Jedoch wurde die TED-Präsentationen erst als 2. veröffentlicht.

Neben dieser Firmen- und Entwicklungsgeschichte von Han und Perceptive Pixel ist auch interessant, welche Mitbewerber, Künstler und Professoren sonst noch so im Multitouch-Umfeld forschen.

Ich hoffe nur, es gibt schon bald bezahlbare Konsumenten-Screens :-).

*) Denglisch ist hier besser lesbar :).

Update 07-03-20 via Fabian: Ein Video das zeigt einen Ansatz, wie ein Interfacedesign speziell für Multitouchscreens aussehen könnte

Update 07-03-21 via infostetics: Jeff Han wird direkt interviewt und zeigt, was sein bisher größter Multitouchscreen kann. Ich finde: Das aufschlussreichste und natürlichste Video bisher.

2. Multi-Touch Interaction-Video

Anfang des Jahres ging es wie ein Lauffeuer durch die Bloggosphäre und obwohl diese Metapher gut zu flyingsparks gepasst hätte, habe ich mir das x-te me-too-Post gespart.

Jetzt gibt Tamim mir mit seinem Hinweis auf dieses inzwischen auch wieder 2 Monate alte zweite Video der Multi-Touch Interaction Research von Jeff Han: Auf TED-Talk gibt er eine kommentiere Live-Präsentation.

Wer das erste Video kennt, sieht visuell nicht viel Neues, hört aber, was Jeff Han dazu zu sagen hat und erlebt ihn persönlich an seinem genialen Touchscreen…


(Auch direkt auf der TED-Talk-Website)

PS: Die TED-Talks erweisen sich überhaupt als ziemlich interessant.

Via Interface Design und Usability Blog:

Und schon wieder ein MultiTouch-Interface. Dieses allerdings mal nicht von Jeff Han, sondern von Daniel Lüthi und Christian Iten. Wie die Namen schon ahnen lassen, handelt es sich hierbei um zwei Schweizer genauer gesagt, zwei Studenten vom Interaction Design Studiengang der Hochschule für Gestaltung und Kunst in Zürich.

Das Besondere: Im Gegensatz zu Han’s Konzept, können bei diesem Interface jedoch noch real existierende Objekte mit einbezogen werden. Im Video gut zu sehen: Ein frei platzierbarer Drehknopf, mit dem sehr effektiv Menüpunkte ausgewählt werden können.

JavaScript-Datumsauswahl

Ich glaube, ich habe jetzt eine Antwort auf meine zwei Monate alte Frage „Wie sähe ein optimales Datums- oder Zeit-Eingabefeld aus?„:

JavaScript-Autocomplete…

Mein ursprünglicher Gedanke war ein einfaches Inputfeld das zu Beginn so aussieht [_00.05.2006_]. Klickt man rein, wird alle markiert. Fängt man an zu tippen, werden die Zeichen von vorn beginnen ersetzt (die Punkte bleiben aber immer stehen), so dass man immer im richtigen Format ist, jedoch Komfort und Geschwindigkeit eines einzelnen Feldes und des Monats- und Jahres-Vorschlages erlebt.

Unglücklicherweise scheint noch niemand auf diese Idee gekommen zu sein, was zu zwei Problemen führt: 1. Finden man kein Script im Netz, 2. könnte das Verfahren für den Benutzer zu ungewohnt sein…

AndyBudds Post über „Select Box Usability Madness" hat mich jetzt auf eine andere Fährte gebracht: Autocomplete. Für ein Problem wie Andys ist Autocomplete ideal: Ein einfaches Feld und sobald ich „England" eintippe kann das System mit „United Kingdom" reagieren (wenn England unerwünscht ist). Man kann durch das AutoComplete viel mehr Fehlerkorrekturen einbauen und sie vor allem vor dem User verstecken.

Das Gleiche geht auch für Datumsangabe: Zu Beginn steht Grau 00.05.2006 im Feld. Klickt man hinein wird der Text selektiert. Beginnt man zu Tippen, zeigt einem das JavaScript-Autocomplete, wie das Datum in der Form, die man zur Eingabe gewählt hat, aussehen würde. Im besten Fall muss ich so nur 1 Zeichen eingeben (Tag) und kann den Rest aus dem Autocomplete wählen. Für Tag und Monat wären es dann maximal 4 Zeichen (wenn Punkte automatisch gesetzt werden).

In der Yahoo-Interface-Library gibt es ähnliche (textbasierte) Picker zum Test und Download. Genauso bei Script.aculo.us (Beispiel).

Kombiniert man dieses schnelle tastaturbasierte Verfahren mit einer visuellen Datumsauswahl, kommt jeder Benutzertyp schnell zum Ziel.

Update 06-05-31: Ajax in JavaScript umbenannt. Siehe Kommentare.

Office-UI-Video

Jetzt habe ich schon so oft darüber gebloggt, dann gehört dieser Link auch hierher: The New Microsoft Office User Interface Video

Positiv: Das Video bestätigt: Die Interaktion läuft flüssig und die Performance scheint gut zu sein. Auch das neue Screendesign scheint im Liveeinsatz besser zu funktionieren als der Screenshot vermuten ließ.

Negativ: Auch diesmal hat MS es nicht geschafft, ästhetische Templates zu gestalten. Was bitte ist an diesem „super coolen" Footer cool? Auch bei den neuen Chart-Templates steckt die (un)schönheit im Detail. Bisher macht es alles den Anschein, als ob die Entwickler selbst „kreativ" waren und bei den Effekten mehr gleich besser war… Vielleicht ist es auch nur der US-Gestaltungsgeschmack der mich stört… Ich fürchte jedoch eher: Office bleibt halt MS… ;-)
[via Office UI Blog]