Beiträge

Einblicke in die nachhaltige UX Gestaltung

UX Night Vienna on November 26, 2018 at Impact Hub Vienna. © Christian Lendl

Zum dritten Mal fand am 26. November die UX Night Vienna statt. Entsprechend dem Motto „UX for a change“ gab es 3 Talks zum Thema „Nachhaltigkeit“:

 

Eveline Pupeter at UX Night Vienna on November 26, 2018 at Impact Hub Vienna. © Christian Lendl

Eveline Pupeter, CEO von Emporia, lieferte Einblicke in die Entwicklung von seniorenfreundlichen Handys. Das oberösterreichische Unternehmen Emporia hat es sich zur Aufgabe gemacht die Generation 50+ bei der Digitalisierung zu unterstützen. Es bietet neben seniorenfreundlichen Smartphones auch Smartphone-Schulungen an. Spannend war festzustellen, dass sie:

  • Ihre Kundensegmente nach Grad der Digitalisierung und nicht nach Alter einteilen.
  • Hilfsmittel einsetzen um ihren – durchwegs jungen – Entwicklern die Bedürfnisse der älteren Generationen näher zu bringen. Im Einsatz sind:
    • Spezielle Handschuhe, welche eine eingeschränkte Feinmotorik simulieren und
    • der Alterssimulationsanzug GERT.

Peter Knoblauch at UX Night Vienna on November 26, 2018 at Impact Hub Vienna. © Christian Lendl

Peter Knoblauch, Senior Lektor am Institut für Design der Angewandten, sprach über die Gebrauchstauglichkeit von Alltagsprodukten. Er erklärte anhand welcher Kriterien die

Lebensdauer von Alltagsprodukten gemessen werden kann. Meine take aways:

  • Es gibt ein Nachhaltigkeitssiegel für langlebige, reparaturfreundliche Produkte (ON Regel 192102).
  • Er untersuchte die Langlebigkeit von Waschmaschinen. Die User Interfaces verschiedener Waschmaschinen wurden hinsichtlich ihrer Gebrauchstauglichkeit verglichen. Selbst hochwertige Markenprodukte versagen bei der Usability des Interfaces.

UX Night Vienna on November 26, 2018 at Impact Hub Vienna. © Christian Lendl

Den Abschluss machte ein Beitrag über Participatory Design. Christopher Frauenberger (TU Wien) präsentierte eine Designstudie. In dieser hatten Forscher mit Kindern mit Autismus am Design von neuen Technologien zusammengearbeitet. Learnings:

  • Participatory Design ist nicht User Centered Design.
  • Beim Participatory Design ist der User ein Teil vom Team. Er produziert Inhalte und entscheidet mit.

Der Abend war unterhaltsam und regte zum Nachdenken an. Er war allerdings weniger praxisrelevant für User Experience Designer als derjenige im Vorjahr. Es bleibt noch zu sagen: Das kostenfreie Event war wieder bestens organisiert. Ein besonderer Dank dafür gebührt dem UX Vienna-Meetup Team – inklusive unserer Claudia ;). Ich danke Euch!

Responsive Webdesign – More than fitting stuff on screen

Im Oktober besuchte ich den Responsive Webdesign Workshop von Vitaly Friedman von Smashing Magazine.

Einer der wichtigsten Punkte die ich aus dem Workshop mitgenommen habe, war die Notwendigkeit der ganzheitlichen Betrachtung von responsive Webdesign. Um es mit einem Zitat zu sagen:

„Responsive Webdesign is more than fitting stuff on screens.“

Wenn eine neue Funktionalität geplant ist sollte diese zunächst hinsichtlich Auswirkungen zur Geschwindigkeit (Speed), dann hinsichtlich Zugänglichkeit (Access) und Skalierung (Scale), und schlussendlich hinsichtlich Gestaltung (Style) betrachtet werden.

Faktoren von Responsive Web Design

 

Geschwindigkeit

Um die Ladezeiten der Website auch für die Nutzung auf mobilen Geräten zu optimieren sollte ein „Performance Budget“ festgelegt werden und für jedes Feature überlegt werden, ob durch die neue Funktionalität das Budget noch eingehalten wird. Interessant zu betrachten sind hierbei Optimierungen zum Laden von Webfonts, Einsatz von Service Workers und Bildkompression.

Als Benchmark kann hier auch der SpeedIndex von WebpageTest herangezogen werden. Paul Irish, Google Chrome Developer Advocate, hat einen Zielwert von unter 1000 ausgegeben der schwer zu erreichen ist, aber z.B. von Seiten wie derstandard.at erreicht wird.

 

Accessbility

Friedman betonte die Wichtigkeit der Verwendung von nativen HTML Komponenten, da viele assistive Technologien darauf aufbauen. Viele Libraries unterstützen Accessibility nicht in dem Ausmaß wie notwendig, aber es gibt viele frei verfügbare Alternativen, z.B. der DatePicker von AirBnB oder der HTML5 Video Player von PayPal.

 

Skalierung

Der nächste Schritt nach Media Queries und Breakpoints ist das Fluid Scaling bzw. Fluid Typography. Mehr dazu ist im Artikel „Responsive And Fluid Typography With vh And vw Units“ im Smashing Magazine nachzulesen.

 

Style

Wichtige Tools um ein responsives Layout zu erstellen sind Flexbox und CSS Grid. Während Flexbox vor allem für eindimensionale Probleme (horizontales oder vertikales Stacking) eine gute Lösung ist, ermöglicht das CCS Grid eine flexible Positionierung von Elementen im zweidimensionalen Raum. Zu Verstehen wie die zwei Layout-Techniken funktionieren ist nicht ganz einfach – eventuell hilft dabei die spielerische Herangehensweise von Flexbox Froggy oder CSS Grid.


Brauchen Sie in Ihrem Projekt Unterstützung bei der Lösung von Aufgaben im Bereich der User Experience oder Responsive Website Design?

 

UX Night Vienna: Wie Runtastic, mySugr und BeeOne UX-Herausforderungen meistern

Nach der erfolgreichen Interaction16 redux Veranstaltung vergangenes Jahr organisierte ich als Teil des Teams vom Interaction Design Stammtisch dieses Jahr die UX Night Vienna 2017. Unter dem Motto „Am Beifahrersitz österreichischer Organisationen“ ging es dieses Jahr darum Einblick in österreichische Unternehmen und deren In-House UX-Abteilungen zu erhalten. Wie also kommt es zu der guten User Experience die viele Produkte erfolgreich macht?

Wir kontaktierten daher bekannte österreichische Firmen und konnten für diesen Abend Lesya von Runtastic, Matthias von mySugr sowie Konstantin und Stefanie von BeeOne (George) für diesen Abend gewinnen. In interessanten Vorträgen gab es sehr offene und konkrete Einblicke in deren Arbeitsweisen und Herausforderungen der verschiedenen Teams.

Lesya Präsentation

Lesya von Runtastic über Design Sprints

Vor allem der Trend zur Abkehr von eigenen Designteams hin zu interdisziplinären Teams in denen UX Design gemeinsam mit dem Entwicklungsteam zusammenarbeitet hat sich bei Runtastic und mySugr gezeigt. Runtastics Einsatz von Design Sprints vor allem für Neuentwicklungen und komplexe Funktionalitäten war sehr aufschlussreich. Matthias von mySugr wies darauf hin wie hilfreich es sein kann UX Designs physisch sichtbar zu machen.

Konstantin und Stefanie von BeeOne haben einen Einblick gegeben wie sie neue Features entwickeln und welche Herausforderungen es gibt. Vor allem interessant war es vor dem Hintergrund, dass ein bestehendes System abgelöst wird, dass von vielen Benutzern verwendet wird und deren Benutzer teilweise sehr unterschiedliche Bedürfnisse haben – vom Einsteiger-Bankkunden mit wenigen Produkten bis hin zum Power-User.

 

Dank der Unterstützung von IBM Österreich/exc.io und TechTalk konnten dieses Jahr 80 Teilnehmer diese interessanten Vorträge verfolgen.

Teilnehmer bei Get-Together

Get-Together in gemütlicher Runde

Der große Andrang im Vorfeld und die positiven Rückmeldungen der Besucher zeigen uns, dass ein solches Format auf sehr großes Interesse stößt. Wir freuen uns schon auf eine Fortsetzung.

Weitere Eindrücke von der Veranstaltung gibt es auf Twitter. Die Fotos in diesem Beitrag sind von Wieland Kloimstein, weitere gibt es in einem Album auf Flickr zu sehen.

Berlin calling: TechTalk @ UXcamp Europe 2017 (TechTalk Storys Videoblog)

Das Pfingstwochenende verbrachten Claudia und ich in Berlin auf einem der größten UX Events Europas mit über 500 UX Fachleuten. Noch nie war es mir so klar wie hier: es gibt wirklich viele Menschen die denselben Beruf und dieselbe Berufung wie wir haben. You are not alone ;). Die kostenlose Teilnahme, kombiniert mit der seit 9 Jahren anhaltend hohen Qualität der Sessions macht die Veranstaltung in UX-Kreisen derart populär, dass die Tickets innerhalb von 30 Sekunden vergriffen waren. Wer also bzgl. der Teilnahme auf Nummer sichergehen will, der macht es wie wir und beflügelt die Veranstaltung als freiwillige HelferIn.

Das Schöne an der Veranstaltung ist ihre Ungezwungenheit: die Planung übernehmen Berliner UX Enthusiasten und die Teilnehmenden werden zu den Veranstaltern gemacht indem jeder einen Beitrag leisten darf um zu ihrem Gelingen beizutragen. Wer glaubt sich im Vorhinein einen Plan zurecht legen zu können um die besten Sessions zu besuchen, wird eines Besseren belehrt.

Das Session Planung beginnt erst nach der Eröffnung, mit einer sehr kurzen Vorstellung jedes Redners zu seinem Thema. Jeder Redner bekommt ein Kärtchen und je nach Zuspruch im Publikum werden diesem ein größenmäßig passender Raum für die Session zugewiesen und so entsteht täglich ein Session Board.

Das Session Board am UX Camp Berlin

Das Session Board am UX Camp Berlin

Themen:

Doch im Sinne von UX-Guru Jakob Nielsen „Web text should be short“ ende ich hier mit meinen Schwärmereien für die Veranstaltung. Claudia hat vor Ort Vortragende zu Ihren Beweggründen für die Teilnahme befragt. Schaut Euch unser kurzes Video (2:12 Minuten) dazu an um Euch:

  • selbst einen Eindruck von der Atmosphäre vor Ort zu verschaffen,
  • zu erfahren, was der Mehrwert eines UX Designers für jedes Projekt ist und
  • welche die größten Herausforderungen im UX-Bereich sind.

Weiterführende Infos:

UI Design Patterns –Lösungen für Usability-Probleme einfach finden

Vergangenen Freitag habe ich in unserem regelmäßig stattfindenden UX Lunch (TechTalk internes Event) meinen Kollegen verschiedene UI Design Pattern Libraries und deren Einsatzmöglichkeiten vorgestellt.

Die Idee von UI Design Patterns ist es Lösungen für häufig auftretende Usability Probleme zu sammeln und dabei Best Practices zu beschreiben. Dabei werden sowohl die Einsatzmöglichkeiten als auch die Vor- und Nachteile der jeweiligen Lösung dargestellt.

Beispielpattern „Illustrated Choices“

Die Patterns sind dabei möglichst konkret beschrieben, aber meist auch auf verschiedene Systeme anwendbar. Ein Beispiel für ein solches Pattern ist z.B. „Illustrated Choices“. Dieses Pattern beschreibt, dass die Optionen für den Benutzer auch visualisiert werden sollen um die verschiedenen Optionen zu erklären. Ein Beispiel dafür sind ist die Animationsauswahl im PowerPoint. Jede Animation ist dabei zur Erklärung auch mit einem Symbol visualisiert um die Funktionsweise besser darzustellen.

Screenshot: Animationsauswahl in PowerPoint

Screenshot: Animationsauswahl in PowerPoint

Dieses Pattern ist beispielsweise in der Pattern Library zum Buch „Desiging Interfaces“ von Jenifer Tidwell.

Es gibt im Internet sehr viele verschiedene Pattern Libraries, um eine Lösung zu finden ist es gut einige davon zu kennen. Nachfolgend eine Auswahl der aus meiner Sicht wichtigsten Links:

  • UI Patterns: Sammlung von fast 90 User Interface Patterns und 55 Persuasive Design Patterns
  • Yahoo Design Patterns: eine bereits lang bestehende Pattern Library mit 59 Patterns.
  • Designing Interfaces Patterns: basierend auf dem Buch “Designing Interfaces” von Jenifer Tidwell sind hier viele Patterns auch online abrufbar
  • Welie.com: Diese Seite enthält ungefähr 100 verschiedene Patterns. Die Seite existiert bereits seit 2008, aber die Patterns sind noch immer gültig.

Neben diesen Pattern Libraries die sich mit allgemeinen Themen vor allem für Webanwendungen beschäftigen gibt es auch noch Pattern Libraries für spezifische Anwendungen und Plattformen:

Für weitere Inspiration möchte ich noch auf eine Liste von Pattern Libraries verweisen, die von Yahoo zusammengestellt wurde. Viel Spaß damit!