Ajutând AI să vadă clar: un studiu de caz pentru designul tabloului de bord

Inteligența artificială (AI) lucrează din greu în multe industrii astăzi. Ajută comercianții cu amănuntul să gestioneze stocurile și să prezică cererea, facilitează identificarea cancerului de către medici în scanările pulmonare și permite mașinilor să se conducă singure.

Dar automatizarea bazată pe inteligență artificială continuă să evolueze și necesită încă intervenția umană. În acest studiu de caz de proiectare a tabloului de bord, detaliez modul în care am dezvoltat interfețele de utilizare care ajută operatorii umani să îmbunătățească procesele de recunoaștere a inteligenței artificiale.

Clientul

Clientul a fost un startup din SUA care își ajută clienții să rezolve erorile de recunoaștere a imaginii AI pentru mai multe industrii în timp real. Soluțiile pe care le oferă îmbunătățesc sistemele automate care permit cartografierea terenului, clasificarea plantelor, identificarea produselor de vânzare cu amănuntul, scanarea codurilor de bare și multe altele.

Sistemele de recunoaștere a imaginilor AI sunt instruite să recunoască și să interpreteze inputurile vizuale și să ia decizii pe baza a ceea ce „văd”. Dar uneori aceste sisteme întâmpină excepții - imagini pe care nu le pot procesa deoarece obiectul are un aspect neașteptat. O excepție poate face ca un sistem AI să eșueze să identifice informații esențiale sau să identifice greșit ceea ce vede. De exemplu, un scaner pentru produse alimentare ar putea să nu recunoască o cutie de suc de portocale, deoarece recipientul s-a schimbat sau un robot de fermă cu conducere autonomă poate deveni confuz de un obstacol. Probleme ca acestea pot cauza întârzieri sau întreruperi ale operațiunilor unei afaceri.

Pentru a rezolva aceste probleme, software-ul clientului se integrează cu sistemele AI ale clienților săi, permițând operatorilor umani să revizuiască și să rezolve problemele de recunoaștere în timp real. Dar operatorii fac mai mult decât să rezolve excepțiile: de asemenea, învață sistemele AI ce să facă data viitoare când întâlnesc ceva similar. Acest lucru are ca rezultat sisteme AI care sunt mai bine echipate pentru a identifica o gamă mai largă de imagini.

Scurtul

Pe parcursul a două luni, am lucrat cu clientul pentru a livra proiecte pentru un tablou de bord pentru operator și un tablou de bord pentru clienți. De asemenea, am pregătit o bibliotecă de componente și un ghid de stil care a însoțit aceste livrabile.

Abordarea mea urmează procesul de gândire a designului, care implică cercetare, brainstorming, prototipare cu fidelitate scăzută, prototipare de înaltă fidelitate și testare de utilizatori. Adaptez întotdeauna acest proces în funcție de disponibilitatea timpului, capitalului și oamenilor.

În timpul proiectului, am lucrat îndeaproape cu echipa fondatoare a clientului și cu dezvoltatorul front-end, împărtășind actualizări zilnice care i-au ajutat pe toți să rămână informați despre progresul meu. De asemenea, am colaborat cu doi operatori care au oferit o perspectivă neprețuită asupra muncii lor de zi cu zi.

Îmbunătățirea tabloului de bord al operatorului

În centrul produsului clientului se află tabloul de bord al operatorului - interfața pe care specialiștii săi AI o folosesc pentru a rezolva problemele de recunoaștere a imaginii. Când un sistem AI are probleme în identificarea unei imagini, acea imagine este trimisă la tabloul de bord al unui operator. Operatorul etichetează manual imaginea prin marcarea fiecărui obiect și clasificându-l pe baza etichetelor predeterminate, cum ar fi „om”, „copac” sau „obstacol mare”.

Când am intervievat operatorii clientului, aceștia mi-au arătat starea actuală a software-ului pe care îl foloseau și mi-au permis să-i observ cum își fac munca. Din această cercetare inițială, am adunat perspective, puncte de durere și oportunități de îmbunătățire care ar informa design-urile mele.

Am descoperit că lipsesc o funcționalitate importantă și că anumite sarcini erau complicate inutil, ceea ce a făcut ca interfața să fie greu de utilizat. De exemplu, pentru a eticheta o imagine, operatorul trebuia să meargă înainte și înapoi între bara de instrumente și imagine de fiecare dată pentru a selecta, eticheta, revizui și trimite. De asemenea, lipsea și capacitatea de a anula sau reface o acțiune, ceea ce însemna că operatorii trebuie să repete sarcini sau să facă pași suplimentari atunci când au făcut o greșeală.

O altă îngrijorare a fost că interfața nu avea un aspect și o senzație unificate, deoarece se baza în principal pe un amestec de componente gata făcute. Aceste inconsecvențe au făcut ca anumite elemente și funcții să fie greu de găsit sau de utilizat.

Având în vedere aceste oportunități de îmbunătățire, am făcut brainstorming conceptele inițiale și am creat wireframes, pe care le-am împărtășit celor doi operatori. În fiecare zi, pe parcursul unei săptămâni, le-am prezentat operatorilor wireframes și le-am discutat despre impresiile lor inițiale prin sesiuni virtuale de feedback. Sesiunile au fost extrem de colaborative și m-au ajutat să adun idei pentru perfecționarea tabloului de bord.

Un punct interesant care a apărut în timpul sesiunii de feedback a implicat cantitatea de informații afișată pe bara de instrumente din dreapta, unde operatorii își selectau acțiunile. Designul meu original a sugerat o soluție foarte minimalistă - o bară de instrumente care ar putea fi restrânsă într-un panou îngust care să arate doar pictograme. Acest lucru, am crezut, ar permite ca accentul să fie pe imaginea centrală.

Operatorilor însă nu le-a plăcut ideea pentru că era greu de înțeles dintr-o privire ce înseamnă pictogramele și care au fost principalele acțiuni. Cu această perspectivă importantă, mi-am dat seama că mai simplu nu este întotdeauna mai bun. În acest caz, lăsarea mai multor informații vizibile a ajutat operatorii să lucreze mai eficient.

După îmbunătățirea și perfecționarea wireframe-urilor inițiale, am creat un prototip interactiv, de joasă fidelitate în Figma și l-am trimis operatorilor și părților interesate pentru ca aceștia să-l testeze. Odată ce am primit feedback-ul lor, am repetat designul până când toată lumea a fost mulțumită.

După cum am menționat, tabloul de bord original a fost creat folosind un amestec de componente UI gata făcute, iar experiența în produs nu a fost consecventă pe tot parcursul.

Cu toate acestea, în interesul timpului și al bugetului, părțile interesate au dorit să păstreze componentele gata făcute acolo unde este posibil. Așadar, lucrând cu dezvoltatorul front-end, am personalizat componentele existente, care includeau butoane, formulare și câmpuri și alte elemente ale interfeței de utilizare, pentru a se potrivi cu aspectul și senzația noilor tablouri de bord. Aceste modificări au afectat culorile, fonturile, spațierea și alte detalii. În cazurile în care a fost imposibil să actualizați componentele existente, cum ar fi animațiile de progres live-view, am creat altele noi. Majoritatea tabloului de bord al operatorului a fost construită de la zero în acest fel.

Apoi am produs un prototip navigabil, de înaltă fidelitate, care includea culoarea și tipurile de fotografii pe care operatorii le vedeau de obicei în software. Am inclus, de asemenea, instrumente de selecție, cum ar fi dreptunghiuri, creioane și poligoane și am adăugat un panou în partea de jos a ecranului, unde operatorii puteau îmbunătăți imaginile. În cele din urmă, am trimis prototipul, împreună cu specificațiile pentru microinteracțiuni animate în After Effects, dezvoltatorului front-end, astfel încât să poată construi tabloul de bord.

Proiectarea unui tablou de bord pentru clienți de la zero

A doua fază a proiectului a fost un tablou de bord pentru clienți care le permite proprietarilor sistemelor AI să observe progresul problemelor lor în curs de rezolvare. Clientul a dorit să îmbunătățească această experiență înainte de a lansa produsul către mai mulți clienți.

Inițial, clienții clientului trebuiau să solicite rapoarte de progres prin e-mail. Fiecare raport a fost un fișier PDF sau CSV care a indicat care excepții au fost rezolvate sau sunt încă în curs. Clientul avea nevoie de o modalitate prin care clienții să verifice starea fiecărei excepții dintr-o privire.

Cu tabloul de bord pe care l-am conceput, clienții se pot conecta și monitoriza progresul fiecărei excepții în timp real. Ei pot vedea imaginile care au venit, cele care sunt revizuite și excepțiile care au fost deja rezolvate. De asemenea, pot vizualiza detaliile fiecărei soluții pentru a înțelege mai bine cum a fost rezolvată problema.

Tabloul de bord conține grafice și vizualizări pentru a ajuta clienții să înțeleagă mai bine datele rezumate, cum ar fi angajamentele totale și rezoluțiile totale. De asemenea, clienții pot accesa și gestiona cu ușurință aspectele comerciale ale conturilor lor, inclusiv metodele de plată și informațiile de conectare.

Pentru prototipul tabloului de bord al clientului, am creat animații în After Effects pentru a demonstra cum se vor comporta anumite elemente ale UI. De exemplu, am creat o animație de progres pentru a afișa o excepție în examinare, care devine o bifă atunci când excepția a fost rezolvată. De asemenea, am proiectat un punct care pulsa pentru a arăta când un proiect este live.

Construirea unei biblioteci de componente în Figma

Un aspect important al proiectării produselor care sunt scalabile și ușor de întreținut este crearea unei biblioteci de componente și a unui ghid de stil. Având componente de design standardizate și reutilizabile, asigură atât consistența, cât și viteza atunci când scalați și adăugați caracteristici unui produs digital.

Am ales să găzduiesc biblioteca clientului în Figma, deoarece facilitează modificarea componentelor și actualizarea acestora oriunde apar într-un design. Toate componentele și stilurile au fost documentate folosind o grilă cu opt puncte. Biblioteca a inclus componente de bază, cum ar fi meniuri, bare laterale, file, pictograme de introducere și butoane, în timp ce ghidul de stil acoperea elemente precum tipografie, culori, pictograme, spațiere și grile.

În viitor, biblioteca de componente poate evolua într-un sistem de proiectare cu drepturi depline. Dar, deocamdată, servește drept fundație pentru creșterea produsului și ca referință pentru viitorii designeri, fie ei personal intern, freelanceri sau profesioniști din agenție.

Cercetarea utilizatorilor contează

Acest proiect a fost plină de satisfacții, deoarece mi-a oferit oportunitatea de a perfecționa un produs digital care îmbunătățește sistemele automate din mai multe industrii și modelează modul în care AI interpretează lumea. De asemenea, a întărit importanța cercetării utilizatorilor și a observației directe. A fi capabil să urmărească operatorii care își fac treaba și pun întrebări a fost esențial pentru a oferi tablouri de bord care le-au permis să lucreze mai eficient și mai eficient. Un designer nu poate îmbunătăți modul în care lucrează cineva până când nu își înțelege experiența în primul rând.

Citiți suplimentare pe blogul Toptal:

• Proiectarea tabloului de bord – Considerații și cele mai bune practici
• Consistența este cheia - Cum să construiți un sistem de proiectare Figma
• Tehnici de cercetare UX și aplicațiile acestora
• Valoarea cercetării utilizatorilor
• Adevărata rentabilitate a investiției UX: Convingerea Executive Suite