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...

Tipp: RSS-Icon RSS-Liste der Artikel, der Link-Empfehlungen und Kommentare.

Zu meinem Lieblingsthema 'User Experience' schreibe ich bei uxzentrisch.de.
Was mich aktuell beschäftigt, könnt ihr bei Twitter @tordans und in meinen Links Delicious/tordans/ lesen.

schönes Interaktionsdesign bei Adobe »Thermo«

Auf der Adobe Max-Konferenz in Chicago wurde am Dienstag ein neues Adobe-Produkt vorgestellt Codename „Thermo".

Wenn Flex die Weiterentwicklung von Flash für Programmierer ist um ihnen bessere Kontrolle über den Code zu geben und die Lücke zwischen Code-Software und Flash schließt, wird Thermo wohl etwas ähnliches für Designer sein. Die Idee ist, beispielsweise Photoshop-Dateien direkt in Thermo öffnen zu können, um mit einem visuellen Editor die Grafik in Flex-Files umzuwandeln und rudimentäre Interaktion einzubauen.

Und das hat Adobe wirklich schön hingekommen: Sauberes und schönes Interface, komplexe Prozesse im Hintergrund die trotzdem einfach zu bedienen sind und das alles mit der nötigen Detailtiefe…

Die Videos zeigen besser, was ich meine:

Part I:

Part II:

Part III:

[thx@claudius und Aral Balkan]

Codecheck mit Barcode-Erkennung via Webcam

Im Zusammenhang mit 2D-Barcodes habe ich kurz über Codecheck geschrieben. Darauf hin bekam ich kürzlich eine Info, dass dort der Webcam-Barcode-Leser jetzt funktioniert.

Probiert es mal aus…

codecheck.ch

PS: Mehr von der Pressemitteilung würde ich gern verlinken, finde ich aber online nicht =/

Mehr über Codecheck, das Konzept, die Kooperationen, welche Preise sie gewonnen haben und die neue Webcam-Funktion in der Pressemitteilung zur Webcam.

typografische Musikvideos

Eine große Liste an guten Musikvideos die fast ausschließlich mit Typografie arbeiten. Eine gute Ergänzung der Beispiele für Density-Videos in denen Informationen verdichtet werden.

yuxt.com/artist/typography_in_music_videos

Leider gibt es abgesehen von dieser Sammlung noch keine wirklich interessanten Daten (siehe Top10-Listen) — yuxt muss sich im neuen Trendmarkt der Listen-Applikationen für das Genre der Musikvideos noch beweisen.

[thx@marian]

[tags]video, density, musik, visualisierung[/tags]

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?

iPhone-Tastatur-Zoom bei Microsoft Research

Patrick Baudischs Projekte bei Microsoft Research und parc sind insg. alle sehenswert. Eines ist mir jetzt besonders aufgefallen, weil es eine Technik beschreibt, die wir inzwischen alle aus den iPhone-Videos schon kennen: Das Vergrößern von Screenelementen unter dem Finger auf mobilen Geräten.

shift-ms-research

Kurz beschrieben: Möchte man auf einem PDA beispielsweise mit dem Finger ein kleines Element anklicken, wird der Bereich unter dem Finger durch Shift vergrößert und ist somit leichter anzuklicken.

shift-results

Die Ergebnisse: Shift mit Fingernagel-Bedienung und Fingerkuppen-Bedienung verhält sich besser als die vergleichbare Technik mit einem Offset zwischen Finger und Zeiger.

Mehr auf der Projekt-Website und im Video bei YouTube:

PS: Damit haben Herr Vogel und Herr Baudisch auf der CHI 2007 den BEST PAPER AWARD gewonnen (PDF).

[tags]mobile, mobile2.0, touchscreen, research, microsoft, baudisch, pda, hardware, interfacedesign, eingabegeraete[/tags]

Webkampagne mit Continuity

Eine der richtig wichtigen aber auch schwierigen Dinge im Internet ist, nur die gerade relevanten Informationen darzustellen.

Die Kampagne von compact.de www.spritfresserstoppen.de hat das meiner Meinung nach geschafft. Auf jeder Seite werden mir nur die gerade wichtigen Informationen angeboten. Diese dafür übersichtlich und präzise, so dass ich schnell und einfach zum nächsten Schritt und damit zu den nächsten Informationen und Aktionen geleitet werde.

Ein seltenes Beispiel, wie ich finde, bei dem die Initiatoren beispielsweise der Versuchung widerstanden haben, den „jetzt spenden" Link auf jeder Seite irgendwo auftauchen zu lassen, sondern statt dessen eine optimierte Spenden-Seite zu bauen.

Die folgende Galerie zeigt den Ablauf der Kampagne. Achtet bitte auch auf die Informationen der rechten Seitenspalte — auch die sind in ihrer Kommunikation optimiert.

[mygal=kampagne_spritschluckerstoppen]

So eine optimiert ist natürlich Arbeit. Aber gerade bei den kritschen Funktionen einer Website — hier die Unterschrift, an anderen Stellen vielleicht der Registrierungsprozess — ist die Arbeit sinnvoll investiert, um das Benutzererlebnis zu steigern. Siehe auch: Continuity

Beispiel: Widgets sinnvoll einsetzen

Harvest ist ein web2.0liger Dienst für die Zeiterfassung. Er unterstützt unter anderem nette Feature wie die Synchronisation mit der Basecamp-Zeiterfassung.

Aktuell bewirbt Harvest seinen Dienst über ihr neue Time-Tracking-Widget das es für das OS X Dashboard (Mac) und für Yahoo! Widgets (Mac+PC) gibt.

Das Demo-Video (MOV) zeigt das Widget in Aktion. Sehr gut gefällt mir die flüssige Kommunikation zwischen der Webanwendung und dem Widget. Als alternativer Eingabeweg eine klare Verbesserung weil es der Aufwand der Eingabe minimiert.

Losgelöst von der guten Idee die Eingabe über ein Widget zu realisieren, sehe ich aber gerade an diesem Punkt noch Verbesserungspotential: Die Dropdowns im Widget-Interface beispielsweise halte ich nicht gerade für die beste Wahl…

harvestwidget

Fazit: Gedanklich abgespeichert unter „sinnvolles Beispiel für die Verwendung von Widgets".

[tags]widget, web2.0, api[/tags]