Pop-Up-The-Ba­throom

10 Badt­rends

Bei Pop-Up-The-Ba­throom geht es um die Vi­sua­li­sie­rung von 10 Badt­rends. Das Pro­jekt ent­stand zur ISH im Auf­trag des VDS in Zu­sam­men­ar­beit mit FAR_­con­sul­ting, Kars­ten Jipp und Ve­re­na Land­graf. 

Ve­re­na Land­graf hat die 10 Badt­rends in Ein­zel­bil­dern il­lus­triert. Auf die­ser Basis war un­se­re Auf­ga­be, diese in­ter­ak­tiv für die Ver­wen­dung im In­ter­net und zur au­to­ma­ti­schen Prä­sen­ta­ti­on auf der ISH auf­zu­be­rei­ten. 

Um den 2D-ba­sier­ten Il­lus­tra­tio­nen etwas mehr Räum­lich­keit zu ver­lei­hen, fiel die Ent­schei­dung, diese Räume in "Quasi"-3D-Räu­me um­zu­set­zen. Eine rich­ti­ge 3D-Um­set­zung wäre in­ner­halb des Zeit­rah­mes nicht mög­lich ge­we­sen, hätte vor allem aber auch den zwei­di­men­sio­na­len Cha­rak­ter der Il­lus­tra­tio­nen zer­stört. 

Fol­gen­de Trends wur­den il­lus­triert: 

Die Um­set­zung

Die Um­set­zung er­folg­te kom­plett in Flash und zwar mit Hilfe von Ein­zelt­weens. Für jeden Raum gibt es einen Tween zwi­schen Frame 2 und Frame 100. Über die Maus­po­si­ti­on wird dann die Po­si­ti­on in­ner­halb des Tweens (X-Po­si­ti­on) und die Zoom­stär­ke (Y-Po­si­ti­on) be­stimmt. 

Hin­ter den ein­zel­nen Ob­jek­ten be­fin­den sich dann je­weils in­ter­ak­ti­ve Flä­chen, die bei Klick ein Popup mit Zu­satz­in­fos auf­pop­pen las­sen. 

Zu­sätz­lich zu der Mar­kie­rung der in­ter­ak­ti­ven Flä­chen »on­Mou­se­O­ver«, wer­den für alle Ob­jek­te, die ein Popup aus­lö­sen kön­nen, zu­sätz­lich eine kurze Ein­gang­s­ani­ma­ti­on an­ge­zeigt, so dass dem Be­nut­zer schon zu An­fang ein Hin­weis ge­ge­ben ist, wo sich diese Flä­chen be­fin­den. Die­ser Hin­weis ist so kurz ge­hal­ten, dass er eher in­tui­tiv er­flo­gen soll, als dass er wirk­lich be­wusst wahr ge­nom­men wer­den soll.  

Eine Aus­wahl der Räume

Au­to­ma­ti­scher Ab­lauf

Um als Prä­sen­ta­ti­on bei der Messe auch au­to­ma­tisch ab­lau­fen zu kön­nen, wurde zu­sätz­lich ein Prä­sen­ta­ti­ons­tool um­ge­setzt, dass alle Räume der Reihe nach lädt und alle in­ter­ak­ti­ven Flä­chen des Rau­mes ein­zeln an­wählt. Dabei wird eben­falls die Be­we­gung si­mu­liert, die der Be­nut­zer sonst mit der Maus selbst aus­führt. 

Um die Prä­sen­ta­ti­on bei Be­darf auch stop­pen zu kön­nen ist in den Prä­sen­ta­ti­ons­play­er eine Pau­sen­funk­ti­on in­te­griert, die bei Be­darf ein Stand­bild ein­blen­det, dass sich in den Hin­ter­grund des Mes­se­stan­des in­te­griert. 

Die Web­site

Die Web­site selbst be­steht an­sons­ten aus recht um­fang­rei­chen Tex­ten zu den je­wei­li­gen Badt­rends. Da viele Be­nut­zer im In­ter­net eher keine lan­gen Texte am Bild­schrim lesen, wurde die Seite so op­ti­miert, dass sich diese auch pro­blem­los aus­dru­cken lässt.  

Da Flash-Ob­jek­te nor­ma­ler­wei­se nicht mit dem HTML-ba­sier­ten Sei­ten­in­halt aus­ge­druckt wer­den, wurde für den Aus­druck je­weils die Ori­gi­na­lil­lus­tra­ti­on als Bild hin­ter­legt, wel­ches auch dann an­ge­zeigt wird, wenn einem Be­nut­zer kein Flash zur Ver­fü­gung steht, wie am bei­spiels­wei­se am iPho­ne. 

Die Seite ist kom­plett zwei­spra­chig.