ifdblog_beta » Gruppe 6

IDENTITÄT & PROFIL

Wiebke — Sun, 19 Jul 2009 19:14:56 +0000

Typologien
Beim Entwurf eines Erscheinungsbildes für ein Portal wie das PRTR, welches der breiten Öffentlichkeit aber auch zahlreichen anderen Zielgruppen zugänglich gemacht werden soll, kommt es darauf an, die zukünftigen Nutzergruppen genau zu kennen und deren Interessen und Ziele zu analysieren. Im Design-Prozess geschieht dies üblicher Weise mittels so genannter Typologien. Dabei werden typische Vertreter der verschiedenen Interessen- bzw. Zielgruppen visualisiert, um sich wortwörtlich ein besseres Bild von ihnen machen zu können. Durch erdachte Personen, die ein bestimmtes Alter besitzen, einer bestimmten Tätigkeit oder Beruf nachgehen und deren Umfeld und Tagesablauf durch Bildmaterial gezeigt wird, kann man sich besser in die Zielgruppen hineinversetzen und die Berührungspunkte zwischen den Personen und dem Portal genauer untersuchen.

Interessen-/ Zielgruppe “Bildungseinrichtungen”
Jackie ist 14 Jahre alt, geht zur Schule und trifft sich in ihrer Freizeit am liebsten mit ihren Freundinnen oder telefoniert mit ihnen. Sie bastelt gerne Origami und spielt mit ihrem kleinen Hund. Jackie benötigt Thru.de, um für ein Referat im Fach Chemie zum Thema Emissionen zu recherchieren.

Interessen-/ Zielgruppe “Interessierte Öffentlichkeit”
Lewis studiert Geographie und Geoökologie und arbeitet nebenbei zusammen mit seiner Freundin ehrenamtlich für eine Umweltorganisation. Für diese Arbeit reist er viel durch die Welt und benötigt Thru.de, um für seine geplanten Umweltaktionen recherchieren zu können.

Interessen-/ Zielgruppe “Wissenschaftliche Einrichtungen”
Regina, 42 Jahre alt, arbeitet als wissenschaftliche Mitarbeiterin an einem Institut für Umweltfoschung im Fachbereich Aquatische Ökosystemanalyse. Sie verwendet Thru.de daher vorwiegend beruflich, um gemessene Werte vergleichen und untersuchen zu können. In ihrer Freizeit lebt sie für ihren Garten und ihren Kater.

Interessen-/ Zielgruppe “Wirtschaft”
Edward arbeitet als Public Relations Manager für eine Papierfabrik und benötigt Thru.de vorwiegend, um die Emissionswerte von anderen Vetretern der Papierbranche einsehen und mit denen des eigenen Unternehmens vergleichen zu können. In seiner Freizeit unternimmt er gern Bootstouren mit seinem Sohn.

Profilkriterien
- gründlich
- einfach / klar
- aufschlussreich
- beliebt
- ermutigend

Positionierung
PRTR soll die Allgemeine Öffentlichkeit, Wisseneschaftler und Behörden über den Ausstoß und das Verbleiben von Emissionen (verursacht von großen Industriebetrieben in Deutschland) und deren Grenzwerte informieren.

PRTR ermöglicht …
- Industrieunternehmen, ihre Emissionsdaten zu veröffentlichen.
- der Öffentlichkeit die Informationen abzurufen.
- Politikern zu recherchieren und Entscheidungen zu treffen.
- Wisseneschaftlern ihre Forschungsergebnisse zu präsentieren und auszutauschen.

Es soll das Umweltbewusstsein möglichst vieler Bürger wecken und hat somit als langfristiges Ziel die Verbesserung der Umweltsituation durch Minimierung von Emissionen. PRTR soll zu einem umfassenden Umwelt-Portal werden, auf dem sich Jedermann über das Thema Umwelt im Allgemeinen aber im Besonderen über Emissionsdaten deutscher Industrieunternehmen informieren kann. Es soll interessierten Personen die Möglichkeit zum Austausch untereinander bieten. Es soll in Hinblick auf Umweltbewusstseins motivierend wirken und beim Benutzen Freude bereiten. Gleichzeitig soll es aber eine offizielle, vertrauenswürdige und zuverlässige Informationsquelle bleiben.

Naming
Im Kurs fiel die Wahl auf zwei Favoriten, die wir für den Corporate Design Prozess verwenden konnten: efa oder thru.de. Wir entschieden uns für thru.de, mit der Herausforderung, dem PRTR ein neues Gesicht zu geben, welches nicht mit einer altmodischen Frau namens Thrude assoziert wird.

Moodboard

Das Moodboard dient zur Visualisierung des zukünftigen Gesichts von Thru.de, also welche Anmutung, welche Stimmung oder Atmosphäre durch das Portal wiedergegeben werden soll. Dazu dient eine Bildcollage, welche auch die oben genannten Profilkriterien wiederspiegeln soll. Außerdem zeigt es erste Bestandteile unseres späteren Farbklimas (Orange als Primärfarbe, um sich von anderen PRTRs abzuheben).

————————————————————————————————————————————————————————————————————————————————

Bildquellen Typologien und Moodboard (alle abgerufen Juni 2009):
** Typologie Jackie | Mädchen: http://sacklunchconspiracy.blogspot.com/2008/05/hot-or-not.html | Mobile: http://www.flickr.com/photos/lula_lala/3403578443/ | Origami: http://www.okway.hamburg.de/images/origami.jpg | Zimmer: http://www.flickr.com/photos/7544748@N02/3025757528/sizes/l/ | Hund: http://dogs-breeders.blogspot.com/2008/10/yorkshire-terrier.html | Schule: http://www.flickr.com/photos/waski_the_squirrel/2301466556/sizes/l/ **
** Typologie Lewis | Mann im Wasser: http://2.bp.blogspot.com/__kB8AtmlbnU/SXo5qdvYP9I/AAAAAAAAAII/CyipRUnH7Mc/s1600-h/river.jpg | Bücherregal: http://www.flickr.com/photos/7859144@N02/2516278911 | Frau mit Rucksäcken: http://3.bp.blogspot.com/__kB8AtmlbnU/Sfi20zBB5yI/AAAAAAAAAa4/HBO1Py7FDfY/s1600-h/100_1228.JPG | Gitarre: http://www.flickr.com/photos/32382508@N00/1258160900/ | Demonstration: http://www.thewe.cc/thewei/&/&/images4/corporation_law/i_want_to_live.jpe **
** Typologie Regina | Laborantin: http://www.bmu.de/files/bilder/allgemein/image/jpeg/st_06_bms.jpg | Frau: Eigenes Foto © Wiebke Strehlitz | Haus: http://www.casa-centra.de/images/immobilien/Hohn2.jpg | Wassermessung: http://www.bmu.de/files/bilderdatenbank/image/pjpeg/fi021_bms.jpg | Schubkarre im Garten: http://www.maturetimes.co.uk/files/image/gardening%20guru%20sept.jpg | Katze: http://www.flickr.com/photos/7771617@N04/466518615/ **
** Typologie Edward | Wohnzimmer: http://www.maryhardestyrealty.com/127-Pearl/Living-Room.jpg | Papierstapel: http://www.flickr.com/photos/49361995@N00/460450753/ | Fabrik: http://www.froihofer.net/fileadmin/images/oulu/images/Papierfabrik_02.jpg | Yacht: http://www.blissfulboating.com/sites/ckmacnulty/_files/Image/power%20boat%20GL-111.jpg | Junge: http://www.carolinakidsacademy.com/site/media/images/Boy-playing-with-Legos.jpg | Mann: http://www.flickr.com/photos/adwriter/1430618662/sizes/o/ **
** Moodboard | Blüte: http://www.flickr.com/photos/kjunstorm/2387287503/ | Himmel: http://www.flickr.com/photos/80651083@N00/3035957753/ | Flüssigkeit: http://www.die-bayerische-chemie.de/Bilder/Branche/fluessigkeit-orange.jpg | Silos: aboutpixel.de / Silos © chhmz (http://www.aboutpixel.de/spezialDetail.php4?image_id=40639) | Mann mit Lupe: http://www.flickr.com/photos/andercismo/2349098787/in/photostream/ | Container: aboutpixel.de / Container © chhmz (http://www.aboutpixel.de/spezialDetail.php4?image_id=40630) | Schornstein im Wald: aboutpixel.de / Rettet den Wald_1 © Rainer Sturm (http://www.aboutpixel.de/spezialDetail.php4?image_id=45105) | Pflanzenzwiebel: http://www.flickr.com/photos/pjmcadie/3179661198/ | Schläuche: aboutpixel.de / Greeeeeen © Uwe Dreßler (http://www.aboutpixel.de/spezialDetail.php4?image_id=35787) **

CORPORATE DESIGN BASICS

Wiebke — Sat, 18 Jul 2009 19:41:18 +0000

Logo

Nach der Entscheidung für den Namen „Thrude“ begaben wir uns auf die Suche nach einer Art Gesicht, welches die Bedeutung des Namen von dem altbackenen Frauennamen wegleitet und trotzdem die Funktion des PRTR unterstützt. Dabei kam uns die Idee der Eule, als ein Tier, welches extrem gute Augen besitzt und sogar bei Nacht sehen kann, also „genau hinschaut“. Diese Metapher unterstützt den Zweck des PRTR, „Emissionen sichtbar“ zu machen.
Die Analaye anderer europäischer PRTRs ergab, dass deren Auftritte (insofern ein Logo vorhanden ist), meist blau oder grün gestaltet sind. Um Thrude davon abzuheben, entschieden wir uns für ein freundliches und ermutigendes Orange. Der an die Gestalt der Eule angepasste Schriftzug thru.de setzt sich aus modifizierten Lettern der FF Info Book zusammen (Hausschrift).
Für den Einsatz im Web gestalten wir außerdem noch diese Logo Animation [SWF-Film, 14,1 KB].

Farbklima
Das Thru.de-Farbklima besteht aus den drei Primärfarben Thrange (Thrude Orange), Cementgray und Weiß, welche für das Logo (und den dazugehörigen Claim) verwendet werden. Die Sekundärfarben setzten sich aus Deepsea (Blau), Oak (Grün), Goldenroad (Gelb), Carmine (Rot) und Cementgray (Grau) zusammen und können zum Beispiel für Anwendungen im Web auch in verschiedenen Abstufungen verwendet werden.

Bildsprache

Die Bildsprache setzt sich aus zweierlei Bildstilen zusammen. Zum einen werden ausschnitthafte, großzügig angeschnittene Fotos von Industriemotiven verwendet, welche den „zoomenden“ Blick der Eule wiedergeben sollen. Zum andern werden freigestellte Objekte (mit leichtem Schatten unterlegt) eingesetzt, welche durch ihre symbolischen Bedeutungen den Zweck von Thrude erkennbar machen sollen.

Schriften

Als Hausschrift entschieden wir uns für die FF Info (Schnitt “Book”) von Erik Spiekermann (1996). Um ein einheitliches Erscheinungsbild zu schaffen, wählten wir als Fließtextschrift die FF Info Text (Schnitt “Normal”), welche Erik Spiekermann bis 2000 in Zusammenarbeit mit Ole Schäfer entwickelte.

Grafische Elemente

In der Thru.de-Imagebroschüre (siehe Kategorie LAYOUTSPRACHE) kommt neben den großformatigen Bildern ein zusätzliches grafisches Mittel zum Einsatz: die Outline der Icons, welche auf dem Kartenmaterial des Webportals zur Visualisierung der unterschiedlichen Industriezweige dienen.

————————————————————————————————————————————————————————————————————————————————

Bildquellen Bildsprache (alle abgerufen im Juli 2009):
** Bildblock links | Silos: aboutpixel.de / Silos © chhmz (http://www.aboutpixel.de/spezialDetail.php4?image_id=40639) | Grüne Industrie: aboutpixel.de / Industrie © chhmz (http://www.aboutpixel.de/spezialDetail.php4?image_id=46321) | Arbeitshandschuh: Should we always work by cemito (http://www.picfor.me/de/viewimg/94113) | Schläuche: aboutpixel.de / Greeeeeen © Uwe Dreßler (http://www.aboutpixel.de/spezialDetail.php4?image_id=35787) | Container: aboutpixel.de / Container © chhmz (http://www.aboutpixel.de/spezialDetail.php4?image_id=40630) | Abwasser: aboutpixel.de / IndustrieAbwasser © Sven Schneider (http://www.aboutpixel.de/spezialDetail.php4?image_id=35723) | Blauer Müllcontainer: aboutpixel.de / closed © Dominik Sellmann (http://www.aboutpixel.de/spezialDetail.php4?image_id=33647) | Kühltürme mit Wolken: Clouds factory by Krolikus (http://www.picfor.me/de/viewimg/94112) | Schornstein im Wald: aboutpixel.de / Rettet den Wald_1 © Rainer Sturm (http://www.aboutpixel.de/spezialDetail.php4?image_id=45105) | Säuretank: aboutpixel.de / Säuretank © pfirsichmelba (http://www.aboutpixel.de/spezialDetail.php4?image_id=9830) **
** Bildblock rechts | Eigene Fotos © Lynde Scott, Wiebke Strehlitz **

LAYOUTSPRACHE

Wiebke — Fri, 17 Jul 2009 15:56:59 +0000

Imagebroschüre
Die Thru.de-Imagebroschüre soll zukünftigen Nutzern die Ziele und Zwecke des Emissonsportals erklären und Ihnen näher bringen. Das Layout der Imagebroschüre gliedert sich in die Einheit aus Webauftritt und Imageplakaten ein: klare Gliederung, viel Weißraum, viel Bildmaterial. Dabei finden die in der vorherigen Kategorie beschriebenen CORPORATE DESIGN BASICS ihre Anwendung.

Raster und Kompositionsprinzipen
Die Texte der Imagebroschüre werden in einem variablen 6-Spalten-Raster platziert. Fotos und Bilder finden halb- oder ganzseitig ihre Anwendung. Freigestelltes Bildmaterial wird ebenfalls im Raster und möglichst achsenparallel zum Text angeordnet.

Beispielseiten

EVALUATION

Wiebke — Thu, 16 Jul 2009 16:00:14 +0000

Nutzergruppe Politiker
PRTR soll als E-Government-Instrument zum Bürokratieabbau beitragen und Prozesse optimieren. In Form einer zeitgemäßen Informationsdarstellung soll es für Transparenz bei den Bürgern sorgen, aber auch zu deren Partizipation beitragen. Für Beamte und Politiker soll die Arbeit erleichtert werden, in dem immer mehr Verwaltungsprozesse reduziert und Aktenordner überflüssig werden. PRTR trägt als ein kleiner Teil aber als Leuchtturmprojekt des Umsetzungsplanes “E-Government 2.0” zum Bild eines modernen Staates bei. Deswegen nahm unsere Gruppe eine Evaluation der alten PRTR-Website unter den Gesichtspunkten der Nutzergruppe “Politiker” vor. Die Evaluation kann im Detail in folgender PDF nachvollzogen werden: Evaluation Nutzergruppe Politiker [PDF, 303 KB]

Zusammengefasst lässt sich das Ergebnis anhand folgender Grafik betrachten:

Daher lauteten unsere Optimierungsvorschläge (OV) für die neue Website (die teilweise schon mit dem Relaunch am 3. Juni 2009 umgesetzt wurden):

- OV für Content & Funktionalität:

Problem: Anforderungserfüllung an verschiedene Zielgruppen (Trennung nicht vorhanden)
OV: Trennung der Nutzerbereiche (Öffentlichkeit – Wissenschaft, Forschung – Behörden)

(Problem: Kontakt-Link (E-Mail) zu unauffällig und nicht motivierend ihn zu benutzen, weil es kein echter Link ist
OV: Kontakt-Formular zum direkten Ansprechen) — wurde bereits umgesetzt

(Problem: PDF-Dokumente sind auf dem ganzen System zu verstreut anzufinden, eine geordnete Auflistung nach Themen/ Inhalten/ Alphabet fehlt
OV: Extra Download-Bereich, Themen: rechtliche Dokumente; Forschungsberichte; Pressemitteilungen; Leitfäden und Arbeitshilfen) — wurde im „Wiki“ umgesetzt

Problem: Texte zu lang, wenig Konsistenz in der Anordnung
OV: Bessere Gliederung der Texte

(Problem: Direkte Suchfunktion um schon bekannte Industrie-Unternehmen schnell zu finden fehlt
OV: Direkte Suchfunktion, um Unternehmen/ Industriebetriebe zu finden, und deren Emissionswerte aufgelistet zu bekommen (Eingabemaske)) — wurde bereits umgesetzt

- OV für Navigation und Interaktion:

Problem: Navigationsstruktur ist zu komplex und verwirrend
OV: Vereinfachen, weniger Hauptmenü-Punkte

Problem: Suchfunktion (befindet sich an nicht üblichen Positionen) — ist nicht mehr vorhanden
OV: Oben rechts, außerdem: alphabetische Suchfunktion

Problem: Kaum Nutzerbeteiligung vorhanden (Forum bis jetzt nur für Mitarbeiter des PRTR)
OV: Forum für jedermann, Blog mit Kommentarfunktion

- OV für Mediendesign und Präsentation:

Problem: Bis jetzt kein Look & Feel, zu langweilige Aufbereitung, wenig Emotionalität
OV: Einbinden von Bildern, anderes Farbschema, intressanter (fesselnder, es für den Nutzer sympathisch machen) und emotionaler werden

Problem: Bis jetzt kein Einsatz von Medien vorhanden, die den Einsatz der Website unterstützen könnten
OV: Einführungsvideo (Was ist PRTR?), News-Widget, Mobile Anwendungen

WEBDESIGN

Wiebke — Wed, 15 Jul 2009 19:49:47 +0000

Abstract
Nach der ausführlichen Evaluation des vorhanden PRTR-Webportals galt es die festgehaltenen Optimierungsempfehlungen samt unseres Corporate Designs auf Webdesign-Entwürfe anzuwenden. Die finalen Entwürfe zeigen (neben der Erschaffung eines Look & Feel durch die Anwendung des Corporate Designs) die Vereinfachung der Navigationsstruktur, die veränderte Position der Suchfunktion, die verbesserte Aufbereitung von Textmaterial, sowie die leichtere Bedienbarkeit der Kartenfunktion durch das Re-Design der Industriezweig-Icons.

Neue Sitemap
Oberstes Ziel der Optimierung der bisherigen PRTR-Website war, die Navigationsstruktur zu vereinfachen und für Jedermann verständlich zu machen. Wir reduzierten die Anzahl der bisherigen Punkte der Hauptnavigation deutlich und vereinfachten das Wording, damit die Navigation allgemeinverständlicher wird. Die neue Sitemap kann man in folgender PDF betrachten: Sitemap [PDF, 483 KB]

Erste Layout-Entwürfe

Wireframe-Entwurf und Interaktionskonzept
Der Wireframe-Entwurf zeigt die Aufteilung der Seite und die Platzierung der wichtigsten Elemente. Das Interaktionskonzept soll folgendermaßen funktionieren:
Die Navigation baut sich aus drei Containern auf. Der erste Container ist immer sichtbar, er enthält die Hauptnavigation. Erst beim Überfahren per Maus, erscheinen an der Stelle des zweiten Conatiners die jeweiligen Untermenü-Punkte. Falls notwendig, geschieht das selbe mit einem drittem Container (siehe zweites Beispiel der finalen Entwürfe). Auf diese Weise erscheint die Startseite zunächst aufgeräumt und verwirrt nicht mit zu vielen Navigationspunkten auf den ersten Blick. Zum anderen ist die Navigation beim Benutzen jedoch immer vollständig sichtbar und macht eine zusätzliche Breadcrump-Zeile zur besseren Orientierung unnötig (schafft eine bessere Benutzerführung).
Die Suchfunktion befindet sich für die intuitivere Bedienung des Portals nun Rechts von der Navigation. Gleich darunter befinden sich Bedienelemente wie Sprachauswahl, Druckfunktion, RSS-Feed-Button, eine Hilfe-Funktion, sowie Buttons zur Schriftskalierung (Elemente zur Gewährleistung der Barrierefreiheit).
Im Footer-Bereich befinden sich Service-Elemente wie Impressum, Kontakt, Sitemap und Newsletter, welche thematisch nicht in die Hauptnavigation eingeordnet werden und so leichter zu finden sind.

Webdesign (Finale Entwürfe)
Die finalen Webdesign-Entwürfe zeigen in Form der Startseite, einer Seite mit einem längerem Text-Artikel und der Karten-Seite, wie wir die nach der Evaluation festgelegten Optimierungsempfehlungen umsetzten würden und wie wir uns in Verbindung mit unserm Thru.de-Corporate Design das neue Gesicht des PRTR vorstellen.

Icon Design

Beim Icon-Re-Design für das PRTR kam es darauf an, die Icons so zu gestalten, dass ihre Bedeutung einfacher erfassbar wird und sich die einzelnen Zeichen (vor allem in der äußeren Form) besser unterscheiden. Neben den eindeutigeren Formen teilten wir die Icons auerdem in drei farblich getrennte Gruppen. Die blaue Gruppe enthält (von links nach rechts) die Industriezweige “Energiesektor”, “Metallindustrie” und “Mineralverarbeitung”. Die rote Gruppe umfasst “Chemische Industrie”, “Abfall und Abwasser” sowie “Papier- und Holzindustrie”. Die grünen Icons stehen für “Intensivtierhaltung”, “Lebensmittelindustrie” und “Sonstige Industriezweige”.

IMAGEKAMPAGNE

Wiebke — Tue, 14 Jul 2009 15:52:21 +0000

Ideen / Entwürfe
Unsere Idee für die Einführungskampagne für das Emissons- und Umweltportal Thru.de bestand darin, möglichst viele Menschen unterschiedlichster Altersgruppen oder beruflicher Tätigkeiten anzusprechen, weil die Recherche gezeigt hat, das Thru.de von sehr vielen unterschiedlichen Interessen- und Zielgruppen genutzt wird.
Nach diesen Entwürfen entschlossen wir uns, die drei Hauptbereiche die von Emissionen betroffen sind und über die Thru.de Auskunft erteilt (Luft, Wasser und Boden) über eine klare Foto-Symbol-Sprache zu visualisieren.

Plakatserie

Für die Umsetzung der Plakatserie waren großformatige, qualitativ hochwertige Fotos notwendig, welche wir im hochschuleigenen Fotostudio anfertigten. Die Fotos wurden anschließend mit Photoshop bearbeitet, um einen makellosen weißen Hintergrund für die Plakate zu schaffen.
Die Plakate erzielen ihre Wirkung durch das jeweilige Symbol (Eyecatcher) und der dazu passenden Headline, welche die “Reinheit” der Symbole hinterfragt. Der Copytext unter der Headline erklärt den Zweck von Thru.de, das Logo mit dem Claim gibt Thru.de das Gesicht und macht es unverwechselbar.

Die Plakate in der Anwendung: