Pinta el cuadro, no el marco: Cómo los navegadores proporcionan todo lo que los usuarios necesitan.

Jesús Ricarte
Jul 31, 2019 · 15 min read
Ilustración por Dougal MacPherson

Por Eric Bailey. Original en inglés, traducido al español por Jesús Ricarte

Kip Williams, profesor de ciencias de la psicología en la Universidad de Purdue, realizó un fascinante experimento llamado “cyberball”. En su experimento, un sujeto de prueba y otros dos participantes jugaron un videojuego basado en atrapar una pelota. En un momento predeterminado, el sujeto de prueba fue excluido del juego, siendo obligado a observar mientras el tiempo se agotaba.

La experiencia mostró aumentos en los niveles de enfado y tristeza, así como también niveles más bajos en las cuatro necesidades. La versión digital del experimento arrojó resultados que coincidían con los resultados del experimento físico original, lo que significa que estos sentimientos ocurrieron independientemente del contexto.

Una vez concluido el juego, se le dijo al sujeto de prueba que los otros participantes eran robots, no humanos. Curiosamente, la revelación sobre los competidores automatizados no disminuyó los sentimientos negativos reportados. De hecho, aumentó el sentimiento de enfado, al tiempo que disminuyó la sensación de fuerza de voluntad y/o auto-control de los participantes.

En otras palabras: la gente que se siente rechazada por un sistema digital se sentirá herida y verá reducido su sentido de autonomía, incluso cuando crea que el responsable directo no es otro ser humano.

Pero, ¿qué tiene esto que ver con los navegadores?

Cada ajuste en la apariencia y comportamiento de las características que los navegadores permiten manipular es como lanzar los dados, puede deleitar a algunos, a costa de alienar a otros.

Cuando se usa un navegador, hay mucha uniformidad, hasta que deja de haberla. La mayoría de tiempo vamos saltando de página en página y de sitio en sitio, haciendo clic en los enlaces, pulsando botones, viendo videos, rellenando formularios, escribiendo mensajes, etc. Pero de vez en cuando nos encontramos con algo nuevo que nos hace detenernos para descifrar qué está pasando.

Cada sitio y aplicación web es una experiencia auto-contenida en sí misma, con sus propias ideas de cómo deben verse y comportarse las cosas. Algunos están más cerca de otros, pero cada uno requiere aprender a operar la interfaz hasta cierto punto.

Algunos navegadores también pueden tener partes de su funcionalidad y apariencia alteradas, lo que significa que, al igual que con los sitios web, puede haber discrepancias inesperadas. Vamos a desentrañar algunos matices detrás de algunas de estas características, y lo que es más importante, por qué en la mayoría de los casos, es mejor dejarlas en paz.

Desplazarse hacia arriba

Los principales navegadores de escritorio permiten presionar la tecla Inicio del teclado para saltar a la parte superior de la página. Algunas implementaciones de la barra de desplazamiento permiten hacer lo mismo, haciendo clic en la parte superior del área de la barra. Algunos navegadores también permiten teclear Comando+Arriba (macOS) / Control+Arriba (Windows). Las personas que usan tecnologías de asistencia como lectores de pantalla, pueden usar elementos como puntos de referencia para navegar de la misma manera (siempre que estén correctamente declarados en el HTML del sitio).

Sin embargo, no todos los dispositivos tienen una forma fácilmente detectable de invocar esta funcionalidad: muchos ordenadores portátiles no disponen de la tecla Inicio. La funcionalidad de iOS pulsa-el-reloj-para-saltar-a-la-parte-superior es difícil de descubrir, y puede resultar sorprendente y frustrante si se activa accidentalmente. Se necesitan extensiones de navegador especializadas para recrear las técnicas de navegación de referencia de los lectores de pantalla.

Una solución de interfaz de usuario comúnmente implementada para páginas más largas es el botón de volver-arriba. A menudo se fija en la esquina inferior derecha de la pantalla. La activación de este control llevará al usuario a la parte superior de la página, independientemente de cuán abajo se haya desplazado.

Si tu sitio cuenta con una gran cantidad de contenido por página, puede valer la pena investigar este patrón de interfaz de usuario. Intenta analizar y/o realizar pruebas de usuario para ver dónde y con qué frecuencia se utiliza esta función. La recomendación es que si se usa con demasiada frecuencia, podría valer la pena revisar en detalle tu arquitectura de información y tu estrategia de contenido.

Tres cosas que me gustan del patrón volver-arriba son:

  • Su funcionalidad es bastante obvia (especialmente si está debidamente etiquetada).
  • Siempre que esté bien diseñada, puede proporcionar un objeto táctil de tamaño decente en un área agradable para el pulgar. Por consideraciones de control motriz, su objeto táctil puede ser superior a las barras de desplazamiento estrechas o de estado, lo que puede hacer que los objetos más pequeños resulten frustrantes.
  • No altera ni elimina el comportamiento de desplazamiento existente, sino que lo aumenta. Si alguien está acostumbrado a una forma de desplazarse hacia la parte superior, no la está anulando o interrumpiendo.

Si estás implementado este tipo de funcionalidad, tengo cuatro peticiones para ayudar a que la experiencia funcione para todos (creo que la librería Smoth Scroll es un buen punto de partida):

  • Cumple con las solicitudes de los usuarios para reducir el movimiento. El efecto dramático de desplazamiento desde la parte inferior de la página hasta la parte superior puede ser un activador vestibular, una situación en la que el sistema que controla la sensación de posición y orientación física del cuerpo en el mundo se interrumpe, causando dolores de cabeza, náuseas, vértigo, migrañas y pérdida de audición.
  • Asegúrate que el foco del teclado se mueva a la parte superior del documento, reflejando lo que ocurre visualmente. Aplicar esta práctica mejorará la experiencia de todos los usuarios. De otro modo, pulsar Tab tras desplazarse hacia arriba enviará al usuario al primer elemento interactivo a continuación del que tuviese el foco antes de activar el botón de desplazamiento.
  • Asegúrate que el botón no oculta algún otros contenidos oscureciéndolos. Asegúrate de tener en cuenta cuando el navegador está en un estado de ampliación (zoom), no sólo en su estado predeterminado.
  • Ten en cuenta otros elementos con posición fija. He visto un buen número de sitios web que además tienen un chatbot o un botón de acción flotante compitiendo por el mismo espacio.

Barras de desplazamiento

Si tienes la edad suficiente para recordarlo, en su momento estuvo de moda estilizar las barras de desplazamiento. Internet Explorer permitía esta personalización a través de una serie de propiedades específicas del navegador. En el mejor de los casos, ¡se veían estupendas! Si el diseñador y el desarrollador eran expertos y estaban orientados al detalle, se conseguía lo que parecía una extensión natural del resto del sitio web.

Sin embargo, la apuesta por un diseño de calidad era bastante alta: las barras de desplazamiento son parte de la interfaz de una aplicación, no de un sitio web. En el diseño inclusivo, es parte de lo que llamamos consistencia externa. La consistencia externa es la idea de que la funcionalidad de un objeto se aprende y se refuerza por implementaciones similares en otros lugares. Por eso puedes usar un interruptor de pared en la mayoría de las casas y tener la garantía que se encenderán las luces en lugar de vaciarse el inodoro.

Aunque las barras de desplazamiento tienen algunas diferencias visuales entre sistemas operativos (y entre versiones de un mismo sistema operativo), son consistentes externamente en cuanto a su funcionamiento. Las barras de desplazamiento son además consistentes internamente, ya que cada ventana y programa del sistema operativo que requiere desplazamiento tiene el mismo tratamiento en lo que respecta a las barras de desplazamiento.

Si personalizas los colores de las barras de desplazamiento de tu sitio web, para las personas con menos conocimientos tecnológicos, otro aspecto de la interfaz ha cambiado sin previo aviso ni instrucciones sobre cómo volver a cambiarlo. Si el usuario ya está confundido sobre cómo funcionan las cosas en la pantalla, es una cosa menos familiar para que se aferren a ella como estable y confiable.

Puede que estés poniendo los ojos en blanco mientras lees esto, pero te pido que leas este increíble artículo de Jennifer Morrow. En él, describe la realización de una prueba de usuario de guerrilla en un centro comercial, que acaba descarrilando por completo cuando descubre a una persona que nunca había utilizado un ordenador.

Lo que descubre es tan importante como impactante. Lo esencial es que algunas personas (incluso aquellas que han utilizado un ordenador anteriormente) no entienden el matiz de las diferentes “capas” de navegación al utilizar un ordenador: el hardware, el sistema operativo, el navegador instalado en el sistema operativo, el sitio web que está mostrando el navegador, las ventanas modales y los mensajes emergentes del sitio web, etc. Para ellos, es una experiencia plana.

No deberíamos esperar que estos usuarios hagan malabares con este tipo de sobrecarga cognitiva. Este tipo de abstracciones se crean para ser análogas a objetos del mundo real, específicamente para que las personas puedan obtener lo que quieran de un sistema digital sin necesidad de ser programadores. Añadir complejidad innecesaria debilita estas metáforas y da a los usuarios un punto de referencia en el que confiar.

Recuerda el experimento “cyberball”. Cuando un usuario ya se encuentra en un estado emocional de angustia, nuestra mal diseñada barra de desplazamiento personalizada puede ser la gota que colma el vaso, haciendo que abandonen el intento de obtener lo que querían del sistema, rechazándolo en su totalidad.

Aunque el artículo de Morrow fue escrito en 2011, es tan relevante ahora como lo fue en su momento. Cada vez más personas están utilizando internet a nivel global, y cada vez más servicios de la vida cotidiana se están digitalizando. Depende de nosotros, como diseñadores y desarrolladores responsables, asegurar que hacemos que todos, con independencia de su dispositivo, circunstancias o capacidades, se sientan bienvenidos.

Además de abandonar innecesariamente la consistencia externa, existe el problema potencial de que las barras de desplazamiento personalizadas no tengan el contraste de color suficiente. Los colores demasiado claros pueden generar una situación donde una persona que experimenta condiciones de baja visibilidad no será capaz de percibir, y por lo tanto operar, el mecanismo de desplazamiento de un sitio web.

Este artículo ni siquiera comenzará a desentrañar los problemas derivados de las implementaciones personalizadas de las barras de desplazamiento que, en lugar de dar estilo con CSS a las barras por defecto del sistema operativo, son reemplazadas por una solución en JavaScript. Créeme cuando digo que aún tengo que ver un caso implementado de modo que recree con éxito y de forma fiable todas las características y funcionalidades en todos los dispositivos, sistemas operativos, navegadores y modos de navegación.

¿Mi opinión? No alteres la apariencia por defecto de las barras de desplazamiento del sistema operativo. Usa ese tiempo para trabajar en alguna otra cosa, por ejemplo, revisando y solucionando problemas de contraste de color.

Desplazamiento

El principal problema, en lo que respecta a alterar el comportamiento del desplazamiento, gira en torno al consentimiento: toma un comportamiento externamente consistente, en todo el sistema, y lo altera repentinamente sin permiso. El término scrolljacking se acuñó para describir esta práctica. No se debe confundir con scrollytelling, un tratamiento más considerado del comportamiento de desplazamiento que respeta los ajustes del sistema.

Alterar el comportamiento del desplazamiento en tu aplicación web puede ir en contra de las preferencias específicas de alguien. Para algunas personas, será una simple molestia. Para personas con problemas de control motriz, puede dificultar el uso de un sitio web. En algunos casos extremos, la discrepancia entre el tamaño del desplazamiento y la distancia recorrida puede llegar a ser un disparador vestibular. Otra consideración es que tu modificación del comportamiento del desplazamiento, puede dejar de lado, accidentalmente, a personas que no usan ratones, interfaces táctiles o trackpads para desplazarse.

Con todo, creo que Robin Rendle lo explicó mejor:

Scrolljacking, a lo que me refiero, a la vez, con honestidad y sarcasmo, es el fracaso del primer objetivo de un diseñador web; ya que ataca un patrón estandarizado y asume el control sobre las acciones del usuario.

Texto resaltado

Otra característica de los sistemas operativos a la que podemos cambiar el estilo en el navegador es el texto resaltado. Del mismo modo que las barras de desplazamiento, este es un elemento de interfaz compartido entre todas las aplicaciones del sistema operativo, no sólo en el navegador.

Romper la consistencia externa del sistema operativo, con respecto al color del texto resaltado, tiene muchos de los mismos problemas que dar estilo a las barras de desplazamiento, es decir, la alteración del comportamiento esperado de algo que funciona de manera confiable en el resto de lugares. Es potencialmente confuso y desorientador, y puede rehusar las preferencias expresadas por alguien.

Algunas personas resaltan el texto mientras van leyendo. Si tu estilo personalizado de resaltado tiene un ratio de contraste bajo, entre el color del texto y el color de fondo, la persona que está leyendo tu sitio web puede no ser capaz de apreciar el texto que está resaltando. Este efecto causará que el texto aparentemente desaparezca mientras lo intentan leer.

A otras personas puede no importarle tu sensibilidad estética. Tanto macOS como Windows permiten especificar un color personalizado para el resaltado de texto. En un escenario donde alguien ha establecido, deliberadamente, una preferencia distinta a la predeterminada del sistema, un estilo de resaltado de color puede anular sus especificaciones establecidas.

Para mí, los riesgos potenciales tienen mucho más peso que la vanidad de un estilo de resaltado a medida — mejor dejarlo tal como está.

Redimensionamiento de texto

Muchas personas cambian el tamaño del texto para ajustarlo a sus necesidades, Y eso es algo bueno. Queremos que las personas sean capaces de leer y actuar sobre nuestro contenido, independientemente de las circunstancias que puedan estar experimentando.

Para el problema de texto demasiado pequeño, algunos diseñadores eligen widgets para redimensionar el texto, un patrón personalizado de interfaz que permite elegir de entre un número de tamaños de fuente predefinidos por CSS. Muy habitual en sitios con mucho contenido textual, los widgets de redimensionamiento de texto suelen aparecen en diseños complejos multi-columna. Los portales de noticias son un ejemplo habitual.

Antes de profundizar en mis preocupaciones con los widgets de redimensionamiento de texto, me gustaría preguntarte: si descubres que tu sitio web necesita un widget especializado para gestionar el tamaño del texto, ¿por qué no tomar el camino más corto e incrementar el tamaño base del texto?

Como en otros asuntos referentes a la accesibilidad, una petición de texto más grande no es necesariamente indicativa de una condición de discapacidad permanente. A menudo es circunstancial, como en la situación en la que estás mostrando un sitio web en el proyector de pésima calidad de tu oficina.

Los navegadores permiten que los usuarios cambien su tamaño de texto por defecto, redimensionándolo en consecuencia, en todas las webs. Los navegadores son excepcionalmente buenos encargándose este ajuste cuando escribes CSS con valores de altura de línea sin unidades y unidades de tamaño de texto relativas.

Algunos diseñadores, pueden sentir que otorgar esta libertad a los usuarios, le resta, de alguna manera, valor a su marca. Los buenos diseñadores entienden que la marca va más allá del aspecto visual. Se trata de implementar un diseño inicial en el navegador, y entonces trabajar con las capacidades del navegador para dar el mejor servicio a la persona que lo usa. Incluso si se ajustan aspectos como el tamaño de la fuente, una marca fuerte seguirá luciendo por la facilidad de sus flujos de usuario, la calidad de su tipografía y paleta de color, la fuerza en la redacción de sus textos, etc.

Desafortunadamente, los widgets personalizados para redimensionar el texto carecen de un enfoque universal. Si confías en los ajustes de texto del navegador, simplemente funciona, consistentemente, con los mismos controles, gestos y atajos de teclado, para cada página en cada sitio web, incluso en condiciones no ideales. No tienes que escribir y mantener código extra, hacer pruebas de regresión, o escribir texto para enseñar al usuario dónde encontrar y cómo usar el widget de redimensionamiento de texto de tu sitio.

La consistencia de comportamiento es increíblemente importante. El redimensionado de texto del navegador se aplica a todo el texto de la página proporcionalmente cada vez que se cambia el ajuste correspondiente. Además, estos ajustes se guardan para la próxima visita. No todos los widgets personalizados de redimensionamiento de texto hacen esto, ni cambian el tamaño de todo el contenido según lo estipulado en las Pautas de Accesibilidad de Contenido Web.

Temas de alto contraste

Cuando hablo de temas de alto contraste, no estoy hablando de algo como el modo oscuro. Estoy hablando de dar respuesta a las personas que necesitan cambiar los colores de tu sitio o aplicación web, para que sean más accesibles.

Del mismo modo que los controles de redimensionamiento de texto, los temas que están diseñados para proporcionar unos valores altos de contraste de color resultan complicados: si estás tomándote el tiempo para hacerlo, ¿por qué no simplemente solucionar los valores de contraste insuficientes en tu CSS? Gestionar temas en CSS eficazmente, es un asunto complicado, y necesita de muchos recursos, incluso en condiciones ideales.

Muchos sitios con temas de alto contraste son estáticos, en tanto que el diseñador o el desarrollador han tomado decisiones en cuanto a que colores usar, lo que puede resultar un problema. Es sabido que demasiado contraste puede generar migrañas, así como potencialmente dificultar que, usuarios con algún tipo de desorden de hiperactividad o déficit de atención, se concentren.

La disyuntiva sobre el contraste nos lleva a un punto difícil de aceptar en lo que se refiere a la accesibilidad: lo que funciona para una persona, en realidad puede impedir a otra. A causa de esto, es importante hacer las cosas de manera abierta e interoperable. Dejar el control último al usuario final para que pueda decidir la mejor manera de interactuar con el contenido.

Si vas a seguir adelante con la idea de proporcionar este tipo de funcionalidad, un aviso: toma como modelo el modo de Alto Contraste de Windows. Es una funcionalidad especializada de Windows, que permite forzar una paleta de colores alta, en todos los aspectos de la interfaz del sistema operativo, incluyendo todo lo que muestra el navegador. Ofrece cuatro temas por defecto, pero además permite al usuario adaptar sus necesidad individuales, especificando sus propios colores.

Tu funcionalidad de modo de alto contraste debería hacer lo mismo. Ofrece un rango de temas con diferentes paletas, y deja que el usuario elija los colores que mejor le funcionen, lo que garantizará que si las opciones que ofreces no son convenientes, las personas seguirán teniendo la capacidad de elegir sus propios colores.

Movimiento del foco

El foco de teclado es la manera en que las personas que confían en métodos de entrada como teclados, dispositivos de control ocular, control por voz, u otros modos de tecnología asistida navegan y utilizan interfaces digitales. Aún cuando puedes hacer ciertas cosas, como usar el atributo autofocus para mover el foco de teclado al primer campo tras la carga de la página, no es algo recomendado.

En el caso de personas que experimenten condiciones de vista bajas o nulas, es el equivalente a ser trasladado de un lugar a otro, de manera abrupta e instantánea. Es una experiencia confusa y desorientadora — de ahí que haya tantos personajes, en películas de ciencia ficción, que vomiten después de ser tele-transportados por primera vez.

Para las personas con problemas de control motriz, mover el foco sin su consentimiento significa transportarlos a un lugar al que no tenían intención de ir. Que sean capaces de salir de esta situación pueden resultar molesto, en el mejor de los casos, y requerir un esfuerzo muy intenso, en el peor. Los sitios web sin elementos de encabezado o puntos de referencia que puedan servir como ayuda a la navegación puede empeorar este efecto.

Todo gira en torno al consentimiento. Mover el foco está bien siempre que la persona haya iniciado, deliberadamente, una acción que lo requiera (cambiando el foco a una ventana modal abierta, por ejemplo). Ya que yo no voy a tu casa y te obligo a clicar en cosas, no muevas el foco de mi teclado, a no ser que específicamente te lo pida.

Dejemos que el navegador se encargue el foco de teclado. Siempre que utilices marcado semántico, los navegadores lo manejarán correctamente. Algunos consejos:

El portapapeles y el historial del navegador

El portapapeles es un espacio sagrado. No evites que las personas puedan copiar en él, y no añadas contenido adicional a lo que copien. Podemos decir lo mismo del historial del navegador y los botones para ir atrás y adelante. No te inmiscuyas en viajes temporales, y deja al navegador que haga su trabajo.

Resumiendo

En el juego “cyberball”, la diversión viene de ser capaz de participar con otras personas, pasándoles la pelota. En la web, la diversión viene de ser capaz de navegar a través de ella. En ambas situaciones, la diversión termina cuando se bloquea a las personas, obligándolas a observar pasivamente desde los márgenes.

Afortunadamente, la web no tiene por qué ser un gran experimento “cyberball”. A pesar de que alterar las funciones de tecnología asistida de los navegadores puede mejorar la experiencia de algunos usuarios, acarrea un gran riesgo de confundir a otros, si esos cambios se hacen ignorando lo mucho que se verán afectados dichos usuarios.

Recuerda que todo está al servicio de lo que importa en última instancia: la creación de experiencias robustas que permitan a la gente usar con éxito tu sitio o aplicación web, sin importar sus capacidades o circunstancias. A veces, la mejor estrategia es dejar las cosas tal y como están.

A List Apart en Español

Desde 1998, la revista de diseño para los que desarrollan…

A List Apart en Español

Desde 1998, la revista de diseño para los que desarrollan sitios web.

Jesús Ricarte

Written by

Front-end developer: UX, performance, clean code, cross-browser, responsive. @alistapartES volunteer translator. I like neither drop-downs nor magic numbers.

A List Apart en Español

Desde 1998, la revista de diseño para los que desarrollan sitios web.