¿Son necesarios los estados flotantes?

¡Voto «sí»! Es cierto que no se debe depender de los eventos de desplazamiento del mouse porque los dispositivos táctiles son tan populares. Sin embargo, Jon parece estar preguntando acerca de los estados de desplazamiento visual en los botones, que es un poco diferente.

Los estados de desplazamiento visual permiten «clickablity» . No debería tener que hacer clic en algo para averiguarlo si se trata de un botón «sa». Los usuarios de equipos portátiles y de escritorio esperan que los elementos «en los que se puede hacer clic» reaccionen al desplazarse, y tener un botón «iluminado» es una pista útil.

Piense en ello como una forma de mejora progresiva . Es útil para quienes saben usar ¡e inofensivo para aquellos que no pueden!

Comentarios

• De hecho, ‘ iría tan lejos como para decir eso en un escritorio entorno de navegación, el usuario casi podría pensar que algo anda mal si nada más que el cursor cambia; nos hemos acostumbrado tanto a los cambios flotantes.
• Ese fue mi argumento / pensamiento más fuerte. ‘ nos hemos acostumbrado tanto que ‘ sería extraño no tenerlo.
• Buen punto en mejora progresiva. Sin embargo, ‘ agrego una cosa más a "You shouldn't have to click something to find out if it's a button."; no debe ‘ no tener que desplazarse sobre algo para averiguar si es ‘ un botón.
• También diría que agregar estados de desplazamiento visual en los botones le da al usuario una retroalimentación positiva por su acción o una sensación de premio mental.
• Habiendo pasado de Windows 7, que dependía en gran medida de los estados de desplazamiento y a menudo se utilizan contornos o paneles para indicar botones, para Windows 8, que a menudo no ninguno en el » Metro » interfaz de estilo, ‘ he encontrado Win 8 increíblemente frustrante de usar a veces. Puede que sea lo que MS quiere que los diseñadores codifiquen para Win 8, pero IMX ‘ es claramente incorrecto hacerlo.

Intento evitar los estados flotantes en el diseño tanto como sea posible. La razón principal de esto es que no tienen sentido en los dispositivos táctiles.

Si bien esto puede parecer que no se aplica cuando no está diseñando para dispositivos móviles, muchas personas usan sus tabletas u otros dispositivos táctiles para navegar por los mismos sitios web o usar las mismas aplicaciones que tradicionalmente solo usaría en una computadora con un mouse.

Al restringiéndose para no usar eventos de desplazamiento, no solo hace que la experiencia sea buena independientemente del dispositivo que esté usando, sino que también facilita la creación de una aplicación nativa específica táctil más adelante.

Comentarios

• Los estados de desplazamiento del mouse siguen siendo útiles en los sitios web para móviles. El CSS :hover se trata efectivamente como :active cuando se ve en un dispositivo móvil. Esto proporciona información visual de que el dedo del usuario ‘ golpeó el objetivo. Esta retroalimentación es mucho más útil en diseños móviles debido al paralaje. A medida que la línea de visión se desvía de la línea perpendicular a la pantalla, aumentan las posibilidades de que se produzca un error al tocar.
• Los estados flotantes de @JoJo no son ‘ detectables en dispositivos móviles y tocar es el equivalente a hacer clic en una computadora.
• John, en mi experiencia viendo sitios que ‘ he diseñado para computadoras de escritorio en dispositivos móviles, creo que JoJo tiene razón al decir que el estado de desplazamiento [a veces] actúa como el estado activo. Digo a veces porque ‘ es un poco quisquilloso y no ‘ t siempre aparece.
• @Jon I ‘ No estoy discutiendo cómo se traduce, estoy ‘ discutiendo sobre cómo tiene sentido traducir. Si el hover se activa, ¿cómo se selecciona? ¿Doble toque? Rompe todo el paradigma táctil.
• @JoJo no siempre, no ‘ no creo que Chrome en Android active el estado flotante en absoluto, y Safari ‘ el estado de desplazamiento del mouse es a menudo incómodo

Con la aparición de El tacto es una forma importante de interactuar con el software, yo diría que las interacciones basadas en el desplazamiento ahora están relegadas a «agradables para tener mejoras», pero nunca deberían ser un requisito para interactuar con el software.

A menudo duplico el estado: hover para: focus, ya que esta es una forma útil de indicar el enfoque para un usuario que solo utiliza el teclado (que se requiere para cumplir con WCAG2 ). Indica que un elemento es interactivo de alguna manera, sin necesidad de un evento de clic que desencadenará una acción que el usuario aún no ha decidido iniciar. Puedes simplemente diseñar para: focus sin: hover, pero en mi opinión, la intención de las dos acciones es la misma y debería tener el mismo efecto visual siempre que sea práctico.

También estoy de acuerdo con el punto de vista de Sam en que los estados flotantes se pueden considerar mejora progresiva . Me gustaría aclarar eso un poco.

Desde una perspectiva móvil primero , los estados de desplazamiento del mouse «no sirven realmente para ningún propósito. Por lo tanto, la interfaz de usuario debería permitir comportamientos en los que se puede hacer clic para objetos en los que se puede hacer clic sin un estado de desplazamiento como botones).

Si puede admitir esa noción en un dispositivo móvil, esa misma noción se admitirá en dispositivos de escritorio / portátiles incluso antes que se introduzcan los estados de desplazamiento.

Incluir un estado de desplazamiento en los dispositivos que sí admiten el desplazamiento (portátiles, de escritorio, etc.) confirmará la percepción ya existente del usuario de que se puede hacer clic en un elemento específico de la interfaz de usuario.

Entonces, para recapitular:

1. Cree elementos de IU en los que se pueda hacer clic, de modo que ofrezcan un comportamiento en el que se pueda hacer clic para cualquier dispositivo.
2. Use estados de desplazamiento en dispositivos que admitan desplazarse hacia respalde aún más la noción de que se puede hacer clic en un elemento.

+1 a Sam por mencionar la mejora progresiva.

Recomendaría usar estados flotantes si brindan alguna utilidad que mejore la interfaz de usuario, pero nunca deberían ser necesarios para completar una tarea.

Por ejemplo, usarlos en una página de lista de productos para proporcionar un poco de información sobre el artículo al pasar el cursor sobre la imagen, antes de que el usuario navegue. Esa información también debería estar disponible en la página del producto. Por lo tanto, no resta valor experiencia del usuario de la pantalla táctil, pero agrega cierta utilidad adicional para aquellos que sí lo ven. 🙂

El hecho de que esté diseñando tanto para escritorio como para dispositivos móviles no significa que los diseños deban ser los mismo. La interacción a la que los usuarios de dispositivos móviles pueden estar acostumbrados puede no ser evidente para los usuarios de escritorio.

Por ejemplo, tarjetas blancas con un signo de intercalación en el lado derecho. Para los usuarios de dispositivos móviles, esto es obviamente algo en lo que pueden tocar. Para los usuarios de escritorio, no tanto (especialmente si la tarjeta es más ancha en el escritorio), pero cuando se desplazan y ven un estado de desplazamiento, de repente es obvio que se puede hacer clic en él.

Especialmente ahora que la animación se está volviendo cada vez más común, un estado de desplazamiento es una animación básica que les da a los usuarios comentarios de que están haciendo lo que pretendían hacer.

No usar un estado de desplazamiento para el escritorio es perezoso y entristece a la gente.

No creo que los estados :hover sean esenciales; Los elementos de la interfaz de usuario en el escritorio se las han arreglado para siempre y los objetos claramente diseñados para permitir hacer clic (como el botón «Publicar tu respuesta» aquí en UX.SE) funcionan bien en mi propia experiencia. Eso no quiere decir que no sea útil ; solo que no es esencial.

Sí, sin embargo, considero :focus y especialmente :active los estados esenciales; el Este último especialmente es uno que veo ignorado en demasiados sitios. Un estado activo claro ayuda al usuario a saber que el clic del botón se registró de inmediato ( que es extremadamente importante para ayudar a los usuarios a sentir que están manipulando directamente un objeto en la interfaz de usuario ). Los controles del sistema, como los botones y los menús, también han hecho que ese estado sea el esperado, lo que hace que olvidarlos sea aún más imperdonable.

Sugeriría que los estados flotantes proporcionen comentarios positivos a la expectativa del usuario de que el elemento en cuestión sea interactivo, eliminando así la posibilidad de más sentimientos negativos de duda y ambigüedad .

Los diseños ofrecen una serie de señales de que un elemento es interactivo: forma, tamaño, posición, color, subrayado, etc. Los diferentes usuarios necesitarán una señal diferente. s, y quizás el efecto acumulativo de un número diferente de señales, para percibir (y sentirse seguro de que) el elemento es interactivo. Cambiar un elemento al pasar el mouse por encima es una oportunidad para ofrecer más pistas.

La mayoría (si no todos) de los navegadores entregan señales al pasar el mouse por defecto, cambiando el cursor por un puntero. Por supuesto, tenemos control sobre esto y podríamos eliminar el estado de desplazamiento al eliminar este efecto. Pero imagino que para la mayoría de nosotros (tómese un momento para imaginarlo) esto introduciría una duda significativa en nuestra experiencia de navegación. Los navegadores (y luego los diseñadores) han sentado un precedente para las señales adicionales al pasar el mouse que no entregar señales sería una contradicción significativa de cualquier señal percibida previamente de que el elemento es interactivo.

Eliminación de la configuración predeterminada del navegador La señal es, por tanto, un ejemplo útil del valor del estado de desplazamiento. Para mí, la pregunta no es si las señales visuales de interactividad al desplazarse son valiosas, sino cuáles y cuántas señales son óptimas.

Hay algunas precedentes familiares útiles, pero la respuesta a esta pregunta dependerá de la aplicación y del público objetivo.

Sugeriría desplazarse cuando no hay un ícono en el botón. Si supone que hay un ícono colorido en el botón esa vez, no es esencial darle estado de desplazamiento al botón. Por ejemplo: regístrese usando el botón de Google.

Los elementos emergentes son imprescindibles para todos los sitios web que desean una buena respuesta en línea. He utilizado algunos sitios web que abandoné el estado de desplazamiento en mi computadora portátil, y fue muy frustrante.Cualquier buen diseñador sabe que las personas en línea tienen prisa por encontrar lo que buscan, y si un botón no le dirá si es uno o no y debe abrirlo en una nueva pestaña para averiguarlo, es un gran problema. ¡Fallo!

Correcto, no es necesario colocar el cursor en dispositivos móviles. Pero siempre puede desactivarlos para dispositivos móviles. Además, no olvidemos que los botones para dispositivos móviles deben ser mucho más grandes que los que están en línea. Y, ¿no se crean en dos hojas de estilo diferentes?

Comentarios

• Para los sitios web, cambiar el estilo del cursor a una mano (o equivalente) es el efecto de desplazamiento sobre el que actúo.
• Creo que todavía debe mostrarse flotando, solo una mano confunde al usuario, ya que queremos que la web funcione de la manera más realista posible, y cuando hacemos clic en las cosas, si son de la vida real, se reflejan. Además, desde el punto de vista de un estratega ‘ s, le gustaría que su sitio web fuera más seguro y ‘ es un hecho que la mayoría Los sitios web fraudulentos no ‘ t se molestan en instalar el efecto de desplazamiento; por lo tanto, cuando los usuarios ‘ no ven el efecto, comienzan a sentirse raros por dentro.