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:

Microsoft Design, Vista, WPF/E

Ich bin beeindruckt, was zur Zeit alles bei Microsoft passiert:

  1. Die Vista „Windows Presentation Foundation" WPF sieht nach einem sehr gut durchdachten Ansatz aus auf dem nicht nur alles sichtbare in Vista selbst basiert, sondern der auch Entwicklern komfortablen Zugriff auf gute Funktionen ermöglicht. Karsten Januszewski gibt im 22Min-Channel9-Video einen Überblick.
    Es gibt noch mehr Videos zum Thema die ich aber nicht kenne.
    Mehr zur Technik der WPF bei msdn.
  2. Überhaupt arbeitet Microsoft im Moment stark daran, die ganzen neuen Schnittstellen von Vista auch an die Entwickler zu kommunizieren. Da wären beispielsweise die Gadgets, die RSS-Plattform, Spracherkennung, die Windows-Suche, …
  3. Dazu gehört natürlich auch, das neue GUI-Konzept aero mit seinen Interaktionsstandards zu verbreiten. Dass Windows-Programme hier Nachholbedarf haben, bezweifelt glaube ich niemand. Ich hoffe, die „Top Rules for the Windows Vista User Experience" werden wirklich umgesetzt :)
    Wen das look-and-feel von Vista interessiert, der sollte in den dort überall verlinkten GUI-Guidelines stöbern.
  4. Sehr cool in dem Video unter 1. ist der North Face-Shop (technische Infos). Auch er basiert auf der WPF-Engine und ich verstehe zwar nicht, wie Microsoft die exsessive Video- und 3D-Verwendung der WPF auf anderen Plattformen umsetzt, aber zukünftig wird man diese Anwendungen wohl auch direkt im Browser nutzen können. Auch auf dem Mac. (via Oliver Wrede)
  5. Und damit Adobe Flash sich auch wirklich angegriffen fühlt, stellt Microsoft neben diesem Browserplugin WPF/E (WPF Everywhere) auch gleich vier neue Entwicklungstools vor: Microsoft Expression, a suite of tools for creative designers that gives you the freedom to bring your vision to reality and boosts developer collaboration in the delivery of rich user experiences for the Web, Windows Vista applications and beyond. heißt es in typischem Marketing-Slang. Das Websitedesign in schöner Flash- und Apple-Sauberkeit drückt zusätzlich aus, dass man hier nicht die Standard-Microsoft-Zielgruppe anspricht.

[tag]vista, microsoft, windows, apple, flash, interfacedesign, video, wpf, softwareentwicklung, gui, ui[/tag]

Interface für den 100$-Laptop

Die Idee des „One Laptop Per Child" (OLPC) hat mich schon vor einem Jahr fasziniert. Seit dem habe ich immer wieder Zeitungsartikel und Berichte gesehen.

Dass das Projekt weiter geht und an Popularität und Durchsetzungskraft gewinnt, konnte mir dann zuletzt Nicholas Negroponte selbst in seinem 18-Minuten-Vortrag während der TED-Talks erzählen.

Und jetzt wurde der nächste Realisierungsschritt eingeleitet: Man beginnt am UserInterface zu arbeiten.

Wie schon bei der Hardware und dem OLPC-Gedanken insgesamt geht Negroponte auch bei der Bedieneroberfläche radikal vor, löst sich von allem Bekannten und versucht eine optimale Lösung für seine Zielgruppe zu finden.

Das Ergebnis sieht zur Zeit so aus:

olpc interface

Als ich dieses Interface zu erst sah, dachte ich: schade, dass Jef Raskin nicht mehr lebt, das wäre seine Chance sein Interface-Konzept voran zu bringen.

Außerdem glaube ich, dass sein Archy-System an einigen Stellen besser funktioniert(e) als der aktuelle OLPC-Software-Prototyp.

Aber ich möchte an dieser Stelle gar keine Usability-Review schreiben, sondern einfach auf weitere Quellen verlinken. Eines ist Negropontes System nämlich sicher: Wert beachtet zu werden…

to be continued

[tag]olpc, ngo, laptop, hardware, software, interfacedesign, betriebssystem, tedtalk, video, raskin, user-interface[/tag]

Scrybe / Animation im Kalender

Ein aussagekräftiges Sneak-Peek-Video über einen Online-Kalender mit Namen Scrybe , der diesem eigentlich abgedroschenen Thema einige interessante Funktionen und Sichtweisen hinzufügt.

Insbesondere die gezielt und geschickt eingesetzten Animationen und Transitions lassen den Arbeitsablauf angenehm flüssig erscheinen.

Oliver Wrede schreibt im Seminarblog Continuity:
Was in dem Video im Bezug auf »Continuity« eine Verbindung darstellt ist, dass die Autoren von iScrybe zum einen die Integration des Tools mit alltäglichen Arbeitsweisen suchen (Vermeidung von Medienbrüchen) und zum anderen sehr viel Wert darauf legen, dass die Software Kontext zu den einzelnen Informationen bieten kann (Zusammenhänge erkennbar machen, indem Wechsel der »Views« durch Übergänge erkennbar gemacht werden).

[via Tamim / Oliver]

[tag]continuity, video, flow, kalender, webapplikation, interfacedesign, ui[/tag]

Berichte von der ARS Electronica

Wie angekündigt sind wir auf der ARS Electronica. Während ich gerade versuche ein paar Videos in YouTube hochzuladen, überlasse ich das Schreiben Konstantin und Tim. Ihre Aussagen kann ich unterstreichen:).

[tag]ars electronica, interfacedesign, simplicity, clarity, festival[/tag]

„bitte OK klicken"

Der Ansatz ist unglaublich: Wir haben zu viele Dialogboxen die nur ein OK-Button haben. Einzige Lösung: Diese ersatzlos abschalten.

Interfacedesign ist eben doch nicht rational. Auch Menschen wie Jensen Harris, die viele gute Gedanken beschreiben, schaffen es, sich schlechte UI-Elemente schön zu reden.

Aktuelles Beispiel aus dem schon viel beschriebenen Office12: „The Spelling Check is Complete

Ich habe leider gerade nicht die Zeit die Themen Modalität und „Informationswert von 0" wie Raskin und andere es beschreiben, auszubreiten.

Ich kann nur hoffen, dass Harris sich von den vielen Kommentaren überzeugen lässt und über nicht-modale und nicht-störende Alternativen nachdenkt… Wo das Office12-Team doch sonst so kreative ist und weiter denkt als ‚an', ‚aus' und ‚ballon-tipp'…

[tag]office12, modal, raskin, interfacedesign, ui, harris, microsoft, dialog, feature, software[/tag]

Ganz ohne Hilfe geht es nicht (Office 12)

„Well, our design goal was to require no training at all." schreibt Jensen Harris einem neuen Post über Office 12. Und doch bietet er jetzt ein einseitiges Hilfedokument (PDF) an.

Ich kenne ähnliches von der Rössler Trauerdruck-Software, die ich mit Matthias gerade in Version 2 fertig stelle. Auch wenn das UI eigentlich selbsterklärend ist, wollen Firmen Dokumentation. In diesem Fall wird sie beispielsweise genutzt, um dem Kunden neben der „kleine CD" etwas zu überreichen, „etwas in der Hand zu haben"…

In kommenden Versionen werden ich versuchen, dieses Schriftstück durch Lernvideos zu ersetzen. Aber vorerst tut es gute Dienste.

Jensen spricht noch andere Punkte an: Auch wenn das neue Office UI an den meisten Stellen selbsterklärend ist, einige Metaphern oder einfach Buttonpositionen sind so ungewöhnlich, dass eine Erklärung ihnen gut tun wird. Beispielsweise die Dialog-Box-Launcher (Punkt 4).

Ich bin gespannt, in wie weit das neue Office das Prinzip des „Design für verschiedene Nutzerstadien" verwirklicht. Im Grunde könnten die Informationen aus diesem PDF auch beim ersten Programmstart erklärt werden…

In jedem Fall ist es positiv, dass die Office-Gruppe so viel Bewusstsein dafür hat, Dinge zu reduzieren und einfacher zu gestalten. Wenn ich an die fünf 250-Seiten starken Dokumentationshandbücher unseres alten Office 6 zurück denke… :-)

[tag]office, microsoft, dokumentation, interfacedesign, selbsterklaerend, usability[/tag]

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.