De modo que los navegadores ofrecen todo lo que los usuarios necesitan: una lista

Kip Williams, profesor de psicología en la Universidad de Purdue, realizó un fascinante experimento llamado llamado "Cyberball". En su experimento, una persona de prueba y otros dos participantes jugaron un juego de computadora con Fang. En un momento determinado, el sujeto fue excluido del juego y solo tuvo que ver expirar el reloj.

Artículo a continuación

La experiencia ha demostrado que el nivel de ira y tristeza autoinformado aumenta y el grado de disminuye las cuatro necesidades . La versión digital del experimento produjo resultados que coincidieron con los resultados de el físico original lo que significa que estos sentimientos ocurrieron independientemente del contexto.

Después de que el juego terminó, se le dijo al sujeto que el otro estaba afectado. Los participantes eran robots, no otros participantes humanos. Curiosamente, la divulgación de competidores automatizados no disminuyó los sentimientos negativos informados. De hecho, intensificó el sentimiento de ira y al mismo tiempo redujo el sentimiento de fuerza de voluntad y / o autorregulación de los participantes. En otras palabras, las personas que se sienten rechazadas por un sistema digital se sienten heridas y reducen su sentido de autonomía, a pesar de que creen que nadie más es directamente responsable de ello.

Entonces, ¿qué tiene eso que ver con los navegadores? # section2

Cualquier adaptación a la apariencia de las características que puedes manipular con los navegadores son una tirada de dados en la que algunos juegan a expensas de alienar a otros para el deleite de algunos.

Cuando usa un navegador para navegar por la Web, tiene muchas similitudes. hasta que no haya más. La mayoría de las veces, saltamos de una página a otra, de un sitio a otro, haciendo clic en enlaces, presionando botones, viendo videos, llenando formularios, escribiendo mensajes, etc. Pero de vez en cuando nos encontramos con algo nuevo y novedoso para nosotros. pausa para averiguar qué está pasando.

Cada sitio web y aplicación web es una experiencia independiente con sus propias ideas sobre cómo deberían verse y comportarse las cosas. Algunos están más cerca el uno del otro, pero cada uno debe tener conocimiento sobre cómo operar la interfaz de usuario hasta cierto punto.

Algunos navegadores también permiten cambiar partes de su funcionalidad y apariencia, lo que significa que, a diferencia de los sitios web, pueden ocurrir desviaciones inesperadas. Descompondremos algunos de los matices detrás de algunas de estas características, y sobre todo por qué la mayoría de ellos es mejor dejarlos solos.

En todos los principales navegadores de escritorio, puede presionar la tecla Inicio en el teclado para saltar a la parte superior de la página. Para algunas implementaciones de barra de desplazamiento, puede hacer clic en la parte superior de la barra de desplazamiento para hacer lo mismo. En algunos navegadores también puede ingresar Comando + Arriba (macOS) / Ctrl + Arriba (Windows). Por ejemplo, los usuarios que usan tecnologías de asistencia, como lectores de pantalla, pueden navegar de la misma manera con Puntos de referencia de banner (siempre que estén correctamente declarados en el HTML del sitio).

Sin embargo, no existe una ruta fácilmente reconocible para cada dispositivo. Para activar esta función: Muchas computadoras portátiles no tienen la tecla de inicio en su teclado. La función "Toca el reloj para saltar a la cima" en iOS es difícil de descubrir y puede ser sorprendente y frustrante si se activa accidentalmente. Necesita extensiones de navegador especializadas para recrear técnicas de navegación para lectores de pantalla.

Una solución de interfaz de usuario de borde largo comúnmente implementada es el botón Desplazar hacia arriba. A menudo se muestra en la esquina inferior derecha de la pantalla. Si habilita este control, el usuario será llevado a la parte superior de la página, independientemente de qué tan lejos se haya desplazado.

Si su sitio contiene una gran cantidad de contenido por página, puede ser útil examinar este patrón de IU. Vea análisis y / o ejecute pruebas de usuario para ver dónde y con qué frecuencia se utiliza esta función. Si se usa con demasiada frecuencia, puede valer la pena echar un vistazo a su arquitectura de información y estrategia de contenido.

Tres cosas que me gustan del patrón de desplazamiento hacia arriba son:

• Su funcionalidad es bastante obvia (especialmente si está etiquetada correctamente).
• Siempre que esté bien construido, puede proporcionar un objetivo táctil decente en un área amigable para el pulgar. De Consideraciones de control del motor su objetivo táctil puede ser superior a las barras de desplazamiento estrechas o barras de estado, lo que puede frustrar objetivos pequeños.
• El comportamiento de desplazamiento existente no se cambia ni se elimina, solo se amplifica. Si alguien está acostumbrado a desplazarse hacia arriba, no anula ni interrumpe esto.

Si implementa este tipo de funcionalidad, tengo cuatro solicitudes para que la experiencia funcione para todos. (I) The Library Smooth Scroll es un punto de partida útil).

• Solicitudes de usuarios para restricciones de movimiento se tienen en cuenta. El efecto de desplazamiento dramático de golpear desde la parte inferior de la página hacia arriba puede ser un disparador vestibular una situación en la que el sistema que controla el sentido de su cuerpo para la posición física y la orientación en el mundo se altera y las cosas causa dolores de cabeza, náuseas, mareos, migrañas y pérdida auditiva.
• Asegúrese de mover el foco del teclado a la parte superior del documento para reflejar la apariencia visual. La aplicación de esta práctica mejorará las experiencias de todos los usuarios . De lo contrario, hacer clic en la pestaña hace que el usuario se desplace hacia arriba hasta el primer elemento interactivo que sigue donde estaba el foco antes de que se activara el botón de desplazamiento.
• Asegúrese de que el botón no inutilice ningún otro contenido ocultándolo. Tenga en cuenta cuando el navegador esté ampliado, no solo en su estado predeterminado.
• Presta atención a otros elementos con una posición fija. He visto muchos sitios que también tienen un chatbot o un botón de acción pendiente que compiten por vivir en la misma habitación.

Si tienes la edad suficiente para recordar, el diseño de las barras de desplazamiento en tu sitio solía formarse antes que de moda. Internet Explorer hizo de esta personalización un conjunto de características propietarias . ¡En el mejor de los casos, se veían geniales! Si el diseñador y el desarrollador están bien informados y están orientados a los detalles, obtendrá algo que parece una extensión natural del resto del sitio.

Sin embargo, había muchas cosas en juego para un diseño de alta calidad: las barras de desplazamiento son parte de la interfaz de usuario de una aplicación y no de un sitio web. 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 es informada y amplificada por implementaciones similares en otros lugares. Por esta razón, en la mayoría de los hogares, puede encender un interruptor de pared y asegurarse de que la luz esté encendida en lugar de descargar el inodoro.

Si bien las barras de desplazamiento tienen ligeras diferencias visuales entre los sistemas operativos (y versiones del sistema operativo ), son aparentemente consistentes en su función. Las barras de desplazamiento también son internamente consistentes, ya que cada ventana y programa en el sistema operativo que necesita desplazarse tiene el mismo tratamiento de barra de desplazamiento.

Si personaliza los colores de la barra de desplazamiento de su sitio para personas menos avanzadas, otro aspecto de la interfaz ha cambiado sin cambios. Advertencia o instrucciones de reinicio. Si el usuario ya está confundido acerca de cómo funcionan las cosas en la pantalla, le resulta menos familiar aferrarse a las cosas estables y confiables.

Puede leer los ojos al leer esto, pero me gustaría que leyera en su lugar este increíble artículo de Jennifer Morrow . En él, describe cómo realiza una prueba de usuario de guerrilla en un centro comercial para descarrilar por completo la sesión cuando descubre a alguien que nunca antes ha usado una computadora.

Lo que descubre es tan importante como impactante. La conclusión es que algunas personas (incluso aquellas que han usado una computadora previamente) no entienden el matiz de los diferentes "niveles" que navegan para operar una computadora: el hardware, el sistema operativo, la computadora El navegador del sistema operativo instalado, el sitio web que muestra el navegador, las modalidades y declaraciones de divulgación del sitio web, etc. Para ellos, la experiencia es poco profunda.

No deberíamos esperar que estos usuarios hagan malabarismos con este tipo de sobrecarga cognitiva. Este tipo de abstracciones están diseñadas para corresponder a los objetos reales para que las personas puedan obtener lo que desean de un sistema digital sin tener que ser un programador. Agregar complejidad innecesaria debilita estas metáforas y brinda a los usuarios menos puntos de referencia en los que confiar.

Recuerda el experimento del cyberball. Si un usuario ya está en un estado emocional, nuestra barra de desplazamiento personalizada mal diseñada puede ser el momento en que deja de intentar obtener lo que quiere y rechaza por completo el sistema. [19659005] Si bien el artículo fue escrito por Morrow en 2011, ahora es tan actual como lo era entonces. Cada vez más personas en todo el mundo utilizan Internet, y cada vez se digitalizan más servicios que son indispensables para la vida diaria. Depende de nosotros, como diseñadores y desarrolladores responsables, garantizar que todos, independientemente del dispositivo, circunstancia o capacidad, se sientan bienvenidos.

Además de la tarea innecesaria de consistencia externa, existe el problema del estilo de barra de desplazamiento personalizado, que puede no existir. suficiente contraste de color . Los colores demasiado brillantes pueden hacer que una persona con visión deficiente no perciba el mecanismo de desplazamiento de un sitio web y, por lo tanto, no funcione.

Este artículo no cubre los problemas con los que están lidiando. Implementaciones de barra de desplazamiento personalizadas donde las barras de desplazamiento nativas no tienen CSS, sino que se reemplazan por una solución de JavaScript. Confía en mí cuando digo que no he implementado ninguno que pueda restaurar con éxito y fiabilidad todas las características y funcionalidades de todos los dispositivos sistemas operativos, navegadores y modos de navegador . 19659005] En mi opinión? No cambie la apariencia predeterminada de las barras de desplazamiento de un sistema operativo. Use este tiempo para trabajar en otra cosa, como buscar y solucionar problemas de contraste de color.

La principal preocupación al cambiar el comportamiento de desplazamiento es Consentimiento: asume un comportamiento externo coherente en todo el sistema y de repente cambia sin permiso. El término Scrolljacking fue acuñado para describir esta práctica. No debe confundirse con Scrollytelling para un tratamiento más considerado del comportamiento de desplazamiento que tenga en cuenta la configuración de desplazamiento del sistema operativo.

Cambiar el comportamiento de desplazamiento en su sitio web o aplicación web puede ser inconsistente con ciertas situaciones expresadas preferencias. Para algunas personas es solo una molestia. Para las personas con problemas de control del motor, podría ser difícil moverse a través de un sitio de trabajo. En algunos casos extremos, la discrepancia no anunciada entre el desplazamiento y la distancia recorrida también puede ser una causa vestibular. Otra consideración es si su comportamiento de desplazamiento modificado bloquea accidentalmente a las personas que no usan ratones, toques o trackpads para desplazarse.

En general, creo que Robin Rendle lo dijo mejor :

Scrolljacking, como diré sarcásticamente y honestamente, es un fracaso del primer objetivo del diseñador web. Ataca un patrón estandarizado y codiciosamente toma el control de la entrada del usuario.

Otra característica del sistema operativo que podemos diseñar en el navegador es el texto resaltado. Similar a las barras de desplazamiento, este es un elemento de interfaz compartido por todas las aplicaciones en el sistema operativo, no solo el navegador.

Romper la consistencia externa del color de resaltado del sistema operativo tiene muchas de las mismas preocupaciones que las barras de desplazamiento con estilo, es decir, cambiar el comportamiento esperado de los elementos que funcionan de manera confiable en todas partes. Esto puede interferir potencialmente con la orientación y alienar y rechazar las preferencias expresas de otras personas.

Algunas personas enfatizan el texto cuando leen. Si su estilo de resaltado personalizado tiene una baja relación de contraste entre el color del texto resaltado y el color de fondo del texto resaltado, es posible que la persona que lee su sitio web o aplicación web no pueda ver el texto resaltado. El efecto hace que el texto aparentemente desaparezca a medida que lo lee.

Otros simplemente no se preocupan por tus sensaciones estéticas. Tanto en macOS como en Windows, puede establecer un color de resaltado personalizado. En un escenario en el que alguien ha establecido intencionalmente una preferencia distinta de la predeterminada del sistema, un color de resaltado diseñado puede anular las especificaciones especificadas.

Para mí, los riesgos potenciales superan con creces la vanidad de un estilo de iluminación a medida.

Muchas personas cambian el tamaño del texto para satisfacer sus necesidades. Y eso está bien. Queremos que las personas puedan leer y responder a nuestro contenido, independientemente de las circunstancias en las que se encuentren.

Para el problema de "texto demasiado pequeño", algunos diseñadores están recurriendo a widgets de cambio de tamaño de texto, un patrón de IU personalizado que permite a una persona desplazarse a través de un conjunto de valores de tamaño de fuente CSS preestablecidos . Los widgets de cambio de tamaño de texto a menudo se usan en áreas ricas en texto junto con diseños complejos de varias columnas. Los sitios de noticias son un ejemplo común.

Antes de hablar sobre los widgets para cambiar el tamaño del texto, me gustaría preguntarle: si encuentra que su sitio necesita un widget especial para administrar su tamaño de texto, simplemente elija la forma más fácil y Aumente su tamaño de texto base ?

Al igual que con muchas preocupaciones sobre la accesibilidad solicitar un tamaño de letra más grande no es necesariamente una indicación de una discapacidad permanente . Esto es a menudo engorroso, z. Por ejemplo, si muestra un sitio web en el proyector de su oficina.

Los navegadores permiten a los usuarios cambiar su tamaño de fuente predeterminado preferido y cambiar el tamaño del texto en los sitios web. Los navegadores dominan excelentemente esta configuración cuando escribe CSS que utiliza los valores sin línea de altura de línea y relativo unidades de tamaño de fuente .

Algunos diseñadores pueden encontrar que otorgar esta libertad a los usuarios perjudica su marca prevista. Los buenos diseñadores saben que las marcas no solo se ven como se ven. Se trata de implementar el diseño original en el navegador y luego usando las capacidades del navegador para servir mejor a la persona que lo usa. Incluso si se ajustan cosas como el tamaño de fuente, una marca fuerte se mostrará con la facilidad de sus flujos de trabajo de usuario, la calidad de su tipografía y paleta, la fuerza de su texto, etc.

Desafortunadamente, los widgets personalizados para la personalización del tamaño del texto del navegador carecen de un enfoque universal. Si confía en la configuración de texto del navegador, esto funciona, de acuerdo con los mismos controles, gestos y métodos abreviados de teclado, para cada página en cada sitio, incluso bajo condiciones no ideales . No necesita escribir y mantener ningún código adicional, hacer pruebas de regresión o escribir una copia para decirle al usuario dónde encontrar el widget de cambio de tamaño de texto y cómo usarlo.

La consistencia del comportamiento es increíblemente importante. Cada vez que se cambia la configuración, el tamaño del texto del navegador se aplica proporcionalmente a todo el texto de la página. Esta configuración se mantendrá durante la próxima visita. Esto no lo hace ningún widget de cambio de tamaño de texto personalizado, ni se cambia el tamaño de todo el contenido a el nivel especificado en la Política de Accesibilidad al Contenido en la Web .

Sujetos de alto contraste # sección8

Cuando digo temas de alto contraste, no hablo de cosas como un modo oscuro . Estoy hablando de una reacción a las personas que informan que necesitan cambiar los colores de su sitio web o aplicación web para que sean más accesibles visualmente para ellos.

De manera similar a los controles de cambio de tamaño de texto, los diseños que desea implementar Valores de color de contraste más altos son confusos: si se toma el tiempo para crear uno, ¿por qué no solo corrige los valores de contraste insuficientes en su CSS normal? Efectivo Gestión de temas en CSS es una cuestión complicada que requiere muchos recursos incluso en circunstancias ideales.

La mayoría de los temas de alto contraste proporcionados por el sitio son estáticos porque el diseñador o desarrollador ha tomado decisiones sobre los valores de color a utilizar, lo que puede ser un problema. Es bien sabido que demasiado contraste es un desencadenante para cosas como las migrañas y puede dificultar la concentración de los usuarios con algunas formas de trastorno por déficit de atención e hiperactividad (TDAH).

El acertijo de contraste nos lleva a un problema difícil Cuando se trata de accesibilidad, hay que soportarlo: lo que funciona para una persona puede obstaculizar a otra. Por eso es importante mantener las cosas abiertas e interoperables. Deje el control final al usuario final para ayudarlo a decidir cómo interactuar mejor con el contenido.

Si desea proporcionar este tipo de función, tenga en cuenta lo siguiente: Modele el modo de alto contraste de Windows . Es una característica especial de Windows que permite a una persona aplicar una paleta de colores de alta calidad para todos los aspectos de la interfaz de usuario del sistema operativo, incluidos los elementos que muestra el navegador. Ofrece cuatro temas listos para usar, pero también permite al usuario satisfacer sus necesidades individuales especificando sus propios colores.

La función de modo de alto contraste debería hacer lo mismo. Ofrezca una variedad de temas con diferentes paletas y permita que el usuario elija los colores que más le convengan. Esto garantiza que los usuarios podrán seleccionarse a sí mismos cuando sus ofertas no funcionen a través de entradas como teclados, conmutadores, entradas de voz, seguimiento ocular y otras formas de tecnología de asistencia para navegar y operar interfaces digitales. Por ejemplo, puede usar el atributo autofocus para mover el foco del teclado a la primera entrada en una página después de cargarlo, pero esto no es recomendable.

Para las personas con visión deficiente y visión borrosa, es equivalente a ser transferido abrupta e instantáneamente a un nuevo lugar. Es una experiencia confusa y confusa: hay una razón por la cual las películas de ciencia ficción tienen mucho que ofrecer a quienes vomitan después de ser teletransportados por primera vez.

Para las personas con inquietudes sobre el control del motor, mover el foco sin su permiso significa que podrían ser transportados a un lugar que no querían. La excavación se vuelve molesta en el mejor de los casos y, en el peor de los casos, costosa. Los sitios web sin elementos de encabezado o marcadores de documentos como ayudas de navegación pueden reforzar este efecto.

Esto se trata de aprobación. Mover el foco está bien siempre que una persona inicie intencionalmente una acción que lo requiera ( Cambiar el foco a un modo abierto por ejemplo). No vengo a tu casa y te obligo a hacer clic. Por lo tanto, no mueva el foco de mi teclado a menos que le pida específicamente que lo haga.

Deje que el navegador maneje el foco del teclado. Siempre que use marcado semántico, los navegadores lo hacen bien. Algunos consejos:

El portapapeles y el historial del navegador # section10

El portapapeles es un espacio sagrado. No evite que las personas les copien objetos y no adjunte contenido adicional a lo que están copiando. Lo mismo se aplica al historial de navegación y a los botones Anterior y Siguiente. No juegues con viajes en el tiempo y simplemente deja que el navegador haga su trabajo.

En la sección de juegos de Cyberball, la diversión es poder participar con otros y dar la pelota de un lado a otro. La diversión hace que navegar por la web. En ambas situaciones, la diversión se detiene cuando la gente queda bloqueada y obligada a mirar pasivamente desde la banca.

Afortunadamente, la Web no tiene que ser un solo experimento largo de cyberball. Cambiar las funciones potentes, de asistencia y amigables con la tecnología de los navegadores puede mejorar la experiencia para algunos usuarios. Sin embargo, conlleva un alto riesgo de alienar a otros cuando se realizan cambios que no se conocen en qué medida se ven afectados.

Tenga en cuenta que todo esto está al servicio de lo que en última instancia es crítico: crear experiencias sólidas que permitan a los usuarios utilizar con éxito su sitio web o aplicación web, independientemente de su capacidad o circunstancias. A veces la mejor estrategia es dejar que las cosas sucedan.