Sea Turtle

Finale Version

ss188 — 2009-07-07T20:37:00Z

Die fertige Infografik hat nun noch ein Intro bekommen und kann unter diesem Link angeschaut werden. Viel Spaß damit!

Weiterentwicklung der Startseite

ap031 — 2009-07-05T14:35:00Z

Die Startseite wurde nun noch einmal komplett überarbeitet.
Zuerst wurden die doch sehr kindlich wirkenden Buttons wie Schiff, Schildkröte und Wasserpflanzen, die teils auch animiert waren, durch einfache und klare Icons ersetzt. Bei MouseOver der einzelnen Icons erscheint nun ein ToolTip, der dem Nutzer auf einen Blick zeigt, was sich hinter den jeweiligen Icons verbirgt. Außerdem wurde die Schildkröte, die von Icon zu Icon schwimmen kann, durch eine eher realistisch aussehende Schildkröte ersetzt. Auch farblich wurden Veränderungen vorgenommen. Zum einen sind die Buttons nicht mehr dunkelgrau, sondern in einem hellen Cremeton. Dadurch wirkt die Startseite nicht mehr so bedrückend und dunkel. Einen Akzent setzt hierbei auch der grüne ToolTip, dessen Farbe sich in der kompletten Gestaltung der Infografik wiederfindet.

Eine weitere Veränderung ist, dass die schwimmende Schildkröte nun nicht mehr "durchs Wasser fliegt", sondern sich natürlicher bewegt. Dies gelang uns zum einen durch Anpassung der Geschwindigkeit und zum anderen durch das Hinzufügen von mehreren Schlüsselbildern.

Finale Version:

Beim Betrachten unserer erstellten Personas fiel uns auf, dass sich die Nutzer eine einfache und intuitive Bedienung wünschen. Deshalb haben wir einen Infokasten erstellt, der auf der Startseite auftaucht. Dieser Kasten erläutert kurz die Navigationsmöglichkeiten und gibt dem Nutzer außerdem die Möglichkeit, über eine externe Seite den Grünen Meeresschildkröten zu helfen.

Der Kasten lässt sich mit einem Klick minimieren, so dass der Nutzer ihn auch später wieder aufrufen kann.

Vervollständigen und Überarbeiten

ss188 — 2009-06-28T13:24:00Z

So langsam ist ein Ende in Sicht. Wir haben die Inhaltsseiten für die Bereiche Lebensraum, Bedrohung und Brutverhalten nun fertig inkl. Bildergalerie. Das Layout sieht folgendermaßen aus:

Von den Seiten "Spannweite" und "Schnelligkeit" gelangt man nun über einen Pfeil zurück zur "Flosse".

Die Verwendung des Pfeils taucht auch an anderer Stelle wieder auf. Um dem Nutzer die Bedienung der Bildergalerie zu vereinfachen wurden zusätzlich zu den Balken noch Pfeile angebracht. Diese sollen die Funktion der Balken unterstreichen.

Unseren Grünton haben wir wegen besserer Lesbarkeit (weiße Schrift auf grünen Hintergrund) angepasst auf #84C521. Dadurch entsteht ein besserer Kontrast.

Außerdem wurde bei der Schnelligkeitsseite der weiße Rahmen um das Video entfernt. Jetzt grenzt nur noch eine grüne Linie den Bereich ein, in dem die Schildkröte schwimmt.

Farbschema und Schriftart

ap031 — 2009-06-21T20:47:00Z

Passend zum Hintergrund haben wir uns für folgende 4 Grundfarben entschieden, die sich harmonisch in das Gesamtbild einfügen.

Wir haben den Font Myriad Pro sowohl für Headlines als auch für Fließtext gewählt, da sie sehr gut lesbar ist und modern wirkt. Es handelt sich um eine humanistische Sansserif Schrift mit Strichstärkenkontrast und Oberlängen, die höher als die Versalien sind. Der Grauwert ist sehr angenehm für das Auge.

Auf der gesamten Seite wird der Regular Schnitt in verschiedenen Größen verwendet, Links stehen in Italic.

Illustration Vol.2

ap031 — 2009-06-21T20:41:00Z

Entwicklung einer Schildkröte für den Spannweitenvergleich mit Dingen aus dem Alltag von der Outline über Flächenfüllung, zum Anlegen von Oberflächen (Panzer, Haut) und der Farbanpassung an die erste Schildkröte.

Vergleichsobjekte

ss188 — 2009-06-21T14:35:00Z

Wie kamen wir auf unsere Vergleichsobjekte Mann, Hund und Flasche Bier? Es sind Objekte, die sich jeder Mensch gut vorstellen kann und dadurch besser einen Bezug zur Größe der Schildkröte herstellen kann.

Die Schattenformen sollen dabei nicht vom eigentlichen Thema der Grünen Meeresschildkröte ablenken und einen Kontrast zur restlichen farbigen Gestaltung bilden.

Ursprünglich waren andere Objekte geplant, doch diese haben sich aufgrund ihrer Größe, Form oder Vorstellungskraft beim Menschen nicht so gut geeignet. Trotzdem wollen wir hier unsere älteren Ideen zeigen:

Screendesign

ss188 — 2009-06-21T14:01:00Z

Die Startseite unserer Infografik wird eine Karte sein, auf der man die Schildkröte zu verschiedenen Menüpunkten schwimmen lassen kann. Auf dem Bild stehen die Quadrate noch als Platzhalter:

Beispiel für die Unterseite Anatomie:

Weiche Überblendungen kennzeichnen den jeweils aktiven Bereich bei Mouse Over:

Klickt man auf einen Button, erhält man Infos zum jeweiligen Körperteil. Reiter leiten den Nutzer eine Ebene tiefer:

Unter dem Punkt Spannweite kann der Nutzer die Größe eines Mannes, eines Hundes und einer Flasche Bier mit der Spannweite der Schildkröte vergleichen:

Unter dem Punkt Schnelligkeit kann der Nutzer selbst steuern, wie schnell die Schildkröte schwimmen soll:

Für die Seiten Brutverhalten, Lebensraum und Gefahren ist ein jeweils ähnliches Layout mit Infotexten und Bildergalerie geplant. Der Prototyp dazu sieht folgendermaßen aus:

Illustrationen

ss188 — 2009-06-21T13:42:00Z

Durch realitätsnahe Illustrationen wollen wir unsere Infografik optisch aufwerten. Eine kleine Sammlung von Bildern vom Beginn bis zu den fertigen Illustrationen:

Auch unsere Karte hat eine Entwicklung hinter sich:

Mit an unser Farbschema angepasstem Hintergrund:

Dokumentation "Turtle: The Incredible Journey"

ap031 — 2009-06-18T20:35:00Z

Im Oktober diesen Jahres wird eine Dokumentation über die unglaubliche Reise der Meeresschildkröten in die Kinos kommen.

Der Trailer gibt einen guten Einblick worauf wir uns freuen können. Man erfährt viel über das Leben der Meeresschildkröte und welche "unglaublichen" Strecken sie in ihrem Leben zurücklegt.

http://www.saveourseas.com/turtle-trailer

Die Seite bietet auch viele schöne Bilder vom Schlüpfen der Babyschildkröten bis über fantastische Wasseraufnahmen.
Ein Besuch der Site ist empfehlenswert.

http://www.saveourseas.com/image-gallery

http://www.saveourseas.com/explore

Storyboard

ap031 — 2009-05-13T20:38:00Z

Ein Storyboard, das die Menüstruktur in Form von Scribbles zeigt. Die Navigation ist hierbei eine vereinfachte Darstellung einer Landkarte, die den Lebensraum der Grünen Meeresschildkröte zeigt. Der Nutzer hat hierbei die Möglichkeit verschiedene Menüpunkte anzuklicken, die in einer Art Story integriert sind z.B. Brutstätten oder das Fischerboot, das die Bedrohung durch den Menschen darstellt.

Jetzt folgen verschiedene Menüpunkte:

Darstellung der Schildkröte als Illustration. Dabei können verschiedene Körperteile vergrößert dargestellt werden.

Detailansicht des Auges:

Darstellung der Ansicht: Tauchverhalten

Es ist angedacht, dass der Nutzer die Schnelligkeit, in der die Schildkröte schwimmt, selbst bestimmen kann. Außerdem erhält er Informationen, wie tief sie tauchen kann.

Schnelligkeit:
Im Vergleich mit Boot und Delphin

Darstellung der Größe in Länge und Spannweite:

Möglichkeit, das Gewicht der Schildkröte darzustellen. Der Nutzer hat hier die Möglichkeit, das Gewicht mit dem eines Erwachsenen, eines Kindes und dem eines Delphins zu vergleichen.

Darstellung des Screens, der Informationen dazu liefert, wieso die Grüne Meeresschildkröte vom Aussterben bedroht ist:

* Aktualisierung:
Um eine übersichtliche, kompaktere Infografik zu gestalten, entfallen der Gewichtsvergleich, der Vergleich mit der Lederschildkröte und der Geschwindigkeitsvergleich mit Boot bzw. Delphin.

Zielgruppe:

Die Flash-Microsite ist nicht nur für Tierschützer gedacht, sondern soll Groß und Klein gleichermaßen begeistern. Eingesetzt werden könnte das interaktive Medium beispielsweise auf den Webseiten von WWF oder National Geographic.

Unsere Zielgruppe hat folgende Eigenschaften:

- besteht aus 49 % Frauen und 51 % Männer
- ist zwischen 20 und 49 Jahre alt
- meist sehr erfahrene Internetnutzer
- nutzt das Internet besonders gern als Informationsquelle für die Themen Reisen, Bücher, CDs, und DVDs, Multimedia und Haushaltsprodukte
- beschäftigt sich in ihrer Freizeit gern mit Natur und Kunst, Fotographie, Reisen sowie Beruf und Karriere
- kauft im Netz besonders gern Verbrauchsgüter, Kosmetik- und Gesundheits- produkte, Kleidung und Schuhe sowie Reisen und Bücher, CDs, DVDs
- Familienbezogene Menschen
- die Geschehnisse auf der Welt interessieren sie Politik, Soziales und Umwelt sind ihr wichtig
- möchte ihren Beitrag zum Umweltschutz leisten
- informiert sich gerne über Möglichkeiten bedrohte Tierarten zu schützen
- betrachtet die Geschehnisse des Ökosystems mit Besorgnis
- Infomationen sollen ansprechend und verständlich aufbereitet sein
- interaktive und außergewöhnliche Infografiken interessieren sie

Um sich von der Zielgruppe ein noch besseres Bild machen zu können, haben wir zwei Personas erstellt, die in unseren Augen die Zielgruppe am besten verkörpern.

Lebensraum und Eigenschaften

ss188 — 2009-04-27T15:21:00Z

Die Grüne Meeresschildkröte lebt in allen tropischen und subtropischen Meeren. Ihre Brutstätten sind unter anderem die Küsten von Australien, Costa Rica, Florida, Hawaii, Japan und die türkische Mittelmeerküste.

Costa Rica

Japan

Südatlantik

In Mexiko wird die Suppenschildkröte wegen ihrer oft weißen Marmorierung auch als tortuga blanca, also weiße Schildkröte bezeichnet. Ihr wissenschaftlicher Name ist Chelonia mydas.
Ausgewachsene Suppenschildkröten ernähren sich rein vegetarisch. Sie fressen vor allem Seegras und blühende Pflanzen. Die Jungtiere hingegen sind Fleischfresser und fressen vor allem Krabben und wirbellose Kleintiere.
Männchen haben einen größeren Schwanz und längere Krallen als Weibchen.

Konkretisierung und Sitemap

ap031 — 2009-04-26T18:50:00Z

Festlegung der Schildkrötenart
Nach weiteren Überlegungen und Recherchen entschieden wir uns letztendlich für die "Grüne Meeresschildkröte/ Suppenschildkröte". Diese gehört neben der echten Karettschildkröte und der Lederschildkröte zu den drei bedrohtesten Meeresschildkröten. Ihr Gefährdungsstatus ist "vom Aussterben bedroht". Die grüne Meeresschildkröte kann eine Länge von bis zu 1,5 m Länge erreichen. Ihr Gewicht variiert zwischen 90 und 200kg. Die Lederschildkröte erreicht im vergleich bis zu 700-900kg!

Sitemap
Im unten aufgeführten Bild ist die Sitemap dargestellt, die wir uns vorgestellt haben.

Wir überlegten uns, wie wir diese Punkte in eine passende Navigation einbinden könnten. Wir hatten die Idee eines Landkartenabschnitts, der an manchen Stellen klicksensitiv ist. Die Punkte "Grüne Meeresschildkröte", "Brutstätten/Jungtiere", "Lebensraum" und "Bedrohung" sind auf der Karte durch Kreuze gekennzeichnet. Angedacht ist, dass sich einzelne Teile bewegen. So z.B. die Schildkröte oder auch das Boot mit den Fischfängern, das für die Bedrohung der Schildkröte durch den Menschen steht.

Fundstücke aus dem Netz

ss188 — 2009-04-17T14:49:00Z

Auf der Suche nach Inspiration haben wir folgende Seiten entdeckt:

Interaktive Grafik über die Nist-Saison der Meeresschildkröten:

National Geographic hat vor ein paar Tagen das große Schildkröten-Rennen gestartet. Hierzu gibt es eine Infografik mit Übersichtskarte:

Die Wanderung der Grünen Meeresschildkröte bei kinderwetter.com:

Auf www.seaturtle.org kann man sich anzeigen lassen, wo in den letzten 24 Stunden bis hin zu Jahren Meeresschildkröten aufgetaucht sind:

Scribbles

ss188 — 2009-04-17T14:16:00Z

Wir haben ein paar Scribbles angefertigt, um uns gegenseitig unsere Ideen im Kopf zu veranschaulichen:

Ideenfindung, Brainstorming und Struktur

ss188 — 2009-04-17T14:03:00Z

Wie ist die Idee für eine Infografik über Meeresschildkröten überhaupt entstanden?

Wir hatten den persönlichen Anreiz, eine Infografik mit illustrativem Anteil zu erstellen. Auf das Thema Tiere haben uns die WWF-Plakate gebracht. Aber welchem Tier wollen wir unsere nächsten Arbeitswochen widmen?

Wir haben die Rote Liste der bedrohten Tierarten entdeckt und folgende näher ins Auge gefasst:
Blauwal, Gorilla, Großer Panda, Meeresschildkröte, Tiger.

Tiere mit Fell sind etwas zu aufwändig zu illustrieren, also fallen Gorilla, Panda und Tiger schonmal weg. Eine interaktive Infografik über den Blauwal existiert bereits. Und Meeresschildkröten haben uns auf den ersten Blick fasziniert. Die Grüne Meeresschildkröte ist eine der bedrohtesten und eine der größten Schildkröten. Außerdem ist sie sehr schön und lebt in einem faszinierenden Lebensraum mit leuchtenden Farben. Eine echte Herausforderung!

Da ein Schwerpunkt unserer Infografik sich mit der Bedrohung der Meeresschildkröte auseinandersetzen soll, wir aber auch allgemeine Infos rund um die Meeresschildkröte liefern wollen, haben wir ein Brainstorming gemacht und eine Mindmap erstellt, die zeigt, welche möglichen Bereiche wir in der Infografik ausarbeiten könnten. Dazu zählen:

Lebensraum
Anatomie
Verhalten
Bedrohung
Vergleiche

Der Lebensraum könnte als kartografische Ansicht dargestellt werden.
Die Anatomie der Meeresschildkröte soll in verschiedenen Ansichten (aus verschiedenen Perspektiven, Detailansichten) erklärt werden.
Unter dem Punkt Verhalten könnte beispielsweise der Schwimmstil (Geschwindigkeit, Tiefenmeter) beschrieben werden, aber auch das Eierlegen und Fressgewohnheiten.
Zu den Gefahren gehört vor allem die Bedrohung durch die Menschen.
Der Punkt Vergleiche soll Eigenschaften der Meeresschildkröte im Vergleich zu anderen Lebewesen oder jedem Menschen gut bekannten Gegenständen veranschaulichen. Beispiele könnten sein: Größen- und Gewichtsvergleiche, Kraft der Flossen usw.