Dieser Sommer steht bei uns ganz im Zeichen des runden Leders. Alle inter(net)aktiven Fans die das genauso sehen, werden sich für unser Fußball Fangame Cheer ‘Em On begeistern. Die 16 teilnehmenden Nationen der Europameisterschaft kämpfen dabei um das entscheidende Tor. Durch laute Anfeuerung werden die Spieler angespornt und jede Mannschaft kann dadurch ganz einfach mittels Tweet oder Facebook Share wichtige Meter nach vor rücken.

Die Umsetzung

Unter cheer-em-on.liechtenecker.at finden die User ein Fußballfeld auf dem sich 16 Trikots in den jeweiligen Länderfarben bewegen. Jeder kann nun mittels Facebook Likes, Facebook Shares oder Twittermeldungen mit passendem Hashtag die Lieblingsmannschaft anfeuern und so näher Richtung Tor bringen.

Mit Klick auf die einzelnen Trikots öffnet sich ein Fenster, dass die Spielanleitung erklärt. Man kann via Tweet und dem Hashtag #GOTeamname, also zB. #GoEngland, oder via Facebook Share oder Like seiner Mannschaft Beine machen. Außerdem ist auch ein Flitzer eingebaut, den man über einen etwas versteckten Klick auslösen kann.

Bei dem Game ist uns Interaktivität alleine nicht genug. Uns ist es wichtig, dass wir hier auch ein Beispiel schaffen, wie man heute schon breitenwirksam HTML5 und CSS3 einsetzen kann. So kamen bei dem Projekt wieder die neuen Webtechnologien zum Einsatz, um zu zeigen, dass Flash für Games nicht mehr unbedingt notwendig ist und um gleichzeitig Cheer ‘Em On auch auf allen mobilen Endgeräten verfügbar zu machen.

Bereits in der Vergangenheit wurde mit Cheer Em Up – das Fangame – Pendant für American Football im Zeitrahmen während der Football WM letztes Jahr knapp 15.000 Tweets und Facebook Shares.

Das Projekt Skin Future Materials setzt darauf, Entwickler von Innovationen miteinander zu vernetzen und eine Informationsquelle zu sein, wo Materialinnovationen die Grundlage vieler Produktinnovationen bilden. Als Plattform für Kommunikation und Entwicklung technischer Innovationen waren die Anforderungen an die Website dass diese übersichtlich, dem hohen Designanspruch des Fachpublikums entsprechend und detailgenau realisiert wurde.

Die Umsetzung

Das moderne und doch schlichte Design erlaubt einen schnellen Überblick über die verschiedenen Innovationsprojekte  und sorgt für gute Orientierung. Der auf die Bedürfnisse der fachspezifischen Zielgruppe wie Designer, Architekten, Grafiker, Multimedia- und Textilfachleuten ausgerichtete Webauftritt erleichtert den direkten Zugang zu den einzelnen Neuerungen.

Eine technische Herausforderung lag auch darin, das Backend flexibel zu gestalten um die einzelnen Kategorien und Projekte komfortabel zu befüllen. Die auf HTML5 basierende Website ist responsive und ermöglicht so das Betrachten des gleichen gewünschten Designs von verschiedenen Devices. Diese Animation des Skin Prozesses wurde komplett mit CSS3 umgesetzt.

Klar, die Effekte sind cool, aber solche Seiten sind oftmals viel zu verspielt und schlecht für die Usability und Lesbarkeit. Wir sehen die Einsatzzwecke eher für verspielte Herangehensweisen.

HTML5 und CSS3 sind mächtig und haben Flash sicher immer mehr abgelöst. Es herrscht wesentlich mehr Flexibilität als beim linearen Flash, dem entgegen steht aber wieder, dass so viele Browser die Möglichkeiten noch nicht unterstützen. Eine Fallback Variante für mobile Devices ist hier auch notwendig gewesen für die Maskeneffekte, aber es funktioniert überall wunderbar nach vielen Versuchen ;)

Es wird sich wie immer mit der Zeit “gesund schrumpfen” und auch Einzug in klassische Webprojekte nehmen, Spaß macht es in jedem Fall. Für unseren Zweck haben wir eine kleine Imageseite gebastelt mit unseren Leistungen. Ich hoffe es gefällt euch? http://we-are.liechtenecker.at/

Screendesigner

Heute stehen Designer sehr komplexen Aufgaben gegenüber, denn Webseiten sind keine Seiten mehr. Webseiten sind Kommunikationsstrategie, Social Media, Applikationen, Netzwerke.. Viele Webdienste entsprechen natürlich nach wie vor dem Ursprungsgedanken der Kommunikation (Stichwort CERN), das heisst Informationen werden aufbereitet. We call it Informationsdesign. Hier reicht kein simpel strukturierter Text, dabei geht es darum Informationen, die der Webseitenbetreiber vermitteln will, semantisch richtig und für den User angenehm lesbar, aufzubereiten. Im Normallfall bewältigt man diese Herausforderung mit einem Mockup oder Wireframe und einem Screendesign, welches den HTML Templates zugrunde liegt. Hört sich einfach an, ist es aber nicht. Denn Informationsseiten, wie zum Beispiel eine Corporate Website, gehören ordentlich strukturiert und sollen hochwertig aussehen. Natürlich spielt hier ein qualitatives Navigationskonzept eine übergeordnete Rolle.

Komplexität is growing

Viel spannender und komplexer wird es jedoch bei richtigen anspruchsvollen Webservices, die in den letzten Jahren aus dem digitalen Boden schießen. Hierbei geht es um Interaktion. Der User betrachtet das Webdesign nicht nur, sondern er kann auch damit agieren. Schnelle Server und tolle Development Weiterentwicklungen bieten ungeahnte Möglichkeiten. Anforderungen die früher mit Desktop Applikationen gelöst wurden, können heute über Webdienste abgebildet werden. Es ist logisch, dass die Skills eines Grafikdesigners oder Webdesigners hier nicht mehr genügen werden. Denn diese Dienste werden ja nicht nur auf den Desktop reduziert, sondern können auf mobile Devices erweitert werden.

UX und UI Designer

Aufgrund der vorhin beschriebenen Lücke sind neue Berufssparten am Onlinesektor entstanden bzw. gewachsen. Der User Interface Designer (UI) und der User Experience Designer (UX). Der User Interface Designer (UI) soll dafür sorgen, dass User Interface Elemente einer Applikation, nämlich Interaktionshelfer  (Buttons, Schieber, Regler, Formulare..) in einem erfassbaren Zusammenhang stehen und es mit der dahinter liegenden Technik korelliert. Welche Verhaltensweise hat ein Regler wenn ich ihn anfasse, wenn ich mit der Mouse darüber fahre usw. hier werden wie in diesem Bild richtige Schablonen bzw. UI Kits paralell zum Screendesign entworfen.

Der User Experience Designer  (UX) soll widerum dafür sorgen, dass das Nutzererlebnis des Webservice alle Erwartungen des Users erfüllt. Dazu ist ein ganzheitliches Verständnis eines Webdienstes notwendig und hier kommt auch eine 3 Dimensionalität ins Spiel. Es geht besonders um Animationen, die das Erlebnis eines z.Bsp. Buttons unterstreichen sollen. Viele Sachen passieren bei Webdiensten mittlerweile sofort. Wie ist das Userfeedback, wenn ich einen Regler schiebe, wie kann ich hier eine dezente Animation hinterlegen, die dem User hilft es besser zu bedienen oder zu verstehen. Es werden sogar Animationen hinterlegt wenn man mit der Seite scollt (Navigation verkleinert sich und bleibt oben haften), oder ein Formular wird in Echtzeit validiert und bietet dezente animierte Hilfetexte beim Ausfüllen, usw.. Mit CSS3 und Javascript gibt es unendliche Möglichkeiten User Interface Elemente zu animieren um dem Nutzer bei der Bedienung zu helfen. (Bitte bei diesem Beispiel scrollen)

Grafikdesigner, nicht beleidigt sein

Ich will mit diesem Blogbeitrag keinem Grafikdesigner zu nahe treten, eher wollte ich darstellen wie komplex ein Designprozess eines Webservices geworden ist. Ein Screendesign und ein Mockup ist die eine Seite, aber heute braucht es mehr. Wir schreiben richtige Storybooks, wie bei einem Film, für animierte Bedienelemente einer Webseite. Dazu entwerfen wir Baukästen und Schablonen für unsere Interfaces wie oben beschrieben. Man braucht hier ein sehr gutes Verständnis für Applikationen und Userbedürfnisse. Man malt nicht mehr von oben nach unten ;)

Einer unserer Screendesigner hat auch viel Erfahrung mit Filmschnitt und Zeitabläufen, das kommt uns beim Entwerfen eines Interfaces mit User Experience sehr entgegen. Ebenso sollte man immer den User beim Designprozess zentrieren und testen, testen, testen.

Mir gefallen in jedem Fall diese neuen Anforderungen an Screendesigns, das Web wird erwachsen und professioneller.

Die Entwickler von Wallit müssen wohl meinen Beitrag gelesen haben, denn diese App macht theoretisch genau das. Nun ja, nicht ganz. Eigentlich ist es mir noch zu wenig AR. Das heißt, ich will keinen Radar und auf einer Karte sehen, wo Einträge sind. Das ist keine gute Usability. Besser wäre es wirklich auf ein Haus mein Handy – oder vielleicht meine Google AR-Brille – zu richten und dann die Walls mit den Infos eingeblendet zu bekommen. Jetzt unterscheidet sich Wallit meiner Meinung nach noch nicht sehr von Apps wie Foursquare. Aber hey, vielleicht wird das noch was.

Wir haben für Liechtenecker jedenfalls bereits eine Wall angelegt – ihr könnt uns also Nachrichten hinterlassen.

Ein schönes Anwendungsgebiet wäre natürlich, diese Walls an Monitoren vor einem Geschäft anzuzeigen. Vielleicht wird dann meine Vorstellung von vor zwei Jahren real:

“Der Frisör könnte die neusten Frisurentrends dort anzeigen oder User könnten dort Bilder posten von ihrem Style-Ergebnis nach Friseurbesuch.”

Oder Hotels können so ein virtuelles Gästebuch zur Verfügung stellen. Gerade im Tourismus wird so etwas spannend.

Ideen gibt es wie immer genug. Mutiger Umsetzer – aber auch User, so viel muss man schon zugeben – gibt es noch wenig.

Nun ist es an der Zeit, diesen Hype einmal genauer unter die Lupe zu nehmen und auch kritisch zu betrachten, denn nicht alles was neu ist, ist auch automatisch gut.

Der Hype um HTML5

Begonnen hat das große “Trara” circa mitte 2009 und drehte sich anfangs hauptsächlich um die Strukturelemente wie <header>, <footer> und dergleichen. Mittlerweile werden diese Themen beispielsweise in Blogs seltener behandelt – ich denke das liegt daran, dass das ganze auf Dauer nicht so spannend ist und wir Entwickler mittlerweile sowieso schon alle Bescheid wissen ;). Was hier aber doch wirklich interessant ist, ist die Browserentwicklung: Alle Browserhersteller liefern pro neuer Software Version neue HTML5 Unterstützungen und man darf immer wieder gespannt sein, welche Elemente nun zur Verwendung frei stehen.

In diesem Bereich immer auf dem neuesten Stand zu sein, ist aber eine eher herausfordernde Sache, jedoch gibt es hierzu beispielsweise diese nützliche Website: http://www.html5test.com/ Dieses Webservice zeigt an welche HTML5 Elemente ein Browser unterstützt – hierzu zählen nicht nur Desktop Browser, sondern auch die von Mobilen Geräten oder von Spielekonsolen.

Was zählt aber jetzt gerade zu den heißen Themen rund um HTML5?

Dass HTML5 mit JavaScript zusammen ein ernstzunehmender Konkurrent für Flash ist, ist uns allen schon lange klar. Grundsätzlich braucht Flash keine Konkurrenz, denn dies ist eine logische Weiterentwicklung. Es wurden in den letzten Monaten soviele HTML5 Applikationen auf den Markt gebracht, dass uns diese HTML5 – Flash Rivalität noch einmal bewusster wird.

Zu diesen Applikationen zählen beispielsweise Spiele, Bildbearbeitungsprogramme, Audiotools und verschiedenste Organisationstools.
Für uns als Agentur am interessantesten, ist aber die Verwendung von HTML5 auf mobilen Geräten. Mittlerweile sieht man deutlich, dass der Trend bei mobilen Anwendungen weg von nativen Applikationen hin zu Web Anwendungen geht und genau hier kann mit HTML5 wunderbar geglänzt werden. Wir finden als kleines Beispiel dieses HTML5 iPad Magazin recht spannend: http://www.asidemag.com/

Der Hype um CSS3

Hier war es anfangs so, dass die Möglichkeit Schlagschatten, Verläufe oder abgerundete Ecken mithilfe von CSS umzusetzen für große Begeisterung unter den Frontend Entwicklern sorgte.

Nun ist es so, dass es viele verschiedene, ausgefallene und kreative CSS3 Projekte gibt, bei denen selbst wir nur staunen können. Das wahrscheinlich bekannteste Beispiel ist die Umsetzung von verschiedenen Logos und dergleichen mit CSS3: http://www.splashnology.com/article/collection-of-famous-logos-in-pure-css/3548/
Aber auch CSS3 Animationen sind gerade sehr im Trend und sollen teilweise sogar schon als HTML5/JavaScript Ersatz dienen (zumindest in Webkit Browsern). Seht euch beispielsweise dieses beeindruckende Space Projet an:http://media.24ways.org/2009/15/space.html

Aber…

Wenn ihr euch das CSS3 Space Projekt angesehen habt, dann werdet ihr wahrscheinlich denken “Wow, sehr cool gemacht!”. Das finde ich auch, aber ich sehe hier keinen Nutzen für meine Arbeit. Genauso sieht es aus mit den CSS3 Grafiken – bevor ich 4 Stunden damit verbringe ein solches Logo mithilfe von CSS umzusetzen, nehme ich doch lieber ein Bild und binde es in meine Website ein. Natürlich weiß ich, dass das zwei sehr extreme Beispiele sind, aber es lässt sich natürlich auch auf realistischere, arbeitsnähere Beispiele umlegen.

Auch bei HTML5 ist nicht alles so super – auch wenn es neu und innovativ ist. Für uns sind Spiele und dergleichen nicht relevant, da hier bei uns gar nicht der Schwerpunkt liegt, aber auch bei den Strukturelementen kann durchaus übertrieben werden.
Anstatt ewig lange zu recherchieren welches Element denn nun für meinen Content am besten geeignet wäre, nehme ich doch einfach ein klassisches “div”. Nirgends steht geschrieben, dass keine divs mehr verwendet werden dürfen – trotzdem versteifen sich einige Entwickler so sehr auf die neuen Elemente und nehmen im Zweifelsfall einfach mal das <aside> Element, obwohl es vielleicht überhaupt nicht für den Content geeignet ist.

Fazit: HTML5 und CSS3 sind defintiv Technologien die man verwenden sollte, allerdings sollte man sich von dem ganzen Hype nicht allzu sehr mitreißen oder blenden lassen und einen kühlen Kopf bewahren. Außerdem ist es wichtig, dass man die “alten” Technologien nicht vergisst. Hier ist einfach eine gute Mischung aus neuem und altem nötig, auf die man natürlich erst nach ein paar umgesetzten Projekten stößt. Wir sind alle an diesem Prozess beteiligt.

Bis jetzt wurde Augmented Reality vor allem für Marketingzwecke genutzt.

Nokia Lumia lies beispielsweise Passanten mit den Angry Birds spielen…

… und Fujitsu vertieb so die Langeweile am Münchner Flughafen.

Aufmerksamkeit und Werbung ist auch gut, schön und wichtig, vor allem in unserer Branche, aber es gibt noch andere Anwendungsmöglichkeiten für Augmented Reality. Mehr Zusatznutzen als nur “schön anzusehen” versprechen hier die Anwendungsbeispiele für Magazine oder Bücher. National Geograqhics erweckte, in Zusammenarbeit mit UPC, in einem Einkaufszentrum Tiere aller Größenordnungen und Zeitepochen.

Und auch Marvel-Comics setzt seine Helden auf Papier von nun an auch mit AR in Szene. Wenn man diese Ideen weiterentwickelt, kommen ehemalige, absolut nicht naturwissenschaftlich interessierte Schüler (wie ich) unweigerlich darauf: Wie würde der langweilige Unterricht wohl heute aussehen, wenn die Evolution mittels im Klassenzimmer hüpfender Affen gelehrt wird? Wenn man geschichtliche Ereignisse quasi live dargestellt bekommt? Unzählige Möglichkeiten, die bestimmt nicht nur Schülerherzen höher schlagen lassen, tun sich hier auf.

Aber auch aus dem Alltag gegriffene Beispiele zeigen eine große Bandbreite an Themen die Augmented Reality verbessern, erneuern oder erbringen kann. Ein paar Beispiele gefällig?

Ebay USA setzt gemeinsam mit der AR Plattform Junaio sehr auf Augmented Reality und auch darauf, dass die Onlineshopper offline Dinge sehen mit “Haben-Muss”-Faktor. Die App erkennt Muster und die Farbe von z.B. Kleidungsstücken  - im Schaufenster oder an der Freundin – und zeigt dann ähnliche Produkte auf der Verkaufsplattform an. Das ganze funktioniert auch mit Autos: Einfach das Heck fotografieren und  schon werden Angebote für dieses Modell angezeigt. Oder man probiert einfach mit der Smartphone Kamera aus, ob die Sonnenbrille auch wirklich steht…

Auch Lego nutzt Augmented Reality und hat in deutschen Läden Computerkameras anbringen lassen. Der Käufer hält die gewünschte Lego-Packung davor und sieht sofort, wie das ganze “in echt” aussehen wird, wenn man es richtig zusammenbaut und sich an die Anleitung hält. Durch Bewegung der Verpackung kann man den Inhalt von allen Seiten betrachten ohne dass man alle Lego-Baukästen im Laden ausstellen muss.

Drittes Beispiel: Die Suche nach Büro- oder Wohnflächen ist zwar überall gleich mühsam, geht aber in San Francisco einfacher als anderswo: Kurzer Blick auf das Smartphone, dass auf das Wunschobjekt ausgerichtet ist, und man erfährt sofort, ob es zur Vermietung oder zum Verkauf zur Verfügung steht.

Dazu kommen viele bereits verwirklichte und in Planung stehende Projekte wie Touristen-Rundgänge mit Informationen, Magazine versehen Städte mit Fashion-Hotspots, etc. Das Thema Augmented Reality ist also definitiv eines, das wir mit geschärftem Blick im Auge behalten, und das nicht erst seit Googles Brille. Wie, in welche Richtung und wie schnell es sich entwickelt wird sich zeigen … und wir bleiben an dem Thema dran.

Wir setzen bei unseren Screendesigns immer mehr auf gut bedachten Space, allerdings müssen hier auch die kleinen Devices bedacht werden. Hierzu sollten mehrere Varianten der Prototypen entworfen werden. (Stichwort: Responsive Webdesign) 2 hervorragende Beispiele hab ich in diesem Beitrag mitgebracht, wie Whitespace perfekt eingesetzt wird.

Ich würde allen raten: Mehr Mut zu Platz! Im Konzept aber nie vergessen wie man die Darstellungen auf kleinere Screens bündeln bzw. reduzieren kann.

Wer kennt sie nicht, die alltäglichen, kleinen Entscheidungen, die dennoch viel zu lange dauern, wenn man sie ausdiskutiert: Wer kocht? Wer geht einkaufen? Wer hat die Macht über die Fernbedienung? Liechtenecker ent- oder verschärft ab sofort genau diese Situationen. Mit der Facebook-Applikation Roshambo können zwei Spieler Entscheidungsschwierigkeiten direkt und schnell aus der Welt schaffen.

Die Umsetzung

Die Unstimmigkeiten werden auf dem Prinzip von “Schere – Stein – Papier” von nun an ohne drei SMS Nachrichten, zwei Facebook Messages und einer E-Mail, die wegen der merkwürdigen Betreffzeile sowieso im SPAM-Ordner gelandet ist, aus der Welt geschaffen. Nachdem man in der Applikation zunächst klärt worum es geht und optional seinen Wunschvorschlag mit einbringt, wählt man sein Symbol. Der Gegner wird dann via Facebook Invite herausgefordert. Auf der Roshambo-Startseite findet jeder Spieler seine persönliche Übersicht aus gesendeten und empfangenen Herausforderungen, der gespielten Antworten seiner Gegner und der letzten Entscheidungen.

Damit auch die Freunde mitbekommen, welcher wichtige Entschluss jetzt wie ausging, können Erfolge oder Niederlagen auf der eigenen Chronik geteilt werden. Auch die Sammellust kommt nicht zu kurz, so kann man verschiedene Badges horten und beweisen, dass man ein Roshambo-Profi ist, der keine Herausforderung fürchtet. Diese bekommt man ab einer bestimmten Anzahl an gespielten oder gewonnenen Partien. Eine Statistik zeigt an, wie viele Spiele jeder einzelne und die gesamte Roshambo-Spielergemeinschaft gewonnen und verloren haben, sowie mit welcher „Waffe“ die meisten Gegner besiegt worden sind. Somit wird einem auch die letzte und wichtigste Entscheidung ein wenig erleichtert, nämlich welches Symbol nun den gewünschten Sieg bringt.