Bubble World – när navigation blir en del av upplevelsen

Tänk om en webbmeny inte behövde ligga stilla längst upp på sidan. Tänk om den i stället kunde flyta omkring, reagera på besökaren och nästan kännas levande.

Det var utgångspunkten för Bubble World – en experimentell demosajt där klassisk webbdesign möter fysik, lekfullhet och interaktiv animation.

Från meny till lekplats

Projektet började med en enkel idé: att bygga en webbplats där navigationen består av bubblor. I stället för traditionella länkar öppnar besökaren en central menybubbla, varpå de olika menyvalen växer fram och placerar sig i egna banor.

Bubblorna är inte bara animerade dekorationer. De kan dras, kastas och kollidera med varandra. När besökaren släpper en bubbla dras den gradvis tillbaka mot sin ordinarie position. Resultatet är en meny som fortfarande är användbar, men som också uppmuntrar till nyfikenhet och interaktion.

Undermenyerna hör ihop med sina respektive huvudbubblor och öppnas först när besökaren väljer dem. Det skapar en tydlig struktur utan att förlora den organiska och lite kaotiska känslan.

Två världar på samma skärm

Gränssnittet är uppdelat i två lika stora delar.

Den vänstra sidan fungerar som en mer traditionell landningssida med rubriker, introduktionstext och tydliga knappar. Den högra sidan är projektets interaktiva område, där Bubble World-menyn lever och rör sig.

Kontrasten mellan de två delarna är medveten. Ena sidan visar hur vi vanligtvis förväntar oss att en webbplats ska fungera. Den andra utforskar vad som händer när navigationen får bli en del av webbplatsens visuella identitet.

Mer än en teknisk prototyp

För att demonstrationen skulle kännas som en riktig webbplats utvecklades även innehållet bakom bubblorna.

Besökaren kan bland annat utforska:

• Bildgallerier inom porträtt, platser och rörelse

• En mer utvecklad presentation av verksamheten

• Kontaktinformation och villkor

• En simulerad butik med varukorg och komplett kassaflöde

• Ett eget litet spel med poängsystem och topplista

Butiken genomför inga riktiga betalningar, men visar hur ett fullständigt köpflöde kan byggas in i den här typen av experimentellt gränssnitt.

Ett spel inuti webbplatsen

Bubble Drop är ett litet färg- och formspel som kompletterar projektets bubbeltema. Spelaren styr fallande objekt och försöker kombinera tre identiska former med samma färg.

Spelet använder tre grundformer och tre färgvariationer. Tempot ökar gradvis och varje lyckad kombination ger poäng.

Resultaten kan publiceras på en topplista tillsammans med ett unikt smeknamn och en valfri kommentar på högst 140 tecken. Spelaren måste uttryckligen godkänna att uppgifterna blir synliga för andra besökare innan resultatet sparas.

Topplistan lagras direkt på webbplatsens egen server och finns kvar mellan olika besök.

Från experiment till självständig webbplats

En viktig del av projektet var att Bubble World inte bara skulle fungera som en tillfällig prototyp. Hela webbplatsen anpassades därför för att kunna installeras på ett vanligt webbhotell.

Den färdiga versionen innehåller:

• Komplett webbplatskod

• Lokalt lagrade bilder och typsnitt

• En egen PHP-baserad topplista

• Beständig lagring av poäng och kommentarer

• Säkerhetsinställningar för webbservern

• En fristående filstruktur med index.html

Webbplatsen körs nu helt från sin egen Hostinger-miljö på bubbles.tryckkraft.com. Innehåll, media, spellogik och topplista ligger samlade under samma subdomän.

Vad ville vi undersöka?

Bubble World är framför allt ett designexperiment.

Projektet utforskar hur långt man kan utmana etablerade gränssnittsmönster utan att helt förlora tydlighet och användbarhet. En meny behöver vara begriplig, men den behöver inte vara statisk. En företagswebbplats behöver vara funktionell, men den får fortfarande kännas oväntad.

Ibland är den bästa digitala upplevelsen inte den som försöker vara osynlig. Ibland är det den som får besökaren att stanna upp, dra i en bubbla och se vad som händer.