ux·zentrisch diskutierte vor einiger Zeit:

Montag, 20. Juni 2011 Ein Feature von Tobias Jordans

Du sollst nicht intern-empathisch sein!

Tobias Jordans, Autor

Zur Erinnerung für alle User Experience Designer. Möge euch dieser Gedankengang Bewusst-Sein und Kraft für den User geben:

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:

Donnerstag, 16. Juni 2011 von Tamim Swaid

Detailverliebt: Durch Scrollen die Karte ändern in Google Places Mobile

Seit heute gibt es auf der Startseite von Google Mobile vier neue Icons, die zu Google Places verlinken. Wenn man in der Listenansicht nach unten scrollt fixiert sich die Karte am oberen Bildschirmrand. Scrollt man weiter, wird auf der Karte nur noch die Markierung für den obersten Ort der Liste angezeigt und zusätzlich ein passendes Bild. Das Scrollen innerhalb der Liste ändert also die Kartenanzeige.

Montag, 13. Juni 2011 von Tobias Jordans

18 great »Little Big Details«-Links from UXcamp Europe 2011

Thanks to everyone who joined my session about little big interaction design details and thanks for the active discussion that we had! It was a pleasure. Here’s a quick recap of the session.

Photo of the session
by @cappellmeister

This post includes all the links that we looked at and some more :).

Donnerstag, 2. Juni 2011 von Tobias Jordans

Detailverliebt: Continuity vom Thumbnail zur Vorschau bei OS X

OS X erinnert mich daran, wie wirksam es ist, die Continuity bei Interface-Veränderungen nicht zu unterbrechen: Vergrößert man ein ein Bild mit Quick Look, geht die Animation immer vom Thumbnail aus und beim Schließen auch wieder zum Thumbnail zurück. Besonders fällt das auf beim Wechsel zwischen der Symbole- und Cover Flow-Ansicht, wenn der Ausgangspunkt plötzlich nicht mehr das Datei-Icon, sondern die Coverflow-Vorschau ist.

Ähnliches bieten einige ExtJS-Dialoge, beispielsweise der Yes/No/Cancel-Dialog in dieser Demo.

Welche Beispiele fallen euch noch ein?

Mittwoch, 1. Juni 2011 von Nikolai Merk

Detailverliebt: Maßband anlegen

Beim Maßhemden-Hersteller Tailor-Store zeigt sich sehr schön, wie nützlich es ist Informationen genau dann anzuzeigen, wenn diese benötigt werden.

Neben einer Ganzkörperansicht, wird zusätzlich mit einem Detailbild und kurzem Text gezeigt wie das Maßband anzulegen ist.

Freitag, 27. Mai 2011 von Indra Schlachter

Detailverliebt: Energiespar-Modus für inaktive Netvibes-Nutzer

Netvibes Screenshot Energiespar Dialog
vergrößern

Netvibes reagiert bei Inaktivität des Nutzers und schaltet die Seite in einen Energispar-Modus bei längerer Inaktivität. Interessant wäre zu wissen, wie viel Energie sie dadurch sparen.

Donnerstag, 12. Mai 2011 von Tobias Jordans

Detailverliebt: Shiny Effekte beim Google +1 Button

Der neue +1-Button auf Google.com macht bei MouseOver durch einen Reflexionseffekt auf sich aufmerksam.

Dienstag, 3. Mai 2011 von Alexander Vonnemann

Detailverliebt: Mailchimp – Call to Action

mailchimp-call-to-action

Das E-Mail Marketing Tool Mailchimp nutzt die Darstellung der Account Limits in der Account-Zusammenfassung um den Nutzer konstant aber dezent an ein Upgrade zu erinnern.

Donnerstag, 28. April 2011 von Tamim Swaid

Ahoi! Threadless-Schiffe wissen wo sie hinkönnen.

Als ich gerade auf Threadless gegangen bin, fiel mir der Satz in der oberen Zeile auf »Yep, we ship to Germany«. Das habe ich so bisher auf amerikanischen oder internationalen Shopping Seiten noch nicht gesehen.

Dienstag, 26. April 2011 Ein Feature von Tobias Jordans

7 Best Practices-Regeln für die Renaissance der OnePage-Websites

Tobias Jordans, Autor

Willkommen in der Renaissance der One-Page-Webseiten! Ich weiß nicht, ob es euch schon aufgefallen ist, aber OnePage-Webseiten sind wieder modern. Tüftelnde Webdesigner in der ganzen Welt haben ihre Liebe für lange Webseiten wieder entdeckt und heben gleichzeitig die Messlatte für gutes Interaktionsdesign auf einer einseitigen Webseite an.

In diesem Artikel möchte ich euren Blick auf 7 Interaktionsdesign-Regeln lenken, die jetzt zum Standard einer jeden OnePage-Website gehören müssen.
Im Anschluss gibt es eine Reihe an guten und schlechten Beispielen, die wir uns mit Blick auf dieser Regeln anschauen.

Was ist eine OnePage-Website?

Vorab aber eine kurze Einführung: Wenn wir hier von OnePage-Webseiten sprechen, meinen wir Seiten, deren Inhalt vollständig in einem HTML-Dokument abgelegt ist. Ein Charakteristikum dieser Webseiten ist, dass sie meist circa 3x so lang sind, wie der sichtbare Bereich des Browsers. Nutzer sollen also scrollen, um alle Inhalte zu erfassen. Ursprünglich war das Scrollen sogar das primäre Navigationsmittel um die Webseite zu erleben. Dies hat sich jetzt aber gewandelt: In der Renaissance der OnePage-Webseiten werden klassische Navigationsmetaphern mit langen, scrollbaren Seiten kombiniert.

Grafische Bühnen statt CMS-Look

Was macht OnePage-Webseiten reizvoll und sinnvoll? – Sie bieten Designern die Möglichkeit, stärker in Bühnen und Kapiteln als in Seiten und Rastern zu denken. Das schafft Frische und Freiraum und führt immer wieder zu Seiten mit einem ganz besonderen Nutzungserlebnis.

OnePage-Webseiten funktionieren besonders gut, wenn sie es schaffen, das Thema der Webseite in die Gestaltung einzubinden und das ganze mit spielerischen und ungewöhnlichen (Interaktions-) Effekten zu kombinieren.
Gute Beispiele dafür: Das Thema TV/Film mit einem An-Button in die Websiteinteraktion integrieren (youzee). Oder das Hüpfen des Avatars bei »fat man collective«. Und das statische »Adobe&« in Adobes FutureOfDigital.

7 Best Practice-Regeln für OnePage-Websites: