Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Blick in die Vogelwelt

001 // Repräsentatives Bild

höreth_wolf_vogelwelt.jpghöreth_wolf_vogelwelt.jpg


002 // Kurzbeschreibung / Abstract

„Blick in die Vogelwelt“ ist ein digitaler Spiegel mit Informationsvermittlung, der auf die Bewegungen der BesucherInnen reagiert, und dadurch sieben besondere Arten der heimischen Vogelwelt aus dem Fichtelgebirge vorstellt. Durch Gestensteuerung sollen die BesucherInnen die äußeren Merkmale und Besonderheiten der Vögel kennenlernen. Je nachdem welche Position man einnimmt, landet einer der Vögel auf der Schulter oder auf dem Baumstamm nebenan.


003 // Filmische Dokumentation des Projekts


004 // Bilder / Screenshots

höreth_wolf_müb.2.jpghöreth_wolf_müb.2.jpg
höreth_wolf_müb.3.jpghöreth_wolf_müb.3.jpg
höreth_wolf_müb.1.jpghöreth_wolf_müb.1.jpg
höreth_wolf_müb.3.2.jpghöreth_wolf_müb.3.2.jpg
höreth_wolf_müb.4.jpghöreth_wolf_müb.4.jpg
höreth_wolf_müb.5.jpghöreth_wolf_müb.5.jpg
höreth_wolf_müb.6.jpghöreth_wolf_müb.6.jpg
höreth_wolf_müb.7.jpghöreth_wolf_müb.7.jpg
höreth_wolf_müb.8.jpghöreth_wolf_müb.8.jpg

höreth_wolf_screen_01.jpghöreth_wolf_screen_01.jpg
höreth_wolf_screen_02.jpghöreth_wolf_screen_02.jpg
höreth_wolf_screen_03.jpghöreth_wolf_screen_03.jpg
höreth_wolf_screen_05.jpghöreth_wolf_screen_05.jpg
höreth_wolf_screen_04.jpghöreth_wolf_screen_04.jpg


005 // 3D Modell

höreth_wolf_3d.1.jpghöreth_wolf_3d.1.jpg
höreth_wolf_3d.3.jpghöreth_wolf_3d.3.jpg
höreth_wolf_3d.2.jpghöreth_wolf_3d.2.jpg
höreth_wolf_modell.1.jpghöreth_wolf_modell.1.jpg
höreth_wolf_3d.4.jpghöreth_wolf_3d.4.jpg
höreth_wolf_modell.2.jpghöreth_wolf_modell.2.jpg
höreth_wolf_modell.3.jpghöreth_wolf_modell.3.jpg
höreth_wolf_box.2.jpghöreth_wolf_box.2.jpg
höreth_wolf_box.1.jpghöreth_wolf_box.1.jpg


006 // UX / Personas / Userjourney

Personas

höreth_wolf_persona.3.jpghöreth_wolf_persona.3.jpg
höreth_wolf_persona.2.jpghöreth_wolf_persona.2.jpg
höreth_wolf_persona.1.jpghöreth_wolf_persona.1.jpg

Unser Exponat richtet sich an jede Zielgruppe, ganz egal ob Kinder, Jugendliche Erwachsene oder Ältere.

Besonders ansprechen wollen wir jedoch die Gruppe der Kinder ab sechs Jahren, da für diese das Lernen der Vogelarten in Verbindung mit spielerischer Interaktionen äußerst spannend ist und sie schon die für unser Exponat benötigten Lesekenntnisse besitzen. Eine gewisse Basis an Grundwissen ist meistens auch schon durch Erzählungen von den Großeltern oder durch das Lesen von Büchern vorhanden, weshalb sich die Kinder umso mehr freuen, wenn sie einen Vogel sogar von alleine erkennen können. Durch das Landen eines ausgewählten Vogels auf der eigenen Schulter entsteht eine emotionale Bindung, welches das ganze Erlebnis nochmals auf besondere Weise aufwertet. Das angelernte Wissen können sie anschließend draußen auf dem Schulweg, im Garten etc. zur Unterscheidung der einzelnen Vögel anwenden.

Natürlich gilt dasselbe auch für die anderen Zielgruppen, wobei diese das Wissen über die Vögel vermutlich nicht lange im Gedächtnis behalten würden. Trotzdem würden sie von der Interaktion mit dem Vogel genauso begeistert sein wie die Kinder.

Die einzige Zielgruppe, die wir mit unserem Projekt nicht ansprechen, sind die der Sehbeeinträchtigten. Für diese könnte man im späteren Verlauf über eine Text-To-Speech Funktion nachdenken.

Die oberen Personas sind Beispiele der Zielgruppen Grundschulkinder, Eltern und RentnerInnen. Natürlich treffen noch viele weitere Personen zu. 

* Es handelt sich um die Personas aus dem gemeinsamen Miro-Board, die alle Studierende aus dem 4. und 6. Semester in Gruppen am Anfang vom Semester erstellt haben. Hans Meyer von Julia, Marco, Leonard und Elias; Gabi Schuster von Marie, Josephine, Natalie und Selina; Gertrud Blümchen von Christian, Celina und Maria.

Touchpoints, User Journey und User Flow

höreth_wolf_flow.1.jpghöreth_wolf_flow.1.jpg
höreth_wolf_touch.jpghöreth_wolf_touch.jpg
höreth_wolf_journey.jpghöreth_wolf_journey.jpg
höreth_wolf_flow.2.jpghöreth_wolf_flow.2.jpg

Bei den Touchpoints, der User Journey sowie bei dem ersten User Flow sind wir von der Ausstellung in Münchberg, also auch von unserem Prototypen, ausgegangen. Dabei haben wir diese wie ein öffentliches Museum behandelt. Um trotzdem einmal einen kompletten Überblick über alle Funktionen zu haben, haben wir einen weiteren User Flow erstellt, über das Exponat, wie es im WEZ zu finden sein wird.

Würde man bei den Touchpoints und in der User Journey das finale Exponat, wie es in Mehlmeisel stehen würde, betrachten, dann würden weitere Funktionen hinzukommen. Diese wären der Vergleich der Flügelspannweite, der Körpergröße und das Anzeigen der Besonderheiten. Außerdem kommt noch der Wechsel zwischen den sieben Vogelarten hinzu.


007 // Detaillierte Beschreibung

höreth_wolf_details.pdf PDF höreth_wolf_details.pdf


008 // Herausforderungen / Reflexion

Probleme Erfolge
- Lesbarkeit Schrift - Bildschirmersatz
- Mehrere Ebenen im Code - Dachbau
- Studiolicht - Code
- Background Subtraction
- Distanzerkennung

Während unseres Projekts stellten wir uns fünf Herausforderungen.

Die erste war die Lesbarkeit der Legende sowie der Merkmale in Verbindung mit dem Hintergrund. Durch die recht hellen Farbtöne war es schwer, den Text so hervorzuheben, dass dieser gut lesbar ist. Nach einer Reihe von Studien (Kontur, Flächen, Strichstärkenkontraste, …) entschieden wir uns dafür, eine weiße Kontur um den schwarzen Text zu setzen. Bei den Vögeln hatten wir ein ähnliches Problem. Die hellen Farben und Detailliertheit des Hintergrunds ließen die Vögel untergehen, weshalb wir letztendlich auch hier eine weiße Kontur eingesetzt haben.

Zweites Problem waren die verschiedenen Ebenen im Code, da die Vögel teilweise hinter den Bäumen laufen sollten. Das Ganze haben wir gelöst, indem wir den linken Baum und den Baumstamm nochmals als freigestelltes PNG über den Hintergrund im Code gelegt haben. So konnten wir sogar erreichen, dass selbst das Livebild der Person hinter dem Baumstamm liegt. Dadurch können wir eine gewisse Tiefe erzeugen, welches durch den unscharfen Hintergrund verstärkt wird.

Als wir mit den Aufbauten im Fotostudio begonnen haben, fiel uns das nächste Problem auf: das helle Licht im Studio. Selbst an bewölkten Tagen konnte man die Projektion nur schwer erkennen. Zusammen mit Jens entwickelten wir die Idee, eine Abdeckung zur Verdunklung zu bauen (aus Dachlatten und schwarzem Stoff) und diese über unserem Exponat anzubringen.

Problem Nummer vier ist die Leistung des PCs und die Zuverlässigkeit der Background Subtraction. Durch das Austauschen der Workstation wurde die Leistung erhöht, sodass die Subtraction flüssiger läuft. Allerdings konnten wir nur ein für die Probeausstellung ausreichendes Ergebnis erzielen. Teilweise kann es vorkommen, dass man nur teilweise bis fast gar nicht erkannt wird, wenn man beispielsweise dunkle Kleidung trägt oder zu weit am Rand steht. So kann es schnell passieren, dass in der Projektion der eigene Körper mit Löchern abgebildet wird.

Unsere fünfte und letzte Herausforderung ist die Distanzerkennung zwischen Hand und Schulter. Wenn man die Hände nur leicht anhebt, kann es passieren, dass die Merkmale sofort eingeblendet werden. Das Problem konnten wir leider aufgrund der Zeitfensters nicht mehr lösen. Dennoch finden wir es nicht allzu störend.

Trotz der vielen Herausforderungen gab es auch einige positive Aspekte.

Besonders gut funktioniert hat der Bildschirmersatz. Dadurch dass wir eine Projektion anstatt eines großen Bildschirms in unser Exponat integriert haben, konnten wir uns sehr viel Zeit und Mühe für den Aufbau sparen. Außerdem war es möglich, uns erst spät auf ein finales Format festzulegen, welches letztendlich ein Quadrat geworden ist.

Zudem verlief der Bau des Daches schneller als erwartet. Durch die Unterstützung von Jens konnten wir zeitnah eine Lösung zum Problem Studiolicht finden und diese problemlos umsetzen, sodass wir uns später gezielt auf die anderen Probleme konzentrieren konnten.

Ein weiterer Punkt ist die Erstellung und Finalisierung des Codes auf Open Processing. Obwohl Programmieren am Anfang des Semesters noch zu einer unserer Schwächen zählte und wir nur wenig Zeit für den Code hatten, konnten wir ihn trotzdem schnell fertigstellen. Hier und da kam es oftmals zu ein paar „Stolperfallen“, wie die Größe des Kamerabildes oder das Einfügen des Anfangsvideos, aber die Probleme konnten wir mit etwas Unterstützung schnell beheben.

Insgesamt sind wir sehr zufrieden mit dem, was aus unserer anfänglichen Idee entstanden ist. Und natürlich hoffen wir, dass wir das Team von Mehlmeisel genauso für „Blick in die Vogelwelt“ begeistern können, wie wir es sind!


009 // Anlagen


010 // Projektverlauf

07.07.2021 // Visuals 5.0

back_styleguide.jpgback_styleguide.jpg
back_styleguide_all.pngback_styleguide_all.png
baum_baumstumpf.pngbaum_baumstumpf.png
baumstumpf.pngbaumstumpf.png
baum.pngbaum.png

merkmale_screen_17.2.jpgmerkmale_screen_17.2.jpg
merkmale_screen_17.1.jpgmerkmale_screen_17.1.jpg
merkmale_screen_17.3.jpgmerkmale_screen_17.3.jpg
merkmale_screen_17.4.jpgmerkmale_screen_17.4.jpg
merkmale_screen_17.5.jpgmerkmale_screen_17.5.jpg
merkmale_screen_17.6.jpgmerkmale_screen_17.6.jpg
merkmale_screen_17.7.jpgmerkmale_screen_17.7.jpg
merkmale_screen_17.9.jpgmerkmale_screen_17.9.jpg
merkmale_screen_17.8.jpgmerkmale_screen_17.8.jpg
merkmale_screen_17.10.jpgmerkmale_screen_17.10.jpg

blaumeise_kompr.gifblaumeise_kompr.gif
blaumeise_2_kompr.gifblaumeise_2_kompr.gif
eichelhäher_kompr.gifeichelhäher_kompr.gif

Schild mit Piktogrammen

A49C6D3E-5CC7-4A5C-8F41-2995FCA43D2E.JPGA49C6D3E-5CC7-4A5C-8F41-2995FCA43D2E.JPG
5BF5EC3B-BB18-418F-9880-0688508D9C5D.JPG5BF5EC3B-BB18-418F-9880-0688508D9C5D.JPG

30.06.2021 // Visuals 4.0

Auswahl der Vögel

  • Blaumeise

  • Eichelhäher

  • Waldschnepfe (je nach Zeit)

Noch offene Fragen

  • Vogelstimmen - Kauf aller 7 Stimmen oder einzelne?

  • GIFs - Feste Reihenfolge im Code oder zufällig möglich?

Illustrierte Hintergrundvarianten

01_plus1stamm.JPG01_plus1stamm.JPG
01_plus1.JPG01_plus1.JPG
01_leer.JPG01_leer.JPG
01_voll.JPG01_voll.JPG
01_plus1stammbaum.JPG01_plus1stammbaum.JPG
02_schatten.JPG02_schatten.JPG
03_styleguide.JPG03_styleguide.JPG
03_styleguide_hell.jpg03_styleguide_hell.jpg
04_hell.JPG04_hell.JPG

Unser Hintergrundfavourit:

IMG_0669.JPGIMG_0669.JPG

collage.jpgcollage.jpg

Screens im Quadrat und Sectra als Schrift

merkmale_screen_12.1.jpgmerkmale_screen_12.1.jpg
merkmale_screen_12.2.jpgmerkmale_screen_12.2.jpg
merkmale_screen_13.1.jpgmerkmale_screen_13.1.jpg
merkmale_screen_13.2.jpgmerkmale_screen_13.2.jpg
merkmale_screen_14.1.jpgmerkmale_screen_14.1.jpg
merkmale_screen_14.2.jpgmerkmale_screen_14.2.jpg
merkmale_screen_15.1.jpgmerkmale_screen_15.1.jpg
merkmale_screen_16.1.jpgmerkmale_screen_16.1.jpg
merkmale_screen_15.2.jpgmerkmale_screen_15.2.jpg
merkmale_screen_16.2.jpgmerkmale_screen_16.2.jpg

collage_04.jpgcollage_04.jpg

Vogel Illustrationen überarbeitet

IMG_0670.JPGIMG_0670.JPG
vogel_kontur_blaumeise.jpgvogel_kontur_blaumeise.jpg
IMG_0675.JPGIMG_0675.JPG
vogel_kontur_eichelhäher.jpgvogel_kontur_eichelhäher.jpg
vogel_kontur_waldschnepfe.jpgvogel_kontur_waldschnepfe.jpg
finale Vögel.JPGfinale Vögel.JPG
IMG_0713 2.JPGIMG_0713 2.JPG

Schild mit Anweisungen + Idee Baumstamm und Vogelhaus

schild.jpgschild.jpg
stamm_01.jpgstamm_01.jpg
stamm_02.jpgstamm_02.jpg
stamm_03.jpgstamm_03.jpg

Gif Reihenfolge

Gif Reihenfolge_SN.pdf PDF Gif Reihenfolge_SN.pdf

Finale Gif's Waldkauz & Waldschnepfe

kleines.GIFkleines.GIF
Waldkauz.GIFWaldkauz.GIF
Waldschnepfe.GIFWaldschnepfe.GIF

23.06.2021 // Weiterarbeit Code und Animationen

body subtraction (Illustration im Hintergrund)

grüner Wald

Herbstwald

Winterwald

IMG_0629 2.GIFIMG_0629 2.GIF
IMG_0627 2.JPGIMG_0627 2.JPG
IMG_0618.GIFIMG_0618.GIF

21.06.2021 // 3D Modell

2.01_3d.jpg2.01_3d.jpg
2.02_3d.jpg2.02_3d.jpg
2.03_3d.jpg2.03_3d.jpg
2.04_3d.jpg2.04_3d.jpg
2.05_3d.jpg2.05_3d.jpg

16.06.2021 // Probe am Beamer

Test mit verschiedenen Hintergründen

01_weiß.jpg01_weiß.jpg
09_weiß_schw_bold_5.jpg09_weiß_schw_bold_5.jpg
103_weiß.jpg103_weiß.jpg
109_schwarz_wei_bold_5.jpg109_schwarz_wei_bold_5.jpg
201_winter_ws.jpg201_winter_ws.jpg
203_winter_sw.jpg203_winter_sw.jpg
205_frühl_ws.jpg205_frühl_ws.jpg
209_dark_ws.jpg209_dark_ws.jpg
207_frühl_sw.jpg207_frühl_sw.jpg
211_dark_sw.jpg211_dark_sw.jpg
213_licht_ws.jpg213_licht_ws.jpg
215_licht_sw.jpg215_licht_sw.jpg
217_herbst_ws.jpg217_herbst_ws.jpg
219_herbst_sw.jpg219_herbst_sw.jpg
221_dark2_ws.jpg221_dark2_ws.jpg
223_dark2_sw.jpg223_dark2_sw.jpg

2 x 2 m Quadrat & Unterschiede Short Throw - Normal

402_vgl_2.jpg402_vgl_2.jpg
301_rahmen.jpg301_rahmen.jpg
404_vgl.jpg404_vgl.jpg
504_vgl.jpg504_vgl.jpg
502_vgl.jpg502_vgl.jpg
605_vgl_herbst.jpg605_vgl_herbst.jpg

09.06.2021 // Visuelle Gestaltung 3.0

screen_collage_03.jpgscreen_collage_03.jpg

Storyboard 3.0

Storyboard_Version_3.JPGStoryboard_Version_3.JPG

IMG_0587.JPGIMG_0587.JPG

Gedanken zur Exponatsüberschrift

Titelüberlegungen_Interaction_SN.pdf PDF Titelüberlegungen_Interaction_SN.pdf

07.06.2021 // Modell

04.jpg04.jpg
05.jpg05.jpg
06.jpg06.jpg

01.jpg01.jpg
02.jpg02.jpg
03.jpg03.jpg

02.06.2021 // Visuelle Gestaltung 2.0

screens_collage_2.2.jpgscreens_collage_2.2.jpg
screens_collage_2.1.jpgscreens_collage_2.1.jpg
screens_collage_2.3.jpgscreens_collage_2.3.jpg

Überarbeitetes Storyboard

IMG_0569.JPGIMG_0569.JPG

Schildideen

Schildideen.jpgSchildideen.jpg

Hintergrund_Quer.jpgHintergrund_Quer.jpg

26.05.2021 // Visuelle Gestaltung

merkmale_02_kompr.gifmerkmale_02_kompr.gif
merkmale_screen_01.jpgmerkmale_screen_01.jpg
merkmale_screen_02.1.jpgmerkmale_screen_02.1.jpg
merkmale_screen_02.3.jpgmerkmale_screen_02.3.jpg
merkmale_screen_02.2.jpgmerkmale_screen_02.2.jpg
merkmale_screen_02.4.jpgmerkmale_screen_02.4.jpg
merkmale_screen_02.5.jpgmerkmale_screen_02.5.jpg
merkmale_screen_02.6.jpgmerkmale_screen_02.6.jpg
merkmale_screen_03.1.jpgmerkmale_screen_03.1.jpg
merkmale_screen_03.2.jpgmerkmale_screen_03.2.jpg
merkmale_screen_03.3.jpgmerkmale_screen_03.3.jpg
merkmale_screen_03.4.jpgmerkmale_screen_03.4.jpg
merkmale_screen_03.5.jpgmerkmale_screen_03.5.jpg
merkmale_screen_03.6.jpgmerkmale_screen_03.6.jpg

screens_collage.jpgscreens_collage.jpg

IMG_0540.JPGIMG_0540.JPG

19.05.2021 // Kosten

12.05.2021 // Präsentation und Weiterarbeit

Hintergrund

  • Schwarzer Hintergrund: Eher langweilig, wenig „Waldfeeling“

  • Plakat hinter Person: Verdeckt Sicht auf Spiegel (Wie wird Benutzer auf Spiegel aufmerksam? Keine Beobachter?)

  • Eigener Hintergrund durch Body Subtraction: Passend zum Stil von Vögeln, nicht zu auffällig wegen Text

Informationen

  • Erkennungsmerkmale um den Körper herum, vergrößerter Vogel vor dem Oberkörper

  • Legende (Bestand, Vorkommen, …) neben Bein/Knie

  • Flügelspannweite über Arm (Mensch) und Kopf (Vogel)

Anweisungen

  • Mischung aus Text und Animation?
  • Anfangs groß über den Bildschirm
  • Während Interaktion klein in einer Ecke oder am Fuß, Hand, ...?

lizenz_01.pnglizenz_01.png
lizenz_02.pnglizenz_02.png

presentation_02.pdf PDF presentation_02.pdf

IMG_0341.JPGIMG_0341.JPG
IMG_0346.JPGIMG_0346.JPG
IMG_0342.JPGIMG_0342.JPG
IMG_0345.PNGIMG_0345.PNG

05.05.2021 // Überarbeitung

Veranschaulichung zur Darstellung im Spiegel

Infografik zur Flügelspannweite und Erkennungsmerkmale

infografik_kompr.gifinfografik_kompr.gif
merkmale_abb_2.2.gifmerkmale_abb_2.2.gif

Sketch auf dem Fernseher

  • Kameraposition am besten auf Augenhöhe

  • Person muss in der Nähe stehen

  • je weiter weg, desto ungenauer die Körperpunkte

20210504_191847.jpg20210504_191847.jpg
20210504_192118.jpg20210504_192118.jpg

Überarbeitete Zusammenfassung der Vogelarten

Vogelportraits_02.pdf PDF Vogelportraits_02.pdf

Gedanken_interaction_02.05.21.pdf PDF Gedanken_interaction_02.05.21.pdf

Antwort von Frau Mattheas zur Frage Unterscheidung Männchen/Weibchen, Sommer/Winter, Jung/Alt

Bildschirmfoto 2021-05-04 um 22.54.33.pngBildschirmfoto 2021-05-04 um 22.54.33.png

28.04.2021 // Recherche

moodboard_vogel.jpgmoodboard_vogel.jpg
moodboard_wald.jpgmoodboard_wald.jpg
Vögel_Illustrationen-01.jpgVögel_Illustrationen-01.jpg
Vögel_Illustrationen-02.jpgVögel_Illustrationen-02.jpg

Vogelportraits.pdf PDF Vogelportraits.pdf

20.04.2021 // Präsentation

Pitch_NeeleStefany.pdf PDF Pitch_NeeleStefany.pdf

14.04.2021 // Ideensammlung

Interaction Information Design - Stefany, Neele.pdf PDF Interaction Information Design - Stefany, Neele.pdf

07.04.2021 // Personenanalyse

Interaction Information Design - Stefany Wolf.pdf PDF Interaction Information Design - Stefany Wolf.pdf
Interaction Information Design - Neele H..pdf PDF Interaction Information Design - Neele H..pdf