10 / GUI – User Interface von Clayton Miller

Bei der Flashconference 2010 hat Clayton Miller seine bemerkenswerte Vision eines neuartigen Bedienkonzeptes für die Nutzung von Desktop PC´s vorgestellt. Das 10/GUI funktioniert durch Multitouchinteraktion mit beiden Händen und bis zu zehn Fingern. So ist es dem Benutzer möglich mehrere interaktionen gleichzeitig auszuführen.

10 / GUI VIDEO

ERGONOMIE

Bei Touchscreens ist – wie der Name schon sagt – der Screen und das Touchpad zusammengefasst. Das ist schön und gut, aber für längere Arbeiten nicht geeignet, da entweder der Nacken oder der Touch-Arm belastet wird.

Das 10/GUI ist vom Screen getrennt und ermöglicht dadurch dem User die Hände bequem auf dem Tisch in einer Ruhehaltung abzulegen. So wie wir es bei der Mouse kennen.

SOFTWARE

Da es in den gängigen Betriebssystemen noch schwierig ist mit einem Touchpad zu navigieren hat sich Miller auch Gedanken über eine benutzerfreundliche Benutzeroberfläche gemacht die auf das 10/GUI abgestimmt ist. “Con10uum” genannt. Dabei gestaltet er das Windowverhalten von Desktopapplikationen um.

Fenster werden nicht mehr unordentlich übereinander, sondern horizontal nebeneinander angeordnet. Die fenster nehmen sich Kontextabhängig ihren Raum und verdrängen andere Fenster nach links und rechts.

Die Fenster lassen sich dann mit drei Fingern verschieben und skalieren. Mit vier Fingern kann man durch alle Anwendungen scrollen und aus der Reihe der Anwendungen herauszoomen und hineinzoomen. Natürlich ist es dann auch möglich mit beiden händen gleichzeitig zu arbeiten. Also z.B. mit der einen Hand aus allen Anwendungen rauszoomen und gleichzeitig Fenster verschieben oder skalieren.

Zoomt man aus den Anwendungen komplett heraus, bekommt man eine Thumbnailansicht aller Anwendungen.

Für den Aufruf des Startmenüs und des Menüs der aktiven Anwendung dienen zwei Tasten, die seitlich neben dem Touchpad angebracht sind.

Das Konzept ist noch nicht ganz ausgereift und fraglich ob es in der Form je auf den Markt kommt.

Ich bin ja mal gespannt

Quellen:

http://www.10gui.com

Japan + Social = Mobile

Social Games

Arten von Social Games

Ein paar Grundtypen von SGs sind auszumachen, wobei gerade bei extrem verrückten japanischen Games die Grenzen oft verfließen:

• RPGs (Rollenspiele)
• Sportspiele (Fussballmanager, Tanzspiele… )
• Dekorations-/Shopping-/Bau-spiele  (Farm, Garten, Planet, Aquarium, Laden… etc)
• Kasino/Glücksspiel
• Reine Spass-Spiele wie z.B. “Hirntrainer”

Interaktionen

Social Games basieren auf Interaktionen zwischen Spielern. Viele verschiedene Arten der Interaktion sind denkbar und existieren in Spielen;

• Freundliche Interaktionen:  Schenken eines Gegenstandes, Einladen, Anwerben von Freunden
• Nachrichten; persönliche oder Wall-Posts über Spiel-Ereignisse, Spiel-Fortschritt
• Feindliche Interaktionen: Angreifen, Zerstören etc… (Beispiel: Jemandem einen Hai ins Aquarium setzen)

Diese Interaktionen finden wie erwähnt offline statt. D.h. der andere Spieler muss nicht gerade eingeloggt sein damit ich mit ihm interagieren kann. Dies ist entspricht dem Prinzip, dass man an einem Social Game eher ein- bis mehrmals am Tag für 5 Minuten spielt, statt am Stück 2 Stunden.  So reagiert man auf Ereignisse und Interaktionen anderer Spieler, z.B. wenn man durch eine Nachricht darauf aufmerksam gemacht wird und man gerade Zeit hat, sich kurz einzuloggen.

Technik

Die vorgestellten Games waren alle in Flash(Lite) entwickelt, warum mir auch dieses Thema am Herzen liegt und was es interessant für mich macht. FlashLite wird von vielen Handys unterstützt, “richtiges Flash” (was nicht unbedingt benötigt wird für einfache Spiele) wird ab Version 2.2 von Android unterstützt. Android Handys gibt es im Augenblick nur zwei in Deutschland, diese Zahl wird sich aber im Lauf des Jahres vervielfachen.

Monetarisierung

Wie in der Einleitung erwähnt, ist (auf jeden Fall in Japan) hier Goldgräberstimmung und es werden zweistellige Millionenumsätze gemacht. Im Prinzip haben Spieler der Games die Möglichkeit, mit kleinen Beträgen zusätzliche Gegenstände zu Kaufen. Diese sind entweder dekorativer Natur oder bringen bei einem Entsprechenden Spielprinzip Vorteile, bessere Fähigkeiten für Spieler. Nachdem in Japan eben die Social Networks überwiegend von mobilen Geräten bedient werden, ist hier eine Bezahlung via Handy extrem unkompliziert. Manche Plattformen bieten  eine eigene virtuelle Währung, soz. ein Konto, das man mittels Handy aufladen kann; in einem Game kann der User dann mit dieser spielübergreifenden Währung einkaufen.

Fazit

Auch wenn bei uns der Hype noch nicht komplett ausgebrochen ist, geht auf jeden Fall langsam immer mehr im mobilem Internet. Die nicht-ganz-so-technophilen-wie -die-Japaner Bürger der westlichen Welt fangen langsam an zu verstehen, dass das Internet viel mehr Sinn macht wenn man mobil ist. Dann machen auch soziale Spiele mehr (Un-)Sinn. Und weil Facebook ja nun echt jeder hat, kann man dort im Augenblick schon seine Spielideen testen.

Florian Mühlegg und Stefan Kolbe, zwei Studenten Interaktiver Medien der Filmakademie Baden-Württemberg haben diese Installation auf der FMX 2010 in Stuttgart vorgestellt:

“THE GAP ist ein Augmented Virtuality Adventure Game. In einer interaktiven Rauminszenierung verbindet das Spiel real erfahrbare Objekte mit einem virtuellen Raumerlebnis.
Dabei schlüpft der Spieler in die Rolle eines Forschers, der auf der Suche nach dem magischen Schatz der Xiong-Indianer ein gefährliches Hindernis überwinden muss.”

Das Hindernis, von dem die Rede ist, ist eine 5m lange Hängebrücke, über die es zu balancieren gilt.

Klingt einfach, ist es aber nicht!

Der Spieler trägt eine VR-Brille mit einer Webcam, welche das Sichtfleld des Spielers erfasst und in den Computer einspeist. Dieser ersetzt dann das grün in der Greenbox durch ein 3D-Szenario. Alles, was nicht grün ist, wird nicht ersetzt. Die Position und Blickrichtung des Spielers wird anhand eines Helms mit Infrarot-LEDs und einer Wii-Sensorik erfasst und damit das 3D-Szenario gesteuert.

Somit kann sich der Spieler in dem 3D-Szenario umschauen und seine Sinne werden genial manipuliert.

“Realraum und virtuelle Elemente verschmelzen zu einer “Realität” und schaffen dadurch ein ganz neues Raumempfinden, das auch auf der auditiven Ebene durch ein interaktives Sounddesign spürbar wird – eine neue, immersive Welt entsteht.

Mit einem Head-Mounted-Display, in dem Livebild mit Echtzeit-3D-Bildern kombiniert werden, wird das Abenteuer hautnah erlebbar. Durch das Display kann man die realen Objekte und die virtuelle Umgebung als Einheit wahrnehmen.”

Ich bekam bei dem Anblick jedenfalls ganz schön Höhenangst.

Zuerst gab es einen Vortrag zu Heavy Rain. “How art was used to Create a Movie Experience” hieß es dort in einem Vortrag von Chrisoph Brusseaux (Art & Graphic Director, Quantic Dream). Hier ging es vor allem um den benötigten Aufwand um ein atmosphärisches Spielerlebnis zu erschaffen. Angefangen bei ausgedehnter Recherche über die Erstellung der “visual grammer” und “moodboards” zu einzelnen Szenen bis hin zum fertigen Produkt.

Todd Masters von MasterFX zeigte uns anschließend den Fortschritt von MakeupFX im Filmgeschäft. Hierbei fiel vorallem der nachwievor häufige Gebrauch traditioneller Maskenbildnerei auf, der Dank neuer Materialien und Einfallsreichtum nicht komplett durch digitale Effekte vertrieben wird. In einer Reise durch die Filmgeschichte durften wir Zeuge der Entwicklung der Effektschmiede werden. Ein Bild kann davon kann man sich am Besten auf der MasterFX Webseite machen.

Florian Feilers Vortrag “iPhone Apps with Flash CS5″ wurde kurzerhand in “Mobile Apps with Flash CS5″ umgetauft. Auf der einen Seite beschließt zwar Flash von ihren Geräten zu verbannen, jedoch geschieht im Android Lager eher gegenteiliges. Zwar wird der iPhone Support Seitens Adobe eingestellt jedoch wird vermutlich ein Flash Packer für CS5 nachgereicht mit dem es möglich wird von Flash aus Android Apps zu exportieren. (Anmeldung zum Beta Test ist derzeit hier möglich: AndroidAir, AndroidFlash).

Raúl Escolano von Nikodemo zeigte dann noch den Produktionsablauf von Almorria, einer in Flash erstellten Trickfilmserie. Hier zahlt sich die Skalierbarkeit der Flashgrafiken aus die einem Export nach 1080p mit nichts im Wege stehen.

Nebenbei gab es noch Screenings wie zum Beispiel “The Animation Show of Shows” der acmefilmworks und die Vorführung der Gewinner der Siggraph 2009.

Vor einigen Wochen hat Google die schockierende Nachricht publiziert, dass Webseitengeschwindigkeit einen Einfluss auf die Position der Ergebnisse nehmen soll.

Vorerst ist der Parameter für die Geschwindigkeit nicht wesentlich relevant, da dieser bisher nur auf google.com und auch nur für weniger als 1% der Suchabfragen angewandt wird. Doch hat Google auch angekündigt den Parameter in allen Google-Suchmaschinen anzuwenden. Daher bietet die beliebteste Suchmaschine Webseitenentwicklern an, Tools zuverwenden, die Seiten auf ihre Geschwindigkeit testen und zur Optimierung verhelfen sollen.

Page Speed:
Das erste Tool, dass nun vorgestellt wird, ist das von Google empfohlene Page Speed. Dieses Tool ist ein Open Source Add-on für Mozilla Firefox – Firebug. Es dient zur Evaluierung der Performance.

Mit einem Klick auf den Button “Analyze Performance” werden die einzelnen Performancetests durchgeführt und nach kurzer Zeit dargestellt. Schon erhält man den Page Speed Score: xxx / 100. Wenn die Zahl hoch ist und einen grünen Hacken als Kennzeichen trägt, ist die Seite optimiert. Zusätzlich zu der allgemeinen Score-Bewertung erhält man eine Liste der 25 durchlaufenen Tests, die von schlechtester bis zur besten Bewertung sortiert ist. Die Faktoren, die ein Ausrufezeichen als Symbol neben sich stehen haben, besitzen das meiste Potential zur Verbesserung der Seite. Fährt man mit der Maus über das Symbol, erhält man für den einzelnen Test eine Bewertung. Klickt man nun auf dieses, erscheint ein Verbesserungsvorschlag.

Unter dem Menüpunkt “Ressources” lassen sich die Antworten des Servers der angeforderten Dateien (doc, js, css, images, cssimages, iframe, objects usw.) beobachten und vergleichen. Somit erkennt man sofort, ob eine JavaScript Datei zu groß ist oder welcher Status-Code der Server zurückliefert. Zusätzlich wird die File Size und die Transfer Size angezeigt. Leider hat Page Speed bei unseren Tests keine File Size anzeigen können (Stand: 19.04.2010).

Das Ergebnis lässt sich unter “Exportieren” auch als .json-Format auf den eigenen Desktop speichern.

Als Page Speed Installiert wurde, wurden zwei neue Menüpunkte im Firebug angelegt. Neben dem bereits erläutertem Punkt “Page Speed” existiert ein weiterer: “Page Speed Activity”.
Dieser Punkt zeichnet sämtliche Aktivitäten der jeweiligen Seite auf und unterteilt diese durch entsprechende Farben. So kann ein Administrator sofort erkennen an welchem Punkt die Abfrage zu Verzögerungen kam.

Fazit:
Page Speed hat seine Vorteile und Nachteile. Für Page Speed spricht auf alle Fälle die schnelldurchgeführten Tests und die Tatsache, dass es einfach als Add-on von Firebug schnell aufrufbar ist. Da Page Speed von Google empfohlen wird, könnte der Score dem Ranking-Faktor für die Geschwindigkeit ähnlich sein. Doch Leider bietet Page Speed keine Statistik oder eine druckbare übersichtliche Anzeige an.

YSlow:
YSlow ist eine ältere Variante von Yahoo. YSlow ist ebenfalls ein Firebug – Add-on und nutzt das amerikanische Notensystem von A(1) bis F(6). Zusätzlich bietet YSlow eine strukturiertere Oberfläche und ebenfalls einen Score Wert.

Der Vorteil an YSlow ist der Filter, der die einzelnen Testergebnisse in unterschiedliche Spaten ein ordnet. So erkennt man leichter an welchen Bereichen man nochmal Hand anlegen sollte. Durch die 6-stufige Bewertung des Notensystems sind die Test genauer dargestellt, wie das von Page Speed benutzte Ampel System. Das Tool bietet weitere Menüpunkte (Grade, Components, Statistics und Tools) an.

Unter dem Reiter “Components” sind sämtliche Komponenten der aktuellen Seite aufgelistet. In der ersten Zeile steht die Gesamtanzahl der angeforderten Komponenten und dessen Gesamtgröße. Zusätzlich zeigt dieser auch für jede einzelne Datei die “File Size” “GZIP Size”, “Cookie Received”, “Cookie Sent”, “Headers”, “URL”, “Expires”, “Response Time”, “ETAG” und “Action” an. Somit lässt sich am schnellsten herrauslesen an welcher Datei man noch schnellere Ladezeiten erreichen kann.

“Statistics” verschafft dem Tester ein Diagramm, an dem er erkennen kann wie groß jeder einzelne Bereich der HTTP – Requests ist. (leerer Cache und befüllter Cache)

“Tools” ist eine weitere Funktion von YSlow und bietet Tools, wie JSLint, dass die JavaScript Qualität der Seite überprüft, oder man hat die Möglichkeit alle JavaScript Dateien als Minified-Version oder normal anzeigen zu lassen.

Als Extras bietet das Tool eine druckbare Version und eine ausführliche Dokumentation an.
Die Rulesets lassen sich neu anlegen und verwalten. Standardmäßig sind bereits drei Rulesets angelegt (YSlow(V2), Classic(V1) und Small Site or Blog).

Fazit:
Als Fazit lässt sich sagen, dass YSlow einige Extras bietet, die man bei Page Speed vermisst. YSlow besitzt nach der Installation neben dem Firebug-Symbol (unten, rechts im Browser) ein eigenes Symbol, dass nach Ablaufen des Tests KB und Sekunden des Ladezeitraums anzeigt.

YSlow und Page Speed im Vergleich:
Es schadet nicht beide Tools zu nutzen, denn beide haben ihre Vorteile und Nachteile.

Beide Tools lassen sich gut auf der Seite gtmetrix.com gegenüber stellen und diese ist auch perfekt für Nutzer, die kein Firebug bzw. Firefox installiert haben. Nur ist uns aufgefallen, dass die Werte, die auf gtmetrix.com, nicht ganz mit den Werten des Add-ons übereinstimmen. Das könnte daran liegen, das die Hosts, mit denen getestet wird ,von unterschiedlichen Orten stammen oder gtmetrix.com eine andere Version nutzt. Doch haben die Werte meist nur +- 2 Scorepunkte Unterschied.

WebPagetest
Zuletzt stellt sich webpagetest.org vor. Diese Seite macht es möglich ohne irgendwelche Installationen Performancetests mit sehr vielen Einstellungsmöglichkeiten durchzuführen.

Diese Seite bietet einen Screenshot, eine Zeitleiste mit allen Zeiten von den geladenen Komponenten, eine Optimierungscheckliste und Details an denen man erkennen kann, wo genau es zu Verzögerungen kommt. Eine Request-Detail-Liste findet man unter den grafisch dargestellten Zeitbereichen. Nachteilig an der Seite ist, dass sie sehr unübersichtlich ist. Aber trotzdem bietet webPagetest die meisten Einstellungsmöglichkeiten an. Man kann zum Beispiel meherere Testdurchläufe eingeben oder den Standort der Tests wählen, doch liegen diese alle außerhalb Europas und sind daher für Seiten, die meist nur in Deutschland besucht werden, nicht optimal.

Allgemeine Tipps zur Webseitenbeschleunigung:

• Statische JavaScript- und CSS-Dateien, die nicht verändert werden, als Minified-Version schreiben. D. h. Alle Kommentare und Funktionen die nicht verwendet werden entfernen und alles in einer Zeile schreiben. Dadurch kann man schon einiges an Datengröße minimieren.
• Möglichst viele Kommentare im Quelltext entfernen.
• Mehrere JavaScript- und CSS-Dateien in eine große Datei zusammenfügen. Dadurch wird nur eine Anfrage für eine Datei gestellt.
• Bilder als CSS-Sprites verwenden. (SpriteMe!, CSS Sprite Generator)
• Viele Datenbankanfragen vermeiden.
• Bilder und Objekte sollten von der Datengröße gering gehalten werden.
• Bilder und Objekte sollten immer eine definierte Breite und Höhe haben.

Google hat eine klare Ansage gemacht und wir sollten dem folgen. Früher lagen die großen Verzögerungen meist an der schlechten Bandbreite, doch heutzutage ist das Internet schneller denn je. Deshalb liegt es an einem selbst, wenn die eigene Seite eine Ewigkeit in Anspruch nimmt um geladen zu werden. Wir können dafür sorgen, ein schnelleres und benutzerfreundliches Internet zu formen.

Alle Links im Überblick:

• Google Tools
• Page Speed
• YSlow
• gtmetrix.com
• webpagetest.org

Vorteile:

• Zusätzlich warnt das Tool vor Problemen, die nach der Komprimierung entstanden sein könnten.
• Die neue JavaScript-Datei lässt sich als lesbarer Code einstellen (mit Umbrüchen und Einrückungen).
• Der Code kann eingegeben, oder per URL angegeben werden.
• Die neue JavaScript-Datei kann einen beliebigen Namen tragen und nach der Komprimierung per Klick auf den Dateinamen herruntergeladen werden.
• Die Komprimierung ist sehr effektiv (Dateien können bis zu 70% komprimiert werden)
• Das Tool besitzt eine sehr gute Dokumentation von Google

SpriteMe!
SpriteMe! ist ein Sprite Generator, der meherere Bilder in einem zusammenfügt und dazu auch noch die Koordinaten des jeweiligen Bildes in einem CSS Export speichert. Das Tool wird als Lesezeichen ausgeführt und analysiert die aktuelle Seite, auf der man sich befindet und beschreibt auch gleich die Bilder, die als Sprite in Frage kommen. Mit Klick auf “Make Sprite” wird ein Bild erzeugt, das die möglichen Bilder beinhaltet.

Alle Links im Überblick:

• Google Tools
• SpriteMe!
• CSS Sprite Generator
• Closure Compiler

Wieden & Kennedy London haben für das Onedotzero-Festival eine interaktive und generative Software/Brandidentity/Installation entwickelt, die Einträge aus diversen Social Media Kanälen nutzt und daraus den Festival-Schriftzug entwickelt. Diese Animation lässt sich dann z.B. auch über das Iphone steuern im Fall der Installation.

Hier wird das Ganze als Video-Showcase noch mal genauer vorgestellt:

onedotzero video case history from Wieden + Kennedy London on Vimeo.

Toller Einsatz von generativem Design und  Informationen. Das Festival geht übrigens jedes Jahr auf Welttournee und macht auch einen Zwischenstop in München, soweit ich mich erinnern kann sogar kostenfrei. Um auf dem Laufenden zu bleiben sollte man die Festival-Website beobachten.

Graffititags – Cool! Motion-Tracking – cool! Partikeleffekte – cool! 3D Typeanimation – auch cool! Ein sehr interessantes Projekt das alles in einem zusammenfasst – ziemlich cool!

Digital Blackbook (Graffiti Analysis 2.0): Hong Kong Opening from Evan Roth on Vimeo

Gefunden bei Flylyf

Doch die “Ursache” ist eigentlich recht naheliegend. Es handelt sich bei dieser Quelltext-Kunst doch tatsächlich um die Silhouette des Fujijama – wie passend. Oder wie die Stuttgarter Zeitung in ihrem Blog schreibt: Wie unglaublich japanisch.

Bleibt eigentlich nur die Frage, weches unserer Projekte sich für solch ein Easteregg eignet… Jemand eine Idee?