Glosario web

Elaboración: Mercedes Jáuregui, Natalia Pano

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 programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.

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 los usuarios 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 el usuario, 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 usuarios 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 los usuarios al realizar las tareas para las cuales la aplicación ha sido diseñada.

Métricas de usabilidad

  • Exactitud: Número de errores cometidos por los sujetos de prueba y si estos fueron recuperables o no al usar los datos o procedimientos adecuados.
  • Tiempo requerido para concluir la actividad.
  • 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, todos los usuarios 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 los usuarios ciegos utilizar lectores de pantalla o líneas Braille para acceder a los contenidos. Si el tamaño del texto es lo suficientemente grande, los usuarios con problemas visuales puedan leerlo sin dificultad. Si los contenidos están escritos en un lenguaje sencillo e ilustrados con diagramas y animaciones, los usuarios con dislexia o problemas de aprendizaje están en mejores condiciones de entenderlos. De igual modo, el tamaño de los botones o las áreas activas adecuado puede facilitar su uso a los usuarios 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, el usuario 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 al usuario explorar y descubrir las distintas secciones e informaciones presentes en un sitio web.

La experiencia de navegación de ese sistema, se espera que 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ú); 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 ya 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.

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.

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

Previous postBreve historia de los caracteres de palo seco Next postConceptos básicos para el diseño de información

Related Posts

  • Conceptos básicos para el diseño de información

    August 6, 2020

  • Clasificación, elección y combinación de familias

    June 23, 2013

    Diferentes clasificaciones tipográficas. Utilidad. Criterios de elección según función y/o estilo. Criterios de combinación. Aspectos a controlar en la combinación. Combinación y pieza de diseño. Legibilidad y condiciones de lectura.

  • Tipografía y sistemas tipográficos

    June 19, 2013

    Programa como sistema. Constantes y variables. Sistema cerrado o abierto. Programa y proyecto. Elementos del programa para informar, persuadir y comunicar. Características de las piezas gráficas. identidad derivada.

  • Familia tipográfica

    September 10, 2012

    Definición. Familia como sistema. Componentes de la caja tipográfica. Variables tipográficas. Ejes de construcción de variables: históricos y contemporáneos. Revisión de aspectos que se mantienen y modifican en el sistema de variables.