Guía de estilo, importancia en el diseño de interfaces web

Una guía de estilo es un documento que establece las pautas para el diseño y la presentación de contenido en una marca o proyecto. Su objetivo es garantizar la coherencia y la uniformidad en el uso de elementos visuales, como colores, tipografías, imágenes y otros elementos gráficos.

Una guía de estilo puede incluir información sobre la paleta de colores, las fuentes tipográficas, el uso de logotipos e imágenes, el tono y el estilo de escritura, entre otros aspectos. Las guías de estilo son una herramienta importante para mantener la coherencia en la identidad visual de una marca o proyecto y facilitar el trabajo de los diseñadores y creadores de contenido.

9. Guía de estilo, importancia en el diseño de interfaces web

Para asegurar la consistencia de las interfaces gráficas de una web es fundamental plasmar las pautas de estilo en una guía que pueda seguir el equipo de desarrollo (programadores, analistas, diseñadores gráficos, etc.) durante el proceso de desarrollo del sitio. Estas guías se llaman guías de estilo o “look and feel”.

Las guías de estilo recogen los criterios y normas que deben seguir los desarrolladores de un sitio web para que tenga una apariencia uniforme y atractiva para el usuario.

Desde el punto de vista de los programadores y los diseñadores, estas guías de estilo son esenciales para favorecer el desarrollo de una página web, tanto en el diseño como en su posterior mantenimiento. Este aspecto es muy importante ya que el mantenimiento puede ser llevado cada vez por una persona.

En las guías de estilo se recogen datos como la gama de colores utilizada, los iconos, la tipografía, el tamaño de las letras, etc. A continuación se muestra un ejemplo de guía de estilo en la que se detallan los colores, las tipografías, los botones y los iconos de referencia.

9.1. ¿Cómo puedo crear una guía de estilo para un sitio web?

Veamos los pasos a seguir para crear una guía de estilo para un sitio web:

1. Define la identidad de tu marca: Antes de comenzar a crear una guía de estilo, es importante tener una idea clara de la identidad de tu marca y los valores que quieres transmitir a través del sitio web. Esto te ayudará a tomar decisiones sobre el estilo visual y el tono de voz que debes utilizar.
2. Elige una paleta de colores: Es importante elegir una paleta de colores que refleje la identidad de tu marca y sea coherente con el resto de tus elementos visuales. Asegúrate de incluir información sobre los colores principales y secundarios, así como sobre cómo deben utilizarse en diferentes elementos del sitio.
3. Selecciona las tipografías: Elige fuentes que sean legibles y estén en línea con la identidad de tu marca. Incluye información sobre las fuentes principales y secundarias, así como sobre cómo deben utilizarse en diferentes elementos del sitio, como títulos, subtítulos y texto del cuerpo.
4. Establece pautas para el uso de imágenes: Es importante establecer pautas claras sobre cómo deben usarse las imágenes. Incluye información sobre el tipo de imágenes que deben utilizarse, cómo deben editarse y cómo deben presentarse en el sitio.
5. Define el tono y el estilo de escritura: Establece pautas claras sobre el tono y el estilo que deben seguir los textos, incluyendo aspectos como el uso de la voz activa o pasiva, el nivel de formalidad y el uso de jerga o tecnicismos.
6. Selecciona los iconos: Los iconos son elementos gráficos que pueden ayudar a mejorar la navegación y la comprensión del contenido. Al crear tu guía de estilo, es importante establecer pautas claras sobre el uso de iconos, incluyendo información sobre el estilo y el tamaño de los iconos, así como sobre cómo deben utilizarse en diferentes partes del sitio.
7. Diseña botones, formularios y otros componentes: Es importante establecer pautas claras sobre el diseño y el uso de estos componentes, incluyendo información sobre el tamaño, el color, la forma y el estilo de los botones y formularios, así como sobre cómo deben utilizarse en diferentes partes del sitio. Asegúrate de diseñar componentes que sean coherentes con la identidad visual de tu marca y que sean fáciles de usar para tus usuarios.

Una vez que hayas definido todos estos elementos, puedes compilarlos en un documento para crear tu guía de estilo. Asegúrate de presentar la información de manera clara y concisa, utilizando ejemplos visuales para ilustrar tus pautas. Además, ten en cuenta que, una guía de estilo es un documento vivo que puede evolucionar con el tiempo a medida que cambian las necesidades y preferencias de tu marca y tu audiencia.

9.2. Ejemplos de guías de estilo

Veamos ahora el siguiente tablero de Pinterest en el que se han recogido diferentes guías de estilo.

Ejemplos de guías de estilo:

Material DesignYoutubeAppleUPV

9.3. Guía de estilo: Colores

El color es una cualidad de la materia y de la luz, pero además es un factor expresivo ya que tiene la virtualidad de comunicar y suscitar sentimientos. Por este motivo, el diseñador estudia las dimensiones y los valores del color para poder utilizarlo como instrumento de comunicación.

9.3.1. Teoría del color

La teoría del color es un conjunto de principios y directrices que pueden ayudar a los diseñadores a elegir y combinar colores de manera efectiva en sus proyectos, incluyendo el diseño web.

La teoría del color puede ser una herramienta útil para los diseñadores web al elegir y combinar colores para sus proyectos. Sin embargo, también es importante tener en cuenta otros factores, como la identidad de marca, la audiencia y las preferencias personales al tomar decisiones sobre los colores.

Algunos conceptos importantes de la teoría del color que pueden ser útiles para el diseño web incluyen:

• El círculo cromático: El círculo cromático es una representación visual de los colores primarios, secundarios y terciarios, organizados en un círculo. Los colores opuestos en el círculo cromático se llaman colores complementarios y pueden crear combinaciones de alto contraste y armonía visual.
• Armonía de colores: La armonía de colores se refiere a la combinación de colores de manera que sean visualmente atractivos y equilibrados. Hay varias formas de lograr la armonía de colores, como el uso de colores análogos (colores adyacentes en el círculo cromático), colores complementarios (colores opuestos en el círculo cromático) o una paleta monocromática (diferentes tonos del mismo color).
• Contraste: El contraste se refiere a la diferencia visual entre dos o más elementos. En el diseño web, el contraste es importante para mejorar la legibilidad y llamar la atención sobre elementos importantes. El contraste puede lograrse mediante el uso de colores opuestos en el círculo cromático, como blanco y negro o azul y naranja.
• Psicología del color: Los colores pueden tener diferentes significados y connotaciones emocionales para diferentes personas. La psicología del color estudia cómo los colores pueden influir en las emociones, las percepciones y las acciones de las personas. Al elegir los colores para un sitio web, es importante tener en cuenta su posible impacto psicológico en los usuarios.

9.3.2. El círculo cromático

El círculo cromático es una herramienta útil en el diseño web para elegir y combinar colores de manera efectiva. El círculo cromático es una representación visual de los colores primarios, secundarios y terciarios, organizados en un círculo. Los colores opuestos en el círculo cromático se llaman colores complementarios y pueden crear combinaciones de alto contraste y armonía visual.

Los diseñadores web pueden utilizar el círculo cromático para elegir combinaciones de colores armoniosas para sus proyectos. Por ejemplo, pueden utilizar colores análogos (colores adyacentes en el círculo cromático) para crear una paleta de colores suave y coherente, o colores complementarios (colores opuestos en el círculo cromático) para crear combinaciones de alto contraste y atractivo visual.

Además, el círculo cromático también puede ser útil para ajustar los tonos y la saturación de los colores para lograr un equilibrio visual en el diseño.

9.3.3. Armonía de colores

La armonía de colores se refiere a la combinación de colores de manera que sean visualmente atractivos y equilibrados. Hay varias formas de lograr la armonía de colores en el diseño web, como el uso de colores análogos, colores complementarios o una paleta monocromática.

• Colores análogos: Los colores análogos son aquellos que se encuentran adyacentes en el círculo cromático, como el rojo, el naranja y el amarillo. Estos colores comparten un tono común y pueden crear combinaciones suaves y coherentes.
• Colores complementarios: Los colores complementarios son aquellos que se encuentran opuestos en el círculo cromático, como el rojo y el verde o el azul y el naranja. Estos colores crean un alto contraste y pueden ser utilizados para llamar la atención sobre elementos importantes en el diseño.
• Paleta monocromática: Una paleta monocromática utiliza diferentes tonos del mismo color para crear una combinación armoniosa. Por ejemplo, una paleta monocromática de azul podría incluir tonos claros, medios y oscuros del mismo color.

Al elegir los colores para un sitio web, es importante tener en cuenta la armonía de colores para crear combinaciones atractivas y equilibradas. La teoría del color y el círculo cromático pueden ser herramientas útiles para lograr la armonía de colores en el diseño web.

9.3.4. Contraste

El contraste es un elemento importante en el diseño web que se refiere a la diferencia visual entre dos o más elementos. El contraste puede lograrse mediante el uso de colores, formas, tamaños y otros elementos visuales para crear una distinción clara entre diferentes partes del diseño.

En el diseño web, el contraste es importante por varias razones. En primer lugar, el contraste puede mejorar la legibilidad del contenido al crear una distinción clara entre el texto y el fondo. Por ejemplo, el uso de un color de texto oscuro sobre un fondo claro puede mejorar la legibilidad del texto.

En segundo lugar, el contraste puede ayudar a llamar la atención sobre elementos importantes en el diseño. Por ejemplo, el uso de un botón de color brillante sobre un fondo neutro puede llamar la atención del usuario y animarlo a hacer clic en el botón.

En tercer lugar, el contraste puede ayudar a mejorar la jerarquía visual del contenido al crear una distinción clara entre diferentes niveles de información. Por ejemplo, el uso de tamaños de fuente más grandes para los títulos y más pequeños para el texto del cuerpo puede ayudar a establecer una jerarquía visual clara en el contenido.

9.3.5. Psicología del color

El color es un elemento indispensable en el diseño de páginas web ya que mediante él se pueden definir los elementos representados.

Gracias a la psicología del color sabemos que los colores son capaces de transmitir emociones y provocar así reacciones en nuestro cerebro. De hecho, está demostrado que el color influye en el estado de ánimo y en el comportamiento de las personas. Por este motivo, el color es muy utilizado para vincular a los usuarios con los productos anunciados. A continuación, se pueden ver los colores más usados y sus significados.

Es preciso utilizar los mismos colores para cada elemento web con el fin de facilitar la interpretación de funcionalidades, mejorar la navegación y transmitir armonía.

9.3.6. Propiedades de los colores

Los colores disponen de tres propiedades que nos permiten diferenciarlos: tono, saturación y brillo.

• Tono: el tono o matiz (hue en inglés) es la propiedad que nos permite diferenciar unos colores de otros. En el círculo cromático de tonos o matices se pueden distinguir los colores complementarios cuando se encuentran enfrentados.
• Saturación: la saturación (saturation en inglés) es la propiedad que define la intensidad de un color y varía según el nivel de gris que tenga. Cuanto mayor sea el nivel de gris de un color, menos saturado se encuentra y menos intenso.
• Brillo: el brillo (brightness en inglés) es la propiedad que define cómo de oscuro o de claro se encuentra un color y varía según el nivel de negro o blanco que tenga respecto al color puro. En diseño gráfico cuanto más brillante es un color más cerca parece que está.

9.3.7. Los colores fundamentales

En los entornos digitales existen tres colores fundamentales, el rojo, el verde y el azul. Un ordenador representa todos los colores combinando estos tres colores fundamentales mediante el sistema RGB («red, green, blue» en inglés).  Así pues, definiendo la cantidad de cada uno de los colores tendremos la paleta completa.

9.3.8. Sistema RGB

El sistema RGB es un modelo con el que es posible representar un color mediante la mezcla de los tres colores de luz primarios, también llamados colores fundamentales.

En el sistema RGB la intensidad de cada componente (rojo, verde y azul) se expresa como un número hexadecimal o mediante el sistema de numeración decimal (0 a 255). Veamos varios ejemplos en la siguiente tabla.

Figura 9.4. Algunos colores y su representación en hexadecimal y RGB.

Color	HEX	RGB
	#000000	0,0,0
	#ffffff	255,255,255
	#ff0000	255,0,0
	#00ff00	0,255,0
	#0000ff	0,0,255
	#ffff00	255,255,0
	#808080	128,128,128

9.3.9. Generadores de paletas de colores

Como se ha comentado, definir la gama de colores que se utilizará en una web es fundamental porque puede condicionar la experiencia de los usuarios. Esta gama de colores se puede crear mediante una paleta de colores que nos provea de un grupo de matices y tonalidades que nos ayude a marcar la diferencia entre un diseño alegre, elegante, fiable, sobrio, etc.

Una opción para definir la gama de colores es realizando una composición monocromática, que consiste en seleccionar un solo color del círculo cromático y crear sus tonalidades añadiendo blanco o negro.

Otra opción consiste en seleccionar los colores vecinos del círculo cromático, ya que son armónicos y ofrecen estabilidad al diseño. Los colores vecinos son los que se encuentran en un rango de 90 grados en el círculo cromático.

En Internet podemos encontrar diferentes generadores de paletas de color que nos permiten seleccionar las tonalidades o colores idóneos que queremos utilizar: colores vivos, pastel, apagados, grisáceos, etc. Algunos de los generadores de paletas de color son los siguientes:

• Color Picker: htmlcolorcodes.com
• Color Wheel de Adobe: color.adobe.com
• Paletton: paletton.com
• Colourlovers: Colourlovers.com/palettes/add

9.3.10. Las marcas y su relación con los colores

A continuación, se representa el significado de los colores y su relación con algunas de las marcas más famosas de la actualidad.

Veamos ahora el siguiente tablero de Pinterest en el que se han recogido diferentes marcas y su relación con los colores.

9.3.11. Cómo elegir el color de una web

A continuación se muestran algunos consejos para elegir los colores de un sitio web:

1. Considera la identidad de tu marca: Los colores que elijas para el sitio web deben reflejar la identidad y los valores de tu marca. Si ya tienes una paleta de colores establecida para tu marca, asegúrate de utilizar esos colores en la página web para mantener la coherencia.
2. Piensa en tu audiencia: Los colores pueden tener diferentes significados y connotaciones para diferentes personas, por lo que es importante tener en cuenta a tu audiencia al elegir los colores de la aplicación web. Considera factores como la edad, el género, la cultura y las preferencias personales de tus usuarios al elegir los colores.
3. Utiliza la teoría del color: La teoría del color es un conjunto de principios que pueden ayudarte a elegir combinaciones de colores armoniosas y atractivas. Familiarízate con conceptos como el círculo cromático, la armonía de colores y el contraste para tomar decisiones informadas sobre los colores de la aplicación web.
4. Ten en cuenta la legibilidad: Los colores que elijas para el sitio web deben permitir una buena legibilidad del contenido. Asegúrate de elegir combinaciones de colores que proporcionen un buen contraste entre el texto y el fondo para facilitar la lectura.
5. Realiza pruebas: No tengas miedo de experimentar con diferentes combinaciones de colores y realizar pruebas con usuarios reales para ver qué funciona mejor. Utiliza herramientas como las pruebas A/B para comparar diferentes opciones y elegir la combinación de colores que mejor funcione para la página web.

9.4. Guía de estilo: Tipografía

Los textos son la base de la mayoría de sitios web ya que lo más normal es transmitir la información mediante letras. Por este motivo, debemos prestar mucha atención en hacer una correcta elección de fuentes para nuestro sitio web.

A la hora de elegir un tipo de tipografía es muy importante verificar si puede visualizarse correctamente en los distintos navegadores y no abusar de negrita, cursiva y subrayado.

Inicialmente, se utilizaban las fuentes típicas que los usuarios tenían instaladas en sus dispositivos. Actualmente, gracias a que los navegadores soportan la directiva @font-face, es posible utilizar casi cualquier tipo de tipografía sin necesidad de que esté instalada en el dispositivo. En las unidades de CSS veremos como fuentes del tipo TruType y OpenTYpe pueden convertirse en otros formatos y cómo podemos utilizar fuentes alojadas en repositorios externos.

9.4.1 Recomendaciones para elegir la tipografía de una web

A continuación, puedes ver algunas recomendaciones que hay que tener en cuenta a la hora de elegir la tipografía para un sitio web:

1. No usar más de tres tipografías distintas.
2. Utilizar fuentes legibles.
3. Elegir un buen contraste entre el fondo y la letra.
4. Establecer un interlineado de 1,5 puntos por el tamaño de la letra.
5. No abusar de los subrayados ya que suelen utilizarse para los hipervínculos.
6. Nunca escribir todo en mayúsculas porque ralentiza la lectura. Se debe utilizar solo para destacar mensajes cortos como títulos, subtítulos o conceptos importantes.
7. Los espacios en blanco entre párrafos ayudan a descansar la mirada y a mejorar la concentración gracias a la mejor comprensión de la separación entre ellos. Así pues, es necesario añadir un poco más de espaciado entre párrafos y no dejar la misma separación que con el interlineado.
8. La longitud recomendada para un párrafo está comprendida entre 45 y 75 caracteres. (aunque esto puede depender del tamaño de la pantalla).
9. Es aconsejable no utilizar textos de menos de 12 px.

9.4.2. Tipos de letras

Aunque existen muchas clases de letras, a continuación se verán las más destacadas.

Está demostrado que tan sólo se lee un 25% del contenido completo de una web ¡ÚSALO BIEN!

9.4.3. Páginas para descargar fuentes

Hay muchas páginas web que ofrecen fuentes gratuitas y de pago para descargar y utilizar en proyectos de diseño, incluyendo el diseño web. Algunas páginas populares para descargar fuentes son las siguientes:

• Google Fonts: Biblioteca de fuentes gratuitas y de código abierto que ofrece una amplia variedad de fuentes para descargar y utilizar en proyectos de diseño.
• DaFont: Ofrece una amplia selección de fuentes gratuitas y de pago para descargar. Las fuentes están organizadas por categorías, lo que facilita la búsqueda de la fuente adecuada para tu proyecto.
• Font Squirrel: Ofrece una amplia selección de fuentes gratuitas y de alta calidad para descargar. Todas las fuentes en Font Squirrel son libres para uso comercial, lo que las hace ideales para proyectos de diseño web.
• Adobe Fonts: Adobe Fonts (anteriormente conocido como Typekit) es un servicio de suscripción que ofrece una amplia selección de fuentes de alta calidad para descargar y utilizar en proyectos de diseño. Adobe Fonts está incluido en la suscripción a Creative Cloud, por lo que si ya eres suscriptor, puedes acceder a todas las fuentes sin costo adicional.
• Font Awesome: Biblioteca de iconos y fuentes vectoriales que ofrece una amplia selección de iconos para utilizar en proyectos de diseño web. Los iconos están disponibles en diferentes estilos y se pueden personalizar fácilmente para adaptarse a las necesidades de tu proyecto.

DaFontGoogle FontsFont Awesome

9.5. Guía de estilo: Iconos

Los iconos de los sitios web representan acciones y evitan el uso excesivo de textos. Elegir correctamente los iconos es necesario para que los usuarios interpreten fácilmente su significado y así ahorrar tiempo en la visualización del sitio web. Es importante respetar una apariencia similar entre todos los iconos para disponer de una buena armonía y navegabilidad.

9.5.1. Formatos de los iconos

Los iconos se pueden encontrar en formatos diferentes:

• Mapa de bits: PNG, GIF y JPG.
• Imagen vectorizada: SVG.
• Fuentes tipográficas: las fuentes de texto pueden ofrecer iconos sencillos para la representación de elementos de la interfaz.

9.5.2. Consejos al elegir y utilizar iconos

Los iconos son elementos gráficos que pueden ayudar a mejorar la navegación y la comprensión del contenido en un sitio web. Al crear una guía de estilo para un sitio web, es importante establecer pautas claras sobre el uso de iconos, incluyendo información sobre el estilo y el tamaño de los iconos, así como sobre cómo deben utilizarse en diferentes partes del sitio. También es necesario tener en cuenta factores como la accesibilidad para crear una experiencia de usuario coherente y atractiva para todo el mundo.

Veamos algunos consejos para elegir y utilizar iconos en una guía de estilo:

1. Elige un estilo consistente: Asegúrate de elegir iconos que sean coherentes con la identidad visual de tu marca y con el resto de tus elementos gráficos. Por ejemplo, si tu marca utiliza un estilo minimalista y moderno, elige iconos que reflejen ese estilo.
2. Considera la legibilidad: Los iconos deben ser fáciles de entender y reconocer para tus usuarios. Asegúrate de elegir iconos que sean claros y legibles, incluso en tamaños pequeños.
3. Utiliza un tamaño consistente: Utiliza un tamaño consistente para todos los iconos del sitio web para mantener la coherencia visual. Si utilizas diferentes tamaños de iconos en diferentes partes del sitio, asegúrate de establecer pautas claras sobre cuándo utilizar cada tamaño.
4. Proporciona alternativas de texto: Asegúrate de proporcionar alternativas de texto para todos los iconos del sitio web para mejorar la accesibilidad. Las alternativas de texto deben describir el propósito o la función del icono para aquellos usuarios que no puedan ver los iconos.

9.5.3. Páginas para descargar iconos

Hay muchas páginas web que ofrecen iconos gratuitos y de pago para descargar y utilizar en proyectos de diseño, incluyendo el diseño web. Algunas páginas populares para descargar iconos son las siguientes:

• Font Awesome: Biblioteca de iconos y fuentes vectoriales que ofrece una amplia selección de iconos para utilizar en proyectos de diseño web.
• Flaticon: Ofrece una amplia selección de iconos gratuitos y de pago para descargar. Los iconos están organizados por categorías, lo que facilita la búsqueda del icono adecuado para tu proyecto.
• Iconfinder: Ofrece una amplia selección de iconos gratuitos y de pago para descargar. Los iconos están disponibles en diferentes formatos y tamaños, lo que los hace ideales para proyectos de diseño web.
• Material Icons: Biblioteca de iconos creada por Google que sigue los principios del diseño Material Design. Los iconos están disponibles en diferentes estilos y se pueden personalizar fácilmente para adaptarse a las necesidades de tu proyecto.
• Freepik: Ofrece una amplia selección de recursos gráficos gratuitos y de pago para descargar, incluyendo iconos, ilustraciones, fotos y más. Los recursos están disponibles en diferentes formatos y se pueden personalizar fácilmente para adaptarse a las necesidades de tu proyecto.

FlaticonIconFinderFreepikFontAwesome

9.6. Extensiones de utilidad para diseñadores web

Las extensiones son herramientas que pueden mejorar y optimizar el flujo de trabajo de diseñadores y desarrolladores. Hay muchas extensiones disponibles que pueden ayudar a aumentar la productividad y la eficiencia en el trabajo diario. A continuación, se presentan algunas extensiones útiles para diseñadores y desarrolladores.

• ColorZilla: Permite a los usuarios seleccionar y copiar colores de cualquier página web. También incluye herramientas para generar degradados y paletas de colores.
• Fire Shot o Full Page Screen Capture: Son extensiones para navegadores que permiten a los usuarios capturar capturas de pantalla de páginas web completas. Las capturas de pantalla se pueden guardar en diferentes formatos y se pueden editar y anotar antes de guardarlas.
• Responsive Viewer: Permite a los usuarios ver cómo se verá una página web en diferentes dispositivos y resoluciones de pantalla. Esto puede ser útil para probar la capacidad de respuesta de un sitio web.
• Page Ruler Redux: Permite a los usuarios medir elementos en una página web. Los usuarios pueden dibujar una regla en la pantalla para medir el tamaño y la posición de los elementos.
• Highlight H1, H2, H3 & highlight nofollow: Permite a los usuarios resaltar diferentes elementos en una página web, como encabezados y enlaces nofollow. Esto puede ser útil para analizar la estructura y el SEO de una página web.
• WhatFont: Permite a los usuarios identificar las fuentes utilizadas en una página web. Los usuarios pueden pasar el cursor sobre el texto para ver información sobre la fuente, como el nombre y el tamaño.
• WebDeveloper: Ofrece una amplia variedad de herramientas y funciones para desarrolladores web. Incluye herramientas para editar CSS, validar HTML, depurar JavaScript y más.

9.7. Cómo crear una guía de estilo con Figma

Para crear una guía de estilo en Figma seguiremos los mismos pasos que cuando creamos un wireframe, tal y como se puede apreciar en el tutorial de Figma.

Otra opción muy interesante para ir cogiendo soltura con la herramienta, es editar una plantilla ya definida por algún diseñador y modificarla a nuestro gusto. A continuación se muestra un ejemplo de guía de estilo que se puede editar en Figma (botón «Open in Figma») y que te puede servir para crear tu primera guía de estilo. Hay que tener en cuenta que la versión gratuita sólo permite trabajar con 3 proyectos a la vez.

Ejemplo de guía de estilo en Figma: figma.com/community/file/1262521864453665328/

En próximas unidades veremos más contenido relacionado con la experiencia de usuario. Si te interesa este tema puedes comenzar ya a leer algunas reglas y principios de la usabilidad.