7 Resurse de proiectare web Google pentru îmbunătățirea UX

O listă de resurse pentru a elimina cât mai multă valoare din investițiile în dezvoltare web

Proiectare material - Macara

Cea mai mare parte a carierei mele s-a concentrat pe proiectarea experiențelor web și găsirea de oportunități pentru a le îmbunătăți. Am avut ocazia să lucrez cu unele dintre cele mai bune echipe de dezvoltare web din fiecare industrie imaginabilă. Fiecare echipă cu care lucrez are propriul set de probleme unice și constrângeri de resurse. Uneori poate părea copleșitor să construiești o experiență web intuitivă, fiabilă, rapidă și antrenantă. Dar, cu toate resursele gratuite de astăzi, nu a fost niciodată un moment mai bun pentru a investi în web. Această listă de resurse vă va ajuta să vă extrageți cât mai mult din investiția dvs. în dezvoltare web.

1. Web.Dev și 2. Far

Un audit al performanței Farului

Când petreci nenumărate ore uitându-te la site-ul tău, poate fi ușor să ratezi oportunitățile de îmbunătățire. Uneori, este dificil să afli de ce o anumită pagină se face lent. Cel mai bun mod de a face îmbunătățiri este să faceți un pas înapoi și să obțineți o altă perspectivă. Web.Dev este pentru fiecare echipă de dezvoltare web de acolo. Inima Web.Dev este Farul - un instrument automat, open-source, creat pentru a îmbunătăți calitatea paginilor tale web. Puteți rula un audit Lighthouse pe orice pagină web. Acest instrument oferă un raport detaliat despre performanță, accesibilitate, aplicații web progresive și multe altele. Auditarea propriei experiențe nu a fost niciodată mai ușoară. Echipa dvs. ar trebui să ia în considerare stabilirea obiectivelor trans-funcționale și să adauge direct recomandările Lighthouse în lista de produse. Dacă performanța este pe foaia de parcurs (ar trebui să fie), atunci acest instrument va deveni cel mai bun prieten al tău. Dacă mai doriți mai multe resurse pentru a îmbunătăți viteza site-ului dvs., consultați această defecțiune completă.

Repere recomandate:

<2s First Paint Paint (FCP)
<3 Indicele de viteză (SI)
<5 Time to Interactive (TTI)

Cine este pentru? - Toata lumea. Managerii de produse. Ingineri. Designeri. Marketerii.

3. Galerie

Galerie ar putea fi unul dintre cele mai subutilizate instrumente de proiectare de acolo.

Una dintre cele mai critice părți ale proiectării unui site web de succes este obținerea feedback-ului utilizatorilor. Galerie facilitează organizarea și colaborarea la proiectarea produselor. Acest proiect de proiectare bazat pe materiale este o necesitate pentru orice UXer. Acest instrument de colaborare vă permite să încărcați lucrări de proiectare, să obțineți feedback și să urmăriți reviziile - rapid și eficient. UI nu poate fi mai ușor de utilizat, mai ales dacă sunteți un utilizator gSuite. Ca bonus, acest instrument este disponibil pentru ANDROID și IOS.

Cine este pentru? - Proiectanți și manageri de produse

4. Cutie de lucru

Cauți să creezi o aplicație web progresivă? Cutia de lucru simplifică începerea. Pe măsură ce PWA-urile au un impuls mai mare, dezvoltatorii caută modalități de a construi cele mai bune aplicații web de clasă. Workbox este un ghid care are codelaburi pas cu pas și o mulțime de bune practici. Dacă sunteți dezvoltator și vă gândiți să actualizați site-ul dvs. la un PWA, Workbox este o necesitate.

Cine este pentru? - Manageri de produse și ingineri

5. Instrument de culoare

Vă gândiți să faceți o reproiectare sau să lansați site-ul pentru prima dată? Vă recomand cu mare drag utilizarea Instrumentului de culoare pentru design material. Acest instrument vă permite să creați, să partajați și să aplicați palete de culori personalizate la interfața de utilizator. Pur și simplu introduceți o culoare hexagonală și va oferi o schemă de culori primare cu alternative de lumină și întuneric. Acest instrument nu numai că vă va ajuta să vă marcați la nivelul următor, dar vă poate asigura, de asemenea, că îndepliniți cele mai bune practici de accesibilitate. Acest instrument simplu, dar eficient, facilitează distribuirea pe Android, iOS și chiar CodePen. De asemenea, recomand cu mare drag editorul de teme materiale.

Cine este pentru? - Proiectanți

6. Data Studio

Deblocați puterea datelor dvs. cu ajutorul tablelor de bord interactive și raportarea angajatoare care inspiră decizii de afaceri mai inteligente. Îmbunătățirea experienței dvs. web este un efort de echipă. Data Studio este un mod simplu de a extrage tendințe semnificative de implicare a utilizatorilor. Am văzut o mulțime de tablouri de bord personalizate pentru studiile de date, cum ar fi Frictionless E-commerce Mobile Dashboard (realizat de colegul meu Damla Cakirca). Data Studio vă permite să creați vizualizări personalizate și să adăugați comentarii pentru orice membru al echipei să interpreteze datele. De asemenea, vă permite să vă conectați cu ușurință datele dvs. din foi de calcul, analitice, reclame Google și multe altele. Cea mai bună parte a Data Studio este simplitatea. Indiferent de rolul dvs., puteți transforma datele brute în parametrii și dimensiunile perspicace. Tocmai când credeți că nu se poate îmbunătăți, veți da seama că nu sunt necesare coduri sau întrebări.

Cine este pentru? - Toata lumea. Manager de produs. Ingineri. Designeri. Marketerii.

7. Crux Dashboard

Panoul de bord Chrome User Experience Report (CrUX) este un set de date public cu date de performanță ale utilizatorului. Toate datele de performanță incluse în raport provin din condiții din lumea reală, agregate de la utilizatorii Chrome care au optat pentru a sincroniza istoricul de navigare și au activat raportarea statisticilor de utilizare. Acest instrument este construit pe Data Studio și se sincronizează automat cu cele mai recente seturi de date și poate fi personalizat și distribuit cu ușurință tuturor celor din echipa ta.

Cine este pentru? - Manageri de produse și ingineri

Sper ca această listă să vă eficientizeze fluxul de lucru sau să vă ajute mai bine echipa să împărtășească obiectivele. Dacă sunteți în căutarea de recomandări specifice despre cum puteți optimiza mai bine performanța, capacitatea de utilizare și accesibilitatea, citiți - Tendințele UX am observat la Google ca telefon mobil UX. Dacă aveți alte instrumente recomandate, lăsați-le în secțiunea de comentarii de mai jos.

- @RyanWarrender