eparo – Digital Service Design

Das Blog von eparo.de

16. Juli, 2015

AXChange Hamburg bei eparo – erstes Axure-Meetup Deutschlands

AXChange Hamburg

Am 10. Juni haben wir bei eparo das erste Axure-Meetup “AXChange Hamburg” Deutschlands organisiert. Mit Unterstützung von Axure aus Kalifornien. Das Ziel: Interessierte und Axure-Fu-Master treffen sich jeden zweiten Mittwoch eines Monats zum lockeren Austausch über das Prototyping mit Axure. Schwerpunktthema des ersten Treffens: „Design-robuste Prototypen und die Auslagerung von Interaktionen in Funktionen“. Christian berichtet.

Die Sache mit der Nachfrage und dem Angebot

„Warum gibt es eigentlich noch kein Treffen von Axure-Interessierten und Fu-Mastern?“ Diese Frage haben wir uns in den vergangenen Jahren oft gestellt. Auch immer mehr Teilnehmer unserer Axure-Kurse (https://eparo.de/training.html) schickten ihre Fragen an eparo. Der Bedarf, sich auszutauschen, wurde offenbar immer größer. Im Mai gründeten wir die Meetup-Gruppe und bis zum ersten Meetup hatten sich mehr als 40 Axuristas angemeldet.

Für das Axure Meetup haben wir uns eine gute Mischung aus allem gewünscht: Austausch, „Lernen von …“ und Hilfestellungen bei konkreten Problemen. Außerdem wollten wir (oder auch andere Teilnehmer) ein Schwerpunktthema vorbereiten. So entstand das AXChange Hamburg Meetup, das jeden zweiten Mittwoch eines Monats stattfindet.
Die Meetup-Gruppe ist hier zu finden: http://www.meetup.com/de/AXChange-Hamburg/

AXChange-Format: das Beste aus Barcamps, Open Spaces und Roundtables

Unser Ziel: am Ende des Tages sollen alle mit dem Gedanken „das hat sich (wieder mal) gelohnt!“ nach Hause gehen. Dafür haben wir das Beste aus Barcamps, Open Spaces und Roundtables in eine Struktur gebracht:

  1. Um 18 Uhr stehen die Türen offen für alle, die sich austauschen möchten oder konkrete Fragen haben.
  2. Um 19 Uhr geht’s dann los: während einer kurzen Vorstellungsrunde schreibt jeder ein oder mehrere Axure-Themen auf, die ihn interessieren. Dann geht’s mit einem Talk im Stile einer Live- Demo weiter.
  3. Nach dem 30-minütigen Talk werden dann die Axure-Themen sortiert und auf die jeweiligen Tischinseln zum Diskutieren und Austauschen verteilt. Wer möchte, kann sich an die jeweilige Insel setzen, die ihn interessiert.

Aller Anfang ist schwer

AXChange TeilnehmerVor dem ersten AXChange lag auch eine gewisse Unsicherheit in der Luft: Passt das Schwerpunktthema? Wie viele werden wohl kommen? Werden wir unser selbstgestecktes Qualitäts-Ziel erreichen?

Total unbegründet: trotz des ersten heißen Sommertages im Jahr waren 18 von angemeldeten 29 Personen da. Die No-Show Rate war zwar ungewöhnlich hoch; dafür war das Feedback nach dem ersten Meetup super und unglaublich motivierend!

Ob über CSS und JavaScript-Integration in Axure, Kompatibilität mit anderen Programmen oder der Austausch über andere Programme und Workflows – alles kam auf den Tisch und wurde mit viel Elan von den Teilnehmern in kleinere Gruppen diskutiert.

Der Beginn einer Reihe…

Inzwischen fand bereits das zweite AXChange Hamburg Meetup statt. In einer kleinen gemütlichen Runde haben wir AxShare und Axure 8 als Schwerpunktthemen durchgesprochen. Wir haben diverse andere Axure-Themen auf den Tischen ausgebreitet und uns recht lange über Team-Projects oder auch über das Bauen von App-Prototypen ausgetauscht.

Am 12. August findet dann schon das dritte AXChange Hamburg Meetup bei uns statt. Wir freuen uns auf neue und alte Gesichter und Themenvorschläge! 
Zum Meetup: http://www.meetup.com/de/AXChange-Hamburg/events/223806735/

AXChange goes Berlin!

Gleich nach dem ersten Meetup haben wir dann AXChange Berlin gegründet, um die Axure Meetups auch nach Berlin zu bringen. Wir konnten Zalando einen guten Location-Sponsor finden (Dank dafür an Jay Kaufmann). Für alle Berliner Axuristas: am 21. Juli findet das AXChange bei Zalando in Berlin statt. Das Schwerpunktthema ist “Design-robuste Prototypen und das Auslagern von Interaktionen in Funktionen“. Das kam bereits beim ersten Hamburger Meetup gut an und ist extrem wichtig, denn Design-robuste Prototypen lassen sich ziemlich schnell auch während Nutzertests ändern.

Zum Meetup in Berlin: http://www.meetup.com/de/AXChange-Berlin-Axure-Meetup/

 
2. Juli, 2015

Workshop: Storyboards für Service Design und Product Discovery

Mit Bildern Ideen visualisieren und Produkte entwickeln

Am 7. Juli findet ein neuer Workshop bei eparo statt: Storyboards für Service Design und Product Discovery (bereits ausgebucht, neuer Workshop am 15. September). Illustratorin Melina Pink vermittelt den Teilnehmern, wie man mit einfachen Zeichnungen (Produkt-)Ideen auf den Punkt bringt. Diese Methode wird in der Animation, beim Film und in der Werbung seit Langem genutzt. Melina erzählt, warum sie auch für die Produktentwicklung so vielversprechend ist.

Was ist ein Storyboard?

Das Storyboard ist ein einfaches Werkzeug, um eine Idee oder ein Konzept zu visualisieren. Es ist eine lineare Erzählung, bei der die einzelnen Bilder eine Geschichte erzählen.

Warum alle zögern, obwohl es jeder kann!

Interessant ist: Jeder stolpert erst einmal über diverse Hemmschwellen. „Ich kann nicht zeichnen“ ist sicher die größte. Dabei werden überhaupt keine Erfahrungen vorausgesetzt. Es spielt keine Rolle, ob jemand zeichnen kann oder nicht! Ein weiterer Punkt ist, dass kaum jemand die einfachen Werkzeuge und Hilfsmittel sowie die Struktur eines Storyboards kennt. Viele haben Sorge, dass sie nicht und wissen, wo sie anfangen sollen. Der Workshop setzt genau bei diesen Hürden an. Und die verschwinden erfahrungsgemäß schnell.

Jeder hat Erfolgserlebnisse – und seinen eigenen Stil!

Bereits auf dem WUD 2014 habe ich für eparo einen Scribble-Workshop angeboten. Bei einer Übung wurde jeder Teilnehmer gebeten, ein einzelnes Comic-Bild zu einem bestimmten Gefühlsbegriff zu zeichnen. Ein kleiner Character sollte das jeweilige Gefühl bildlich darstellen. Dabei sollten die Teilnehmer alle zuvor gelernten Elemente (Gesichtsausdruck, Körpersprache, Sprachblasen, Dialog, Bewegungslinien, Icons, Symbole, Objekte etc.) anwenden.

Hier ist ein schönes Beispiel:

Beispiel eines Storyboards vom WUD 2014

Beispiel eines Storyboards vom WUD 2014

Melina: „Was interessant war: JEDER, egal wie gut er zeichnen konnte, hatte bereits seinen eigenen Stil, den man erkennen konnte! Das fand ich ehrlich gesagt total spannend.“

Warum Bilder alles erleichtern – und wir Kosten und Zeit sparen

Wir können Ideen und Visionen auf einfache Weise erklären und sie mit Anderen teilen. Storyboarding vereinfacht die Entwicklung einer Idee und spart Kosten. Konzepte und Ideen können schnell auf Papier skizziert werden, das spart eine Menge Zeit. Außerdem bringt es mehr Spaß, als ein langes Textdokument zu lesen. Die Leser verstehen schnell, worum es geht.

Wie ein Storyboard bei der Produktentwicklung hilft:

Beispiel Family-App

Ein Storyboard kann z.B. zeigen, wie ein Produkt funktioniert oder auch die Interaktion eines Nutzers mit dem Produkt verdeutlichen.

Frames / Rough Sketches stellen die Reihe der Erlebnisse dar, die ein User erfährt, bevor oder während er ein Produkt benutzt.

Hier ein kleines praktisches Beispiel: eine neue Family App.

Problem: Man weiß nicht, wo genau sich die Familien-Mitglieder aufhalten.

  1. Bild: Mann zeigt Frau eine neue App auf seinem Telefon
  2. Bild: Er erklärt, was die App kann
  3. Bild: Suchergebnisse werden angezeigt
Storyboard für die Familiy-App

Storyboard für die Familiy-App

Unser Fazit

Wir wundern uns, dass die Storyboards nicht längst zum Standardrepertoire gehören in der Produktentwicklung. Uns helfen sie in vielen Projekten, sparen Zeit und Geld und vereinfachen die Kommunikation.

Das wollen wir auch dem Rest der Welt ermöglichen.

 
25. Mai, 2015

AxShare als App – sie ist online!

AxShare App Banner

Wir haben bis Hamburg die Nudelsuppenschüsseln klappern hören (Axure Insider-Witze…) und dann kamen auch schon die Mails von Axure, dass die AxShare App jetzt in den App- Stores von Apple und Google zu finden ist! Hier kommt nun unser kleines Update unserer in der Beta-Phase entstandenen Meinung.

Die App ist nach wie vor eine echte Hilfe und eine super Lösung, um den Prototypen auch einem Kunden in einem Café oder während eines Pitches zu zeigen. In Zukunft wird die App es uns ermöglichen, noch komplexere und vollständigere Prototypen zu bauen, um noch besser die endgültige App oder mobile Webseite für den UX-Test zu simulieren – und um damit auch noch glaubwürdigere und interessantere Reaktionen zu bekommen.

Sitemap in der AxShare App

Aktuell werden wir allerdings keinen Test mit der App durchführen: Am 6. Mai hatten wir ein sehr detailliertes Telefonat mit Rachel (der Produktmanagerin der AxShare App) und ihr die Punkte mitgeteilt, die wir noch nicht so prickelnd fanden. Vor allen die Sitemap ist uns ein Dorn im Auge: diese ruft man auf, indem man vom linken Bildschirmrand aus in die Mitte wischt. Das ist ein Problem für unsere UX-Tests von App-Prototypen. So ein Rechts-Swipe wird ja oft für echte Interaktionen genutzt und da ist es extrem störend, wenn dann immer die Sitemap von AxShare geöffnet wird. Rachel hat uns versprochen, dieses und weitere Probleme bald zu lösen – und wir werden am Ball bleiben!

 
18. April, 2015

AxShare als App – Erste Eindrücke aus dem Beta-Test

AxShare als App

Seit gestern gibt es von Axure eine App für AxShare. Wir hatten die App im Beta-Test.

Was kann die AxShare-App?

  • Über die App kann man schnell und komfortabel den zu testenden Axure Prototypen öffnen. Das lästige Eingeben der AxShare-URL entfällt.
  • Prototypen können lokal auf dem Device gespeichert werden.
  • Die lokal abgespeicherten Prototypen sind auch offline auf dem Gerät verfügbar und sorgen dafür, dass die Performance des Prototypen auf dem Gerät nicht aufgrund einer langsamen Internetverbindung leidet.
  • Die Statusleiste des Smartphones kann ausgeblendet werden.
  • Die App ist für iOS und Android verfügbar.

Gute Nachrichten für das mobile Prototyping mit Axure

Irgendwie war das Testen von App-Prototypen auf Smartphones und Tablets bislang nicht sonderlich komfortabel. Besonders für iOS-Devices ging das meist über remote in AxShare generierte Prototypen. Das war bei größeren Prototypen langsam und nicht sehr performant. Besonders bei User-Tests hat das bei den Probanden immer einen negativen Eindruck der zu testenden App ausgelöst. Die Probanden waren schnell genervt und haben weniger Sachen ausprobiert.

Ach ja, das Finden des richtigen Prototypen über die kryptische AxShare-ID hat auch genervt. Oft haben wir uns in der Vergangenheit uns die AxShare-ID diktiert, um den Prototypen auf dem Smartphone oder Tablet zu öffnen.

Über die lokal in der AxShare-App gespeicherten Axure-Prototypen wird das jetzt deutlich besser. Die Prototypen stehen sauber aufgelistet in der App. Die lokal gespeicherten Daten verkürzen die Ladezeiten der Prototypen und machen eine Internetverbindung überflüssig.

Zusätzlich kann die Statusleiste vom Smartphone ausgeblendet werden, was sicherlich bei einigen Prototypen wichtig ist, aber aus guten Gründen von Apple nicht empfohlen wird (Apple Developer Guidelines).

Unser Fazit

AxShare TesteinladungWäre schön gewesen, wenn die App einen Monat eher fertig geworden wäre. Dann hätten wir die letzten 6 App-Projekte, die wir mit Axure entwickelt haben, schon damit testen können.

Noch ist die App in der Entwicklung. Wir sind dennoch schon jetzt begeistert, denn die App sorgt für störungsfreiere UX-Tests und besseres Nutzer-Feedbacks.

Sobald wir mehr wissen, werden wir wieder berichten.

 
11. März, 2015

Kongress Raum Schiff Erde RSE15 im Nochtspeicher HH

Realität ignorieren ?! – 2030 ist virtuell!

RSE15 Panorama

Rückblick von Malte Lücken und Christian Reichel

Der Raum Schiff Erde Kongress RSE15 ist ein eintägiger Kongress mit knapp 100 Teilnehmern und damit (zumindest begrifflich) so etwas, wie eine vierteilige Trilogie an einem Tag. Daher ist das diesjährige Motto „Don’t Panic“ als Hommage an Douglas Adams und „The Hitchhikers Guide to the Galaxy“ mehr als passend. Eparo ist wie immer Sponsor. Malte und Christian waren dabei.

Keine Panik!

Auch wenn wir uns in 15 Jahren fast ausschließlich in einer virtuellen Welt bewegen, wenn Drogen auf USB-Sticks speicherbar sind und wir vielleicht nicht einmal mehr merken, wann wir mit Computern interagieren – es gibt keinen Grund zur Beunruhigung.

Die Einzigen, die kurzzeitige Panikattacken hatten, waren die Vortragenden, die es mit einem Beamer-Kabel mit Wackelkontakt zu tun bekamen.

Große Rolle für digitale Services

Unser Fazit nach sieben Stunden: digitale Services werden in Zukunft eine noch stärkere Rolle spielen, als sie es heute bereits tun. Sollte sich Moore’s Law bewahrheiten, dann werden wir in 15 Jahren 1000 Mal bessere Computer und Displays haben – so Prof. Dr. Frank Steinicke, Professor an der Universität Hamburg. Zu den Folien.

“Realität” ignorieren. Neue Ideen in Prototypen umsetzen.

Außerhalb der immersiven, virtuellen Welten ist und bleibt die direkte Interaktion mit digitalen Services ebenso wichtig. Da es allerdings Vielen schwer fällt, neue Interaktionsmöglichkeiten zu entwickeln, nannte Prof. Stefan Wölwer drei Methoden, den Gedankenblocker namens „Realität“ zu ignorieren: Design Fiction, Speculative Design und Wirklichkeitsschaffung durch Interaktion. Zu den Folien.

Alle drei Methoden haben allerdings eines gemeinsam: sie erschaffen Prototypen, die getestet werden und der Visualisierung eigener Idee dienen können.

Natürlich war das nicht alles, was auf dem RSE15 lief. Einige interessante Gedankengänge und Inspirationen haben wir mitgenommen. Die Band Lunartree bildete mit leicht melancholischer, ruhiger, akustischer Musik den krönenden Abschluss.

 
2. März, 2015

Good-Bye SIE: Warum wir dich duzen…

Bei eparo wird geduzt

Die meisten haben sich längst daran gewöhnt. Den anderen möchten wir es ans Herz legen: Das DU. Wir finden, wer zusammen arbeitet, der kann sich auch duzen. Das Reden auf Augenhöhe macht vieles einfacher und schafft die persönliche Atmosphäre, die uns immer wichtiger wird. Wem das zu distanzlos ist, der möge es bitte einfach sagen. Wir respektieren es und werden uns sofort darauf einstellen! Allerdings bleiben wir bei allgemeinen Texten – wie unserem Blog oder auch im Newsletter – beim DU.

 
11. Februar, 2015

Service Design Drinks HH: Frank Mohren erzählt über Service-Exzellenz

Logo Service Design HamburgAm 10. Februar waren wir Gastgeber der ersten Service Design Drinks in 2015.

Insgesamt haben 30 Teilnehmer den Weg in die Stahltwiete gefunden. Und das, obwohl wir den Wein (von unseren Nachbarn, dem Weingroßhändler www.copito.de) und die Laugenstangen als Abendessen überhaupt nicht angekündigt hatten.

Das Thema diesmal „Exzellenter Service als Wettbewerbsvorteil“. Frank Mohren hat aus dem Nähkästchen seiner Erfahrung als Interim Manager mit der Serviceverbesserung bei der Telekom und der Deutschen Bahn geplaudert.

Vortrag Frank Mohren

Mein persönliches Fazit aus Franks Vortrag:

Guter Service ist ein massiver Wettbewerbsvorteil. Leider ist der Weg dorthin lang und anstrengend und kann nur klappen, wenn das Management voll dahinter steht. Ach ja, die Unternehmenskultur muss sich auch ändern…

Hier sind ein paar von Franks Erfahrungen:

 „Wer in einem großen Unternehmen die Qualität des Kundenservice verbessern will, braucht einen langen Atem und wird sich viele Beulen holen. Aber es zahlt sich am Ende aus.“

Diese Aussage hat mich überhaupt nicht gewundert. Eher eigentlich die Überzeugung von Frank, dass man auch in Unternehmen wie der Telekom oder der Deutschen Bahn überhaupt den Service verbessern kann.

„Eine exzellente Service-Kultur lässt sich nur erfolgreich etablieren, wenn man entweder selber in der Hierarchie oben steht oder die klare Unterstützung durch die Geschäftsführung oder den Vorstand hat.“

Frank Mohren fängt anOhne echtes Überzeugung und Unterstützung durch das obere Management ist eine solche Veränderung der „Geisteshaltung“ nicht in den unteren Hierarchieebenen durchzusetzen. Würde ich genau so unterschreiben. Das gilt übrigens genauso für die Einführung von agilen Methoden oder einer kundenfokussierten Entwicklung digitaler Produkte und Services.

„Das Geheimnis für guten Service heisst Leidenschaft und Engagement.“

Franks Überzeugung: Es kommt auf jeden Mitarbeiter an. Nur mit eigenmotivierter Handlungsbereitschaft und Liebe zum Job entsteht wirklich guter Service. Dazu braucht es Engagement und Leidenschaft. Die kann man mit viel Engagement aufbauen und man muss auf jeden Fall bei Einstellungsgesprächen darauf massiv achten.

„Bei Startups ist immer sehr viel Engagement und Leidenschaft. Aber oft nur für das Produkt und nicht den Service drumherum.“

Noch eine kluger Rat von Frank in Richtung Startups: Passt auf, dass ihr euch nicht nur auf euer Produkt konzentriert. Der Service rund um die Bits und Bytes spielt für eure Kunden oft die viel entscheidendere Rolle.

 „Man muss Dinge einfach ausprobieren, auch wenn mal selbst nicht daran glaubt.“

Auch bei der Weiterentwicklung von Service-Ideen zählt nur das Ausprobieren. Bloß nicht lange diskutieren, wo meist ja die Hierarchie entscheidet, sondern lieber schnell als Experiment ausprobieren. So ist die Deutsche Bahn zu Ausgabe von Wartenummern in den Kundenzentren gekommen. Sehr schöne Geschichte.

Ich könnte noch mehr Punkte aufführen, aber das sprengt den Rahmen. Ich werde mal versuchen, ein Interview mit Frank zu führen und noch mehr von seinem Wissen zu profitieren.

Das Formblatt für den praktischen TeilNach Franks Vortrag gab es dann natürlich wieder eine praktische Methodenübung. Diesmal ging es darum, die Zufriedenheit beim Taxifahren in Kleingruppen zu diskutieren und dann für die kritischste Komponente Lösungsansätze zu skizzieren.

Das Formblatt im PraxistestHierzu gab es eine extra vorbereitetes Arbeitsblatt, was aber im Ergebnis noch nicht optimal funktioniert hat. Aber die Lösungsansätze waren interessant: Von der Frühstücksbestellung beim Fahrer über den „ethischen Uber-Clone“ bis zur Direktübermittlung des Fahrtziels an das Navi des Fahrers war alles dabei.

Insgesamt wieder ein schöner und für mich lehrreicher Abend. Ich freue mich, beim Organisationsteam dabei zu sein und freue mich auf die nächsten Service Design Drinks.

 

 
18. Dezember, 2014

Komponentenbasierte Frontend-Entwicklung

Lego-Bausteine
Konzepter und Benutzer von Axure Libraries wissen: man muss das Rad nicht neu erfinden. Darum gibt es gut-durchdachte UI Pattern Libraries. Aber wie sieht das Ganze in der Entwicklung aus? Wie kann man einzelne Bausteine für die Frontend-Entwicklung erstellen, ohne gleich eine Bibliothek aus Codeschnipseln bauen zu müssen? Ich habe beim vergangenen UX Roundtable im Dezember, 2014 eine mögliche Lösung vorgestellt: Precompiling.

Wenn wir ehrlich sind, dann erfinden wir das Rad bei Webseiten mit jedem Projekt nicht neu, sondern greifen gerne auf altbewährte Oberflächen-Elemente zurück. Das ist auch die Idee von UI Pattern und Axure Libraries. Diese bestehen aus bereits gestalteten oder durchdachten Elementen, die für das jeweilige Projekt nur noch eingefügt und angepasst werden.

Das Problem: starre technische Strukturen und Blockaden

Doch in der Umsetzung sieht das Ganze wieder ein wenig anders aus: die starren Syntax-Strukturen von den Sprachen HTML und CSS lassen keine Aufteilung in Komponenten zu. Das Problem dabei ist, dass für jedes neue Projekt viel aus bestehenden Projekten kopiert oder für das derzeitige Projekt neu geschrieben werden muss. Aber noch viel größer ist der Kommunikationslücke zwischen Konzeptern und Entwicklern: durch die unterschiedliche Struktur ist ebenfalls das Mindset des Projektes unterschiedlich. Das bedeutet, dass im Zweifel mühselige Übersetzungen von der Konzeption zur Entwicklung – meist in Form einer Spezifikation – nötig sind.

Das Problem sind dabei nicht die Entwickler, sondern die Umgebung, in der sie arbeiten: sie müssen ihr Denken an die vorhandene Programmiersprache anpassen – so wie Fließbandarbeiter ihren Arbeitstakt an die Maschine anpassen müssen. Die Lösung ist also, die Programmiersprache zu ändern, um diese Blockade aufzubrechen. Was daraus resultiert, sind Dateien, die mehrere Tausend bis Hunderttausend Zeilen an Code beinhalten. Natürlich bekommen Entwickler durch so viele Zeilen Code auch noch andere Probleme – wie beispielsweise die Übersichtlichkeit vom Code und damit auch die benötigte Zeit für eine Änderung.

Precompiler

Die Lösung: Precompiling

Die Lösung heißt Precompiling und ermöglicht das Benutzen anderer Programmiersprachen oder -syntaxen. So kann beispielsweise die Syntax von CSS so erweitert werden, sodass es möglich ist, die ursprüngliche CSS-Datei in viele kleine Komponenten zu unterteilen. Und das gleiche kann mit HTML auch gemacht werden.

Durch Precompiling werden die einzelnen Komponenten dann wieder in das jeweilige Format zusammen gesetzt, das der Browser für die Darstellung der Webseite benötigt.

Tools

Die Sprachen und Tools

Wir haben also nun die Technik, die starre Strukturen von HTML und CSS aufbrechen kann. Was wir nun benötigen, sind die jeweiligen Spracherweiterungen und der Precompiler selbst.

Für CSS gibt es sowohl die Sprache SASS als auch LESS, die sich nach einigen Jahren Weiterentwicklung bei den Entwicklern etabliert haben. Vor allen für SASS existieren bereits viele andere Bibliotheken, die jeder Entwickler zu schätzen wissen wird.

Die Sprachen SASS und LESS sind sehr mächtig und bieten viele Vorteile. So können Mix ins und Funktionen geschrieben werden, die den Code automatisch erweitern. Wieder eine Zeitersparnis also. Außerdem ermöglichen es beide Sprachen, Variablen für Farben, Schriftgröße usw. festzusetzen. So können Änderungen im Contextual Design über das gesamte Design hinweg schnell und effizient eingepflegt werden. Eine Farbänderung von Blau zu Violett kann so innerhalb weniger Sekunden erfolgen.

Für selbstständige Entwickler ist das besonders praktisch: sie müssen nur noch kleine Anpassungen bei einem neuen Webseiten-Projekt vornehmen, um die Webseite komplett neu zu gestalten.

Für HTML sieht die Welt deutlich anders aus. Es gibt bisher ein mir bekanntes Konzept, welches die Aufteilung von HTML-Dateien in Komponenten erlaubt und anwendbar macht. Dieses Konzept wurde in den so genannten Hammer Tags (http://hammerformac.com/docs/tags) in der zugehörigen Hammer Mac App http://hammerformac.com) umgesetzt.

Idee
Mit Hammer haben wir auch gleichzeitig eine App, die das Precompiling von unseren HTML-Komponenten erlaubt. Eine weitere App für den Mac ist CodeKit oder Koala. Alle drei Apps sind vom Prinzip her ziemlich ähnlich: man zieht den Projektordner in die jeweilige App rein und die App erledigt den Rest – vom Erkennen der zu kompilierenden Dateien bis hin zur Prekompilierung selbst. Die komponentenweise Aufteilung von HTML und CSS erlaubt allerdings bis heute nur Hammer mit den Hammer Tags (der Precompiler ist mittlerweile aber Open Source und könnte in Zukunft auch in anderen Apps benutzt werden: https://github.com/riothq/hammer-gem).

Struktur

Die Struktur

Wie strukturiert man aber nun die einzelnen Komponenten? Klar ist, dass diese Komponenten durchaus zusammen gesteckt werden können. So können eine Navigationsleiste und ein Logo gemeinsam den Kopfbereich einer Webseite bilden. Auf der anderen Seite beinhaltet die Navigationsleiste jeweils die einzelnen Navigationselemente. Fakt ist, dass diese Elemente durch ihre Komposition eine gewisse Hierarchie darstellen. Ein Fußbereich einer Webseite besteht aus mehreren kleineren Unterteilungen, die wiederum aus vielen kleineren Unterteilungen bestehen.

Brad Frost hat 2013 bei der Konferenz „Beyond Tellerrand“ in Düsseldorf eine Struktur vorgestellt, die sich auf den atomaren Aufbau von Organismen orientiert. Die Idee ist, dass größere Strukturen (wie Organismen) kleinere Strukturen (wie Moleküle) beinhalten können. Das „Atomic Design“ ist meiner Meinung nach eine sehr gute Grundlage, denn nicht anders strukturieren wir unsere Axure Libraries, die wir für Kunden bauen. Für die Entwicklung müssen wir diese Struktur allerdings noch etwas kleinteiliger strukturieren, damit wir die Wiederverwendbarkeit der einzelnen Elemente und Codezeilen gewährleisten können. Daher fangen wir mit dem ersten Element der Kette an: dem Proton.

Protonen

Die aus dem altgriechischen übersetzte „Ersten“ Teilchen unserer Struktur sind dafür zuständig, sämtliche notwendigen Bestandteile unseres Projektes – wie die SASS-eigenen Mix ins oder Funktionen – zu deklarieren. Hier steckt sozusagen alles drin, was bei nahezu jedem Element und Projekt benutzt werden kann und sollte. Somit sind hier auch die Variablen zu finden, die durch wenige Änderungen die gesamte Seite neu gestalten könnten.

Atomkern

Der Atomkern beinhaltet die Kernelemente, die ebenfalls in jedem Projekt zu finden sind, also grundsätzliche Gestaltungen von Tabellen, Typografien, Buttons und Formularfeldern. Es ist sozusagen eine Ansammlung vieler kleiner Gestaltungsmuster von User Interface Elementen. Wer hier sorgfältig Best Practices auswählt, braucht sich um solche Gestaltungsmuster keine Gedanken mehr zu machen, sondern kopiert diese nur noch von Projekt zu Projekt.

Atom

Die erste projektbezogene Strukturebene ist das Atom. Hier werden sämtliche Elemente aus dem Atomkern nochmals angepasst und auch neue, spezifischere kleine Elemente (meistens definiert durch CSS-Klassen) gestaltet.

Moleküle

Die Moleküle sind die ersten kleinen Kompositionen, speziell zum vorliegenden Projekt. So kann ein grundsätzliches Navigationselement oder eine Kombination aus einem Formularfeld und Button hier gestaltet werden.

Organismen

Organismen sind ganze Teilbereiche einer Seite, wie beispielsweise der Kopf- oder Fußbereich.

Templates

Die Organismen werden am Ende bei der nächstgrößeren Struktur – den Templates – in der richtigen Reihenfolge eingebunden

Pages

Für spezifische Seiten kann nun in der letzten Strukturebene die Gestaltung angepasst werden. So kann die Hauptseite anders als der Blog aussehen, ohne dabei die grundsätzliche Gestaltung einzelner Elemente allzu sehr zu verfälschen.

Diese gesamte Struktur mündet letztendlich in eine Dummy-SASS oder Dummy-LESS Datei, wodurch eine einzige CSS-Datei entsteht.

Mit dieser Struktur haben wir also eine hierarchische Abbildung einzelner Elemente. Durch die zusätzlichen zwei Strukturebenen Protonen und Atomkern haben wir außerdem bereits zwei Strukturebenen für eine eigene Bibliothek. Diese beiden Ebenen können in jedem Projekt genutzt werden.

Einige Elemente aus den weiteren Strukturen Atom und Moleküle können ebenfalls genutzt werden, allerdings ist die Gestaltung hier immer auf das jeweilige Projekt bezogen.

Fazit

Durch das Precompiling der Erweiterungssprachen wie SASS und Hammer Tags können Frontend-Entwickler eine sehr ähnliche Struktur von Bausteinen aufbauen, wie sie Prototypen-Entwickler mit Axure Libraries oder wie Konzepter mit UI Pattern Libraries aufbauen und nutzen. Missverständnisse können so verringert und verhindert werden, weil jeder im Team von der gleichen Sache spricht. Aber vor allem für die Entwickler bietet Precompiling einen entscheidenden Mehrwert: Änderungen können viel schneller durchgeführt werden, da die Aufteilung in Komponenten einen deutlich besseren Überblick verschafft.

 
1. Dezember, 2014

Der World Usability Day 2014 in Hamburg: Sitzordnung

World Usability Day 2014

Der World Usability Day 2014 am 13.11.2014

Service Design zwischen Nutzerfreundlichkeit und Weltverbesserung

1 – Alle Vorträge zum Download
2 – Der WUD 2014 in Hamburg: Zwei Rückblicke
3 – Revolte und Umsturz: Im Track 1 beginnt die Zukunft
4 – Track 2: Meinungen zu User Experience
5 – Der Einfluss der Sitzordnung auf die Workshopatmosphäre

Wie du sitzt, so arbeitest du – ein zufälliges Experiment bei den WUD-Workshops.

Form Follows Function – auch im Aufbau von Workshop-Settings!

Wer schon einmal Workshops moderiert hat, weiß, dass ein gut durchdachtes Setting die halbe Miete für das erfolgreiche Arbeiten mit Gruppen ist. Nur wenn der Raum und die Sitzanordnung das Workshop-Konzept optimal unterstützen, entsteht wie von Zauberhand eine magische Arbeitsatmosphäre.

Die verschiedenen Workshop-Formate des World Usability Days zeigen deutlich, wie treffend der räumliche Aufbau den inhaltlichen Zielen der Gruppenarbeit folgen kann. Von Diskussionsrunden über Sketching-Workshops bis in den Open Space und die freie Kontemplation konnten in sechs verschiedenen Workshops ganz unterschiedliche Settings und Arbeitsatmosphären aufgefangen werden.

Starre Sitzordnung im Workshop 1

Workshop 1: User Centered Content

Dr. Rolf Schulte Strathaus, eparo GmbH und Mirko Gründer, freier Journalist

Fest im Fußboden verschraubt werden die Tische des Workshop-Raumes in einer statischen U-Form festgehalten. Die klassische Konferenzsaal-Anordnung der Tische scheint die Teilnehmer des User Centered Content Workshops nicht nur zu einer intensiven Diskussion, sondern auch zur Einnahme einer förmlichen Sitzhaltung zu verführen. Das Ergebnis überzeugt als eine facettenreiche Debatte über User Centered Content Design.

Kreatives Arbeiten im Workshop 2

Workshop 2: Realtime Sketching von Personas

Bianca Alt und Susann Maßlau, Ergosign GmbH

Einzelne Tisch-Inseln separieren die Teilnehmer des Persona Sketching Workshops von Anbeginn in vier Einzelgruppen. Das gemeinsame Zeichnen und der enge Austausch mit den Nachbarn schafft an jeder Arbeitsstation fortan eigene Gruppendynamiken. Für einen Außenbetrachter kann die gesamträumliche Atmosphäre dadurch chaotisch wirken, aber gleichsam fruchtbar. Das Setting stellt zumindest die Workshop-Leiterinnen vor unerwartete moderative Herausforderungen…

Weder Stühle noch Tische

Workshop 3: Aufmerksam für das Gewöhnliche

Sven Klomp, Sven Klomp Szenographie

Es finden sich weder Tische noch Stühle oder räumliche Vorgaben im kontemplativen Workshop namens „Aufmerksamkeit für das Gewöhnliche“.

Die meditative und wortlose Bewegung durch den öffentlichen Alltagsraum der Stadt und die Verdichtung der gewonnenen Erlebnisse im Dunkelraum kitzeln die Sinne der Teilnehmer. Die Verarbeitung der lebensweltlichen Eindrücke verlangt keine intensive Verbalisierung. Die Teilnehmer führen vielmehr friedliche, innere Dialoge.

Konzentriertes Arbeiten am großen Tisch

Workshop 4: Storyboards für digitale Services

Melina Pink (Illustratorin) für eparo

Die große Tisch-Tafel sorgt für eine geordnete und konzentrierte Atmosphäre im Workshop-Raum von Melina Pink. Die Teilnehmer sitzen an einer großen Arbeitsfläche vereint und orientieren sich am Geschehen der Gesamtgruppe. Hier erklingt kein stimmliches Durcheinander.

Die Teilnehmer sprechen mit Rücksicht auf die Gruppe nur leise mit dem Nachbarn. Eine Wonne für die engagierte Moderatorin und eine sichtbar erholsame Workshop-Arbeit für jeden Teilnehmer.

Stuhlkreis für den offenen Austausch

Workshop 5: 100% Engagement

Alexander Schilling (raumfuer)

Ein großzügiger Stuhlkreis und viel Platz in der Mitte. Der Arbeitsraum ist offen und fördert einen gestenreichen, ungehemmten Austausch der Teilnehmer in Zweierpaaren. Das rege Treiben wirkt dennoch geometrisch sortiert und in keiner Weise chaotisch.

Selbst das Stimmgewirr erzeugt – von außen belauscht – den harmonischen Klang vieler Dialoge, die nicht in eine gegenseitige Konkurrenz treten, sondern einer achtsam interagierenden Gesamtgruppe entspringen.

Wohnungsbesichtigung im LivingPlace

Workshop 6: Living Place – Wenn die Wohnung intelligent ist

Prof. Kai von Luck (HAW Hamburg)

Hier ging es nicht um Sitzordnungen, sondern es wurde der LivingPlace besichtigt bzw. von Kai von Luck vorgestellt. Viel Technik verborgen in schickem Interieur mit viel Zeit für interessierte Fragen.

Redaktion: Beate Winter

 
1. Dezember, 2014

World Usability Day 2014: Track 2 – Meinungen zu User Experience

Service Design zwischen Nutzerfreundlichkeit und Weltverbesserung

Engagement – unter diesem Motto fand am 13.11.2014 der neunte World Usability Day in Hamburg statt. Rund 220 Gäste kamen. Wie schon seit 9 Jahren hat eparo den weltweiten Aktionstag für Benutzerfreundlichkeit ihn in Kooperation mit der Hochschule für Angewandte Wissenschaften (HAW) organisiert.

1 – Alle Vorträge zum Download
2 – Der WUD 2014 in Hamburg: Zwei Rückblicke
3 – Revolte und Umsturz: Im Track 1 beginnt die Zukunft
4 – Track 2: Meinungen zu User Experience
5 – Der Einfluss der Sitzordnung auf die Workshopatmosphäre

Der Sinn von Nutzertests und die Rolle der UX-Designer.

In Track 2 ging es etwas weniger esoterisch zu. Allerdings vor allem bei den ersten drei Vorträgen auch durchaus kontrovers um die Frage „Wie gut oder schädlich sind User-Tests?“.

Session 1: User müssen gefragt werden. Oder nicht?

 

Ann-Catrin WellhöferAnn-Catrin Wellhöfer (SinnerSchrader)

In meinem Kopf macht es Sinn – wenn da nur nicht diese Nutzer wären:
Ein Plädoyer von Anne über die Einbindung von Nutzerbefragungen im Rahmen des Konzept- und Umsetzungsprozesses.
Da unser gesamter Konzept-Prozess nutzerzentriert ausgerichtet ist, ist das zwar für uns keine sonderliche Neuerung – aber es ist doch immer wieder schön, Mitstreiter auf der Mission „für den Nutzer, mit dem Nutzer“ zu gewinnen.

Lasse Lüders (Appmotion)

Das kann man schon so machen, aber dann ist es halt gewöhnlich:
Anhand seines Reiseberichts einer Wanderung durch Island hat Lasse für sich 10 Aspekte identifizieren können, die ähnlich zu komplexen Projekten verlaufen.
Zunächst einmal ein interessant gestalteter und kurzweilig vorgetragener Reisebericht, der Lust macht, Island einmal selbst zu bewandern. Den aus den Faktoren abgeleitete Schluss, dass „Usability Studien“ (wie Lasse sie nennt) die Innovation töten, empfinde ich als fragwürdig. Meine Meinung: Mit User-Tests habe ich man die unschätzbar wertvolle Möglichkeit, die kreativen Design-Hypothesen seines Projekt mit authentischen Nutzern zu prüfen, ohne dass schon viel Geld in die Umsetzung geflossen ist. Zeitgleich in der Selbstbeobachtung für mich interessant, dass ich mich am Begriff „Usability-Studien“ so störe – das werde ich in einem weiteren Blogbeitrag für mich mal weiter herausarbeiten müssen.

Katharina Köth (Jung von Matt/next GmbH)

Die Schönheit liegt im Unterschied:
Katharina vertritt in ihrem Vortrag die Meinung, dass Nutzertests das Markenerleben verderben.
Katharina berichtet aus ihren Erfahrungen mit Nutzertests und dass sie mittlerweile manchmal gerne auf die Validierung durch den Nutzer verzichten würde.
In der Diskussion arbeitet das Plenum heraus, dass Testvorgehen, Erwartung und Interpretation der Ergebnisse entscheidend sind für den Ausgang des Tests und die daraus abgeleiteten Erkenntnisse. User-Tests sind keine harten Umfragen mit statistisch maßgeblichen Ergebnissen, sondern Einblicke in die reale Erlebniswelt der User. Die kreativen Schlüsse daraus sind unsere Aufgabe.

 

Session 2: Welche Rolle spielt eigentlich der UX-Designer?

In der zweiten Session wurde es eher pragmatisch:

Tim BosenickTim Bosenick (GfK SE)

Über die Messung von User Experience:
Tim Bosenick stellt in seinem Vortrag den durch die GfK (ehemals SirValUse) erarbeiteten UX-Score vor. Der Score quantifiziert die User Experience auf den Dimensionen Erlernbarkeit / Bedienbarkeit, Identifikation / Inspiraton und Look & Feel.
Langfristig angelegte Entwicklung eines Bewertungsformats, der vor allem im GfK-Universum Sinn zu machen scheint, wenn es darum geht, den UX-Score großer Unternehmen zu vergleichen.

Yeli Tong

Yeli Tong (XING AG)

While UX becomes hot, stay cool!:
Als UX befinden wir uns in einer interessanten Grätsche zwischen Produktmarketing und Entwicklung. Es gibt Leute im UX-Bereich, die sich eher der einen oder der anderen Seite zugetan haben und dadurch jeweils ihre Erfolge erzielt haben. Die Frage ist jedoch, wo es in Zukunft hingehen kann. Besonders spannend im Kontext mit den Diskussionen in Track 1 zur Unternehmenskultur. Welche Rolle spielt dann der UX-ler?

Stephanie Weber & Aurelius Wendelken (Immonet GmbH)

Wie man mit offenen Daten die Welt verbessern kann:
Stephanie und Aurelius stellen verschiedene Open Data Programme und Projekte vor, die mit diesen Daten realisiert wurden.
Die beiden vertreten die interessante Perspektive, Open Data als eine Form von sozialem Engagement zu betrachten. Zeitgleich von ihnen der Appell, an mehr gemeinnützigen Veranstaltungen wie Hackathons teilzunehmen. Vor allem seitens der Vertreter aus der UX-Branche mangelt es leider teilweise an Beteiligung.
Ein sehr schöner Abschluss des Track 2 mit dem Appell an mehr Engagement.

Redaktion: Beate Winter