Testare A/B UX pentru cadre bazate pe componente

Familiarizarea cu codificarea poate fi de mare beneficiu pentru designeri. În consecință, mulți s-au scufundat și au învățat cum să lucreze cu codul (sau cel puțin să vorbească limba acestuia într-o oarecare măsură) ca o modalitate de a fi mai eficient atunci când colaborează cu inginerii. JavaScript, probabil limbajul de scripting preferat al web-ului, are o comunitate solidă care modelează viitorul web-ului cu cadrele pe care le creează.

Ca urmare a structurii și constrângerilor lor tehnice, cadrele precum Vue.js, React.js și Material UI sunt importante de luat în considerare pentru proiectanți, deoarece acționează ca blocuri pentru sisteme de proiectare robuste. Mai mult, cunoașterea modului în care funcționează codul este, de asemenea, utilă atunci când facilităm tehnicile de proiectare bazate pe date într-un mediu de dezvoltare, cum ar fi testele A/B.

Într-un proiect recent pentru o startup care creează o platformă de gestionare a pacienților pentru a conecta indivizii cu profesioniștii din domeniul sănătății mintale, am constatat că crearea și gestionarea conturilor de pacienți cu cât mai puține frecări posibil au fost esențiale pentru un număr de consilieri clinici. Concentrarea pe crearea unei experiențe intuitive de navigare pentru profilurile pacienților a fost crucială, la fel ca și crearea unui flux optim de utilizatori pentru a crea, edita și atribui activități de wellness pacienților.

Discuând proiectul cu responsabilul tehnic, s-a stabilit că, în principiu, aplicația era destul de simplă: clinicienii aveau nevoie de capacitatea de a crea și edita profiluri de pacienți, de a vizualiza o bibliotecă de activități de wellness și de a atribui lecții pacienților.

Echipa a decis să alinieze designul proiectului cu cadrul Material UI, utilizând elemente de bază cum ar fi modalii pop-up, carduri de afișare, butoane active/inactive, liste de acordeon și o serie de notificări de succes și avertismente. Odată ce componentele care ar alcătui elementele de bază au fost definite, echipa de produs a oferit opinii diferite despre aspectul aplicației.

În timpul discuțiilor despre designul UI al proiectului, dezvoltatorul a explicat diferența dintre componentele funcționale și cele de afișare și modul în care componentele funcționale controlează fluxul de date ale unei aplicații, în timp ce componentele de afișare sunt relevante pentru UI și aspect.

Mai simplu, componentele de afișare definesc limbajul vizual al unei aplicații, iar componentele funcționale ajută la aducerea lor la viață .

Această structură oferă posibilități unice designerilor deoarece, de obicei, codul care se ocupă de gestionarea logicii unei aplicații este izolat într-un fișier separat de cel care controlează aspectul UI. Făcută corect, această abordare a proiectării software asigură o bază de cod modulară și robustă , care permite un proces bazat pe testare.

Ar putea fi testate funcții identice în layout-uri alternative cu un efort ingineresc minim? Răspunsul este „Da”, iar dacă se face cu o metodă A/B la începutul procesului, aceasta va fi introdusă într-un ciclu de viață slab de dezvoltare a produsului. (Dezvoltarea de produse Lean este o derivație a conceptului japonez de kaizen, filozofia de afaceri de a aduce îmbunătățiri progresive fluxurilor de lucru, practicilor, tehnicilor și, în acest caz, produselor.)

Eric Ries, antreprenor și autor în serie, discută despre un ghid practic pentru ciclul de viață de dezvoltare a produsului Lean în cartea sa The Lean Startup . Metoda urmărește un flux de lucru de construire a produselor cu o ipoteză clară, testând ceea ce a fost construit și repetarea pe baza a ceea ce a fost învățat.

Metoda Lean Startup

Definirea abordării de testare A/B

Testarea A/B este o componentă de bază a setului de instrumente al oricărui profesionist experimentat UX. Rolul său în ciclul de viață al dezvoltării software este de a ajuta la îmbunătățirea gradului de utilizare a aplicațiilor. În combinație cu datele de cartografiere termică, echipele pot obține informații valoroase asupra comportamentului utilizatorului, mai ales când vine vorba de punctele de frecare din fluxul unei aplicații.

Înainte de a începe testarea A/B, iată câteva întrebări pentru a concentra procesul:

• Cum se utilizează testarea A/B în UX?
• Ce metode de analiză A/B sunt disponibile?
• De ce să proiectați teste A/B în timpul wireframing?
• Pentru ce testăm?

Cea mai comună metodă de testare A/B la scară este un test împărțit care servește versiuni ușor diferite ale unei aplicații sau ale unui site web utilizatorilor în direct. Un test împărțit este adesea în afara domeniului de aplicare și/sau bugetului unui startup sau unei afaceri mici. Cu toate acestea, există alternative la testarea pe scară largă care sunt mai accesibile și includ: interviuri în persoană, grupuri de discuție și servicii online care vă conectează la o rețea de utilizatori de testare.

Design bazat pe teste A/B

În timpul procesului de wireframing, este important să luați în considerare posibilitățile de testare A/B din perspectiva aspectului și a navigării. Variațiile simple ale componentelor de afișare pot schimba cu ușurință modul în care sunt prezentate informațiile. Cadrele bazate pe componente vă oferă libertatea de a experimenta modul în care este organizat conținutul fără a fi nevoie să reproiecteze funcționalitatea de bază a unui produs.

Ca orice efort de proiectare, testarea A/B eficientă ar trebui să urmeze o metodologie clar definită. Mai întâi, decideți pentru ce variabilă testați. Apoi, definiți ce înseamnă succes. Terminați prin evaluarea datelor și stabiliți care ar trebui să fie următorul pas.

De exemplu, într-un caz, ierarhia aspectului a fost testată. Aspectul A a fost alcătuit dintr-o grilă cu două coloane care avea componenta listă de pacienți în stânga ecranului și componenta profil pacient în dreapta. Aspectul B avea o listă de pacienți cu o singură coloană, care ar face clic către componenta de profil a pacientului.

Primul nostru test a fost pentru claritate. Am întrebat consilierii clinici în sesiunile de interviu care dintre cele două modele s-a simțit cel mai organizat. Spre deosebire de ipotezele interne, grila cu o singură coloană a fost puternic indicată a fi soluția de proiectare mai intuitivă. Consilierii noștri au considerat că combinația dintre o listă de pacienți și un profil în același afișaj s-a simțit „ocupată” și „aglomerată”. În schimb, cuvintele folosite pentru a descrie aspectul grilei cu o singură coloană erau clare și „curate”.

„Modelul cutiei de componente”

Pentru această aplicație web, am folosit React, un cadru bazat pe concepte de management de stat și componente modulare. React este o bibliotecă JavaScript declarativă, eficientă și flexibilă pentru construirea de interfețe cu utilizatorul. Vă permite să compuneți interfețe de utilizare complexe din bucăți mici, izolate de cod numite „componente”. Această modularitate se traduce prin flexibilitate atunci când lucrați la un produs care implică atât dezvoltatori, cât și designeri.

Am ajuns să înțeleg acest cadru inspirându-mă din modelul casetei HTML+CSS. Modelul casetei de componente oferă o modalitate organizațională prin care să creați blocuri de construcție pentru o aplicație. Este deosebit de potrivit pentru dezvoltarea unui sistem de proiectare pentru proiecte cu evoluție rapidă.

Pentru a menține gândirea de proiectare agilă, poate fi urmat un set de principii de proiectare, potrivite în special pentru un ciclu de viață de dezvoltare a produsului slab.

• Primul principiu: Grupați contexte și acțiuni similare .
• Al doilea principiu: Lăsați arhitectura informațională să ajute la simplificarea fluxului de „stare” între componente.
• Al treilea principiu: Proiectați sisteme vizuale scalabile pentru a simplifica modul în care dezvoltatorii înțeleg și implementează design-urile.

Gruparea contextelor similare

Luați în considerare modelul mental al utilizatorilor dvs. - grupați rezultate și acțiuni similare în funcție de „contextul lor de utilizare”. Luați în considerare dacă utilizatorii trebuie să creeze, să citească, să actualizeze și să ștergă articole în fiecare context și dacă trebuie să oferiți feedback pentru acțiunile lor. Când definiți un test A/B pentru un scenariu de utilizare specific, luați în considerare aspectul, cum să accesați intrările și metodele de navigare.

Simplificați fluxul de interacțiune al „statului”

În React, fluxul de „stare” se referă la modul în care informațiile se mișcă într-o aplicație, la modul în care componentele ajută la organizarea datelor și la modul în care acestea sunt afișate. De obicei, starea curge în componentele de afișare din componente funcționale care acționează ca containere. Designerii se pot pregăti pentru testele A/B, subliniind în mod preventiv modul în care componentele funcționale pot modifica aspectul unei aplicații prin schimbarea modului în care sunt evaluate componentele de afișare.

Dezvoltați sisteme de proiectare robuste

Folosirea componentelor de afișare pentru a dezvolta standarde pentru elemente vizuale, cum ar fi tipografie, butoane, intrări, modale și carduri ajută la furnizarea elementelor de bază pentru un limbaj de design standardizat. Sistemele vizuale robuste au flexibilitatea de a menține designerii și dezvoltatorii UX pe aceeași pagină despre componentele la care se face referire în wireframes.

rezumat

Succesul designului bazat pe teste A/B este legat de sinergia dintre echipele de produs și cele tehnice. Designerii care doresc să adopte această metodă ar trebui să fie precisi despre unde și cum să testeze. Petreceți timp dezvoltând o ipoteză și determinând ceea ce sperați să aflați. Nu te distras. Ține-te de el – foarte ușor să te îndepărtezi de metoda ta.

Acest proces nu este niciodată terminat cu adevărat și evoluează pe măsură ce produsele cresc. Designerii care folosesc o strategie de dezvoltare a produsului bazată pe teste ar trebui să profite de oportunitățile de învățare care apar pe parcursul ciclului de viață al dezvoltării unui produs.

Componentele, la fel ca sistemele de design, sunt despre modularitate și reutilizarea modelelor, nu despre aspect sau stil. Din perspectiva unui designer, flexibilitatea de a testa, rafina și îmbunătăți produsele cu testarea A/B poate ajuta la dezvoltarea unor produse care sunt mai centrate pe utilizator, ceea ce duce în cele din urmă la un succes mai mare al acestora.

•••

Citiri suplimentare pe Blogul Toptal Design:

• Utilizarea modelelor mentale în UX Design
• Testare UX pentru mase: Păstrați-o simplă și rentabilă
• Ghidul fundamental pentru utilizarea mobilă
• Valoarea cercetării utilizatorilor
• Înțelegerea sistemelor și modelelor de proiectare