Design

Panoramica

BigBlueButton è un sistema di web conferencing open source per l'apprendimento online. Il nostro obiettivo è fornire agli studenti remoti un'esperienza di apprendimento online di alta qualità.

Una misura di quanto bene raggiungiamo questo obiettivo è chiedersi “quanto è facile per un utente, dopo alcuni momenti di interazione, padroneggiare l'interfaccia e andare avanti con il compito di insegnare o apprendere?

Riteniamo che una buona interfaccia sia fondamentale per il successo di qualsiasi prodotto. Questo documento offre una panoramica delle decisioni di progettazione che abbiamo preso nella creazione di un'interfaccia coerente per il client HTML5 che copre l'utilizzo su piattaforme mobili, tablet e desktop.

Obiettivi di progettazione

Aspettative degli utenti

Oggi gli utenti si aspettano che le applicazioni, in particolare le applicazioni mobili, abbiano un'interfaccia utente simile. Di conseguenza, applicazioni simili si sono evolute per avere interfacce simili.

In un'applicazione di conferenza Web, gli utenti hanno eccezioni comuni sulla condivisione di webcam, microfono e schermo.

Durante la progettazione del client BigBlueButton, non abbiamo sentito la necessità di creare modalità di interazione radicalmente nuove su un client mobile e desktop; piuttosto, volevamo fornire agli utenti un'interfaccia moderna e accessibile che fosse familiare a tutti in base alla loro precedente esperienza con altre applicazioni.

Primo approccio mobile

Progettare prima per i dispositivi mobili ci consente di fare un passo indietro rispetto all'attuale esperienza utente e pensare al set minimo di funzionalità necessarie affinché un utente possa partecipare a una sessione online (vedrai molte schermate di questi progetti di seguito).

L'attuale esperienza utente basata su Flash ha una serie di finestre e layout per adattarsi a diversi utenti. Tuttavia, un'applicazione mobile non dispone di finestre. Invece, è un insieme di elementi fondamentali che si sovrappongono in modo intelligente quando l'utente deve accedervi.

Abbiamo un insieme simile di elementi in BigBlueButton

  • L'area di presentazione
  • Chat di gruppo o privata
  • Elenco dei partecipanti
  • Video (condivisione webcam e desktop)
  • Preferenze

Esperienza unificata

Fornire un'esperienza unificata consentirà ai nostri utenti di acquisire rapidamente familiarità con il prodotto e ridurre la curva di apprendimento complessiva. Se utilizzi il client web, tablet o mobile, il nostro obiettivo è avere stili e posizionamento degli elementi coerenti. In questo modo, l'esperienza di contribuire o costruire su BigBlueButton sarà anche molto più semplice per gli sviluppatori.

Coerente su tutte le piattaforme

Sebbene il design iniziale del client HTML5 si concentri principalmente sull'esperienza mobile, vogliamo che il client HTML5 venga eseguito anche sul desktop. L'ambiente di runtime Flash ci ha consentito di fornire BigBlueButton su computer Mac, Linux e PC. Ci aspettiamo che, nel tempo, con la maturazione del client HTML5, diventerà l'interfaccia predefinita su tutte le piattaforme.

Il mobile ha un'esperienza utente diversa da un'applicazione web. Dopo tutto, sono diverse forme di interazione: tocco vs mouse, palmare vs schermo, tocco vs tastiera. Nel tempo, abbiamo evoluto i design per includere l'interazione sul desktop. Ci aspettiamo che man mano che il client HTML5 matura, diventerà l'interfaccia predefinita su tutte le piattaforme.

Accessibilità

L'accessibilità è molto importante per il nostro mercato di riferimento dell'apprendimento online. Volevamo assicurarci che i progetti ci permettessero di fornire ai nostri utenti una serie di best practice per l'accessibilità, come i punti di riferimento di Aria, le etichette Aria, Aria gentile e fornendo una tavolozza di colori che supporta gli utenti con problemi di vista. Sebbene Flash abbia un ottimo supporto per l'accessibilità all'interno del browser web, volevamo essere sicuri che anche il client HTML5 fosse ugualmente accessibile.

Design dell'interfaccia utente estensibile

BigBlueButton non è solo una soluzione, ma una piattaforma su cui si basano altre aziende. Nella creazione di un nuovo design, uno dei nostri obiettivi è fornire alla nostra comunità un design modulare in modo che nuove funzionalità o componenti possano essere creati con facilità. Se uno sviluppatore desiderava aggiungere un modulo di note condivise nell'interfaccia utente, ad esempio, o controlli del volume aggiuntivi, vogliamo assicurarci che l'aspetto grafico sia coerente con l'interfaccia utente esistente.

Documento di progettazione condivisibile

Con l'ultimo design del nostro client HTML5, includiamo un documento di progettazione condivisibile che altri designer possono utilizzare come punto di partenza per marcare il cliente o per concettualizzare nuove funzionalità.

Scarica il file dell'app BigBlueButton Design Sketch

Disegni del cliente | Versione iniziale

Di seguito sono riportati i progetti per la nostra prima versione per il client HTML5 Web, tablet e mobile.

Visualizzazioni mobili

Con la prima versione delle visualizzazioni mobile HTML5, abbiamo concentrato i nostri sforzi sulla creazione della funzionalità del visualizzatore. Ciò include, consumare la presentazione, abilitare / disabilitare l'audio, le interazioni emoji, nonché la possibilità di partecipare a conversazioni di chat pubbliche / private.


Visualizzazione predefinita BigBlueButton Mobile Elenco partecipanti BigBlueButton Mobile BigBlueButton Chat pubblica mobile BigBlueButton Mobile Polling

 

Visualizzazioni tablet

Le visualizzazioni del tablet seguono lo stesso modello di progettazione del telefono cellulare.







 

Visualizzazioni desktop

Per l'esperienza desktop, è qui che iniziamo a vedere più funzionalità diventare presenti a relatori e partecipanti. Qui vedrai (come relatore) la possibilità di caricare diapositive, annotazioni, lavagna multipla e sottotitoli.


Visualizzazione predefinita


 

Visualizzazione barra laterale espansa | Messaggi pubblici e diretti e elenco dei partecipanti.


 

Visualizzazione completamente espansa | Chat pubblica e privata.


 

Stanze di gruppo


 

Caricamento di una presentazione


 

Impostazioni utente


 

Didascalie


 

Tipi di partecipanti


 

Presentatore : come mostrato sopra, il quadrato blu nell'angolo in alto a sinistra dell'avatar indica che il partecipante è il presentatore. Nell'angolo in basso a destra si trova l'indicatore audio di unione (icona audio + cerchio verde) e l'anello attorno all'avatar rappresenta visivamente che qualcuno sta parlando.

Moderatore : volevamo differenziare visivamente i moderatori da tutti gli altri partecipanti e lo abbiamo fatto cambiando visivamente l'avatar in un quadrato. Con lo stato visualizzato sopra, vedrai anche che l'audio del moderatore è disattivato (icona disattivata + cerchio rosso).

Partecipante : i partecipanti sono indicati visivamente utilizzando un avatar circolare e, nel caso visualizzato sopra, questo partecipante ha scelto di partecipare solo all'ascolto audio (icona dell'auricolare + cerchio verde).


 

Guida di stile

Panoramica

Nella guida allo stile mostrata di seguito, troverai una ripartizione della tavolozza dei colori principale, della tipografia e degli stili degli elementi utilizzati nel client HTML5.

Tavolozza dei colori accessibile

Come team, siamo appassionati di mantenere le migliori pratiche di accessibilità all'interno dei nostri prodotti e, nel caso del colore, vogliamo assicurarci che tutti i tipi di utenti (ipovedenti o meno) abbiano un'esperienza piacevole. Di seguito troverai una panoramica dettagliata della nostra tavolozza di colori principale e del loro rapporto di contrasto. Il nostro obiettivo era mantenere un rapporto di 4,5: 1 superiore.

Libreria di icone personalizzate

Con il nuovo client HTML5, volevamo includere una libreria di icone condivisibile che gli sviluppatori potessero utilizzare durante lo sviluppo e abbiamo creato la nostra libreria di icone personalizzata con oltre 80 icone.



 

Disegni del cliente | Aggiornamenti pianificati

Condivisione del desktop

Quando un relatore sceglie di condividere il proprio desktop, sostituirà l'area di presentazione esistente. In qualsiasi momento, il relatore può terminare la condivisione della scrivania e la presentazione riprenderà nella posizione originale.

Espansione dei controlli di presentazione

I controlli di presentazione aggiornati da includere sono, zoom, adatta alla larghezza e adatta alla pagina.

Finestra di dialogo audio con test dell'eco

Quando un utente si unisce a una sessione, viene visualizzata una finestra di dialogo che indica quale percorso automatico può prendere, unirsi all'audio utilizzando un microfono o solo ascoltare (simile all'esperienza flash). Se selezionano l'accesso tramite un microfono, a un utente verrà chiesto di eseguire un altro passaggio chiedendo se può ascoltare se stesso (test dell'eco). Da lì, se selezionato "Sì", avanzeranno nella sessione.


 

Disegni del cliente | Caratteristiche della roadmap

Condivisione video




 

Note condivise




Chat room multiple



Gestione utenti




 


Se hai domande o commenti, per favore unisciti alla comunità di BigBlueButton e pubblicali nella mailing list bigbluebutton-dev . Restiamo in attesa della vostra risposta.