uxzentrisch diskutierte vor einiger Zeit:

»Mag Ich« teilen – Funktionalität im richtigen Moment präsentieren

Pfiffig. Wenn ich bei YouTube auf »Mag Ich« klicke, wird danach automatisch der »Teilen« Link angeboten. Kennt ihr noch andere Beispiele dieser Art?

Hilfreiche Fehler-500-Seite

Ist eine Website nicht erreichbar, kann das für den Nutzer schon mal sehr unangenehm sein. Bei Sourceforge konnte ich über längere Zeit beim Neuladen der Fehler-Seite sehen, dass sich darüber jemand Gedanken gemacht hat. Nachdem ich bislang nur die immer gleiche, nichtssagende Seite zu Gesicht bekommen hatte, erschien plötzlich diese:

Der aktuelle Tweet auf der Seite macht tatsächlich einen großen Unterschied, zeigt er doch, dass das Problem offenbar bekannt ist und nicht nur bei mir vorkommt.

Detailverliebt: Was die 12374218.75 im OS X Rechner-Icon bedeutet …

Screenshot und Zitat via QuoraWhat is the significance of the number 12374218.75 on OS X’s calculator icon?

The .75 refers to the year 1975, the year Steve Jobs and Steve Wozniak formed Apple Inc. 12374218 is the number of seconds equal to 143 days which, in turn is equal to the date May 23rd. May 23rd, 1975 is the date production of the first computer at Apple Inc. officially begun. (Although it wasn’t officially Apple Inc. until April 1, 1976.)

Ähnliche Details:

  1. What is the text that is written on the Text Edit icon in Apple Mac OS X?
  2. In iPhone advertisements, why is the time always set to 9:42 a.m. on the clock?
  3. What is the text that is written on the Apple Keynote app icon?

Neue Tools lassen uns CSS und HTML visuell bearbeiten

Neue Tools wie dabblet.com helfen uns, abstrakte CSS- und HTML-Code-Elemente zu verstehen. Sie visualisieren Farben, Grafiken, codierte Schriftzeichen und Geschwindigkeiten. Andere Tools erlauben uns das Bearbeiten von CSS- und HTML-Werten mit Schiebereglern und speziellen Auswahlfeldern.

Das ist toll, denn viele der tollen, neuen CSS3- und HTML5-«Befehle« sind so einfacher zu verstehen und zu manipulieren. Und jeder, der einmal in seinem Konzept Millisekunden-Zeiten für Animationen definieren musste, wird sich über eine Vorschau wie im Video freuen.

Diese Tools sind mir bisher positiv aufgefallen:

  • Dabblet.com treibt die Vorschau-Funktionen bisher am weitesten.
  • Livecoding.io erlaubt das Bearbeiten von Zahlen und Farben (Alt-Taste drücken und Zahl anklicken)
  • khanacademy.org hat ein ähnliches Feature … und integriert zudem das Code-Bearbeiten mitten in die Schulung

Ich bin gespannt, welchen Einfluss diese neuen Online-Code-Editoren auf das Interfacedesign kommender Software hat und würde mich freuen, wenn die Macher von Axure sich dabblet einmal sehr genau anschauen würden.

Kennt ihr weitere Beispiele, bei denen solche Vorschau-Elemente verwendet werden? – Twitters Hovercard bietet sich leider nicht mehr an, da sie gerade abgeschaltet werden …

(Danke an Benny für die Inspiration)

Mailchimp veröffentlicht ihre Interface-Sprach-Guidelines

Mailchimp ist ein weit verbreiteter Dienst um Newsletter zu versenden. Kürzlich haben sie ihren »Sprach-Styleguide« veröffentlicht. Darin beschreiben sie verschiedene Situationen, in denen »die Applikation« mit ihrem Nutzer spricht. Für jede Situation wird aufgeschlüsselt: Welche Frage stellt sich der Nutzer? Wie fühlt er sich dabei? Wie antwortet Mailchimp (beispielhaft) und worauf ist bei einer Antwort zu achten (Tipps).

Zwei gegensätzliche Beispiele verdeutlichen das Konzept:

Beispiel 1: Erfolgsmeldungen

Beispiel 2: Fehlermeldung

Warum betreibt Mailchimp diesen Aufwand?

In ihrem Artikel »About Voice & Tone« geben sie einen Einblick die Motivation hinter der Seite.

You hear a lot about brand voices and personalities in content conversations. A brand’s voice doesn’t change much. A brand’s tone, on the other hand? It has to change, depending on both the situation and the person at the other end of the content. Our tone of voice not only affects the user’s emotional state, but it should also be informed by the user’s emotional state—that means our tone is constantly changing.

Our content has power. The right tone of voice can turn someone’s confusion into trust, skepticism into optimism, boredom into curiosity. The wrong tone of voice can turn someone’s interest into annoyance, anticipation into disappointment, frustration into full-on anger. That’s a big responsibility, and the best way we can handle that responsibility is to be empathetic writers. That’s why this guide exists.

Fazit:

Zuerst einmal ein herzliches Danke an Mailchimp für die Veröffentlichung dieser Guidelines. Es ist an der Zeit, das Konzepter und Startups mehr und strukturierter über die Sprache in ihren Interfaces nachdenken. Mailchimp gibt uns mit Voice & Tone hier eine Steilvorlage um ein Format zu entwickeln, dass in der Praxis der Konzeption, Beratung und Webapplikations-Entwicklung für hervorrangende Texte sorgen kann.

Was haltet ihr von dem Format? Für wie praxistauglich haltet ihr es?

Gefühlte Genauigkeit

Gibt es so etwas wie ein UX-Berufsethos? Wenn ja, welchen Stellenwert hat darin Wahrheit? Ist es ein höheres Ziel, eine gute Erfahrung zu ermöglichen, als dem Nutzer in jedem Fall die Wahrheit zu sagen?

Auf diese Fragen bringt mich der Mathematiker John D. Cook mit seinem Blog-Beitrag Accuracy versus perceived accuracy, der wiederum aus dem heute erschienenen Buch The Signal and the Noise von Nate Silver zitiert.

Silver beschreibt in seinem Buch, dass (privatwirtschaftliche) Meteorologen bei der Prognose der Regen-Wahrscheinlichkeit versuchen, einen gut informierten Eindruck zu hinterlassen. Dafür vermeiden sie es, eine Regenwahrscheinlichkeit von 50 Prozent anzugeben, auch wenn die Vorhersagemodelle dies vorgeben. Denn 50 Prozent Regenwahrscheinlichkeit klingt unentschlossen. Stattdessen wird in diesen Fällen häufig 40 Prozent oder 60 Prozent kommuniziert.

Ein anderer Fall, wo oft nachgeholfen wird: Die Meteorologen vermeiden es, niedrige Regenwahrscheinlichkeiten, z.B. von 5 Prozent, zu verkünden. Stattdessen »korrigieren« sie diese Werte gerne auf 20 Prozent. Der Grund: Die Leser/Höher/Zuschauer (die Nutzer) des Wetterberichts mögen es gar nicht, wenn sie aufgrund einer Prognose annehmen, dass es nicht regnet, und ihnen dann unerwarteter Regen den Tag vermasselt. Der umgekehrte »Fehler«, mit Regen zu rechnen und dann doch keinen zu bekommen, wird offensichtlich vom Normalrezipienten nicht übel genommen, sondern eher als Glücksfall eingestuft.

Kennt Ihr solche Fälle aus User-Interfaces, womöglich gar aus Eurer eigenen Arbeit? Wo kommunizieren wir mehr Klarheit, als eigentlich herrscht? Und wo vertuschen wir die Extreme, schwächen ab, beschwichtigen, um es uns mit den Nutzern nicht zu verderben?

Süße Schnecke in Skype illustriert die langsame Verbindung

Wenn die Verbindung nicht ganz so schnell ist, zeigt Sykpe eine kleine Schnecke an. Beim Hover sieht man warum die Schecke als Icon eingesetzt wurde. Süß.

Danke an Ravid Aloni für den Screenshot.

Detailverliebt: Vimeo visualisiert den Upload-Fortschritt

Vimeo hat wirklich bis ins letzte Detail an der Upload-Experience gefeilt. Wer ein Video über den Browser hoch lädt, kann ohne weiteres in ein anderes Tab wechseln, ohne den Fortschritt aus dem Auge zu verlieren. Denn die Prozent-Angabe des Fortschritts wird im Seitentitel weiter angezeigt. Das Sahnehäubchen: Das Icon zeigt dabei eine Torten-Darstellung passend zum aktuellen Fortschritt an.

Detailverliebt: Die Logout-Success-Seite für Multidevice-Downloads nutzen

Twitter – Klickt man bei Twitter den Ausloggen-Link, landet man auf einer Logout-Success-Page »Du hast Dich von Twitter abgemeldet«. Doch statt diese Meldung auf der Startseite oder der (erneut) Einloggen-Seite anzuzeigen, nutzt Twitter diese Seite um ihre Multi-Device-Angebote zu bewerben »Benutze nun die mobile Version«.