Vortrag von Marcus Flatten auf der Jahrestagung des Bundesverbands Hochschulkommunikation am 27. September in Dresden. Ob Sie einen Relaunch planen oder eine Microsite – im Zeitalter des Web 2.0 gewinnt die klassische Website sogar noch an Bedeutung. Als zentrale Plattform soll sie eine Vielzahl von Kommunikationskanälen bündeln, Orientierung bieten und die Marke repräsentieren. Viele Entscheidungen sind zu treffen: Auf welchem Weg sollen welche Inhalte transportiert werden? Wie interaktiv muss eine Website sein, wenn es einen Facebook-Auftritt gibt? Was sollen Nutzer mobiler Endgeräte sehen und tun können, wenn sie die Website aufrufen? Im Workshop durchlaufen wir gemeinsam verschiedene Phasen von Website-Projekten: Konzeption, Umgang mit Dienstleistern, Projektmanagement, Erfolgskontrolle. Wir sprechen über Trends, Erfolgsfaktoren und Fallstricke. Ich würde mich freuen, wenn Teilnehmer von ihren Erfahrungen berichten und eigene Beispiele mitbringen oder mir vorab zusenden. Der Workshop richtet sich an alle, die bereits an Website-Projekten beteiligt waren oder diese Aufgabe auf sich zukommen sehen.

1. Hochschul-Websites: Konzeption und Management
Marcus Flatten, Geschäftsführer
Bundesverband für Hochschulkommunikation 2012 in Dresden
27.9.2012 // © Mann beißt Hund 2012

3. Steckbrief
MANN BEISST HUND
Standort Hamburg
Gegründet 2000
Nicola Wessinghage,
Gründer
Marcus Flatten
Integrierte Kommunikation
Mission für einen überzeugenden Auftritt
in der Öffentlichkeit
zehn feste Mitarbeiter mit festen
Team
freien Kollegen
Spezialisten für Design, Werbung,
Netzwerk Internet, Film und Event und
Social Media
3

4. Angebot
strategische Beratung, Konzeption
Pressearbeit
Kooperationsmanagement
4

5. Inhalt
• Trends
• Zieldefinition
• Agenturauswahl
• Grob- und Feinkonzept
• Umsetzung
5

6. Trend 1: Social Media
Facebook
Pinterest
Twitter-
Kanäle
Social
Bookmarking Ihre
Website
XING /
LinkedIn
Blogs
YouTube
Apps
6

7. Social Media: Fallbeispiel
Aus: von Constance Richter, aus Public Marketing 3/12
© Mann beißt Hund 2011 // Agenturpräsentation 7

8. Social Media: Fallbeispiel
© Mann beißt Hund 2011 // Agenturpräsentation 8

9. Social Media
Social-Media-Einbindung ist kein
Selbstzweck, sondern dem Ziel
untergeordnet.
Website und Social Media sollten sich
ergänzen, nicht konkurrieren.
9

10. Social Media: Buttons und Plug-ins
Unter der linken Navigation: Dezent e Einbindung „2 Klicks für mehr Datenschutz“
www.uni-mannheim.de auf www.uni-koeln.de Vorgeschlagen von heise.de,
Umsetzung z.B. www.uni-luebeck.de
10

11. Social Media: Feed-back zum Relaunch
Ein Dialog-Angebot an passender Stelle.
11

12. Social Media
Social Media Newsroom
• Übersichtlich: Alle News auf einen
Blick
• Prominente Platzierung von User-
Meinungen (=Chance und Risiko)
• Lenkt von der Website hin zu Social
Media  mehr Fans, Follower etc.
http://www.stiftung-mercator.de/newsroom.html
12

13. Social Media
Social Media Zitate auf d. Homepage
• Demonstrieren thematische Vielfalt
und eine lebendige Scientific-
Community
http://www.oii.ox.ac.uk/
13

14. Social Media
Social Media Zitate auf d. Homepage
• Demonstrieren thematische Vielfalt
und eine lebendige Scientific-
Community
• Reply-Button lädt ein zur
Interaktion
http://www.harvard.edu/
14

15. Trend 2: Große und bewegte Bilder
Trend
• Immer größere Bilder als Aufmacher, häufig über die gesamte Bildschirmbreite
• Slideshows, mit Link zu Inhalten oder Nachrichten
• Mehr Film (YouTube, vimeo)
Funktion
• Emotionale Ansprache
• Geschichten anteasern
• In die Seite „hineinsaugen“
Hintergrund
• Mehr Bandbreite, schnellere PCs
• Veränderte Sehgewohnheiten durch Online-Entertainment (Medien, Spiele, Video)
15

16. Große und bewegte Bilder
Perspektive und journalistische Headline locken in die Seite hinein. http://www.tu-muenchen.de
16

17. Große und bewegte Bilder
Weniger attraktiv und nur scheinbar visuell: Porträts unbekannter Personen erschließen sich erst über die Bildunterschrift.
17
http://www.uni-frankfurt.de

18. Große und bewegte Bilder
Größe, Funktion und Qualität von Bildern
müssen zusammenpassen. Deshalb schon in
der Konzeptionsphase prüfen, ob der
geplante Umgang mit Bildern im Alltag auch
geleistet werden kann.
18

19. Große und bewegte Bilder
Gelungenes Webcast-Portal der Uni Berkeley. http://webcast.berkeley.edu/
19

20. Trend 3: Mobile
Strategien
• Stark reduzierte mobile-optimierte Seite
— Pro: relativ leicht zu erstellen
— Contra: doppelter Pflegeaufwand, reduzierter Umfang
• Eigenständige mobile Seite
— Pro: optimiertes Design, viele Möglichkeiten
— Contra: hoher Aufwand
• Responsive Design
— Pro: Nur 1 Auftritt muss gepflegt werden, viele Funktionen
— Eingeschränkte Usability auf einzelnen Endgeräten
20

21. Mobile: m.-Seite
Die bisherige Mobil-Seite des idw liefert einen schnörkellosen Nachrichtenüberblick.
21

22. Mobile: Responsives Design
Responsives Design passt sich automatisch an die Größe des Ausgabefenster an.
Vorteile: die meisten Funktionalitäten bleiben erhalten, und es muss nur eine Version
der Seite gepflegt werden. http://www.bostonglobe.com/
22

23. Mobile
Immer mehr Apps an deutschen
Universitäten.
23

24. Projektphasen
Analyse
Zieldefinition
Briefing
Agentur-
auswahl
Pitch
Grobkonzept
Pflichtenheft
Feinkonzept Design
Usability
HTML Prototyp
Tests
Text
Umsetzung
Programmie-
rung
Implemen-
Launch Pflege Relaunch
tierung
24

25. Analyse
Wie machen‘s die anderen?
Analyse
• Anschauen:
— Design
— Ansprache Zielgruppen Zieldefinition
— Struktur
— Navigation
— Einbindung Social Media
Agenturauswahl
• Vorbilder und abschreckende Beispiele finden
Grobkonzept
• Diskussion mit Entscheidern
 gemeinsame Web-Tour organisieren
Feinkonzept
• Wunschliste schreiben
Umsetzung
25

26. Zieldefinition
1. Zielgruppen
Analyse
— Definition, Personas
2. Inhalte
Zieldefinition
— Themen, Botschaften, Quellen
Ziel in
3. Effekte
drei Agenturauswahl
— Nach außen: Image, Information, Reichweite,
Google PageRank, Interaktionen Sätzen?
— Nach innen: Akzeptanz, Nutzung durch Autoren
User Grobkonzept
4. Vernetzung
Experience?
— Social Media, Backlinks, Kooperationspartner
Feinkonzept
5. Technische Ziele
— Sicherheit
Umsetzung
— Administrationsaufwand
— Eignung für verschiedene Endgeräte (Mobile!)
26

27. Personas
• Werden in der Produktentwicklung seit
langem eingesetzt
• Sollten auf Basis von Beobachtungen
erstellt werden, z.B.
• Befragung (z.B. Fokus-Gruppen,
Online-Befragung)
• Usability-Tests
• Logfile-Auswertung, Tracking
• Eigene Erfahrungen
Olde Lorenzen-Schmidt 2004 (http://www.uxhh.de/roundtable/archiv/_media/OLS04_Personas.pdf) 27

28. Agenturauswahl
Pitch-
Honorar?
Anzahl
Agenturen
?
Zieldefinition Agentur-
Briefing Workshops Grobkonzept Feinkonzept
Auswahl
Ziele Agenturpräse Informations-
Medien
architektur
Rahmen Rebriefing Inhalte Navigation
Leistungen Feed-back Funktionen Sitemap
evtl. erste Design-
Ideen Budget (grob)
Konzept
Manche Briefings versuchen, Antworten aus späteren Konzeptionsphasen vorwegzunehmen. Homepage
In der Praxis kann das nicht funktionieren, weil den Agenturen in der Angebotsphase wichtige Informationen fehlen.
An Pitches mit hohem nicht vergütetem Aufwand beteiligen sich große Agenturen mit eigenem Pitch-Team und kleine
Agenturen, die sehr dringend Aufträge benötigen. 28

29. Agenturauswahl
Wer beim Pitch zu viel verlangt, findet eine
teure oder eine schlechte Agentur.
29

30. Agenturauswahl
Empfehlung
• Mehrstufiges Verfahren, zum Beispiel
— Öffentlicher Teilnahmewettbewerb
— Einreichung Agenturpräsentation mit Ideenskizze (2 Seiten, honorarfrei)
— 3 – 5 Agenturpräsentationen (mit Pitch-Honorar)
• Höhe des Honorars abhängig vom geforderten Aufwand (2.000 – 10.000 EUR)
• Erreichbaren und kompetenten Ansprechpartner nennen
• Transparenz für alle Beteiligten (auch: Wie viele sind eingeladen?)
• Klare Definition der Wettbewerbsaufgabe
• Konzeptionelle Arbeiten und Entwürfe vergüten
30

31. Grobkonzept
Inhalte, Medien, Funktionalitäten
Analyse
• Quellen
• Aktualisierungsfrequenz
• Interaktionsmöglichkeiten Zieldefinition
• Formate
Video Agenturauswahl
Grobkonzept
Feinkonzept
Umsetzung
31

32. Feinkonzept: Struktur
Sitemap: Flach oder tief?
Analyse
Home
1 2 6 8 10 11 14 15 Zieldefinition
3 4 7 9 12 13
Agenturauswahl
Home
Grobkonzept
1 11 14
2 6 12 13 15 Feinkonzept
3 4 7 8
Umsetzung
9 10
32

33. Feinkonzept: Struktur
„Der Benutzer muss mit so wenig Arbeit wie
möglich zur gesuchten Seite gelangen. Arbeit
sind nicht nur Mausklicks, sondern vor allem
auch das Nachdenken.“
Jens Jacobsen,
„Websitekonzeption“
Addison-Wesley 2011
33

34. Feinkonzept: Struktur
34

35. Feinkonzept: Homepage und Navigation
Die Homepage
MUSS
• Den Absender präsentieren
• Klarmachen, worum es geht
• Orientierung bieten (Einstieg in die Navigation)
• In die Seite „hineinsaugen“, Neugier wecken
• Zugang zu Standard-Informationen und -funktionen
(Kontakt, Impressum, Suche, Login etc.)
• Link „Presse“
KANN
• Nachrichten
• Direkte Ansprache von Zielgruppen
• Social Media
• Werbung (… wenn es sein muss)
35

36. Homepage & Navi
36
Überfüllte Homepage: http://www.uni-hamburg.de

37. Homepage & Navi
37
Klar strukturiert, klarer Marketing-Fokus: http://www.akad.de/

38. Homepage & Navi
38
Übersichtliches Kachel-Design – setzt sich auf der 2. Ebene fort: http://www.hs-niederrhein.de/

39. Homepage & Navi
39
Luftiges Design, unklare Kategorien: http://www.uni-saarland.de/

40. Homepage & Navi
40
Zielgruppenansprache extrem: http://karlshochschule.de/de/

41. Homepage & Navi
Die Homepage ist so wertvoll wie ein
Baugrundstück in der Münchener Innenstadt.
Es lohnt sich, sehr sorgfältig zu planen.
Frei nach Jakob Nielsen:
Homepage als „real estate of Internet“
und Jens Jacobsen
41

42. Zielgruppen-Navigation
Die Anforderung
• Hochschulen kommunizieren mit sehr heterogenen Zielgruppen
Die Idee
• Zielgruppen-Navigation auf der Startseite, parallel zur strukturellen Navigation
Voraussetzung
• Inhalte müssen den Erwartungen standhalten
— Passende Bildwelt
— Passende Inhalte
— Passende Ansprache
— Aktualität
42

43. Zielgruppen-Navigation
43

44. Zielgruppen-Navigation
44

45. Zielgruppen-Navigation
45

46. Zielgruppen-Navigation
46

47. Zielgruppen-Navigation
Zielgruppen Startseiten:  ZG1 ZG2 ZG3 ZG4 ZG5 ZG6 ZG7 ZG8 ZG9
Pflege
 Seiten in der
Systematik:
1.1
1.2.
1.3
1.3.1
1.3.2
1.3.3
1.3.4
2.1
2.2
Etc.
47

48. Zielgruppen-Navigation
Zielgruppen-Navigation ist schön, macht aber
Arbeit, weil Verknüpfungen zwischen beiden
Systemen sorgfältig gepflegt werden müssen.
48

49. Umsetzung: Usability Tests
Wann sollte man testen?
Analyse
— So früh wie möglich
Wie oft sollte man testen?
Zieldefinition
— Pro Phase zwei bis fünf Tester. Vor dem Launch evtl. mehr.
Was sollte man testen?
Agenturauswahl
— Alles, was da ist: Konzept, Navigationsstruktur, HTML-Prototyp, Beta-Version
Wer sollte testen
Grobkonzept
— Einfache Variante:
die Agentur: intern und mit Zielgruppe
Kunde: intern und mit Zielgruppe Feinkonzept
— Große Variante:
Externe Evaluation (Usability-Analyse)
Umsetzung
49

50. Umsetzung
Das brauchen Sie
Analyse
• 1 erfahrenen Projektmanager mit Team
• 1 Agentur und/oder interne Ressourcen
• Support in Ihrer eigenen Organisation (Fachbereiche, Leitung) Zieldefinition
— Kapazität
— Budget (mit Puffer)
— Verständnis Agenturauswahl
• Konzept für die Implementierung
— Rollenkonzept, Pflegeplan
— Redaktionsplan Grobkonzept
— Schulungen
• Test-Pool (2 – 3 pro Zielgruppe)
• Kommunikation (in der Launchphase) Feinkonzept
• Regelmäßige Evaluation im Hinblick auf Ihre Ziele.
• Flexiblen Zeitplan mit realistischen Meilensteinen
Umsetzung
50

51. Umsetzung: So nicht …
Aus: „You (can) do (better)“ von Sebastian Deterding, www.coding-conduct.de , via Slideshare 51

52. Haben Sie weitere Fragen?
Dann rufen Sie uns an!
MANN BEISST HUND
Agentur für Kommunikation GmbH
Stresemannstraße 374
D-22761 Hamburg
fon +49 40 890 696-0
fax +49 40 890 696-20
info@mann-beisst-hund.de
www.mann-beisst-hund.de
www.facebook.com/mannbeissthund
52