Am 9.Oktober veranstaltete die Wiener Web Agentur Liechtenecker die 3. Webkonferenz Digital Visions im Impact Hub Vienna – wir waren dabei.

Die Digital Visions ist eine Konferenz für User Experience und Frontendwebentwicklung. Der Konferenztag konzentriert sich auf qualitative Themen rund um User Experience, Screendesign, Usability und HTML Trends.

 

 

The UX of Speed – Stefan Baumgartner

 

Der Vormittag startete mit dem ersten Vortrag um 9:00 und handelte von „The UX of Speed“. In diesem Vortrag wurde die Thematik der Performance einer Website von Stefan Baumgartner näher beleuchtet. Viele Studien haben bereits gezeigt, dass die Ladezeit einer Website nicht nur für die UX ausschlaggebend ist, sondern vielmehr eine Auswirkung auf Einnahmen hat. So erhöhte z.B. eine Einsparung von einer Sekunde die Einnahmen von Firmen wie Amazon (1 second -> 1.6 billion USD / yr less)  oder Walmart um ein Vielfaches. Zudem reiht Google schnellere Seiten auch besser in der Google Suche.

Um die Performance zu steigern, sollen in erster Linie Metriken definiert und Ziele gesetzt werden. Hier wurden unter anderem folgende Richtwerte genannt:

• Speed Index unter 1000ms (Zeit in der sichtbare Elemente der Site angezeigt werden – above the fold)
• die wichtigsten Informationen sollten innerhalb 1 Sekunde geladen werden
• Page Speed Score über 85 (https://developers.google.com/speed/pagespeed/)
• Seitengröße unter 1,5MB

Um diese Ziele zu erreichen, empfiehlt Baumgartner, sich um das Critical CSS zu kümmern, welches nötig ist, um wichtige erste Inhalte (above the fold) darzustellen. Diese können dazu durchaus inline geladen werden. Auch können WebFonts im Local Storage gespeichert werden, um ein erneutes Laden zu verhindern. Den größten Teil einer Website nehmen aber weiterhin Bilder ein. Auch jedes abgespeckte CSS und JS File bringt nichts wenn Bilder nicht optimiert werden.

Die Folien zur Präsentation:
https://speakerdeck.com/ddprrt/the-ux-of-speed

 

How to be the UX-Designer of tomorrow – David Höller

 

 

Mit dieser Thematik setzte sich der zweite Vortragende, David Höller, Gründer der User Experience Agentur Illustree, auseinander. Anhand des von ihnen durchgeführten Projekts (ÖBB-App) teilte er seine Erfahrungen mit uns.

Um gute Lösungen zu finden, ist es in erster Linie wichtig, die Probleme des Kunden zu kennen. Hilfreich sind hier Definitionen von Personas und entsprechende Szenarien, um die zugrundeliegende Thematik zu verstehen und ensprechend Lösungsansätze zu erarbeiten. Denn Designer sind Problemlöser. Dabei ist es auch notwendig, sich als UX Designer den Programmierern anzunähern, um Muster zu erkennen und sich mittels Teamarbeit austauschen zu können. Sie sind immer von Anfang an im Projekt involviert und müssen die Probleme erkennen und auch schon in einer einfachen Form lösen.

Nach einer kurzen Frühstückspause mit Brioche-Kipferl und Schoko-Croissants ging es etwas wissenschaftlicher weiter.

 

Gender Expericence – Marc Busch

 

Marc Busch, ein Wissenschaftler, welcher sich mit Gender Experience beschäftigt, erklärte uns, dass sich eine Gruppe gleichen Geschlechts häufig stärker unterscheidet, als Personen unterschiedlichen Geschlechts, also Mann und Frau. Das Geschlecht gebe jedoch Hinweise auf soziale Rollen der Personen.

Seine Annahmen basierten auf Studien bezogen auf das Gaming-Verhalten. Er teilte die jeweiligen Spielerpersönlichkeiten folgendermaßen auf: Conquerer, Seeker, Survivor, Socializer, Daredevil, Achiever und Mastermind.

Frauen sehen sich hier vermehrt als Socializer, wobei hier nicht ganz eindeutig ist, ob dieses Zugehörigkeitsgefühl auf das Geschlecht zurückzuführen ist, oder aus sozialen Normen entstanden ist.

Nach einer Mittagspause, in der wir uns mit Chili con Carne und Gemüsecurry stärken konnten, setzte sich der Nachmittag mit weiteren spannenden Vorträgen fort.

 

AI is the new UI: The shape of things to come – Jeremy Abbett

 

Jeremy Abbett ist ein amerikanischer Designer, Unternehmer, inspirierender Redner und kreativer Evangelist bei Google. Sein Vortrag handelte von der Zukunft und damit verbundenen Technologien wie Artificial Intelligence – künstliche Intelligenz.

Ein großer Teil seines Vortags beschäftigte sich mit den heutigen Technologien des Smartphones.  Als Beispiel nannte er moderne Sprachsteuerungen wie Microsofts Cortana, Apples Siri und Google now. Filme wie Terminator sind häufig der Grund für Ängste und Zweifel gegenüber diesen neuen Technologien, da hier gezeigt wird, wie künstliche Intelligenz zum Feind des Menschen wird.  Abbett ist jedoch davon überzeugt, dass diese Ängste überwunden werden müssen, um den Fortschritt vorantreiben und Innovationen schaffen zu können.

Er erzählte uns z.B. von seinem Face-Tracking Programm, welches durch Zucken der Augenbrauen Tweets verschicken kann. Wir sollen also viel experimentieren, denn wir haben heutzutage alle Möglichkeiten und Tools zur Verfügung. Am Beispiel des Films Interstellar zeigte er uns, wie künstliche Intelligenz ein großer Teil unserer Zukunft werden könnte.

 

 

Webseiten modular entwickeln – Jens Grochtdreis

 

Ein sehr spannendes Thema rund um CSS brachte uns Jens Grochtdreis. An einigen Beispielen zeigte er uns, dass jede Website eigentlich aus mehreren verschiedenen, sich aber immer wiederholenden Elementen zusammensetzt. Es sollte also hier wichtig sein, dass jedes Element für sich selber stehen kann und nicht abhängig von einem anderen ist. So sollte man zum Beispiel eine Hauptnavigation aus dem Header entfernen und in den Footer stecken können und sie sollte trotzdem gut aussehen und funktionieren. Jens Grochtdreis selbst verwendet eine eigene Ansammlung von Elementen (Styleguides), die er nur in seine Projekte einfügen muss und gegeben falls die Farbe zu ändern hat. Ein wichtiger Punkt war auch die richtige Verwendung von CSS Klassen. Anhand mehreren Beispielen zeigte er, dass Selektoren oft unnötig lang sind und eigentlich keinen Sinn ergeben.

 

 

Als Abschluss zeigte er uns noch einige Arten, wie man CSS übersichtlicher schreiben kann. Hier war die Rede von Object Oriented CSS, Scalable and Modular Architecture for CSS,  BEM und NCSS. BEM, zum Beispiel, steht für Block, Element, Modifier und gibt bestimmte Namenskonventionen vor:

.person {} /* Block */

.person__hand {} /* Element */

.person—female {} /* Modifier */

.person—female__hand {} /* Modifier with Element */

.person__hand—left {} /* Element with Modifier */

Bei großen Websites kann diese Art natürlich zu sehr langen CSS Selektoren im Markup führen, ist aber dafür im CSS für Entwickler leicht verständlich.

Die Folien zur Präsentation:
https://speakerdeck.com/flocke/modulare-webentwicklung

 

Empathisches Design – Andrea Egger

 

Empathie beschreibt die Fähigkeit und Bereitschaft, Gedanken, Emotionen, Motive und Persönlichkeitsmerkmale einer anderen Person zu erkennen und zu verstehen. Für einen guten Designer ist es daher sehr wichtig, nicht nur an sich selbst zu denken sondern in den User hineinfühlen zu können und das Design dementsprechend an seine Bedürfnisse anzupassen. „Emphatie ist das Fühlen mit Menschen“ – Brené Brown. Es sollten Produkte erstellt werden welche beim benutzen Glücksgefühle erzeugen. Es ist hilfreich, wenn der Designer emphatisch ist und Verhaltensmuster interpretieren und analysieren kann. Laut Andrea sollte jeder Designer eigentlich ein zusätzliches Psychologiestudium absolvieren um bessere Designs kreieren zu können. Zudem sollte ein großes Ziel eines Designers sein, Bedürfnisse zu erzeugen, wo noch keine sind. Als Beispiel hierfür nannte Sie das Apple iPad. Auch wenden einige Unternehmen bereits diese Form des Designs an. Mister Spex erlaubt es zum Beispiel das der Benutzer von zu Hause aus Brillen anprobieren kann. Auch L’oreal hat eine ähnliche Art für Makeup Produkte.

Die Folien zur Präsentation:
http://de.slideshare.net/_Liechtenecker_/empathisches-design-54169642

 

Responsive by Design! Successful by Chance? – Thomas Piribauer, Björn Ganslandt

 

 

Heutzutage muss eine Website responsive sein um an alle User ausgeliefert werden zu können. Viele der heute verfügbaren Seiten sehen aber gleich aus und basieren zum großen Teil auf Frameworks wie Bootstrap oder Foundation. Aus diesem Grund sehen die Beiden die große Problematik darin, etwas anderes und originelleres umzusetzen, denn die Abänderungen des Frameworks bringt oft einen enormen Aufwand mit sich. Besser ist es daher, für eigene Projekte von vorne zu beginnen und keine Frameworks zu verwenden.

Ein großes Thema war auch das Planen und Entwickeln. Die beiden empfinden das Erstellen von Mockups auf Papier und anschließendes Prototyping im Code als sinnvoller und schneller. Über die Entwicklertools im Browser ist es dadurch rasch möglich, Styles zu ändern und somit gleich die Änderungen zu sehen. Mobile First Entwicklung ist heutzutage Standard, jedoch wird die Planung immer noch Desktop First durchgeführt da viele Kunden und Designer in großen Screens denken. Dies führt dann oft wieder zu endlos langen Websites die sich auf UX und Performance negativ auswirken. Laut Thomas und Björn sollte das Ganze „Gleichzeitig First“ heißen, denn sowohl Desktop als auch Mobile sind wichtig. Wie bereits im ersten Vortrag besprochen, sind auch sie der Meinung, dass Content das Wichtigste auf einer Website ist. Alles andere kann danach hinzugeladen werden.

Zuletzt haben sie noch ein Thema mit viel Potenzial angesprochen, nämlich „Offline First“. Oft hat man zum Beispiel im Zug keine Internetverbindung und kann dadurch nicht arbeiten. Mit einem Beispiel von Wunderlist und dem Offline Dinosaurier Jump-and-Run Game von Google Chrome haben sie gezeigt, wie es eigentlich funktionieren sollte. Bei Wunderlist werden Dinge, welche Offline passiert sind automatisch abgespeichert, sobald man wieder Internetverbindung hat.

 

Fazit

 

Um 17 Uhr neigte sich auch dieser lange Tag langsam dem Ende zu. Wir haben viele interessante Präsentation gehört und viele neue und zukunftsweisende Dinge erfahren. Jetzt geht es ran die Dinge auch in die Praxis umzusetzen. Mit einem Bier verabschiedeten wir uns von dieser Konferenz und freuen uns auf das nächste Jahr.