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 stands 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.”

Therefore it is quite stunning to hear the words in a totally different context. Tim Rice used the very same words 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 if 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

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.

Gutes Design ist langlebig und nachhaltig

Die PAGE fragt aktuell Was ist gutes Design heute? und hinterfragt damit auch Dieter Rams’ These nach der gutes Design langlebig zu sein hat. Dazu durfte ich mich wie folgt äußern_

Bei der Gestaltung für rein digitale Medien ist es relativ unerheblich, ob man die Produkte in kurzen Zyklen erneuert und dabei Altes wegwirft. Es sind nur bunte Pixel und Licht. Ver­schwendet wird dabei nur die Arbeitszeit des Designers und die der Webentwickler. Gestaltet man zum Beispiel den Auftritt für eine Konferenz, will man kurzfristig Aufmerksamkeit erzeugen. Bei einer Cutting-Edge-Konferenz mit innovativen Themen, darf man mit dem Design sogar irritieren und die aller neusten Design-Trends benutzen und übertreiben – in dem Kontext macht Langlebigkeit keinen Sinn. Danach hat die Site ihren Nutzen erfüllt und wird bis zur nächsten Auflage der Konferenz unwichtig. Falls man allerdings zusätzlich einen nachhaltigen Effekt erzielen möchte – Stichwort Community Building oder Branding, sollte man in der Zwischenzeit die Site nicht stiefmütterlich behandeln, sondern hier die Vorträge in Form von Slides oder Videos anbieten.

Visual Design war gestern skeuomorph, dann »flat« und nun »material«. Folgt man jeweils den neuesten Design-Trends, bleibt leider oft der Nutzer dabei auf der Strecke, da er beispielsweise nicht mehr erkennen kann, ob es sich um einen aktiven Button handelt oder um statischen Text. Die Gestaltungsregeln und -prinzipien für interaktives Design sind in jedem Fall wichtiger und langlebiger als Modetrends an der Oberfläche.

Zapft man allerdings für die Produktherstellung Ressourcen der Erde an, indem man zum Beispiel Seltene Erden und Metalle wie Coltan und Kobalt aus China in Smartphones verbaut, bekommt Langlebigkeit im Design einen anderen Stellenwert. Ist das Telefon zu trendy und nach kurzer Zeit unmo­dern, wirft der Verbraucher das ganze Produkt auf den Müll, mitsamt den kostbaren Ressourcen. Da wird es schon dramatischer. Das Design der Hardware muss nachhaltig sein. Ein tolles Beispiel für langlebiges Design ist das Regal­system 606 von Vitsœ, das Dieter Rams 1960 entworfen hat. Seinen zehn Gestaltungsprinzipien entsprechend stellt die Firma ausschließlich langlebige Möbel her, mit dem Ziel: Es besser zu machen statt neuer.

Diesen Aspekt müssen wir Designer künftig mehr bedenken, denn rein digitale Anwendungen, die früher unter den Glasscheiben der Displays lagen, werden mit dem Internet of Things oder Tangible Interfaces zunehmend haptischer und materialorientierter. Das, was Industriedesigner schon lange wissen, war bisher im Screen-Design irrelevant. Nun müssen wir uns zugunsten der Nachhaltigkeit mit Langlebigkeit beschäftigen. [erschienen, leicht gekürzt, in PAGE 10.16]

Matthias Müller-Prove

Nachhaltigkeit wird auch fürs Screendesign relevant. –Matthias Müller-Prove