Tesseract Space – Página 10 – Blog sobre diseño de UX

Diseño de Producto vs Diseño de Servicios

La importancia del diseño en el éxito de una empresa es algo que ya (casi) nadie discute, pero cada empresa es diferente. Esta diversidad ha creado áreas en el diseño para atender necesidades y contextos diferentes, aumentando la complejidad en su gestión. ¿Cuál es la diferencia entre diseño de producto y diseño de servicios?

El diseño, como disciplina, ha crecido y se ha expandido a campos donde tradicionalmente ocupaba un lugar marginal, especialmente en un mundo donde Internet, la Web y los dispositivos móviles son utilizados por muchísimas personas para interactuar con otras personas, informarse, consumir contenido o comprar productos o servicios.

Este crecimiento viene con un proceso de diversificación y de especialización donde los términos y nomenclaturas son importantes para desmitificar el proceso de diseño y hacerlo útil y accesible para las personas que comienzan en este campo y para personas en otros roles (gerentes, directores, ingenieros, etc.) que dependen del diseño para realizar su trabajo.

De qué hablamos cuando hablamos de diseño

Joseph Edward Shigley y Charles R. Mishke definen «diseño» como «la formulación intencional de un plan para satisfacer una necesidad humana«.
Todo lo que es creado por seres humanos tiene un proceso de diseño, que involucra varias dimensiones que van más allá del aspecto, forma y color de lo que se diseña y abarca además su función y su interacción.

Diseño es la especificación de una creación, manifestada por un agente (diseñador), destinada a lograr objetivos en un entorno particular para satisfacer un conjunto de requisitos y sujeto a ciertas restricciones.
Ralph, P. y Wand, Y. (2009). «A proposal for a formal definition of the design concept».

Etimológicamente, la palabra «diseño» viene del verbo en latín designare, derivado de la palabra signum (señal, símbolo). Esta palabra en italiano dio lugar al verbo disegnare, (dibujo) que es la idea de representar algo con trazos o signos gráficos; en español, la palabra designio representa el pensamiento o propósito aceptado para algo o finalidad a la que se destina algo.

No sorprende que la mayoría de las personas al pensar en diseño piensen primero en diseño gráfico, aunque el diseño se aplica en muchos contextos diferentes, desde las artes plásticas, la industria, la ingeniería, la arquitectura, la comunicación y otras disciplinas que requieren creatividad.

Diseño de producto

El diseño de producto es el proceso de crear nuevos productos que serán vendidos por una empresa para consumo de otras personas. Los diseñadores de productos deben supervisar el producto desde el pasado hacia el futuro, entendiendo también los objetivos del negocio, usabilidad y otras cuestiones de producción además del diseño visual, que se expande para convertirse en diseño sensorial.

El diseñador de producto debe ir más allá de la pregunta ¿cómo se verá el producto? e identificar los problemas y necesidades de las personas que usarán el producto (usuarios) y buscar respuestas a las preguntas ¿por qué vale la pena resolver este problema? y ¿cómo se puede resolver el problema?

Diseño interactivo

El proceso de diseño de producto aplica tanto al diseño de productos físicos como de productos digitales. El entornos digitales, se incluyen perspectivas de otras disciplinas de diseño además de diseño visual como semiótica, arquitectura de información, ingeniería de interfaces, diseño de videojuegos y diseño web, entre otras.

En diseño interactivo se deben tomar en cuenta otros factores que en el diseño de productos físicos no aplican o son diferentes, como el tiempo de carga, la adaptabilidad del producto a distintos dispositivos, métodos de interacción y formatos, así como aspectos psicológicos en la interacción humano-computadora y de ingeniería de software.

El diseño interactivo incluye diseño de producto, pero también otras disciplinas.

Customer Experience vs User Experience

El diseño de User Experience (UX) aplica en la creación de productos en espacios digitales. Su contraparte en el mundo no-digital es lo que se conoce como Experiencia de Cliente o Customer Experience (CX).

Customer Experience y User Experience. Similares, pero diferentes.

La Experiencia de Consumidor es palpable al interactuar con un producto y la empresa que lo ofrece a través de medios desconectados u offline, como cuando una persona compra un producto físico como un auto, va a un restaurante a comer o se hospeda en un hotel. La interacción con la empresa en los diferentes momentos por los que pasa un consumidor definen al sumarlos en la CX.

La Experiencia de Consumidor es un factor crítico en la toma de decisión de compra y la creación de lealtad entre un cliente y una marca. Las personas no solo comprarán lo que es conveniente o barato, sino los productos que le den satisfacción emocional.

La contraparte de CX es el diseño de experiencia de usuario, que se vuelve tangible en el diseño interactivo, ya que diseño de UX se refiere a los procesos para mejorar la satisfacción del usuario al mejorar la usabilidad, accesibilidad y conveniencia proporcionadas en la interacción con un producto digital o en entornos online.

Sin embargo, los conceptos de lo que es online y offline han cambiado en la última década, ya que casi nadie está 100% desconectado ni 100% conectado todo el tiempo, por lo que la separación entre UX y CX comienza a desdibujarse:

Antes separadas, ahora CX y UX tienen espacios comunes que comparten.

Empresas como Amazon, Apple o Airbnb son buenos ejemplos de una implementación en este nuevo espacio de CX + UX, porque la interacción con el cliente/usuario incluye puntos tanto en lo digital como lo offline. Sin uno o el otro la experiencia falla porque lo que venden estas compañías no es solo un producto, sino un servicio.

Diseño de servicios

El diseño interactivo no cubre la totalidad de las interacciones de una persona cuando parte de esas interacciones salen del ámbito digital. Aquí es donde emerge la disciplina de Diseño de Servicios o Service Design (SD):

El diseño del servicios es la actividad de planificación y organización de personas, infraestructura, comunicación y componentes materiales de un servicio para mejorar su calidad y la interacción entre el proveedor del servicio y sus clientes. El diseño del servicio puede funcionar para definir los cambios en un servicio existente o para crear un servicio completamente nuevo.
Bechmann, Søren (2010): «Service design», Gyldendal Akademisk.

La práctica de diseño de servicios incluye la especificación y construcción de procesos que hacen valiosa la interacción con un cliente específico. El diseño de servicios puede ser tangible o intangible y puede incluir elementos de comunicación, entorno y conductuales.

Varios autores de la teoría del diseño de servicios como Pierre Eiglier, Richard Normann y Nicola Morelli insisten en que los servicios surgen en el momento en que se brindan y se utilizan. En contraste, los productos se crean y «existen» antes de ser comprados y utilizados.

Si bien un diseñador puede definir la configuración de un producto, no puede definir de la misma manera el resultado de la interacción entre clientes y proveedores de servicios, ni tampoco puede definir la forma y las características de cualquier valor emocional producido por el servicio.

El diseño del servicio es, por o tanto, una actividad que, entre otras cosas, propone patrones de comportamiento o guiones a los actores que interactúan en el servicio. Comprender cómo estos patrones se entrelazan y se apoyan entre sí son aspectos importantes del carácter del diseño y el servicio, para permitir una mayor libertad al cliente y adaptabilidad al proveedor al comportamiento de los clientes.

El punto más importante es que el diseño de servicios depende de un producto para hacer la entrega de la experiencia al consumidor. Dicho de otra manera, un servicio no tiene sentido sin un producto en su centro:

El diseño de servicios incluye al diseño de producto, más otras interacciones en otros medios y canales. En ocasiones, el servicio es el producto.

Service Design expande el diseño del producto hacia todas las interacciones de una persona, previas y posteriores al uso del producto y es un elemento clave en el diseño de estrategias omnicanal que integran puntos de contacto offline y online para crear experiencias integradas.

¿Y dónde queda el diseño de Experiencia de Usuario?

Algunos autores y practicantes opinan que el diseño de Diseño de Experiencia de Usuario se queda a nivel de producto, mientras otros dicen que también incluye a los servicios. Hay personas que insisten que UX solo es el diseño visual, y hay quienes creen que SD es la evolución de UX.

Don Norman, quien acuñó el término User Experiencehace 30 años lo explica mejor:

«Actualmente el término ‘Experiencia de Usuario’ es horriblemente mal utilizado. Las personas lo usan para decir ‘soy diseñador de experiencia de usuario, diseño sitios web’ o ‘diseño aplicaciones’, y no tienen idea de lo que están haciendo. Creen que la ‘experiencia’ es un dispositivo, un sitio web o una aplicación o quién sabe qué. No, UX es todo, es la forma en que experimentas el mundo, la forma en que experimentas tu vida, la forma en que experimentas un servicio, o sí, una aplicación o un sistema informático. Pero es no es un sistema, es todo»
Don Norman

El diseño de UX incluye al diseño tradicional y lo extiende al abordar todos los aspectos de un producto o servicio según lo perciben sus usuarios. El diseño de UX tiene como objetivo diseñar productos, procesos, servicios, eventos, interacciones omnicanal y entornos, centrados en la calidad de la experiencia.

UX no es UI, ni un producto o un servicio, es todo.

Al final, el diseño de UX no está basado en solo una disciplina de diseño: requiere una perspectiva multidisciplinaria que tenga en cuenta todos los aspectos de la marca, la empresa, el entorno y la experiencia del producto, así como la forma, los canales por los que esta experiencia es entregada.

Progressive Web Apps: la evolución de las apps móviles

Durante años los sitios web ha sido relegados en los dispositivos móviles sobre las apps nativas debido a problemas de rendimiento, compatibilidad y sobre todo, de conectividad. Las aplicaciones web progresivas (Progressive Web Apps o PWA) prometen resolver estos problemas.

Las Progressive Web Apps o PWA son un acercamiento al desarrollo de apps para móviles que combinan lo mejor de la web y lo mejor de las apps nativas. Estas nuevas web apps son útiles para sus usuarios desde la primera visita en un navegador web, sin necesidad de instalar nada más.

Las PWA son sitios web que se utiliza en un smartphone como una app nativa.

A medida que el usuario crea una relación con la app de manera progresiva, ésta se vuelve más poderosa y útil: carga rápidamente, incluso en redes lentas o cuando el dispositivo está desconectado, puede enviar notificaciones, tiene un icono en la pantalla del móvil y funciona a pantalla completa.

Una Progressive Web App tiene las siguiente características:

Estándar – utiliza la misma plataforma y tecnología que se utiliza para crear páginas web: HTML, CSS y Javascript.
Progresiva (¡obvio!) – funciona para todos los usuarios, independientemente de cuál navegador web o sistema operativo utilice, porque está construída para mejorar progresivamente desde el principio.
Responsiva – se ajusta a cualquier resolución y formato de pantalla: escritorio, móviles, tabletas, televisiones o lo que sea.
Independiente de la conexión – está mejorada con service workers para funcionar sin conexión o en redes lentas con conexiones intermitentes.
Como una app nativa – el usuario la usará como una app, con soporte para navegación e interacción con gestos.
Fresca – siempre estará actualizada gracias al proceso automático de actualización del service worker.
Segura – trabaja sobre HTTPS para prevenir que alguien intercepte datos y para asegurarse de que el contenido no ha sido manipulado por otros.
Descubrible – es identificable como una «aplicación» gracias al manifiesto de la W3C y al registro de funciones del service worker, permitiendo a los buscadores web encontrarlas.
Interactiva – hace fácil interactuar con ella incluso cuando está cerrada con características como notificaciones tipo push.
Instalable – le permite a sus usuarios crear accesos directos en la pantalla de su teléfono sin necesidad de una tienda de apps.
Enlazable – se pueden compartir fácilmente usando su dirección en la web (URL) y no requiere procesos de instalación complejos.

Ya existen casos de empresas que han comenzado a implementar Progressive Web Apps, como AirBerlin o Flipkart con resultados bien documentados en mejoras de experiencia de usuario, retención y conversión.

Video de la presentación de la Progressive Web App de Flipkart

Google creó un taller para aprender a crear aplicaciones web progresivas desde cero, incluyendo consideraciones de diseño y detalles de implementación para asegurar que tus web apps cumplan todos los principios que mencioné antes.

PWA es compatible con AMP (Accelerated Mobile Pages) y las imágenes en formato WebP para acelerar aún más la carga de las páginas en la primera visita, que sumado a las capacidades de función offline de PWA ayuda a mejorar la experiencia de los usuarios y su engagement al eliminar el factor de tiempo de carga.

El gestor de auditorías para sitios web Lighthouse en Google Chrome incluye un análisis para evaluar las capacidades y el desempeño de Progressive Web Apps.

Las Progressive Web Apps son una oportunidad para regresar a la web su importancia dentro de dispositivos móviles -o en cualquier otro dispositivo-, y de romper los problemas y dependencias de compatibilidad que tienen las apps nativas.

AMP: Accelerated Mobile Pages

En 2015, el tiempo máximo que un usuario esperaba para cargar una página web en su dispositivo móvil eran 5.4 segs. En 2018 ese tiempo se redujo a 3.3 segs. La relación entre tiempo de carga y conversión es cada vez más estrecha. El proyecto de Accelerated Mobile Pages (AMP) promete entregar páginas móviles en menos de un segundo.

La historia de AMP (Accelerated Mobile Pages) tiene su origen en el mundo de las noticias: cuando ocurre una noticia importante (elecciones, desastres naturales, muerte de una celebridad, etc.) mucha gente busca en sitios de noticias para obtener más información, ocasionando en muchas ocasiones que los servidores de esos servicios se saturen por el exceso de tráfico, creando una mala experiencia en sus visitantes al tiempo que dejan de cumplir su función de comunicar e informar.

Pensando en una solución para este problema, Google anunció el proyecto AMP en octubre de 2015 con el respaldo de los miembros de la Digital News Initiative, cerca de 80 casas editoriales de todo el mundo y compañías de contenido digital como Twitter, Pinterest, LinkedIn y WordPress.

Las páginas de AMP aparecieron por primera vez en el buscador de Google a principios de 2016 en los resultados de búsqueda móvil únicamente. Los enlaces a las páginas de AMP estaban entonces restringidos a una sección en formato de carrusel llamado «Historias destacadas (Top Stories)» en el encabezado de los resultados de búsqueda orgánica.

El carrusel de noticias de *Top Stories* en el buscador de Google, con páginas AMP.

Google comenzó a mostrar en septiembre de 2016 el contenido de AMP en el área principal de resultados de búsqueda móvil. Los enlaces de AMP en el buscador de Google se identifican con un icono en forma de relámpago dentro de un círculo.

Desde entonces, AMP es un factor importante para el posicionamiento de páginas en el buscador de Google (SEO).

Al poco tiempo, Microsoft anunció soporte para AMP en las aplicaciones de su buscador web Bing para iOS y Android, y Twitter en sus apps móviles para mostrar páginas web.

En mayo de 2017, Google anunció que más de 900,000 dominios web ya publicaban páginas AMP con más de dos mil millones de páginas publicadas a nivel mundial.

«Estamos comprometidos a mejorar la velocidad en todas las plataformas. Si nuestro sitio demora mucho tiempo en cargarse, no importa qué tan bueno sea nuestro periodismo, algunas personas abandonarán la página antes de ver qué hay allí».

David Merrell, Senior Product Manager del Washington Post

Actualmente el proyecto AMP es un proyecto opensource gestionado por un grupo de proveedores de contenido y que cualquier sitio puede implementar -sea de noticias o no- para reducir el tiempo de carga de sus páginas web en dispositivos móviles.

Cómo funciona AMP

AMP es una plataforma de desarrollo y diseño web basada en HTML, CSS y JavaScript, optimizada para dispositivos móviles con funcionalidades limitadas. Las páginas AMP se colocan junto a las páginas HTML originales a partir de las cuales fueron generadas.

Cuando el buscador de Google es notificado, hace una copia de las páginas AMP en Google AMP Cache, una red de distribución de contenido estático de alta velocidad (Content Delivery Network o CDN). Las páginas AMP son optimizadas y se entregan a dispositivos móviles en el navegador web o en una app donde son reconstruidas y mostradas al usuario para que interactúe con ellas.

Este proceso de optimización permite entregar páginas a dispositivos móviles en tiempos menores a un segundo, creando una experiencia de uso positiva, aumentando las conversiones de esa página por acciones o publicidad y sin hacer llamadas adicionales al servidor original, permitiéndole atender a más visitantes.

La promesa de AMP es que estas páginas carguen de manera instantánea (en el rango de milisegundos), independientemente del ancho de banda del dispositivo del usuario.

Anatomía de una página AMP

Las páginas AMP se construyen de manera similar a las páginas HTML, con algunos cambios en su arquitectura y etiquetado. Esta es una plantilla básica de AMP:

 <!DOCTYPE HTML>
 <html ⚡>
   <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
 </head>
 <body>
   <amp-geo layout="nodisplay">
     <script type="application/json">
       {
         "AmpBind": true
       }
     </script>
   </amp-geo>
   <h1>¡Hola en <span [text]="country">...</span>!</h1>
   <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">¿dónde estoy?</button>
 </body>
 </html>

Renderizado de página AMP
Geolocalizació y data binding con AMP

El HTML de AMP es HTML con algunas restricciones para un rendimiento optimizado.

Componentes de AMP

Aunque la mayoría de las etiquetas en una página HTML de AMP son etiquetas HTML normales, algunas etiquetas son reemplazadas con etiquetas específicas de AMP. Estos elementos personalizados, llamados Componentes HTML de AMP hacen que los patrones comunes sean fáciles de implementar de una manera más eficiente.

Por ejemplo, la etiqueta amp-geo proporciona una interfaz de geolocalización aproximada a nivel de país, sin necesidad de Javascript ni de implementar múltiples versiones de la función de geolocalización para asegurar compatibilidad en diferentes navegadores:

<amp-geo layout="nodisplay">
     <script type="application/json">
       {
         "AmpBind": true
       }
     </script>
</amp-geo>

<h1>¡Hola en <span [text]="country">...</span>!</h1>
   <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">¿dónde estoy?</button>

AMP cuenta con una colección robusta y completa de componentes que cubren los casos de uso más comunes de páginas de contenido para móviles. Por ejemplo, para implementar un carrusel de imágenes con AMP, se escribe de esta manera:

<amp-carousel height="300"
   layout="fixed-height"
   type="carousel">
   <amp-img src="/static/samples/img/image1.jpg"
     width="400"
     height="300"
     alt="a sample image"></amp-img>
   <amp-img src="/static/samples/img/image2.jpg"
     width="400"
     height="300"
     alt="another sample image"></amp-img>
   <amp-img src="/static/samples/img/image3.jpg"
     width="400"
     height="300"
     alt="and another sample image"></amp-img>
 </amp-carousel>

Casos de uso de AMP

AMP se ha diversificado desde su primera versión y se puede utilizar para crear contenido en casos de uso específicos con la ventaja de su carga acelerada. Se puede utilizar para crear:

Páginas y sitios web,
Historias, un formato de banner para promover contenido web,
Anuncios, banners enriquecidos compatibles con adservers, y
Correos electrónicos, que incluyen capacidades interactivas.

Referencias

AMP ha madurado rápidamente gracias a las aportaciones de los medios de comunicación y la participación de la comunidad alrededor del proyecto. Conocer e implementar AMP es un proceso sencillo si ya se está familiarizado con desarrollo web con HTML, aunque hay recursos para acelerar el proceso de integración con sitios web ya existentes.

AMP by Example es un sitio que contiene una colección de soluciones ya hechas, desde una guía completa de los componentes básicos de AMP hasta componentes más complejos para publicar noticias, crear páginas de e-commerce o colocar audio, video y elementos interactivos como carruseles, carritos de compra o formularios.
AMP Start es una colección de plantillas completas para páginas en AMP para descarga que se pueden personalizar después con enfoques para sitios de contenido, noticias, comercio electrónico o historias.

Plantillas AMP para sitios web en AMP Start

AMP para WordPress es un plug-in desarrollado para crear páginas AMP de manera automática en un blog o sitio creado con WordPress.
AMP Validator es una herramienta de análisis semántico para revisar que las páginas creadas con AMP funcionen correctamente.

El proyecto AMP no ha estado exento de críticas fuertes por parte de la industria de contenidos, que ha acusado a Google que querer cooptar sus sitios al crear su propia versión de estándares web que solo ellos controlan, poniendo en riesgo la apertura de la web y la independencia de los medios y de los creadores.

En respuesta, Google ha cambiado el licenciamiento de AMP y ha creado un grupo de gestión sobre el proyecto que se espera se convierta en una fundación para que sea auténticamente independiente y contribuya a crear una web más rápida y eficiente para todos.

Auditorías de desempeño para sitios web con Lighthouse

El desempeño (performance) de un sitio web es un elemento clave en su diseño de experiencia de usuario, pero su medición y optimización depende de muchos factores. Lighthouse es una herramienta para automatizar la medición y diagnóstico de los indicadores de desempeño de un sitio.

El concepto de desempeño (performance) de un sitio web se refiere a la percepción de muchos elementos y factores en la interacción entre un usuario y el sitio. Entre estos elementos están el tiempo de carga del sitio, su usabilidad percibida, su accesibilidad, la facilidad para encontrarlo en un buscador, entre muchos otros.

En el proceso de diseño de la experiencia de usuario, es importante poder convertir los elementos de desempeño en objetivos cuantitativos (métricas) que describan la implementación del desempeño y que sobre las que se puedan definir metas para poder hacer trabajo de optimización y mejora.

Lighthouse para medición de desempeño

Lighthouse es una herramienta opensource para mejorar la calidad del desempeño de una página web. Se puede utilizar en cualquier página web, pública o en proceso de desarrollo, y ofrece auditorías de desempeño, accesibilidad, buenas prácticas de diseño, posicionamiento en buscadores y otras más.

Lighthouse puede ejecutarse directo desde Google Chrome o desde la línea de comandos en una consola como un módulo de node.js.

Cómo realizar una auditoría con Lighthouse desde Chrome

En sus primeras versiones Lighthouse se instalaba en Chrome como una extensión. Más recientemente ya viene incluido en las herramientas para desarrolladores (developer tools) de Chrome:

**Lighthouse** se puede encontrar en la opción «**Herramientas del desarrollador**» en Google Chrome

Al abrir las herramientas de desarrollador en Chrome (también con el shortcut Ctrl+Shift+i) hay que buscar la pestaña de Auditorías (audits) en la parte superior:

Las auditorías de Lighthouse se encuentran en las opciones de navegación en la parte superior (audits)

En la pestaña de Auditorías (audits) se encuentran las diferentes auditorías que se pueden realizar sobre la página web. Se puede elegir realizarlas en modo para dispositivos móviles o para escritorio, así como simular un ancho de banda reducido para la prueba o no:

Las opciones para realizar auditorías en una página web con Lighthouse, para desktop o móvles, y con diferentes anchos de banda.

Con la página que se quiere evaluar abierta en el navegador, se seleccionan las auditorías que se quieren ejecutar (desempeño, progressive web app, mejores prácticas, accesibilidad y/o optimización para buscadores) y se ejecutan las auditorías.

El análisis tomará algunos minutos, dependiendo del tamaño y complejidad de la página:

Lighthouse ejecutando auditorías de desempeño sobre una página web

Terminada la revisión, Lighthouse genera un informe sobre el desempeño de la página, con indicadores que van de 0 a 100. A partir de ahí, se utiliza la información en las auditorías fallidas como indicadores de desempeño de la página.

Reporte de las auditorías de Lighthouse sobre una página web, con los indicadores numéricos y el análisis sobre lo que funciona y lo que se puede mejorar.

Cada auditoría tiene información y enlaces de referencia que explican por qué la auditoría es importante y cómo resolver los problemas que se encontraron para mejorar su desempeño.

Reporte de auditoría de desempeño de una página web en Lighthouse, con indicadores cuantitativos de velocidad de carga, tiempo de renderizado, indexación, etc. y recomendaciones sobre qué es necesario mejorar y por qué.

Cómo realizar una auditoría con Lighthouse desde la línea de comandos

Las auditorías de Lighthouse pueden ejecutarse desde la línea de comandos en una consola con node.js. Para hacerlo, es necesario:

Tener instalada una versión actualizada de Chrome.
Tener instalada una versión estable de node.js
Instalar el módulo de Lighthouse para node.js:

npm install -g lighthouse

Para correr las auditorías se utiliza el siguiente comando, sustituyendo <url> por la dirección de la página que se quiere evaluar:

lighthouse <url>

Para ver las opciones que se pueden configurar en esta modalidad, se escribe:

lighthouse --help

Esta opción es muy útil para analizar muchas páginas de forma automatizada, en lugar de revisarlas manualmente una por una con Chrome. La opción de Lighthouse CLI (Command Line Interface) se puede usar en combinación con el Sitemap de un sitio web para auditar todas sus páginas en una sola sesión.

Gestión de reportes de Lighthouse

Descarga de reportes de Lighthouse, junto al símbolo de «+»

Lighthouse genera los reportes de sus auditorías en de texto archivos con formato JSON. Para obtenerlos, se pueden descargar dando clic en la la flecha de «Download report» en la esquina superior derecha de la herramienta.

Para hacerlo desde la consola, se utiliza este comando:

lighthouse --output json --nombre-del-archivo

Para compartir los reportes, se puede utilizar Lighthouse Viewer, una herramienta que genera una URL para compartir el reporte:

Lighthouse Viewer, una herramienta para analizar y compartir los resultados de las auditorías

Ejemplo de un reporte de auditoría en Lighthouse Viewer

Conclusión

Como herramienta, Lighthouse realiza un análisis automatizado y cuantitativo de muchos factores que afectan el desempeño de un sitio web. El reporte que genera puede utilizarse como base para tomar medidas de optimización tanto en diseño, contenido y desarrollo, y por consecuencia, mejorar la experiencia de sus usuarios.

Hay que tener en cuenta que Lighthouse no cubre todos los factores de análisis de desempeño y que no es la única evaluación que debe realizarse. Hay otros métodos de evaluación de factores cualitativos como las heurísticas de usabilidad que deben realizarse para complementar los resultados de una auditoría de Lighthouse.