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.

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.

Für den Auftakt der AFL Meisterschaft wurde das bereits im Vorjahr entwickelte Fangame Cheer ‘em up neu angepasst. Via Facebook und Twitter können die Fans dieses mal ihre Lieblingsmannschaften der Austrian Football League anfeuern und so die wichtigen Yards erkämpfen.

Die Umsetzung

Unter http://www.cheeremup.at finden die User ein Footballfeld auf dem sich 6 Helme bewegen. Die Helme sind mit den Mannschaftsfarben, Logos oder Zeichen gestaltet. Die User können nun wieder mittels Facebook Likes, Facebook Shares oder Twittermeldungen mit passendem Hashtag ihr Team näher Richtung Touchdown Linie bringen. Diese wird erst zur Austrian Bowl (Ende Juli) erscheinen.

Sportler sind sehr oft zielorientierte und ehrgeizige Personen, die ihre wertvolle Zeit gut zu nutzen wissen. Hobbysportler haben oft Interesse an sportwissenschaftlicher Betreuung, sind sich aber unsicher ob solche Angebote auch für sie passend sind. Um Freizeit- und Spitzensportlern den Zugang zu den kompetenten Leistungen von IMSB Austria zu erleichtern, wurde die Website www.imsb.at einem kompletten Relaunch unterzogen. Die Angebote, die sowohl von Profis aber auch von Hobbysportlern in Anspruch genommen werden können, rückten in den Vordergrund.

Die Umsetzung

Das neue, schlichte Design erlaubt einen schnellen Überblick und sorgt für gute Orientierung. Der auf die Bedürfnisse der sportlichen Zielgruppe ausgerichtete Webauftritt erleichtert den direkten Zugang zu den Informationen ohne Einbußen bei Design und Funktionalität hinzunehmen. So können z.B. mittels Login-Funktion Datenblätter verschiedener Messungen leicht ausgetauscht und somit schneller bearbeitet werden.

Neben den detailliert erklärten Leistungen, runden Fortbildungen, Termine und der Onlineshop den gelungenen Webauftritt ab. Zusätzlich wurde eine Facebook-Fanpage eingerichtet, auf der neben Sport- und Trainingstipps, auch der Austausch mit Sportmedizinern und Mitarbeitern von IMSB aber auch unter den sportlichen Fans selbst nicht zu knapp kommt.  Zum Start der Fanpage generiert zusätzlich ein Gewinnspiel mit attraktiven, sportlichen Preisen, die unter den Facebook Teilnehmern verlost werden, erhöhte Aufmerksamkeit.

Für mich hat dieser Begriff 2012 gar keine Bedeutung mehr. Ich habe mich früher selbst als solcher bezeichnet, denn der Webdesigner war immer ein Allrounder. Vom Screendesign bis zur Umsetzung, alles aus einer Hand… Sogar das viel belächelte Institut Humboldt bietet tolle Ausbildungen in diesem Bereich an :) Warum klappt das “alles aus einer Hand” nicht mehr? Das möchte ich hier kurz erklären.

Umsetzung eines Webprojektes 2012

Wenn man aktuelle, professionelle Webprojekte durchleuchtet, sehen eigentlich auch keine Webprofis, dass mittlerweile viel mehr dahintersteckt als eine “bloße” Webseite.

Nehmen wir uns ein Beispiel zur Hand: http://happycog.com/

Rundum-Kommunikation

Webseiten, oder Dienstleistungen rund um Webprojekte sind mittlerweile sehr komplex geworden, da viel mehr Themengebiete zu einem Auftritt gehören. Es fängt damit an, dass man sich viel gezielter überlegt, welche Story man mit der Webseite erzählen möchte. Da ist schon beim Konzeptionieren sehr wichtig, dass alle möglichen Aussagen der Webseite und die darum liegende Kommunikation bedacht wird. Denn ein Webauftritt ist heute eine Basis für viel mehr. Social Media, Applikationen, Mobile, Online-PR oder andere Online Marketingaktivitäten. Wir sehen, dass wir unsere Kunden rundum beraten müssen, gemeinsam mit Marketing und klassischer Öffentlichkeitsarbeit. Eine Webseite stellt auf keinen Fall ein Alleinstellungsmerkmal  mehr dar. Hier können wir unsere Erfahrungen aus der PR und Social Media gut einfliessen lassen.

User Interface tritt User Experience

Screendesign bedeutet heute nicht mehr etwas “Gefälliges” zu entwerfen. Früher war es wichtig, dass es schön ist. Oben der Header, links die Navigation etc… Heute ist das Design einer Webseite dermaßen anspruchsvoll geworden. Es geht um wirkliche Illustrationen, gepaart mit echter! Designleistung. Typographie-Wissen spielt eine übergeordnete Rolle. Welche Schriften passen wie zusammen und wie werden die Schriften sinnvoll eingesetzt, damit der User richtig durch die Webseite geleitet wird. Gleichzeitig gibt es starke Trends im Design (Farben, Pattern, Effekte etc.). Dann geht es darum wie man Action-Elemente richtig setzt. Wie verhaltet sich ein Navigationspunkt oder Button. Nette Animationen sind mit CSS3 möglich, aber was nützt es der Usability der Seite. Ebenso ist die UX (User Experience) sehr in den Vordergrund gerückt. Wie und Was erlebt der User mit der Webseite, dies entscheidet sich in Sekundenbruchteilen. Webseiten sind auch schon lange keine statischen Kommunikationsmittel mehr, es sind halbe Applikationen geworden, also ein UI (User Interface) wo User und Webseitenbetreiber miteinander agieren können, hier muss man auch sehr Applikations-getrieben handeln.

Development

Steht das Screendesign, gibt es jede Menge Photoshop-Dateien, mit vielen Beschreibungen und Layern. Der Frontendentwickler kommt nun zum Zug. Heisst, welche Devices und Browser können auf das Ergebnis treffen? Mobil heisst ganz kleine Auflösung oder breiter Bildschirm bedeutet viel Elemente und Platz. Gleichzeitig müssen alte, in die Jahre gekommene Browser bedient werden. Dann gibt es Applikationselemente in einer Webseite, dies kann ein Shop sein, ein Blog oder andere Widgets. Oder es handelt sich natürlich um ganze Applikationen. Hier kommen die Webdeveloper zum Zug.

Marketing

Nach dem Testen und GOLIVE einer Webseite ist es meistens nicht getan. Wie agieren Suchmaschinen mit der Webseite, gibt es eine Suchmaschinenstrategie? Was gibt es für sonstige Themenschwerpunkte oder Kommunikationsmaßnahme. Welche Geschichten werden auf der Webseite erzählt? Hier kommt Social Media auch stark ins Spiel. Redaktionspläne, Dialoge, und Workshops für Autoren. Wie ist die Webseite dann skalierbar, wie kann man die Webstrategie ausbauen..

Hach, ich könnte noch stundenlang erzählen, das ist auch wirklich nur ein grober Umriss des Ganzen. Es gibt Webprojekte die dauern ein halbes Jahr oder länger. Natürlich vereinen sich manche Rollen auch in einer Person, aber der eigentliche Webdesigner kann das alles nicht mehr bewältigen, das kann ich euch versichern. Daher trage ich nun heute den Webdesigner zu Grabe, Ruhe in Frieden, es war eine schöne Zeit, aber nun ist es etwas komplizierter geworden. Amen! und wir spucken in die Hände!

Dennoch gibt es die echten mobilen Applikationen oder Webservices, welche auch mit der Umgebung verschmelzen. QR Codes sind sicher noch nicht todgesagt, oder Augmented Reality schleppt sich auch voran. Besonders Sportapplikationen oder Geo-Services im Tourismus oder bei Events, haben sich als sinnvoll rauskristallisiert.

Beim Entwerfen von mobilen Services gibt es andere Herausforderungen als bei einer Webseite. Zum Beispiel das Thema Mobile User Experience, also das mobile Erlebnis mit der Seite im realen Zusammenhang. Will man dieses einer Testgruppe zeigen oder erklären, kann man einen Screencast erstellen, aber meistens ist dieser eher einseitig und zeigt die Anzeige nur vom Device.

Eine wirklich coole Lösung ist das Abfilmen des Webservices am Device in der passenden Umgebung. Beim Abfotografieren von QR Codes oder beim Suchen von Events. Oder man will bei einer Präsentation dem Publikum die Anzeigen am Device im mobilen Kontext vorführen.

MR TAPPY

Mr. Tappy ist ein spannender Ansatz. Ein Kit für die Montage der Kamera am mobilen Device. Seht selbst:

Mr Tappy. For filming mobile device usability. from Mr. Tappy on Vimeo.

Somit kann man direkt das Erlebnis von der Sicht des Users herzeigen oder Testen. Finden wir hier sehr sinnvoll und werden das Ding mal ausprobieren. Vor allem müssen wir mobile Websites und Services immer aus der Sicht des Users betrachten. Hier könnte man auch schon in der Konzeptphase gewisse Perspektiven betrachten und Out of the Box denken. Apropo Umrühen und Rezepte, auch beim Kochen könnte man den Unterschied zwischen Rezept und Ergebnis auf Video festhalten :)

Seit 13 Jahren bastle ich nun an Webprojekten. “Damals” war es cool einfach zu behaupten ein Webdesigner zu sein, schon hatte man ein paar Mädls um sich. (Ja, ist jetzt auch übertrieben, aber in meiner Erinnerung ist es so;) Webdesign war damals ein großes graues Mysterium, ehrlich gesagt auch für mich. Ich habe mich ja über WYSIWYG Editoren an das Thema herangenähert. HTML und CSS kam erst später, wie die Webstandards Einzug gehalten haben und ich mich in die Materie vertieft habe. Nach dem Thema Webstandards kam als großer Meilenstein Social Media und vor 2-3  Jahren war die Deviceunterschiedlichkeit ein großer Aspekt. Mobile und Co. von nichts anderem war/ist die Rede. Internet am Tablet, SmartTV und ja, sogar auf einem Autonavigationssystemen. Doch welche Richtung schlagen professionelle Webprojekte nun ein (2013-2014)?

Wir haben ja schon oft von Responsive Webdesign gesprochen. Das ist nicht nur der heißeste Sch***, sondern rückt auch einen interessanten Aspekt in den Vordergrund. Durch die Idee ein Webdesign, mit unterschiedlichen Usabilitykonzepten bei verschiedenen Bildschirmauflösungen umzusetzen, geht es eher darum die Bedürfnisse und Begebenheiten des Users wichtig zu nehmen. Doch das ist erst ein Anfang, denn genau darum geht es in Zukunft: dem User!

Whats next? Ganz einfach: DER USER

Bei User Centered Design (Kurz: UCD) geht es darum die Gebrauchstauglichkeit von Interfaces – und nicht deren Technik -in den Vordergrund zu stellen. User Centered-Design (UCD) ist mehr eine Philosophie und ein Ansatz, als ein System. Die Person (=der USER) wird in den Mittelpunkt gestellt. Die Gestaltung von UCD-Interfaces ist ein Prozess, der sich auf kognitive Faktoren (wie Wahrnehmung, Gedächtnis, Lernen, Problemlösen, etc.) konzentriert.

Hört sich alles gut an, doch was bedeutet das in der Praxis? Wir konzipieren die Webprojekte wie bisher in den gewohnten Schritten, Strategie, Evaluierung, Mockups, Screendesigns und Umsetzung, lassen aber folgende Fragestellungen mehr und mehr einfliessen.

• Wer sind die User des neuen Interfaces (analog zur Zielgruppenanalyse)
• Was wollen die User auf der Webseite , was will ein typischer Besucher für Informationen?
• Welche Informationen sind besonders wichtig, und besonders unwichtig?
• Welche Erfahrungen haben wir mit den bisherigen Informationen?
• Wie benutzt man das Interface vom kognitiven Ansatz?
• Welche Intuitionselemente kann man dem Nutzer bieten? (Natural User Interface)
• …

Okay, das unterscheidet sich beim 1. Blick nicht wirklich von bisherigen UI Konzepten. Allerdings geht es bei den Fragestellungen immer mehr darum den User in den Mittelpunkt zu stellen. Wir denken bei der Konzeption von User Centered Designs noch nicht an die Technik dahinter, oder an die Marketingziele des Auftraggebers, aber auch noch nicht ans Visual Design, sondern an den Webseitenbesucher als Person und Mensch.

Zusammengefasst: Was ist wirklich relevant und was stellt den User zufrieden?

Relevanz und Zufriedenheit

Das schönste Design und auch die beste Usability nutzt dem Webseitenbesucher nichts, wenn die relevantestenWebseitenelemente nicht richtig angeordnet sind. Der Auftraggeber oder Marketingentscheider will natürlich unbedingt Element A oder B platzieren, weil es ihm wichtig ist, aber will das auch der User? Wie oft habe ich mich zum Beispiel geärgert, wenn bei Webdesigns einfach keine f**** Telefonnummer zu finden ist….. Als potentieller Gast eines Restaurants hätte ich zum Beispiel wahnsinnig gerne einen Blick in das Lokaldesign geworfen und vielleicht noch in die Speisekarte. Es interessiert mich aber weniger, welche Philosophie der Küchenchef hinausposaunt. (Ja, kann auch wichtig sein, aber auf dem 2. Blick..)

Hat der User auch genug relevante Information, natürlich unterstrichen mit einem Wohlfühldesign :), wird er auch motiviert sein mehr in das Seitenangebot einzutauchen. Da kommen die Stichworte Storytelling ins Spiel (Restaurantbeispiel: “Hey, hast du gewusst, dass wir auch Bio-Cocktails haben..”). Ebenso ist es wichtig den Benutzer zu involvieren (“Reservier gleich einen Tisch”)

Funktionalität wird bei o.g. Beispiel vorrausgesetzt, egal welches Device der User benutzt, wir haben es am Beispiel Apple gelernt: Die Dinge müssen einfach funktionieren, wie und ob, ist dem Benutzer egal. Es reicht nicht mehr dem Auftraggeber zu kokettieren, dass wir auch ältere Browser oder kleinere Bildschirmauflösungen bei der Umsetzung berücksichtigen, das ist eine Grundvorraussetzung einer professionellen Webseite, denn schließlich wollen wir nicht nur in Social Media Dialog mit dem User, sondern auch auf der Webseite oder in einer Applikation.

Zurück zu den Wurzeln

Es ist eigentlich nicht kompliziert, 1989 wurde das WWW erfunden um den Forschern das Leben zu erleichtern. Einfacher und nutzbarer sollte es werden, konzipiert nach den Bedürfnissen der Forscher, das war der Anreiz. Es ist gut, dass uns dabei die Technik immer überholt und auch die Marketingmöglichkeiten sind super, aber dabei bitte nicht auf den armen User vergessen :) Wir Webagenturen sind da um das Internet besser zu machen, ist es nicht so?