Interface doku biljana spasic by Andreas Ken Lanig

INHALTSVERZEICHNIS

Informations- und Interfacedesign im Schwerpunkt Digitale Applikationen Biljana Spasic Projekt: Digitale Wissenssammlung „Waldläufer“ Studiengang Grafik - Design 5. Semester DIPLOMA Private Hochschulgesellschaft Dozent: David Sickinger

S. 01-02 S. 03-04 S. 05-06 S. 07-12 S. 13-14 S. 15-16 S. 17-18 S. 19-20 S. 21-22 S. 23-24 S. 25-26 S. 27-28 S. 29-30 S. 31-34 S. 35-36 S. 37-38 S. 39-44 S. 45-46 S. 47-48

Konzept Logo, Name Startseite Social Media Icons Über Uns Menüpunkt: Techniken Dropdown: Techniken Beitrag & Kommentare Anmelden Registrieren Angemeldeter User Neuen Beitrag Erstellen Neuen Beitrag Erstellen - Kategorien Beispiel - Beitrag Beispiel - fertiger Beitrag Beitrag kommentieren Infografiken Selbstständigkeitserklärung Quellenangaben

KONZEPT - WALDLÄUFER Dieses Forum umfasst spezielle Überlebenstechniken unter Berücksichtigung verschiedener Ausgangssituationen. Dabei sollen mit wenigen Hilfsmitteln Techniken zur Sicherung der menschlichen Grundbedürfnisse, wie beispielsweise Nahrung, Wasser, Werkzeuge oder Orientierung, anschaulich vermittelt werden.

jedoch gewohnt immer, überall und zu jeder Zeit an Nahrungsmittel, Kleidung oder Unterkunft zu gelangen. Doch ist nicht genau das der Grund weshalb uns heute, neben dem rasanten Wachstum unserer Konsumgesellschaft, langsam dank Navi oder Google etwas essentielles dahinschwindet? Der menschliche Urinstinkt?

Sowohl als Survival-Einsteiger oder Hobby-Wanderer, sowie auch als Trekking-Profi, Extremsportler oder einfacher Naturbursche mit Interesse am Überleben fernab von Zivilisation, kann man dieses Forum als Informationsquelle und Erfahrungsaustausch, zur Beantwortung Eurer Fragen oder als abenteuerliche Bettlektüre nutzen. Durch die zahlreichen themenbezogenen Video-Tutorials könnt Ihr viele Techniken live und in Farbe anschauen um beispielsweise das Feuer-Anzünden leichter zu erlernen. Denn, mal ehrlich, wie viele von uns sind heutzutage noch fähig mit Hilfe eines Feuerbohrers ein wohlig wärmendes und auch heute noch überlebenswichtiges Feuerchen zu entzünden? Und das ganz ohne Streichhölzer? Wer macht sich heutzutage noch Gedanken darüber, mithilfe welcher Technik das gefundene Wasser gefiltert werden soll?

Das ist genau die Frage die mich dazu gebracht hat dieses Forum zu gründen. Einst lebenswichtige Techniken, die uns Nahrung und Wasser bescherten, sind heute in Vergessenheit geraten. Die Jagt: früher täglicher Kampf- heute Hobby! Dabei wird es im Zuge der Industrialisierung immer notwendiger zu wissen, was wir uns täglich auftischen oder zu welchem Wässerchen wir den Limbo tanzen.

Nun, Wasser filtern muss man heute nicht mehr, ernähren muss sich trotzdem noch jedermann. Der moderne Mensch von heute ist es 1

Wir wollen hinter die Kulissen der Selbstverständlichkeit schauen und die Vielfalt der Natur zusammentragen. Dabei sind all diejenigen herzlich dazu willkommen dieses Forum durch Erfahrungen zu bereichern und so dem Gang zum Kühlregal einen Hauch an „Bewusstsein“ zu verleihen. Auf den Punkt gebracht: Die Natur legt uns alles vor die Füße, wir müssen es nur zu deuten wissen.

Dass wir den Kรถrper, das Instrument unseres Willens, beherrschen, das ist die Hauptbedingung aller Lebenskunst.

Max Haushofer (1840 - 1907) deutscher Schriftsteller

LOGO - WALDLÄUFER

Sogenannte „Waldläufer“ waren bereits Mitte des 19. Jahrhunderts die ersten Anwender des Survival, indem sie spezielle Überlebenstechniken von indianischen Ureinwohnern lernten. Der englische Begriff „survival“ wird abgeleitet durch das Verb „survive“, was soviel bedeutet wie „überleben“. Gemeint ist nicht das alltägliche Überleben, sondern das Überleben in freier Wildnis, in Notsituationen oder freiwillig beim Trakking. Eine Grundvoraussetzung für die erfolgreiche Heimkehr ist die Orientation in den verschiedenen Gebieten. Ein großes Hilfsmittel dabei ist der allseits bekannte Kompass, welcher starken Einfluss hatte auf die Logoentwicklung der Wissenssammlung „Waldläufer“. Das Logo besteht aus verschiedenen runden Elementen, wobei der Buchstabe „W“ für Waldläufer, dabei im Fokus liegt. An einen Kompass erinnern die äußeren feinen Linien, sowie die Buchstaben N, O, S und W, die jeweils für die vier Himmelsrichtungen stehen. Die zarte Holzstruktur in der Mitte soll die Verbundenheit zur Natur untermalen und die Thematik unterstreichen.

1 2

5 6

STARTSEITE 1

Header inkl. Logo (Bild- und Wortmarke)

Hauptnavigation (Mainnavigation)

3 1

Slider: Bilder werden in einem transparenten Feld am unteren Rand beschrieben. Die Bilder „sliden“ nach einigen Sekunden automatisch weiter, durch die kleinen Pfeile rechts und linkt kann man sich jedoch auch manuell durchklicken. Unter dem Slider befindet eine Slider-Navigation, wodurch der User weiß, wieviele Bilder es noch gibt und wo er sich gerade befindet.

4 5

Einleitung: der User erkennt hierdurch worum es auf der Seite geht und wird willkommen geheißen. Call-to-action-button: der User wird zum Anmelden oder Registrieren animiert. Die Farbe grün wurde verwendet um Aufmerksamkeit zu erregen, da das Farbschema sonst eher gedeckt gehalten ist. Footer: Auf der linken Seite befindet sich eine Subnavigation mit folgenden drei Punkten: Kontakt, Impresum, Partner (links zu Investoren etc.). Da diese Punkte nicht das Hauptinteresse der Seite bzw. des Themas vertreten, befinden sie sich dezent im Hintergrund. Auf der rechten Seite befinden sich die Social Media Icons, worüber man die Seite in den unterschiedlichen Netzwerken teilen kann.

1 7

SOCIAL MEDIA ICONS 1

Die Social Media Icons sind in grau gehalten. Fährt man jedoch mit dem Mauszeiger darüber (Mouseover Effekt) entfaltet das jeweilige Icon seine Originalfarbe. Ein netter Effekt, der nicht zu penetrant, durch einen kleinen Überraschungseffekt ästhetisch wirkt.

1 9

1 10

1 11

1 12

1 2 3 4

ÜBER UNS 1

Call-to-action-button befindet sich nun oben rechts über der Sidebar und bleibt dort auch durchgehend, um die Prägnanz zu erhöhen.

Sidebar und Suchfeld konstant rechts oben

3 1

Kategorien / Sitemap: alle Themen und Kategorien sind klar strukturiert dargestellt. Jede Kategorie ist durch das Suchfeld frei auffindbar.

Über uns: Philosophie der Seite / Beweggründe/ Zielgruppe

3 15

MENÜPUNKT: TECHNIKEN 1

Der Menüpunkt „Techniken“ ist angeklickt. Die Schrift wird heller und der Hintergrund des Punktes wird dunkler hinterlegt, um sich von den anderen Punkten, die gerade nicht angeklickt sind, abzuheben.

Da wir uns nun im Menüpunkt „Techniken“ befinden, sehen wir hier sämtliche Artikel zum Thema „Techniken“. Die Artikel werden zweispaltig angezeigt, wodurch eine kleine Voransicht der vorhandenen Bilder / Medien (Thumbnails, verkürzt Ladezeiten), die ersten Zeilen des Artikels, sowie die Schlagwörter (hier rot) und das Erstellungsdatum zur Vorschau ermöglicht wird. Das oberste Bild links ist ein Video, was man an dem roten playicon erkennen kann. Alle Videos im Forum sind so gekennzeichnet, um dem User sofort deutlich zu machen, um welche Art Medium / Artikel es sich handelt.

3 1

Am unteren Ende befindet sich eine Art Übersicht über die vorhandenen Seiten, die noch durchgeklickt werden können. Man erkennt auf der wievielten Seite man sich befindet und wieviele es insgesamt zu einem Thema oder in der jeweiligen Kategorie gibt.

Der Schriftzug „Techniken“ in der Sidebar ist nun rot, da sich der User nun in dem dazugehörigen Menüpunkt befindet. Somit ist immer deutlich in welcher Kategorie man gerade ist und welche Artikel gerade angezeigt werden.

DROPDOWN: TECHNIKEN 1

Durch einen Mousover-Effekt wird ein Dropdown-Menü ausgelöst: indem die Maus über den Menüpunkt „Techniken“ gehalten wird, tauchen nach unten hin weitere Punkte auf, die zu der oberen Kategorie „Techniken“ gehören.

4 5

BEITRAG: & KOMMENTARE 1

Der komplette Beitrag.

In der Sitemap ist der Punkt „Wasser“ rot, da das Thema des Beitrags thematisch mit Wasser verbunden ist und dementsprechend kategorisiert wurde.

Unter dem Beitrag befinden sich in Großbuchstaben und roter Schrift die Schlagwörter, die beim Erstellen des Beitrags vergeben worden sind. Schlagwörter sowie Kategorien sind immer in roter Schrift um sie jederzeit gut erkennen zu können. Außerdem fungieren die Schlagwörter als link zu weiteren Themen, je nachdem welches Schlagwort man angeklickt hat.

Darunter befinden sich Social Media Icons, wodurch man jeden einzelnen Artikel in den Sozialen Netzwerken teilen kann.

Jedem Beitrag steht die Kommentarfunktion zur Verfügung um sich mit den Besuchern auszutauschen, Lob oder Kritik anzunehmen oder weitere Hinweise / Tipps zu verbreiten. Die Kommentare werden vom Autor und den Usern verfasst und sind offen einsehbar. Um sich jedoch an einer Diskussion beteiligen zu können muss man sich anmelden oder registrieren.

ANMELDEN Zur Anmeldung geht es über den bereits beschriebenen grünen call-to-action-button. Sobald man diesen anklickt, verdunkelt sich die Seite, wird unscharf und somit in den Hintergrund gedrängt. Stattdessen erscheint ein neues kleineres Fenster zum Ausfüllen der Daten für eine Anmeldung. Der bereits registrierte User benötigt zur Anmeldung seinen zuvor angelegten Benutzernamen und das Passwort. Zudem kann man wählen, ob das Passwort gespeichert werden soll, damit man beim nächsten Besuch sofort loslegen kann. Falls man das Passwort vergessen haben sollte, kann man es sich daneben auch zurücksetzen lassen. Es besteht ebenso die Möglichkeit sich über ein Netzwerk, wie beispielsweise Facebook, anzumelden.

REGISTRIEREN Folgende Daten werden für eine Registrierung benötigt: Benutzername, E-Mail Adresse, ein Passwort und das Wiederholen des Passwortes um Fehler bei der Eingabe zu vermeiden. Man kann angeben welchem Geschlecht man angehört, muss man aber nicht, da es keine Pflichtangabe ist. Vor dem Bestätigen findet sich noch der Vermerk zu den AGB`s und Datenschutzrichtlinien, denen man bei Registrierung automatisch zustimmt. Das Feld in dem sich gerade der Mauszeiger befindet ist heller als die Felder in der sich die Maus nicht befindet, was bewirkt, dass die Aufmerksamkeit auf das gerade zu bearbeitende Feld gelenkt wird. Dies ist bei allen ausfüllbaren Seiten des Forums konstant gehalten um den Usern eine Konstante und somit Sicherheit und Vertrautheit zu bieten, was sich positiv auf die Usability auswirkt.

1 2

ANGEMELDETER USER 1

Hat sich ein User registriert, ändert sich die Ansicht minimal. Ganz oben rechts sieht man nun mit welchen Namen man sich angemeldet hat, sowie den Abmelde-Button.

Der grüne call-to-action-button wird durch einen neuen Button ersetzt: den blauen, über den man direkt einen neuen Beitrag verfassen kann. Es wurden bewusst die Farben grün für das Einloggen / Registrieren, blau für „neutrales“ Verfassen von Beiträgen und rot für Ausloggen verwendet, um an semantische Aspekte, wie beispielsweise das Gesetz der Erfahrung, anzuknüpfen. Man assoziiert rot und grün zweifelsohne mit Verkehrsampeln, das Blau für die neuen Beiträge wirkt, der Farbpsychologie nach, entspannend und regenerierend.

3 4 5

NEUEN BEITRAG ERSTELLEN 1

Beim Klicken auf den blauen Button erscheint das gewohnt abgedunkelte Fenster mit den hellen Feldern zum Ausfüllen. Als erstes muss der Beitragstitel festgelegt werden.

Dem folgt direkt das Feld für den eigentlichen Beitragstext.

Danach vergibt man Kategorien, über welche man den Beitrag nach dem Veröffentlichen in der Suche finden kann. Die Kategorien sind vorgegeben und sollen mit Hilfe von „Checkboxen“ vervollständigt werden (mehr im nächsten Screen). Der Artikel ist dann auch über die Sidebar auffindbar.

Neben den vorgegebenen Kategorien kann man auch selbst Schlagwörter festlegen, über die der Beitrag dann auffindbar ist. Durch die Verknüpfung von vorgegebenen Kategorien und den frei wählbaren Schlägwörtern (tags) wird ein optimal strukturiertes Arbeiten mit dem Bestand gewährleistet.

Am Ende kann man selbstverständlich noch Dateien bereitstellen, Videolinks hinzufügen oder mit anderen Seiten verknüpfen.

NEUEN BEITRAG ERSTELLEN - KATEGORIEN 1 Sobald man rechts auf den kleinen, nach unten zeigenden Pfeil klickt, klappen die Checkboxen herunter. Eine Mehrfachauswahl ist möglich. Bei ausgeklappter Box verschiebt sich der Pfeil nach unten und zeigt nun nicht mehr nach unten, sondern nach oben. Durch diese Kleinigkeiten, die im ersten Moment selbstverständlich erscheinen, weiß der Besucher wie er sich zu verhalten hat um die gewünschten Ergebnisse zu erlangen und dass in diesem Fall die Box wieder zu schließen ist, bevor er weiter machen kann.

BEISPIEL - BEITRAG Anhand dieses Beispiels bekommt man einen guten Einblick in einen korrekt erstellten, kategorisierten und verschlagworteten Beitrag.

BEISPIEL - FERTIGER BEITRAG Nach dem Verรถffentlichen des Beitrags findet man alle bekannten Elemente wieder: den Beitragsinhalt mitsamt Video, die rote Markierung in der Sidebar unter der passenden Kategorie, die vergebenen Schlagwรถrter, usw.

Da man diesmal jedoch angemeldet ist, kann man diesen Beitrag auch direkt kommentieren.

BEITRAG KOMMENTIEREN Wie bereits erw채hnt kann man wenn man angemeldet ist eigene Beitr채ge oder die der andren User kommentieren. Die Kommentare kann man mit Mediendateien versehen, um evtl die eigene Meinung zu verdeutlichen oder andere Anreize passend zum Thema, zu schaffen.

INFOGRAFIK: SURVIVAL TOOLS

INFOGRAFIK: GESCHOSSENES WILD IN DEUTSCHLAND

INFOGRAFIK: FLEISCHKONSUM WELTWEIT

SELBSTSTÄNDIGKEITSERKLÄRUNG Ich erkläre hiermit, dass ich die vorliegende Arbeit selbstständig und ohne Benutzung anderer als der angegebenen Hilfsmittel angefertigt habe; die aus fremden Quellen (einschließlich elektronischer Quellen und dem Internet) direkt oder indirekt übernommenen Gedanken sind ausnahmslos als solche kenntlich gemacht. Die Arbeit wurde bisher weder im Inland noch im Ausland in gleicher oder ähnlicher Form einer anderen Prüfungsstelle vorgelegt und auch noch nicht physisch oder elektronisch veröffentlicht.

Mannheim, den 10. April 2014

Biljana Spasic

QUELLENANGABEN Methoden zur Wasserreinigung: http://bilder.trax.de/b/54/46/90/18/id_54469018/380/ tid_da/wir-retten-sie-vor-dem-verdursten-.jpg http://de.wikihow.com/Wasser-reinigen J채ger in der Falle - Dokumentation http://www.zdf.de/planet-e/jagd-naturschutzt-undartenschutz-oder-archaisches-hobby-31386844.html Zunder http://www.noz.de/media/2013/09/13/fot-mg-9367_full.jpg Werkzeuge selbst bauen http://www.meventi.de/data/event/450/5299/47263.jpg http://www.spiegel.de/wissenschaft/mensch/ausgegrabenwie-man-einen-stein-gewinnt-a-921145.html Youtube Video Orientation Uhr https://www.youtube.com/watch?v=JkCq-XeXxnE Home Slider Bild http://bilder.n3po.com/Panorama-Bilder/BachFluss-Kanchanaburi-Thailand.jpg.html