Responsive Design / Diseño adaptable
Es un método de diseño que permite que un sitio web se adapte a las dimensiones de la pantalla del dispositivo en el que se esté visualizando, de manera automática, mostrando el contenido de manera confortable para el usuario y consistente (en términos de escalas tipográficas, tamaños o encuadres de imagen, tamaño de los enlaces, ubicación y disposición del menú de navegación, etcétera).
Progressive enhancement / Mejora progresiva
Es una estrategia de diseño que le da prioridad al contenido de la página web. Sobre la base del contenido principal, se agregan progresivamente más capas de diseño e interacción en la medida que el navegador y la conexión de internet del usuario lo permiten. De esta forma, se asegura el acceso al contenido y funcionalidad básica de la página web, además de proveer una versión mejorada para quienes cuentan con un navegador más avanzado o una mejor conexión a internet.
Mobile first / Primero móvil
«Mobile first» puede considerarse una regla de «mejora progresiva». Quiere decir que se define el diseño desde la vista en dispositivos móviles, que tiene más restricciones, y luego se expanden las características para las versiones en tabletas o dispositivos de escritorio.
«Mobile first» es un principio centrado en el contenido, que tiene en cuenta los condicionantes propios del dispositivo como el tamaño de pantalla (que impacta en la densidad de información visible en simultáneo), el ancho de banda o la transferencia de datos (que limita la cantidad de contenido multimedia o de recursos externos para funcionalidades complejas) y el modo de uso (el uso del dedo que carece de instancia de «mouse over»).
El concepto «mobile first» no debe tomarse como una oportunidad para sobre simplificar un sitio web independientemente del dispositivo en que se visualice, así como tampoco debería pensarse un sitio extremadamente complejo para dispositivos de escritorio que luego sea inviable para un dispositivo móvil.
Interfaz
La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface), es un tipo de interfaz de usuario que permite a las personas interactuar con dispositivos electrónicos, a través de un conjunto de imágenes y elementos visuales, en lugar de texto puro o comandos de texto. Proporciona un entorno visual sencillo para representar la información y acciones disponibles en la interfaz. Su principal uso, es facilitar la comunicación de las personas con el sistema operativo de una máquina o computador.
Estructura de información
La estructura de información en el diseño web se refiere a la forma en que la información de un sitio web está organizada y cómo se presenta a las personas usuarias, es decir, comprende definir la organización y la prioridad de la información, las herramientas de navegación y cómo todo esto se organiza visualmente.
Densidad de información
La densidad de información en el diseño web se refiere a la cantidad de información presentada en una página web o dentro de una área específica de una página. Esto puede incluir texto, imágenes, videos, enlaces y cualquier otro tipo de contenido que pueda ser consumido por el usuario. Afecta directamente a la usabilidad y a la experiencia de la persona usuaria, ya que si hay demasiada información en una página (alta densidad de información), puede resultar abrumador y dificultar la localización de lo que se está buscando. Por otro lado, si hay muy poca información (baja densidad), puede parecer que la página no es útil o que falta información.
Arquitectura de información
La arquitectura de información (AI) se refiere al diseño y organización de contenidos en espacios digitales para que sean fáciles de entender y navegar. Toma en cuenta la organización (agrupamiento y categorización de los datos); el etiquetado (nomenclatura y representación de categorías y subcategorías); la navegación (desplazamiento de la persona usuaria de un lugar a otro dentro del sistema de información) y la búsqueda de información. El propósito principal de la AI es incrementar la facilidad de uso y la accesibilidad, facilitando a las personas usuarias la localización de lo que buscan y la ejecución de sus tareas de forma eficiente y satisfactoria.
Usabilidad
Se refiere a la facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto. El objeto de uso puede ser una aplicación, una página web, un libro, una herramienta, máquina, proceso, vehículo o cosa con la que un humano interactúa.
Usabilidad web
Es la disciplina que estudia la forma de diseñar sitios web para que las personas usuarias puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible. La mejor forma de crear un sitio web usable es realizando un diseño centrado en el usuario, diseñando para y por las personas usuarias, en contraposición a lo que podría ser un diseño centrado en la tecnología o uno centrado en la creatividad u originalidad.
Prueba de usabilidad
Es una prueba que se realiza con personas usuarias y entrega información directa de cómo esos usuarios reales utilizan un sistema (por ejemplo, una aplicación web). Las pruebas de usabilidad se enfocan en medir la capacidad de un producto en cumplir el propósito para el cual fue diseñado. Durante la prueba se toma nota de la interacción, particularmente de los errores y dificultades con que se encuentran las personas usuarias al realizar las tareas para las cuales la aplicación ha sido diseñada.
Métricas de usabilidad
Las métricas de usabilidad son medidas cuantitativas que se utilizan para evaluar el rendimiento y la eficiencia de una interfaz de usuario. Proporcionan información valiosa para entender cómo las personas usuarias interactúan con un sistema, permitiendo a los diseñadores y desarrolladores mejorar la experiencia de usuario. Algunas métricas comunes de usabilidad incluyen:
- Tasa de errores: Cantidad de errores cometidos por los sujetos de prueba y si estos fueron recuperables o no al usar los datos o procedimientos adecuados.
- Tasa de éxito: Porcentaje de las tareas completadas con éxito por los usuarios.
- Tiempo requerido para completar una tarea específica.
- Aprendizaje: Cuánto tiempo o cuántos intentos le toma a un usuario nuevo aprender a usar la interfaz eficientemente.
- Recuerdo: Qué tanto recuerda el usuario después de un periodo sin usar la aplicación.
- Respuesta emocional: Cómo se siente el usuario al terminar la tarea (bajo tensión, satisfecho, molesto, etcétera).
Accesibilidad
La accesibilidad o accesibilidad universal es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas. Es indispensable e imprescindible, ya que se trata de una condición necesaria para la participación de todas las personas independientemente de las posibles limitaciones funcionales que puedan tener.
Accesibilidad web
Cuando los sitios web están diseñados pensando en la accesibilidad, todas las personas usuarias pueden acceder en condiciones de igualdad a los contenidos. Por ejemplo, cuando un sitio tiene un código HTML semánticamente correcto, se proporciona un texto equivalente alternativo a las imágenes y a los enlaces se les da un nombre significativo, esto permite a las personas ciegas utilizar lectores de pantalla o líneas Braille para acceder a los contenidos. Si el tamaño del texto es lo suficientemente grande, las personas usuarias con problemas visuales podrán leerlo sin dificultad. Si los contenidos están escritos en un lenguaje sencillo e ilustrados con diagramas y animaciones, las personas con dislexia o problemas de aprendizaje estarán en mejores condiciones de entenderlos. De igual modo, un tamaño de botones y áreas activas adecuado puede facilitar su uso a las personas usuarias que no pueden controlar el ratón con precisión debido a dificultades de motricidad.
Experiencia de usuario / UX
Es la percepción y respuesta de una persona que resulta de la experiencia de uso de un producto, sistema o servicio. Incluye todas las emociones, creencias, preferencias, percepciones, respuestas físicas y psicológicas, comportamientos y logros que ocurren antes, durante y después del uso. Hay tres factores que influyen en esa experiencia: el sistema, la persona usuaria y el contexto de uso. (Definición ISO 9241-210)
Experiencia de navegación (web)
El sistema de navegación puede entenderse como un mapa que permite a la persona usuaria explorar y descubrir las distintas secciones e informaciones presentes en un sitio web.
Se espera que la experiencia de navegación del sistema sea consistente con las expectativas del usuario en términos de convenciones, ubicación y diseño; simple en términos de la cantidad de opciones presentadas o de profundidad (por ejemplo, un submenú que es fácil de usar por el tamaño de las áreas activas).
Interfaz de usuario / UI
El diseño de interfaz está orientado a maximizar la usabilidad y experiencia de usuario de un sistema o dispositivo, buscando que la interacción sea lo más simple y eficiente posible, en términos de lograr los objetivos del usuario (diseño centrado en el usuario). Los elementos gráficos y la tipografía son fundamentales en el diseño de interfaz, para mejorar la usabilidad y provocar u orientar el comportamiento del usuario. Algunos componentes de diseño de interfaz son:
- Navegación: tipo de navegación lateral, hacia adelante, hacia atrás
- Color: paleta cromática con color principal, color secundario, claro, oscuro, contraste
- Tipografía: tamaños y jerarquías
- Iconografía: imágenes fotográficas, ilustraciones, gráficos, etc.
- Tipo de formas: más o menos redondeadas, cuadradas, etc.
- Comunicación: alertas, cuadros de diálogo, etc.
UI Kit
Un UI kit (del inglés user interface kit) es un archivo que incluye varios elementos prediseñados (como por ejemplo: botones, íconos, tablas, formularios, sliders, etc.). Se pueden editar fácilmente, es decir, personalizarlos (cambiar tamaño, color, etc.) para adaptarlos a las necesidades de nuestro sitio.
Diseño web intuitivo
Entendiendo lo intuitivo como aquello que se comprende instantáneamente, sin necesidad de razonamiento, el diseño web intuitivo es aquel que busca que el usuario pueda usar un sitio o aplicación de forma fácil y rápida a partir de recurrir a una diagramación y diseños predecibles, consistentes y organizados.
HTML
Es el lenguaje estándar para crear páginas web. La sigla significa «Lenguaje de marcado de hipertexto» (en inglés, HyperText Markup Language). Describe la estructura de las páginas web a través de elementos HTML que están representados por etiquetas (de ahí la palabra «marcado», ya que el código «etiqueta» al contenido). Las etiquetas HTML encierran fragmentos de contenido como «encabezado», «párrafo», «tabla», etc. Los navegadores no muestran las etiquetas HTML, pero las usan para interpretar y representar el contenido de la página.
CSS
La sigla significa «Hojas de Estilo en Cascada» (en inglés Cascading Style Sheets). Es el lenguaje que describe el estilo visual de los elementos HTML de una página web, incluido el diseño, la diagramación y las variaciones en la visualización para diferentes dispositivos y tamaños de pantalla. La palabra «cascada» hace referencia a la característica «sumativa» de los estilos.
Media query
Es una técnica CSS que utiliza la regla @media para incluir un bloque de propiedades CSS solo si una determinada condición es verdadera.
El uso de media queries es la técnica utilizada en el diseño web adaptable para entregar estilos específicos de acuerdo al dispositivo (computadoras de escritorio, computadoras portátiles, tabletas y teléfonos móviles).
Tipografía web
Hace referencia al uso de fuentes en la web.
Fuentes
En la era digital, una fuente es el archivo digital que se utiliza para mostrar e imprimir caracteres. Una fuente puede incluir letras, números, signos de puntuación y otros símbolos. Dentro de una misma familia tipográfica, puede haber varias fuentes que varíen en estilo (como cursiva, negrita, subrayado, etc.). Tipografía es un término mucho más amplio y abarca todo lo relacionado con el diseño y uso de las letras mientras que fuente refiere a un conjunto específico de caracteres de un determinado tamaño y estilo pertenecientes a una familia tipográfica.
Web safe fonts / Fuentes web seguras
Son fuentes presentes en un amplio rango de sistemas operativos, y que se utilizan en web para aumentar la probabilidad de que el contenido se muestre en la fuente elegida. Si el usuario no tiene instalada en su dispositivo la fuente especificada en la hoja de estilos, el navegador intenta seleccionar alguna similar, de acuerdo a las fuentes alternativas y genéricas definidas en la propiedad font-family de CSS:
font-family: «Times New Roman», Times, serif;
La propiedad font-family debe contener varios nombres de fuentes como alternativas, desde lo más específico a lo más genérico, para garantizar la máxima compatibilidad entre navegadores y/o sistemas operativos. Si el navegador no admite la primera fuente, intenta con la siguiente fuente y así.
Web fonts / Fuentes web
A diferencia de las fuentes web seguras, las fuentes web no están preinstaladas en el sistema operativo del usuario, sino que son descargadas por el navegador al momento en que este visualiza la página. Una de las ventajas principales es que permite personalizar el diseño tipográfico de la página web, pero al tratarse de archivos externos que el navegador debe descargar, puede implicar demoras en el tiempo de carga de una página, por lo que es recomendable limitar la cantidad de fuentes (o variables) a utilizar.
Variable fonts / Fuentes variables
Las fuentes variables son un tipo de fuente digital que permite al diseñador ajustar características como el ancho, el peso, la inclinación y otros atributos, todo dentro de una única fuente, es decir, de un único archivo. Si bien su soporte depende de los navegadores y sistemas operativos, las fuentes variables son beneficiosas porque pueden reducir la carga de recursos y el tamaño de los archivos en las aplicaciones y sitios web, además de ofrecer un alto grado de flexibilidad y control en el ajuste de la tipografía para distintos contextos y dispositivos.
Responsive typography / Tipografía adaptable
La tipografía responsive se refiere a la práctica de ajustar el tamaño y el espacio de las fuentes en función del tamaño de la pantalla o la ventana del navegador del dispositivo en el que se está visualizando una página web. Para cambiar el tamaño de fuente en los puntos de interrupción específicos (breakpoints), se apela al uso de unidades de medida relativas en lugar de absolutas (por ejemplo, porcentajes en lugar de píxeles) o de media queries en CSS. Este enfoque permite que el texto sea legible y la lectura amena en una variedad de dispositivos.
Fluid typography / Tipografía fluida
La tipografía fluida es una técnica de tipografía adaptable en la que el texto se escala automáticamente a medida que cambia el tamaño de la ventana del navegador (en lugar de cambiar el tamaño de la fuente en puntos de específicos). Al aumentar el tamaño de la pantalla, se aumentan los valores tipográficos (tamaño, altura de línea, espaciado entre letras, etc). De manera similar, los valores disminuyen cuando el tamaño de la pantalla se hace más pequeño. Esto se logra utilizando la unidad de medida «vw» (viewport width) en CSS, que representa un porcentaje del ancho de la ventana del navegador. La tipografía fluida puede proporcionar una experiencia de lectura más consistente y adaptable en una gama más amplia de tamaños de pantalla.
Hipertexto
Es una forma de texto que incluye enlaces (hipervínculos) que conducen a otros textos. En el contexto de la World Wide Web, casi toda la información se presenta en forma de hipertexto. El hipertexto no se limita a texto per se, ya que los hipervínculos pueden vincular a otros tipos de contenido, como imágenes, videos y archivos de sonido. El uso de hipertexto permite una navegación no lineal y facilita la creación de relaciones complejas entre diferentes tipos de contenido. Esta característica de interconexión de la información es uno de los aspectos fundamentales que diferencian la lectura y escritura en medios digitales de la experiencia en medios impresos, proporcionando un ambiente dinámico, interactivo y a menudo colaborativo para el intercambio de información.
Interactividad e interacción
Interactividad e interacción son dos términos utilizados en el contexto del diseño de interfaces y la experiencia del usuario, pero se refieren a aspectos ligeramente diferentes.
La interactividad se refiere al grado en el que los usuarios pueden influir o manipular un sistema o interfaz. Un sistema de baja interactividad podría ser, por ejemplo, un sitio web que sólo permite a los usuarios leer información, pero no interactuar con ella de ninguna manera. Uno de alta interactividad, en cambio, permitiría a los usuarios influir de muchas formas en el contenido o en la representación del contenido.
La interacción, por otro lado, es el acto de comunicación entre la persona usuaria y el sistema. Describe el proceso por el cual las personas realizan acciones en la interfaz (como hacer clic en un botón o deslizar una pantalla) y el sistema responde de alguna manera. El diseño de interacción (IxD) es un campo dentro del Diseño UX que se aboca a esta relación entre personas y máquinas: a diseñar cómo se relaciona el usuario con la interfaz, siendo su principal preocupación la reacción del sistema ante la acción del usuario.
En resumen, la interactividad es una característica del sistema, mientras que la interacción es una actividad que ocurre entre el usuario y el sistema.
Tamaño de pantalla
Es el tamaño físico del área de la pantalla. Generalmente se describe por la longitud de su diagonal, que es la distancia entre las esquinas opuestas, y se mide en pulgadas. El tamaño de pantalla es diferente de la resolución de visualización de una pantalla que se mide en píxeles.
Resolución de pantalla
La resolución de pantalla es el número máximo de píxeles que puede ser mostrado en la pantalla. Viene dada por el producto del ancho por el alto, medidos ambos en píxeles, con lo que se obtiene una relación, llamada relación de aspecto (en inglés, aspect ratio).
Densidad de píxeles
Densidad de píxeles = Ancho (o alto) de la pantalla en píxeles / Ancho (o alto) de la pantalla en pulgadas
Una computadora portátil puede tener un monitor de 13 pulgadas con una resolución de pantalla de 2560 x 1600 píxeles, lo que da como resultado una densidad de píxeles por pulgada (PPI pixels per inch) de 232.22 PPI. O una computadora portátil puede tener un monitor de 13 pulgadas con una resolución de 1440 x 900 píxeles, lo que da 130.62 PPI. En ambos casos el tamaño de pantalla es el mismo pero la calidad de visualización no, ya que la primera cuenta con más cantidad de píxeles por pulgada.
Como resultado, un elemento de la interfaz de determinado tamaño fijo en píxeles, parece más grande en pantallas de baja densidad de píxeles, y más pequeño en pantallas de alta densidad de píxeles.
En términos de diseño adaptable, la densidad de píxeles es otro de los factores a tener en cuenta, principalmente en el tamaño de las imágenes, teniendo que contar con un set de medidas para la misma imagen, de modo de que el navegador pueda mostrar la que mejor se adapte a las características de la pantalla del dispositivo.
Wireframe
Es una guía visual, que representa en baja fidelidad la estructura de una aplicación web. El wireframe esquematiza la organización del contenido y su tipología, incluyendo componentes de la interfaz y de navegación, y anotaciones de cómo funcionan en conjunto, pero carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.
Boceto / Mockup
Una maqueta o mockup es una representación estática, no navegable, de entre media y alta fidelidad del diseño de la interfaz. Sirve para revisar la apariencia del proyecto y darse una idea de cómo sería su funcionalidad. El mockup incluye los detalles visuales, tales como colores, tipografía, misceláneas, etc. que hacen al estilo gráfico del sitio o aplicación.
Prototipo
Un prototipo es una representación de alta fidelidad del proyecto digital, que permite al usuario experimentar el contenido y probar las interacciones con la interfaz, de manera similar al producto final. Es un modelo navegable, que se diseña a tamaño real. Sirve para testear elementos de interacción como estados de botones, validación de formularios, transiciones entre páginas, comportamiento de los menús, etc.
Componentes Web
Los componentes web son elementos que se usan a modo de bloques para construir una interfaz de usuario. Desde un punto de vista técnico, la funcionalidad de un componente web queda encapsulada de modo que se puede utilizar donde se quiera dentro de una aplicación web sin temor a las colisiones de código. Los componentes web resuelven las necesidades de una interfaz en términos de organización, navegación, acciones, comunicación, etcétera. Algunos componentes comunes pueden ser tarjetas, listas, tablas, menúes de navegación, solapas, botones, pastillas, campos de texto, elementos de selección, alertas, cuadros de diálogo, banners, divisores, barras de progreso, tooltips, entre otros.
Responsive Grid / Grilla adaptable
Es una grilla que se adapta al tamaño y orientación de la pantalla, asegurando consistencia a través de cualquier dispositivo. Sus elementos principales, al igual que en las grillas del medio impreso, son las columnas, las calles y los márgenes.
El ancho de columna se define utilizando porcentajes, en lugar de valores fijos, para permitir que el contenido se adapte de manera flexible a cualquier tamaño de pantalla. El número de columnas que se muestran está determinado por rangos de tamaños de pantalla (dispositivos móviles, tabletas u otro tamaño). En el entorno web es muy habitual trabajar con grillas de 12 columnas. Al ser múltiplo de 4, esta estructura se lleva bien con los breakpoints habituales del diseño web.
El ancho de las calles y el tamaño de los márgenes también cambia de acuerdo al rango de tamaño de pantalla, siendo más anchos en pantallas más grandes y más angostos en pantallas más chicas.
Breakpoint
Se denomina breakpoint al rango de tamaños de pantalla que tienen requisitos de diseño específicos. Para determinado breakpoint, el diseño se ajusta para adaptarse al tamaño y la orientación de la pantalla. Por ejemplo, un posible sistema de rangos podría ser el siguiente, definido en función del ancho de pantalla del dispositivo en píxeles:
Extra chico <576px
Chico ≥576px
Mediano ≥768px
Grande ≥992px
Extra Grande ≥1200px
