Optimierung des Webauftritts einer NGO

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

http://www.transparency.de/

Inhalt 2

• Von der Analyse zur Konzeption

• Layout

• Navigation

• Startseite

• Banner

• Suchfunktion

• Zusammenfassung

• Projektteam




3


Aufgabe

• Optimierung der Website von Transparency Deutschland

• Kriterien dafür entwickeln

• Konkretes Konzept für Transparency Deutschland erstellen




4


Ziele: Transparency Deutschland

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

• Öffentlichkeit über Erscheinungsformen und Probleme der Korruption informieren




5


Kriterien für die Website-Analyse

• Accessibility = Zugänglichkeit

• Usability = Gebrauchstauglichkeit

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




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




7


http://www.w3.org/TR/WCAG20/

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




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




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




10


Fragebogen_Auswertung.pdf

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




11


Von der Analyse zur Konzeption

• vorher – nachher

▫ Layout

▫ Navigation

▫ Startseite

▫ Banner

▫ Suchfunktion

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



31.05.2010

12


Layout - vorher




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


http://www.transparency.de/Wirtschaft.64.0.html

Layout - nachher




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


http://www.useit.com/alertbox/reading_pattern.html

Navigation - vorher




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)


http://www.transparency.de/Wissen.1015.0.html

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




16


Menüleistenaufbau.pdf

Navigation - nachher




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


Beispiel_horizontale_Hauptmenüleiste.pdf

Beispiel_horizontale_Hauptmenüleiste.pdf

Startseite - vorher




18

Accessibility

Kein Einführungstext auf der Startseite

Einstieg über aktuelle Bezüge

Relevanz durch aktuelle Bezüge

„Sender“ nicht sofort erkennbar



Startseite - nachher




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“


http://www.useit.com/alertbox/f_reading_pattern_eyetracking.jpg

Banner - vorher




20

Accessibility

Verwirrende Angaben zum Untermenü Spende

Spendenbutton suggeriert Zusammenhang zwischen Spenden und Korruption

Beispiel: Spende


http://www.transparency.de/Spende.1259.0.html

Banner - nachher




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




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


http://www.transparency.de/Presse.271.0.html

Suchfunktion - nachher




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




24


Herzlichen Dank…

für Ihre Aufmerksamkeit vom Projektteam:

• Angelika [email protected], +49 30 883 96 23

• Andreas [email protected], +49 30 61 30 78 92

• Gabriele [email protected], +49 30 775 99 14




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




26



http://www.w3.org/TR/WCAG20/

http://www.useit.com/

http://wave.webaim.org/




http://www.usability.ch/



http://www.usabilityblog.de/2009/08/usability-guidelines-teil-1-definition-abgrenzung/








http://www3.widener.edu/Academics/Libraries/Wolfgram_Memorial_Library/Evaluate_Web_Pages/659/



http://blog.espresto.com/blog/public/entry/vergessen_sie_suchmaschinenoptimierung_optimieren_sie








http://vandelaydesign.com/blog/web-development/success-factors/

http://vandelaydesign.com/blog/web-development/success-factors/

Documents

Optimierung des Webauftritts einer NGO