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

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]

Microsofts Multimedia-Multitouch-Screen

Microsoft Surface Logo

Microsoft macht jetzt Multi-Touch! Bisher überhaupt nicht in diesem Bereich erwähnt, taucht Microsoft Surface jetzt in allen möglichen Websites in Text, Bild und Video auf und zeigt sich dabei als alter Hase im Geschäft, der seit 2001 (Menüpunkt „Origins") an Produkten forscht, die die Shops der Zukunft ausstatten sollen.

Eine der Beispiel-Shop-Anwendung, die im Video (unten) gezeigt werde, ist für T-Mobile-Shops konzipiert und zeigen, wie schön man zukünftig Handys vergleichen, kaufen und mit Zusatzfunktionen füllen kann…

Der große Unterschied zu den übrigen Multitouch-Displays ist, dass Microsoft (immernoch) mit Kameras und Projektor arbeitet, daher nur „touch-controlled" und nicht „touch-sensitive" ist, dafür aber noch dieses Jahr (Vista-WPF-basierte) Produkte in die Geschäfte bringen möchte…

Ein paar Links:

Im Interface Design und Usability Blog-Artikel gibt es alle erwähnten Videos direkt als YoutTube/GoogleVideo-Filme zu sehen.

Zwei gute Videos:

Ein paar Bilder:

Microsoft Surface Fotos Microsoft Surface Spiele Microsoft Surface T-Mobile (USA)

Delicious: Things we’ve learned

Vorab: Dieses Posting habe ich schon im März in einem internen Blog geschrieben und füge es jetzt der Vollständigkeit und einfachen Verlinkung wegen zu den flyingsparks hinzu.

Auf der gleichen Konferenz spricht Joshua Schachter, Gründer von Delicious über Dinge, die er bei der Erstellung seines bekannten Social-Bookmarking-Dienste gelernt hat (MP3).

Auch hier findet sich wieder eine Zusammenfassung des 40-Minuten Vortrags im Netz.

Und auch hier geht es unter anderem wieder um das Thema URL-Design.

Die Punkte die Schachter ab Minute 16 anspricht:

Interessant auch unter dem Gesichtspunkt der Bedeutung von RSS: Delicious hat mehr RSS-Traffic als HTML-Anfragen. Entsprechend gutes Caching ist nötig.

Auch in diesem Vortrag wird im Übrigen die Bedeutung offener APIs angesprochen:

Meine Stichworte dazu:

Die ursprüngliche URL http://www.webuser.co.uk/carsonworkshops/JoshuaSchachter.mp3 ist leider nicht mehr verfügbar. Ich habe mein Backup bei mir bereit gestellt.

37signals stellt Highrise vor

Update 07-03-20: Highrise wurde heute freigeschaltet — bisher ohne Erwähnung im svn-Blog, dafür aber mit just-in-time-Kundenservice.
Es lohnt sich, die Highrise-Webiste anzuschauen. Neu im Vergleich zu den bisherigen 37signals-Produkten sind die Scenarien/Beispiele, der ausführliche FAQ-Bereich und das direkt zentral verlinkte Forum. Offensichtlich will 37signals die Zahl der Kunden-Rückfragen so gering wie möglich halten (trotzdem der Hilfe-eMail-Link auf der Startseite).
Wem die Screenshots aus der Tour nicht ausreichen, dem empfehle ich die Highrise-Screenshotssammlung bei Flickr.

Seit ein paar Wochen stellen die Jungs von 37signals getreu ihrer Philosophie „Hollywood Launch" ihre neuste Software Highrise vor. Es geht um ein Tool zur Verwaltung von Kontakten und allem, was an Wissen mit ihnen verbunden ist.

Die Preview-Artikel sind nicht lang und empfehlen sich zu lesen aus Sicht des Interface-Design, des Applikations-Konzepts und auch im Vergleich zum oben erwähnten Getting-Real-Buch.

Sehr schön beispielsweise die Interface-Lösung für die Zuweisung von Rechten in Preview 2.

Screen aus Preview 4:
highrise

Kurz: Photoshop CS3-Videos

Bei Galileo Design gibt es 5 Videos zur neuen Photoshop CS3-Version. Eine praktische Einführung in die Neuerung — einige davon gute Interfaceverbesserung.

[tag]adobe, photoshop, grafikdesign, design, webdesign, fotografie, interface, interfacedesign[/tag]

Office12: Interface-Blog-Inhaltsverzeichnis und Interface-Lizenz

Seit inzwischen mehr als einem Jahr hat Jensen Harris und seine Gastautoren in dem schon oft oft erwähnten und zitierten Office 12-Interface-Blog über 200 Artikel zur Entwicklung des neuen Office Interface geschrieben.

Jetzt hat er all diese Beiträge in Form eines thematischen Inhaltsverzeichnisses gruppiert: „The Office 2007 UI Bible".


Wer durch diese Artikel oder die Bedienung von Office 2007 überzeugt ist, das neue UI würde auch seiner Applikation gut tun, kann jetzt bei Microsoft eine kostenlose Lizenz bekommen!

Es geht dabei um all die Innovationen, die Harris beschreibt: Das Ribbon, Super Tooltips, Mini Toolbar etc.

Microsoft stellt damit das Ergebnis von langwieriger Forschung und Entwicklung kostenlos zur Verfügung und geht damit konsequent den neuen, offeneren Weg mit seiner Office-Software umzugehen, weiter. (Beispielsweise auch zu sehen am neuen, offenen XML-Datenformat und dem Umgang mit Unternehmensblogs.)

Gleichzeitig besteht so die Chance, die neuen Bedienungsparadigmen von Office12 bald auch in gleicher Qualität in anderer Software wiederzufinden. Denn grundsätzlich ist die Lizenz kostenlos und für alle Software und Betriebssysteme (ausser office-artigen Programmen).

Aber es gibt eine wichtige Einschränkung, die ich für enorm wichtig halte:
Die Lizenznehmer müssen sich an die Office-UI-Guidelines halten! Darin beschreibt das Team ausführlich, wie sich die UI-Elemente in bestimmten Situationen zu verhalten haben. Harris vergleicht das im Channel-9-Video mit der Human Computer Interaction-Dokumentation von Apple.

Das erste Preview-Dokument dieser Guidelines (PDF) zeigt, das eine solche Dokumentation wirklich nötig ist. Die vielen guten Details, die das Office-Team eingebaut hat, müssen auch in anderen Anwendungen genau so funktionieren…

Mehr:

Update: Wenn man sich mit seinem MS-Passport-Account zur Evaulation der Office-Licence anmeldet, kann man die komplette UI-Dokumentation downloaden. Ein sehr interessantes 118-Seiten-PDF.
Leider stellt MS es nicht direkt öffentlich online sondern verbietet dies sogar. Das hat dann leider nichts mehr mit der oben erwähnten und von Harris gepriesenen, öffentlich zugänglichen Apple-Dokumentation zu tun…