Aiutare l'IA a vedere chiaramente: un case study sulla progettazione di dashboard

L'intelligenza artificiale (AI) è oggi al lavoro in molti settori. Aiuta i rivenditori a gestire l'inventario e prevedere la domanda, rende più facile per i medici identificare il cancro nelle scansioni polmonari e consente alle auto di guidare da sole.

Ma l'automazione basata sull'intelligenza artificiale continua ad evolversi e richiede ancora l'intervento umano. In questo case study sulla progettazione di dashboard, descrivo in dettaglio come ho sviluppato interfacce utente che aiutano gli operatori umani a migliorare i processi di riconoscimento dell'IA.

Il cliente

Il cliente era una startup statunitense che aiuta i propri clienti a risolvere gli errori di riconoscimento delle immagini AI per più settori in tempo reale. Le soluzioni che fornisce migliorano i sistemi automatizzati che consentono la mappatura del terreno, la classificazione delle piante, l'identificazione dei prodotti al dettaglio, la scansione dei codici a barre e altro ancora.

I sistemi di riconoscimento delle immagini AI sono formati per riconoscere e interpretare l'input visivo e prendere decisioni in base a ciò che "vedono". Ma a volte questi sistemi incontrano eccezioni, immagini che non sono in grado di elaborare perché l'oggetto ha un aspetto inaspettato. Un'eccezione può impedire a un sistema di intelligenza artificiale di identificare informazioni cruciali o identificare erroneamente ciò che vede. Ad esempio, uno scanner di prodotti alimentari potrebbe non riconoscere un cartone di succo d'arancia perché il contenitore è cambiato o un robot agricolo a guida autonoma potrebbe essere confuso da un ostacolo. Problemi come questi possono causare ritardi o interruzioni alle operazioni di un'azienda.

Per risolvere questi problemi, il software del cliente si integra con i sistemi di intelligenza artificiale dei suoi clienti, consentendo agli operatori umani di rivedere e risolvere i problemi di riconoscimento in tempo reale. Ma gli operatori fanno molto di più che risolvere le eccezioni: insegnano anche ai sistemi di intelligenza artificiale cosa fare la prossima volta che incontrano qualcosa di simile. Ciò si traduce in sistemi di intelligenza artificiale meglio attrezzati per identificare una gamma più ampia di immagini.

Il Breve

Nel corso di due mesi, ho lavorato con il cliente per fornire progetti per un dashboard operatore e un dashboard cliente. Ho anche preparato una libreria di componenti e una guida di stile che accompagnavano questi risultati.

Il mio approccio segue il processo di design thinking, che comprende ricerca, brainstorming, prototipazione a bassa fedeltà, prototipazione ad alta fedeltà e test degli utenti. Adatto sempre questo processo in base alla disponibilità di tempo, capitale e persone.

Durante il progetto, ho lavorato a stretto contatto con il team fondatore e lo sviluppatore front-end del cliente, condividendo aggiornamenti quotidiani che aiutavano tutti a rimanere informati sui miei progressi. Ho anche collaborato con due operatori che hanno fornito informazioni preziose sul loro lavoro quotidiano.

Miglioramento del dashboard dell'operatore

Il fulcro del prodotto del cliente è il dashboard dell'operatore, l'interfaccia utilizzata dai suoi specialisti di intelligenza artificiale per risolvere i problemi di riconoscimento delle immagini. Quando un sistema di intelligenza artificiale ha problemi a identificare un'immagine, quell'immagine viene inviata al dashboard di un operatore. L'operatore etichetta manualmente l'immagine contrassegnando ogni oggetto e classificandolo in base a etichette predeterminate, come "umano", "albero" o "grande ostacolo".

Quando ho intervistato gli operatori del cliente, mi hanno mostrato lo stato attuale del software che stavano utilizzando e mi hanno permesso di osservarli mentre svolgevano il loro lavoro. Da questa ricerca iniziale, ho raccolto spunti, punti deboli e opportunità di miglioramento che avrebbero informato i miei progetti.

Ho scoperto che mancavano funzionalità importanti e che alcune attività erano inutilmente complicate, il che rendeva l'interfaccia difficile da usare. Ad esempio, per etichettare un'immagine, l'operatore doveva andare avanti e indietro tra la barra degli strumenti e l'immagine ogni volta per selezionare, etichettare, rivedere e inviare. Allo stesso modo, mancava anche la possibilità di annullare o ripetere un'azione, il che significava che gli operatori dovevano ripetere attività o eseguire passaggi aggiuntivi quando commettevano un errore.

Un'altra preoccupazione era che l'interfaccia non avesse un aspetto unificato poiché si basava principalmente su un mix di componenti già pronti. Queste incongruenze rendevano difficili da trovare o utilizzare determinati elementi e funzioni.

Con queste opportunità di miglioramento in mente, ho fatto un brainstorming sui concetti iniziali e creato wireframe, che ho condiviso con i due operatori. Ogni giorno, nel corso di una settimana, ho presentato wireframe agli operatori e discusso le loro prime impressioni tramite sessioni di feedback virtuali. Le sessioni sono state altamente collaborative e mi hanno aiutato a raccogliere idee per perfezionare la dashboard.

Un punto interessante emerso durante la sessione di feedback riguardava la quantità di informazioni mostrate sulla barra degli strumenti di destra, dove gli operatori selezionavano le loro azioni. Il mio progetto originale suggeriva una soluzione molto minimalista: una barra degli strumenti che poteva essere compressa in un pannello stretto che mostrava solo icone. Questo, credevo, avrebbe permesso di mettere a fuoco l'immagine centrale.

Tuttavia, l'idea non è piaciuta agli operatori perché era difficile capire a colpo d'occhio cosa significassero le icone e quali fossero le azioni principali. Con questa importante intuizione, mi sono reso conto che più semplice non è sempre meglio. In questo caso, lasciare più informazioni visibili ha aiutato gli operatori a lavorare in modo più efficiente.

Dopo aver migliorato e perfezionato i wireframe iniziali, ho creato un prototipo interattivo a bassa fedeltà in Figma e l'ho inviato agli operatori e alle parti interessate in modo che potessero testarlo. Una volta ricevuto il loro feedback, ho ripetuto il design fino a quando tutti sono stati soddisfatti.

Come accennato, la dashboard originale è stata creata utilizzando un mix di componenti dell'interfaccia utente già pronti e l'esperienza interna al prodotto non è stata coerente in tutto.

Tuttavia, nell'interesse del tempo e del budget, le parti interessate hanno voluto conservare i componenti già pronti ove possibile. Quindi, lavorando con lo sviluppatore front-end, ho personalizzato i componenti esistenti, che includevano pulsanti, moduli, campi e altri elementi dell'interfaccia utente, per adattarli all'aspetto dei nuovi dashboard. Queste modifiche hanno influito su colori, caratteri tipografici, spaziatura e altri dettagli. Nei casi in cui fosse impossibile aggiornare i componenti esistenti, come le animazioni di avanzamento della visualizzazione live, ne abbiamo creati di nuovi. La maggior parte del cruscotto dell'operatore è stata costruita da zero in questo modo.

Ho quindi prodotto un prototipo navigabile ad alta fedeltà che incorporava il colore e i tipi di foto che gli operatori vedrebbero normalmente nel software. Ho incluso anche strumenti di selezione come rettangoli, matite e poligoni e ho aggiunto un pannello nella parte inferiore dello schermo in cui gli operatori potevano apportare miglioramenti alle immagini. Infine, ho inviato il prototipo, insieme alle specifiche per le microinterazioni animate in After Effects, allo sviluppatore front-end in modo che potessero costruire la dashboard.

Progettare un dashboard cliente da zero

La seconda fase del progetto è stata una dashboard del cliente che consente ai proprietari dei sistemi di intelligenza artificiale di osservare lo stato di avanzamento dei loro problemi nella risoluzione. Il cliente voleva migliorare questa esperienza prima di lanciare il prodotto a più clienti.

In origine, i clienti del cliente dovevano richiedere i rapporti sullo stato di avanzamento via e-mail. Ciascun rapporto era un file PDF o CSV che indicava quali eccezioni erano state risolte o ancora in corso. Il cliente aveva bisogno di un modo per consentire ai clienti di controllare a colpo d'occhio lo stato di ciascuna eccezione.

Con la dashboard che ho progettato, i clienti possono accedere e monitorare lo stato di avanzamento di ogni eccezione in tempo reale. Possono vedere le immagini che sono arrivate, quelle in fase di revisione e le eccezioni che sono già state risolte. Possono anche visualizzare i dettagli di ciascuna soluzione per capire meglio come è stato risolto il problema.

La dashboard presenta grafici e visualizzazioni per aiutare i clienti a comprendere meglio i dati di riepilogo come gli impegni totali e le risoluzioni totali. I clienti possono anche accedere e gestire facilmente gli aspetti aziendali dei propri account, inclusi i metodi di pagamento e le informazioni di accesso.

Per il prototipo del dashboard del cliente, ho creato animazioni in After Effects per dimostrare il comportamento di determinati elementi dell'interfaccia utente. Ad esempio, ho creato un'animazione di avanzamento per mostrare un'eccezione in revisione, che diventa un segno di spunta quando l'eccezione è stata risolta. Ho anche disegnato un punto pulsante per mostrare quando un progetto è attivo.

Costruire una libreria di componenti in Figma

Un aspetto importante della progettazione di prodotti scalabili e di facile manutenzione è creare una libreria di componenti e una guida di stile. La presenza di componenti di progettazione standardizzati e riutilizzabili garantisce coerenza e velocità durante il ridimensionamento e l'aggiunta di funzionalità a un prodotto digitale.

Ho scelto di ospitare la libreria del cliente in Figma perché semplifica la modifica dei componenti e l'aggiornamento ovunque appaiano in un progetto. Tutti i componenti e gli stili sono stati documentati utilizzando una griglia a otto punti. La libreria includeva componenti di base come menu, barre laterali, schede, icone di input e pulsanti, mentre la guida allo stile copriva elementi come tipografia, colori, icone, spaziatura e griglie.

In futuro, la libreria dei componenti può evolversi in un sistema di progettazione a tutti gli effetti. Ma per ora serve come base per la crescita del prodotto e come riferimento per i futuri designer, siano essi personale interno, liberi professionisti o professionisti dell'agenzia.

Questioni di ricerca sugli utenti

Questo progetto è stato gratificante perché mi ha dato l'opportunità di perfezionare un prodotto digitale che sta migliorando i sistemi automatizzati in più settori e plasmando il modo in cui l'IA interpreta il mondo. Ha inoltre rafforzato l'importanza della ricerca degli utenti e dell'osservazione diretta. Essere in grado di osservare gli operatori svolgere il proprio lavoro e porre domande è stato essenziale per fornire dashboard che consentissero loro di lavorare in modo più efficiente ed efficace. Un designer non può migliorare il modo in cui qualcuno lavora finché non comprende la sua esperienza in primo luogo.

Ulteriori letture sul blog Toptal:

• Progettazione dashboard: considerazioni e best practice
• La coerenza è la chiave: come costruire un sistema di design Figma
• Tecniche di ricerca UX e loro applicazioni
• Il valore della ricerca sugli utenti
• Il vero ROI di UX: convincere la Executive Suite