Sie wenden dabei das gleiche Prinzip an, über das schon Millionen von Newsletterempfängern gesammelt bzw. Leads generiert wurden: »Natürlich kannst du diesen kostenlosen Download haben, du musst uns nur hier deine E-Mail-Adresse hinterlassen.«

Hike übersetzt dieses Prinzip für ihren kostenlosen PSD-Template-Download auf Facebook:

• Man muss liken, bevor man downloaden darf, denn der Download ist »exklusiv für Fans«.
• Man soll den Download kommentieren, nachdem er gestartet wurde.

Und so wurde es umgesetzt (Screencast):

Was haltet ihr davon? Ist das schon ein »Dark Pattern« oder einfach nur ein schön umgesetztes »Geben und Nehmen«?

In ihrem neusten Video zeigen sie, wie mobiles Bezahlen und mobiles Banking bei ihnen funktioniert. Es macht Freude zu sehen, dass es dort draußen endlich jemand gibt, der User Experience Design-Prozesse auf ein komplexes Thema wie Banking anwendet und ein besseres, schöneres und einfacheres Produkt entwickelt.

Hier ist das neuste Video:

Aber das ist nicht alles. Angefangen hat Simple mit dem Thema Sparen. Dieses Video stammt von einer früheren Beta-Version. Trotzdem zeigt es schon, wie viel besser Simple in der Lage ist, relevante Antworten zu liefern und dem Nutzer beim Finanzmanagement zu helfen:

Was haltet ihr von den Ideen von Simple und von der Art, wie sie es umsetzen?

Für mich sind sie eine Inspiration, dass es mit dem richtigen Team möglich ist, auch ein hoch komplexes und festgefahrenes Thema wie Banking neu zu denken und besser zu machen.

PS: Und natürlich muss die Startseite eines so hippen Unternehmens eine One-Page-Website sein.

Schon 1991 hielt John Cleese (Wikipedia), bekannt von Monty Python, diesen lustigen und wissenschaftlich fundierten Vortrag über Kreativität. Sehr sehenswert.

Via @konnexus.

PS: Es könnte gut sein, dass dieses Vimeo-Video in Wirklichkeit kostenpflichtiger Content von videoarts.com ist. Zumindest die Laufzeit ist gleich. Noch ein Grund mehr es bald zu schauen und ggf. den Download-Link bei Vimeo zu nutzen :-).

Die Twitter App für OS X nutzt eine Animation der Spaltenbreite um zu zeigen, dass man sich auf der obersten Ebene der Hierarchie befindet. Die Animation ist jedoch nur zu sehen, wenn man per Tastaur (Esc-Taste ⎋) navigiert.

Amazon.de – Statt des Bewertungs-Elements zeigt Amazon bei eigenen Rezensionen einen 7-zeiligen Hilfetext an:

Warum gibt es an dieser Stelle keine Buttons zum Abstimmen? Kunden können nur über die Rezensionen anderer, aber nicht über ihre eigenen Rezensionen abstimmen. Aus diesem Grund erscheinen die Buttons für eine Abstimmung nur, wenn Sie die von anderen verfassten Rezensionen ansehen.

Was haltet ihr davon? Ist das die beste Lösung für dieses Problem?

iTunes zeigt uns einen weiteren Ansatz im Umgang mit dem Registrieren-Link, es lässt ihn einfach weg. Statt dessen ist der Registrieren-UseCase im Anmelden-Dialog versteckt:

(Screenshot vergrößern)

Mir gefällt der Gedanke. Er spielt bewusst damit, dass Nutzer diesen Link schon klicken werden, wenn sie sonst keine Alternativen haben … aber erzeugt dabei kein schlechtes Gefühl.

Was haltet ihr davon? Ist das ein Pattern, das wir nutzen sollten in unseren Webapplikationen? Oder nur in speziellen Situationen?

Danke an @dominik_schwarz für das Bild und die Beschreibung 1, 2.

Das Szenario: Ihr erhaltet einen Link auf http://winfuture.mobi/news/66153 und öffnet ihn ihn eurem Desktop-Browser. Zu sehen erhaltet ihr die mobile Website. Um sie besser lesen zu können und die Videos abzuspielen, versucht ihr auf die Desktop-Version zu wechseln.

Für dieses Beispiel ist es erst einmal nicht wichtig, wie wir an die mobile URL kommen sind. Wahrscheinlich erreichte sie uns über Twitter oder per E-Mail.

Vorab: Ihr werdet schnell sehen, dass ein Nutzer mit unserem Szenario seine Schwierigkeiten hätte. Die gute Nachricht ist: Winfuture hat wenigstens schon mal eine mobile Seite – das ist ein wichtiger, erster Schritt – und die Möglichkeiten der Verbesserungen sind eindeutig und zumindest konzeptionell nicht kompliziert.

Lasst uns jetzt trotzdem im Detail betrachten, warum die URL in unserem Szenario eine schlechte mobile URL ist und wie man es besser machen könnte:

Domain: Bei vielen mobilen Seiten wie beispielsweise YouTube reicht es aus das »m.« aus der URL zu löschen um statt der mobilen die Desktopversion anzuzeigen. Winfuture dagegen nutzt eine andere Domainendung. Diese kann man zwar ebenso problemlos ändern, weiß aber nicht, wie die Originalendung lautet. Ich habe .com ausprobiert und erhielt eine Typosquatting-Seite – ein UX-Problem für einen anderen Artikel – und musste .de als richtige Endung ergoogeln um weiter zu kommen.

Fazit Domains: Es gibt einen Grund, warum schon 2007 die verbreiteste mobile Domain »m.domain.xy« lautete. Es ist ein quasi-Standard – und das aus gutem Grund.

URL-Design: Marian hat es schon mehrfach ausführlich für uxzentrisch beschrieben: Coole URLs ändern sich nicht, sondern sind sprechend, einfach zu modifizieren und so intelligent, dass sie zum intendierten Ziel weiterleiten. Aus für den Nutzer unerklärlichen Gründen hat die Desktop-URL aber mit der mobilen URL wenig zu tun:

http://winfuture.de/news,66153.html

http://winfuture.mobi/news/66153

Fazit URL-Design: Desktop- und mobile URLs müssen dem gleichen Aufbau folgen. Das Ändern der Domain muss ausreichen um zwischen den Versionen zu wechseln.

Versionswechsel: All dieses URL-Hacking war im Übrigen nur nötig, weil die Website selbst mir keine Möglichkeit bot, zwischen den Versionen zu wechseln. Das Minimum dazu ist ein Link am Ende der Seite, der den direkten Wechsel zwischen der Artikel-Ansichten erlaubt. Noch schöner ist natürlich, wenn die Seite merkt, dass es ein Desktopbrowser ist, der gerade die mobile Version anzeigt und fragt, ob zur »richtigen« Version gewechselt werden soll.

Fazit Versionswechsel: Abseit der Primär-UseCases gibt es viele Gründe, warum Nutzer eine Seite auf die eine oder andere Weise anzeigen wollen. Das Interface muss ihnen die Optionen geben – und darf dabei nicht den Fehler machen, den Nutzer zu bevormunden.

Abschließend: Wie Winfuture arbeiten viele Websiten an einer mobilen Version – und das ist gut so. Ich hoffe, diese drei Tipps helfen die UX eurer Seiten noch weiter zu verbessern und ich freue mich, wenn ich bald mehr optimierte mobile Seiten nutzen darf.

Welche guten oder schlechten Beispiele fallen euch ein? Und welche Verbesserungsvorschläge hättet ihr?

Ein brandneues Feature von Google+ gibt uns die Möglichkeit einer ersten Betrachtung beider Trends, demonstriert von Andy Hertzfeld, programmierender Designer bei Google+ und ehemaliger Apple-Mitarbeiter Nummer 435:

Trend 1: Responsive Interfaces

Responsive Interfaces meint, dass die Seite oder Applikation ihre Inhalte an den maximal verfügbaren Platz im Browserfenster anpasst. Ziel ist, den verfügbare Fläche optimal auszunutzen und das perfekte Nutzungserlebnis für alle Auflösungen zu schaffen.

Schon seit einigen Monaten schwärmt die Webdesign-Szene davon, ihre Content-Seiten zu optimieren – eine Bewegung die sich in der Seite mediaqueri.es wohl am besten manifestiert. Diese Seite sammelt eben solche responsiven Webseiten. Wurzel dieser Bewegung ist sicher, dass wir endlich akzeptiert haben, dass es keine Standard-Größen bei Browserfenstern gibt, sondern im Gegenteil die Anzahl der Ausgabegeräte und Bildschirmauflösungen durch Subnotebooks, Tables und Smartphones ständig wächst. Wegbereiter des Trends ist die Tatsache, dass neue Technologien wie HTML5/CSS3-Mediaqueries es heute sehr einfach machen, ein Interface zu optimieren.

Es ist nicht weiter verwunderlich, dass diese Bewegung mit etwas Verzögerung im Webapplikationsmarkt ankommt.

Google+ zeigt das Potential für Interaction Design Optimierungen: Abhängig von der verfügbaren Bildschirmhöhe entscheidet die Applikation, wie viel Bildschirmplatz es für feste Interface-Elemente reservieren darf. Und dieses Detail ist sicher erst der Anfang.

Weitere Beispiele wie responsive UIs Webapplikationen verbessern können:

• Facebook führte vor einem Monat die Chat Sidebar ein. Wenn das Fenster breit genug ist, wird die Freunde-Liste jetzt nicht mehr als kleine Profilbild-Gruppe unterhalb der linken Navigation angezeigt, sondern nutzt die gesamte Fensterhöhe rechts am Bildschirm aus.
• Google hat im Rahmen seiner großen Designoffensive angekündigt, dass die neuen Templates für Google Mail (Artikel) und Google Calendar (Artikel) responsiv sein werden. Aktiviert man das neue Google Calendar-Design kann man schon jetzt sehen, dass der Bereich von Logo und Suchbox seine Größe ändern, abhängig von der Fenstergröße.
• Webapplikationen mit große Tabellen können ebenfalls profitieren, wie in der Diskussion meiner IxD-Details-Session auf dem uxcamp Berlin herausgestellt wurde: Spalten, die bei kleinen Bildschirmen nur Abkürzungen enthalten, können wenn mehr Platz verfügbar ist Begriffe beispielsweise direkt ausschreiben.

Fazit: Interfaces müssen zukünftig responsiv auf den verfügbaren Bildschirmplatz eingehen, schon allein um ein negatives Nutzungserlebnis  bei mobilen Anwendungsfälle zu verhindern. Denkt man dann einen Schritt weiter und optimiert auch für große Bildschirme, kann man einen Wow-Moment erschaffen, der Kunden bindet.
Die Herausforderung für Konzept, Design und Entwicklung ist jedoch, diese neuen Anforderungen in ihre Arbeitsprozesse zu integrieren. Die Methoden und Hilfsmittel dafür müssen noch entwickelt werden.

Trend 2: Scrollen in Web­applikationen, der Hybrid aus Webseite und Software

Ein zentraler Unterschied zwischen Softwareprogrammen und Webseiten war immer schon ihr Umgang mit dem verfügbaren Bildschirmplatz. In einer Software ist die Funktionsleiste (Menü und Symbole) fixiert und man scrollt in einem (kleinen) Bereich der Applikation. Häufig gibt es sogar mehrere Bereiche, in denen unabhängig voneinander gescroll werden kann. Webapplikationen dagegen folgen historisch dem Scrollverhalten von textbasierten Webseiten: man bewegt die gesamte Seite samt ihrer Funktionselementen.

Die Vor- und Nachteile sind offensichtlich und jeder Vorteil ist gleichzeitig auch ein Nachteil. Mal sind die Funktionselement immer im sichtbaren Bereich – und mal hat man den vollständigen Platz für den Content zur Verfügung.

Google+ zeigt eine Hybridlösung. Diese ist zwar nicht neu aber auch bei weitem noch kein Standard und auch erst jetzt, in Kombination mit dem oben beschriebenen Trend zum responsiven Interface wirklich als best practice umgesetzt: Google+ folgt weiterhin dem Seitenaufbau einer textbasierten Seite mit all seinen Vorteilen, fixiert aber (abhängig von der verfügbaren Bildschirmhöhe) die Funktionselemente am Kopf der Seite, sobald diese aus dem sichtbaren Bereich herausscrollen.

Weitere Beispiele für die unterschiedlichen Scroll-Verahlten:

• Google Mail verfolgt ebenfalls seit kurzen den Hybridansatz, schafft es aber noch nicht den Antworten-Button in diese Logik einzubauen. Besser macht es Facebook in seiner vor ein paar Wochen optimierten Nachrichten-Inbox.
• Google Calendar, Google Maps, Google Contacts, Google Reader, der neue Google Hotelfinder und Google Docs sind klassische Beispiele für das oben beschriebene Software-Scrollverhalten. Ebenso natürlich die meisten Sencha ExtJS Applikationen und Beispiele, einer JavaScript-Umgebung die sich vorgenommen hat Software-Artige Interfaces (Beispiel) im Web zu ermöglichen.

Fazit: Schon die Beispiel-Liste zeigt, dass es keinen Standard geben darf. Unterschiedliche Content-Typen brauchen einen unterschiedlichen Seitenaufbau. Die neue Hybridlösung erweitert hier das Spielfeld und verbessert die Usability – besonders, wenn sie in ein responsives Interface eingebettet ist.

Wie gesagt: Spannende Zeiten für Interaktionsdesign-Liebhaber. Ich bin gespannt, welche Neuerungen uns noch begegnen werden und freue mich auf die UX-Verbesserungen, die sie mit sich bringen. Bitte kommentiert, wenn ihr weitere Beispiele kennt!

OS X – Das Wifi Dropdown zeigt den aktuellen Zustand auf drei Arten an: Im Icon und in den ersten beiden Menüpunkten des Dropdown. Icon und erster Menüpunkt zeigen dabei den aktuellen Zustand an (aus, suchen, ein, …) wogegen der zweite Menüpunkt den möglichen Moduswechsel bezeichnet.

Modale Interfaces haben meistens das Problem, dass der Nutzer den aktuellen Zustand nicht eindeutig ablesen kann. Mir gefällt sehr, dass Apple einen inaktiv geschalteten Menüpunkt im Dropdown »missbraucht« um darüber den aktuellen Status explizit zu beschreiben.

Das Suchfeld im neuen XING-Interface passt sich an die Breite der jeweiligen Sprache an. Wie das technisch gelöst werden kann, beschreibt XING in ihrem Entwickler-Blog.

Zum Hintergrund: Das iPhone analysiert den Text von Webseiten und E-Mails und erzeugt automatisch klickbare Link. Es berücksichtigt dabei eine längere Liste an Schreibwesen. Trotzdem findet man auf vielen Seiten nicht oder nur unvollständig erkannte Nummern. Ein Problem, dass in fast allen Fällen mit wenig Aufwand im CMS oder im Template gelöst kann:

• Am einfachsten ist, die Nummern umzuformatieren. Die von mir favorisierte Formate aus der oben verlinkten Liste sind »0221-56939-1000″ oder »+49 221 56939 1000″.
• Besonders wichtig ist, dass ihr die in Deutschland verbreitete »(0)« hinter der Ländervorwahl (»+49 (0)221…«) weglasst. Das iPhone fügt sie sonst einfach der Nummer hinzu und der Anruf geht ins Leere.
• Außerdem unterstützen die gängigen Smartphone einen Telefonlink, den man gezielt setzen kann. Dies empfehle ich aber wirklich nur für die mobile Version der Website, da der Link in Dektop-Browsern zu irritierenden Fehler-Meldungen führt.

Fazit: Webseiten-Betreiber können die Kontaktaufnahme UX für Smartphone-Besitzer mit sehr einfachen Änderungen erheblich verbessern und sollten sich die Zeit nehmen, ihr Seite mobil zu testen und ihre Telefonnummern umzuformatieren.

PS: Neben den offensichtlichen Seiten unter Kontakt und in Artikeln solltet ihr auch euer Impressum und euren Footer überprüfen.

TNW: If you had to give a software designer some basic advice on how to take what they’ve designed as a user interface and make sure that they’re applying real-world rules to it, what’s the best way for them to anticipate the needs of users?

Andy: Well, feedback. I believe it’s an iterative process. It’s never good enough, you can always make it better. So, you have to get as many users as you can as quickly as you can. Even to this day, like what I’m working on today, the second I have my feature working, the first thing I’ll do, I’ll turn to the guy next to me, “Hey what do you think of this?”

So, you’ve just got to be hungry for feedback, but you also have to be open to it. One thing I learned from Bill Atkinsonwhen I was working on the Macintosh is you really can’t get attached to code. The code that you’ve written could be an impediment to the code that should be written. You have to be willing to throw things away when you have the better idea.

I think it’s really the main difference between the good designer and the great designer is as soon as you see a better way, you have to be willing to go with it, even though it could be very painful to throw away what took you two months to develop. Just because you’ve done that, doesn’t mean it’s the way you should do it. Often each iteration of the design is a stepping stone to the next one.

Aus einem ansonsten meiner Meinung nach nicht weiter interessanten Interview zwischen thenextweb.com und Andy Hertzfeld, der als der Designer hinter Goolge+ gesehen wird. Via @tamimat.

Ideas take the path of least resistence. And most often the path of least resistence is »oh, here is all the reasons we can’t do that«. So we tend to say »let’s move quickly on this and if we’re wrong we can just torch the whole thing. But if we are right we at least have some momentum.«

Jim Coudal at Chicago Creative Mornings berichtet im Vimeo-Video über seine Agentur- und Produkt-Arbeit. Jim Coudal kommt aus der 37signals-, Threadless-Szene von Chicago.

photojojo.com geht seinen Nutzern beim Scrollen zur Hand. Zum Ausprobieren »DO NOT PULL« klicken :-).

Steve Krug ist ein hervorragender Autor. Seine Bücher sind präzise, eingänglich, gut anzuwenden und dabei noch dünn und sehr nett geschrieben. Das gilt sowohl für sein erstes Buch »Don't Make Me Think« als auch für dessen Nachfolger »Rocket Surgery Made Easy«. Während Krug im ersten Buch Usability- und Webprobleme in der Breite betrachtet, stellt der Folgeband eine direkt umsetzbare Anleitung für Discout Usability-Tests dar – und genau dafür möchte ich euch in diesem Artikel begeistern.

Schritt 1: Begeistern

Wenn ihr noch nicht überzeugt seid, ob Steve Krug euch etwas zu sagen hat, schaut euch diesen Vortrag von 2008 an. In einer Stunde erklärt Steve nicht nur anschaulich, wie unglaublich es ist, dass viele Firmen immer noch nicht aktiv daran arbeiten die Usability-Mängel ihrer Produkte zu beheben, er stellt euch die Kern-Thesen seines Buchs vor und – besonders beeindruckend – führt live einen Usabilitytest durch.

Übrigens: Auch Ryan Singer von 37signals empfiehlt dieses Video: I can’t think of a better intro to the essential points of usability than this presentation…

Schritt 2: Lesen

Im Vergleich zum Video mag das eigentliche Lesen des Buches auf den ersten Blick unspannender erscheinen – Aber es sind nur 140 Seiten, die sich sich sowohl in Englisch als auch in Deutsch sehr gut lesen… Und wie gesagt: Krug schreibt sehr nett :)

In jedem Fall solltet ihr in Kapitel 2 Steves Bitte folgen, das Lesen unterbrechen und euch sein Demo-Video (Download) anschauen:

Schritt 3: Loslegen

Spätestens nach der Buchlektüre dürftet ihr das Gefühl haben »Das kann ich auch!«. Das ist gut, denn jetzt heißt es loslegen und Praxiserfahrung sammeln. Die ersten Tests, die ihr macht, werden unpräzise und etwas unsauber sein. Bedenkt das bei eurer Auswertung, lasst euch aber nicht davon abschrecken.

Eine Hürde gilt es aber zu nehmen: Die Dokumente sind alle in Englisch. Dank uxzentrisch muss euch aber auch das nicht abhalten: Wir haben den Testleitfaden ins Deutsche übersetzt.

Eine Geschichte aus der Praxis: Ende 2009 war meine Pfadfinder-Ehemaligen-Community StayScout gerade in die Betaphase gestartet. Ich bin ehrenamtlich neben dem Produkt Management besonders für das Konzept verantwortlich. In dieser Zeit habe ich mehrere Usability-Tests im Krug-Stil durchgeführt. Mein Testleitfaden sah dabei sehr einfach aus: Ich wollte herausfinden, wie Pfadfinder sich zurecht finden, die die Plattform noch nicht kennen. Sowohl auf der öffentlichen Seite (verstehen sie, worum es geht?) als nach der Anmeldung. Meine Vorbereitungszeit war daher minimal – insbesondere, weil ich zuerst einmal Pfadfinder aus meinem direktem Umfeld angesprochen habe, die zur Zielgruppe passen. Das Ergebnis war für mich aber unbezahlbar wertvoll. Es hat mich beispielsweise darin bestätigt, dass unsere öffentliche Startseite zu dieser Zeit schon gut erklärte, worum es geht, dass aber die Usability des Registrieren/Anmelden-Formulars schlecht war. Wir haben dann in schnellen, kleinen Schritten an diesem Thema gearbeitet. Augenöffnend war für mich auch, daran erinnert zu werden, wie betriebsblind man wird: Mehrere Nutzer wollte auf der Startseite ihren Pfadfinder-Stamm suchen. Also klicken sie in das nächstbeste Suchfeld und geben den Stammesnamen ein. Dass sie dabei den Titel des Suchfelds »Freunde finden« (oder »Mitglieder-Suche«) übersehen, bin ich schon von anderen Usability-Tests gewöhnt. Dass aber meine Suchergebnisseite überhaupt keine Hilfe bot, um diesen Fehlerfall abzufangen, hatte ich nicht mehr im Blick. Noch nicht mal die Überschrift »Freunde finden« fand sich auf der Suchergebnisseite wieder. Ein weiteres Problem, dass sich schnell und unkompliziert lösen ließ.
Fazit: Es sind genau solche qualitativen Erfahrungen, die eine Webseite stark verbessern und die man am schnellsten und unkompliziertesten über kurze Usabilty Tests erlebt.

Schritt 4: Weitere Links

Glückwunsch, nach dem Schauen, Lesen und Ausprobieren dürftet ihr vom großen Potential kurzer, qualitativer Usability Tests überzeugt sein. Hier sind noch ein paar Link-Empfehlungen, die euch nach euren ersten Tests helfen, noch besser zu werden und die Botschaft zu verbreiten:

• 3 Things Steve Krug Didn’t Tell You About Usability Testing von George Saines – Steve Krug antwortet selbst in den Kommentaren
• Meine Präsentation vom UXcamp Europe 2010 in Berlin (Slideshare) – Ohne eine Tonspur nicht sehr aussagekräftig, inspiriert euch aber vielleicht auf dem nächsten Webmontag die Discout-Usability-Testing-Botschaft zu verbreiten.
• Nicht häufig genug wiederholen kann man Krugs Botschaft, nach einem Usability-Test nur so wenig wie gerade nötig zu ändern: Lazy Person's Guide to a Better World - UX Lisbon 2010 – Aus Steve Krugs eigenem Slideshare-Account
• An Interview With Steve Krug: Everyone should do usability testing mit Susan Weinschenk (Autorin von »Neuro Web Design: What makes them click?«) – Wird euch zwar nicht viel Neues sagen, gehört aber in die Krug-Fan-Favoritenliste

Ich hoffe, diese Videos und Links haben euch motiviert und inspiriert.

Bitte teilt eure Erfahrunge, Meinunge und Link-Empfehlungen in den Kommentaren. – Danke

PS: Die Amazon-Links unterstützen greenanysite.com

Kickstarter-Guidelines – Das Label der Nutzungsbedingungen-Checkbox wechselt von Rot auf Grün. Gleichzeitig wird der Button aktiv.

Screenshot Rot (PNG), Screenshot Grün (PNG)

Das Suchfeld auf der neuen Twitter-Media-Seite dürfte Edward Tufte freuen: Keine Linie zu viel. Die Zustände:

• Normal
• MouseOver
• Focus
• Focus mit Text
• MouseOver auf Suchbutton
• Focus auf Suchbutton (Tastatur)

Bis auf den letzten Zustand, der eher wie der vorletzte aussehen sollte, finde ich das sehr hübsch gelöst.

Um in unserem Job gut zu sein, müssen wir uns ständig in die Situationen und Probleme hineinversetzen, die unsere User, Kollegen und Kunden täglich erleben. Diese Fähigkeit nennen wir Empathie und sie ist die Basis für gute UX. Gleichzeitig birgt sie aber eine subtile Gefahr, wenn wir beginnen unsere Entscheidungen aus Verständnis für Kunde oder Kollege anzupassen. Gute User Experience ist aber für den User da. Alles andere folgt dann. Und solche Empathie für interne Prozesse und Probleme darf uns nicht von unserem eigentlichen Ziel ablenken.

Hier entsteht das Problem: Zum einen ist da die Empathie: Empathie ist eine essentielle Fähigkeit für User Experience Designer. Wir trainieren sie durch Nutzerbeobachtungen, Analysen und eine vielzahl unterschiedlichster Methoden. Sie ist die Basis, sich in Nutzer zu versetzen, ihre Gefühlswelt und damit einen wichtigen Teil ihrer Entscheidungen zu erspüren. Sie stellt damit die Basis dar für gutes Interfacedesign, Interface-Copywriting, Applikations-Prozesse und letztlich für ein gutes Gesamterlebnis mit einem Produkt oder Service.
Zum anderen ist da die User Experience: Sie ist eben nicht nur auf den User bezogen. Ein hervorragendes Produkt kann nur entstehen, wenn alle Umfeld-Parameter berücksichtigt werden – Nutzer und Unternehmen, Technik, Design, Politik, Zeit,…

Empathie funktioniert automatisiert: Woher auch immer wir unsere Empathie für den Nutzer haben, im Alltag ist es ein automatisierter und un-bewusster Prozess, sich in Nutzer hinein zu versetzen. Wir sehen ein Problem und können unsere Interface-Entscheidungen danach justieren, wie sich der Nutzer gerade fühlt, welche Probleme er haben könnte, welche Ängste ihn abbrechen lassen würden,… – essentielle Informationen, wenn es um unseren Endnutzer geht, für den wir die optimale User Experience schaffen wollen.

Das Problem mit der Empathie: Natürlich kann man automatische Prozesse nicht einfach abschalten. Und so ist es nicht verwunderlich, wenn wir uns nicht nur in unseren User, sondern auch in den Grafiker, Entwickler, Kunden, Manager,… hineinversetzen und auch ihre Wünsche, Probleme, Ängste in unsere große User Experience-Formel mit aufnehmen. – Aber genau hier entsteht das Problem!

Empathie hilft uns, viele Einflussfaktoren zu sehen, verstehen und zusammen zu führen zu der besten User Experience, die in diesem Zusammenhang möglich ist.
Und auch wenn es ein ständiges Abwägen zwischen allen Umfeld-Parameter ist, letztlich geht es um den User. Alle anderen, internen Faktoren sind dem Nutzer egal!

Ein Beispiel macht es hoffentlich anschaulicher: Eine klassische, 20 Pixel kleine, unscheinbare Blätternnavigation gefällt Designer und Kunde. Und auch der Entwickler nutzt am liebsten das Standard-Control – egal, wie es aufgebaut ist. Das ganze Blättern-Element ist halt ein lästiges Pflicht-Ding, das man nicht anders kennt als unten rechts in die Ecke gequetscht. Niemand, auch nicht der Nutzer, hat so richtig Lust sich damit zu befassen. Aber gerade deswegen müssen wir hier die UX perfektionieren und ein prominentes und gleichzeitig ästhetisches Blättern-Element mit großen und klaren Klick-Flächen schaffen. Das ist dann gar nicht so einfach und erzeugt bestimmt Zusatzaufwand beim Konzept, Design, Abstimmung und Entwicklung – aber darum geht es nicht. Es geht darum, dass unser User ans Ende unserer Liste scrollt und ohne zu zögern, zu suchen, zu zielen oder abzubrechen auf der nächsten Seite landet und weiter stöbert.

Eine ähnliche Geschichte kann man für Links erzählen, deren Klickflächen immer so groß wie möglich sein sollten (Padding). Oder für Webseiten, die langsam laden (Performance). Oder für Teaser, deren Überschrift und Bild nicht klickbar ist. Oder für Designs, die man mit guter Conversion rechtfertigen kann, die aber einfach nicht schön sind. Oder Inputfelder, die eine Eingabe bei wiederholtem Fokus-Setzen löschen. Oder…

Das bedeutet es für unseren Alltag:

• Empathie für unsere Nutzer ist gut und essentiell
• Aber der Nutzer interessiert sich nicht für unsere Innensicht. Durch Empathie für Kollegen und Kunden darf die User Experience nicht leiden
• Sich bewusst zu machen, welche »erfühlten« Entscheidungs-Kriterien aus einer Empathie für Nutzer und welche aus einer Innensich kommen, ist anstrengend. Die Nutzer-Interessen dann hoch zu gewichten und zu verteidigen noch anstrengender… aber
• unser Ziel bleibt die beste User Experience

Mir jedenfalls gibt dieser Gedankengang Kraft im nächsten Priorisierungskampf klarer auf den Nutzer zu achten.

Was denkt ihr dazu? Könnt ihr nachvollziehen, was ich meine und habt vielleicht noch weitere Praxis-Besipiele?