Kategorien
Webdesign

Perfekt präsentiert: Neue Webdesigner Portfolios

Zeit für frische Anregungen. Portfolio-Designs aus aller Welt in der fünften Ausgabe. Wie immer ist das eine nicht ganz einfache Zusammenstellung, schließlich lesen zahlreiche Webdesigner hier. Hier geht es um frische, originelle Ansätze sich selbst oder eine kleine Agentur zu präsentieren. Diese Seiten sind auf ganz unterschiedliche Weise phantasievoll, ideenreich und handwerklich sauber – ohne dabei experimentell oder überdreht zu wirken – oder auf Flash zu setzen. Kurzum, man darf sie Vorbild nennen.

Ein Klick auf einen Screenshot führt zum Original.

Orman Clark
Ein schönes, frisches Beispiel für eine kreative Single-Page Website. So richtig entfalten kann sie sich erst wenn man herunter scrollt.

Screenshot

Colin Lewis
Auch dies ist ein „einseitiger“ Auftritt. Hier allerdings geht es in die Waagerechte.

Screenshot

CTRL + N
Das gilt auch für diesen kreativen Überschuss aus Argentinien. Immer schön rechts halten. Nur Mutige verwenden den Streifenhintergrund.

Screenshot

Kev Adamson
Und wieder ein Versuch mit Handschrift und schrägem Font Persönlichkeit zu erzeugen. Und es gelingt.

Screenshot

Brent Lafreniere
Fast Schwarz – und dann doch ein bisschen Farbe.

Screenshot

Bernardo Améndolla
Ein männliches Design. Die geballte Faust wirkt ebenso sowjetisch wie der eingesetzte Font. Doch kyrillisch ist das nicht. Die Buchstaben wirken zwar fremd, sie bleiben aber lesbar.

Screenshot

Dave Brookes
setzt auf die Silhouette.

Screenshot

Simone Maranzana
Edeldesign aus Italien.

Screenshot

Justin Delabar
steht mit seinem Konterfei für seine Arbeit ein.

Screenshot

Niki Jeske

Screenshot

Blackmoon
Alles was man wissen muss auf einen Blick.

Screenshot

Tim van Damme
So kann man es auch machen, die Karteikarte hält mehrere Seiten bereit und fungiert als eine Art Behälter für die verschiedenen Projekte und Aktivitäten des Webworkers.

Screenshot

Kategorien
Webdesign

Designbeobachtungen / 13

Überall gibt es etwas zu entdecken – auch und gerade im Webdesign. Man muss nur genau hinsehen. Genau das passiert in dieser Rubrik. Wir haben den Blick auf Details, auf neue oder ungewöhnliche Lösungen und Einfälle. Hier kommt die dreizehnte Ausgabe mit Trends und Ideen für Webseiten. Sämtliche Bilder können und sollen angeklickt werden.

Der USB-Stecker ist ein schöner Einfall der Microsoft’schen Designer, um eine Seite im Fußbereich abzuschließen.

Screenshot

Eine andere Art eine Seite nach unten hin zu beenden finden wir bei Story Pixel. Das in gewisser Weise „unterirdische“ Design löst sich in herbstlicher Weise in Blüten und Blätter auf.

Screenshot

Und noch ein Footer. Kris Colvin setzt auf Kunst, die er wie eine befreite Tapete inszeniert.

Screenshot

Eine Touristik-Site mit kreativem Menü. Die Idee besteht darin, jeden Menüpunkt individuell zu gestalten.

Screenshot

Ein weiteres Menü. Das Besondere hier, die veränderte und besonders auffällige Optik im ausgewählten Zustand.

Screenshot

Screenshot

Ein wenig Flash im Shop schadet nicht. Die drei Menüelemente dieser märchenhaften Verkaufsfläche sind sanft animiert.

Screenshot

Sprach- und Länderauswahl ist in der Regel im Kopfbereich zu finden. Aber wenn es wichtig ist, warum nicht auch an die Seite – in die Nähe des Inhalts…

Screenshot

Schauen Sie einmal wie dieses Geschäft sein ganz und gar reales Schaufenster in den Webauftritt übernommen hat. Das Mosaik macht es möglich.

Screenshot

Wo wir schon beim Kuchen sind, gucken Sie doch mal bei Urban Pie herein. Sympathisches Design mit persönlicher Note.

Screenshot

Auch im handschriftlichen Stil, der Witz liegt aber woanders: die Eingabefelder des Newsletterformular wurden kurzerhand abgeschnitten. Gibt man Text ein, läuft er über den Rand hinaus..

Screenshot

Ein Formular für Coder, „Normalkunden“ würde man so etwas wohl nicht vorsetzen. Danke für den Hinweis an Captain Obvious – auch wenn es schon etwas her ist.

Screenshot

Kategorien
Webdesign

Domainhacks – Kreative Domainnamen

Ein Domainhack ist Ihnen sicher schon einmal begegnet. Gemeint sind ungewöhnlich zusammengesetzte Domainnamen, wobei die Bestandteile erst zusammen den eigentlichen Firmen- oder Websitenamen ergeben. Ein bekanntes Beispiel war der Bookmark-Dienst del.icio.us, der heute im Besitz von Yahoo unter der Standarddomain delicious.com läuft. In der Regel kommen seltene oder exotische TLDs zum Einsatz, mitunter in Kombination mit einem Verzeichnisnamen oder als Third-Level-Domain (Subdomain).

Weitere Beispiele sind:

  • insure.me (versicher‘ mich)
  • monetize.it (mach‘ es zu Geld)
  • will.i.am (William – ein Name)
  • chronolo.gy (Chronologie)
  • autom.at.com (Automat)
  • chi.mp (Schimpanse)

WordPress-Chef Matt Mullenweg sicherte sich die ebenso kurze wie sinnfällige Adresse ma.tt für sein Blog – und erhielt viel Aufmerksamkeit.

Schauen wir uns das an einem Beispiel an. Die Domains webgestalter.com oder webgestalter.de bekommen Sie nicht, Anderes ist noch frei (zum Zeitpunkt des Schreibens etwa .net oder .info). Ein Hack kann mehr daraus machen und ist vielleicht eine Anregung wert. In Kombination ergeben sich überraschende Möglichkeiten:

Screenshot

Hier verwendet werden die TLDs er – Eritrea, Slowenien, .es – Spanien, .lt – Litauen, .al – Albanien, .st – São Tomé und Príncipe, .tr – Türkei, .ge – Georgien und .bg – Bulgarien. Die lustige São Tomé und Príncipe wäre beim Registrar Regfish für 70,- Euro pro Jahr zu haben. Schwierigkeiten bekommt man wenn es etwa um Eritrea geht, hier lässt sich nichts einfach mal eben registrieren. Die üblichen Anbieter müssen passen. Dennoch gibt es mitunter eine Fülle von Wortschöpfungen mit einfach zu bekommenden Domains aus Liechtenstein (li), Österreich (.at), Europa (.eu), Belgien (.be), Antigua (.ag) oder Italien (.it) nur um Beispiele zu nennen.

Welche Vorteile bringt ein solcher Domainhack?

Namen dieser Art sind originell und umgehen auf kreative Art und Weise die nach wie vor notorische Domainknappheit. Exotische Endungen können heutzutage in vielen Fällen auf von Deutschland und anderen Länder aus registriert werden. Die Vergaberichtlinien sind nicht selten lockerer als noch vor 5 oder gar 10 Jahren. Dafür kosten die Exoten meist etwas mehr, die Ausgaben halten sich aber in Grenzen. Schließlich spart man auf eine andere Weise, den Domainhack gibt es nämlich nur einmal, normale Domainnamen muss man sich dagegen oft im Dutzend sichern (name + .com + .net + .info + .org etc.) – schon allein damit nicht die Konkurrenz zugreift.

Nachteile

Es kommen nicht nur neue Länder hinzu, es verschwinden auch welche. Wer möchte Garantien für Staaten wie Eritrea oder Montenegro geben? Auch die Rechtslage vor Ort könnte Anlass zur Besorgnis sein. Besondere Vorsicht sollte man bei zusammengesetzten Domainhacks walten lassen. Die engen nämlich stark ein. Wer sich von vornherein auf eine Subdomain oder ein Directory festlegt, kann später nicht mehr erweitern. Domainhacks sind oft schwieriger zu merken und provozieren Fehler beim Eintippen, einfach weil sie komplizierter und ungewohnt sind.

Umwidmungen

Domainendungen werden immer wieder für Zwecke benutzt für die sie gar nicht vorgesehen waren. Darunter finden sich .ag für Aktiengesellschaften, .tv für das Thema Fernsehen, .fm fürs Radio, .tk für die Telekommunikation oder .dj für Discjockeys.

Tools

Eine Reihe von Online Tools machen die Suche nach neuen Namen zu einer spannenden Erfahrung. Sie haben keine Probleme mit deutschsprachigen Begriffen.

Domaintyper

Screenshot

Der Dienst findet, um im Beispiel von oben zu bleiben, diese Möglichkeiten:

  • http://webgestalt.er
  • http://webgesta.lt/er
  • http://webgest.al/ter
  • http://webge.st/alter
  • http://webg.es/talter
  • http://web.ge/stalter
  • http://we.bg/estalter

Domain.nr

Screenshot

Präsentiert sich selbst unter einem Domainhack. Der Dienst findet diese Möglichkeiten:

  • webgestalter.com
  • webgestalter.net
  • webgestalter.org
  • webgestalt.er
  • webgesta.lt/er
  • webgest.al/ter
  • webge.st/alter
  • webg.es/talter
  • web.ge/stalter
  • webgestal.tr
  • w.e.bg/estalter
  • we.bg/estalter

Xona
Urgestein unter den Domainhacking-Tools. Der Dienst präsentiert uns diese Möglichkeiten:

  • http://webgestalt.er/
  • http://webgesta.lt/er/
  • http://webgest.al/ter/
  • http://webge.st/alter/
  • http://webg.es/talter/
  • http://web.ge/stalter/
  • http://we.bg/estalter/
  • http://x.web/gestalter/ (aus dem alternativen Domainsystem)

Artikel zum Thema

  • The Art of Finding a Domain Hack
  • 2000 Common English Words as Domains
Kategorien
Webdesign

Software und Services für eigene Usability-Tests – eine Übersicht

Usability = Wichtig. Das weiß jeder. Wie man benutzbare Websites baut, ist dann aber schon kein allgemeines Wissen mehr. Viele Webschaffende verlassen sich auch ihre Erfahrung und aufs Bauchgefühl. Ob das reicht, sei dahingestellt. Nötig wäre es nicht, denn es gibt eine Fülle unterstützender Werkzeuge und Services. Die müssen nicht zwangsläufig umständlich oder teuer sein – und helfen dann vielleicht doch.

Es lassen sich im Groben drei Verfahren unterscheiden:

  • Dem User werden Aufgaben gestellt, die Ergebnisse werden aufgezeichnet und ausgewertet.
  • Man schaut dem Nutzer beim Surfen zu, die Aktionen werden aufgezeichnet und ausgewertet.
  • Man sammelt direktes Feedback von den Nutzern ein.

Diese Dienste nutzen entweder das so genannte Crowdsourcing, das heißt die Hilfe der User, oder arbeiten auf Basis einer Software. Das eigene Usability-Labor entfällt. Mit einer Ausnahme sind alle Dienste englischsprachig.

fivesecondtest
In fünf Sekunden ist alles vorbei. Der Tester lädt einen Screenshot der zu testenden Website hoch. Und die Probanden erhalten nämliche fünf Sekunden, um Elemente zu benennen, die ihnen bei der Betrachtung in Erinnerung geblieben sind. Den Link zum Test kann man auch weitergeben, zum Beispiel an die Besucher der eigenen Site. Das Ganze gibt es auch als „Klick-Test“. Hier wird nichts benannt, hier klickt der Tester. Der Dienst ist kostenlos.

Screenshot

Open Hallway
will seit Mai 09 ein virtuelles Usability Labor sein. Die Tester besorgt man sich selbst. Die sitzen allerdings nicht vor Ort, sondern am Rechner, und folgen definierten Aufgaben. Der Rechner muss mit Java ausgerüstet sein. Als Video aufgezeichnet werden die Aktionen des Probanden ebenso wie seine Sprache. Ist der Test komplett, erfolgt die Benachrichtigung. Open Hallway kostet zwischen 49,- und 199,- US Dollar pro Monat. Ein kostenloser Testzugang steht bereit.

Screenshot

UserTesting
Für 29,- US Dollar erhält man einen Screencast (Flash Video) eines Users. Der Tester führt verschiedene zuvor definierte Aufgaben durch und kommentiert diese. Man kann ihn anschließend zuhören und Mausbewegungen sowie Eingaben sehen. Ein solcher Test dauert rund 15 Minuten. Dazu gibt es eine schriftliche Zusammenfassung. Diesen Test habe ich schon im Jahr 2007 einmal durchgeführt im Artikel Ein echter Usability-Test für den schmalen Geldbeutel.

Screenshot

Chalkmark
Auch hier wieder: Wohin klickt der User, wenn man ihm eine bestimmte Aufgabe stellt? Die Resultate kommen als Heatmap. Das klappt übrigens auch mit Entwürfen und Zeichnungen. Chalkmark ist kostenlos für bis zu drei Aufgaben.

Screenshot

Wer es probieren möchte: Zuerst gilt es, (im HTML-Format) drei Texte zu verfassen, die im späteren Verlauf an die Probanden ausgesandt werden. Man erhält eine URL zur Weitergabe. Nun gilt es, ein Bild hochzuladen. Hierbei handelt es sich um einen Screenshot der zu testenden Webseite – man kann später zu jedem Task einen weiteren auswählen. Anschließend werden die Aufgaben definiert. Ist das Projekt erst einmal live geschaltet, können keine Änderungen mehr daran vorgenommen werden. Als Ergebnis erhält man eine Heatmap. Wer den Test einmal machen will.

Screenshot

Wer mehr braucht, zahlt 109,- US Dollar für 30 Tage oder 559,- pro Jahr. Siehe auch Treejack IA Testing vom gleichen Anbieter.

Usabilla
gibt es offiziell noch nicht, heißt, man beta-testet noch. Hier werden ebenfalls Screenshot hochgeladen und nach vorgegebener Aufgabenstellung von den Probanden mit Klicks versehen, die sich hoffentlich aufschlussreich auswerten lassen. Preise sind noch nicht bekannt.

Screenshot

Loop 11
Auch dieser Dienst befindet sich noch im Beta-Stadium. Wer mag, kann versuchen, eine Einladung zu ergattern. Das Ganze funktioniert wiederum auf Basis eines Screenshots. Im Unterschied etwa zu Usabilla wird hier im nächsten Schritt eine spezielle Gruppe von Testern zusammengestellt. Wer das nicht will oder niemanden kennt, kann mit Zufallspersonen arbeiten. Der eigentliche Test besteht aus konkreten Aufgaben wie „Finde das Impressum“ oder „Benutze die Suchfunktion“. Loop 11 misst Zeiten, Erfolgsraten und Klickpfade. Die Testergebnisse werden zu einem attraktiven Dashboard aufbereitet. Preise stehen noch nicht fest.

Screenshot
Loop 11 Dashboard. Der Screenshot stammt aus der Rezension des SeoAlchemist

Wer wissen will, was die Nutzer tun, der setzt sie vor einen Rechner und schaut zu. Wer professionelle Usability Tests veranstalten möchte, braucht deshalb nicht nur Kameras und lebensechte Probanden, eine Software hilft, die Daten aufzubereiten. Techsmiths Morae bietet sich für rund 1500,- US Dollar dafür an.

Screenshot
Aus dem Morae „Overview“ Video

Please Critique Me
Tolle Sache. Wer Glück hat, dessen Projekt wird ausführlich besprochen – mit allem drum und dran – möglicherweise sogar von einer bekannten Netzpersönlichkeit. Diese Rezensionen sind wiederum kommentierbar, wovon augenscheinlich auch Gebrauch gemacht wird. Die Sache ist komplett kostenlos. Angaben darüber, wer letztlich in den Genuss einer Kritik kommt, werden leider nicht gemacht.

Screenshot

Feedbackarmy
Website URL angeben, Fragen stellen, Anzahl der Tester wählen und das Feedback erwarten (soll um die 3 Stunden dauern). Die Tester werden über Amazons Mechanical Turk eingebunden. 10 Tester kosten 10,- Dollar, 25 kosten 23,- Dollar und 50 Tester sind für 40 Dollar dabei.

Als Beispiel für einen Test wird die folgende Fragestellung gezeigt:

  1. What does this site do?
  2. What aspect of the site confused you?
  3. What would improve this site?
  4. How does it work?

Screenshot

Clickdensity
Spuckt Heat- und Clickmaps aus. Dazu werden die zu beobachtenden Seiten mit einem Javascript-Snippet geimpft. Man sieht, sofern genug Klicks zusammen gekommen sind, wo die Besucher besonders gern geklickt haben oder wo der Mauszeiger sich häufig befand. Man hat die Möglichkeit, einen Datumsbereich auszuwählen. Die Preise bewegen sich zwischen Null für eine einzige Seite und maximal 5000 gezählt Klicks und 300 Euro für beliebige Seiten und bis zu 5 Millionen Klicks.

Screenshot
Clickdensity als Heatmap im Overlay

Crazyegg
ist bereits ein alter Bekannter. Der Dienst ist vergleichbar mit Clickdensity, bietet jedoch mehr Features. Dafür gibt es keine Gratisversion. Die Preise bewegen sich zwischen 9,- US Dollar und 99,-, damit lassen sich dann 100 Seiten überwachen. Zu den Features gehört die Konfettiansicht.

Screenshot

Die verschiedene Farben der jeweiligen Klicks symbolisieren die Herkunft (Referrer) des Besuchers. Außerdem gibt es eine nüchterne tabellarische Ansicht mit Prozentwerten. Wir haben Crazyegg mehrfach beim Smashing Magazine eingesetzt, um Menüleisten zu sortieren.

Vistrac
Vistrac (früher TapeFailure) liefert gewöhnliche Statistiken, Heatmaps, ermittelt die tatsächliche Größe des Browserfensters und misst Mausbewegungen. Besonderes Augenmerk liegt auf Formularen. Wie oft wird vollständig ausgefüllt und wie lange brauchen die User dazu? Aus dem Verhalten der Leute lassen sich entsprechende Schlussfolgerungen ableiten.

Screenshot

Der Preisplan stellt sich von der gratis Testversion bis hin zu 109 US Dollar im Monat auf.

Clixpy
zeichnet auf, was der User macht. Mausbewegungen, Scrolling, Formulareingaben – das Ganze gibt es dann als Flash-Video zurück. Damit Clixpy arbeiten kann, ist auch hier der Einbau von ein wenig Javascript in die zu testenden Seiten notwendig. Clixpy nennt unverständlicherweise (oder ich konnte sie nicht finden) keine Preise. Deshalb hier: Die ersten 10 Sitzungen gibt es gratis bei der Anmeldung, 100 davon kosten 5 US Dollar und für 30 US Dollar bekommt man 1000.

Screenshot

m-pathy
ist ein deutschsprachiges Pendant aus Dresden. Der Testaccount ist 10 Tage lang gültig. Heat-, Movement- und Clickmaps sind nicht im Testaccount zu finden, weil die erlaubte Datenmenge im Testaccount nicht ausreicht. Ein Original-PDF von m-pathy (PDF), das wir von m-pathy erhielten, beschreibt, was man erwarten kann und zeigt auch die interessanten Maps. Der einzige Deutsche Dienst im Feld möchte Preise nach individueller Analyse ermitteln. Wer nur die Mousetracking-Technologienutzen will, zahlt ab 840,- Euro pro Monat (inkl. 5.000 Sessions).

Screenshot
Auswahl der aufgezeichneten Filme im Browser

Userfly
gehört in dieselbe Gewichtsklasse. Es gibt einen Gratisaccount zum Ausprobieren, der für 10 Sitzungen reicht. Wer mehr benötigt, zahlt zwischen 10,- und 200,- (für 10.000) US Dollar.

Screenshot

Clicktale
wie Clixpy werden User-Sessions aufgezeichnet. Interessant sind die Scroll-Heatmaps (unter anderen), die zeigen, in welche Bereiche einer Seite die Nutzer vordringen und wie viele am Ende den Fußbereich erreichen.

Screenshot

Es gibt einen Gratisaccount, der bis zu 400 Pageviews aufzeichnet. Wer mehr benötigt, muss zwischen 99,- und 790,- US Dollar kalkulieren.

Clickheat
schon vorgestellt, erzeugt Heatmaps auf dem eigenen Server. Das spart Geld. PHP und die GD Graphics Library sind die Voraussetzungen dafür.

Screenshot

Feng GUI
ist einfach zu nutzen. Man kann einen Screenshot hochladen. Das System sagt voraus, wohin sich der Blick des Publikums in den ersten 5 Sekunden wenden wird. Das ist keine Kaffeesatzleserei, sondern wird über einen Algorithmus ermittelt. Das gilt, wie beschrieben, für das erste Bild. Wer mehr will, muss bezahlen. Ab 50 US Dollar.

Screenshot
Heatmap generation from attention map

UserVue
Techsmiths Online-Dienst ist derzeit leider nur in den USA und Kanada erhältlich.

Screenshot

Silverback
Den markanten Gorilla haben Sie vielleicht schon einmal gesehen. Silverback ist im Gegensatz zu den hier vorgestellten Services eine Software – und zwar exklusiv für Mac OS X. Was macht die Software? Sie zeichnet Surfsitzungen auf, die im Quicktime-Format gespeichert werden. Man benötigt dazu eine angeschlossene Kamera. Auf diese Weise schaut man auch mit Silverback dem Benutzer beim Surfen zu. Und guckt sich die Filme hinterher in aller Ruhe an. Quicktime liefert logischerweise eine bessere Qualität als die Online Dienste. Wer die Software nach dem 30 Tage-Testzeitraum dauerhaft in seinen Besitz bringen möchte, reicht 49,95 US Dollar rüber. ™

Screenshot
Die Software selbst ist nicht mehr so prächtig wie die oft gelobte Website

Links zum Thema

Kategorien
Webdesign

7 Tipps für mehr RSS-Abonnenten

Auch wenn ein Teil der Feed-Leser unsichtbar bleibt und sich nie auf die Webseiten verirrt um dort die PageViews zu mehreren, RSS-Leser klicken durchaus auch ins Web, etwa um Kommentare zu lesen, selbst welche zu schreiben, Videos anzusehen oder an Umfragen teilzunehmen. Je mehr man auf diese Weise mobilisieren kann, desto besser.

Stichwort Werbung
Unser englischsprachiges Smashing Magazine bringt es inzwischen auf über 130.000 Abonnenten, da lohnt sich sogar der Verkauf von Werbung – auch wenn das Feedvertising bisher noch nicht aus den Kinderschuhen heraus gekommen ist. Das Potenzial ist vorhanden. Je gezielter die Nische ist, desto eher lassen sich Sponsoren ködern, zur Not tut es auch hier Google AdSense.

Smashing Magazines Feed läuft auf einem eigenen Server. Wie haben wir über diese Menge an Abonnenten gewonnen?

Screenshot
Anzeige im RSS-Feed

1. Präsentieren und Platzieren

Hinweise Nummer 1 ist eine Selbstverständlichkeit. Der Feed muss präsentiert werden. Es kommen Icons – manchmal auch Buttons und Illustrationen – zum Einsatz, die für sich bereits auffällig sind und prominent platziert werden. Das heißt weit oben im ohne scrollen sichtbaren Bereich einer Seite.

Screenshot

Der Hinweis sollte auf alle Seiten einer Site erscheinen und kann zusätzlich an geeigneten Stellen erwähnt werden. Zum Beispiel im Impressum, auf den Suchergebnisseiten, im Footer, nahe des Contents, in E-Mail- oder Forum-Signaturen…

2. Zeigen was man hat: Auflage ausweisen

Zahlen helfen dem Interessenten einzuschätzen ob sich ein Feed lohnen kann. Die Logik ist klar, je mehr Leser es schon gibt, desto begehrenswerter erscheint der Feed. Ein Phänomen, das man von Hit- und Ranglisten her kennt. Was andere lesen, hören, essen, kaufen, das kann so schlecht nicht sein. Lassen Sie Zahlen Zahlen sein wenn Ihr Feed erst über wenige Leser verfügt. Und bleiben Sie stets ehrlich.

Screenshot
Mehr Beispiele

3. Tue Gutes und rede drüber

Schreiben Sie doch mal über Ihren Feed. Ein Großteil Ihrer Besucher wird – trotz Icon und verschiedener Hinweise – immer noch keine Vorstellungen von den Vorteilen eines Feeds haben. Andere benötigen einen Anstoß. Den liefert ein kleiner Bericht. Die Sache kann kurz erläutert werden, man schildert warum sich das Feed-Lesen lohnt, zeigt die Feed-URL und kommt auf Reader zu sprechen. Der eine oder andere Seitenbetreiber verlinkt auf die Story sogar in der Nähe des Feed-Icons – mit einem kleinen Fragezeichen etwa.

4. Besucher von Suchmaschinen besonders betreuen

Diese Gäste kennen Ihren Feed wahrscheinlich überhaupt noch nicht. Da man solche Besucher genau erkennen kann lohnt sich eine Spezialbehandlung. Blenden Sie einen Hinweis auf den Feed an geeigneter Stelle ein. Vorteil: Stamm- und Gelegenheitsbesucher werden nicht belästigt. Referrer auslesen, PHP oder etwas ähnlich geeignetes verwenden. Wer ein CMS benutzt, kann sich nach passenden Erweiterungen umtun.

Screenshot
Nachricht des WordPress-Plugins „Greetbox“ an Besucher die via Google kommen

5. Nicht übertreiben – Weniger Feeds, ein Format

Bieten Sie nicht zu viele Feeds gleichzeitig an. Mancher zeigt gleich ein Dutzend Rubriken oder Themenkanäle. Was als Service gedacht ist verwirrt mehr als es nützt – und verbraucht unnötigen Platz. Sie bekommen möglicherweise Schwierigkeiten wenn die Auslage gezählt und angezeigt werden soll. Verschiedene Formate zur Auswahl zu stellen (Atom, RSS, RSS2) ist nicht nötig und ein Überbleibsel aus alten Zeiten. Ein moderner Reader sollte mit jedem aktuellen Format klar kommen. Entscheiden Sie sich für Atom oder RSS2, der Rest gehört in die Tonne. Auf der Website sollte davon nichts zu sehen sein.

6. Browsererkennung

Achten Sie darauf, das ihr Feed sich im Quellcode bemerkbar macht, um das so genannte Auto-Discovery zu ermöglichen. Dann nämlich zeigen Browser in ihrer Adressleiste die Verfügbarkeit des Feeds an.

Screenshot
Der Browser (hier:Flock) hat einen Feed gefunden

Quellcode:

<link rel="alternate" type="application/rss+xml" title="News-Feed" href="rss.xml" />

7. Ganz oder gar nicht: Full-Feeds

Viele Leser haben sich an RSS-Feeds gewöhnt. Sie surfen nicht mehr, sie gehen gezielt auf Einzelseiten. Diese Klientel hasst gekürzte oder verstümmelte Feeds. Sie machen aus dieser Sicht auch gar keinen Sinn. Zum Beitrag durchklicken werden sich nur wenige, die Story dahinter müsste schon exorbitant interessant sein um auf diese Weise punkten zu können. Bieten Sie einen Fullfeed an oder lassen Sie es gleich ganz.

Angst vor Textklau? Das passiert sowieso, auf die eine oder andere Weise. Textklau ist eine Begleiterscheinung des Erfolges. Je weiter Ihre Botschaft dringt, desto wahrscheinlicher taucht sie auch woanders auf. Mit oder ohne Feed.

Kategorien
Webdesign

Perfekt präsentiert: (Web)Designer Portfolios mit Persönlichkeit

Schicke Portfolio-Designs haben wir inzwischen zuhauf gesehen. Diesmal möchte ich Ihre Aufmerksamkeit auf einen bestimmten Aspekt lenken. Die Persönlichkeit eines Künstlers drückt sich in seinem Werk aus. Auch (Web)Designer sind Künstler, wenn auch meist in einem mehr praktischen Sinne. Sofern es gelingt, spiegelt das Werk seinen Schöpfer wieder – mehr oder weniger. Persönlichkeit kann man aber auch direkt zeigen, indem man sich als Person – in Form eines Fotos oder einer Zeichnung, zusammen mit dem Design zeigt. Unmittelbarer geht es kaum. Die Beispiele zeigen, wie es gemacht wird. Ein Klick auf einen Screenshot führt zum Original.

Guillaume Pacheco (Frankreich)

Screenshot

Gareth Dickey (USA)

Screenshot

Elodie Bailly (Frankreich)

Screenshot

Loïc Dupasquier (Schweiz)

Screenshot

Cristiana Bardeanu (USA)

Screenshot

Wong Yeng Kit (USA)

Screenshot

Maru Velasquez (USA)

Screenshot

Man muss nicht selbst ins Bild, auch ein Maskottchen kann dafür herhalten.

Robin Palmer (Großbritannien)

Screenshot

Felix Chi (USA)

Screenshot

Oder man kombiniert beides und zeigt sich illustriert:

Ryan O’Rourke (USA)

Screenshot

Jason Reed (USA) Jason weiß, das auch die Unterschrift ein Zeichen von Persönlichkeit ist. ™

Screenshot

Kategorien
Webdesign

Designbeobachtungen / 12

Überall gibt es etwas zu entdecken – auch und gerade im Webdesign. Man muss nur genau hinsehen. Genau das passiert in dieser Rubrik. Hier die achte Ausgabe mit Blick auf Details, auf neue oder ungewöhnliche Lösungen und Einfälle. Hier kommen die Ideen. Sämtliche Bilder können und sollen angeklickt werden.

Wie starten mit dem Riesen-RSS Hinweis einer malayischen Jobbörse. Hauptsache auffallen. Das Maskottchen ist selbstverständlich ebenfalls mit dem Feed verlinkt. Auch der Hinweis auf Facebook ist kaum zu übersehen.

Screenshot

Apropos RSS, sympathisch ist ja das Monster aus dem WebDesigner Notebook. Vielleicht wird mal ein Trend daraus: RSS-Icon + Comicfigur.

Screenshot

Die Seiten mit dem Eichhörnchen. Das Fellknäuel kommt erst zum Vorschein wenn die Seite komplett geladen ist. Die Animation ist subtil, wird aber wahrgenommen. Auch sonst ist eine gute Portion „Liebe“ ins detailreiche Design geflossen.

Screenshot

Animation geht aber auch ganz anders. Dieses Exemplar, ein animierter Kopfbereich, ist ein einfaches Jump&Run Spiel. Nichts könnte mehr vom eigentlich Inhalt ablenken.

Screenshot

Auch die Suchbox vom Multiways fällt etwas aus dem Rahmen.

Screenshot

Und wo wir schon dabei sind: dieses Exemplar klappt sich erst auf. Das könnte ein Risiko darstellen, schließlich kann die eigentliche Box nicht auf die Schnelle gefunden werden, und der User als solcher per se gilt als klickfaul.

Screenshot

Der Aufklapptrick ist so neu nun auch nicht. Es kommt drauf an was man damit anstellt. Joren Rapini setzt auf eine deutliche Aufforderung zum Kontakt…

Screenshot

…klickt man drauf, erhält man ohne Umschweife ein illustriertes Formular, jQuery macht das möglich. Die Anleitung dafür liefert Joren gleich mit.

Screenshot

Portfolio-Seiten und Dienstleister müssen Persönlichkeit zeigen um an Aufträge zu kommen. Andrew Reff kennt keine Berührungsängste. Sein Konterfei ist Teil des Logos geworden.

Screenshot

Osvaldas Valutis zeigt in seinem Portfolio die Kontaktdaten auf originelle Weise her.

Screenshot

Produkte gilt es wohlfeil darzustellen will man sie verkaufen. Dieser Shop probiert es mit einem Rahmen nach Art eines Entwurfs.

Screenshot

Das gleiche Prinzip nutzt Naihna Redhu. Der Rahmen zeigt Arbeitsproben aus dem Portfolio.

Hintergrundfarben sind ein hübsches Stilmittel, das wirkungsvoll eingesetzt werden kann, wenn es um Text geht. Ideal auch für Überschriften oder hervorgehobene Bereiche. Der starke Kontrast ist ein echter Hingucker. Ich habe 6 Beispiele herausgesucht.

ab + c

Screenshot

I Like to Design

Screenshot

Reinvigorate

Screenshot

Sitening

Screenshot

Pixelspreader

Screenshot

Softmade

Screenshot

Seiten, die man gesehen haben sollte…

Webdesignersite – Der Schwede Eric Johansson fährt durch die Seite spazieren.

Screenshot

Kategorien
Webdesign

Newsletterdesign im eCommerce – eine (kleine) Bestandsaufnahme

Sie erinnern sich? Für Dr. Web PLUS habe ich Ende Mai 50 Newsletter abonniert und den Anmeldeprozess untersucht. Wie einfach ist es, einen Newsletter zu abonnieren? Über drei Wochen sind seitdem vergangen. Zeit, sich die zugeschickte Post in Bezug auf Design und Ausstattung anzusehen.

50 Anmeldungen ergeben nach drei Wochen keinesfalls Newsletter von 50 Absendern. Letztlich sind Newsletter nur von 29 Absendern eingegangen. Man fragt sich, warum mehr als ein Drittel der Anbieter die Chance ungenutzt verstreichen ließ – den eigenen Newsletter aber immer prominent auf der Startseite annoncierte. Eine Frequenz von 4 Wochen oder länger, falls das der Fall sein sollte, ist kaum sinnvoll. Die Abonnenten werden den Anbieter längst vergessen haben und sich eher über vermeintlichen Spam ärgern, denn über frische Angebote freuen.

Die höchste Aussendefrequenz erlaubten sich Tschibo und shoes.com mit jeweils 9 Newslettern in 3 Wochen. Die Esprit News erreichen den Posteingang immerhin noch 8 mal.

HTML oder ASCII

Was glauben Sie, wie viele der 29 Online-Händler auf HTML setzen? Es sind alle. 100% machen das, gleichwohl diese kleine Untersuchung nicht für die Newsletter insgesamt sprechen kann. Sie kann lediglich einen Eindruck vermitteln. Selbstverständlich wird der reine ASCII Text auch mitgeschickt (Stichwort MIME = Multipurpose Internet Mail Extensions). Allerdings ist nie ganz sicher, was das E-Mail-Programm anzeigt.

Screenshot
Sieht gut aus, besteht aber ausschließlich aus Grafiken. Wenn man Pech hat, sieht man fast nichts.

Newsletter-Design ist kein Webdesign

Es ist bekannt, Mailclients besitzen im Vergleich zu Browsern nur sehr eingeschränkte Fähigkeiten, die Unterschiede zwischen den Programmen und Versionen sind groß. Man geht deshalb auf Nummer sicher und setzt auf ansonsten tabuisierte Tabellen, altmodische Font-Tags und jede Menge Grafiken.

Angesehen habe ich die Newsletter im E-Mailprogramm Thunderbird. Dieses zeigt wohl per Voreinstellung nie die ASCII-Versionen, lädt aber auch keine Bilder. 22 mal wurde ich gefragt, ob ich Grafiken laden möchte, sieben mal ging das automatisch vonstatten (Baur, Apple, Görtz, I’m Walking, Little Twig, Saddleback, Williams Sonoma). Das sieht zwar schicker aus – die HTML-Post ist im ASCII-Format weidlich unansehnlich – allerdings sprechen Sicherheitserwägungen gegen diese Praxis. Am schlechtesten schneiden diejenigen Newsletter ab, die lediglich Grafiken verschicken, hier sieht man unter Umständen erst einmal gar nichts.

Screenshot
Sieht ausnahmsweise auch ohne den Aufruf der Grafiken noch passabel aus: der Newsletter von I love Jeans.

Screenshot
Dieses Bild ergibt sich mit geladenen Grafiken

Weitere Details

Die Newsletter bestehen praktisch aus nichts anderem als Werbung. Das ist wahrscheinlich so gewünscht und wird auch erwartet. Informationen, auch das könnte ein Newsletter leisten, finden sich weniger häufig. Niemand nummeriert seinen eCommerce-Newsletter, wie das zum Beispiel die Verwender von Nachrichten tun, oder benennt einzelne Ausgaben. Dementsprechend verfügt keiner der Newsletter über ein Inhaltsverzeichnis, bestenfalls zu sehen eine Art Scheinnavigation, die aber nie der Bewegung innerhalb des Newsletter dient (alle sind HTML, die meisten eher kurz), sondern stets auf Webseiten verweisen. Entsprechend ist dann die Aufmachung.

Screenshot
Karstadt im Newsletter

Screenshot
Karstadt im WWW

Eine Selbstverständlichkeit ist der „Unsubscribe-Link“ für alle, die einen bestellten Newsletter wieder los werden möchten. Er war in allen 29 Publikationen enthalten und fand sich stets im Fußbereich. Niemand traute sich, hier zu tricksen.

Die Herausgeber wissen um die Problematik der Darstellung. Rund die Hälfte bot deshalb eine Alternativversion im Web an. Dieser Hinweis war jedesmal da zu finden, wo er auch hingehört, nämlich in den Kopfbereich. In einem Fall wurde im Fußbereich auf eine Druckversion im PDF-Format verwiesen. Auch keine schlechte Idee.

Screenshot
Lidl-Letter mit Hinweisen und Scheinnavigation

Wer Newsletter verschickt, leidet unter Spamfiltern, einige Versender weisen deshalb im Kopfbereich auf das Whitelisting hin und wollen ins Adressbuch eingetragen werden.

Die Größe der Publikationen lag zwischen 6 und 139KB (Baur), von Thinkfree kam der kleineste. Allerdings ist zu berücksichtigen, dass die Letter inhaltlich unterschiedlich lang ausfallen. ™

Kategorien
Design UI/UX

Moodboards – das Design vor dem Design

Ein Moodboard kann zeitraubende Entwürfe und damit Geld sparen helfen. Es handelt sich um eine Collage, die dem eigentlichen Design-Prozess vorausgeht. Hier geht es darum, Stimmungen und Ideen zu sammeln, die für eine bestimmte Aufgabe in Frage kommen. Die Collage kann aus Ausschnitten, Ausrissen und Fotos bestehen und zum Beispiel auf eine Pappe geklebt werden. Auch geeignet sind Papier- (Flipchart) oder Korktafeln (Pinwand). Sie kann auch virtuell am Rechner entstehen.

Eine besondere Software braucht man dazu nicht, jedes Grafikprogramm genügt. Sie sollten in diesem Fall aber einen Farbdrucker ihr Eigen nennen und ihrem Kunden, beziehungsweise dessen Repräsentanten Ausdrucke an die Hand geben. Kunden mögen das und freuen sich über etwas, das man in die Hand und mit ins Büro nehmen kann.

Moodboards können für ganz verschiedene Aufgaben eingesetzt werden, etwa wenn es um die Einrichtung von Räumen geht, in der Mode oder eben im Webdesign. Wie das aussehen kann? Eine Bildersuche im Web oder bei Flickr spuckt jede Menge Beispiele aus.

Screenshot
Leo Chen: Moodboard für Yahoo

Hier geht es um Farben, um Designelemente, typografische Vorlieben, Hintergrundmuster, Illustrationen. In welche Richtung soll es gehen, welcher Stil wird bevorzugt? Das Moodboard wandelt abstrakte Begriffe in etwas Greifbares un. Das ist prima, wenn es darum geht, einem Kunden erste Vorschläge zu machen. Und besser als zuviel zu erzählen. Nicht selten weiß der Kunde ja selbst noch nicht, was er will, hat noch keine Vorstellung vor dem inneren Auge – wer kann es ihm verdenken…

Screenshot
Erica Edwards: Moodboard

In diesem frühen Stadium wird nichts designed oder ge-photoshopped, was letztlich Zeit, Geld und Nerven spart. Supergenaue Entwürfe, Webdesigner sind nicht selten Perfektionisten, braucht es nicht. Die Collage ist schnell zusammengeboßelt. Ihr Charme entsteht gerade durch den dahin geworfenen Charakter. Es können auch Design-Elemente und für das neue Projekt potenziell interessante Details anderer Webseiten einkopiert werden. Schließlich will man sich hier erst inspirieren lassen.


Video (Englisch): Creating a Mood Board

Es ist sinnvoll, mehrere Tafeln zusammenzustellen und beim Treffen vorzuzeigen. Farben und Stimmungen spielen, wie bereits erwähnt, eine besondere Rolle. Der Kunde kann sich spontan für eine Richtung entscheiden, was ihm wahrscheinlich sogar leicht fallen wird.

Auch für Projekte in eigener Sache kann man die Technik einsetzen, beispielsweise wenn man noch nicht sicher ist, wohin die Reise design-technisch überhaupt gehen soll.

Screenshot
Flickr Foto (CC)

Material zum Thema im Web

Mitmachen

Schon einmal für Kunden oder eigene Zwecke Moodboards erstellt? Zeigen Sie Ihr Werk der Designwelt. Senden Sie Screenshots oder Links an hallo(at)spamschutzbitteentfernendrweb.de – Das Dr. Web Magazin erstellt eine Galerie. ™

Kategorien
E-Business E-Commerce

Perfekt präsentiert: Kreative Online Shops – VOL 3

Keine Shops wie an jeder Ecke, sondern solche die kreatives Potenzial ins Spiel bringen. Das taugt nicht immer zum praktischen Einsatz im Alltag und muss auch nicht zwingend erfolgreich sein. Aber Spaß machen darf es und die eine oder andere Überraschung bieten. Weitere 11 Shops, 11 ganz unterschiedliche Ansätze, die man gesehen haben sollte.

Hier können Ideen abgeholt werden. Kreative Designer gewinnen auch drögen Einkaufswelten etwas ab. Das ist nicht anders als im richtigen Leben.

Alle Abbildungen sind verlinkt

Throwboy (USA) Handgenähte Kissen. Verwendet, was gar nicht selten ist, eine florales Hintergrundmotiv.

Screenshot

Grana & Mau (Kanda) Kinderbekleidung. heimelige Atmosphäre, nur der Einsatz des Fonts Comic Sans auf den Produktseiten wirkt etwas unprofessionell.

Screenshot

Kristas Creations (USA) Buchstabenfotos. Die völlig unterschiedlich gestalteten Buchstaben zieht man nach Wunsch auf die freie Fläche darunter. Heraus kommt zum Beispiel ein Name. So etwas ist als Geschek gedacht.

Screenshot

All you need Boutique (USA) Kinderbekleidung. Ein fantasievolles Geschäft. Die Designer haben Shops in diesem Stil schon des Öfteren gebaut. Portfolio.

Screenshot

Stix & Stones (Australien) Andenken an die Geburt.

Screenshot

CuCuu (Großbritannien) Accessoires. Hier stehen die Produkte im Vordergrund, was leicht fällt aufgrund der Buntheit. Das Seitendesign hingegen ist stark zurückgenommen.

Screenshot

Uppercase (Kanada) Bücher und Poster. Es geht auch anders, dieser Shop gönnt sich eine Menge Weißraum und wirkt dadurch edel und ruhig. Ein ganz anderes Bild als es die überfrachteten Shops der Branchengrößen vermitteln.

Screenshot

Bento & Co. (Kanada) Haushaltsgegenstände. Stilwechsel ins Minimale. Zu sehen ist eine ungewohnte vierspaltige Präsentation auf den Produktseiten.

Screenshot

General Robots (Deutschland) Spielzeug. Retrolook, der Trend zum Hintergrundbild ist ungebrochen.

Screenshot

Mikatani (Frankreich) Accessoires.

Screenshot

Soup Studios (USA) Töpferware. Tolle Menüleiste, die sich auf der gegenüber liegenden Seite im Design fortsetzt.

Screenshot

Kategorien
E-Business E-Commerce

Usability: Wie einfach ist es, einen Newsletter zu abonnieren?

Newsletter spielen im eCommerce nach wie vor eine bedeutende Rolle. Rund 50 Newsletter habe ich für diesen Artikel bei Online-Shops bestellt. Nur 40% davon arbeiteten mit dem so genannten Double Opt-in-Verfahren, bei dem man nach der Anmeldung eine E-Mail mit einem Link bekommt. Dieser Link muss angeklickt werden, damit die Bestellung wirksam wird. Das Verfahren schützt Versender und Empfänger vor Falschanmeldungen, Doubletten und ungültigen Adressen.

Das Bestellen eines Newsletters sollte keine große Sache sein. Zumindest die Vorgehensweise dürfte allerorts ähnlich ausfallen. Auf das Vorhandensein des Newsletters wird aufmerksam gemacht und dem Kunden das Abonnement möglichst einfach gemacht. Aber ganz so funktioniert es in der Praxis eben doch nicht. Die Shops machen es ihren Kunden nicht selten unnötig schwer.

Die Erfolgsmeldung auf der Website

Nach dem Abschicken erwartet der Besucher eine Bestätigung, dass der Prozess erfolgreich war. Im Normalfall passiert das auch, jedoch nicht immer. Doppel- und Dreifachbestellung sind die zwangsläufige Folge.

Screenshot
Dieser Anbieter verzichtet auf jede Bestellbestätigung

Heikel kann es werden, wenn AJAX zum Einsatz kommt. Nach dem Absender erscheint keine neue Seite, sondern es wird ein Hinweis eingeblendet. Ist der zu unscheinbar, kann der Besucher ihn übersehen; wird er sonstwo gezeigt, ist das noch wahrscheinlicher. Das passiert etwa bei Lidl. Die Bestätigung wird als grüner Balken ein gutes Stück oberhalb des Formulars eingeblendet und verschwindet nach einigen Sekunden wieder. War der Besteller gerade abgelenkt, muss er an einen Misserfolg glauben.

Screenshot

Ein weiterer Hinweis: Auf das Öffnen neuer Fenster oder Reiter sollte der Designer verzichten, denn auch sie können leicht übersehen werden – zumal man nicht unbedingt damit rechnet.

Screenshot
Bestellbestätigung oberhalb der Box

Screenshot
Das Versandhaus Quelle gibt als einer von wenigen schon vor der Bestellung des Newsletter den Blick auf ein kleines Archiv frei

Die Erfolgsmeldung per E-Mail

Die Anmeldebestätigungen sind durchweg simpel gestaltet. Oft handelt es sich lediglich um Systemmeldung der Versende-Software im ASCII-Format, bar jeder Gestaltung, ohne ein freundliches Wort. Den Anbietern sollte klar sein, dass nicht nur Profis ihre Newletter lesen, ihnen ist nicht immer geläufig, dass ein Abonnement bestätigt werden muss. Der entsprechende Hinweis sollte deutlich herausgearbeitet werden.

Screenshot
Abo-Bestätigung per E-Mail von shoes.com, das gestaltete HTML-Format ist eine Seltenheit.

Aber auch umgekehrt kann es hier zu einem Problem kommen. Der erfahrene Empfänger klickt, ohne groß hinzusehen, auf den unsubscribe-Link, weil er ihn für den Link zur Double Opt-In-Bestätigung hält. Die Gestaltung ist hier nicht einheitlich. Die Abbestellmöglichkeit ist selbstverständlich wichtig und darf nicht verschwiegen werden, man sollte sie aber nicht zentral in der ersten Nachricht präsentieren, besser in einer Fußzeile.

Pflichtfelder

Je weniger man machen muss, desto besser. Mancher Shopbetreiber wünscht sich allerdings mehr Daten vom Leser. Schlecht beraten ist, wer diese Daten erheben will, bevor der Newsletter bestellt werden kann. Die Leserschaft dürfte sich so in Grenzen halten.

Einen ganz schönen Schrecken jagt man bei Baur dem Lesewilligen ein. Man sieht sich einem wahren Formularmonster gegenüber.

Screenshot

Gut sind die zusätzliche Auswahlmöglichkeiten, das Format des Newsletters betreffend, sogar an eine sichere Datenübertragung hat man gedacht – das machen nicht viele. Das Formular ist aber viel zu groß, auch wenn es nur ein einziges Pflichtfeld gibt. Der Nutzer wird abgeschreckt und verzichtet auf das Abo.

Besser, man geht umgekehrt vor, Karstadt beispielsweise macht das so. Nach dem Bestellen über die Minimalbox

Screenshot

erscheint die Erfolgsmeldung und es können weitere Daten eingegeben werden. Man kann, aber man muss das nicht tun. Es wird klar kommuniziert.

Screenshot

Anderswo wird getrickst. Dieser Shop zum Beispiel verfährt ebenso wie Karstadt. Denkt man…

Screenshot

Der Submitbutton ist allerdings keiner, denn eine Newsletter-Bestellung wird nicht ausgelöst. Man sieht sich einem zweiten Formular ausgesetzt und fühlt sich möglicherweise genötigt.

Screenshot

Dasselbe passiert im Online-Schuhgeschäft der Firma Görtz:

Screenshot
Vor den Erfolg haben die Götter den Schweiß gesetzt. Hinter diesem Formular wartet ein zweites.

Recht unklar geht es bei QVC zu. Pflichtfelder sind nicht markiert. Die Standardmethode mit den Sternchen war den Designern augenscheinlich nicht bekannt. Aus dem Hinweis beim Geburtsdatum „freiwillig“ lässt sich vermuten, dass man es ansonsten wohl mit Pflichtfeldern zu tun hat.

Screenshot

Und sollte man sich bei Elegance wundern, warum so viele Doktoren zur Kundschaft gehören – die Anrede ist eben kein Pflichtfeld, der Defaultwert ist unsinnig.

Screenshot

Das man es auch mit Pflichtfeldern sehr wohl übertreiben kann, zeigt man bei Grooming Lounge. Satte sieben Zwangsangaben sind nicht von dieser Welt.

Screenshot

Irritierende Signale

Man muss sich wundern, was einem teilweise so alles vorgesehen wird. Hinter diesen Hinweis

Screenshot

verbirgt sich nicht etwa ein Newsletter, nein, ein schnödes Kontaktformular wartet auf Freitext-Eingaben.

Auf Minimaltechnik setzten die Schweizer von Twinkle. Wer hier klickt,

Screenshot

bei dem öffnet sich das E-Mail-Programm, denn hinter dem Klick wartet kein Formular, es handelt sich nur um einen Mailto-Link.

Kein designerisches Glanzstück ist die Bestellbox von Tschibo, der Submitbutton ist einfach viel zu klein.

Screenshot

Vorschriften gibt es dafür nicht, aber Erfahrungen. Wer als einziger den Submit-Button nach links verlegen muss, darf sich nicht wundern, wenn das den Besucher durcheinander bringt.

Screenshot

Fazit

Viele Anbieter machen den Prozess der Newsletter-Bestellung unnötig kompliziert. Dabei gilt: je einfacher man es dem Nutzer macht, desto mehr Leser hat der Newsletter später. Tunlichst sollte vermieden werden, was dem Besucher Überlegungen oder Entscheidungen abverlangt. ™

Screenshot
Schöne Bestellbox: mehr muss gar nicht sein…

Kategorien
Webdesign

Perfekt präsentiert: Agenturen und Webdesigner – Minimalisten – Teil 2

Die Website eines Webdesigners soll sein Können sichtbar machen. Aber ein Webdesigner ist nicht unbedingt auch ein Grafikdesigner. Ein minimalistischer, meist typografischer Ansatz wirkt ausgewogen, ruhig und überaus sachlich, manchmal aber auch streng.

Wodurch zeichnet sich minimalistisches Webdesign aus?

  • Es verwendet wenige Elemente
  • Es nutzt viel Weißraum (leere Flächen)
  • Typographie ist wichtig
  • Farben werden zurückhaltend eingesetzt

Die meisten Minimal-Designs nutzen einen weißen oder rauchgrauen Hintergrund. Aber auch Dark-Designs kommen vor. Dann wird schwarz bevorzugt.

Das Weblog der Designer von Squarespace (USA)

Screenshot

Chama (USA) – Der Auftritt der Agentur ändert sich beim herunterscrollen und nimmt einen anderen Stil an.

Screenshot

Rik Catlow (USA)

Screenshot

Erratic Wisdom (USA)

Screenshot

Matt Bango (USA)

Screenshot

Shiftpix (USA)

Screenshot

Squarefour (USA)

Screenshot

Crowley Webb & Associates (USA) – Minimalismus ist auch mit Flash ein Thema. Genutzt werden typographische Möglichkeiten und Animationen.

Screenshot

Edenspiekermann (Holland) – Reduziert trotz Hintergrundmotiv.

Screenshot

Futon Media (USA)

Screenshot

Waila Skinner (USA) Minimal trotz des zentralen Flashfilms, der Arbeitsproben zeigt.

Screenshot

ReinH (USA) – Weniger geht kaum. Ausschließlich Layout und Typographie bestimmen den Auftritt. Farbe und Grafik kommen nicht vor, abgesehen von einem dezenten Hintergrundbild. ™

Screenshot

Kategorien
E-Business E-Commerce

Die Online Shop-Studie – Teil 2

Nach der Webdesignerseiten-Studie von vor knapp einem Jahr folgt hier der zweite Streich. Diesmal an der Reihe: Online Shops. Wir wollten wissen wie die Shops dieser Tage ausgestattet sind und welche Features sie nutzen.

Die 50 Shops der Testreihe stammen aus einer Google-Suche nach deutschsprachigen Shops, den beiden Artikeln mit Topdesign-Shops aus der Reihe „Designideen“ und neuen Einträgen bei der Galerie Cart Craze.

Repräsentativ ist das alles wiederum nicht. Nicht alle Verkaufsstellen in Netz können über einen Kamm geschoren werden. Wer Stützstrümpfe für Senioren feilbietet, muss andere Prioritäten setzen als der hippe T-Shirt Store. Hier geht es um allgemeine Aussagen. Um Dinge, die man finden und zählen kann. In Teil 1 interessierte uns die Ausstattung der Shops. Nun im zweiten Teil geht es um Aussagen zu Usability und Design und wir beschäftigen uns mit dem Kunden.

Verfügt ein Shop über mehr als ein paar Dutzend Produkte, braucht er eine Suchfunktion. Besucher erwarten das. Wo wird die Suchbox platziert? Nach wie vor gilt die rechte, obere Seite als Standard, 46% der untersuchten Shops richteten sich danach. Mit immerhin 20% war die linke, obere Seite auch nicht eben unbeliebt. 6% setzen die Suchfunktion oben in die Mitte, 4% bevorzugten die ungewöhnliche Position in der Mitte der linken Seite.

Screenshot
Mittige Sucbox bei The Ultimate Green Store

Und die Navigation, was bevorzugen Online Shops? Fast jeder zweite verwendet eine horizontale Menüleiste im Kopfbereich der Seite. 24% davon waren Aufklappmenüs.

Screenshot
Klappnavi bei Baur. Den dicken Rahmen gibt es in verschiedenen Farben

34% der Shops kannten ein Menü auf der linken Seite. Doppelte Navigationen waren dabei keine Seltenheit. In 2 Fällen fanden wir die Navigation rechts.

Screenshot
Seltenheit: ein illustriertes Menü auf der rechte Seite bei Equip your Trip

Hintergrundbilder sind modern, deshalb verwundert es nicht, dass gleich 38% darauf setzen. Die Auswahl der Motive ist groß.

Screenshot
Durchaus zeitgemäß: der dezente Streifenhintergrund

Screenshot
Oder Blumen und Pastelltöne

Flash verwenden 28% der hier untersuchten Websites. Zunehmend werden Galerien auf Basis von Javascript oder AJAX eingesetzt, besonders Karussell-Navigationen.

Kommen wir zum Kundendienst. Wie viele Shops setzen im Zeitalter des Internets auf die gute alte Telefonnummer? Wir haben 34% gefunden. Hier wird die Telefonnummer aktiv kommuniziert und auf der Startseite auch gezeigt. Davon unberührt sind Kontaktseiten oder das Impressum.

Screenshot

Gute Idee: hier ist die Telefonnummer Teil der Navigation

Screenshot
Nicht zu übersehen weil über dem Logo

Screenshot
Telefonhinweis in der Menüleiste

Gelegentlich kann die Kommunikation auch live und direkt erfolgen. 10% unserer Shops verfuhren so. Angeboten wird ein Chat mit einem Kundenberater. So kann der Interessent, ohne viel Aufhebens machen zu müssen, seine Fragen stellen oder Probleme schildern. Es verlangt aber auch Mitarbeiter, die zur Verfügung stehen.

Screenshot

Screenshot

Mit den Portokosten halten es die Shops ganz unterschiedlich. 30%, so fanden wir, sagen frei heraus, wie die Dinge stehen. Das macht sich natürlich dann am besten, wenn man portofrei oder für eine günstige Pauschale liefert.

Screenshot

Screenshot

Wenn es gilt, das Vertrauen des Interessenten zu gewinnen, ihn zum Kunden zu machen, dann kommen Siegel ins Spiel. Ihre Vielfalt ist durchaus bemerkenswert. Man bekommt sie vom TÜV, von Vereinen sowie SSL-Zertifikate von Händlern. Wirkliche Aussagekraft haben sie nicht immer, trotzdem setzen 36% der Shops auf sie. Einige Beispiele:

ScreenshotScreenshotScreenshot Screenshot Screenshot ScreenshotScreenshot Screenshot

Ähnlich verhält es sich mit Auszeichnungen. Awards mit denen man seinen virtuelles Geschäft verzieren und loben kann. 10% machten das. Anbieter „Neckermann“ hat sich für seine Trophäen sogar eine eigene Seite eingerichtet. ™

ScreenshotScreenshot

Weitere Dr. Web Artikel zum Thema

Kategorien
Webdesign

Uhren für die Website

Eigentlich brauchte es sie ja gar nicht zu geben, wer einen Computer benutzt, hat schließlich immer einen Zeitanzeiger in der Nähe. Trotzdem erfreuen sich Uhren auf Websites nach wie vor einiger Beliebtheit. Es gibt sie in enormer Vielfalt, immer ist alles Flash. Will man die Filme nicht selbst hosten, lassen sie sich in Form eines Widgets mit Hilfe eines Javascript-Snippets einbetten.

Clock Widgets
Der Service bietet über 100 verschiedene Uhren. Zu sehen ist unterhalb der Uhr ein Link in kleiner Schrift.

Screenshots

Clocklink
Großes Angebot aus 11 Themenbereichen. Darunter auch freigestellte Uhren, Digitaluhren und zwei Uhren mit schwarzem Hintergrund. Zeitzone und Größe können teils sogar ausgewählt werden. Der Werbelink ist hier erst zu sehen, wenn der Surfer die Uhr mit der Maus berührt.

Screenshots

Csalim
Zeigt derzeit 149 Uhren, einige davon entsetzlicherweise auch mit Geräuschen. Die Uhren kommen ohne sichtbare Werbung aus.

Screenshots

Einen Dienstleister braucht man nicht, um an eine eigene Website-Uhr zu kommen. Die freundlichen Dienste ersparen lediglich die Bastelei. Fertige Flash-Filme hat zum Beispiel Ed Mullen zusammengetragen. Mehrere Dutzend, darunter auch ungewöhnliche Exemplare, finden sich zum Download und können eigenhändig angepasst werden.

Screenshots

Solche Flash-Filme zum Download gibt es auch bei Willi Küsters. Die Homepagetools wirken auf den ersten Blick ziemlich altbacken. Die Uhren, auf immerhin sechs Seiten, sind aber völlig in Ordnung – man sollte sich also nicht täuschen lassen.

Screenshots

Spring Widgets Clock
Dieses Prachtexemplar kann man auf verschiedene Weise konfigurieren, sogar ein eigenes Hintergrundmotiv wird entgegengenommen. Wer mehr will, kann die Suchfunktion der Site benutzen.

Screenshots

My Tictac
Prachtvolle Uhren in 24 Kategorien. Der Download des Snippets ist hier etwas komplizierter, man muss unter anderem ein CAPTCHA eingeben. Aber Vorsicht: Hier gibt es auch Porno-Uhren!

Screenshots

Uhren gibt es außerdem in vielen weiteren Widget-Sammlungen. Etwa bei Widgipedia, Your Minis oder Widgetbox. Damit sollten dann genug Quellen zur Verfügung stehen.

Screenshots
Bei dieser Uhr aus der Widgetbox kann der Besucher der Website unter verschiedenen Stilen wählen. Ich weiß nicht, warum man das machen sollte, aber es ist möglich. ™

Kategorien
E-Business E-Commerce

Die Online Shop-Studie – Teil 1

Nach der Webdesignerseiten-Studie von vor knapp einem Jahr folgt hier der zweite Streich. Diesmal an der Reihe: Online Shops. Wir wollten wissen, wie die Shops dieser Tage ausgestattet sind und welche Features sie nutzen.

Die 50 Shops der Testreihe stammen aus einer Google-Suche nach deutschsprachigen Shops, den beiden Artikeln mit Topdesign Shops aus der Reihe Designideen und neuen Einträgen bei der Galerie Cart Craze. Der neue Dr. Web Shop, der Hinweis sei erlaubt, war nicht mit von der Partie.

Repräsentativ ist das alles wiederum nicht. Nicht alle Verkaufsstellen in Netz können über einen Kamm geschoren werden. Wer Stützstrümpfe für Senioren feilbietet, muss andere Prioritäten setzen als der hippe T-Shirt Store. Hier geht es um allgemeine Aussagen. Um Dinge, die man finden und zählen kann. In Teil 1 interessiert uns die Ausstattung der Shops. Der spätere Teil 2 wird Aussagen zu Usability und Design machen und sich mit dem Kunden beschäftigen.

Standards spielen in der Welt der Online Shops keine Rolle. Nicht einmal der Mozilla Shop konnte hier punkten. Gerade einmal 10% validierte – sofern man nicht zu strenge Maßstäbe anlegte. Tat man das doch, blieben noch 2 von 50 Shops im grünen Bereich. Den Vogel schießen Unternehmen wie Tschibo ab, deren System „Intershop Enfinity“ peinliche 466 HTML-Fehler für die Startseite auswies.

Screenshot

Rund 20% der untersuchten Shop bieten einen RSS-Feed an. Darunter überraschenderweise auch bekannte Unternehmen aus Deutschland wie Baur oder Lidl. Lidl weist sogar ausdrücklich auf seinen Feed hin.

Screenshot

Lidls RSS-Hinweis

Twitter spielt derzeit keine Rolle im eCommerce. Nur auf 4 Sites konnten entsprechende Hinweise entdeckt werden.

Screenshot

Ein junges Publikum kann man auch mit Twitter ansprechen.

Überhaupt ist die Web 2.0-Welt ein gehöriges Stück entfernt. Web 2.0-Buttons fanden sich auf 16% der Shop-Startseiten.

Screenshot

Buttons bei Blue Tomato. Hier mag das funktionieren. Aber wer möchte schon Freund von Kartstadt sein?

Ganz anders sieht das aus, wenn es um Newsletter geht. Man mag sie für antiquiert halten, Newsletter wurden jedoch noch auf 34% der untersuchten Shops auf der Startseite erwähnt oder mit Hilfe eines Eingabefeldes „Abonnement“ angeboten. Die tatsächliche Zahl dürfte höher liegen, da Newsletter gelegentlich mit der Bestellung verbunden werden.

Screenshot

Wer ernsthaft auf den Newsletter setzt, bietet ihn schon auf der Startseite an. Je direkter man das tut, desto höher ist die Zahl der Leser. Lidl annonciert sogar ein Newsletter-Gewinnspiel auf der Startseite.

Mit einem Newsletter richtet man sich keineswegs an ein Publikum aus Senioren. Cosmic Soda setzt die Abo-Box direkt unter den Warenkorb. Hier hätte man allerdings eher die Suchfunktion erwartet.

Screenshot

Und der Warenkorb? Jeder Shop hat ihn und jeder setzt ihn auf seine Weise in Szene. 9 von 50 Shops liessen den Warenkorb auf der Startseite allerdings vermissen. 8 begnügten sich mit einer Darstellung in Textform. Was die Metaphern und Icons betrifft, so scheint der Einkaufswagen mit 38% klar vor Tüten, Taschen und Körben zu liegen (22%).

Screenshot

Dirty Coast: Warenkorb- und RSS-Icon miteinander verbunden

Screenshot

Der Schuhhändler Görtz spricht von der „Einkaufstasche“. Ein selten verwendeter Begriff

Screenshot

Die Tragetasche ist längst ein Klassiker

Screenshot

Gar nicht so selten: der Warenkorb besteht aus reinem Text

Und wie steht es um Kreditkarten-, Bank- und Paypal-Icons? Die sollten in einem Online Shop häufig zu finden sein. Aber das sind sie nicht. Nur 16% der hier betrachteten Shops waren passend ausgerüstet. Paypal-Icons auf deutschsprachigen Shops waren sogar komplett Fehlanzeige. Das heißt nicht, das es sie nicht gibt, Paypal spielt aber hierzulande nicht die Rolle, die es international inne hat. Schade eigentlich, denn so zu bezahlen, ist durchaus praktisch. Der eine oder andere Kunde wüsste vielleicht schon gern, wie er im Shop bezahlen kann. Es ist anzunehmen, dass man von einer nahezu 100%igen Versorgung mit Bankkonten ausgeht.

Screenshot

Multifunktionale Icon-Tafel in einem Holländischen Shop. Hier geht’s praktischerweise auch gleich um Lieferzeiten und -Kosten (tm)

Weitere Dr. Web Artikel zum Thema

Kategorien
Webdesign

Perfekt präsentiert: Dienstleister

Dienstleister präsentieren sich auf vielfältige Weise. Je nachdem, ob Fantasie oder Zurückhaltung gefragt sind und ob es zum Angebot passt. Agenturen rücken nicht die Leistung sondern sich selbst in den Fokus. Es gilt Interesse zu wecken und Vertrauen aufzubauen. Ist die Dienstleistung hingegen fest umrissen, muss sie im Mittelpunkt stehen und ihre Vorzüge zeigen. Wir haben 10 exemplarische Beispiele ausgewählt.

Ein Klick auf einen Screenshot führt zum Original.

Contrast (Irland)
Diese Herrschaften erstellen Programme fürs Web. Auch der Name ist Programm, mehr Kontrast ist nicht möglich.

Screenshot

Fish Marketing (USA)
…so lässt sich der Familienname des Gründers realistisch illustrieren.

Screenshot

Navigant (USA)
Consulting mit Fantasie.

Screenshot

Fusion Ads (USA)
Sind im Anzeigengeschäft und präsentieren sich auf eine schlichte Weise, die man in diesem Business nicht erwarten würde.

Screenshot

Hollr (USA)
Auf Texte lässt sich weitgehend verzichten, wenn man auf das Prinzip des Comics setzt. Das ist anschaulich und sympatisch.

Screenshot

Alienation Digital (Großbritannien)
Marketing, so freundlich und unbeschwert präsentiert, als handele es sich um einen Shop für Kinderkleidung.

Screenshot

Tolingo (Deutschland)
Tolingo fertigt Übersetzungen an. Herzstück des Auftritts ist der Kostenrechner. Mit seiner Hilfe lässt sich die wichtigste Frage, nämlich die nach den Kosten, bereits am Eingang klären.

Screenshot

Ow.ly (USA)
…kann nichts weiter als URLs abzukürzen. Doch, selbst diese einfache Sache kann spannend in Szene gesetzt werden.

Screenshot

Wikilime (Großbritannien)
…offeriert kostenlose Online Shops.

Screenshot

Bronhill Tree Company (USA)
Schön zu sehen wie das Logo motivisch aufgenommen wird und sowohl in Header als auch Footer wiederkehrt.

Elysium Burns (USA)
Der Grafikdesigner nutzt die Typographie. ™

Screenshot