El ratón y el teclado están a kilómetros de distancia

¿Parecen tan cercanos verdad? Ahí en tu mesa uno al lado del otro, el ratón y el teclado. Esa sensación de cercanía es una trampa a la hora de diseñar páginas web. El ratón y el teclado son dos elementos de uso radicalmente distintos. Sólo uno de ellos es el rey a la hora de navegar por internet: el Ratón. Click, click, click. Así navegan los usuarios por internet. Para muchos una introducción de texto es una barrera enorme.

Abstente siempre que sea posible de pedir a los usuarios que utilicen el teclado. Al menos da opciones de navegación alternativa con el ratón. Si es necesario utilizar el teclado, evita que el usuario tenga estar cambiando del ratón al teclado varias veces para cumplir una tarea. Si no eres Google o Amazon, procura no pedir nunca al usuario que introduzca texto.

 

Cada vez que miro una propuesta de diseño para una página hago el ejercicio mental de pensar cómo sería si el ratón estuviese en una habitación y el teclado en otra, ¿usarías esa página o sería demasiado esfuerzo?. Imagina que tienes que hacer un esfuerzo cada vez que una página te pide cambiar del ratón al teclado ¿lo harías? ¿Podrías utilizar la página sin teclado?

Para mucha gente utilizar un teclado es un esfuerzo enorme, no saben donde están las teclas y tienen que ir mirando letra a letra para escribir hasta las palabras más sencillas. Ahórrales el esfuerzo y te visitarán más y más a menudo.

Los ratones son de Venus, los teclados de Marte. Diseña tu web como si el ratón y el teclado viviesen en dos planetas distintos. Diseña como si cada vez que cambiases la mano del ratón al teclado alguien te pinchase la mano con un tenedor. Siempre que puedas:

• vigila como tus usuarios utilizan el botón de "enter" en tu página ¿debería ser para salto de párrafo o para enviar información? es super molesto dar un salto de párrafo y descubrir que has enviado una información a medias

• en los formularios cuida que el tabulador vaya de un campo al siguiente en un orden claro y lógico, es molesto utilizar el tabulador si va saltando de un lado a otro de la página

• procura evitar los botones de "enviar", "submit", etc. cuando utilizas el ratón es más cómodo siempre que sea posible pinchar y continuar sin más

• para rellenar formularios procura dar opciones para elegir en vez de pedir rellenar con el teclado, es más fácil seleccionar de una tabla con el ratón que teclear

• si el usuario tiene que rellenar texto con teclado, entonces ponle todos los campos donde tenga que rellenar texto juntos, de esa forma sólo tendrá que abandonar el ratón una sola vez

Comments

[Publicado por: Anonimo]

Hola Jesus,

me surge la siguiente duda, ante un formulario donde tenga que indicar mi año de nacimiento, o la fecha de expedicion del carnet de conducir, es preferible mostrar un select con tropocientos mil años, antes que un campo de texto?

[Publicado por: Anonimo]

ah!

No he entendido muy bien esto:
" procura evitar los botones de "enviar", "submit", etc. cuando utilizas el ratón es más cómodo siempre que sea posible pinchar y continuar sin más "

Lo puedes contextualizar?

[Publicado por: luigix]

Sin duda un buen consejo a tener en cuenta para futuros diseños de webs.

No lo había visto con este punto de vista, pero sin duda lo veo como algo muy importante.

[Publicado por: Luis Villa]

Sería menos categórico ;)

En mi opinión, la opción entre el uso del teclado y el ratón, depende del contexto, perfil del usuario y tipo de uso que se le quiera dar al producto.

Los usuarios avanzados suelen utilizar más el teclado, los novatos, les cuesta hacer transición de raton a teclado.

Cuando es una web de transaccionalidad, o nos orientamos a productividad y entrada de datos, sin teclado no podemos hacer nada. (Me atrevería a decir que el ratón puede sobrar).

Por ejemplo, en muchos proyectos de banca, telco etc donde el entorno usado era host, el paso a la web era un paso atrás por un lado, en diseño (se introducían elementos no estándar y "creativos" que perjudicaban notablemente la productividad de los usuarios) y por otro, en interacción: duplicaba el tiempo de realización de tareas, y por consiguiente, frustración, estrés y mal humor. Esto lo pagaba el empleado, y el cliente.

Otra cosa es que optimices el uso del teclado:

Por ejemplo, con automatizaciones, preconfigurando campos: como por ejemplo, tipo de vía: es necesario este dato para localizar una dirección? No podemos normalizarla automáticamente y descargar al usuario? En caso negativo, si sabemos que el 80% de las altas de direcciones, son Tipo "Calle", ¿por qué no ponerlo preseleccionado en vez de un "Seleccione tipo de vía"? Lo mismo con "Seleccione tipo de identificador" frente a tener preseleccionado "DNI" por ser lo más frecuente.

Otro ejemplo: hace años se pusieron de moda los minicalendarios para asistir en la selección de rangos de fechas. Esto era útil cuando te mueves entre rangos de fechas y próximas en las que necesitas saber los días de la semana. Pero hubo sitios que decidieron que era el formato para marcar fechas de nacimiento para evitar el uso del teclado (y porque quedaba más moderno). El resultado, marcar una fecha suponía infinitos clics.

En mi opinión, parte de los problemas, de los que se quejaban los antiguos usuarios de interfaz texto, es que la web ha facilitado que nos volvamos creativos e inventemos patrones de interacción incoherentes. En muchos casos hemos reventado el modelo que los usuarios tienen de los formularios. De ahí, tantas confusiones y errores.

Pero creo que esta es una de las gracias de la web y lo que hace que avance y todo el mundo la sienta como suya: todos podemos aportar, descubrir y aprender nuevas cosas de los demás.

Saludos!

[Publicado por: Nico]

Una cosa más que no sabía aunque la tenía delante. Muy buenas tanto la información como la forma de explicarla.

Tampoco yo entiendo lo del botón de enviar.

[Publicado por: Homófobo]

joder tio eres un genio

[Publicado por: Marcos]

Aunque tienes parte de razón, estás idealizando.

Obvias al considerable grupo de navegantes que tienen algún tipo de discapacidad motriz o visual y que les impide el uso adecuado de una interfaz como el ratón.

Casos como estos provocan que se deban tener en cuenta unos aspectos básicos de usabilidad y accesibilidad.

Sin querer molestar pero, por ejemplo, una falla de accesibilidad en este blog es el sidebar, que goza de un contraste letra-fondo bastante bajo. A mí me cuesta leerlo cómodamente :-)

Saludos.

[Publicado por: nacho]

Depende del contexto de uso, depende del perfil de usuario, depende de la aplicación, depende de la tarea...

¿Para el usuario medio (si es que existe) del web? Bueno en ese caso casi seguro que sí, pero siempre depende...

[Publicado por: Albert Costa]

Tengo una pequeña discordancia con el tema. Estoy de acuerdo que durante la navegación hacer saltos entre el teclado y el ratón es malo. No obstante, por lo general casi todos entramos a la web con el teclado, tecleando una URL, y la mayoría de usuarios una vez dentro de cualquier pagina piensa/dice "¿y ahora donde tengo que poner lo que quiero?".

Ejemplifico:

Idealista una vez entras en la web saltas directamente al ratón i de ahí no te mueves si no es para rellenar un formulario.
Pero para buscar pisos en Barcelona tengo que hacer X clicks antes no llego al listado. Mi madre que no es habilidosa con el ratón agradecería mucho que tan solo entrar en la web quedara seleccionada por defecto una caja donde pusieras tu idea básica de búsqueda, y a partir de ahí, una vez ya has especificado el que, usar unos buenos filtros mediante ratón.

Por otro lado tenemos google, que están evolucionando exactamente hacia lo que comento. Tecleas la web y sin tener que hacer nada ya tienes el OnFocus a la caja de búsqueda, donde tecleas y te aparecen resultados. Una vez se te muestran los resultados, por naturaleza ya vamos al ratón para poder hacer scroll, usar el paginado, o incluso ahora ya usan filtros laterales para poder segmentar mejor la búsqueda.

Así que, mi conclusión Jesús, es que forzar al usuario a hacer cambios evidentemente no es bueno, pero aprovechar cuando teclea la url para pedirle directamente que necesita, ahorra a nuestro usuario los 400 clicks que hay que dar en los portales inmobiliarios para llegar a lo que quiero.

[Publicado por: Jesus Encinar]

Gracias a todos por los comentarios. Ya sabéis que es difícil comentar todos los matices de un tema en un post y es fácil pecar de describir algo en blanco y negro cuando hay muchos grises. Pero para expresar un punto claramente hay que eliminar detalles y concentrarse en la idea central.

Para mi la idea central es que para la mayoría de sites que no gobiernan internet (esto es, todos menos Google), más nos vale concentrarnos en la navegación con el ratón si quieres llegar a tener éxito.

En cuanto a qué quiero decir con "cuando utilizas el ratón es más cómodo siempre que sea posible pinchar y continuar sin más" me refiero a que mucha gente a la hora de utilizar un ratón, cuando pincha sobre algo, espera que ese acto en sí mismo cumpla una función y la complete. Que la página avance cuando tu has pinchado sobre algo.

He visto incontables veces usuarios pinchar sobre un enlace, botón, check o lo que sea y quedarse esperando que la página haga algo. La página ni se mueve porque está esperando un "submit", el usuario no ve acción y piensa... "esta página ha fallado"

[Publicado por: Laura]

Demasiado B/N. Evidentemente que hay que pensar en cómo el usuario va a interactuar con el site pero de ahí a llegar a ese extremo me parece excesivo.

Por otro lado

"Para mucha gente utilizar un teclado es un esfuerzo enorme, no saben donde están las teclas y tienen que ir mirando letra a letra para escribir hasta las palabras más sencillas."

en pocos años será un grupo de usuarios tan reducido que habrá que tenerlo en cuenta pero no deberían condicionar el diseño de un site.

[Publicado por: jorge]

en mi opinión de usuario habitual, los cada vez más usados ordenadores portátiles acortan las distancias entre uno y otro ya que sustituyen el ratón por un pad y la tecla enter, por su tamaño y uso frecuente, quedan más cerca.