Prototipuri sofisticate – De ce să folosiți Axure

„Designul nu este doar ceea ce arată și se simte. Designul este modul în care funcționează.” - Steve Jobs

Prototipurile s-au dovedit neprețuite pentru a lua decizii mai bune de proiectare. Ca artefacte, prototipurile sunt unul dintre livrabilele de bază în proiectarea și prototiparea UX și, ca activitate, sunt în centrul procesului de proiectare centrat pe utilizator. Un prototip este o amalgamare a tuturor lucrărilor anterioare de proiectare UX, fuzionate într-un singur produs vizual, funcțional, care este utilizat pentru a valida ipotezele și a testa proiectele.

Sună destul de ușor, dar într-o lume saturată cu o abundență de instrumente de proiectare, alegerea instrumentului potrivit de prototipare nu este o sarcină mică care necesită o atenție atentă. Designerii trebuie să ia în considerare costurile, caracteristicile, integrarea cu alte instrumente de proiectare, curba de învățare, funcțiile de colaborare și platforma de redare pentru revizuire și testare de utilizator.

Pentru a complica lucrurile, mulți nou-veniți au ieșit recent pe scenă. Există instrumente doar online, de exemplu, Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, iar unele sunt software tradițional pentru desktop, cum ar fi Sketch și Adobe XD, cu prototipuri încorporate ca o extensie a funcționalității lor. Toate au avantajele și contra, caracteristicile și integrările lor.

Dar nou nu este întotdeauna mai bun. Pe câmpul de luptă sunt încă niște cai de război vechi: Axure este unul dintre ei. Când designerii doresc să livreze prototipuri detaliate și bogate în caracteristici, Axure merită un alt aspect. Axure există de ceva vreme, cu ani înainte să se nască noile instrumente menționate mai sus, iar mulți designeri îl consideră bunicul instrumentelor de wireframing și prototipare dotate cu capacități profunde.

De ce să folosiți Axure?

În zilele noastre, în cea mai mare parte, designerii folosesc instrumente de prototipare bazate pe hotspot cu care conectează ecranele și poate adaugă câteva tranziții de ecran. Problema este că această metodă nu include interacțiuni mici care completează experiența generală a utilizatorului în timpul testării. În schimb, Axure poate gestiona cu ușurință detaliile subtile și micro-interacțiunile care dau viață unui prototip.

Pentru a explora mai profund modul în care oamenii ar interacționa cu un design specific, designerii pot construi prototipuri cu logica condițională, diverse intrări ale utilizatorului și animații dinamice care fac prototipul să pară mai realist. Este o modalitate excelentă de a obține informații valoroase despre ceea ce funcționează și ce nu.

A trebui să săriți peste prea multe aplicații de proiectare neintegrate prezintă, de asemenea, o problemă de ineficiență. Fluxul de lucru tipic de proiectare implică un designer care creează interfețe de utilizare în Sketch și prototipează într-un alt instrument, cum ar fi InVision sau Marvel. După aceea, designul este predat dezvoltatorilor folosind încă un alt instrument, cum ar fi Zeplin.

Axure este o aplicație complet integrată care elimină nevoia de a utiliza diferite instrumente de proiectare. De exemplu, după crearea fluxurilor de utilizatori, hărți de călătorie a clienților, personaje, storyboard-uri, hărți de site, arhitectură de informații și wireframes, designerii pot continua cu ușurință prototipuri complexe, chiar în interiorul Axure. Atunci când designerii predau proiectele către dezvoltatori, aceștia pot înțelege mai bine cum ar trebui implementat ceva și pot lucra mai eficient cu managerii de produs pentru a estima domeniul de aplicare și a evalua fezabilitatea tehnică.

Cel mai mare impediment în furnizarea de produse și servicii bine concepute este lipsa de înțelegere a utilizatorilor noștri. Jared Spool, UIE (Ingineria interfeței cu utilizatorul)

Similar cu alte instrumente de proiectare, Axure poate fi preluat rapid și utilizat rapid. Widgeturile încorporate cu care să construiți interacțiuni dinamice pe care chiar și non-programatorii le pot înțelege pot fi folosite imediat pentru interacțiuni impresionante. Designerii care doresc să aprofundeze și să investească timp pentru a învăța aplicația pot construi site-uri web și aplicații complexe, realiste, cu interacțiuni complexe.

Exemple de prototipuri Axure din viața reală

Designerii au întotdeauna puțin timp și trebuie să demonstreze cum ar funcționa anumite fluxuri de utilizatori în recenzii și să testeze devreme cu utilizatorii design-urile produselor. Capacitățile de bază ale Axure pot străluci în aceste scenarii, deoarece designerii pot transforma rapid imaginile din alte instrumente de design în prototipuri interactive.

În exemplul de produs B2B de mai jos, o serie de ecrane au fost exportate din OmniGraffle ca PNG. Imaginile au fost decupate, mascate și puse pe straturi în Axure. Apoi, hotspot-uri și componente interactive au fost adăugate din biblioteca de widget-uri Axure, cum ar fi meniuri drop-down și câmpuri de formular, pentru a crea un prototip bogat și funcțional. Caracteristicile și funcționalitățile produsului au fost apoi testate utilizând testarea la distanță, moderată de utilizatori, care a condus la iterații rapide de proiectare bazate pe feedback-ul utilizatorilor.

Într-un alt exemplu, echipele de proiectare și inginerie au reușit să găsească cea mai bună modalitate de a proiecta două widget-uri deosebit de complicate pentru un produs B2B complex. Scopul a fost de a proiecta filtre avansate și un selector de coloană personalizat pentru un tabel bogat în date, care să îmbunătățească gradul de utilizare și să fie, de asemenea, fezabil din punct de vedere tehnic.

În acest scenariu, imaginile diferitelor stări au fost exportate din Sketch, iar interacțiunile rapide au fost adăugate și animate în Axure. Au fost adăugate componente UI, cum ar fi butoanele și casetele de selectare, pentru a demonstra interacțiunile și efectele acestora. Echipele au trecut prin mai multe iterații care au fost revizuite și testate. Cu alte instrumente de prototipare, acest efort poate dura mult mai mult.

Caracteristicile și beneficiile lui Axure

Am lucrat recent la o companie care a folosit doar prototipuri de bază ecran-la-ecran create cu InVision și nu făcuse niciodată multe teste de utilizator. Pentru a testa o caracteristică majoră a produsului viitoare, am fost însărcinat să creez un prototip detaliat de produs. O mare parte a mers pe această nouă funcție, iar părțile interesate au vrut să o facă corect.

Mi-a luat puțin mai puțin de două zile să creez un prototip detaliat în Axure cu diferite stări și o mulțime de micro-interacțiuni care să demonstreze cum se va comporta produsul în diferite scenarii. Ca un beneficiu neașteptat, au apărut multe cazuri marginale pe care echipa de proiectare a putut să le abordeze.

La testare, am putut vedea unde utilizatorii s-au luptat cu designul și de ce , ceea ce nu ar fi fost posibil cu un prototip mai puțin detaliat construit cu ecrane statice. Drept urmare, am reușit să rezolvăm rapid problemele pe care le-am găsit.

De asemenea, am transmis prototipul dezvoltatorilor pentru a le arăta unde erau punctele de întrerupere a designului receptiv, cum ar trebui să arate stările de focalizare sau de eroare și cum ar trebui să funcționeze căutarea predictivă.

Când dezvoltatorii front-end au putut să pună mâna pe prototip, le-a făcut și viața mult mai ușoară. Chiar și dezvoltatorii back-end au apreciat prototipul pentru că au putut vedea cum ar fi trebuit să funcționeze produsul final.

Acest tip de prototipare rapidă, testare și implementare a unei noi caracteristici de produs a fost mult mai rapidă decât orice altă dezvoltare de caracteristici pe care le-au implicat anterior și au apărut mai puține probleme când a fost vorba de faza de QA.

Când totul a fost spus și făcut, toți cei din echipă au menționat cât de util a fost prototipul detaliat și au cerut ca acest tip de proces de prototipare să fie realizat mai des. Rezultatul este că crearea, revizuirea și testarea unui prototip detaliat poate face o diferență enormă. Întreaga echipă a putut vedea interacțiuni esențiale, cuprinzătoare, care au fost semnificative pentru utilizatori.

Axure ne permite să testăm totul, chiar și cele mai complexe cazuri de utilizare. Prototipurile noastre arată și acționează ca un lucru real. Julie, Laboratorul de experiență a utilizatorului

Caracteristicile și punctele forte ale lui Axure

Designerii nu trebuie să știe cum să codifice pentru a crea prototipuri complexe, dinamice și bogate în funcții în Axure. Interacțiunile sofisticate și complicate pot fi configurate folosind panoul Interacțiuni cu afirmații simple „dacă asta, atunci asta”. Mai jos este o listă cu câteva caracteristici suplimentare Axure:

Prototipări de bază și avansate

• Widgeturi încorporate pentru wireframing și prototipare rapidă
• Un mediu drag-and-drop
• Construirea de prototipuri bazate pe browser fără codare
• Crearea interacțiunilor din elementele Sketch
• Emularea mobilă și vizualizarea dispozitivelor mobile
• Câmpuri de formular de lucru care permit introducerea utilizatorului
• Adăugarea de logică condiționată, variabile și expresii
• Lucrul cu conținut dinamic și vizualizări adaptive
• Adăugarea de efecte de animație
• Vizualizare offline a prototipului
• Biblioteci de widget-uri personalizate
• Integrare și pluginuri Adobe XD
• Partajarea prototipurilor pe Axure Cloud care pot fi vizualizate într-un browser

Coautorare și colaborare

• Axure RP și Axure Cloud permit mai multor persoane să lucreze la același proiect în același timp.

Active partajate

• Creați și partajați biblioteci de componente interactive și importați active din Sketch.

Dezvoltator Handoff

• Publicați modele de la RP și Sketch pe Axure Cloud pentru linii roșii automate plus CSS și export de imagini.

Documentație și specificație

• Creați fluxuri de proces, demontări de produse și specificații vizuale.

Axure Prototyping Mini studiu de caz

Pentru a prezenta capabilitățile lui Axure, care depășesc prototipurile simpliste de la ecran la ecran, am creat câteva ecrane cu interacțiuni subtile pentru Zalando, un site de comerț electronic existent. Odată terminate, toate aceste secvențe prototip au fost exportate în HTML și puteau fi revizuite într-un browser de oricine, oriunde, folosind Axure Cloud.

Mai întâi, am creat câteva interacțiuni cu site-ul care demonstrează un mega meniu, căutare, defilare orizontală prin produse, favorit și înscriere pentru un buletin informativ.

Pe o pagină cu lista de produse, am creat efecte de trecere pe miniaturile de sub imaginea principală a produsului pentru a afișa produsul în diferite culori (schimbarea imaginilor la hover). Am adăugat, de asemenea, favorizarea unui produs din nou și un widget drop-down pentru filtrarea paginii de listare a produselor prin setarea unui interval de preț.

În continuare, în același sens cu ecranul de mai sus, am vrut să demonstrez schimbarea diferitelor imagini ale produselor atunci când trec cu mouse-ul peste imaginile miniaturi de pe o pagină cu detalii de produs. Am adăugat și o altă funcționalitate de trecere cu mouse-ul, astfel încât cumpărătorii să poată vedea descrierea produsului, informații despre mărime și potrivire, livrare și recenzii. În cele din urmă, am încorporat un selector de mărimi și am adăugat produsul în coșul de cumpărături.

Ilustrand următorul flux de utilizatori, am vrut să arăt cum ar funcționa gestionarea unui coș de cumpărături - de exemplu, eliminarea unui produs din coș - folosind diapozitive subtile, estompări și animații de înlocuire a elementelor. Nu a fost folosit niciun cod pentru a crea aceste micro-interacțiuni subtile.

Nu în ultimul rând, am vrut să arăt transformări subtile ale UI pe ecranul de conectare atunci când oamenii introduc informații incorecte de conectare și ce mesaj de eroare va fi afișat.

Aceste interacțiuni subtile și transformări ale interfeței de utilizare sunt utile atunci când se testează caracteristicile produsului, deoarece designerii și cercetătorii utilizatorilor pot efectua teste mai detaliate ale utilizatorilor și pot obține informații mai profunde asupra reacțiilor oamenilor la un site de comerț electronic. Ele demonstrează un aspect și o senzație specifică, sofisticată, care nu ar fi posibile sau se pot dovedi a fi foarte dificil de creat cu alte instrumente de prototipare.

rezumat

În căutarea celor mai noi și mai bune instrumente de wireframing și prototipare, designerii trec cu vederea uneori instrumentele consacrate, capabile, care au trecut testul timpului.

Designerii ar trebui să-i dea lui Axure un alt aspect. Datorită profunzimii, setului de caracteristici și flexibilității sale, Axure este un instrument capabil și robust în comparație cu alte soluții, iar compania continuă să-l actualizeze pentru a-și menține relevanța ca instrument de proiectare.

O versiune de încercare gratuită a Axure este disponibilă pentru descărcare. Designerii pot exporta interfețe de utilizare din Sketch, pot importa în Axure și pot crea prototipuri cu aspect realist. Există, de asemenea, o mulțime de tutoriale disponibile pentru fiecare tip de proiect (pe YouTube și site-ul lui Axure), iar widget-urile Axure gata de utilizare sunt, de asemenea, disponibile pe scară largă pentru descărcare (gratuit și cu plată).

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Perfecționați-vă procesul de design UX – Un ghid pentru proiectarea prototipului
• Cele 10 produse UX pe care le folosesc designerii de top
• Mituri UX – prototipare, testare utilizator și produse UX
• Tutorial Framer: Cum să creați prototipuri interactive uimitoare
• Stăpânește-ți meseria cu aceste instrumente UX de top