• Mal kurz rundgeschaut… #15 (0)
• Mal kurz rundgeschaut… #8 (0)
• Mal kurz rundgeschaut… #6 (0)
• Mal kurz rundgeschaut… #9 (0)
• Mal kurz rundgeschaut… #7 (0)

Leider kann ich nichts zur Echtheit dieser Videos sagen. Im Endgadget-Artikel ist die Rede von einer extremely trusted source, zu den Videos steht dort nur we’ve gotten. Meine Skepsis rührt daher, dass Microsoft sich selbst vollständig in Schweigen hüllt… quasi nach bestem Apple-Vorbild. Falls irgendwer weitere Informationen hat: Nur her damit!

Gefunden habe ich die folgenden Videos, die das vermeintliche User Interface des Courier zeigen, bei werbeblogger.

Jetzt aber zu den Eindrücken:

Was denkt ihr? Ich finde, dass es wirklich Lust auf mehr macht.

• Natural User Interfaces (0)
• Microsoft Surface in Deutschland angekommen (1)
• [Video] Weltraumschwaben und virales Marketing (2)
• Microsoft-Boygroup feiert PDC & Windows 7 (0)
• Mal kurz rundgeschaut… #15 (0)

HTML5 bringt insbesondere viele Neuerungen, die die Entwicklung von Web-Applikationen erleichtern sollen. Aus diesem Grund will Google die Arbeiten an Gears zurückfahren, um stattdessen verstärkt auf HTML5 zu setzen. Da der neue Standard zudem erlaubt, Video und Audio nativ einzubinden, findet er auch in den laufenden Diskussionen über das drohende Ende des Flash-Zeitalters entsprechende Beachtung. Besonders interessant sind außerdem die zusätzlichen Formular-Elemente (z.B. für Datumseingaben), das Canvas-Element, das dynamische Grafiken via HTML erlaubt, und die zusätzlichen Tags zur Strukturierung eines Dokumentes (z.B. article oder nav).

Folgende Dokumente finde ich persönlich insbesondere für den Einstieg in HTML5 sehr interessant:

HTML5 – A vocabulary and associated APIs for HTML and XHTML

Abstract: This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

Zur zuletzt veröffentlichten Version des Dokumentes.

HTML: The Markup Language

Abstract: This document describes the HTML markup language and provides details necessary for producers of HTML content to create documents that conform to the language. By design, it does not define related APIs, nor attempt to specify how consumers of HTML content are meant to process documents, nor attempt to be a tutorial or “how to” authoring guide.

Zur zuletzt veröffentlichten Version des Dokumentes.

HTML5 differences from HTML4

Abstract: HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML. “HTML5 differences from HTML4″ describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML5 specification is still actively in development. When in doubt, always check the HTML5 specification itself.

Zur zuletzt veröffentlichten Version des Dokumentes.

Viel Spaß beim Stöbern… und nicht vergessen: Es handelt sich nach wie vor um Entwürfe. Die Links führen übrigens nicht direkt auf die gerade veröffentlichten Dokumente vom 4. März, sondern auf die jeweils zuletzt veröffentlichte Version, d.h. sie eignen sich als Bookmarks, wenn ihr immer auf dem neusten Stand sein wollt.

• Teleskoptext – Die etwas andere Klickstrecke (1)
• Sketching und Wireframing – Noch mehr Vorlagen (0)
• Praktisch: Webseiten mit Browsershots testen (0)
• MAMA wacht über Webstandards (1)
• Mal kurz rundgeschaut… #11 (0)

Anatomy of Apple Design from Transparent House on Vimeo.

• Steve Jobs Biografie: From Garage to Grandeur (0)
• [Video] Weltraumschwaben und virales Marketing (2)
• W&W der Geschichte #1: Apple (0)
• Rundgugg zum Sonntach 52/08 (0)
• [Video] Turing Maschine aus Lego (1)

Die klassischen Graphical User Interfaces (GUIs) sollten die vorherigen Command Line Interfaces (CLIs) zugänglicher machen, d.h. “Interna” des Systems wurden z.B. mit der mittlerweile üblichen Desktop-Metapher vermittelt. Nutzer verwalten dadurch Dokumente innerhalb von Ordnern, statt Dateien innerhalb von Verzeichnissen. NUIs sollen noch einen Schritt weitergehen und den Computer weitgehend unsichtbar machen. Das System soll also möglichst intuitiv bedient werden, ohne das seine einzelnen Elemente in Erscheinung treten.

Microsofts Forscher setzen dazu auf sogenanntes Body Computing. Das bedeutet, dass der Körper selbst zum Eingabegerät wird. Ein erstes Beispiel sind physiologische Sensoren, die an den Arm angebracht werden und einzelne Fingerbewegungen registrieren können. Im folgenden Demo-Video nutzt Desney Tan diese Technik, um ohne Gitarren-Controller eine Partie Guitar Hero zu spielen. Anschließend zeigt Dan Morris, wie der menschliche Arm mit Hilfe des Systems zu einem Eingabegerät wird. Er steuert den Computer einfach dadurch, dass er mit den Fingern der linken Hand auf den rechten Arm tippt.

Hier das bei Golem.de gehostete Demo-Video:

In eine andere Richtung geht zumindest auf den ersten Blick das Konzept des Mobile Surface. Man kann es sich als eine Art tragbaren Mini-Surface vorstellen, der quasi überall ein Touch-System verfügbar macht. Dazu besteht es aus einem Mobile Device, einem Projektor zur Darstellung des Bildes und einer Kamera, die die Bewegungen des Nutzers registriert. Das zugehörige Beispielvideo zeigt Chunhui Zhang, wie er die Tischplatte als Schlagzeug verwendet. Zusätzlich zeigt er eine weitere Möglichkeit dieser Technik: Indem man eine einfache “Fläche” über eine projezierte Karte bewegt, kann das System auf diese Fläche Detailinformationen zum darunterliegenden Kartenteil projizieren.

Auch dieses Microsoft-Video hat Golem.de gehosted:

Kombiniert man beide Techniken, so kann man z.B. Bedienelemente direkt auf den Arm projizieren und damit einen Computer vollkommen ohne zusätzliche Eingabemedien bedienen. Weitere Details und auch ein Bild von auf den Arm “geworfenen” Bedienelementen findet ihr auf der Microsoft Research Webseite. Außerdem erfahrt ihr dort auch noch etwas über das Project Gustav, das realisitisches Malen am Computer ermöglichen soll.

• Microsoft Surface in Deutschland angekommen (1)
• Microsoft Courier: User Interface in Aktion (0)
• Gesture Cube – Gestensteuerung ohne Berührung (0)
• Tangible User Interfaces (0)
• Microsoft Surface: Interaktion der nächsten Generation (0)

• Mal kurz rundgeschaut… #6 (0)
• Mal kurz rundgeschaut… #16 (0)
• Mal kurz rundgeschaut… #13 (0)
• Mal kurz rundgeschaut… #12 (0)
• Mal kurz rundgeschaut… #8 (0)

Ermöglicht wird dies durch die GestIC-Technologie, die ursprünglich vor einigen Jahren von der Ident Technology AG zur Absicherung von Cabriodächern entwickelt wurde: Der Einfahrprozess des Daches sollte automatisch stoppen, sobald sich eine Hand nähert. Registriert wird die Hand, weil sie ein elektrisches Feld stört, das vom Gerät ausgesendet wird.

Durch diese Technik kann zudem die Position der Hand ermittelt werden, womit folglich Gesten erkannt werden können. Man kann also sagen, dass der Gesture Cube wie moderne Touchscreens (z.B. iPhone, Microsoft Surface) gesteuert wird, aber ohne wirklich den Bildschirm zu berühren. Damit sollten die Zeiten schmieriger Fingerabdrücke vorbei sein.

Im Demo-Video wird der Einsatz der Würfels als ein Multimedia-System präsentiert. Beispielsweise kann eine eingehende Nachricht mit einer einfachen Wisch-Bewegung gelöscht werden, Photos werden wie durch Telekinese verschoben und durch das Hinabfahren an einer Kante wird die Lautstärke des gerade gespielten Musiktitels gesenkt. Insgesamt scheint die Bedienung sehr intuitiv zu sein, jedoch stelle ich mir die Frage, ob im Einsatz, z.B. beim Verschieben von Reglern, nicht irgendwie die Haptik fehlen könnte.

Da das gute Stück nicht allzu groß sein soll, kann es problemlos durch die Wohnung getragen werden. Greift man den Wunderwürfel dazu, friert das User Interface ein und ist wieder verwendbar, sobald man ihn wieder absetzt.

Schaut euch einfach mal das untenstehende Video und die Gesture Cube Webseite an. Dort findet ihr auch viele weitere Bilder. Es ist auf jeden Fall eine sehr interessante Idee und ich bin auf erste Prototypen aus diesem Konzept gespannt. Was haltet ihr davon?

• Natural User Interfaces (0)
• 3D Desktop Concept – Eine neue UI-Dimension (1)
• Microsoft Surface in Deutschland angekommen (1)
• Microsoft Courier: User Interface in Aktion (0)
• Fitts’ law – Buttons optimal einsetzen (0)

Aber zukünftig ist die Bastelei im Piwik-Code, die deutsche Benutzer offenbar durchführen müssen, wohl vorbei, denn gerade schrieb Martin:

Das Konzept meines NoIP-Plugins ist offensichtlich angenommen worden und wird als Plugin in der Version 0.55 von Piwik vorhanden sein. Mit dem Unterschied, dass man per Konfigurationsparameter die Anzahl der zu löschenden Oktette einstellen kann.

Wer will, kann es sich schon mal aus dem SVN holen.

Zukünftig müssen wir also nur noch das Plugin aktivieren. Damit ein großes Dankeschön an Martin für die Mühe!

• Mal wieder: Piwik und anonymisierte IPs (13)
• Piwik: Keine IP-Adressen speichern (19)
• WP-Piwik – WPMU-Piwik (17)
• Piwik – Lokale Analytics-Alternative (2)
• Neues WordPress-Plugin: WP-Piwik (15)

Die einzelnen Sets unterscheiden sich im Thema (von Social Media über Länderflaggen bis zu ganz allgemeinen Sammlungen) und natürlich auch im Umfang. Ein Klick auf die jeweilige Vorschaugrafik führt euch direkt zur Iconseite, wo ihr die Grafiken herunterladen könnt. Bitte beachtet unbedingt die dort erläuterten Nutzungsbedingungen, denn “gratis” bedeutet nicht immer “frei verwendbar”. Haltet euch nicht nur zu eurem eigenen, rechtlichen Schutz, sondern auch aus Respekt gegenüber den Designern an diese Vorgaben.

Free Vector Icons Set

Diese Icons verwende ich als Symbole für die Kategorien. Sie sind schlicht, aber gleichzeitig richtig chic.

Handycons 2

Ich hatte hier schon verschiedene Icons-Sets für die Social-Links oben rechts in der Autorenbox verwendet, aber bei diesen handgezeichneten Symbolen bin ich nun hängengeblieben.

Free Calendar Icons Set

Hierbei handelt es sich um unheimlich praktische Kalenderblätter, die Datumsangaben zu Beiträgen optisch aufwerten können. Mit ein wenig CSS muss nur noch der Tag zentriert eingefügt werden. Leider musste ich sie für die Header-Balken der Beiträge ein wenig verkleinern, aber dennoch machen sie noch was her.

famfamfam.com Icons

Die Icons von famfamfam sind mittlerweile weit bekannt. Kein Wunder: Insbesondere Silk ist ein enorm umfangreiches Set mit Icons für alle Lebenslagen. Hier verwende ich überwiegend die kleinen Flaggensymbole um deutsche und englische Abschnitte entsprechend zu kennzeichnen.

Free Medical Icons Set

Nanu? Medical Icons? Ja, genau. Eine Grafik aus diesem Set verwende ich als Logo für das Testlab. Selbst wenn man keinen Bezug zur Medizin hat, kann man noch einige dieser Icons z.B. für Messungen und Statistiken verwenden. Also auf jeden Fall einen Blick wert.

• Mal kurz rundgeschaut… #12 (0)
• Korrektur und Layoutanpassung (1)
• Teleskoptext – Die etwas andere Klickstrecke (1)
• So sehen Fehler aus, schalalalala (0)
• Sketching und Wireframing – Noch mehr Vorlagen (0)

Wir erinnern uns: Die Gestaltgesetze beschreiben, wie wir das Gesehene nach verschiedenen Kategorien als möglichst einfache Formen wahrnehmen und diese nach unterschiedlichen Faktoren gruppieren, z.B. nach ihrer Nähe zueinander. Bisher haben wir aber nur statische Grafiken betrachtet. Doch wie sieht es mit bewegten Objekten aus? Grundsätzlich spielen zwar die bisher besprochenen Gesetze auch eine Rolle, aber sie werden von neuen Faktoren überlagert.

Schauen wir uns zunächst einmal diese Beispielanimation an:

Nach dem Gesetz der Ähnlichkeit wäre eine Zusammenfassung der beiden Quadrate in eine Gruppe und eine Zusammenfassung der Kreise in eine weitere Gruppe naheliegend. Aber schnell fällt auf: Eher wirken jeweils die beiden Objekte zusammengehörig, die sich in die gleiche Richtung bewegen. Offenbar spielt die gemeinsame Bewegung bei einer Animation eine übergeordnete Rolle. Genau darum geht es beim Gesetz der gemeinsamen Bewegung (oder auch: das Gesetz des gemeinsamen Schicksals). Folgende Faktoren kommen bei einer Bewegung hinzu:

• Richtung: Objekte, die sich in die gleiche Richtung bewegen
• Geschwindigkeit: Objekte, die sich mit gleicher Geschwindigkeit bewegen
• Start und Ende: Objekte, die an der selben Stelle und/oder zum selben Zeitpunkt mit der Bewegung beginnen; Objekte, die sich im gleichen Gebiet bewegen
• Bewegungsform: Objekte, deren Bewegung in ähnlicher Form abläuft (z.B. spiralförmige Bewegungen, Rotation, etc.)

Hier kommt es natürlich auch wieder auf die geschickte Kombination der einzelnen Faktoren an. Ist z.B. Objekt 1 trotz gleicher Richtung deutlich schneller als Objekt 2, dann wird der Effekt der gleichen Richtung entsprechend gedämpft.

Dennoch sind die “klassischen” Gestaltgesetze, die wir in Bezug auf statische Abbildungen kennen, natürlich nicht überflüssig. Im obigen Beispiel wäre der Gruppierungseffekt noch deutlich verstärkt, wenn sich die beiden Kreise in eine Richtung und die beiden Quadrate in die entgegengesetzte Richtung bewegen würden. Oder denken wir einfach an die Geschlossenheit: Wie würde das Beispiel wohl wirken, wenn wir die oberen durch eine Linie von den unteren Objekten trennen?

Sollten wir also Programme oder Webseiten designen, die Bewegungen enthalten, so müssen wir uns fragen, welche Elemente als Einheit aufgefasst werden sollen. Ebenso sollten wir Geschwindigkeiten und Richtungen ganz bewusst variieren, wenn wir z.B. in einem Computerspiel durch die Bewegung von Objekten eine Umgebung (sagen wir computergesteuerte Menschen in einer Stadt) lebendig erscheinen lassen wollen. Bewegt sich alles mit gleicher Geschwindigkeit oder bewegen sich viele Objekte in die gleiche Richtung, würde so ein unnatürliches Muster entstehen.

Da die Bewegung aber auch die anderen Gestaltgesetze überdecken kann, sollten wir sie nur ganz bewusst da einsetzen, wo sie auch wirklich notwendig ist. Mal davon abgesehen, dass eine Webseite in wilder Bewegung selbst bei guter Gestaltung nach kurzer Zeit nervt, erschweren wir dem Nutzer sonst die Zuordnung von Objekten in die vom Designer angedachten Gruppen.

Apropos Webseiten in wilder Bewegung: Blinkeffekte in gleicher Geschwindigkeit zählen auch als gemeinsame Bewegung. Blinken z.B. einzelne Wörter in einem Satz, dann neigt der Betrachter auf den ersten Blick dazu, die blinkenden Elemente als erste, und die statischen Elemente als zweite Einheit aufzufassen, statt den Satz sofort als Ganzes wahrzunehmen. Deswegen gilt auch hier: Nur vorsichtig und sparsam verwenden!

• Gestaltgesetze #5: Geschlossenheit (0)
• Gestaltgesetze #2: Nähe (0)
• Gestaltgesetze #4: Kontinuität (0)
• Gestaltgesetze #3: Ähnlichkeit (0)
• Gestaltgesetze #1: Prägnanz (Gute Gestalt) (0)