Hochschul-Websites: Konzeption und Management

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

Gründer Nicola Wessinghage,

Marcus Flatten

Mission

Integrierte Kommunikation

für einen überzeugenden Auftritt

in der Öffentlichkeit

Team zehn feste Mitarbeiter mit festen

freien Kollegen

Netzwerk

Spezialisten für Design, Werbung,

Internet, Film und Event und

Social Media

4

strategische Beratung, Konzeption Pressearbeit Kooperationsmanagement

Angebot

5 5

• Trends

• Zieldefinition

• Agenturauswahl

• Grob- und Feinkonzept

• Umsetzung

Inhalt

6

Trend 1: Social Media

Ihre Website

YouTube

Blogs

Apps

Twitter-

Kanäle

Facebook Pinterest

Social

Bookmarking

XING /

LinkedIn

© Mann beißt Hund 2011 // Agenturpräsentation 7

Social Media: Fallbeispiel

Aus: von Constance Richter, aus Public Marketing 3/12

© Mann beißt Hund 2011 // Agenturpräsentation 8

Social Media: Fallbeispiel

9 9

Social-Media-Einbindung ist kein Selbstzweck, sondern dem Ziel untergeordnet.

Website und Social Media sollten sich ergänzen, nicht konkurrieren.

Social Media

10

Social Media: Buttons und Plug-ins

„2 Klicks für mehr Datenschutz“

Vorgeschlagen von heise.de,

Umsetzung z.B. www.uni-luebeck.de

Dezent e Einbindung

auf www.uni-koeln.de

Unter der linken Navigation:

www.uni-mannheim.de

11

Social Media: Feed-back zum Relaunch

Ein Dialog-Angebot an passender Stelle.

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

13

Social Media

http://www.oii.ox.ac.uk/

Social Media Zitate auf d. Homepage

• Demonstrieren thematische Vielfalt

und eine lebendige Scientific-

Community

14

Social Media

http://www.harvard.edu/

Social Media Zitate auf d. Homepage

• Demonstrieren thematische Vielfalt

und eine lebendige Scientific-

Community

• Reply-Button lädt ein zur

Interaktion

15 15

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)

Trend 2: Große und bewegte Bilder

16

Große und bewegte Bilder

Perspektive und journalistische Headline locken in die Seite hinein. http://www.tu-muenchen.de

17

Große und bewegte Bilder

Weniger attraktiv und nur scheinbar visuell: Porträts unbekannter Personen erschließen sich erst über die Bildunterschrift.

http://www.uni-frankfurt.de

18

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.

Große und bewegte Bilder

19

Große und bewegte Bilder

Gelungenes Webcast-Portal der Uni Berkeley. http://webcast.berkeley.edu/

20 20

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

Trend 3: Mobile

21

Mobile: m.-Seite

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

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/

23

Mobile

Immer mehr Apps an deutschen

Universitäten.

24 24

Projektphasen

Analyse

Zieldefinition

Agentur-auswahl

Briefing

Pitch

Grobkonzept

Feinkonzept

Pflichtenheft

Design

HTML Prototyp

Umsetzung

Text

Programmie-rung

Implemen-tierung

Launch Pflege Relaunch

Usability

Tests

25 25

Wie machen‘s die anderen?

• Anschauen:

— Design

— Ansprache Zielgruppen

— Struktur

— Navigation

— Einbindung Social Media

• Vorbilder und abschreckende Beispiele finden

• Diskussion mit Entscheidern

gemeinsame Web-Tour organisieren

• Wunschliste schreiben

Analyse

Analyse

Zieldefinition

Agenturauswahl

Grobkonzept

Feinkonzept

Umsetzung

26 26

1. Zielgruppen

— Definition, Personas

2. Inhalte

— Themen, Botschaften, Quellen

3. Effekte

— Nach außen: Image, Information, Reichweite,

Google PageRank, Interaktionen

— Nach innen: Akzeptanz, Nutzung durch Autoren

4. Vernetzung

— Social Media, Backlinks, Kooperationspartner

5. Technische Ziele

— Sicherheit

— Administrationsaufwand

— Eignung für verschiedene Endgeräte (Mobile!)

Zieldefinition

Analyse

Zieldefinition

Agenturauswahl

Grobkonzept

Feinkonzept

Umsetzung

Ziel in

drei

Sätzen?

User

Experience?

27 Olde Lorenzen-Schmidt 2004 (http://www.uxhh.de/roundtable/archiv/_media/OLS04_Personas.pdf)

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

28 28

Agenturauswahl

Zieldefinition Briefing

Ziele

Rahmen

Leistungen

Agentur-Auswahl

Agenturpräse

Rebriefing

Feed-back

evtl. erste Ideen

Workshops Grobkonzept

Medien

Inhalte

Funktionen

Budget (grob)

Feinkonzept

Informations-architektur

Navigation

Sitemap

Design-Konzept

Homepage

Pitch-Honorar?

Anzahl Agenturen

?

Manche Briefings versuchen, Antworten aus späteren Konzeptionsphasen vorwegzunehmen.

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.

29 29

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

Agenturauswahl

30 30

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

Agenturauswahl

31 31

Inhalte, Medien, Funktionalitäten

• Quellen

• Aktualisierungsfrequenz

• Interaktionsmöglichkeiten

• Formate

Grobkonzept

Analyse

Zieldefinition

Agenturauswahl

Grobkonzept

Feinkonzept

Umsetzung

Video

32 32

Sitemap: Flach oder tief?

Feinkonzept: Struktur

Analyse

Zieldefinition

Agenturauswahl

Grobkonzept

Feinkonzept

Umsetzung

Home

1 2

3 4

6

7

8

9

10 11

12 13

14 15

Home

1

2

3 4

6

7 8

9 10

11

12 13

14

15

33 33

„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

Feinkonzept: Struktur

34

Feinkonzept: Struktur

35 35

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)

Feinkonzept: Homepage und Navigation

36 36

Homepage & Navi

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

37 37

Homepage & Navi

Klar strukturiert, klarer Marketing-Fokus: http://www.akad.de/

38

Homepage & Navi

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

39 39

Homepage & Navi

Luftiges Design, unklare Kategorien: http://www.uni-saarland.de/

40 40

Homepage & Navi

Zielgruppenansprache extrem: http://karlshochschule.de/de/

41 41

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

Homepage & Navi

42 42

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

Zielgruppen-Navigation

43

Zielgruppen-Navigation

44 44

Zielgruppen-Navigation

45 45

Zielgruppen-Navigation

46 46

Zielgruppen-Navigation

47 47

Zielgruppen-Navigation

Zielgruppen Startseiten: ZG1 ZG2 ZG3 ZG4 ZG5 ZG6 ZG7 ZG8 ZG9

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.

Pflege

48 48

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

Zielgruppen-Navigation

49 49

Wann sollte man testen?

— So früh wie möglich

Wie oft sollte man testen?

— Pro Phase zwei bis fünf Tester. Vor dem Launch evtl. mehr.

Was sollte man testen?

— Alles, was da ist: Konzept, Navigationsstruktur, HTML-Prototyp, Beta-Version

Wer sollte testen

— Einfache Variante:

die Agentur: intern und mit Zielgruppe

Kunde: intern und mit Zielgruppe

— Große Variante:

Externe Evaluation (Usability-Analyse)

Umsetzung: Usability Tests

Analyse

Zieldefinition

Agenturauswahl

Grobkonzept

Feinkonzept

Umsetzung

50 50

Das brauchen Sie

• 1 erfahrenen Projektmanager mit Team

• 1 Agentur und/oder interne Ressourcen

• Support in Ihrer eigenen Organisation (Fachbereiche, Leitung)

— Kapazität

— Budget (mit Puffer)

— Verständnis

• Konzept für die Implementierung

— Rollenkonzept, Pflegeplan

— Redaktionsplan

— Schulungen

• Test-Pool (2 – 3 pro Zielgruppe)

• Kommunikation (in der Launchphase)

• Regelmäßige Evaluation im Hinblick auf Ihre Ziele.

• Flexiblen Zeitplan mit realistischen Meilensteinen

Umsetzung

Analyse

Zieldefinition

Agenturauswahl

Grobkonzept

Feinkonzept

Umsetzung

51 51

Umsetzung: So nicht …

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

52

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

Haben Sie weitere Fragen?

Dann rufen Sie uns an!