Esperienza utente e progettazione di interfacce per software tecnici

Progettazione di un software di simulazione professionale

Utenti professionali

Design UX

Design UI

CLIENTEGexcon
POSIZIONELondon, UK
SQUADRAUX designer, UI designer, interaction designer, project manager, product owner, ricercatore
SITO WEB

Il software è riconosciuto come il più potente software di fluidodinamica computazionale grazie alle sue capacità di simulazione. Questo non sorprende, visto che è nato negli anni '90 dall'Istituto Chr. Michelsen per la Scienza.

Tuttavia, il problema è che gli utenti originari sono ormai in pensione e le loro nuove controparti preferiscono alternative software meno capaci, grazie a processi di apprendimento più semplici.

Questo problema li ha portati a rivolgersi alla nostra agenzia di UX design. Ci è stato affidato il compito di ripensare l'intera esperienza utente e, di conseguenza, di dare al software altri 25 anni di vita.

I NOSTRI CONTRIBUTI

Requirements Mapping

Ricerca degli utenti

Benchmarking

Design UX

Prototipazione

UI Design - claro y oscuro

Sistema di progettazione

Garanzia di qualità

ROMPERE IL CIRCOLO VIZIOSO DELL'INTERDIPENDENZA

Il software esisteva da 25 anni e la sua storia si manifestava come una rete di interdipendenze complesse. Come si fa a superare questo problema come UX designer?

Innanzitutto, abbiamo convinto i product manager che, se volevamo progettare per il futuro, avremmo dovuto superare le loro intuizioni su ciò di cui gli utenti avevano bisogno in passato.

Abbiamo intrapreso quattro settimane di ricerca sugli utenti e abbiamo mappato le esigenze dei futuri utenti. Il secondo hack che abbiamo utilizzato nel nostro processo è stato quello di partire dal centro prima di imbarcarci in un imprevedibile design end-to-end. Abbiamo identificato 10 sfide chiave del design UX e sviluppato alcune possibili soluzioni per ciascuna di esse: in sei settimane abbiamo tracciato uno spazio di opzioni del design UX.

Questo ha portato alla soddisfazione di entrambe le parti: le premesse della trasformazione UX più ampia erano state poste e la comprensione delle esigenze degli utenti, orientata al futuro, le ha supportate. Inoltre, c'era anche un'idea di massima di come sarebbero potute apparire le aree chiave dell'interfaccia utente, che ci ha aiutato nel nostro percorso di progettazione.

Diagramma che illustra il processo di progettazione UX e UI di un software tecnico.
Quotes
Non riesco a credere a quanto hai imparato da solo in tre giorni, anche alcuni degli esperti che addestro hanno bisogno di più tempo.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

COMPRENSIONE DI 15 ANNI DI DEBITO TECNICO

Si dice che "i progettisti odiano il debito tecnico e preferiscono una tabula rasa".

Questo non vale per la nostra agenzia di UX design. La storia è e sarà sempre una ricca fonte di informazioni che aspettano solo di essere utilizzate per la progettazione di software professionale.

La domanda è: come si fa ad assimilare così tanto in così poco tempo? Ci si siede e si impara.

La forza sta nell'apprendimento auto-diretto che, nel caso di questo progetto di design, ha significato: leggere i manuali, studiare con i tutorial di Youtube, eseguire test/esercizi nel software e, soprattutto, fare molte domande.

Abbiamo sottoposto queste domande ai principali stakeholder. Alcune erano destinate ai product manager, altre agli sviluppatori. Alla fine, nel corso di una settimana, hanno trascorso con noi circa quattro ore. È stato esattamente sufficiente per renderci operativi.

Schermate di una vecchia interfaccia utente di un software di simulazione CFD.

MAPPARE LE ESIGENZE DEGLI UTENTI PROFESSIONALI

Il problema degli utenti di software professionali è che le loro esigenze sono complesse. I flussi di lavoro comportano numerose fasi e raramente sono lineari. Gli utenti vogliono e devono fare molte cose diverse. Tuttavia, non sembrano esistere schemi. Tutte le interazioni, a differenza dei cruscotti web, avvengono in un'unica schermata senza pagine collegate.

I product manager possono sembrare avere una profonda comprensione di una routine, ma colgono solo una frazione della reale diversità delle esigenze degli utenti.

Sapendo questo, ci siamo confrontati con utenti reali per scoprire le sfumature necessarie. Sfruttando la nostra esperienza nella ricerca sugli utenti e nella ricerca tecnica, abbiamo affrontato il progetto in modo pragmatico ed efficiente.

Diagramma di analisi delle esigenze dell'utente per la progettazione dell'interfaccia grafica di un software complesso.
Grafica astratta con cubo scuro e sfera chiara per spezzare un caso di studio UX.

LA RICERCA RIVELA OPPORTUNITÀ DI PRODOTTO

Gli stakeholder sono rimasti sorpresi quando la ricerca ha rivelato che alcune caratteristiche, le più costose da mantenere, non sono affatto importanti per gli utenti.

Questo è un chiaro esempio del perché ripensare il concetto di prodotto paga nel lungo periodo, anche se subisce modifiche minori o maggiori. L'esercizio non richiede molto tempo, ma porta molto valore:

• Allinea le tempistiche di sviluppo alle esigenze del mercato; • evita lo spreco di risorse; • Rivela le priorità relative, consentendo di prendere decisioni di progettazione più avanti nella fase di progettazione; • Rinnova l'entusiasmo del team per il difficile lavoro che lo attende; • aiuta il marketing a capire come il prodotto sarà rilevante per i clienti in futuro.

Non sarebbe strano se il software professionale rimanesse lo stesso mentre il design, il codice, gli utenti e persino il mondo intero si evolvono e cambiano?

Diagramma che elenca le caratteristiche di un software tecnico professionale nel processo di sviluppo del prodotto.
Diagramma che mostra il processo di progettazione di mini-prototipi per l'interfaccia utente di un software professionale.

ESPLORAZIONE DEL DESIGN CON MINI-PROTOTIPI

Invece di buttarci a capofitto in un lungo percorso di design aperto, abbiamo impiegato sei settimane per forgiare la spina dorsale della nuova UX. Il nostro approccio è stato inaspettato.

Abbiamo identificato le dieci sfide chiave dell'interfaccia utente che determinano l'esperienza dell'utente dell'intera applicazione. In seguito, abbiamo creato una serie di mini-prototipi per ogni sfida e abbiamo mappato le opzioni di design disponibili.

In sei settimane abbiamo sviluppato un totale di 45 soluzioni. Abbiamo raccolto il feedback di utenti, ingegneri e stakeholder. Poi abbiamo esaminato attentamente i pro e i contro di ogni singola soluzione. Questo confronto ci ha aiutato a capire quali soluzioni funzionavano bene insieme.

Dopo sei settimane, avevamo sviluppato la struttura portante dell'esperienza utente del software, basata su test, esperimenti e dati concreti. Questo segna il punto in cui il resto del processo di progettazione diventa prevedibile.

Un brief scritto per la progettazione di un componente dell'interfaccia utente di un software tecnico.

SMART UX DESIGN IS DISCOVERED, NOT CREATED

Come ogni risultato degli sforzi ingegneristici, un'interfaccia utente deve riflettere la realtà. Si suppone che sia basata su ciò di cui gli utenti hanno bisogno quotidianamente, su ciò che il codice può fare e su ciò che vende il mercato.

I vantaggi della mappatura delle opzioni di progettazione per le parti più importanti dell'esperienza dell'utente sono: • Stabilisce i fatti come base per la progettazione; • Fornisce chiarezza a tutti gli stakeholder con immagini; • Va oltre i luoghi comuni, in contrasto con un processo lineare; • supporta la coerenza;

In definitiva, questo approccio alla progettazione dell'esperienza utente rende prevedibile lo sviluppo del prodotto, risolvendo al contempo il dilemma dell'uovo e della gallina che trasforma le complesse interfacce utente dei software professionali.

01 /06
arrow left
arrow right

NELLA PROGETTAZIONE DELL'ESPERIENZA UTENTE END-TO-END

Dopo aver stabilito il concetto di base per il 20% più difficile dell'esperienza utente, il restante 80% doveva ancora essere affrontato.

Abbiamo impiegato quattro mesi per sviluppare l'esperienza utente end-to-end dell'intera applicazione software e dei suoi moduli.

A questo punto del viaggio, tutto era prevedibile e non c'erano quasi sorprese degne di nota per il team di prodotto. Tuttavia, dietro le quinte, abbiamo dovuto affrontare sfide ogni settimana. Il nostro obiettivo era quello di far sì che l'interfaccia incorporasse tutte le funzionalità in modo fluido.

Durante questa fase, i nostri risultati sono stati wireframe e prototipi ad alta fedeltà. Tuttavia, il vero punto cruciale è stato raccogliere feedback e iterare i progetti per coprire tutte le basi.

BILANCIARE LAYOUT ROBUSTI E FLESSIBILITÀ

Il software professionale è complicato perché, essenzialmente, esiste una sola vista e non un insieme di pagine. Di conseguenza, questa singola vista deve ospitare tutte le funzionalità del software, sia quelle attuali che quelle future.

Come designer, cerchiamo di ottenere un layout e un'architettura dell'esperienza utente che abbiano una struttura logica. Questo aiuta gli utenti a usare la loro intuizione quando si chiedono "dov'è cosa" e "cosa succede se".

Allo stesso tempo, puntiamo alla flessibilità: un'interfaccia utente in grado di accogliere tutte le funzionalità in qualsiasi momento. Inoltre, l'interfaccia utente di un software professionale deve essere pratica in tutti i casi d'uso, evitando un approccio rigido.

Il raggiungimento del giusto equilibrio tra robustezza e flessibilità è ciò che occupa quattro mesi di duro lavoro.

VISUALIZZAZIONE DI DATI E DETTAGLI TECNICI

Per rendere questo software tecnico di facile utilizzo è stato necessario visualizzare i dati in modo pertinente per gli ingegneri. Inoltre, è stato necessario creare componenti dell'interfaccia utente che esprimessero chiaramente i concetti tecnici. Per esempio:

• Definizione dei parametri dello scenario; • Diagrammi del vento; • Miscele chimiche; • Librerie di texture; • Punti di monitoraggio; • Contorni del progetto; • Barre di stato; • Filtraggio;

Ancora una volta, il nostro approccio progettuale che prevedeva la messa in campo di opzioni ha dato ottimi risultati. Questo ha permesso di confrontare facilmente le diverse opzioni progettuali in base ai loro meriti effettivi: "Aiutano o no gli utenti tecnici a capire meglio?".

Questo processo consente di ottenere piccoli dettagli di design che non solo migliorano l'esperienza dell'utente, ma si integrano perfettamente nel quadro generale, elevando l'umore degli utenti e garantendo un'esperienza coesa.

Schermata di un'interfaccia utente per un software di simulazione tecnica, con un componente dell'interfaccia utente evidenziato
Componente UI per definire la miscela di una sostanza chimica, affiancata da un diagramma dei parametri.
Diagramma che illustra un principio di progettazione dell'interfaccia utente chiamato convenzione mnemonica.

PROGETTAZIONE METICOLOSA DEI COMPONENTI DELL'INTERFACCIA UTENTE

Il design dell'interfaccia utente del software professionale è stato realizzato sulla base di principi mirati per garantire una coerenza che soddisfi gli utenti tecnici.

Ad esempio, nel progettare i componenti per l'interazione con la geometria 3D, abbiamo utilizzato principi di colore che supportano la memoria. Inoltre, la nostra griglia garantisce la coerenza dei componenti dell'interfaccia utente, indipendentemente dalle interazioni degli utenti con la geometria 3D.

Abbiamo iterato diverse opzioni di design per l'interfaccia utente, sperimentando varie combinazioni di tratti e opacità. Poi abbiamo testato i componenti in tutti gli scenari possibili per determinare la soluzione ottimale. Questa ricerca garantisce che in nessuna variante siano presenti elementi dell'interfaccia utente indesiderati e difettosi.

Il design dell'interfaccia utente va oltre la semplice applicazione dei colori del marchio. Al contrario, migliora attivamente il flusso di lavoro degli utenti, conferendo al software un aspetto e un'atmosfera senza tempo.

Diagramma che mostra come l'agenzia di design ha sviluppato e testato un componente dell'interfaccia utente per il software.

SUPPORTO PER GLI SVILUPPATORI DI SOFTWARE

Il design dell'interfaccia utente è stato realizzato per essere reattivo e facilmente scalabile per sviluppi futuri. Per garantire che il design funzioni perfettamente negli scenari reali, abbiamo fornito agli sviluppatori un'assistenza completa.

Ad esempio, invece di fornire principi vaghi e lasciare che gli sviluppatori capiscano da soli come applicarli durante il codice, abbiamo offerto un sistema di progettazione che fornisce una panoramica di tutti gli scenari possibili. Include esempi dettagliati per garantire che l'interfaccia utente funzioni efficacemente in ogni circostanza.

Approfondendo questo livello di dettaglio, ci assicuriamo che il sistema sottostante al progetto sia logico e copra tutti i casi. Fornendo agli sviluppatori un'esposizione dettagliata del sistema, abbiamo semplificato i loro sforzi, consentendo loro di concentrarsi esclusivamente sulla codifica.

Schermata di un sistema di progettazione dettagliata per un software nativo utilizzato da utenti professionali.
Diagramma che confronta la modalità chiara e scura di una GUI creata da un'agenzia di UX design

DESIGN PER L'INTERFACCIA UTENTE CHIARA E SCURA

Abbiamo sviluppato l'interfaccia utente di questo software professionale con varianti sia scure che chiare. Questo si rivolge a diverse categorie di utenti che lavorano in ambienti molto diversi.

Per stabilire il collegamento diretto tra gli stati dell'interfaccia utente è stato creato un sistema di regole. Di conseguenza, ogni colore nella modalità UI chiara ha una controparte corrispondente nella modalità UI scura. Questa relazione si basa su una formula.

Le definizioni coerenti dei colori assicurano che non ci siano incongruenze quando si passa da una modalità chiara a una scura dell'interfaccia utente.

Questo approccio alleggerisce anche il carico di lavoro degli sviluppatori, eliminando la necessità di codificare interfacce utente separate.

Scuro
Luce
Schermata di un sistema di progettazione dettagliata per un software nativo utilizzato da utenti professionali.
Elementi di design

PROGETTAZIONE UX E UI PER IL SOFTWARE PROFESSIONALE

Data la ricca storia di questo software professionale, l'ambizione principale di questo progetto è stata quella di reinventare l'interfaccia utente preservando le caratteristiche che hanno resistito alla prova del tempo.

La sfida principale consisteva nel gestire la complessità del sistema. Questo ha introdotto l'incertezza nel progetto di trasformazione della UX.

Abbiamo implementato fasi temporali per alleviare parte della complessità. Durante queste sessioni, abbiamo studiato le potenziali soluzioni per le principali sfide UX. Nel giro di due mesi abbiamo raggiunto un punto in cui la roadmap di progettazione e sviluppo per l'anno successivo è diventata prevedibile.

La fase finale è stata incentrata su un lavoro preciso e meticoloso per realizzare l'interfaccia utente immaginata. Ciò ha comportato lo studio dei dettagli tecnici e la collaborazione con gli utenti tecnici per capire quali componenti espressivi potessero inserirsi nella struttura flessibile dell'interfaccia utente.