7 recursos de diseño web de Google para mejorar tu experiencia de usuario

Una lista de recursos para exprimir tanto valor de la inversión en desarrollo web como sea posible

Diseño de materiales - Grúa

La mayor parte de mi carrera profesional se ha centrado en diseñar experiencias web y encontrar oportunidades para mejorarlas. He tenido la oportunidad de trabajar con algunos de los mejores equipos de desarrollo web en todas las industrias imaginables. Cada equipo con el que trabajo tiene su propio conjunto de problemas únicos y limitaciones de recursos. A veces puede parecer abrumador crear una experiencia web que sea intuitiva, confiable, rápida y atractiva. Pero con todos los recursos gratuitos disponibles hoy en día, nunca ha sido un mejor momento para invertir en la web. Esta lista de recursos lo ayudará a usted y a su equipo a obtener el mayor valor posible de su inversión en desarrollo web.

1. Web.Dev y 2. Faro

Una auditoría de desempeño de Lighthouse

Cuando pasa innumerables horas mirando su sitio web, puede ser fácil perder oportunidades de mejora. A veces es difícil descubrir por qué una página en particular se está haciendo lenta. La mejor manera de hacer mejoras es dar un paso atrás y obtener otra perspectiva. Web.Dev es para todos los equipos de desarrollo web que existen. El corazón de Web.Dev es Lighthouse, una herramienta automatizada de código abierto creada para mejorar la calidad de sus páginas web. Puede ejecutar una auditoría de Lighthouse en cualquier página web. Esta herramienta proporciona un informe detallado sobre rendimiento, accesibilidad, aplicaciones web progresivas y más. Auditar su propia experiencia nunca ha sido tan fácil. Su equipo debe considerar establecer objetivos interfuncionales y agregar directamente las recomendaciones de Lighthouse a la cartera de pedidos de su producto. Si el rendimiento está en su hoja de ruta (debería estarlo), entonces esta herramienta se convertirá en su mejor amigo. Si aún desea más recursos para mejorar la velocidad de su sitio, consulte este desglose completo.

Puntos de referencia recomendados:

<2s Primera pintura de contenido (FCP)
<3 Índice de velocidad (SI)
<5 Tiempo para interactuar (TTI)

¿Para quién? - Todo el mundo. Gerentes de producto. Ingenieros Diseñadores Comercializadores

3. Galería

Gallery podría ser una de las herramientas de diseño más subutilizadas que existen.

Una de las partes más críticas del diseño de un sitio web exitoso es obtener comentarios de los pares y los usuarios. Gallery facilita la organización y colaboración en diseños de productos. Este proyecto impulsado por el diseño de materiales es imprescindible para cualquier UXer. Esta herramienta de colaboración le permite cargar trabajos de diseño, obtener comentarios y realizar un seguimiento de las revisiones, de manera rápida y eficiente. La interfaz de usuario no podría ser más fácil de usar, especialmente si usted es un usuario de gSuite. Como beneficio adicional, esta herramienta está disponible para ANDROID e IOS.

¿Para quién? - Diseñadores y gerentes de producto

4. Caja de trabajo

¿Estás buscando construir una aplicación web progresiva? Workbox hace que sea fácil comenzar. A medida que los PWA obtienen más impulso, los desarrolladores buscan formas de crear una aplicación web de primera clase. Workbox es una guía que tiene codelabs paso a paso y una gran cantidad de mejores prácticas. Si es desarrollador y está pensando en actualizar su sitio a una PWA, Workbox es imprescindible.

¿Para quién? - Gerentes de producto e ingenieros

5. Herramienta de color

¿Estás pensando en rediseñar o lanzar tu sitio por primera vez? Recomiendo encarecidamente utilizar la herramienta Color de diseño de materiales. Esta herramienta le permite crear, compartir y aplicar paletas de colores personalizadas a su IU. Simplemente ingrese un color hexadecimal y proporcionará un esquema de color primario con alternativas claras y oscuras. Esta herramienta no solo lo ayudará a llevar su marca al siguiente nivel, sino que también puede garantizar que cumpla con las mejores prácticas de accesibilidad. Esta herramienta simple pero efectiva hace que sea fácil compartir en Android, iOS e incluso CodePen. Además, recomiendo Material Theme Editor.

¿Para quién? - Diseñadores

6. Estudio de datos

Desbloquee el poder de sus datos con paneles interactivos e informes atractivos que inspiran decisiones comerciales más inteligentes. Mejorar su experiencia web es un esfuerzo de equipo. Data Studio es una forma sencilla de extraer tendencias significativas de participación del usuario. He visto un montón de paneles de estudio de datos personalizados, como el Panel de control móvil de comercio electrónico sin fricción (hecho por mi compañera Damla Cakirca). Data Studio le permite crear vistas personalizadas y agregar comentarios para que cualquier miembro del equipo interprete los datos. También le permite conectar fácilmente sus datos de hojas de cálculo, análisis, anuncios de Google y más. La mejor parte de Data Studio es la simplicidad. Independientemente de su rol, puede transformar datos sin procesar en métricas y dimensiones perspicaces. Justo cuando crees que no puede mejorar, te darás cuenta de que no se requieren códigos ni consultas.

¿Para quién? - Todo el mundo. Gerente de producto. Ingenieros Diseñadores Comercializadores

7. Panel de CrUX

El Tablero de Chrome User Experience Report (CrUX) es un conjunto de datos público de datos de rendimiento del usuario. Todos los datos de rendimiento incluidos en el informe provienen de condiciones del mundo real, agregados de usuarios de Chrome que han optado por sincronizar su historial de navegación y tienen habilitados los informes de estadísticas de uso. Esta herramienta se basa en Data Studio y se sincroniza automáticamente con los conjuntos de datos más recientes, y se puede personalizar y compartir fácilmente con todos los miembros de su equipo.

¿Para quién? - Gerentes de producto e ingenieros

Espero que esta lista pueda agilizar su flujo de trabajo o ayudar mejor a su equipo a compartir objetivos. Si está buscando recomendaciones específicas sobre cómo puede optimizar mejor el rendimiento, la usabilidad y la accesibilidad, lea: Tendencias de UX que observé en Google como líder de UX móvil. Si tienes otras herramientas que recomiendas, déjalas en la sección de comentarios a continuación.

- @RyanWarrender