Vorher/Nachher: Besseres Blank Slate-Design bei Basecamp
Links der alte, rechts der neue Blank Slate für die Seite »Milestones« in Basecamp. Sehr konsequent aufgeräumt und vereinfacht. Schön.
Via Design Decisions: New Basecamp blank slates.
Und wer mehr über die Idee des Blank-Slates (übersetzt das weiße Blatt Papier) wissen möchte, sollte zu Einen das Kapitel »Blank Slate« im kostenlosen 37signals-Buch »Getting Real« lesen und zum Anderen die beiden uralten Artikel (2003 und 2004) aus ihrem Blog.
Motivation durch Verknappung
Wer hätte das gedacht? Scarcity ist nicht etwa der Titel eines B-Movies über eine Stadt voller Menschen mit Narben. Nein, das Wort bedeutet tatsächlich etwas, nämlich »Mangel« oder »Verknappung«.
Das und mehr kann man erfahren, wenn man sich die aktuelle SpoolCast-Episode mit einem Auszug aus Stephen Andersons Vortrag Designing Seductive Business Apps anhört.
Interessant sind vor allem die Beispiele, die Anderson aufführt, um zu verdeutlichen, wie Verknappung als Motivator eingesetzt werden kann. Dabei mag ein Anwendungsbeispiel aus dem E-Commerce noch sehr naheliegend sein. Dort zeigt Anderson ein Beispiel, wo die Angabe der noch verbleibenden Stückzahl (bzw. ein gelegentliches »Ausverkauft« bei der einen oder anderen Variante) eines Produkts dazu beiträgt, den Nutzer zum Kauf anzuregen.
Weniger naheliegend fand ich allerdings die künstliche Verknappung bei einem Eingabefeld für einen Feedback-Text. Die Macher einer Site (Anderson nennt hier als Namen »Ripple« oder etwas ähnliches) wollen durch Experimente herausgefunden haben, dass sie bei einer Maximallänge von 200 Zeichen qualitativ das beste Feedback bekommen.
So werden Nutzer offenbar dazu angeregt, sich so kurz zu fassen wie möglich (aber nicht kürzer). Anderson stellt in diesem Zusammenhang auch die Behauptung auf, dass bei Twitter gerade die Verknappung auf 140 Zeichen als Motivator funktioniert.
Die gesamte Episode des PodCasts ist nur etwas über 15 Minuten lang. Dazu kann man sich Andersons Beispiele als PDF ansehen.
@rbates: This is the age of CSS3 Gradient Buttons.
http://bit.ly/bZSNge
http://bit.ly/aol7Zn
http://bit.ly/azqdQi
http://bit.ly/cWKdGK
Ryan Bates auf Twitter hat so recht: CSS3 bietet tolle neue Gestaltungsmöglichkeiten. Für mein Freizeitprojekt StayScout nutzen wir die Awesome Buttons. Ich weiß daher aus eigener Erfahrung: Während der ersten Sprints schon mit so einfachen Mitteln hübsche Interfaces bauen zu können, steigert das Nutzerungserlebnis erheblich. So macht agile Konzeption und Entwicklung noch mehr Spaß.
Kommentieren (3 Kommentare)
Letztens meiner Schwester gesagt:
Hey Google hat ein neues Design.
Sie: Seh ich nicht.
Ich: Das Logo und die Buttons.
Sie: Seh ich nicht.
Kommentieren (1 Kommentar)
Gute »Mega Tooltipp« beim Mozilla Testpiloten
Übergroße Primärmenüs kennen wir, übergroße Flyout Menüs auch, und spätestens seit Office 2007 kennt auch jeder übergroße Tooltipps – von Jensen Harris "Super Tooltipps" genannt.
Auch das Mozilla Projekt »Testpilot« macht sich solch übergroße Tooltipps zu Nutze – als Informations-, aber auch als Interaktionsfläche mit Checkboxen und Button.
Diese Form von Tooltipps gibt es erst seit der letzten Version von Testpilot und als Testpilot der ersten Stunde kann ich bestätigen, dass sie die UX des Plugins erheblich verbessern: Die Gestaltung ist reicher und etwas verspielter, was gut zu einer Software für Nutzertests passt, die Interaktion ist auf ein Minimun an Interface reduziert, was ebenfalls gut ins Softwarekonzept eines Browserplugins passt, dass eigentlich gar keine Arbeit machen soll und nicht in Erscheinung treten möchte.
Übrigens: Unabhängig von diesen UI-Details ist Testpilot (@moztestpilot) an sich einen Blick wert! Die Idee von Mozilla, über ein Plugin und freiwillige Nutzer automatisiert Testdaten über die Browsernutzung zusammeln, ist spitze. Und die Ergebnisse, wie beispielweise die Nutzungsstatistik der Verwendung von Menüpunkten im Firefox wirklich interessant. Ein tolles Beispiel für quantiative Forschung zur Interfaceverbesserung. Fazit: Installieren :)
Kommentieren (2 Kommentare)
Vortrag »UX+Agile: Low-Fi trifft Hi-Fi« auf der IA Konferenz 2010
Die IA Konferenz 2010 fand diesmal in Köln am 14./15. Mai unter dem Motto »Service.Design.Thinking« statt.
Ich hatte dort die Gelegenheit, über unsere Praxiserfahrungen bei der Entwicklung einer iPhone-Entwicklung zu berichten, bei der wir User-Experience-Methoden mit agiler Softwareentwicklung kombiniert haben. Auch wenn die Folien des Vortrags nicht selbsterklärend sind, will ich sie Euch nicht vorenthalten.
Präsentation bei Slideshare: UX+Agile: Low-Fi trifft Hi-Fi - IA Konferenz 2010
Übrigens: Ich überlege, den Vortrag noch einmal auf dem UXcamp in Berlin Ende Mai anzubieten. Sehen wir uns dort?
Kommentieren (2 Kommentare)
Besuchte Hyperlinks: Ein Jahr danach
Vor rund einem Jahr hat Marian hier bei uxzentrisch den Artikel Besuchte Hyperlinks – Theorie vs. Praxis veröffentlicht und darin festgestellt, dass nur sehr wenige (deutsche) Websites besuchte Hyperlinks anders darstellen als nicht besuchte Links. Welche Probleme das mit sich bringt, wurde im ursprünglichen Artikel ausführlicher beleuchtet.
Vor einem Jahr war Yahoo! unter den 20 meistbesuchten Webseiten Deutschlands die einzige Ausnahme, bei der – zumindest in Teilen – besuchte Hyperlinks als solche zu erkennen waren. Nun, ein Jahr später, haben wir eine neue Bestandsaufnahme gemacht. Dabei haben wir die 50 deutschen Sites mit den meisten Besuchen (nach IVW-Ausweisung) und international die 50 meist besuchten Sites (nach Alexa) betrachtet.
Das Ergebnis: Unter den deutschen Sites hat sich nach einem weiteren Jahr praktisch nichts verändert. Gerade einmal 3 von 50 Sites nutzten die Möglichkeit, besuchte Links zu kennzeichnen. Das sind yahoo.de , heise.de und ciao.de.
Bei den internationalen TOP 50 sieht das schon anders aus. Die nachstehende Tabelle zeigt alle Sites, bei denen wir besuchte Hyperlinks von anderen Links unterscheiden konnten. Die komplette Liste ist als Google-Docs-Tabelle einsehbar.
Hier zeigt sich, dass auch ein weiteres Jahr später immer noch der Großteil die Vorteile von gekennzeichneten Links vernachlässigen.
Im Verhältnis zu internationalen Webseiten stehen die Deutschen wesentlich schlechter dar.
Die zweite Tabelle zeigt die 50 meistbesuchten internationalen Webseiten. Hierbei kristallisiert sich ein ganz anderes Bild heraus. Berücksichtigen wir die Doppelnennungen von google mit unterschiedlichen Domainendungen (google kommt 10. mal vor), und zählen diese nur einmal auf, so kennzeichnen immer noch 15 von 40 unterschiedlichen Webseiten besuchte Links aus.
| Rang | Site | Kennzeichnung besuchter Hyperlinks |
| 1. | google.com | ja |
| 3. | yahoo | ja |
| 5. | live.com | ja |
| 6. | wikipedia | ja |
| 8. | baidu | ja |
| 9. | msn | teilweise |
| 11. | yahoo.co.jp | ja |
| 13. | google.co.in | ja |
| 14. | google.cn | ja |
| 15. | sina.com.cn | ja |
| 16. | google.de | ja |
| 17. | wordpress | ja |
| 19. | microsoft | teilweise |
| 21. | google.co.uk | ja |
| 23. | bing | ja |
| 24. | ebay.com | ja |
| 25. | google.fr | ja |
| 27. | yandex.ru | ja |
| 28. | google.co.jp | ja |
| 30. | google.com.br | ja |
| 31. | flickr | ja |
| 34. | rapidshare.com | ja |
| 35.. | craigslist.org | ja |
| 36. | google.it | ja |
| 39. | google.es | ja |
| 40. | soso.com | ja |
| 43. | imdb.com | ja |
| 47. | bbc.co.uk | teilweise |
| 50. | google.com.mx | ja |
Hierbei kristallisiert sich ein ganz anderes Bild heraus. Zur Recherchezeit waren 2 Seiten offline. Berücksichtigen wir zudem die Doppelnennungen von google (11. mal) und yahoo (2. mal) mit unterschiedlichen Domainendungen, und zählen diese nur einmal auf, so kennzeichnen immer noch 16 von 35 unterschiedlichen Webseiten besuchte Links aus.
Jetzt stellt sich mir die Frage, warum der Unterschied zwischen deutschen und internationalen Seiten so groß ist? Hinken deutsche Seiten den internationalen hinterher? Oder sind deutsche Webseiten ein Vorreiter für diese Tendenz?
Auch nächstes Jahr werden wir wieder überprüfen, ob die Deutschen sich dann (zumindest bei diesem Detail) mehr um Usability bemühen. Es bleibt spannend!
Kommentieren (2 Kommentare)
IA Konferenz Programm als iCal-Kalender
Wie viele andere Teilnehmer freuen wir uns auf die IA-Konferenz hier in Köln, direkt vor unserer Haustür. Und wie viele andere auch stehen wir vor der Qual der Wahl, welche Sessions wir uns ansehen werden. Zwei parallele Tracks machen die Entscheidung in vielen Fällen schwer.
Um das Programm handlich mit uns herum tragen zu können, haben wir alle Termine von Freitag (14.5.) und Samstag (15.5.) in einen Google Kalender eingetragen. So können Nutzer von iPhones, Androiden und anderen mobilen Geräten auch zwischendurch mal eben die nächsten Termine einsehen.
Das beste daran: Der Kalender ist öffentlich.
Ihr könnt über die folgenden Links darauf zugreifen:
- Download im iCal-Format – z.B. zum Import aufs iPhone oder in Outlook
- Ansehen im Browser – dort gibt es auch eine Funktion »Hinzufügen zu Google Calendar«.
Wer Google Calendar in Verbindung mit Android nutzt, muss den Kalender nur zu Google Calendar hinzufügen.
Übrigens: uxzentrisch-Autor Niels Anhalt ist am ersten Konferenztag mit einem Vortrag vertreten. Der Titel: »UX+Agile – Low-Fi trifft Hi-Fi. Neue Chancen für optimierte User Experience.«
Wir freuen uns auf spannende Sessions und regen Austausch!
Bist du blind? – Sehschwächen berücksichtigen
Aktuell arbeiten wir wieder einmal an Projekten, bei denen Barrierearmut bzw. Barrierefreiheit ein tragendes Thema ist. Dazu gehört auch die Berücksichtigung von Sehschwächen, wie etwa Farbfehlsichtigkeit. Doch wie damit umgehen? Punkte wie ausreichend große Schrift, skalierbares Design für die Nutzer, die trotz Brille alles viel größer und klarer brauchen sind klar zu berücksichtigen.
Aber was kann man für die ca. 8% der erwachsenen männlichen Bevölkerung (Frauen deutlich weniger, die glücklichen) tun, die mit einer Farbfehlsichtigkeit zu kämpfen haben? Den Klassiker »Kontrast verstärken«, der alles in mehr oder weniger heftiges Schwarz-Weiss oder ähnliche (oft unschönes) umwandelt?
Vielleicht kann aber schon im Grunddesign ein paar Dinge berücksichtigen, sodass solch drastische Maßnahmen wie Schwarz-Weiss-Darstellung nur für einen Bruchteil der Farbfehlsichtigen nötig sind. Denn auch Menschen mit einer Farbfehlsichtigkeit, werden trotz allem eine schön gestaltete Website als positiver empfinden. Zumal das Einschalten einer Funktion wie »Kontrast verstärken« durchaus die Botschaft kommuniziert: »Dein Problem war uns nicht wichtig genug, um es grundlegend zu berücksichtigen.«
Ein schönes Tool, um zumindest einen groben Eindruck von (Farb-)Fehlsichtigkeiten zu bekommen ist Chrometric – What you see is not what everyone gets. Eine kleine aber feine und kostenlose Air-App, die wichtige Fehlsichtigkeiten oder Darstellungsprobleme simuliert, wie hier zu sehen:
Glücklicherweise schneidet »uxzentrisch« in den Simulationen ganz brauchbar ab, auch wenn wir die Barrierearmut nicht wirklich in der Diskussion hatten – zumindest nicht jenseits einer allgemein guten Lesbarkeit. Doch vielleicht genügt das ja auch schon?
Und was macht ihr?
Wie berücksichtigt ihr Farbfehlsichtigkeiten bei der Konzeption von Websites? Welche Lösungen habt ihr bisher gefunden und umgesetzt? Wie geht man mit tobenden Grafikdesignern um, deren wunderschönes aber unleserliches Design gerade zerpflückt wurde? Welche anderen Tools in diesem Bereich kennt ihr, die erwähnenswert sind?
Kommentieren (3 Kommentare)
Ein schönes und gut realisiertes Interface-Detail bei maps.ovi.com.
PS: Die langsame Ladezeit ist mein Rechner schuld, der mit Screenr.com ausgelastet war. Und dass man England statt Deutschland sieht beim Zoom aufs Land, liegt daran, dass ich nur einen Teil der sichbaren Karte aufgenommen habe.
Kommentieren