Am Freitag, den 9. 10. 2015, war es wieder soweit. Die Digital Visions Konferenz – das Event für User Experience und Frontend Development – ging in die dritte Auflage. Um dem immer größer werdenden Publikum einen angemessenen Platz zu geben, fand die diesjährige DIV im Impact Hub Vienna statt.
Nach der Registrierung und einer kurzen Verschnaufpause für die Teilnehmer mit Kaffee und Tee, ging es kurz nach 9.00 Uhr los.
Auch die Echtzeit-Wall von Walls.io gab es dieses Jahr wieder auf der DIV.
The UX of speed – Stefan Baumgartner
Gleich zu Beginn durfte ein alter Bekannter vor das Mikrofon treten. Stefan Baumgartner war bis jetzt bei jeder Digital Visions Konferenz als Speaker dabei und durfte deshalb auch heuer nicht fehlen. Er bezeichnet sich schon selber als DIV-Maskottchen :-).
Bei seinem diesjährigen Vortrag hat er sich die gute alte Performance zur Brust genommen. Viele Studien zeigen, dass Performance nicht nur für UX entscheidend ist. Performance steht direkt in Verbindung mit Einnahmen. Schon eine Einsparung von einer Sekunde erhöhte die Einnahmen von Firmen wie Amazon oder Walmart enorm. Aber nicht nur für diese Riesen ist eine schnelle Website von Vorteil. Google reiht schnellere Seiten besser in ihrer Suche und dann sind wir auch schon wieder bei der Erfahrung der Nutzer. Bessere Performance heißt bessere UX und diese führt zu glücklicheren Nutzern.
Zunächst sollte man für seine Projekte Performance-Ziele definieren. Allgemein gute Werte sind:
- Speed Index unter 1000
- die wichtigsten Informationen sollten innerhalb 1 Sekunde geladen werden
- Seitengröße unter 1,5MB
Sobald die Ziele definiert sind (das kann von Projekt zu Projekt variieren) kann man mit dem Optimieren beginnen. Neben den bekannten Techniken hat uns Stefan zwei Tricks besonders ans Herz gelegt. Zuerst sollte man sich um das Critical CSS kümmern. Das sind die Styles die benötigt werden, um den wichtigen ersten Inhalt (above the fold) darzustellen. Hier ist es durchaus erlaubt diese Styles inline zu laden. Aber auch bei den WebFonts kann man nachhelfen. Diese kann man nämlich im LocalStorage speichern, sodass der Nutzer sie nicht jedes Mal neu Laden muss.
Was gibt es Schöneres als zu sehen wie die eigene Seite schon geladen ist, während bei der Konkurrenz noch nichts zu sehen ist.
Performance ist ein primärer Entscheidungsfaktor für jede Website und sollte bei jedem Projekt von Anfang an ein Thema sein. (Hier findet ihr die Slides)
How to be the UX-Designer of tomorrow – David Höller
Als nächster durfte David Höller von ILLUSTREE ins Rampenlicht. Auch er war bereits zum zweiten Mal bei uns zu Gast, um seine Erfahrungen zu teilen. Dieses Mal zeigte er uns anhand eines von ihnen durchgeführten ÖBB Projektes, wie der UX Designer von morgen sein muss.
Das ist geil an diesem Projekt. Wirklich JEDER hat eine Meinung dazu.
Designer sind Problemlöser. Sie sind immer von Anfang an im Projekt involviert und müssen die Probleme erkennen und auch schon in einer einfachen Form lösen. Laut David müssen sie sich auch den Programmierern annähern, denn sie müssen lernen Muster zu erkennen und sich weg vom Single Worker hin zum Austausch mittels Teamarbeit bewegen.
Es macht mehr Spaß etwas am iPhone nicht zu schaffen, als es am Blackberry zu schaffen.
Gender Expericence – Marc Busch
Marc Busch ist Wissenschaftler und beschäftigt sich mit Gender Experience. Dabei ist es oft verwunderlich, dass die Unterschiede innerhalb einer Gruppe des gleichen Geschlechts teilweise gravierender sind, als die tatsächlichen Unterschiede zwischen Mann und Frau. Das Geschlecht gibt aber deutliche Hinweise auf soziale Rollen und Zeiten der Personen.
User Experience muss so einzigartig sein, wie die Persönlichkeiten selbst.
Um den unterschiedlichen Spielerpersönlichkeiten Rechnung zu tragen, teilt er sie in mehrere Gruppen ein: Conquerer, Seeker, Survivor, Socializer, Daredevil, Achiever und Mastermind.
Während sich viele Frauen beispielsweise als starke Socializer sehen, hinterfragt Marc Busch ob dieses Zugehörigkeitsgefühl wirklich durch das Geschlecht bedingt ist oder durch soziale Normen entsteht.
Die Erfahrung, die er bei seinen Studien in diesem Gebiet sammeln konnte, baute Marc auch in ein Serious Game ein – also ein Spiel das einen höheren Anspruch hat, um beispielsweise soziale Probleme zu lösen. Das Spiel hat das Ziel, die körperliche Bewegung während der Arbeitszeit zu fördern. Durch jeden Spieler lernt das Spiel individuell, welcher Spielerpersönlichkeit die Person angehört und belohnt sie dahingehend.
Nach dieser Session stand ein für viele Teilnehmer mindestens gleichwertiger Programmpunkt an, wie die Vorträge selbst: Das Mittagessen. Gestärkt durch Gemüsecurry und Chili con Carne von Titi Laflora , leckere Bio-Limonaden von Pona und Bier oder Radler von Stiegl, ging es weiter in die Nachmittags-Sessions.
AI is the new UI: The shape of things to come – Jeremy Abbett
Nach der Mittagspause betrat der Keynote-Speaker der heurigen Digital Visions Konferenz die Bühne. Jeremy Abbett – ein amerikanischer Designer, Unternehmer und Evangelist von Google – inspirierte mit seinem Vortrag über die technologische Zukunft das Publikum.
Er ist der Meinung, dass künstliche Intelligenz – AI – vielen Leuten Angst macht, weil sich diese sofort an Filme wie Terminator erinnern, wo sich die künstliche Intelligenz gegen ihre Erschaffer wendet und zum unaufhaltsamen Killer wird. Abbett ist der Meinung, dass es sehr wichtig ist mit Technologie zu experimentieren, um Innovation schaffen zu können. So erzählt er uns beispielsweise von einem Face-Tracking Programm mit dem er mittels Augenbrauen-zucken Tweets verschicken kann, oder einer Lampe bei sich zuhause, die seine Kinder interaktiv darüber informiert, wo auf der Welt er sich gerade befindet. Die Lampe kann um 360° rotieren und zeigt damit die Richtung an, in der sich Jeremy befindet. Auch die Höhe der Lampe über dem Esstisch ist variabel – damit zeigt sie seine Entfernung von Zuhause an.
Wir haben heute alle Möglichkeiten und Tools für den Fortschritt und müssen dies einfach nur nutzen.
Mobile tends to be the thing between you and life
Ein großer Teil der heutigen Technologie zielt auf Handys ab – und Abbett meint, dass diese Geräte wie ein Proxy zwischen uns und unserem Leben stehen. Künstliche Intelligenz soll uns wieder näher mit unserem Leben zusammenbringen. Als Beispiel nennt er moderne Sprachsteuerungen wie Microsofts Cortana, Google now, Apples Siri oder Amazons Digital Assistent Echo. Diese Technologie erlaubt es dem Benutzer, durch natürliche Sprachbefehle Funktionen zu steuern und Antworten zu erhalten. Viele Leute finden die Idee, dass das Gerät ständig mithört gruselig. Abbett ist der Überzeugung, dass diese Angst überwunden werden muss, um den Fortschritt vorantreiben zu können.
Viele Bücher und Filme aus dem letzten Jahrhundert haben unsere Gegenwart geformt – natürlich vor allem aus dem Science Fiction Bereich (Star Trek, etc.). Am Beispiel von Interstellar zeigt er uns, wie künstliche Intelligenz in der Zukunft sein könnte -individualisierbar mit bestimmten Charakterzügen (ernst, humorvoll, etc.).
Am Ende seines Vortrages legt er uns noch ans Herz auf die Kinder zu hören, die uns heute schon die Richtung zeigen, weil sie mit modernen Technologien schon ganz anders und viel vertrauter interagieren als wir.
Webseiten modular entwickeln – Jens Grochtdreis
In seinem Vortrag erzählte uns Jens wie Webseiten in der Praxis modular entwickelt werden. Jede Seite kann in einzelne Module gebrochen werden, die so programmiert werden sollten, dass sie auch an anderen Stellen der Seite funktionieren. Zum Beispiel sollte die Hauptnavigation auch funktionieren, wenn sie im Footer platziert wird. Dies mag vielleicht zu Anfangs mehr Aufwand sein, zahlt sich aber im Verlauf eines Projektes immer wieder aus – beispielsweise wenn der Kunde Modul A von Template X jetzt auch gerne auf Template Y hätte. Dafür zeigte er uns auch einige Code Beispiele und Vorschläge wie man HTML/CSS Klassen am besten schreibt, was logisch ist und was nicht.
Außerdem legt er uns ans Herz, Styleguides zu erstellen. Dazu liefert er uns auch gleich einige Vorschläge wie wir diese umsetzen können. Styleguides sollen uns beim entwickeln helfen, zeigen welche Module es gibt etc.
Empathie – Andrea Egger
Ein guter Designer muss laut Andrea empathisch sein und Verhaltensmuster interpretieren, analysieren und die Bedürfnisse des Users erkennen und verstehen. Eigentlich sollten alle Designer ein Psychologiestudium absolvieren, um Designs noch besser und empathischer gestalten zu können. Als besonders guter Designer sollte man auch in der Lage sein Bedürfnisse zu erkennen bevor diese entstehen – so wie es Apple beispielsweise mit dem iPad geschafft hat ein Bedürfniss zu erzeugen, wo es vorher keines gab.
Was Vielen beim empathischen Arbeiten schwer fällt, ist dass man hier sein Ego zurückstecken muss – es geht nicht mehr um einen selbst, sondern um den User und die Fähigkeit sich in diesen einfühlen zu können.
Responsive by Design! Successful by Chance? – Thomas Piribauer, Björn Ganslandt
Responsive Webdesign ist ja nichts Neues mehr und heute schon ein Standard – Thomas und Björn erzählten uns was sich hier getan hat und wie ihre Arbeitsweise mit RWD aussieht.
Heute gibt es eine Vielzahl an fertigen responsive Templates – viele davon basieren auf Frameworks wie Bootstrap oder Foundation und haben alle ihre Vor- und Nachteile.
Einer der Nachteile ist auf alle Fälle, dass diese Seiten alle irgendwie gleich aussehen. Wenn man doch etwas umsetzen möchte, dass es noch nicht gibt, ist dies ein enormer Aufwand. Deswegen sollte man nicht auf fertige Frameworks vertrauen sondern lieber von vorne beginnen, sprich ohne Framework arbeiten.
Mobile First mag bei der Entwicklung einer Seite ganz sinnvoll sein, aber viele Designer und Kunden denken noch in großen Screens – so kommt es nicht selten vor, dass eine Seite Desktop first konzipiert/designed und dann mobile First entwickelt wird was meist nicht ohne Probleme funktioniert. Thomas’ und Björns Lösung ist hier “Gleichzeitig first” – denn beide Welten, Desktop und Mobile, sind gleich wichtig.
Wenn es um UX geht ist Performance ein wichtiger Faktor.
Treat Performance as Design.
Oft sind Bilder einfach viel zu groß und können vor allem mobil für böse Überraschungen sorgen (z.B. hohe Telefonrechnung, weil man sein Datenvolumen im Ausland überzogen hat). Auch CSS und JavaScript fressen viel von der Seitengeschwindigkeit, was aber durch Progressive Enhancement gelöst werden kann: Bei diesem Konzept wird der Content zunächst in den Mittelpunkt gerückt. Je nach Möglichkeiten des Browsers werden, nachdem der Content angezeigt wird, „Verbesserungen“ sukszessive hinzugeladen um die Experience zu verbessern.
Ein weiteres Konzept das sie uns vorstellen ist “Offline First”: bei Wunderlist ist es möglich Tasks auch offline anzulegen, die dann online abgespeichert werden sobald wieder eine Internetverbindung vorhanden ist. Das Offline Dinosaurier Jump-and-Run Game von Google Chrome (bei öffnen eines neuen Tabs ohne Internetverbindung) ist ein weiteres gutes Beispiel hierfür.
Mit Thomas und Björns Vortrag ging die Digitial Visions Konferenz 2015 zu Ende. Ein Tag voller Wissen, Erfahrung, gutem Essen und Trinken und vor allem voller Inspiration neigte sich dem Ende zu. Bei einem gemütlichen After-Conference-Bier hatten die Teilnehmer ein letztes Mal die Möglichkeit, mit den Speakern des Tages zu sprechen und Wissen auszutauschen.
Auch für uns Liechteneckers ist die Digital Visions Konferenz jedes Mal ein Ort, um Inspiration für das kommende Jahr zu sammeln. Wir freuen uns schon sehr auf die #DIV16 – frei nach dem Motto: noch größer, noch schöner, noch besser.
