Inclusion through User Experience

How many words do you understand right away? Words matter. Wording and terminology make a difference in usability and user experience. If you struggle with words then you’ll also perceive a poor usability of a product or service. Jargon includes or excludes people from certain groups. Hence, as a designer please pay attention to the terminology in your product.

Happy Chinese class in Hamburg

A class of Chinese students has fun with recursive displays.

When I teach in front of Chinese students at the Brand Academy in Hamburg – although their German is much better than my Chinese – I am always aware of the issue that some thoughts might get lost or might change their intended meaning on the way from me to them. I mean, this can always be the case and it is astounding that communication works at all. But in this setting it is pretty clear that we have in addition to all language issues also a cultural gap that runs right through the middle of the class room. We have a different background just for instance because of the different TV shows we watched while growing up. The next generation might even ask, „what is TV?“

User Experience is what happens inside the user of a system or service before, during and after she uses the product or service. If you take teaching as a service then you can apply UX design principles also to the situation in the class room. In this setting inclusion means that the lecturer’s aim is to reach each and every student regardless of any circumstances like language, gender, age, prior education, home sickness or world championships in any kind of weird sports. I see inclusion as a humanistic attitude to respect and love your audience.

Well-designed user experiences allow for the uniqueness of people’s different strengths and believe to co-exist in a place of similarity and common ground.  Tools and technologies that embrace similarities to tap into the potential of all people creates conditions that promote people to be their best selves, to cultivate and nurture people will produce better outcomes in all we do.  – worldusabilityday.org 29-Oct-2017

What? “user experiences…believe…” what? This is taken from this year’s home page of the world usability day. After pointing out my problem the authors confessed that they do not understand either. Here is my proposed update:

Well-designed systems and services offer great user experiences for all kind of people regardless of their background, their education, or their current situation. Each one has different strengths and weaknesses that should not exclude him or her from participating in professional or social life via communication technology. Tools and technologies that embrace similarities to tap into the potential of all people create conditions that promote people to be their best selves; designing usable tools to support people will produce better outcomes in all we do.

I hope this is an improvement. I hope this paragraph can be understood and you agree to the intended meaning.

Have you already scheduled your World Usability Day? We can even meet at our panel on Innovation though Inclusion. How many words do you…?

A spiffy computer mouse

A spiffy computer mouse. Sometime it can be quite hard to empathize with the user.

Zwei Beamer Usability @mprove

Es war ein Experiment einmal mit zwei Projektoren zu arbeiten.
Es hat funktioniert! 🙂


Dewey, Huey und Louie an der Decke

Da kein Präsentations-Tool zwei Beamer gleichzeitig ansprechen kann, galt es zunächst eine Konfiguration zu finden, die sowohl bei der Ausarbeitung des Vortrags, als auch in der Live-Präsentation eine gute und robuste und vertrauensvolle Umgebung bietet.

Technisch war es in der Vorbereitung ein Keynote-Dokument, das für zwei Screens konzipiert wurde: ungerade Folie links – gerade Foliennummern für den rechten Beamer.
Dann wurde die Keynote-Präsentation auf zwei MacBooks verteilt und lokal jeweils die anderen Folien verborgen. Letzteres ging ganz gut in der Thumbnail-Ansicht mit gerader Anzahl an Folien pro Zeile. Dann ist es ein Multiselect über die Spalten, die man dann per Kontextmenü verbergen kann. Strike!

Die üblichen Klicker sind mit so einem Setting auch unbenutzbar und ganz nutzlos. Wie soll es gehen? Ein Klicker für zwei Computer? Zwei Klicker mit dem sicheren Usability-Flaw sie unter Lampenfieber zu verwechseln? Das Problem ließ sich durch zwei Mäuse auf dem Rednerpult lösen, die deutlich nebeneinander lagen und per Click die Slides weiter schalteten.

Man könnte vermuten, dass mehr Projektionsfläche zu noch mehr Reizüberflutung beim Publikum führt. It depends. Wenn man die Slides sinnvoll aufeinander bezieht, dann kann es in meinen Augen auch deutlich klarer werden. Ein Folienwechsel in halber Frequenz entlastet zudem das Kurzzeitgedächtnis, indem bei progressiven Diagrammen beide Phasen nebeneinander gezeigt werden können. Sliding-Slide-Transitions unterstützen die Illusion, dass Inhalte von einem Beamer auf den anderen verschoben werden.  Zusammengenommen sind das viele Vorteile, die den komplexeren Aufbau gerechtfertigt haben.


Ceci n’est pas une présentation

AlgoRhythm is it! Reflexionen in einer programmierten Welt

à propos

WYSIWYG 1970

WYSIWYG is the abbreviation for What-You-See-Is-What-You-Get. It is a concept developed at Xerox PARC; it means that the display on screen corresponds to the printed sheet of paper – a quite radical idea in the early days of desktop computing.  According to Wikipedia the expression was “coined by John Seybold and popularized at Xerox PARC during the late 1970s.” – According to Alan Kay it was Charles Simony, who introduced the term.

Therefore it is quite stunning to hear the words in a totally different context. Tim Rice used the very same phrase for a chorus in Jesus Christ Superstar (music Andrew Lloyd Webber, 1970) in the piece The Temple.

what you see is what you get

Score of Jesus Christ Superstar, The Temple

Quite possible that John Seybold knew the song.

[Update 26-Apr-2017] I do not what to push this over the edge, but the following lines are kind of intriguing as well, once you switch the context back to computing:

No-one’s been disappointed yet – success rate, ease of use
Don’t be scared give me a try –  familiarity, robustness, undo, user experience
There is no-thing you can’t buy – Business goals; revenue comes from happy customers

[Update 29-Dec-2018] Alan Kay: What exactly is WYSIWYG?

Richtplatz auf dem Grasbrook 1590

Das Chronoscope ist eine Zeitmaschine für Hamburg, die im Rahmen des Kultur-Hackathon Coding Da Vinci Nord entstanden ist. Justiert man die Coordinaten auf den Grasbrook um 1590, so findet man die Richtstätte, auf der bis 1624 über 400 Seeräuber enthauptet wurden. [cf. Wikipedia].

Der Ort würde heute in etwa zwischen der Elbphilharmonie und dem City-Sportboothafen vor dem Sandtorhöft liegen.

Übrigens suche ich nach Bugs. Hakt es irgendwo bei den Zeitreisen? Irgendein Browser oder Device bei dem etwas falsch dargestellt wird? Oder gibt es eine Coordinate, bei der die Karte besser ausgerichtet werden sollte? Dann könnt Ihr das gerne hier oder in farcebook mit Screenshot oder Chrono-Link berichten.

protonet design hacks

If your only tool is a CSS hammer, the entire world wide web looks like a nail.

This time I’ve implemented a couple of CSS design improvements for protonet’s user interface. The average user experience of the sample user group went up from sort-of-ok to relieved and delighted.

The motivation of all the changes is pure usability design: better layout, contrast, color scheme, legibility, control element recognition, focus on notifications, less noise, less scrolling, semantic colours for the calendar, and much more. The page protonet design hacks summarises and explains the changes. I’ve also played a bit with JuxtaposeJS to provide before&after comparison.

before and after comparison at protonet design hacks

There is more in the pipeline regarding protonet – other enhancements of my design lab apply to the twitter stream and google’s search experience. Let me know if you are interested in the comments below.

#wudhh postmortem

Timon Gerhardt konnte sagen,

ich arbeite für die Welt.

Was für ein Opening im 2. Track des World Usability Day Hamburg 2016! Wir alle sollten einstimmen, dass wir für die Welt arbeiten. Mittels einer „sustainable & green user experience“ könnten wir noch etwas länger und besser auf unserem Planeten unterwegs sein. Es ist nicht nur unser aller Verantwortung, sondern wir haben es als Usability Experten, Interaction Designer, Concepter & Co. auch in der Hand, resourcenschonendere Systeme zu gestalten.
@timongehrhardt macht es (hoffentlich) bei WeltN24. In jedem Fall berichtete er, wie sich das Medienunternehmen gerade user-zentriert neu erfindet.

Wirklich große Freude bereitete es mir als Moderator, dass beim Thema Pattern Library die Hütte bis unters Dach voll war. Jan Kiekeben verstand es auch für Newbies Lust auf Mehr zu machen. Warum das Rad immer wieder neu erfinden? Man nutze einfach 2 mal das Rad-Pattern, um ein Fahrrad zu konstruieren. Bei 4-facher Anwendung ergibt sich ein Auto… äh… also fast. Aber das Prinzip ist klar, oder? Hier die Slides und weitere Referenzen zu Patterns.  Geklickt? – Ja genau, denn schon lange vor Immonet, @jjchieferson‘s Arbeitgeber, haben Architekten mittels Patterns menschenfreundliche Häuser und Wohnungen gebaut. Mind your design roots!

Das Interesse hielt auch bei Torsten Jonas an, der auf der Großbildleinwand des Hörsaals über Big Screens parlierte. Zu Zeiten den Wearables und Borg-Implantate sollte man bitte nämlich nicht die großen und immer größer werdenden Bildschirme vergessen, die auch von Torstens Oma noch genutzt werden können. Ich kenne zwar seine Oma nicht, aber es stimmt trotzdem: Die Screens werden kleiner und größer und die Nutzungskontexte werden immer vielfältiger. Dafür werden bei Cellular sinnvolle Konzepte entwickelt. – Slides hier

Und dann hing er vor mir. Ein weißer Kittel, wie für mich gemacht. Seit ich den schönen alten Ditze-Hörsaal in der Finkenau vor Jahren zum ersten mal betrat, stelle ich mir Dr. Sauerbruch vor, wie er Usability-Probleme eines kranken interaktiven Systems vor der versammelten Zuhörerschaft des WUD obduziert. Krank war hier Niemand, aber der Spass war groß, als dann “die Männer in den weißen Kitteln” den @dolbydigger direkt vom Pult weg abholen wollten.

Der Doc hatte dann noch eine traurige Nachricht zu überbringen.

Sie müssen jetzt sehr stark sein: Der Prozess ist tot. Wir haben alles versucht, aber der User-Centered-Design Prozess war nicht mehr zu retten.

Nähere Betrachtungen dazu lieferte post-mortem Arno @abublitz. Slides hier

Ein Fazit zum WUDHH will ich mir nicht anmaßen, da ich nur einen kleinen Ausschnitt miterlebt und mitgestalten durfte. Der Track 2 war sehr gut besucht und bot hochkarätige Vorträge. Die Diskussionen zeigten ein Interesse und Verständnis der Teilnehmer und wurden jeweils auch noch in kleinerem Kreis weiter geführt.

Den WUD selbst gibt es seit 2006 in Hamburg. Die Nachhaltigkeit hat sich für diese Veranstaltung also gezeigt. Ich hoffe, dass auch im Nachhall einige Themen aufgegriffen und vertieft werden und sich jeder überlegt, wie man seine Konzepte nutzungsfreundlicher und resourcenschonender gestalten kann.


// alle Bilder (und noch mehr) CC-BY-NC-4.0 mprove photography

Siehe auch_ Der World Usability Day durch die „Nutzerbrille“ eines Außenstehenden

Chronoscope Hamburg

Chronoscope Hamburg für Web, iPhone und iPad

Das Chronoscope Hamburg ist eine Zeitmaschine, mit der man 300 Jahre in die Geschichte Hamburgs zurück reisen kann. Das Projekt, das im Rahmen von Coding da Vinci Nord entstanden ist, läuft in jedem Browser und auch als spezielle WebApp für iPhone und iPad.

Die Start- und die About-Seite erklären schon ausreichend worum es geht. An dieser Stelle soll daher mein Manuskript des Abschluss-Events im Resonanzraum ein paar Aspekte des Design-Prozesses beleuchten.

Slide 1

Moin,

darf ich vorstellen: Meine Kollegen Hein und Fiete. Ihres Zeichens Geometer, die vor mehreren 100 Jahren mit einer unglaublichen Präzision Hamburg vermessen haben. Ihre Karten – und 240 weitere von Hamburg, Altona bis hin zur Elbmündung befinden sich heute in der Stabi und sind der Ausgangspunkt für mein Projekt.

Ich bin Matthias Müller-Prove, Informatiker und Interaktionsdesigner.

Slide 2

Im ersten Schritt ging es um das Zugänglichmachen und Sichten der Karten, denn 6GB Scans und MetaDaten im XML Format sind nicht per se einfach zu durchstöbern.

Schon hier gab es wunderbare Details in den Marginalien zu entdecken. Und sobald man die Karten alle vor sich hat und am Bildschirm performant und dynamisch betrachten kann, kommen die Ideen zur Umsetztung von ganz alleine.

Der spannende Punkt beim Experience-Design ist es, wie man es schafft die eigene Begeisterung für das Thema zu transportieren. Denn es sollte ja bei den Anwendern selbst die Begeisterung geweckt werden und ihre Neugierde sollte sie zu Ecken und Zeiten von Hamburg leiten, die ich gar nicht vorgedacht habe. 

Außerdem ist jedes Interface entweder Map or Plan. Bei einem Plan müssen vorgegebene Schritte abgearbeitet werden um das Ziel zu erreichen. Bei einer Karte navigiert der Nutzer selbst.

Slide 3

Gebaut und gestaltet habe ich also eine Zeitmaschine, mit der man quer durch Hamburg und Altona und quer durch die Jahrhunderte reisen kann. Derzeit gibt es 4 Karten, die man transparent über die heutige Stadt legen kann. Die Karten habe ich händisch ausgerichtet und in höchster Qualität eingebunden.Jeder meiner Usability-Probanden ist sofort zu einem Ort navigiert, den sie sehr gut kennt. Diesen persönlichen Bezug kann keine Guided Tour herstellen.

Slide 4

Das Chronoscope basiert auf google maps, und ist mit JavaScript implementiert. Es läuft in jedem Browser und kann auch als spezielle WebApp für iPhone und iPad gestartet werden. Dann hat man noch mehr Platz für die Karten.

Seit gestern gibt es ein secret Feature: ChronoHyperLinks. Das sind Links, die man mit Freunden teilen kann.

Wer Lust bekommen hat, kann das Chronoscope Hamburg gerne selbst ausprobieren.