NGO Leitfaden? Alt und vergriffen.
Jetzt aktuelles Handbuch Online-Fundraising bestellen. Jetzt bestellen
Jetzt aktuelles Handbuch Kampagnen-Konzeption bestellen. Jetzt bestellen
Das www einer Website: Was, wo, wie?

Gute Webseiten gestalten

Es kommt der Tag, an dem Aussehen und Bedienung eurer altehrwürdigen Website nicht mehr zeitgemäß sind. „Wir brauchen eine neue Website“, heißt es dann, und mit diesen Worten beginnt ein Prozess, in dem du und deine Organisation sich mit Menschen im Internet auseinandersetzen müssen. Die Grundregel dabei: Websiten sind von Menschen für Menschen gemacht und sollen sich auch an deren Bedürfnissen orientieren. Das spielt in der Konzeption der Seite eine ebenso große Rolle wie später in der Gestaltung.

Im Internet geht es vor allem um Kommunikation und Interaktion. Stellen wir uns deine Organisation als einen dieser Menschen vor. Was für ein Mensch würde das sein? Was würde ihn von all den anderen Menschen unterscheiden? Wie würde er auf andere zugehen, sie begrüßen, sie von seinen Ideen und Projekten überzeugen? Überleg dir, wie die erste Begegnung ablaufen könnte, und halte deine Ideen fest. Das kann eine kleine Zeichnung sein, eine Beschreibung der Person oder eine Liste von Eigenschaften, die du mit deiner Organisation verbindest.

Der erste Eindruck zählt

Treffen sich zwei Menschen zum ersten Mal, ist der erste Eindruck prägend. Ist mein Gegenüber aufdringlich, versuchen wir es abzuwehren. Ist der andere aber aufmerksam und interessant, wollen wir gerne länger mit ihm im Gespräch bleiben. Deshalb geht es bei der Gestaltung einer Website immer um zwei Prinzipien: Nutzerfreundlichkeit und Inhalt. Es gibt immer wieder Begegnungen, bei denen die Gesprächspartner nicht zusammenpassen. Wir können aber darauf achten, dass wir uns besonders um die Menschen kümmern, mit denen wir auf einer Wellenlänge sind – und die im besten Fall Freunde werden.

Zur Planung einer neuen Website solltest du folgende Fragen beachten:

• Welche Menschen kommen auf die Website?

• Wie soll der erste Eindruck sein?

• Wie will ich mit den Menschen interagieren?

Eine Website kann natürlich mehrere Ziele verfolgen. Deine Organisation will vielleicht bekannter werden, Spenden sammeln, Projekte vorstellen, Freiwillige suchen oder Ähnliches. All diese verschiedenen Ziele sollten aber formuliert werden, bevor es losgeht. Erst dann kann der Rahmen gesteckt werden: Sich auf Ziele festzulegen hilft, Prioritäten zu setzen. Ein gutes Design folgt der Aussage und den Inhalten, nicht umgekehrt.

Paul, Katja und Sonja – drei Websiten für drei Menschen?

Oft kommt es vor, das aus Zeitgründen die eigentliche Gestaltung der Website schon beginnt, obwohl die Inhalte noch nicht stehen. Das liegt daran, dass die Inhalte alle geschrieben werden müssen. Hier begegnet uns im Alltag der „Lorem ipsum“ -Blindtext, gepaart mit vorläufigen Platzhalter-Bildern. Doch je früher echte Inhalte zur Verfügung stehen, desto besser kann das Design an diese angepasst werden. Überlege, welche Inhalte die Website braucht. Falls du sie noch nicht ausformuliert hast, kannst du für das Design nach folgenden Punkten Anhaltspunkte geben:

• Titel der Seite

• Primäre Inhalte: z. B. Botschaft, Methode, Call to Action

• Sekundäre Inhalte: verwandte Beiträge, weiterführende Links, Suche

• Tertiäre Inhalte: Footer und Standardlinks

• Welcher Redakteur ist für den Inhalt verantwortlich?

• Offene Fragen/Kommentare

Inhalte werden heute nicht nur für den Nutzer am Schreibtisch produziert. Denk dran, dass Paul mit dem Smartphone im Bus sitzt, Katja mit dem iPad in der Bahn und Sonja mit dem Laptop auf dem Sofa. Und für jeden sollen die gleichen Inhalte in gleicher Qualität verfügbar sein.

Du kannst entweder eine mobile Website zusätzlich konzipieren, die an die Größe eines Gerätes angepasst ist. Doch welches? Smartphones und Tablets gibt es mit unterschiedlichen Bildschirmgrößen und Auflösungen. Zudem steht eine mobile Webseite für sich allein – und muss einzeln gepflegt werden.

Eine andere Variante ist, die Website „responsive“ zu gestalten. Hier bleibt es bei einer Website, deren Design sich an die verschiedenen Bildschirmgrößen anpasst. Das bedeutet etwas mehr Aufwand bei der Entwicklung der Website. Dafür kannst du aber sicher sein, dass Paul, Katja und Sonja auf die gleichen Inhalte zugreifen können.

Fest steht, eine Website kann nicht mehr nur für eine feste Bildschirmgröße gestaltet werden. Der Weg zu den Nutzern führt über viele verschiedene Kanäle. Um deine Inhalte zu priorisieren, fragen dich: Wenn der Nutzer nur einen sehr kleinen Bildschirm vor sich hat – was sollte er von uns als Organisation als Erstes sehen?

Wo bin ich und wenn ja, wer?

Vom Mission Statement über Blog-Beiträge bis zu breit aufgemachten Themen ­– die Relevanz der Inhalte sollte stets im Vordergrund stehen. Steht eure Hauptaussage im Mittelpunkt? Oder wird sie durch irrelevante Inhalte verwässert? Gibt es Inhalte, die in der Seitenhierarchie zu weit oben auftauchen?

Der Nutzer sollte immer folgende Frage beantworten können: „Wo bin ich und was kann ich tun?“ Eine gut gestaltete Website hilft dem Nutzer, sich auf der Seite zurechtzufinden. Dazu gehören eine klare Navigationsstruktur, verständliche Texte und eindeutig benannte Links. Und nicht zu vergessen: leicht verständliche und einfach auszufüllende (Spenden-)Formulare.

Eine Textwüste kann einen Nutzer genauso schnell verjagen wie ein überladenes Design. Sinnvoll eingesetzt, können ein paar spielerische Elemente aber nicht schaden. Ein Beispiel: Der Nutzer will wissen, wie seine Spende wirkt. Zeig ihm konkrete Gegenwerte. Für zehn Euro kann eine warme Decke organisiert werden, für 50 Euro Schulmaterial für ein ganzes Jahr.

Auch sonst hilft es, konkret zu werden: Wie viele Freiwillige braucht ihr für eine Aktion? Wie viele Spenden, um welches Ziel zu erreichen? Veranschaulicht eure Fortschritte und lasst die Unterstützer am Erfolg teilhaben.

So wird Barrierefreiheit nicht zur Hürde

Gerade für eine NGO sollte es selbstverständlich sein, dass die eigene Website ist für jede und jeden zugänglich, also möglichst barrierearm ist. Das Internet bietet dabei die Chance, mehr Menschen in die alltägliche Kommunikation mit einzuschließen. Barrierefreiheit schließt Menschen mit motorischen Behinderungen, Blinde und Gehörlose ebenso ein wie Menschen mit Lese-Rechtschreib-Schwäche oder geistiger Behinderung.

Die Richtlinien zur Barrierefreiheit leiten sich aus vier Grundprinzipien ab:

• Wahrnehmbarkeit: Die Inhalte der Website müssen für jeden Nutzer zu erschließen sein

• Bedienbarkeit: Jedem Nutzer stehen alle Funktionen der Website zur Verfügung

• Verständlich: Klare Formulierung der Inhalte

• Robustheit: Die Website ist von verschiedenen Geräten aus zugänglich

Einige Barrieren lassen sich recht einfach beseitigen:

• Benutzt eine klare Sprache und Seitenstruktur

• Denkt an Textalternativen für Bilder und Videos

• Navigationselemente wie Buttons und Links sollten eindeutig benannt werden

Auf einer guten Seite verbringt der Nutzer ziemlich viel Zeit. Im echten Leben wäre er jetzt vielleicht ein guter Bekannter. Bleibt in Kontakt: Newsletter, Facebook, Twitter und Co. sind ideale Mittel, um sich auszutauschen. Falls ein Mensch mal auf euch zukommen möchte: Zeigt ihm auch auf der Website deutlich, wo ein anderer Mensch zu finden ist, der helfen kann (Kontakt).

PS: Eine Nutzergruppe, die oft vergessen wird: Online-Redakteure. Je wohler sie sich mit dem Content Management System (CMS) fühlen, desto mehr Spaß macht es, die Seite aktuell zu halten.

 

Barrierearm:

BAMF

Eine klare Struktur und Hilfe am richtigen Platz – die barrierearme Website des BAMF lässt keinen Nutzer außen vor.

bamf.de

 

Responsive:

WWF

Alle Inhalte, überall zugänglich, klare Prioritäten: Der Webauftritt des WWF passt sich an jeden Gerätetypen an.

worldwildlife.org

Weiterführende Links

• Alles über Barrierefreiheit
einfach-fuer-alle.de

• For people who makes websites:
alistapart.com

• Alles über Mobile
mobilewebbestpractices.com

• Und wie sieht Ihre Website im Mobile Web aus?
responsive.is

• Mobile Websiten vs. Responsive Design
mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown

Weiterlesen: Content-Strategy: Erst planen, dann publizieren.

Katharina Philips Nach ihrem Diplom in der Fachrichtung „Visuelle Kommunikation“ zog es Katharina nach Berlin und in die Fänge des World Wide Web. Sie arbeitet als Konzepterin und Designerin bei Wigwam und wartet darauf, dass endlich ein Programm für dynamisches Design entwickelt wird.