Loading...

Webcast UI design

Webcast UI design 2017-03-28T22:32:47+00:00

Project Description

Contesto

Le interfacce web che i prodotti software di Accordent trasferivano sui web servers (chiamate anche “skins”), sincronizzavano video in streaming con immagini, documenti, urls, sondaggi, etc., dando luogo a presentazioni interattive dal vivo, archiviate e per distribuzione su CD.

Capture Station - Opzioni dell

Le interfacce web dinamiche venivano selezionate e configurate nel software prima della pubblicazione sui servers web a seconda delle esigenze della presentazione, da managers, docenti, medici e responsabili della comunicazione per essere utilizzate dagli utenti finali (dipendenti, studenti, managers, medici, infermieri, giornalisti, scienziati, operatori di borsa, etc.) per finalità di marketing, formazione interna, formazione a distanza, e-commerce, ricerca e sviluppo collaborativi, o comunicazioni aziendali.

Sfida

Le interfacce web, configurabili all’interno dei tre prodotti software di acquisizione video, pubblicazione e post-produzione erano più di trenta.

Interfacce per webcasts

Ogni interfaccia offriva funzionalità aggiuntive oltre la sincronizzazione di video e contenuti (es. la possibilità di scegliere diversi layouts, formati video, dimensioni, sottotitoli, capitoli, ingrandimento video/contenuti, miniature, form per domande, sondaggi, quiz, etc.).
Questo limitava le possibilità di scelta dei clienti (non tutte le funzionalità erano disponibili in ogni interfaccia) e richiedeva uno sforzo di sviluppo, gestione, testing, aggiornamento e supporto maggiore ad ogni nuova versione dei prodotti.

Il codice HTML e JavaScript delle interfacce aveva problemi di performance e di espansibilità. Il layout era ottenuto attraverso tabelle HTML che non si adattavano a diverse risoluzioni e rendevano la sua manutenzione difficile. La scrittura di pochi stili CSS inline e il ricorso massivo ad immagini rendevano l’upload delle interfacce sui web severs lungo, ed il caricamento sui browser degli utenti finali lento.

C’era bisogno di un nuovo design delle interfacce web che ne rendesse la selezione, configurazione ed uso più semplici, il caricamento sui browser degli utenti finali più veloce ed il processo di gestione e supporto delle interfacce meno oneroso.

Processo

Dopo aver illustrato la mia proposta allo User Interface Development team, al CTO e al resto del team di sviluppatori, in sei mesi ho guidato e partecipato alle varie fasi di analisi dell’esistente, ricerca sulle soluzioni della concorrenza, ricerca con clienti/configuratori ed utenti finali, definizione di personas e user stories, wireframing, prototipazione, testing iterativo e sviluppo di un nuovo set di due interfacce web per prodotto software (cinque nel caso di PresenterPLUS), per un totale di nove interfacce.

Col nuovo design quasi tutte le funzionalità vengono combinate e sono disponibili in tutte le interfacce. Al cliente viene data la possibilità di attivare/disattivare le funzionalità necessarie e di configurarne le opzioni dal software di pubblicazione e streaming.

Webcast UI - Browser Compatibility Chart
Browser Compatibility Chart (part.)
Webcast UI - Wireframe
Wireframe
Webcast UI - Prototype
Prototype
Webcast UI - Layouts
Layouts
Webcast UI - Media Players
Video Players:
Windows Media, Real, Flash, Silverlight
Webcast UI - Interactive Features
Interactive: Fact, Trivia, Survey, Q&A
Webcast UI - Branding Guidelines
Branding Guidelines
Webcast UI - Launch Page
User Interface Regions
  1. Launch Page
Webcast UI - Interface Regions
User Interface Regions
  1. Presentation Window
  2. Header Region
  3. Media Region
  4. Sync Region
  5. Tabbed Region
  6. Footer Region
Webcast UI - Launch Page Features
Launch Page Pre-Publishing
and Registration features

In fase di design è stata implementata la separazione dei livelli di presentazione, comportamento e contenuto. Sono stati introdotti i fogli di stile CSS, parallelamente al miglioramento dell’HTML semantico e all’ottimizzazione del codice JavaScript.

Per il rilascio della nuova versione delle interfacce web è stato creato un manuale d’uso con istruzioni per la loro configurazione e diversi altri documenti di specifica ad uso interno ed esterno (note di rilascio, tabella di compatibilità dei browsers, tabella dei tags dinamici, pagine SharePoint con UI Knowledge Base, etc.).

Risultati

Accordent SL3 User Interface
Accordent PM3 User Interface
Accordent PM3 iPhone User Interface

Miglioramento delle prestazioni delle interfacce (upload via software, download del browser ed interazione utente), della loro qualità e manutenibilità.

Riduzione delle chiamate di supporto relative alle interfacce del 60% e riduzione dei tempi di riposta alle chiamate del 30%.

Il nuovo design ha migliorato l’accessibilità delle interfacce che sono risultate più semplici e piacevoli da usare.
La documentazione fornita durante e alla fine del processo di design ha istituito un nuovo vocabolario di riferimento che ha facilitato la comunicazione relativa al prodotto sia internamente che esternamente.