Floating design voor notificaties en interactie in Transmisión

Na een halfjaar heeft ons online eventplatform Transmisión Livestreams een facelift gekregen. Met het toevoegen van nog meer interactie (ken je de nieuwe Quiz-module en de Wordcloud-module al?) voorzagen we dat de deelnemers door de bomen het interactieve bos niet meer zouden zien. En die deelnemers willen we natuurlijk niet laten dobberen! Een mooie uitdaging voor onze UX-designer en developers, die resulteerde in een floating cockpit voor interactie en notificaties.

Exit programmabalk

Laten we eerst nog eens kijken waar we vandaan kwamen. Hieronder zie je het voor honderdduizenden gebruikers in binnen- en buitenland inmiddels vertrouwde beeld van een sessie in Transmisión Livestreams:

Bovenin een vaste balk met logo en rechts buttons voor technische zaken (technische check, helpdesk, uitloggen). Aan de rechterzijde een wegklikbare interactiekolom. En onderin de eveneens wegklikbare programmabalk, waarbinnen in het donkergrijze gedeelte de notificaties verschenen als er in de zijkolom iets gebeurde: een nieuwe poll, Q&A-activiteiten en beschikbare handouts - om maar iets te noemen.

En dan vergeten we nog waar het natuurlijk eigenlijk allemaal om draait: de stream (excuses, Jeroen Smit!). Die stream bleek op sommige schermen een beetje in het gedrang te komen. Mede daarom is de bovenste balk nu compacter geworden en nemen we nu afscheid van de programmabalk.

Nog meer interactie

Maar dat is zeker niet de enige reden om ¡Adios! te zeggen tegen de programmabalk. Met het toevoegen van de nieuwe Quiz- en de Wordcloud-module (met ook weer hun eigen notificaties en interactieve velden, waarvoor in de zijkolom eigenlijk geen ruimte meer was), hebben we ervoor gekozen alle functies die om een actie of reactie van de deelnemer vragen te verplaatsen naar de onderzijde van het scherm.

Daar creëerden we een soort flexibele cockpit, die over de stream heen wordt geplaatst en die vanzelf weer verdwijnt als er eventjes niets te doen is. Hier heeft de deelnemer alle interactie binnen handbereik, ziet hij alle notificaties in één oogopslag en zit hij ook aan de knoppen als het om de indeling van zijn scherm of het delen van zijn webcam en microfoon gaat.

Floating in the stream

Hoe die floating elementen eruit zien? In plaats van dat te omschrijven, kunnen we het natuurlijk beter gewoon aan je laten zien!

De balk is weg, dat zie je direct. De overige elementen verdwijnen 'onder water' als ze niet functioneel zijn of als de deelnemer zijn muis niet gebruikt.

In dit geval is er programma-informatie beschikbaar (de voormalige programmabalk) en kan ook de interactiebalk met chats en Q&A zichtbaar en onzichtbaar worden gemaakt.

Via de knoppen in dit scherm kan de deelnemer zijn webcam en microfoon in- en uitschakelen.

We zoomen in. Een notificatie voor een beschikbare handout verschijnt als volgt in beeld. Rechts boven in dit venster kan de deelnemer de notificatie minimaliseren of sluiten.

Als de deelnemer een notificatie minimaliseert, blijft er een subtiel balkje staan. Hiervan zijn er maximaal drie in beeld.

Overige en door de deelnemer gesloten notificaties worden in het archief geplaatst. De floating buttons zijn alle voorzien van een verklarende 'OnMouseOver'-tekst, afhankelijk van de instelling van het platform in het Nederlands of in het Engels.

Wanneer de deelnemer zijn archief opent, verschijnt het complete overzicht van actieve items in beeld.

Eerder zag je een notificatie voor een nieuwe handout. Een door de moderator geactiveerde poll-vraag verschijnt als volgt prominent in beeld.

Tijdens een quiz verschijnen de vragen eveneens in de floating cockpit (het goede antwoord is trouwens antwoord B).

Net als een oproep om een bijdrage te leveren aan de deelnemersmatrix.

Hierin nemen we de deelnemers bij de hand, en geven we aan of de technische check nog doorlopen moet worden.

Als alles correct is ingesteld en de deelnemer heeft toestemming gegeven, dan verschijnt de melding dat de webcamstream gebruikt kan worden.

Met deze floating cockpit is Transmisión Livestreams klaar voor el futuro. Een toekomst waarin we nog heel veel nieuwe interactieve modules aan ons platform gaan toevoegen.