Sea Turtle

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

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.

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.

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.

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.

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:

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:

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:

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

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.

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.

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.