Optimierung des Webauftritts einer Nichtstaatlichen

Organisation (NGO) am Beispiel von

Transparency International Deutschland e.V.

Präsentation des Konzepts von A. Ludwig, A. Matern, G. Thiede

Projektarbeit im Rahmen der Transnationalen Weiterbildung Wissens- und Contentmanagement 2009/10

C&Q Bildungszentrum Haberhauffe GmbH, Berlin

31.05.2010

Inhalt 1

• Aufgabe

• Ziele: Transparency Deutschland

• Kriterien für die Website-Analyse

• Kriterium Accessibility

• Kriterium Usability

• Kriterium Interestingness

• Fragebögen

• Ergebnisse der Website-Analyse

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

2

Inhalt 2

• Von der Analyse zur Konzeption

• Layout

• Navigation

• Startseite

• Banner

• Suchfunktion

• Zusammenfassung

• Projektteam

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

3

Aufgabe

• Optimierung der Website von Transparency Deutschland

• Kriterien dafür entwickeln

• Konkretes Konzept für Transparency Deutschland erstellen

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

4

Ziele: Transparency Deutschland

• Förderung der Kriminalprävention im Kampf gegen die Korruption

• Öffentlichkeit über Erscheinungsformen und Probleme der Korruption informieren

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

5

Kriterien für die Website-Analyse

• Accessibility = Zugänglichkeit

• Usability = Gebrauchstauglichkeit

• Interestingness = eigentliche Inhalte sind zentrale Bewertungsgrundlage für den Benutzer

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

6

Kriterium Accessibility

„Darbietung der Inhalte an die menschliche

Aufnahmefähigkeit anpassen.“ ISO/TS 16071

• Erhöhte Zugänglichkeit schaffen

• Einhaltung von allgemeinen Richtlinien – z.B. Web Content Accessibility Guidelines (WCAG) 2.0des World Wide Web Consortium

• Prinzipien: wahrnehmbar, bedienbar, verständlich und robust

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

7

Kriterium Usability

„Usability eines Produkts ist das Ausmaß, in dem es von

einem bestimmten Benutzer verwendet werden kann, um

bestimmte Ziele in einem bestimmten Kontext effektiv,

effizient und zufriedenstellend zu erreichen.“ ISO 9241-11

Effektivität, Effizienz und Zufriedenstellung durch:

• gute Navigation

• gute Suchfunktion

• gute Gestaltung des Contents

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

8

Kriterium Interestingness

Interesse über Inhalte wecken – die eigentlichen Inhalte

sind zentral. Sie werden zur Bewertungsgrundlage für

den Benutzer.

• Aktualität der Inhalte

• Stimmigkeit der Inhalte

• Glaubwürdigkeit durch seriöse Inhalte

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

9

Fragebögen

• Aufschluss erhalten über Qualität der Usability durch Auswertung von ausgesandten Fragebögen:

▫ Text ist verständlich, aber zu lang

▫ Farbgestaltung nicht zufriedenstellend

▫ Nutzer fühlen sich genügend informiert

▫ Finden über die Menüführung und die Suche nicht ganz klar

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

10

Ergebnisse der Website-Analyse

auf Basis der drei genannten Kriterien:

• Accessibility ist allgemein gegeben

• Gestaltung, Navigation und Suchfunktion sind nicht zufriedenstellend

• Die Inhalte sind aktuell, stimmig und glaubwürdig

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

11

Von der Analyse zur Konzeption

• vorher – nachher

▫ Layout

▫ Navigation

▫ Startseite

▫ Banner

▫ Suchfunktion

A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

31.05.2010

12

Layout - vorher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

13

Statische Bildschirmbreite 800 x 600 Pixel

Lesefluss ist gestört durch Informationsfülle in einer Spalte (Fließtext, Dokumente und Hinweise)

Herausfiltern der benutzerrelevanten Informationen ist erschwert

Layout - nachher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

14

Minimale Bildschirmbreite 1024 x 768 Pixel (dynamisch)

3-spaltiges Layout schafft Raum:

- links: für Medienspiegel, Pressemitteilungen und weiterführende Informationen (jeweils seitenbezogen)

- Mitte: Zentraler Fließtext

- rechts: in Banner ausgelagerte Menüpunkte

Meinungsbildung erleichtert

Navigation - vorher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

15

Schriftgröße nicht veränderbar

Vertikale Struktur der Menüleiste führt zu Unübersichtlichkeit

Auffinden der Inhalte erschwert durch inkonsequente Benennung der Menüpunkte

Wiederholung von gleichen Informationen verwirren (z.B. Pressespiegel/-mitteilungen)

Einzelne Menüpunkte stimmen teilweise mit Inhalt nicht überein (Wissen, Mitgliedschaft/ Mitglieder, Pressespiegel/-mitteilungen)

Navigation - MenüpunkteHauptmenü (vertikal)

• Standpunkte

• Wissen

• Regionen

• Presse

• Unterstützen

• Über uns

• Termine

Hilfsmenüleiste (horizontal)

• Home

• Suche

• FAQ

• English

• Kontakt

• RSS

• Mitgliederbereich

Hauptmenü (horizontal)

• Start

• Themen

• Regionen

• Über Korruption

• Über uns

• Unterstützen

• Veranstaltungen

Hilfsmenüleiste (horizontal)

• Anmelden

• FAQ

• TI International

• RSS-Symbol

• Kontakt

• Schriftgröße

• Suchformular

Fußzeile

• Impressum

• Datenschutz

• Sitemap

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

16

Navigation - nachher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

17

Schriftgrößen-Button in Hilfsleiste platzieren

Horizontale Menüleiste anlegen mit Breadcrumb-Navigation

Neue inhaltliche Strukturierung der Menüleiste führt zu mehr Transparenz und besserem Informationstransfer

Startseite - vorher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

18

Accessibility

Kein Einführungstext auf der Startseite

Einstieg über aktuelle Bezüge

Relevanz durch aktuelle Bezüge

„Sender“ nicht sofort erkennbar

Startseite - nachher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

19

Accessibility

Links: Schlagzeilen als Blickfang, Medienspiegel und Pressemitteilungen

Mitte: kurzer Text zu TI/D und Zielen,

ausgewählte aktuelle Pressemitteilungen und Veranstaltungen

Transparenz durch kurze Vorstellung des „Senders“

Banner - vorher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

20

Accessibility

Verwirrende Angaben zum Untermenü Spende

Spendenbutton suggeriert Zusammenhang zwischen Spenden und Korruption

Beispiel: Spende

Banner - nachher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

21

Accessibility

Zusammenfassung der wichtigsten Informationen in einem Banner

Banner ist auf jeder Seite zugänglich (rechte Spalte)

Das Untermenü Spende bleibt unter Unterstützen erhalten.

Keine Vermischung von Inhalt und Spendenaufruf

Beispiel: Spende

Suchfunktion - vorher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

22

Accessibility

Einfaches Formular mit zwei Suchkriterien

Keine Suchergebnisse aus PDF-Dokumenten

Separate Suche für Pressespiegel und Pressemitteilungen

Suche nicht ausreichend zum Finden von allen relevanten Informationen

Suchfunktion - nachher

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

23

Größeres Suchformular

Erweiterte Suchfunktion ▫ Zusammenfassung verschiedener Suchmöglichkeiten ▫ zielgruppengerechte Suche möglich ▫ Einbeziehung aller PDF-Dokumente

Größere Transparenz durch effektivere Suche

Zusammenfassung

Die Website sollte optimiert werden auf Grundlage der

drei benannten Kriterien Accessibility, Usability undInterestingness:

• Horizontale Hauptnavigation: bessere Orientierung

• Erweiterte Suchfunktion: effektiv und zielgenau

• 3-spaltiges Layout: schneller Zugriff auf gewünschte Informationen

• Neue Startseite: Organisation wird für Nutzer transparent

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

24

Herzlichen Dank…

für Ihre Aufmerksamkeit vom Projektteam:

• Angelika Ludwigmail@kultur-scout.de, +49 30 883 96 23

• Andreas Maternmail@andreas-matern.de, +49 30 61 30 78 92

• Gabriele Thiedeg.thiede@online.de, +49 30 775 99 14

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

25

Quellen• Transparency International Deutschland e. V.

• ISO/TS 16071, Web Content Accessibility Guidelines (WCAG) 2.0, ISO 9241

• useit.com: Jakob Nielsen's Website

• WAVE - Web Accessibility Evaluation Tool

• Institut für Software-Ergonomie und Usability

• Martin Beschnitt. Usability-Guidelines: Teil 1 – Definition & Abgrenzung. Usabilityblog.de

• Jan Alexander & Marsha Ann Tate. Evaluate Web Pages. Wolfgram Memorial Library, Widener University

• Felix Schwenzel. Vergessen Sie Suchmaschinenoptimierung - Optimieren Sie Ihre Website. E-Marketing Forum, Xinnovations 2009

• 7 Factors that Separate Good Websites from Bad Websites. Vandelay Design Blog

31.05.2010A. Ludwig, A. Matern, G. Thiede:

Konzept zur Optimierung des Webauftritts einer Nichtstaatlichen Organisation (NGO)

am Beispiel von Transparency International Deutschland e.V.

26