Für ein Projekt habe ich mich kürzlich näher mit dem Thema Information Architecture und Webdesign für gemeinnützige und Hilfsorganisationen beschäftigt. Vor allem die Organisationen, die zu einem großen Teil von Spendengeldern abhängig sind, haben erkannt, wie wichtig das Internet für ihre Arbeit geworden ist. Dazu gehört zum einen eine gut strukturierte und gestaltete Internetseite und zum anderen ein überzeugendes Engagement in den verschiedenen Sozialen Netzwerken.

Bei der Durchsicht verschiedener Webseiten aus dem Bereich fällt auf, dass es im Bereich Webdesign fast überall einen Paradigmen-Wechsel gegeben hat. Dominierten bis vor wenigen Monaten oder Jahren noch der Eindruck, die Seiten müssten möglichst viele Informationen über möglichst viele Projekte bereitstellen, haben fast alle Organisationen ihre Internetauftritte einer massiv Diät-Kur unterzogen. Bis vor kurzem ähnelten viele Seiten vom Webdesign eher einem Nachrichtenportal. Mittlerweile wurde die Informationsfülle und -tiefe oft extrem reduziert. Stattdessen wird sich auf wenige aktuelle Projekte fokussiert.

Beispiel 1: Amercian Red Cross 2008 [via waybackmachine.org]

Beispiel 2: American Red Cross 2011

Einen ähnlichen Weg durchlief die Webseite der Hilfsorganisation Oxfam.

Beispiel 3: Oxfam 2007 [via waybackmachine]

Beispiel 4: Oxfam 2011

Neue NGOs wie zum Beispiel das Projekt “Do Good Lab” aus San Francisco setzten gleich auf eine reduzierte, aber dafür auch eindeutigere Botschaft auf ihrer Webseite. Das “Do Good Lab” stellt in einem Karussell beispielhaft drei Projekte vor, die von Hilfsgeldern unterstützt werden. Der Vorteil: Durch die Größe der Fotos wird eine viel stärkere emotionale Wirkung auf den Betrachter ermöglicht.

Beispiel 5: Do Good Lab 2011

Der Prozess der Informationsreduktion ist schwierig intern durchzusetzen. Nicht immer gelingt er, wie das Beispiel WWF USA zeigt: Eine eigentlich mit sehr viel Liebe gestaltete Webseite, die jedoch den Nutzer mit Informationen erschlägt. Allein die Zahl verschiedenen horizontalen Navigationselemente (im Beispiel rot umrandet) erschlägt den Leser. Es geht viel Zeit verloren, in der man sich erst einmal zurechtfinden muss, bevor man anfängt, Informationen aufzunehmen.

Beispiel 6: WWF USA 2011

Sehr viel besser sieht das bei der britischen Sektion des WWF aus: Klar, schnell zu verstehen und übersichtlicher.

Beispiel 7: WWF UK 2011

Zum Vergleich hier noch die deutsche WWF-Seite:

Beispiel 8: WWF Deutschland 2011

Zusammenfassend lässt sich bei der Begutachtung der Webseiten folgendes feststellen:

1. Emotionale Bilder

Um mögliche Spender anzusprechen, müssen Emotionen geweckt werden. Das lässt sich in erster Linie durch großflächige, hochqualitative Fotos erzeugen. Oft gibt es ein Bilder-Karussell, wobei sechs Elemente wie beim American Red Cross bereits über das empfohlene Maximum hinaus gehen. Richtwert: 3-5 Bilder.
Und der Web-Video-Trend? Gute Fotos funktionieren meiner Ansicht nach meist besser als das beste eingebundene Video: Direkt, ohne Klick und vor allem: Das stehende Foto kann sich stärker ins Gedächtnis brennen als ein flüchtiges Bewegtbild.

2. Spenden-Button

Das für viele wichtigste Element ist natürlich der “Jetzt Spenden”-Button. Dabei hat sich offenbar herausgestellt, dass möglichst rechts oben der beste Platz für dieses Element ist. Wichtig dabei: Andere grafische Bestandteile der Webseite dürfen nicht mit dem Spenden-Button in eine Konkurrenz um die Aufmerksamkeit des Nutzers treten. Frei nach dem C.R.A.P.-Prinzip heißt das: Ein hoher Kontrast zwischen Knopf und dem restlichen Inhalt, und zwar am besten durch Größe, Abstand und Farbe. Am besten gelingt das dem American Red Cross, wobei erstaunlich ist, dass das rot des Spenden-Buttons nicht das gleiche ist wie das rot des Roten Kreuzes im Logo.

3. Spenden-Ziel und Fortschritt

Da immer weniger Menschen sich fest an eine Organisation binden möchten und dieser regelmäßig (monatlich, jährlich) Geld überweisen, wird es für viele NGOs immer wichtiger auf Projekt-bezogene Aktionen zu setzen. Es wird also nicht für die gesamte Organisation gespendet, sondern konkret für einen Anlass (z.B. Erdbebenhilfe) oder ein Projekt (z.B. Schule in Kenia). Immer mehr gehen Organisationen dazu über, konkrete Projekte herauszuheben, dafür ein konkretes Spendenziel festzulegen und das ganze mit einem Spenden-Fortschrittsbalken zu dokumentieren. Prominentestes Beispiel hierfür sind die jährlichen Spendenaufrufe von Jimmy Wales für die Wikipedia.

4. Informationsreduktion & Interessenlevel

Jeder Besucher einer Webseite kommt mit einem bestimmten Interesse auf die Seite – ich nenne das in meinen Seminaren gerne “Interessenlevel”. Manche wollen nur kurz schauen, andere stöbern ohne Ziel, wieder andere suchen ganz gezielt nach Informationen. Im Ideallfall muss eine Webseite alle diese Nutzertypen bedienen. Für NGOs bietet sich eine Informationsreduktion stark an. Aber auch die detailverliebten Nutzer, die Informationen zu möglichst allen Projekten der unterstützten Organisation haben wollen, müssen befriedigt werden. Es muss also neben der “oberflächlichen” Darstellung der Projekten weitere Möglichkeiten geben, in die Tiefe zu gehen. So etwas lässt sich zum Beispiel durch PDFs lösen. Eine weitere Möglichkeit ist der “Geek-Button”, der die Info-Hungrigen zu einer eigenen Projekt-Datenbank führt, wo es weniger um emotional-reportagige Beschreibungen der Projekte geht, sondern nur um die harten Fakten.

5. Text

Je knapper der für Text vorgesehene Platz, umso mehr muss “auf den Punkt” getextet werden. Bei vielen NGOs ist das noch nicht der Fall. Oft werden Begriffe aus dem internen Gebrauch verwendet, die sich normalen Besuchern der Webseite nicht leicht erschließen. Ein anderes Problem ist, dass sich die innere Organisationsstruktur (= Organigramm) auf der Webseite niederschlägt, im schlimmsten Fall 1:1 in der Navigation.

Weiterlesen:

- 8 Tips to Design a Charity Website (mit zahlreichen Beispielen weiter unten)

- Usability Review of Charity Websites Taking the Lead

- Die neue Facebook-Seiten: für NGOs und Kampagnen