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

#WUDHH am 10.11.2016

World Usability Day Hamburg #wudhh 10.11.2016

Moin,
der World Usability Day Hamburg findet am 10.11.16 statt. Wie immer ist das der zweite Donnerstag im November. Und wie immer findet der WUD weltweit in vielen Städten statt.

Das Generalthema lautet für 2016 “Sustainable (Green) UX”, also zuallererst der schonende Umgang mit den endlichen Ressourcen unseres Planeten, aber wohl auch der sinnvolle Umgang mit der Zeit und Aufmerksamkeit der Anwender und mit dem Zeitbudget der Design- und Entwicklungsteams.

Der WUD lebt von Euren Beiträgen! Überlegt Euch also bitte, wie Ihr den WUD bereichern könnt. Der Call for Presentations [doc] läuft noch bis 7.9.16 20.9.16.

Links

Der HHer WUD wird organisiert von eparo und der HAW.

Medienpartner ist uxHH.

Reeperbahn Festival Conference Highlights

The Reeperbahn Festival Conference 2016 offers (at least) 3 intriguing sessions. They cover the design space between the virtual and the real world. So, if you attend the festival, don’t miss_

Fascination – The State of VR
Prof. Dr. Frank Steinicke, Uni Hamburg ~ /a well-knows speaker at RSE15

Space Oddity – VR & Arts
w/ Toby Coffey of the National Theatre in London

Smart Cities: How Tech Connects Citizens To Solutions

BTW Some photos from RBFC/NEXT15

Inspire – Inform – Consult /reloaded

UXCampHH Circus

Für UX-Designer kann jede Unterstützung, die sie aus anderen Firmenbereichen bekommen, nur herzlich willkommen sein. Entwickler, die um ihre eigenen Stärken wissen – hoffentlich das Entwickeln – und die ihre Schwächen kennen – wahrscheinlich den benutzerzentrierten Ansatz – und die deshalb proaktiv auf die UX-Designer zugehen sind unschätzbar. Customer Experience-Experten, die nicht nur Käufer, sondern auch die Anwender dahinter bedenken, stehen einer Zusammenarbeit mit den UX-Designern aufgeschlossen gegenüber. Damit solche Kollegen nicht die Ausnahme darstellen, sollte es sich der UX-Designer zur Gewohnheit machen, durch stetiges Aufklären seine in software-ergonomischen Belangen unerfahrenen Arbeitskollegen für Usability und User Centered-Design zu sensibilisieren und interessieren.

In den frühen siebziger Jahren trafen sich die Forscher am Xerox PARC wöchentlich zu den so genannten Bean-Bag-Konferenzen. Auf Sitzsäcken verteilt lauschten sie den Ausführungen von Fachkollegen und ersannen die technischen und interaktiven Konzepte des Personal-Computings für die folgenden Dekaden. Heute veranstalten die größeren Firmen interne Vortragsreihen und Innovation Summits. Diese Seminare bieten den Mitarbeitern in regelmäßigen Abständen Einblick in Fragestellungen der Unternehmensstrategie, sowie aktueller Trends der Hard- und Softwareentwicklung. Die Vortragenden können dabei aus der Firma selbst kommen; das dient dem Zusammenhalt und dem besseren Verständnis für Herangehensweisen in anderen Abteilungen. Durch eingeladene Vorträge werden dem Team neue Impulse gegeben. Sie können zusätzlich den schönen Effekt haben, dass die Position des UX-Designers gestärkt wird.

// Dieser Text erschien 2003 im Hanser Verlag. Es wurden lediglich ein paar Begriffe ausgetauscht, um ihn an den heutigen Sprachgebrauch anzupassen. cf. Everything You Always Wanted to Know About UX – But Were Afraid to Ask – UXCampHH 2016

9 Zutaten für erfolgreiche Communities

UXR 7/14

15 erfolgreiche Jahre mit der uxHH Community und dem UX Roundtable sind keine Zufall. So gibt es einige Zutaten und Verhaltensmuster, die die Chance für ein Gelingen einer jeden Community deutlich erhöhen. Hier kurz und bündig die Top-9:

  • Orga – ein kleines agiles Team, dessen Mitglieder eigenverantwortlich, aber kooperativ die Termine organisieren.
  • Kontinuität und Frequenz – Die Termine dürfen nicht zu weit auseinander liegen und sie sollten nach einem regelmäßigen Schema geplant sein.
  • Referenten und Themenspektrum – Attraktive Themen und gute Referenten sind wichtig für die Qualität der Events.
  • Formate – Die Regelmäßigkeit ist wichtiger als jedes mal einen Vortrag zu haben. Alternativen sind Workshops, Roundtable Wiener Art („Jeder bringt zwei Folien“), Konferenzberichte oder eine UX HappyHour in einer Bar.
  • Venue – Ein fester neutraler Veranstaltungsort ist gut; wechselnde Firmen als Gastgeber geben zusätzliche Impulse und Anreize für die Teilnehmer zu den Events zu kommen.
  • Moderation – Rituale wie beispielsweise Vorstellungsrunden und Ice-Breaker sorgen dafür, dass die Veranstaltungen auch zum Networking genutzt werden können. Die ModeratorIn präsentiert und repräsentiert den Roundtable. Ihrem Geschick ist es zu verdanken, dass neue Teilnehmer sich willkommen fühlen und dass neue Referenten gefunden werden können.
  • Online Community – Es ist wichtig 1) seine potentiellen Teilnehmer erreichen zu können, 2) von diesen erreicht werden zu können und 3) eine Platform für das nachträgliche und nachhaltige Vernetzen anzubieten. Unsere Startseite liegt auf uxhh/roundtable. Event-Einladungen und teils auch Diskussionen laufen über die uxHH-Gruppe auf Xing. Weitere Kanäle wie beispielsweise @uxHH auf Twitter und eine uxHH-Seite auf facebook erweitern die Sichtbarkeit. Eine durchwegs überzeugende Lösung scheint es nicht zu geben. Man bedenke aber beim Start einer Community, dass man später kaum noch die Platform wechseln kann. /cf. 4 basic principles for communities by Esther Dyson
  • Archiv – Ein Webarchiv aller Veranstaltungen sorgt für eine nachhaltige Wirkung der Veranstaltungsreihe und weckt Neugierde bei zukünftigen Teilnehmern. Podcasts und Fotos können das noch unterstützen.
  • Kosten – Der UX Roundtable Hamburg ist eine NoBudget-Veranstaltung. Daher sei an dieser Stelle all unseren Raumsponsoren gedankt.

Passt das auch für die Gruppen, in denen Ihr Euch trefft? Welche weiteren Erfahrungen und Ratschläge könnt Ihr weiter geben?