7 Google Web Design Resources om uw UX te verbeteren

Een lijst met middelen om zoveel mogelijk waarde uit investeringen in webontwikkeling te halen

Materiaalontwerp - Kraan

Het grootste deel van mijn carrière was gericht op het ontwerpen van webervaringen en het vinden van kansen om ze te verbeteren. Ik heb de kans gekregen om samen te werken met enkele van de beste webontwikkelteams in elke denkbare branche. Elk team waarmee ik werk, heeft zijn eigen unieke problemen en beperkte middelen. Soms kan het overweldigend lijken om een ​​webervaring op te bouwen die intuïtief, betrouwbaar, snel en aantrekkelijk is. Maar met alle gratis bronnen die er vandaag zijn, is het nooit een betere tijd geweest om in internet te investeren. Deze lijst met bronnen zal u en uw team helpen zoveel mogelijk waarde uit uw investering in webontwikkeling te halen.

1. Web.Dev & 2. Vuurtoren

Een prestatie-audit van Lighthouse

Wanneer u talloze uren naar uw website kijkt, kan het gemakkelijk zijn om kansen voor verbetering te missen. Soms is het moeilijk om erachter te komen waarom een ​​bepaalde pagina traag wordt weergegeven. De beste manier om verbeteringen aan te brengen, is door een stap terug te doen en een ander perspectief te krijgen. Web.Dev is voor elk webontwikkelteam dat er is. Het hart van Web.Dev is Lighthouse - een open-source, geautomatiseerde tool die is gebouwd om de kwaliteit van uw webpagina's te verbeteren. U kunt een Lighthouse-audit uitvoeren voor elke webpagina. Deze tool biedt een gedetailleerd rapport over prestaties, toegankelijkheid, progressieve web-apps en meer. Auditing van je eigen ervaring is nog nooit zo eenvoudig geweest. Uw team moet overwegen om functionele doelen te stellen en direct aanbevelingen van Lighthouse toe te voegen aan uw productachterstand. Als er prestaties op uw routekaart staan ​​(het zou moeten zijn), wordt deze tool uw beste vriend. Als u nog steeds meer bronnen wilt om uw sitesnelheid te verbeteren, bekijk dan deze volledige uitsplitsing.

Aanbevolen benchmarks:

<2s First Content Paint (FCP)
<3 snelheidsindex (SI)
<5 Time to Interactive (TTI)

Voor wie is het? - Iedereen. Productmanagers. Engineers. Designers. Marketeers.

3. Galerij

Galerij is misschien wel een van de meest onderbenutte ontwerptools die er zijn.

Een van de meest kritische onderdelen van het ontwerpen van een succesvolle website is feedback van collega's en gebruikers krijgen. Gallery maakt het gemakkelijk om productontwerpen te organiseren en eraan samen te werken. Dit materiaalontwerp aangedreven project is een must voor elke UXer. Met deze samenwerkingstool kunt u ontwerpwerk uploaden, feedback krijgen en revisies bijhouden - snel en efficiënt. De gebruikersinterface kan niet eenvoudiger te gebruiken zijn, vooral als u een gSuite-gebruiker bent. Als bonus is deze tool beschikbaar voor ANDROID en IOS.

Voor wie is het? - Ontwerpers en productmanagers

4. Werkbox

Wilt u een progressieve web-app bouwen? Met Workbox kunt u eenvoudig aan de slag. Naarmate PWA's meer vaart krijgen, zijn ontwikkelaars op zoek naar manieren om een ​​best-in-class web-app te bouwen. Workbox is een gids met stap voor stap codelabs en een schat aan best practices. Als u een ontwikkelaar bent en overweegt om uw site bij te werken naar een PWA, is Workbox een must.

Voor wie is het? - Productmanagers en ingenieurs

5. Kleurentool

Overweegt u een herontwerp te doen of uw site voor het eerst te lanceren? Ik raad ten zeerste aan om de Material Design Color Tool te gebruiken. Met deze tool kunt u aangepaste kleurenpaletten maken, delen en toepassen op uw gebruikersinterface. Voer eenvoudig een hexadecimale kleur in en het zal een primair kleurenschema bieden met lichte en donkere alternatieven. Deze tool helpt u niet alleen om uw merk naar het volgende niveau te brengen, het kan er ook voor zorgen dat u voldoet aan de best practices voor toegankelijkheid. Deze eenvoudige maar effectieve tool maakt het gemakkelijk om te delen op Android, iOS en zelfs CodePen. Ik raad ook de materiaalthema-editor ten zeerste aan.

Voor wie is het? - Ontwerpers

6. Data Studio

Ontgrendel de kracht van uw gegevens met interactieve dashboards en boeiende rapporten die slimmere zakelijke beslissingen inspireren. Het verbeteren van uw webervaring is een teamprestatie. Data Studio is een eenvoudige manier om zinvolle trends voor gebruikersbetrokkenheid te extraheren. Ik heb heel veel aangepaste datastudio-dashboards gezien, zoals het Frictionless E-commerce Mobile Dashboard (gemaakt door mijn collega Damla Cakirca). Met Data Studio kunt u aangepaste weergaven maken en opmerkingen toevoegen voor elk teamlid om de gegevens te interpreteren. Hiermee kunt u ook eenvoudig uw gegevens koppelen uit spreadsheets, analyses, Google-advertenties en meer. Het beste deel van Data Studio is de eenvoud. Ongeacht uw rol kunt u onbewerkte gegevens omzetten in inzichtelijke statistieken en dimensies. Net als je denkt dat het niet beter kan, realiseer je je dat er geen code of vragen vereist zijn.

Voor wie is het? - Iedereen. Product Manager. Engineers. Designers. Marketeers.

7. CrUX-dashboard

Het Chrome User Experience Report (CrUX) Dashboard is een openbare gegevensset van gebruikersprestatiegegevens. Alle prestatiegegevens in het rapport zijn afkomstig uit praktijkomstandigheden, verzameld van Chrome-gebruikers die ervoor hebben gekozen om hun browsegeschiedenis te synchroniseren en rapportage van gebruiksstatistieken hebben ingeschakeld. Deze tool is gebouwd op Data Studio en synchroniseert automatisch met de nieuwste datasets en kan eenvoudig worden aangepast en gedeeld met iedereen in uw team.

Voor wie is het? - Productmanagers en ingenieurs

Ik hoop dat deze lijst uw workflow kan stroomlijnen of uw team beter kan helpen doelen te delen. Als u op zoek bent naar specifieke aanbevelingen over hoe u de prestaties, bruikbaarheid en toegankelijkheid beter kunt optimaliseren, lees dan: UX-trends die ik bij Google heb waargenomen als een mobiele UX-lead. Als u andere hulpmiddelen heeft die u aanbeveelt, laat ze dan achter in het commentaargedeelte hieronder.

- @RyanWarrender