Grundlagen des Webdesigns. Analyse einer Website nach den Aspekten Planung, Gestaltung und Promotion

Inhaltsverzeichnis

Abbildungsverzeichnis

1. Einführung

2. Unternehmensprofil der Hochschule für angewandtes Management

3. Planung
3.1 Information und Analysen
3.1.1 Websitestrategie
3.1.2 Ziele der Website
3.1.4 Corporate Identity Vorgaben
3.1.5 Features der Website
3.2 Strukturdesign
3.2.1 Inhaltlicher Aufbau
3.2.2 Sitestrukturmodell
3.3 Interaktionsdesign
3.3.1 Navigationskonzept
3.3.2 Persistente Navigation
3.3.3 Das Navigationslayout

4. Gestaltung
4.1 Layoutaufteilung
4.2 Bildschirmtypografie
4.3 Farbgestaltung
4.3.1 Farbwirkung
4.3.2 Farbkontraste
4.3.3 Bildkonzept

5. Promotion
5.1 Suchmaschinenoptimierung
5.1.1 Analyse
5.1.2 Onsite-Optimierung
5.1.3 Offsite-Optimierung

6. Fazit und Ausblick

Literaturverzeichnis

Abbildungsverzeichnis

Abbildung 1: Startseite http://www.marketing-kommunikation-studium.de

Abbildung 2: Startseite http://www.fham.de

Abbildung 3: Die drei Säulen einer Corporate Identity: Corporate Design, Corporate Communication, Corporate Behaviour.

Abbildung 4: Komponenten eines Corporate Designs.

Abbildung 5: Äußeres Erscheinungsbild der beiden Webauftritte.

Abbildung 6: Darstellung des Blogs.

Abbildung 7: Ansicht der Menüleiste.

Abbildung 8: Darstellung der Baumstruktur.

Abbildung 9: Interaktionselemente der Website.

Abbildung 10: Persistente Navigation.

Abbildung 11: Navigationslayout. Aufteilung der Website in Banner, Menü, Page und Footer.

Abbildung 12: Drop-Down-Menü. Das Drop-Down-Menü erleichtert die Bedienung für den Nutzer.

Abbildung 13: Grobe Darstellung des Angebotes auf der Startseite. Bei Interesse können nun über den „Mehr Info“-Button zusätzliche Informationen eingeholt werden.

Abbildung 14: Fehlerhafter Footer der Website.

Abbildung 15: Gegenüberstellung einer Serifenschrift und einer serifenlosen Schrift.

Abbildung 16: Verschiedene Farbsymboliken.

Abbildung 17: Unbuntkontrast zwischen Hintergrund und Text.

Abbildung 18: Bildkonzept der Website.

Abbildung 19: Button auf der Startseite, um weitere Informationen zu erhalten.

Abbildung 20: Eyetracking-Studie zur Google-Suche.

Abbildung 21: Auflistung der relevanten Keywords für den Blog.

Abbildung 22: Ansicht in den Suchergebnissen: Mit Eingabe der Internetadresse der Website in der Suchmaschine, erscheint diese folgendermaßen in den Google-Suchergebnissen.

Abbildung 23: HTML-Quellcode der Startseite.

Abbildung 24: Ankertext auf der Website.

Abbildung 25: HTML-Quellcode der Subsite „Örtliche Flexibilität“.

Abbildung 26: Bildeigenschaften einer Grafik (Startseite).

Abbildung 27: Bildeigenschaften einer Grafik (Subsite „Örtliche Flexibilität“).

1. Einführung

In der heutigen Zeit hat beinahe jedes Unternehmen, egal ob große Handelsgruppe, mittelständiges Unternehmen oder kleiner Familienbetrieb, eine eigene Website und auch Privatpersonen erstellen mit wachsender Begeisterung ihre eigene Webpräsenz. Die Website wird als Visitenkarte der Neuzeit angesehen und gewinnt aufgrund der zunehmenden Tendenz der Gesellschaft, ihr soziales Leben und den Konsum in das Internet zu verlagern, immer mehr an Bedeutung¹ - denn wer im Internet nicht zu finden ist, existiert nicht! Im Rahmen der Internet-Facts-Studie der AGOF wurde festgestellt, dass 51,40 Millionen Deutschsprachige über 14 Jahren in Deutschland das Internet nutzen und sich 96,5 Prozent online über Produkte und Dienstleistungen informieren – somit kann sich das Internet als eines der wichtigsten Werbeträger behaupten.² Es ist daher unverzichtbar, eine Website zu kreieren, welche dem Besucher durch innovatives Design, akkurate Wortwahl, ansprechende Farbenwahl und guter Stellenplatzierung in den Suchmaschinen unvermittelt ins Auge springt. Die Bedeutung des Webdesigns wird im Rahmen dieser Studienarbeit anhand einer detailierten Analyse einer Webseite der Hochschule für angewandtes Management, oder kurz HAM, verdeutlicht: http://www.marketing-kommunikation-studium.de. Dabei unterteilt sich die Analyse inhaltlich und strukturell in die drei Themenbereiche Planung, Gestaltung und Promotion.

2. Unternehmensprofil der Hochschule für angewandtes Management

Die Hochschule für angewandtes Management ist heute die größte private Hochschule im Freistaat Bayern, welche vom Bayrischen Staatsministerium für Wissenschaft, Forschung und Kunst volle staatliche Anerkennung genießt. Alle angebotenen Studiengänge sind durch die FIBAA akkrediert und die erworbenen akkademischen Grade dürfen international ohne Einschränkung geführt werden.

Die Trägerschaft der Hochschule ist privat, Forschung und Lehre werden darüber hinaus von zahlreichen Partnern und Sponsoren gestützt. Nach der erfolgreichen Gründung im Jahr 2004 in Erding kamen in hoher Frequenz neue Standorte hinzu. Neben einem Campus in Erding ist die Hochschule auch an Standorten in Bad Tölz, Günzburg, Neumarkt, Treuchtlingen, Unna sowie mit einem Campus in Berlin vertreten.³

Besonders relevant für diese Studienarbeit ist der wirtschaftspsychologische Studiengang Kommunikations- und Werbemanagement, welcher seit dem Wintersemester 2011/2012 als Bachelor-Studiengang angeboten wird. Im Rahmen dieses Studiengangs werden sowohl wissenschaftliche als auch methodische Fachkenntnisse aus der Betriebswirtschaft und Werbepsychologie vermittelt und mit den praktischen Herausforderungen der Kommunikations- und Werbebranche verknüpft. Zudem ist geplant, den Studiengang im kommenden Wintersemester 2013/2014 auch als Master-Studiengang anzubieten um bereits erworbene Fachkenntnisse in diesem Bereich zu vertiefen.

Für die Hochschule lassen sich im Allgemeinen drei Hauptzielgruppen definieren: einerseits die aktuellen und potenziellen Studenten, anderseits die Dozenten und die Arbeitgeber, welche in Kooperation mit der Hochschule ein duales Studium anbieten.

3. Planung

Der Schlüssel zu einer erfolgreichen Website ist eine ausführliche Planung. Dabei müssen verschiedene Aspekte betrachtet werden, wie allgemeine Informationen rund um die Website, das Strukturdesign und das Interaktionsdesign.

3.1 Information und Analysen

Die erste Phase in einem Gestaltungsprojekt ist immer die Informations- und Analysephase. Dabei ist zu beachten, dass eine Website immer in enger Zusammenarbeit mit dem Kunden entwickelt werden sollte, denn nur so kann sowohl der Erfolg einer Website als auch die Zufriedenheit des Kunden sichergestellt werden.⁴ Dabei müssen Strategien, Ziele, Zielgruppe und Features klar definiert werden, damit eine durchgängige Orientierung an den Bedürfnissen und Wünschen der Besucher der Webseite sichergestellt werden kann.

3.1.1 Websitestrategie

Ausgangspunkt für die Erstellung einer Website ist die Wahl der Strategie, welche der Internetauftritt verfolgen soll. Die am häufigsten anzutreffenden Websites sind diejenigen, die ein Unternehmen, eine Organisation oder auch ein Produkt repräsentieren – sie werden daher als Unternehmensre-präsentation, Branding- oder Image-Site bezeichnet.⁵ Eine solche Strategie ist auch bei unserem Beispiel anzutreffen: Die Website soll die Hochschule und vor allem den wirtschaftspsychologische Studiengang Kommunikations- und Werbemanagement von der besten Seite repräsentieren. Sie gilt als Visitenkarte der Hochschule und der Eindruck, welchen der Besucher von der Site hat, bestimmt, welchen Eindruck er von der Hochschule oder dem Studienangebot bekommt (Abbildung 1).

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 1: Startseite http://www.marketing-kommunikation-studium.de⁶

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 2: Startseite http://www.fham.de⁷

Dabei ist jedoch zu beachten, dass es sich hierbei nicht um die offizielle Website der Hochschule handelt (Abbildung 2), sondern lediglich um eine zusätzliche Informationsquelle, welche sich in erster Linie auf den wirtschaftspsychologischen Bachelor- und Masterstudiengang Kommunikations- und Werbemanagement fokussiert.

3.1.2 Ziele der Website

Das Ziel der Website http://www.marketing-kommunikation-studium.de ist, für den Bachelor- und Masterstudiengang Wirtschaftspsychologie mit Branchenfokus Kommunikations- und Werbemanagement neue Anmeldungen für das kommende Wintersemester 2013/2014 zu generieren. Dies soll unter anderem damit erreicht werden, dass die Bekanntheit der Hochschule bei der Kernzielgruppe gesteigert wird. Es sollen also neue Interessenten gefunden werden, welche motiviert sind, ein Studium an der Hochschule für angewandtes Management zu beginnen. Voraussetzung hierfür ist das Interesse der Zielgruppe zu wecken und Informationen über die Hochschule und den Studiengang überschaubar und ansprechend anzubieten. Das Ziel wird als durchaus realistisch erachtet und die Evaluation des Erfolges kann ohne großen Aufwand anhand der Auszählung der getätigten Anmeldungen ermittelt werden.

3.1.3 Zielgruppe

„Eine Analyse der anvisierten Zielgruppen ist unumgänglich, um auf diese Weise spezielle gestalterische Anforderungen je nach Zielgruppe zu ergründen und so zur Gestaltungsanregung nutzen zu können.“⁸

Die Definition der Zielgruppe ist bei der Planung einer Website daher von zentraler Bedeutung, denn dem Webdesigner muss von Anfang an bewusst sein, welches Publikum anzusprechen ist. Eine Website, die nicht nach den Bedürfnissen, Interessen und Erwartungshaltungen der Zielgruppe ausgerichtet ist, ist wenig erfolgsversprechend. Bei der Zielgruppenanalyse ist jedoch zu beachten, dass es nicht nur einen spezifischen Nutzer gibt, sondern dass mit Hilfe des Internets viele verschiedene Menschen zusammengeführt werden, die aus verschiedenen Bildungsschichten, sozialen Strukturen und Altersklassen stammen und entsprechend ihrem Hintergrund unterschiedliche Bedürfnisse, Interessen und Erwartungshaltungen an die Website haben.⁹

Um das festgelegte Ziel, nämlich die Generierung neuer Anmeldungen für das Studium der Wirtschaftspsychologie, zu erreichen, wird im Folgenden die für die Website relevante Zielgruppe der potenziellen neuen Studenten untersucht. Diese Zielgruppe umfasst sowohl Abiturienten und Studenten, als auch aufgrund des semivirtuellen Studienkonzeptes ambitionierte Berufstätige, welche sich Rahmen der Wirtschaftspsychologie neben dem Beruf fortbilden möchten. Des Weiteren ist zu beachten, dass sich das Studienkonzept optimal mit der Familie vereinbaren lässt, sodass sich das Studium auch für junge Eltern anbietet. Das Alter der anvisierten Zielpersonen liegt überwiegend zwischen 18 und 30 Jahren. Eine spezifische regionale Einschränkung gibt es hier nicht, da aufgrund der kurzen intensiven Präsenzphasen der Standort nur eine untergeordnete Rolle spielt. Wichtig ist lediglich, dass nur deutschsprachige Länder und Regionen angesprochen werden sollten, weil die Studieninhalte derzeit nur in deutscher Sprache zur Verfügung stehen. Da es sich bei den anvisierten Zielpersonen um ein recht junges Publikum handelt ist davon auszugehen, dass die Zielgruppe sich überwiegend über das Internet informiert – daher fungiert der Internetauftritt der Hochschule als ein Kernelement der Kommunikation.

Ausschlaggebend ist die Analyse der Zielgruppe vor allem für die Wahl des Designs der Website, denn hier klärt sich, ob die Website in die Corporate Identity der Hochschule eingegliedert wird.

3.1.4 Corporate Identity Vorgaben

Fast alle Unternehmen und Institutionen, die einen Webauftritt planen, sind bereits mit einer speziellen gestalterischen Erscheinungsform in der Öffentlichkeit vertreten – sie haben ein Corporate-Identity-Konzept.¹⁰ Die Corporate Identity beschreibt das Selbstverständnis eines Unternehmens oder einer Institution mit dem übergreifenden Ziel, nach innen und außen als geschlossene Einheit aufzutreten. Wie in Abbildung 3 zu sehen ist, stützt sich die Corporate Identity auf drei Säulen: Corporate Design, Corporate Communication und Corporate Behaviour.¹¹

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 3: Die drei Säulen einer Corporate Identity: Corporate Design, Corporate Communication, Corporate Behaviour.¹²

Besonders relevant für das Webdesign ist das Corporate Design des Unternehmens, denn bereits bei der Planung muss berücksichtigt werden, dass sich die Website an diesem orientieren sollte. Darunter ist das innere und äußere Erscheinungsbild eines Unternehmens oder einer Institution zu verstehen und es sorgt dafür, dass das Unternehmen einmalig, unverwechselbar und individuell wird.¹³ Eine konsequente Einhaltung des Corporate Designs sorgt für ein einheitliches Erscheinungsbild und einen hohen Wiedererkennungswert. In Abbildung 4 sind die wichtigsten Komponenten eines Corporate Designs dargestellt.

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 4: Komponenten eines Corporate Designs.¹⁴

Auffällig bei der Analyse der Website http://www.marketing-kommunikation-studium.de ist, dass das bereits vorhandene Corporate Design der Hochschule größtenteils nicht berücksichtigt wurde. Lediglich die Verwendung des Logos der Hochschule lässt darauf schließen, dass die beiden Websites in Zusammenhang stehen – im Farb- und Schriftkonzept, sowie in der Wahl des Layouts und des Gestaltungsrasters unterscheiden sich die beiden Webauftritte jedoch erheblich.

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 5: Äußeres Erscheinungsbild der beiden Webauftritte¹⁵.

Hier lässt sich im Rahmen der Analyse jedoch nur spekulieren, ob die fehlende Anlehnung an das Corporate Design eine Folge mangelhafter Planung war, oder ob durch die Gestaltung der Website eine bewusste Abgrenzung geschaffen werden sollte.

3.1.5 Features der Website

Im Verlauf der Planungsphase wird außerdem geklärt, ob die Website besondere Features beinhalten soll, wie beispielsweise einen Warenkorb, Memberbereich oder ein Forum.¹⁶ Bei der zu analysierenden Website wurde ein Blog eingerichtet (Abbildung 6) – darunter versteht man „ständig aktualisierte und kommentierte Tagebuchbeiträge, die mittels der RSS-Technologie abonniert werden können“.¹⁷

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 6: Darstellung des Blogs¹⁸.

Blogs stellen einen hervorragenden Weg dar, um mit interessierten, hoch-involvierten Kunden in direkten Kontakt zu treten. Die Chancen, die im Aufbau eines aktiven Blogs liegen, präsentieren sich vielschichtig, denn mit informativen Content und der richtigen Zielgruppenansprache kann es gelingen kommunikative Kontaktpunkte zu knüpfen, welche nicht nur der Kundeninformation dienen, sondern auch das Kundenerleben beeinflussen.¹⁹

3.2 Strukturdesign

Bei dem sogenannten „Strukturdesign“ handelt es sich um konzeptionelle Designarbeit, welche das spätere Interaktions- und Interfacedesign beeinflusst. Ziel des Strukturdesigns ist es, alle vorgesehenen Websiteinhalte in einer logischen Beziehungsstruktur einander zuzuordnen.²⁰

3.2.1 Inhaltlicher Aufbau

Zu Beginn der Sitestrukturierung muss herausgearbeitet werden, was mit der Site vorrangig beabsichtigt wird. Wie bereits in Kapitel 3.1.2 erläutert wurde, soll die Website http://www.marketing-kommunikation-studium.de über das Studienkonzept der HAM, sowie über den wirtschaftspsychologischen Studiengang Kommunikations- und Werbemanagement informieren und so letztendlich neue Anmeldungen für das kommende Wintersemester generieren. Wie in Abbildung 7 zu sehen ist, wurden die Informationen aufgrund dieser Ziele nutzergerecht organisiert und in sinnvolle Rubriken eingeteilt.

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 7: Ansicht der Menüleiste.²¹

3.2.2 Sitestrukturmodell

Die Struktur einer Website beschreibt ihren logischen Aufbau und die Beziehung zwischen den verwendeten Elementen. Sie spielt eine zentrale Rolle und ist sozusagen das Skelett der multimedialen Anwendung: Bei einem falschen Aufbau wird der Nutzer den gesuchten Inhalt nicht finden und die Website verlassen – womöglich für immer.

Bei der zu analysierenden Website wurde die sogenannte Baumstruktur verwendet – das mit Abstand am häufigsten verwendete Sitestrukturmodell. Grund hierfür ist die intuitive Benutzerführung und die einfache Bedienung. Diese Struktur bietet dem Nutzer auf jeder Ebene die Möglichkeit, sich für einen Ast zu entscheiden und hierdurch eine Ebene tiefer zu gelangen. Die Rückkehr erfolgt entweder in umgekehrter Weise von Ebene zu Ebene, oder über die direkte Rückkehr zur Startseite durch einen entsprechenden Button.²²

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 8: Darstellung der Baumstruktur.²³

3.3 Interaktionsdesign

Nachdem im vorangegangenen Strukturdesign die logische Ordnung der vorhandenen Informationen analysiert wurde, beschäftigt sich dieser Teil der Arbeit mit der Analyse des Navigationskonzeptes, welches dem Nutzer den Zugang zu den Informationen verschafft.

3.3.1 Navigationskonzept

Die Wahl eines geeigneten Navigationskonzeptes hängt wesentlich vom Umfang der navigierbaren Kategorien, der Breite und der Tiefe der gewählten Navigationsstruktur ab.²⁴ Da es sich bei der zu analysierenden Website um eine sehr kleine und übersichtliche Site handelt, kommt diese mit nur wenigen Interaktionselementen aus, welche in Abbildung 9 dargestellt sind:

Im linken Bereich des sogenannten Banners ist das Logo der Hochschule platziert, welches als Rücklink zur Startseite fungiert (1). Unterhalb des Banners befindet sich die Hauptnavigation mit diversen Unterebenen (2). Diese ermöglicht dem Besucher, sich selbstständig durch das Angebot zu navigieren und die interessanten Inhalte auszuwählen. Auf den Unterseiten ist zudem eine Pfadnavigation, auch als Breadcrumbtrail bekannt, platziert (3), welche den Benutzern erlaubt, schnell zu einer vorher besuchten Sektion oder auf die Startseite zurückzukehren. Zudem befindet sich im oberen rechten Teil der Website eine Suchfunktion (4). Jakob Nielsen, der viele Usability-Studien durchführte und sich intensiv mit dem Surfverhalten von Websitebesuchern beschäftigte, stellte im Rahmen seiner Studien fest, dass die Suchfunktion ein wichtiger Bestandteil einer Website ist und teilweise von bis zu 50 Prozent der Besucher genutzt wird.²⁵ Auf der Startseite lässt sich außerdem eine seiteninterne Navigation mit Ankerlinks feststellen (5), welche den Interessenten ermöglicht, weitere Informationen zu den umrissenen Themen zu erhalten.

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 9: Interaktionselemente der Website²⁶.

3.3.2 Persistente Navigation

Auf der Website wurde eine sogenannte „persistente Navigation“ verwendet. Dieser Ausdruck beschreibt einen Satz von Navigationselementen, die auf jeder Seite wiederkehrt und der Website so ein einheitliches Aussehen vermittelt. Eine persistente Navigation befriedigt demnach das Bedürfnis des Nutzers nach zuverlässiger Orientierung und gibt ihm Sicherheit durch ein konsistentes Navigationsangebot (Abbildung 10).²⁷

Die persistente Navigation der Website beinhaltet beispielsweise eine Sitekennung, welche die gesamte Seite repräsentiert. Diese besteht bei der gewählten Website aus der konsistenten Präsentation des Hochschullogos, welches auf die Startseite verlinkt. Zudem wird auch das Hauptmenü kontinuierlich auf allen Seiten angezeigt. Dieses ermöglicht dem Nutzer sich durch die Sitehierarchie zu navigieren. Ein zusätzlicher Weg zurück zur Startseite neben dem Logo-Rücklink, bietet dem Nutzer die Möglichkeit, jeder Zeit neu anzufangen, auch wenn er sich möglicherweise auf der Site geirrt hat. Zuletzt dient die Darstellung der Suchfunktion dem schnellen Auffinden bestimmter Seiten.

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 10: Persistente Navigation²⁸.

[...]

---

¹ Vgl. Gutheim, P. (2008), Seite 68

² Vgl. http://www.agof.de/weitere-informationen-ansehen.583.de.html, Abruf 12.09.2013

³ Vgl. zu diesem Absatz www.fham.de, Abruf 13.09.2013

⁴ Vgl. Gutheim, P. (2008), Seite 5

⁵ Vgl. Hammer, N. et. Al. (2009), Seite 37

⁶ Abb.1: Screenshot http://www.marketing-kommunikation-studium.de, Abruf 13.09.2013

⁷ Abb.2: Screenshot http://www.fham.de, Abruf 13.09.2013

⁸ Vgl. Hammer, N. et. Al. (2009), Seite 155

⁹ Vgl. Gutheim, P. (2008), Seite 8

¹⁰ Vgl. Hammer, N. et. Al. (2009), Seite 158

¹¹ Vgl. Böhringer, J. et. Al. (2008), Seite 546 f.

¹² Abb. 3: Eigene Darstellung in Anlehnung an Böhringer, J. et. Al. (2008), Seite 546

¹³ Vgl. Böhringer, J. et. Al. (2008), Seite 549

¹⁴ Abb. 4: Eigene Darstellung in Anlehnung an Böhringer, J. et. Al. (2008), Seite 549

¹⁵ Abb. 5: Eigene Darstellung

¹⁶ Vgl. Gutheim, P. (2008), Seite 12

¹⁷ http://wirtschaftslexikon.gabler.de/Definition/blog.html, Abruf 13.09.2013

¹⁸ Abb. 6: Screenshot http://www.marketing-kommunikation-studium.de/?cat=1, Abruf 13.09.2013

¹⁹ Vgl. zu diesem Absatz Fischer, P. et. Al. (2011), Seite 137

²⁰ Vgl. Hammer, N. et. Al. (2009), Seite 164

²¹ Abb.7: Screenshot http://www.marketing-kommunikation-studium.de, Abruf 13.09.2013

²² Vgl. zu diesem Absatz Böhringer, J. et. Al. (2008), Seite 471 f.

²³ Abb. 8: Eigene Darstellung in Anlehnung an Böhringer, J. et. Al. (2008), Seite 472

²⁴ Vgl. Hammer, N. et. Al. (2009), Seite 172

²⁵ Vgl. Hammer, N. et. Al. (2009), Seite 179

²⁶ Abb. 9: Eigene Darstellung

²⁷ Vgl. zu diesem Absatz Hammer, N. et. Al. (2009), Seite 174

²⁸ Abb.10: Eigene Darstellung