In einer Email von Bill Gates an führende Angestellte von Microsoft beschwert er sich über die Usability von Microsoft Produkten.

(Foto von Kees de Vos - Lizenz)

Der Gründer einer der grössten Konzerne der Welt und dem führenden Softwarehersteller Microsoft scheint denselben Eindruck zu haben wie viele verärgerte Microsoft-Kunden.

So nimmt Bill Gates in seiner Email vor allen Dingen Bezug auf die Online-Präsenz von Microsoft, die Installation des Moviemakers und Installation und Wartung von Software auf Windows. Alles Bereiche, die auch den normalen Nutzer im alltäglichen Umgang mit Microsoft-Produkten bewegen.

Die Kritikpunkte:

• das gewünschte Produkt im Download-Bereich auf der Microsoft-Seite zu finden gelingt nicht (auch mit Hilfe der Freitext-Suche)
• die Seite reagiert langsam und schleppend
• Notwendigkeit ein Windows Update zu installieren, um den Moviemaker ausführen zu können
• langer und Rechenleistung-intensiver Installations-Vorgang
• unübersichtliche und nicht-instruktive Dialoge bei der Installation
• Defekte und seltsame Programme installiert beim Versuch, Moviemaker unter "Programme" ausfindig zu machen

Dazu fällt mir nur ein: Zum Glück wollte ich bisher nie den Movie-Maker installieren.

Seit dem ist viel geschehen

Ich muss ehrlich gestehen, dass ich Microsoft seit dieser Email 2003 grosse Schritte gemacht hat. Sicherlich ist Windows Vista weit davon entfernt ein Ärgernis-freies Betriebssystem zu sein, jedoch hat es deutlich an Komfort und Benutzerfreundlichkeit gewonnen.

Seit nunmehr über einem Jahr arbeite ich auf Vista Home Premium und muss sagen, dass ich mit den Aero-Features und verbesserter Individualisierung des Betriebssystems sehr zufrieden bin.

Sicherlich ist es noch ein weiter Weg hin zu stabilen Updates (Ende letzten Jahres führte eines der Updates zu fatalen Absturz-Konflikten mit meinem Grafiktreiber), einer intelligenten Anpassung des Betriebssystems an meine täglichen Routinen und Anforderungen. Von Mausgesten zur Beschleunigung der Arbeit bis hin zu einfachen, übersichtlichen Formularen und Strukturierungen ohne Googlen und Foren-Support gar nicht zu sprechen.

Als Arbeitsmachine zählt jedoch vor allem Stabilität und Flexibilität. Und die ist für meine Verhältnisse deutlich gegeben.

Wer die ganze Email lesen möchte: Wirklich empfehlenswerte Lektüre: Hier geht's zur gesamten Email.

[via bokardo.com]

Per Zufall bin ich letzte Woche auf den sehr interessanten Blog The Cool Hunter über moderne Architektur gestossen. Gefüllt mit wirklich faszinierenden Bildern kreativer und innovativer Wohngebäude.

Hier meine Favoriten:

... Unfassbar. Und wir leben noch in ehemaligen Mietskasernen im Friedrichshain :)

Die Unendlichkeit direkt vor der Haustür...

Viel Glas und dazugehöriger White-Space scheinen häufig wiederkehrende Merkmale moderner Wohn-Architektur zu sein.

Ein Traum... Noch ein bisschen Bach am Flügel, bevor man sich in den Lounge-Chair bequemt um ein wenig in Büchern von Philippe Dijan zu versinken. 

Auf der anderen Seite des Spektrums findet sich Holz als stets wiederkehrender Werkstoff. Deutlich angenehmeres Erscheinungsbild, weil wärmer und organischer.

Zuletzt noch ein kleiner Abschweif zu Kindheitsträumen: Ein Pärchen-Baumhaus im Grünen.

[Viel mehr atemberaubende Fotos gibt es bei thecoolhunter.com]

BMW hat mit Gina ein völlig neues Konzept Auto vorgestellt.  Seit 6 Jahren in Entwicklung präsentiert es eine völlig andere Denkweise des Autobauens- und Gestaltens.

Hinter dem Titel "Gina" verbirgt sich eine innovative Herangehensweise an die Karosserie. Diese besteht nicht wie gewohnt aus einem festen Stoff (Metall, etc.) sondern aus einem nahtlosen und flexiblen Lycra-Kunststoff.

Panele unter dem Stoff lassen die Form des Autos verändern.

Wirklich beeindruckend ist dies in Aktion zu betrachten (vor allen Dingen das Augenzwinkern hat etwas):

Mehr zum Konzept Auto Gina von BMW gibt es im Artikel von wired.com.

Hier gehts zum Video auf youtube. 

[via core77.com]

Ein Streit ist ausgebrochen zwischen den berühmt-berüchtigten Basecamp-Machern 37signals und dem Designer der bekannten Web-Agentur blueflavor.

Streitpunkt: Entwicklung von Ideen mit oder ohne Photoshop

Die Macher einer der erfolgreichsten Web Applikations-Suite mit Basecamp, Campfire, etc. sehen folgende Gründe für das Verwenden von Html und Css im Entwicklungsprozess:

• Keine Interaktionsmöglichkeiten bei einem Photoshop-Mockup (kein Klicken, Navigieren, etc.)
• zu hoher Fokus auf Details
• Text in Photoshop ist nicht der Text, den man im Browser sieht
• Dopplung von Arbeit: Zuerst in Photoshop und dann erneute Umsetzung in html und css
• Photoshop erschwert die Zusammenarbeit, da nicht alle diese Software verwenden und es meist einen Experten gibt

Die Antwort von blueflavor:

• für das visuelle Design ist Photoshop unumgänglich (37signals hat bereits einen etablierten Stil)
• für einfache Web Applikationen ist nicht viel visuelles nötig, für bestimmte (z.B. Corporate Web-Seiten) schon
• Kunden wollen etwas sehen für Geld. Im wahrsten Sinne des Wortes. D.h. visuelle Kommunikation (auch im Detail) spielt eine grosse Rolle

Die richtigen Tools für die richtige Anforderung

Ich denke, dass beide Herangehensweisen etwas wichtiges und richtiges beinhalten. Ein wesentlicher Vorteil der Html und Css-Mockups ist natürlich die Möglichkeit, sie in der Produktion weiterzuverwenden.

Es gibt Bereiche im Design-Prozess, wo der Prototyp mit Html und Css umgesetzt werden sollte. Hierbei geht es vor allen Dingen um strukturelle und funktionale Fragen:

• wo ist der Fokus der Seite?
• wie strukturieren wir unseren Inhalt?
• wo kommt Feature x hin?
• wie funktioniert die Navigation?
• wie ist die globale Seiten-Struktur?

Widerum andere Fragen lassen sich primär in Photoshop lösen. Vor allen Dingen visuelle und Detail-Fragen:

• Welche Farben verwenden wir?
• Hintergründe, Verläufe, Logo
• genaue Positionierung von Elementen zu einander
• Icons, Detail-Elemente
• visueller Gesamteindruck (vor allen Dingen auch für den Kunden=

Weitere Fragen, die man sich beim Herstellen von Prototypen stellen muss:

• Wer ist die Zielgruppe? (Entwickler im Team, Kunde, Pitch)
• Wieviel Zeit hat man? (reicht ein Papier-Mockup oder sollte man eine komplette Seiten-Struktur in html und css erstellen)
• Ermöglicht man anderen konstruktives Feedback? (Lieber in Powerpoint als in Photoshop?)
• Welche Detail-Stufe ist erfordlich? (Komplettes visuelles Layout vs. strukturelle Übersicht)

Am Rande: Video zu Prototyping-Tools

Ein sehr interessantes Video zur Auswahl des richtigen "Arbeitsgerät" zum Erstellen von Mockups und Prototypen gibt es von Jonathan Arnowitz (Google).

Er distanziert sich zum Teil von den Konzepten von Bill Buxton, über den ich vor einer Weile geschrieben habe. Im Wesentlichen vertritt Arnowitz die Meinung, dass Prototyping mit jedem Tool (von Papier und Bleistift über Excel bis hin zu Visio) gemacht werden kann. Die Frage ist jedoch stets nach Effizienz und Anforderung.

Die Menge an Informationen hat durch die digitalen Medien und Möglichkeiten der Erfassung von Daten enorm zugenommen. Die Schwierigkeit, die sich nun Designern und Informations-Architekten stellt, ist es, diese Informationen und Daten dem Nutzern zu präsentieren und den Sachverhalt verständlich zu machen.

Das Internet als geeignetes Medium

Vor allen Dingen durch seine interaktiven Möglichkeiten von Flash und Ajax bis hinzu neuen Techniken wie Adobe Air oder Microsofts Silverlight ist das Internet ein hervorragendes Medium zur interessanten Darstellung von Informationen. Nun geht es nicht einfach mehr um Zahlen, Grafen und Mengen. Es geht darum, dem Nutzer Möglichkeiten zu geben, die Daten und Informationen spielerisch aufzunehmen, zu erkunden und somit die Information überhaupt erst zu verstehen und aufzunehmen.

Die New York Times Online wieder ganz vorne

Ich hatte bereits vor einiger Zeit über die N.Y. Times und deren Visualisierungs-Versuche geschrieben.

Nun wurde ein neue Flash-Visualisierung zu den Vorwahlen der amerikanischen Demokraten Hilary Clinton und Barack Obama online gestellt.

Dargestellt wird die Unterstützung für Clinton bzw. Obama sortiert nach Bundesstaaten und demographischen Faktoren wie Hautfarbe, Einkommen und Bildung.

Dynamisch werden die Staaten je nach Kriterium über den Bildschirm geschoben, dass es eine wahre Pracht ist. Und auch wieder wesentlich: Der Spiel-Faktor. Es macht einfach Spass, die verschiedenen Buttons zu klicken und zu sehen, was passiert.

Innerhalb weniger Mausklicks werden eine Unmenge an Daten dargestellt; auf eine einfache und intuitiv verständliche Art und Weise.

Die erste Ausgabe des "neuen, fantastischen Magazins für Comics, Stories und Artwork", XIMAG, ist seit Donnerstag, dem 29.5., in Kiosken und Comic-Läden zu haben.

Ein wirklich lobenswerter und erstaunlicher Kraft-Akt des Verlegers und Chef-Redakteurs Danny Gehrke, der es nun doch seinen Weg in die Hände hoffentlich begeisterter Leser findet.

Das Magazin erhält ein paar wirklich lesens- bzw. sehenswerte Beiträge zum Beispiel "Pulp Hero City" (oder wie ich zu sagen pflege: Palferóssiti) von dem begnadeten Comic-Künstler Anjin Anhut. Oder ein Comic aus den Werken von Thorsten Paulinsky, an dessen Entstehung ich auch beteiligt war. Darüber hinaus gibt es noch Mangas, Kurzgeschichten und Kunst-Panele. Alles aus dem fantastischen Genre, versteht sich.

Meine Arbeit an der ersten Ausgabe von Ximag bestand im Wesentlichen in dem Entwurf des Logos und der Corporate Identity, dem Layout und der Gestaltung des Magazins (Editorial, Inhalts-Verzeichnis, redaktionelle Inhalte) und darüber hinaus einige Anpassungen und visuelle Modifikationen von wenigen Beiträgen.

Cover der ersten Ausgabe:

[Über den Start der Online-Präsentation für Ximag habe ich schon vor einigen Tagen berichtet...]

Am Freitag vergangener Woche ist ein kleineres unserer Projekte online gegangen: Die Präsenz des Comic-Magazins XIMAG.

Die Zielsetzung 

Wesentlicher Fokus des Kunden Vindlicht Verlag lag auf einem starken und einprägsamen visuellen Eindruck.

Darüber hinaus haben wir bei speak-friend natürlich auf eine möglichst intuitive und einfache Bedienung und Struktur der Seite geachtet.

Der Prozess

Die derzeitige Version ist der erste wesentliche Schritt in einem iterativen Prozess.

So werden wir in zwei weiteren Phasen noch zusätzliche Features und Module einbauen, um den positiven Eindruck der Comic-Fans auf der Seite noch zu verstärken. Und sie durch interaktive Features stärker an die Seite zu binden.

Viel Spass mit Ximag.de und schaut euch auf alle Fälle den Künstler-Galerie-Teil an. Da gibt es ein paar hochkarätige Gemälde zu sehen.

Schon lange habe ich mir vorgenommen, über die Fachbücher, die ich lese, eine kleine Rezension zu verfassen.
Der Stapel an Büchern wächst, und um ihn endlich schrumpfen zu lassen beginne ich mit der ersten Rezension aus dieser Reihe.

Web Bloopers von Jeff Johnson

60 Common Web Design Mistakes and How to Avoid Them

Das schon 2003 erschienene Buch befasst sich mit üblichen Fehlern im Web Design und Lösungen, diese Fehler zu vermeiden.

Viele der Blooper (Fehler), die der Autor aufzählt, sind heute schon nicht mehr wirklich aktuell oder deren Vermeidung Standard geworden.
Daher ist das Buch nur zum Teil zu empehlen; jedoch für den Web Design Einsteiger durchaus lesenswert.

Gliederung und Inhalt 

"Web Bloopers" ist in drei Hauptteile gegliedert:

    * Fehler im Content und der Funktionalität
    * Fehler im User Interface
    * Fehler in der Präsentation der Web Seite

Jeder der 60 Fehler wird zunächst umfassend und mit Beispielen vorgestellt und analysiert. In einem zweiten Schritt werden mögliche Lösungen zur Vermeidung aufgezeigt.

Ein wirklicher Pluspunkt des Buches ist die umfangreiche Bebilderung der Beispiele und deren Erläuterung.

Heute noch aktuelle Blooper:

Um einen besseren Eindruck des Buches zu haben werde ich nun einige Bespiele aus dem Buch auflisten:

1. Nicht benötigte Information erfragen

Ein gutes Beispiel für einen Web Design Blooper ist das erfragen von unnötiger Information.

So fragt sich der Nutzer oft, wozu er sein Geburtstdatum eingeben muss, um sich für einen Online-Versand zu registrieren. Oder warum er das Bundesland eingeben muss, wenn er doch schon die Postleitzahl mitgeteilt hat.

Vermeidung:

• So wenig Daten erfragen, wie möglich
• Nur Daten erfragen, die für den momentanen Prozess nötig sind
• Keine Informationen erfragen, die der Nutzer nicht haben wird
• Aus den Informationen, die man erhält, andere ableiten, wenn möglich

2. Eingabe über ein Textfeld - Fehlermeldung

Ein weiterer häufig auftretender Fehler im Web Design ist die Eingabe von auf bestimmten Datenformaten so wie Datum, Geschlecht, Uhrzeiten, etc. über ein freies Textfeld.
Das Problem ist, dass Nutzer häufig nicht genau wissen, was das korrekte Format für die Eingabe ist.  Entweder erhält man dann unbrauchbare Daten oder der Nutzer muss per trial and error herausfinden, was das richtige Format ist.

Lösung:

• Dem Nutzer helfen, Daten einzugeben (z.B. über einen visuellen Kalender)
• Auswahl anbieten (drop-down Listen, Checkboxen, etc.)
• Eingabe-Toleranz gewährleisten

3. Kein Fokus für ein Text-Eingabe-Feld

Sei es bei Suchmaschinen oder Formularen, oft wird der Text Eingabe Fokus nicht auf das erste Eingabe-Feld gelegt. Besonders lästig ist dieser Fehler, wenn es sich um Seiten handelt, die über lediglich ein Eingabefeld verfügen, wie z.B. Suchmaschinen.

Lösung:

• Mit ein paar Zeilen Javascript lässt sich der Fokus setzen.

Weitere Web-Blooper, die der Autor Johnson beschreibt sind: Zu viel erläuternder Text, zu viel Fach- oder Produkt-interne Ausdrücke, Besucher werden "Nutzer" genannt und viele, viele weitere.

Zusammenfassung

"Web Bloopers" ist ein Buch, dass vor allen Dingen für Einsteiger ein hilfreiches Buch sein wird. Nach der Lektüre aller 60 üblichen Fehler, wird man nicht nur wissen, wie man diese Fehler vermeiden kann. Sondern wird auch seinen Blickwinkel auf die Probleme von Nutzern beim Besuch von Web Seiten ausgerichtet haben.

Das Buch hat 329 Seiten mit einer Unmenge an farbigen Abbildungen und Erläuterungen.

[Hier geht es zur Homepage des Buches, wo man sich ein paar Auszüge durchlesen kann.]

In seiner aktuellen Kolumne Alertbox wertet Usability-Guru Jakob Nielsen eine Studie zu Lesegewohnheiten von Nutzern im Internet aus.

Die Studie vom Februar 2008

In der Studie wurden die Länge des Aufenthaltes ins Verhältnis zu der Anzahl der Worte auf einer Seite gesetzt.

Dieser Wert wird veglichen mit der durchschnittlichen Lesegeschwindkeit.

Es wurden knapp 60.000 Seitenbesuche ausgewertet.

Das Ergebnis: Inhalt werden immer stärker gescannt

Das Ergebnis zeigt deutlich, dass im Durchschnitt nur ca. 20% bis im besten Fall 28% der Worte auf einer Seite gelesen werden.

Auf Seiten mit unter 111 Worten wird nur ca. die Hälfte der Information verarbeitet.

Dieses Ergebnis unterstützt vor allen Dingen jene Befunde von Eye-Tracking-Studien, die deutlich gezeigt haben, dass Nutzer im Normalfall eine Webseite in einem F-Pattern lesen.

Interessant und neu ist auf alle Fälle der quantitative Aspekt. Dass gescannt wurde, war klar. Aber wieviel zeigt sich jetzt erst so richtig.

Fazit

Inhalte müssen also immer weiter komprimiert werden und in möglichst einfach zu scannende Blöcke verpackt werden, um den Lesegewohnheiten der Nutzer gerecht zu werden.

Prägnant, kurz gefasst und übersichtlich zu schreiben und die Inhalte zu gestalten sollte für erfolgreiche Web Seiten stets die Priorität sein.

[Hier gehts zum Alertbox-Artikel von Jakob Nielsen]

Ich denke, ich bin nicht einfach zu beeindrucken, geschweige denn umzuhauen. In Anbetracht der Fülle an Details und kleinen Ideen, die in die folgende Illustration geflossen ist, bin ich noch auf der Suche nach einer Steigerung von "umhauen".

Chad Pugh hat für das Video-Portal vimeo.com eine Illustration mit dem Titel "Science Machine" für das Registrations-Formular gestaltet. Nicht irgendeine Illustration, sondern ein kleines Kunstwerk (oder besser: Talentwerk). Den Prozess hat er in Screenshots, die er alle 5 Sekunden gemacht, in einem Video zusammengefasst. Ingesamt 40 Stunden an harter, detaillierter Arbeit.

[Am besten du schaust dir das Original-Video an, die Auflösung ist deutlich besser...]