Liechteneckers Relaunch hat mir gut gefallen. V.a. Farben, Kontraste und Illustrationen.

Der erste Bithalter 2010 und gleich vier mal ‘Schland am Start.

• Individuelle Layouts für unterschiedliche Artikel haben ihren Reiz. Das Agenturblog teilt seine Gedanken zum neuen Blogdesign-Ansatz in einem Artikel: Die ganz große Bühne
• Über den Umgang mit dem Validator: Der Quellcode gehört nur zur Aufgabe, nicht zur Lösung
• Nicht nur die Vorlieben von Suchmaschinen sollten Grund für kurze Ladezeiten sein. Ein paar Gedanken dazu und Tool-Tipps bei ux-zentrisch: Über Umwege zu schnellen Websites
• Auch wenn CSS3 noch ein Weilchen braucht, gibt es keinen Grund für Stillstand. Grundgedanke Progressive Enhancement: Die Zeit ist gekommen
• Der neue King heißt Context. The C Word: How context can inform our design process

Der Schuss kann auch nach hinten losgehen.

Im Webdesigner Depot beschäftigt sich ein Artikel ausführlicher mit dem Minimalismus im Webdesign: When Minimalism Backfires: When Too Little Is Not Enough

Man muss es wohl eher als eine Stilfrage verstehen.

Simplifying a website is one thing, but minimalism on its own is just a style. It is a style just as grunge, illustrated and sleek Web 2.0 are styles.Aus When Minimalism Backfires: When Too Little Is Not Enough

Was für uns Webdesigner edel und gelungen ist, wirkt auf einen Otto Normalsurfer mitunter farb- und freudlos. Das ist die Realität. Und so spielt auch bei der Entscheidung für einen minimalistischen Ansatz der Kontext eine ganz wesentliche Rolle. Dabei v.a.

• Zielgruppe(n)
• Ambiente bzw. Stimmung

Ich denke, man sollte Minimalismus auch nicht mit Einfachheit (Simplicity) verwechseln. Denn auch ein komplexes Webdesign kann eine gewisse Einfachheit aufweisen. Zumindest kann bzw. muss es unter gegebenen Umständen und Anforderungen das Ziel sein, das Oberflächendesign so einfach wie möglich zu gestalten.

User interface patterns and conventions can, and should, be broken, provided one criterion is met: the new solution is better at its task than the one it replaces.

Das Problem bei Patterns besteht darin, dass sie mit der Zeit u.U. etwas unflexibel machen. Hier können z.B. auch Antipatterns für Abhilfe sorgen.

So it comes as no suprise when the general attitude of stakeholders these days is one of a shopper saying: ‘One McUser Experience with usability fries please.’Kem Kramer, Is UX becoming a commodity?

Manchmal habe ich daher den Eindruck, dass UX gerne mit Spaß (an einer Website) gleichgesetzt wird. Gute Userexperience macht Produkte sexy. Ich denke, dass es nicht ganz so einfach ist.

Spaß und Freude sind im Umgang mit einer Website sehr wichtig. Keine Frage. Das nennt man auch gerne Joy of Use. Joy of Use ist allerdings nur ein Aspekt von UX. Die Nutzererfahrung lässt sich z.B. durch sechs Adjektive gut beschreiben:

• auffindbar
• zugänglich
• benutzbar
• nützlich
• schön/begehrenswert
• zuverlässig

Joy of Use kann erst dann eintreten, wenn Vorbedingungen erfüllt sind. Hier sind v.a. die Auffindbarkeit und die Zugänglichkeit gemeint. Danach entscheidet sich, ob eine Sache darüber hinaus gut benutzbar ist.

Gute Benutzbarkeit, Nützlichkeit und Schönheit sorgen dann für den Spaß an der Sache.

UX lässt sich imho nicht genau abgrenzen und klar definieren. Sie lässt sich wohl aber umschreiben. Einige Ansätze dazu habe ich mal gesammelt: Was ist also Userexperience (UX)?

Etwas buntes zum Start in die kalte Jahreszeit. Die Website der Agentur Flourish aus Florida.

Die Praxislinks mit dem Schwerpunkt Usability und Gestaltung.

• Gute Gestaltung von Software-Bedienoberflächen
• Eine Referenz zu HTML und CSS kann jetzt online gelesen werden: Little Boxes 1 online
• Es gibt keinen “Fold”: The myth of the page fold
• Nutzer und ihre Anforderungen besser verstehen: How to Understand Your Users with Personas
• Ob man’s glaubt oder nicht. Marketing und Design sind nicht ganz überflüssig: Branding and Marketing Essentials for Your Web App
• Ausführlicher Blick auf die Zukunft von HTML: An introduction to HTML5
• Search Engine Optimization Is Part of Good Web Design. Besser gesagt: Saubere Webentwicklung legt viele Grundlagen für bessere Auffindbarkeit

Wir brauchen ein neues, frisches Design!

Wer kennt das nicht? Viele von uns sind sehr wahrscheinlich schon mit einer solchen Aussage konfrontiert worden.

Gleich immer alles neu zu machen, ist selten die beste Lösung. Im Extremfall kann der Schuss auch gewaltig nach hinten losgehen. Ein neues (Web-) Design kann zwar ansprechend und gut bedienbar sein, die Besucher/Nutzer aber erst mal verwirren.

Wo ist mein Login hin?

Ein radikales Re-Design ist selten die beste Lösung

Jakob Nielsen hat dazu einen Artikel geschrieben. Er ist wie immer auch etwas radikal in seinen Ansichten. Im Kern aber steckt viel wahres in seinen Ausführungen.

Fresh vs. Familiar: How Aggressively to Redesign?

Er argumentiert zunächst gegen voreilige und umfassende Re-Designs. Aber auch er sieht die Notwendigkeit größerer Würfe. Denn auf die Dauer kann zu viel Kleinklein auch Probleme mit sich bringen.

Das Gewohnheitstier

Nehmen wir das Beispiel Freemailanbieter. Sehr viele Nutzer rufen ihre Mails nicht über eigene lokale Mailclients ab. Sie besuchen jedes Mal die Website des Anbieters und loggen sich über die Website in ihren Mailaccount ein. Befindet sich der Login nicht an gewohnter Stelle, sind die Nutzer erst mal verwirrt. Die Folge kann dann auch Verärgerung über die Veränderung sein.

Nutzern ist das Design (fast) egal

Innerhalb eines gewissen ästhetischen Rahmens, spielen für die Nutzer Designdetails nur eine untergeordnete Rolle. Sie analysieren ein Webdesign nicht. Der erwähnte Rahmen lässt sich natürlich nicht abschließend definieren. Man kann aber davon ausgehen, dass sich die Ansprüche – oft unterbewusst – je nach Thema ändern.

So z.B. sind Designfeatures und -details bei Nachrichtenseiten, bei denen es in erster Linie um reine Information geht, eher zu vernachlässigen. Wohingegen Websites von Automobilherstellern, wohl höhere Ansprüche erfüllen müssen. Hier geht es z.B. auch um Emotionen. Design kann diese wecken – auch negativ.

In beiden Fällen ist es so, dass einem die Besucher/Nutzer die radikale Neugestaltung nicht immer nur danken werden. Auch wenn es auf den ersten Blick schön aussieht.

Wann ist ein Re-Design angebracht?

Nielsen führt zwei Fälle an, die seiner Ansicht nach ein Re-Design rechtfertigen.

1. Eine (noch) kleine Nutzerbasis. Wenn man sich dann von einem ganzheitlichen Re-Design eine deutliche Verbesserung erhofft, um dadurch auch die Nutzerbasis zu erhöhen, dann sei ein Re-Design der u.U. richtige Schritt.
2. Ein festgefahrenes Design. Das kann aus vielen kleinen Erweiterungen und Änderungen über Jahre hinweg resultieren. Irgendwann kommt man dann nicht mehr weiter und es ist Zeit für einen Neuanfang.

Bei Punkt 2 sollte man aber eines nicht vergessen. Die Besucher/Nutzer mit einzubeziehen. D.h. sie über die anstehende Veränderung zu informieren. Am besten zum Anfang der Neuentwicklung ihr Feedback einholen und zum Neustart Orientierungshilfe anbieten und die Änderungen erläutern.

Nielsen rät abschließend:

So, unless your existing design is an overgrown mess of bolted-on features that needs a new architecture, it’s best to stay with the familiar design that users prefer and avoid the temptation to go with a novel design that only you’ll appreciate.

Ergänzend sollte hinzugefügt werden, dass die Optik irgendwann mal einfach nicht mehr zeitgemäß ist. Das kann manchmal sogar der einzige Grund für einen radikalen Schnitt sein. Nielsens Artikel motivieren nicht unbedingt immer zu Innovation und Kreativität ;-) Das nur mal am Rande angemerkt.

Kaizen – Kleine Schritte sind meist die bessere Lösung

Bevor man sich voreilig für ein umfassendes Re-Design entscheidet, sollte man immer erst innehalten und analysieren. Design erfüllt in den meisten Fällen keinen Selbstzweck. Man sollte sich vor einem Re-Design v.a. immer eines fragen: Was will ich verbessern?

Bekannte und (design-) strategisch erfolgreiche Unternehmen zeichen sich auf UI-Ebene dadurch aus, dass sie ihre Interfaces behutsam weiterentwickelt und verbessert haben. Teilweise über große Zeiträume hinweg und oft so dezent, dass der Unterschied zwischen zwei aufeinanderfolgenden Iterationen nicht unbedingt offensichtlich war.

Irgendwann dann kommt aber doch die Zeit für ein komplettes Re-Design. Aber in der Regel nicht alle 1-2 Jahre. Meistens sogar erst dann, wenn z.B. ein kompletter Markenauftritt eines Unternehmens überarbeitet wurde. Oder aber auch dann, wenn eine Website oder -anwendung soviele Nutzungs- und Akzeptanzprobleme aufweist, dass kleinere Anpassungen das Ganze nur noch verschlimmbessern würden.

Die 3 K im UI Design

• Konstanz: Wer ständig seinen Stil wechselt, kann nicht erwarten, Konstanz und Glaubwürdigkeit zu vermitteln. Jedes Jahr den Anstrich zu ändern ist daher nicht ratsam.
• Konsistenz: Navigationselemente und Funktionen sollten möglichst konsistent verwendet werden. Auch über verschiedene Iterationen hinweg. Das vermeidet negative Überraschungen für die Besucher/Nutzer.
• Kreativität: Natürlich sind auch attraktive und innovative Designansätzen gemeint. Oft aber eben nur auf Detailebene. Außerdem ist Kreativität auch bei der Suche nach Lösungsansätzen für bestimmte Designprobleme gefragt. Wobei es dabei eher untergeordnet um Farben und Formen geht.

Great Designers Re-Align (meistens)

Good Designers Redesign, Great Designers Realign

Ein Leitsatz der sich in den letzten Jahren weiter etabliert hat. In seiner umfassenden Argumentation bei A List apart nachzulesen.

Die Langeweile am eigenen Design ist jedenfalls selten das beste Argument für ein radikales Re-Design.

Website der Schauspielerin Audrina Patridge. Das ist die aus der Burger-Werbung.

• Tutorial mal anders als Comic: Learning About Contrast in Design
• Wireframes sind gerade in: Using Wireframes to Streamline Your Development Process Bsp. 6 + 7 halte ich für weniger geeignet, da schon wieder zu detailliert. Kommt aber auch auf die Zielgruppe der Präsentation an.
• Mit SlickMap CSS lassen sich Sitemaps mit Hilfe einer Vorlage als Strukturbaum darstellen
• Neue Serie bei Sprungmarker: Mit Barrierefreiheit arbeiten (1): Überschriften
• TypeSelect – Javascript-based Selectable Typefaces
• Schöne neue Typowelt mit @font-face. Sehen was z.B. möglich ist: Nice Web Type

Mehr Links und Tipps täglich bei Twitter

Die Flut der herkömmlichen Webdesign-Showcases wird mir in letzter Zeit auch etwas zu viel – Masse. Zu wenig elegante Lösungsansätze spezieller Problemstellungen im Webdesign. Deshalb finde ich mittlerweile die Sammlung von Bestpractices, mit dem Fokus auf bestimmte Elemente, besser.

Drei Beispiele für Pattern-Showcases , auf die ich in letzter Zeit aufmerksam wurde.

Am meisten konnte ich mich bisher mit design|snips anfreunden. Trotz dem Blick für’s Detail, wird hier auch sonst besonders Wert auf ein ansprechendes Gesamtbild gelegt.

Doug Bowman hat Google verlassen. Eine bereits bekannte Personalie, die andernorts kommentiert wurde. Das wirklich interessante daran sind grundsätzliche Gedanken zum Thema Daten und Design. Außerdem die logische Erkenntnis, dass beides nicht isoliert voneinader existieren kann und die Tatsache, dass Google eine Ausnahme darstellt.

Der Begriff Daten wird in diesem Zusammenhang v.a. auch auf die Ergebnisse aus Nutzertests bezogen. Tests wie sie z.B. Google durchführt, um dann auf Basis einer Mehrheit Designentscheidungen zu treffen. Klar, dass einem dann u.U. der Frust packt, wenn man etwas neues wagen will. Denn Nutzer entscheiden sehr gerne auf Basis ihnen bekannter Konzepte – Gewohnheitstier.

Die Hintergründe zum Thema kann man in zwei ausführlichen Artikeln nachlesen:

• Data, Not Design, Is King in the Age of Google (NY Times)
• In Defense of Data-Driven Design (Luke Stevens)

Die für mich wesentlichen Extrakte aus der Debatte:

• Datengeiselschaft kann Innovation behindern
• Höre nicht ausschließlich auf Deine Nutzer/Kunden, denn sie wissen manchmal nicht, was sie wollen
• Google ist nicht schön aber sehr erfolgreich
• Google ist Google ist Googley (jeder Versuch sie zu kopieren wird mit Google bestraft)
• Design spielt bei Google sehr wohl eine Rolle. Diese definiert sich v.a. über die Wiedererkennbarkeit der Oberflächen

Im Zweifel war in diesem Fall zu lange zusammen, was noch nie zusammen passte. Herr B. und Firma G. Ein Sonderfall.

Daten und Design gehören sehr wohl zusammen. Wer die ästhetischen Aspekte (im Webdesign) zu sehr vernachlässigt, wird auf Dauer nur schwer erfolgreich sein können. Wer die Daten nur hübsch aufbereitet, sie aber nicht organisiert und benutzbar macht, der hat auch ein Problem. Google hat einen offensichtlichen Schwerpunkt, der weniger auf den ästhetischen Aspekten liegt. Andere wiederum bemühen sich um ein größtmögliches Gleichgewicht. Müssen sie auch, um sich in der Masse von konkurrierenden Angeboten abheben zu können. Dabei spielt das Design eine zentrale Rolle.

Abbildung: Make data not look like data

Wir alle lieben Muster (Patterns), die uns als Orientierung dienen. An guten (Design-) Mustern hangelt es sich besonders bequem entlang. Patterns sind auch in der Webentwicklung eine gute Hilfe. Immer wieder liest man über diese, solche und noch mehr Muster für dies und das.

Peter Hornsby beschreibt auf UXmatters den, nicht ganz so geläufigen, umgekehrten Ansatz. Er erläutert die Antipatterns an Hand griffiger Beispiele.

Patterns machen vielleicht auch etwas unflexibel

So bequem es ist und so sicher man sich mit bekannten und etablierten Designmustern fühlt, so unflexibel droht man auf die Dauer zu werden. “Nur so. So funktioniert das auf jeden Fall”.

Abhilfe durch Antipatterns

Genau hier können die Antipatterns helfen. Sie zeigen die möglichen Stolpersteine und Fehlerquellen auf. Mit dem Ziel, daraus resultierende Fehler zu vermeiden, um auf der anderen Seite aber weiter kreativ und flexibel bleiben zu können. Ein erweitertes aus Fehlern lernen. Typische Probleme strukturiert im Keim ersticken.

Außerdem kann man es so, den weniger fachkundigen Personen beibringen, auf bestimmte Features zu verzichten. In dem man ihnen die negativen Folgen, eines nicht zielführenden Einsatzes bestimmter Features oder Designelemente, vor Augen führt. Das kann zur Einsicht führen, dass weniger eben oft viel mehr ist.

Beispiele für Antipatterns

An Hand zweier Beispiele – besser zwei Klassiker – erklärt Peter das Prinzip der Antipatterns.

• Click Here
• Shiny Thing

Oder auch bekannt als die beiden Klickibuntis.

Jedes Antipattern hat eine Reihe von Attributen, die es beschreiben und erklären. Wie z.B.: Name, typischer Ort des Auftretens, Ursachen, Gründe für das Auftreten, Hintergründe, Symptome, Konsequenzen, Ausnahmen, etc.

Diese Attribute sind nicht festgenagelt und lassen sich auch individuell kreieren. So kann man mit der Zeit eine kleine handliche Bibliothek von Antipatterns entwickeln.

Antipatterns als Ergänzung?

Mir war dieser so systematisch vollzogene Antipattern-Ansatz bisher unbekannt. Er ist aber eigentlich ganz interessant. Kombiniert mit “herkömmlichen” Patterns, können Antipatterns eine Bereicherung für Kreativität, Flexibilität und Qualität von Nutzeroberflächen bilden.

Ausführlicher Originalartikel: Antipatterns. Foto Original bei flickr: Antipattern.