Pondering HCI Design

This blog is going to be continued there_

Klappt nicht? UX Design hilft!

Wer ist eigentlich der Dumme, wenn etwas nicht funktioniert? Oftmals sucht man die Schuld bei sich selbst, da es ja offensichtlich allen anderen Nutzern des Produktes nicht schwer fällt damit klar zu kommen. Zugegeben – die digitalisierte Welt wird immer komplexer. Vorbei sind die Zeiten, als man mit der flachen Hand auf den Fernseher schlug, um den Schnee zu vertreiben. Heute sind die Geräte so flach, dass man auch gleich in die offene Klinge eines Kochmessers greifen könnte. Im Inneren vieler technischer Geräte verrichten Computer ihren Dienst; diese können aber nur so gut sein, wie die Designer und Entwickler das Gerät und seine Funktionen gestaltet haben. 

Wenn etwas nicht funktioniert, dann liegt das in den seltensten Fällen an einem menschlichen oder Systemversagen, sondern eher an einem Mißverständnis zwischen den Erwartungen des Anwenders und den Annahmen der Produktgestalter. Dumm ist das für alle Beteiligten, insbesondere aber für den Hersteller oder Anbieter des Produktes – sei es nun ein ein anfaßbares Produkt oder ein digitaler Service per App oder Website – denn ein unzufriedener Kunde hält schnellsmöglich nach Alternativen Ausschau. Ist er hingegen von Nutzen und Bedienbarkeit überzeugt, wächst seine Loyalität und er wird ein weiteres Produkt der Marke gerne wieder kaufen oder das Produkt weiterempfehlen. 

Im Bereich des Produkt-Design hat sich für die Wahrnehmungen und Reaktionen eines Anwenders der Begriff User Experience (UX) etabliert. Dieser umfasst alle kognitiven und emotionalen Reaktionen, die durch die Nutzung eines Systems, Produktes oder Service hervorgerufen werden. User Experience (zu deutsch Nutzungserlebnis) beginnt dabei schon deutlich vor der eigentlichen Nutzung, da die Customer Experience, also die Phasen rund um die Kaufentscheidung – wie z.B. Interesse, Neugierde, Kosten/Nutzenabwägungen, Vorfreude – die User Experience nachhaltig beeinflussen.

So weit – so gut. Nur bleibt ein Problem, denn im eigentlichen Sinne gibt es kein User Experience Design. UX sind Prozesse im Menschen. Für eine direkte Einflussnahme auf die UX des Anwenders müsste man ihn entweder hypnotisieren oder Drogen verabreichen. Also bleibt nur, die Schnittstellen und Interaktionen zwischen dem Anwender und dem Produkt oder Service so zu gestalten, dass dabei eine möglichst positive Nutzungserfahrung hervorgerufen wird. Der Begriff hierfür ist Usability (zu deutsch Gebrauchstauglichkeit). Usability ist eine Produkteigenschaft, die gestaltet und gemessen werden kann. Sie setzt sich zusammen aus

a) Effektivität – Wird ein Ziel erreicht?

b) Effizienz – Wie aufwendig ist es das Ziel zu erreichen?

c) Zufriedenheit – Wie zufrieden (subjektiv-gemittelt) sind die Anwender mit dem Produkt oder Service?

Dabei ist es wichtig den Anwender, seine Frage- oder Problemstellung, sowie den Anwendungskontext zu kennen, da davon maßgeblich die Beurteilung der drei Kriterien abhängt.

Dazu ein kleines Beispiel: Ein Navi mag gut auf dem Smartphone funktionieren, wenn man es fest im Auto installiert und in Ruhe das Fahrtziel eingegeben hat. Eine Navigation per Smartphone App auf einer Segeljolle ist fraglich, da die Bedienung des plötzlich sehr klein wirkenden Touchscreens mit womöglich nassen Fingern auf schwankendem Deck die korrekte Eingabe des Zielhafens sehr erschweren kann.

Es ist die Aufgabe von Produkt-Designern, Interaktionsdesignern, Informationsarchitekten, Service-Designern, etc. die Anwenderseite im Business-Kontext zu verstehen und deren Perspektive in den Entwicklungsprozess einzubringen. Dann besteht die Chance, dass das Produkt die Kunden begeistert und aus der Neuentwicklung auch ein Erfolg am Markt, also eine Innovation wird.

// Dieser Text erschien zuerst am 8.6.15 auf nextmedia.hamburg.

Ihre Sitzung ist abgelaufen!

Da habe ich mal gerade aus Neugierde so einen Count-Down im Online-Kaufprozess auslaufen lassen.

"Please complete your order within the given amount of time. After this time, your tickets are no longer reserved for you and are available for others."

Ich wollte wissen, ob es sich um ein Dark Pattern handelt, das mich zum Kauf drängen will, oder ob es schlechtes Engineering ist. Dann, 1 Minute vor Ablauf der Frist:

"The time to complete your order is about to expire. Do you want to extend the time? [No][Yes]"

Nö, will ich nicht. Ich will ja wissen, wie das Interaction Design Problem in diesem Fall gelöst wird, bzw. ob es überhaupt eines ist.

"Ihre Sitzung ist abgelaufen! Vermutlich haben Sie für den Ticketkauf zu lange gebraucht. Klicken Sie auf "Neu Beginnen", um den Ticketverkauf erneut zu starten. [Neu beginnen]"

Aufgabe: Finden Sie mindestens 5 Usability-Issues.

Usability Made in Hamburg (2.2.15)

Am 2.2.15 lädt das eBusiness-Forum in die Handelskammer zum Thema Usability – Made in Hamburg ein. Geplant sind 6 Kurzvorträge von Matthias Finck (effective webwork), Frank Hohenschuh (GfK), Martina Peris (Uni Hamburg), Christopher Menkens (MemeSoft), Frank Jacob (Human Interface Design) und Matthias Müller-Prove (das bin ich), sowie eine Podiumsdiskussion über Smart Services und Industrie 4.0.

Eingeladen sind Firmen aus Hamburg und jeder, der diese Ankündigung liest! Die Anmeldung ist kostenlos, aber notwendig über die Seite der Handelskammer.

Die Veranstaltung wird organisiert von HALLO SME (Hamburg Usability Living Lab for Small and Medium Enterprises).

PS: Hier meine Slides
Und ich drohe schon mal an, dass auch noch ein Video nach kommen könnte. ;-)

Customer Experience Is Not Advertising

5 questions. 5 answers on customer experience for the CeBIT WebExperiece Blog:
Customer Experience Is Not Advertising | CX ist keine Werbung

UX Termine in Hamburg

Vor uns liegt ein äußerst spannender UX und Design Monat:

• 27.10.: Frank Steinicke: Fooling your Senses for (Super-)Natural User Interfaces /Uni Hamburg
• 30.10.: Susanne Schmidt: Entwicklung eines browserbasierten Online-Spiels für die experimentelle Wirtschaftsforschung /Uni Hamburg
• 3.11.: Olde Lorenzen-Schmidt: Evaluation of the Real Life 3D Customer Experience – oder Wovon die Shopping-Center Experience wirklich abhängt /UX Roundtable
• 4.11.: Ricardo Göldner: Service Design in Retail /Service Design Drinks
• 5.11.: Vizthink Hamburg Meetup #9
• 7.11.: This Happened… Hamburg #6
• 8.11.: TEDxTUHH
• 12.11.: Horst Oberquelle: Führung durch das Informatik Museum
• 13.11.: Sven Klomp: Aufmerksam für das Gewöhnliche /WUD
• 13.11.: Alexander Schilling: 100% Engagement /WUD
• 13.11.: Kai von Luck: Living Place /WUD
• 13.11.: World Usability Day
• 13.11.: 12min.me
• 21.-23.11.: Creativity Jam
• 27.11.: Moritz Königsbüscher: Scaling payments in an international startup, ie. SoundCloud. The challenges and how they were solved /ProductTank

 Man sieht sich!

Von Schaltern und Einhörnern

Meine Eingangsfrage ans Publikum der Mediale war, was denn ihre erste Erinnerung im Umgang mit Technik sei. Es hat erstaunlich lange gedauert – Gameboy, DVD-Player und Radio waren die ersten Antworten – bis der von mir ersehnte Lichtschalter genannt wurde. Und dann endlich konnte ich meine Salve von Schaltern, Tastern und Buttons abgeben, um die Berufsschüler für die Sichtweise der User Experience zu sensibilisieren.
Die beiden Bilder mit den Radfahrern in Kopenhagen muss ich erklären (Folie 13 und 14). Der erste Radler in dunkelblau gibt ein Handzeichen. Nein, wir kennen uns nicht und er winkt mir auch nicht zu. Er gibt ein Signal an die Radler hinter ihm, dass er gleich abbremsen wird und ihm bitte doch niemand auffahren möge. Und das macht nicht nur einer – das machen alle Radfahrer in Kopenhagen! Anhand dieses Beispiels kann man wunderbar über Gesten und Konventionen diskutieren.
Die schöne Schlussformulierung…

Interaction Designer sind spezialisiert darauf, Produkte und Dienstleistungen verständlicher zu machen, um damit die Kundenzufriedenheit und Kundenbindung zu erhöhen.

…habe ich mir von Christian Reichel geborgt.

User Experience & Human Computer Interaction Design from Matthias Mueller-Prove

WUD Engagement

Es ist an der Zeit sich für den World Usability Day am 13. November 2014 zu engagieren. Die Vorbereitungen haben in vielen Städten – national und international – bereits begonnen. Und auch Hamburg ist zum neunten mal mit von der Partie.
Den Hamburger Call for Participation für Vorträge und Workshops habe ich auf uxHH veröffentlicht. Bitte schert Euch nicht um die Deadline. Da ist immer noch Luft.
[Update] Neue Deadline für engagierte Vorschläge: Freitag, 26.9.
[Update] Das Programm ist da.

UX Logbuch

Seit heute bietet das UX Logbuch eine Übersicht der neuesten Blogartikel aus der deutschen und deutschsprachigen UX-Szene. Lass von Dir hören, wenn ich Deinen Blog rund um die Themen User Experience / Usability / Interaction Design / Service Design / Design Thinking / etc. mit aufnehmen soll.
Viel Spass beim regelmäßigen Lesen des UX Logbuch.

UXCampHH - 16-Aug-2014

Save the Date - UX Camp Hamburg will take place again on Saturday, August 16 at SinnerSchrader in Hamburg.

Stay up to date by joining our newsletter: http://uxcamphh.org
Or follow us on twitter: @uxcamphh
Official Hashtag: #uxcamphh

Kati, Martin & Matthias
Your UX Camp Hamburg team

[Update] The second lot of 50 tickets will be on sale on Saturday, Aug-2 at 1pm.

Ivan Sutherland on Research and Fun

The Computer History Museum had invited Ivan Sutherland to talk about Research and Fun for an evening in 2005. I was electrified to listen to his words when the recording was first published on research.sun.com – you know, we both worked at Sun those days. I even did a partial transcript of a key section where he offers the essence of what it takes being a good researcher, excerpt of the excerpt:

…if you would be a researcher it seams to me that you’d best search your soul first to find out what it is you like to do. … what ever it is make sure that you pick something to work on that you like, that you think is fun. Because if it isn’t fun you aren’t going to be very good at it. [more]

When Sun went down – this video went away. How odd that a museum depends on the fortune of a single company to preserve its assets. Hence this video was off-line for a couple of years until I offered to upload my backup version earlier this year. The Computer History Museum rejected my idea, but assured me to upload the video to the official CHM channel on YouTube. So thanks a lot to Sara Lott for republishing the talk!



Odysseys in Technology: Research and Fun, lecture by Ivan Sutherland on YouTube

Have fun! (And drop me a line when YouTube is switched off)

fotokartierungsmischmasch

Neulich kam in einer fb-Gruppe die Frage auf, ob man die Fotos der Mitglieder aus der Region Rotenburg schön und einfach auf eine Karte stellen könnte.
Für diesen Blog hier nun die leicht überarbeitete Fassung meiner Antwort:

Ich werde mich hüten eine Kartenlösung vorzuschlagen, die dann aus diversen Gründen nicht funktionieren wird. Und die Gründe sind sowohl gestalterischer Natur (Design, Usability, Aufgabenangemessenheit, Praktikabilität), als auch dieser (jeder) etablierten Community geschuldet.
Jüngst habe ich mit google maps experimentiert und für einige meiner Photo-Serien einen guten Weg gefunden. Schon mit ein paar Änderungen in den Settings treten die Marker und Pfade in der Vordergrund und die Karte sieht nicht mehr wie eine typische Google-Map aus. (Erweitert man aber die Geodaten um nur eine Marke in Berlin, schaut die Karte in der default Zoom-Stufe nicht mehr zufrieden stellend aus: Hamburg verschwindet fast unter der Legende oben links und The-Middle-of-Nowhere rückt ins Zentrum der Karte. Nicht gut.)

Die Karte zu Sven Klomps partizipativen Events unter dem Titel aufmerksam haben wir gar gemeinsam bearbeitet.  Das geht, aber alle Kuratoren müssen sich mit dem Kartieren auskennen und es war nicht ganz einfach die Medien von verschiedenen Plattformen einzubinden. Für aufmerksam haben wir Bilder von flickr, 23hq, google+; youtube-Videos (vimeo war nicht direkt zu verwenden); und Soundtracks von soundcloud eingebunden. Alleine die Bilder waren kniffelig genug, da flickr und g+ per se keine öffentlichen URLs herausreichen. Per Context-Menu-Copy-Link vom Bild bekommt man dann einen direkten Deep-Link, der dann doch funktioniert. Der tumblr Blog ist schließlich die gut lesbare Klammer, der all die persönlichen Eindrücke des Abends zusammen hält. [cf. the verge: tumblr profiles that do not look like anybody's else]

Zwischenfazit: bei einigermaßen übersichtlichem Bilder- und Multimediadatenlage kann man mit vertretbarem Aufwand interessante Layer auf Basis von google maps anlegen.

Bei wachsender Heterogenität des Materials wird es allerdings zunehmend aufwendig. Ganz gleich ob man sich für google maps oder beispielsweise OpenStreetMap entscheidet: je mehr Quellen man einbinden möchte, desto komplexer die Aufgabe des  Zusammenführens der Informationen.
Bei der Kartenkuratorin kann das schnell zu Frust führen, da sie doch schon freiwillig(!) die Karte administriert, dann aber von den anderen Photographen keine Bilder mehr geliefert bekommt oder der Kommunikationsaufwand sehr groß wird die Fotoserien auf den korrekten Ort der Karte zu platzieren.

Ja, es gibt auch technische Ansätze, mit denen man Photos und Blogbeiträge automatisch auf Karten erscheinen lassen kann. Geotagging in den Metainfos der Bilder und Geotags in den Blogbeiträgen erlauben es beispielsweise diese auf einer OpenStreetMap einzublenden (z.B. cupofcoffee)
Der technische Aufwand ist da aber sehr viel größer als bei einer manuell gepflegten Karte und man ist auch sehr eingeschränkt bzgl. der Ausgangsdaten. (Im Beispiel ist das ein WordPress-Blog mit dem installierten und konfigurierten OSM-Modul.)

Es scheint in heutiger Zeit – dem sogenannten Informationzeitalter – etwas zu verwundern, wie spröde es ist ein Meshup aus diversen Quellen zusammen zu stellen [cf. info plumbing]. Die Heterogenität der Multimediadaten, die unterschiedlich bis gar nicht ge-geo-taggt sind, und der Silo-Charakter der Social Networks steht dem leider entgegen. [cf. Tagging – ein sozialer Tag-Traum?]
Von einer Vision àlas "ein sich drehender Globus mit Polaroids, in die man einfach mal so einzoomen kann" bleibt uns einstweilen nur zu träumen.

Oder übersehe ich etwas? Wer kennt eine cross-platform Kartierungslösung für heterogene schwach-getaggte Multimediadaten, die auch noch gut zu gestalten ist?

Weitere inspirierende Beispiele:

• Why Hamburg
• Flexibles Flimmern
• things on bike lanes /tumblr 

Und Tools

• Geo Tag Generator - damit habe ich manuell ein paar (wenige) Bilder auf 23hq getaggt.

Window Cooling at Xerox Star

// reblogged via interaction-design.org on fb

So this morning I was curious about the origin of what is often referred to as the hamburger icon. Spent a few minutes digging around and found this video from the Xerox Star. Turns out that Norm Cox is who designed the interface for this system. I emailed Norm and asked who designed the hamburger icon? Here’s his response:

You've done your homework and found the right guy. I designed that symbol many years ago as a "container" for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

Its graphic design was meant to be very "road sign" simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16x16 pixels to render the image. (or possibly 13x13... can't remember exactly).

Interesting inside joke... we used to tell potential users that the image was an "air vent" to keep the window cool. It usually got a chuckle, and made the mark much more memorable.

It's been nice to see that so many of our designs from those early pioneering years have stood the test of time and become ubiquitous symbols in our UI’s.

Feel free to share the short story. I have many more design related stories from my days at Xerox PARC during the birth of graphical UI's, and subsequent 30+ years consulting. I think it's important to share the past with designers today to help them understand the philosophies, constraints, considerations and inspirations that got us to where we are today. I only ask for proper attribution when you post something from me. (I like people to know that they can get in touch with me for more design tales!)

Kind regards

Norm

all-the-widgets from Brad Myers on Vimeo.

Deeper Cosmology - Deeper Documents

This is not my planet. And this is not my conference.

– Ted Nelson’s opening words at ACM Hypertext 2001. Once in a while I find it very refreshing to remind myself on potential alternatives and fundamental considerations about the state of technology with respect to the web and our knowledge management tools as such. An ever-trusted source on this is Ted Nelson (bibliography and videos).
More quotes from the talk:

• I think of the world wide web and XML and cascading style sheets is the ultimate triumph of the typesetter over the author.
• three fundamental problems today:
  
  1. hierarchical file structures
  2. simulation of paper
  3. the application prison
• Software is a branch of movie making.
• The question is about starting over.

A friend who has attended the conference gave me a CD with the talk. Eventually, I decided to upload the recording to vimeo. Please enjoy:


Ted Nelson at ACM Hypertext 2001 from mprove.

Photo: Ted Nelson 2013 - by Frode Hegland, animated by myself

Starfire

The second video – which I helped to put into the public space – is also from the vision'n'concept department: Starfire by Sun Microsystems 1994.



At CHI ’98 I've attended a presentation by Frank Ludolph on Apple Lisa. Frank had also booth duty at the conference where he spread a couple of VHS tapes of Starfire. What marvelous concepts! Multitouch, voice UI, wall-size displays, tablets with motion and orientation sensors, telepresence for video conferences, among many more...
Years later – in 2005 – I asked Tog for a digital copy. Of course he had one – but no permission for sharing. By chance I was working for Sun at the time and got approval from Sun's VP Juan Carlos Soto to release the video. So please enjoy_



Starfire Director's Cut, Sun 1994

More References

• Starfire at asktog with the original mpeg 4 
• The annotated Starfire script
• 1992’s View of 2004: What Didn’t Happen, and What’s Still to Come (at User Experience 2004 in Amsterdam)
• Video Visions of the Future – A Critical Review (at CHI 2004)

Future Shock

There are a couple videos in the public domain space now where I take credit to have preserved them from fading away. The first is Future Shock by Apple 1988.


I saw it first on an Apple promo CD while working at BBDO in the early 1990s. It was a tiny QuickTime movie. But it made a huge impression on me. Gesture and voice interaction, as well as an early predecessor concept of google glass – didn't know that at the time ;)

A decade later I stumbled upon the CD at the library of the IZHD, made a backup copy, and uploaded it to my site. From there it went to Mac Essentials' magazine site, and eventually to youtube.

The poor quality is still due to the original QT version. I would be very interested to get a hires version...


Future Shock, Apple 1988 from mprove.

uxHH facelift

I was in the mood to update the design of uxHH.de

See the two screenshots before and after to get an idea of the changes; i.e. new and larger fonts improve the legibility and character of the site, more white space for a better balance between text and background and a less "bloggy" appearance.

enjoy
-Matthias

Arrow Key Navigation

I was curious to figure out how e.g. flickr or facebook have implemented the behavior to move to the next image by simply pressing the right arrow key. Well, I do not really know down to the bleeding fingers, but here is my solution to move to the next page in a sequence of pages:

The mediathek of the Raum Schiff Erde offers a chronological tour for all sessions ever. The link to proceed to the next page in sequence has the attribute rel="next".

Then the head section needs a short jQuery/JavaScript to catch the right arrow key w/o the Ctrl/Cmd modifier pressed, identify the first link with the relation 'next' and trigger the link:

$(document).keydown(function(e) {
  var arrow = {left: 37, up: 38, right: 39, down: 40 };
  switch(e.which) {
    case arrow.right:
      if (e.metaKey) {return;}
      document.location.href = $("a[rel='next']")[0].href;
      break;
    default: return;
    }
  e.preventDefault();
  });

Have a look at the source code of the example above how to include the jQuery library.

I want to finish this little tutorial by mentioning that I did not invent the link relationships ('next' and 'prev') – but usually browsers do not make any use of this kind of semantic information. Heck, why not?! It would be cool if all web pagination would support this semantic behavior. Amen.

PS: A few more examples where I have applied the script:

• photo sets for all RSE conferences
• all my photo sets with forward and backward linking
• web version of my thesis Vision and Reality of Hypertext and Graphical User Interfaces
• metascript, my tumblr blog

// Photo cc by Craig

Apple does not do Design Thinking

A quick comparison between Design Thinking Principles and Apple reveals…

Design Thinking	Apple
Fail early and often	…but just internally.
Leave titles at the door	Do not come in if you do not contribute to the meeting.
There are no good ideas	Either it sucks or it is insanely great.
Do! Don’t talk.
Build on ideas of others	Yes, but turn them into something insanely great.
The quantity is it.	The quality is it.
Avoid criticism.	"This is shit"
Stay focussed.	Stay hungry.
Dare to be wild!	Stay foolish.
Think human centered.	Think details oriented.
Be visual.
Let’s have Fun.	Never take the same elevator with Steve. You do not have a job anymore.

q.e.d. Apple does not do Design Thinking. Nonetheless, Apple products are still best of breed.

à propos

• Resources on Design Thinking by mprove

x-Experience am 30.5.13 im Informatikum

Nach meiner spontanen Improvisation unter freiem Himmel zum UXCamp 12 gibt es nun eine Fassung für das MCI Kolloquium des Fachbereichs Informatik der Uni Hamburg am kommenden Donnerstag.

Abstract. Der Begriff der User Experience hat sich nach seiner erstmaligen Verwendung bei Apple Computer gegen Ende der 1980er Jahre in unserer Disziplin etabliert. Allerdings ist nicht zu übersehen, dass derzeit weitere Begriffe das Nutzererlebnis des Anwenders zu beschreiben suchen, wie zum Beispiel Customer Experience, Community Experience, Brand Experience bis hin zu Tchibos Slogan, „Jede Woche eine neue Welt“ / „A new experience every week“.

Was sind die gemeinsamen Elemente all dieser Bindestrich-Erlebniswelten? Passt die ISO Definition der User Experience auf diese Szenarien? Oder welche Ideen lassen sich aus den Gestaltungsbereichen des Marketings oder der Event-Kultur für die Gestaltung von Systemen und Services übertragen?

Weiter Infos auf der Seite des MCI Kolloquiums.

Update: Slides und Referenzen