← Somlai-Fischer archive

Kitchen Budapest

2007 Nyár / Summer — the lab’s first catalogue, powered by Magyar Telekom

ZUI — the zooming presentations that became Prezi

ZUI — the zooming presentations that became Prezi
■ Participating researcher / Résztvevő kutató ■ Feles Dániel, Halácsy Péter, Korsós Milán, Németh Péter, Somlai-Fischer Szabolcs

A ZUI (zooming user interface) egy zoomoláson és fraktálszerűen elrendezett információn alapuló vizuális kommunikációs módszer, mellyel sokféle tartalmat lehet érdekesen bemutatni vagy felfedezni. A KIBU kutatói évek óta gyártanak ZUI elven működő prezentációkat, ami mindig nagy sikert aratott a hallgatóság körében.

A szokásos póverpojintos bemutatók lineárisak, csak egy úton járhatóak be. Amikor az ember kicsúszik az időből, vagy épp vissza akar utalni már elmondottakra, akkor sokat kell összevissza lapoznia. Ha kis kvantumokban akarjuk csak az információt megosztani a hallgatósággal, akkor mindenféle bugyuta animációt kell alkalmaznunk.

Ezzel szemben a ZUI-elvű prezentációknál a tartalmat egy nagy sík területen, nem egy, hanem két dimenzióban rendezzük el, mint amikor egy terepasztalon makettet építünk. A prezentáció nem diák sorozatából áll, hanem egy bejárható térből. Másik fontos tulajdonság a végtelen nagyítási lehetőség: bármilyen kicsi területre bármilyen sok információt el lehet helyezni. Ezek után már csak hab a tortán, hogy a KIBU zuis motorja a nagyon sima és könnyed mozgásokat alapból támogatja: a nagyítás, a mozgatás és a forgatás összességében a zui prezentációt valamiféle repülőgépszimulációs programmá alakítja. Az élményt tekintve a prezentálás inkább egy városi tér feletti sétarepüléshez hasonlít, és nem egy útikönyv végigolvasásához.

Miért készült?

A projekt célja egy online szoftver készítése, ahol programozói tudás nélkül készíthetünk gyorsan, látványos ZUI prezentációkat online környezetben.

ZUI (Zooming User Interface) is a visual communication method based on zooming information arranged in a fractal-like space, which can be used to present or explore many kinds of content in a very interesting way. Researchers at KIBU have been coding and giving ZUI-based presentations for many years, to the clear enjoyment and fascination of diverse audiences (from students in Tokyo to executives in Budapest).

Your usual PowerPoint presentations are linear, and can be presented only in a single way. If I don't manage in my timeframe, or want to refer to previously said things, I need to turn slides back and forth a lot. If I only want to share information with the audience in small quantums, I need to use silly animated illustrations.

On the other hand, using the ZUI paradigm for presentations, the content is placed on a large, two-dimensional space, as if we were building scale houses for our model railroads. The presentation will become an explorable space, rather than a series of slides. The other important quality lies in infinite zooming: we can place as many information as we like into as little space as needed. Moreover, the KiBu ZUI motor is supported by extremely simple, easy movements: the ZUI

large doodle of a zooming presentation canvas: word CONCEPT, framed picture with plants/figures, LINKS lettering, PRESS lines, small portrait frame, barcode-like block, cursor arrow

Hogyan működik?

A ZUI prezentációs program egy Flash alkalmazás: ugyanazzal a programmal építjük a prezentációt, ugyanazzal a navigációs eszközkészlettel, mint amivel később a bemutatót tartjuk. Elvében a szerkesztő maga is egy ZUI, hiszen a menü ugyanazon elven használható, mint maga a prezentáció.

presentation, in its complexity of zooming, motion and turning, approximates a sort of airplane-simulation program, with the presentation experience analogous to flight over an urban landscape, rather than the reading of a travel guide.

Our aim

We have aimed to produce an online software with which the user (with no special programming knowledge) can quickly and easily prepare spectacular ZUI presentations in the online environment.

Ho does it work?

The ZUI presentation software is a Flash application: we use the same software to create the presentation, using the same navigation toolkit that is used to present it in the end. The editor itself is a ZUI, since we navigate the menu according to the same principles as the presentation itself.

PreZi editor screenshot: big green bubbles labelled PreZi, tools, media, navigation, upload; grey bubbles text, line, delete, flickr, transform, buttons; black document thumbnails in group1/group2/group3 clusters; photo card stack with green 'OK' note top right
purple ribbon UI element with radial dial and cursor arrow; scattered fan of photos below (people, food, workshops)
zoomed-out ZUI canvas at bottom: white paper clusters with articles and thumbnails, 'Miből él a Google?' presentation map beginning

Miből él a Google, Halácsy Péter 2007

/ What Google makes its money from, Peter Halacsy 2007

ZUI screenshot: overview map of 'Miből él a Google?' presentation with green 'Navigation Help / OK' box, slides Geek company, PageRank, Google Yahoo konvergencia, Média irány, Marketing nélkül, Infrastruktúra
ZUI screenshot zoomed to title: 'Miből él a Google?' with Google logo, MOKK logo, Halácsy Péter, mokk.bme.hu; branches konvergencia, Média irány, Marketing nélkül, Infrastruktúra, Adwords, PageRank
ZUI screenshot mid-zoom: Média vs. keresés slide with portrait, Adwords branch, Long tail card
ZUI screenshot: 'AdWords modell' slide detail — működés, üzleti modell bullet lists, 'Bevételeinek 98%-át hirdetésből és hirdetés közvetítésből szerzi.', Long tail chart, AdSense hálózat card
ZUI screenshot: old media / new media comparison table — push/pull, passzív befogadás/interaktivitás, szerkesztett/szándékvezérelt, böngészés/keresés — on green road background
ZUI screenshot extreme zoom: 'AdWords and Generalized On-line Matching' paper abstract over giant text fragment 'tkező legmagasabb licitet.'

Előadás az Aether Építész Stúdióról, Somlai-Fischer Szabolcs, 2007

Aleph at Belsay DOTT Talk
Adam Somlai-Fischer and Bengt Sjolen
www.aether.hu/aleph

Collaborations for Built(made) Experiments

Aleph

Aleph is an experimental public display, that is using the spaces, people and objects it faces as a palette to display messages from hidden viewpoints (...) if we build a matrix of small mirrors, which can adjust their tilt according to the site they are facing, we can create a display that uses the ever changing flux of the place to show images from certain points in space.

Wifi Camera

Wifi Camera reveals the electromagnetic space of our devices and the shadows that we create within such spaces. In particular our wifi networks which are increasingly found in coffee shops, offices and homes throughout cities of the developed world. We will take real time "photos" of wifi space.

Bionic Spaces

Flash2Mic

Brainmirror

BrainMirror is an interactive experience where the image of the visitors brain appears mixed with his/her mirror image, using natural head movement as an interface to explore volumetric visuals of the human brain.

Ping Genius Loci

On the Sunny side of New Media. Genius Loci stands for the spirit of the place, a common phrase in architecture for the poetic context, for the cultural reading of a site. Ping, the most basic command in computer networking, is a sort of greeting among computers. If I ping an address, it replies, so we know we can communicate. Ping Genius Loci (PGL) is an architectural installation trying to build a network into the poetics of the place.

Workshops

Low Tech handbook

Open Process / knowledge sharing
Kitchen Budapest
Kitchen Budapest, opening in May 2007, is a new media lab for young researchers who are interested in the convergence of mobile communication, online communities and urban space and are passionate about creating experimental projects in cross-disciplinary teams.

Reorient
Reconfigurable House

demo Scene

Pope Pixel

Bengt is a hacker, who strongly advocates the use of open source technologies, builds most of his tools himself (like a pick and place machine). Adam is an architect, research for cultral values in contemporary spaces, interfaces, technologies, strategies for open collaborations and sharing

screenshot: zoomed-out overview of the whole zooming presentation map (Aleph at Belsay DOTT Talk)
screenshot: Bionic Spaces / Flash2Mic / Brainmirror / Ping Genius Loci section with brain photo and installation photo
screenshot: Collaborations for Built(made) Experiments with Aleph paragraph highlighted, Wifi Camera, Reorient
screenshot: same Collaborations view without highlight, Aleph and Wifi Camera text
screenshot: Workshops / Low Tech handbook / Open Process knowledge sharing with Kitchen Budapest logo
screenshot: demo Scene (crowd in hall with screens) and Pope Pixel (night building facade), Adam Soml... name arcing

Reorient gondolatfelhő, Reorient csapat, 2006

Reorient

The Small + Communication
(interac)tions of Chinese, Hungarian and (...) children in Budapest

Conditions

Results of the research

Home Abroad
Media spaces of the Chinese community in Hungary

Conclusion

Norms

{ reading pillow }
{ pixelnet }
{ spreadable brick }
{ kittenbrick }

Guanxi-kapcsolatok
A safety net of personal relations in the transnational Chinese community

In the culture of no-distance (...) happens to those to whom it (...) Alternatives beyond the Great (...) Television and radio broadcas(t) (...) Lack of Hungarian language sk(ills)

The temporariness of built spaces has thousand-year-old roots.

However, one of the most durable human civilisati(ons) was built upon this instability, due to the power of soft structures.

Made in China
Transportation of labour, knowledge, materials and products
The Past of the Transitory
Sound spaces
Sound collection
Experience created through perception

commercial units, markets, shops, restaurants, fast food, apartments, storage, retail, entertainment
visible elements
invisible elements
localisation and connections
Forms of physical presence
mapping, filling up empty spaces, network with centers of density

Budapest - Chinatown
The built and used spaces of Far Eastern immigrant(s)

Features

Conclusion
The physical traces of the East Asian migration in Budapest are imprints of a (...)

screenshot: zoomed-out Reorient mindmap overview on dark background
screenshot: Reorient central node with Made in China, Budapest+Chinatown, Guanxi-kapcsolatok, The Past of the Transitory, Sound spaces branches
screenshot: Home Abroad / The Small + Communication / Conditions / Results of the research / Conclusion / Norms nodes
screenshot: rotated text about relations to property and originality, { spreadable brick } label
screenshot: Conclusion block - 'The temporariness of built spaces has thousand-year-old roots...'
screenshot: Budapest - Chinatown node with visible/invisible elements, Forms of physical presence, Features, Conclusion

Kő Adatbázis Irimiás Balázs, 2007

Stone Database

New database incorporating features that researchers, conservators, heritage managers, real and virtual visitors desire.
Corresponds to the mobile communication environment, accessible and updateable through the internet.
Well defined privileges, secure data storage.
Flexible, extendible, open to new users and new services.
Respecting and integrating all the previously collected data without quality loss.

Data

New acquisitions - Methods according to International Standards. New methods developed for specific needs. Manuals kept for security reasons.
Data from existing datasets - Bayon Face Tower Archive, Bayon Pediment Photo Archive, Scanned Stone Manuals, Bayon Bas-relief Archive, Bayon 3D Restoration Records, Old Photo Archive, Treatment Records etc.
Paper based data
Digital data - Selected and indexed by a central metadata clearinghouse. Uploading to the Stone Database by creating relations.
3d data and applications from Ikeuchi Lab - Developing a method for integrating it as a selectable and searchable set of data. Difficulties derive from the size/format.

Place

Physical location of data

Specialist pool

International cooperation
Teamwork
Hiring advisors and specialists
Workshop
Recognition of business potential

Development

Database development
Analyzing the available data - What data and how to integrate?
Analyzing similar systems - To collect ideas and experiences.
Collecting user needs - The main purpose of the integrated database is to serve the conservation works.
Feasibility study - Cost-benefit analysis
Hiring experts - Provides efficient, accountable work
Pilot project

Usage

Maintenance

Archiving
Publishing

ICOMOS UNESCO WHC APSARA etc. - Third Foresight International Network Quality Control Authorization

screenshot: full Stone Database concept map overview (Development, Usage, Maintenance, Communication, Data, Place nodes)
screenshot: Data section detail - paper based data, digital data, new acquisitions, existing datasets, 3D scan images
screenshot: Digital data notes and 3d data and applications from Ikeuchi Lab, with two 3D point-cloud renderings of Angkor temple
screenshot: Stone Database title banner with mission statement text and Place node
screenshot: Specialist pool circle with list (International cooperation, Teamwork, Hiring advisors and specialists, Workshop, Recognition of business potential)
screenshot: Development node - Database development steps, plus Usage node

t = (start - cu(rrent time)) / (duration o(f the motion))

i hate technology

the knowledge
the object

initial design
workshop 1 - first prototype, members of the public (of all ages), evaluation/outcome feeds into...
workshop 2 - second prototype, members of the public (of all ages), evaluation/outcome feeds into...
design iteration 1
design iteration 2 - produce new prototype system
documentation - Creative Commons license

project un(...) widnes reside(ncy)
- residency: 2 on-site pu(...)
- outcome: feasibility st(udy) for a permanent work(...)

Relevant P(...)

young researcher with shoulder-length hair sitting at red table with laptop and mouse, workshop clutter (cables, tools, fabric) on table; pixelated speech bubble with LaTeX formula t = (start - current time)/(duration of the motion)
overlaid translucent presentation slides on left: 'i hate technology' purple banner, 'the knowledge' and 'the object' mindmaps, workshop 1/2 design-iteration flowchart, 'project un... widnes residency' purple slide

v(t) = d/dx alpha(t) = { -t*beta^(-t-1) if -1 < t <= 0 ; t*beta^(t-1) if 0 < t < 1 }

(...)rrent time / (...)f the motion

x(t) = alpha(t) * x0 + (1 - alpha(t)) * x1

alpha(t) = { beta^(-t) - 1 if -1 < t <= 0 ; 1 - beta^t if 0 < t < 1 }

man in red sweater with sunglasses on head (Peter Halacsy) at red table; laptop, blue game controller, mugs, phone; A3 paper sketch with green 'PreZi' 'tools' 'media' bubbles and zoom spiral doodles
pixelated speech bubble with piecewise velocity formula v(t)
pixelated speech bubble with zooming interpolation formulas x(t) = alpha(t)*x0 + (1-alpha(t))*x1 and piecewise alpha(t)
PreZi tools sketch sheet on the table (early Prezi concept drawing)

screenshots of zooming process

zooming method

Atmoszféra

Kuta(tás)
BIBL. Labor
(a)tmoszféra
(as)ztal 23

screenshot 1: zoomed-out KIBU space map presentation with photos and text blocks
screenshot 2: mid-zoom view with Kutatás, BIBL. Labor labels, Kitchen Budapest logo, room photos
screenshot 3: closer zoom - Atmoszféra label with 3D render of lab interior, workshop asztal 23
screenshot 4: full zoom into 3D render of KIBU lab interior with green figure, desks, laptops, hanging cables; 'sztal 23' and 'tmoszfera' labels

Egyszerű, kreatív, öt(letes) / Nyitott de (...) / a munka / Eseménye(k) / programoz(ható) teret, / és nyomok(at) hagynak

Siker + pénz
Működ(és)
BIBL. Labor

magnification >>

time >>

the function used for zooming

sigmoid curve graph on grid: magnification vs time, with four green dots on the curve connected by gray callout lines to the zoom screenshots below
screenshot: zoomed text page with Hungarian notes (Siker + pénz, Működés), BIBL. Labor label
screenshot: deep zoom into 3D lab render with green figure and Hungarian text column (Egyszerű, kreatív... és nyomokat hagynak)

Restored from the original Kitchen Budapest project site — texts and images as published.