10 consejos para crear una web más utilizable
Ya sea su portafolio, un blog, un sitio web de marketing o una colección de juegos, todos queremos atraer visitantes a nuestro sitio web y asegurarnos de que tengan una experiencia agradable.
La usabilidad mide el nivel de experiencia de un usuario y se puede caracterizar por la facilidad con la que se puede completar una tarea determinada; ya sea con conocimientos previos o haciendo que el usuario aprenda una nueva forma de interactuar. Creo que Jakob Nielson probablemente lo explicó mejor cuando dijo:
“La usabilidad es un atributo de calidad que evalúa la facilidad de uso de las interfaces de usuario. La palabra «usabilidad» también se refiere a métodos para mejorar la facilidad de uso durante el proceso de diseño «.
En este artículo espero darte alguna forma de lista de verificación de usabilidad, que cubre temas desde el diseño de formularios hasta sencillos consejos de navegación que puede aplicar a cualquier proyecto web.
1. Creando navegación activa
Dejar que el usuario sepa en qué sección del sitio se encuentra o en qué categoría navega puede dar un gran impulso a la usabilidad de cualquier sitio. La navegación activa es uno de esos conceptos de usabilidad que son casi automáticos en este punto. Y todos tenemos nuestra propia forma de crearlo.
La situación ideal para crear una navegación activa es hacerlo del lado del servidor, ya que reduce enormemente la cantidad de HTML y CSS necesarios. Si generar un servidor de estado activo no es una opción, manipulando el elemento de tu cuerpo dar estilo a cada elemento de navegación directamente también es una buena elección.
Como tercera opción, puede crear navegación activa con JavaScript.
Su estado de navegación activo siempre debe ser diferente de su estado de desplazamiento.
2. Etiquetas y botones en los que se puede hacer clic
Cuando se toma el tiempo para marcar un formulario correctamente, un usuario puede hacer clic en un label para activar el elemento de formulario asociado y hay una manera muy fácil de mostrarlo. Esta es una gran funcionalidad integrada en HTML. Desafortunadamente, muy pocos usuarios conocen esta joya natural de la interfaz de usuario.
Hacerle saber al usuario que se puede hacer clic en una etiqueta solo requiere una línea o dos de CSS (dependiendo de cómo la escriba) para cambiar el cursor de la inserción de texto predeterminada a un puntero más fácil de hacer clic y amigable.
A estas alturas, todos saben que se puede hacer clic en los botones de envío. Siempre pensé que era extraño que este elemento, obviamente en el que se puede hacer clic, no use el mismo cursor como enlace. Así que también me gusta aplicar este poco de CSS a los botones:
label, button, input[type="submit"]{cursor:pointer;}
3. Vinculación de su logotipo
No vincular un logotipo a la página de inicio de su sitio es una de las cosas más frustrantes con las que me he encontrado en la Web. No puedo entender por qué alguien no lo haría así. Es tan fácil y, a estas alturas, es seguro decirlo, los usuarios lo esperan.
Vincular su logotipo es tan común hoy en día que muchos sitios encuentran que tener un vínculo con la etiqueta «Inicio» ya no es útil, ya que los usuarios simplemente hacen clic en el logotipo para navegar a la página de inicio.
Los sitios como Facebook, hacen un seguimiento de los clics de los usuarios agregando el parámetro «ref» a cada elemento de navegación. A continuación se muestra un ejemplo de cómo Facebook vincula su logotipo:
4. Aumentar el área de impacto en un enlace.
Hace aproximadamente un año, Ryan Singer de 37Signals escribió un artículo sobre cómo objetivos de enlace acolchados para un mejor uso del ratón en Basecamp. Este es otro pequeño truco de usabilidad que puede usar simplemente agregando algo de relleno alrededor de los enlaces para agrandar el área en la que se puede hacer clic.
Esta es una gran adición a cualquier sitio y puede ayudar a evitar hacer clic incorrectamente en un enlace, lo que a menudo puede ser un poco frustrante. También ayuda mucho en el diseño web móvil, donde los usuarios hacen clic con los dedos y realmente necesitan esa área de acceso extra grande en un enlace.
5. Agregar foco a campos de formulario
Aplicar el enfoque a un campo de formulario es una tendencia creciente en el diseño de interfaces de usuario. Le permite al usuario saber que lo que acaba de hacer provocó que algo sucediera (¿tenía sentido?). Es una forma rápida y sencilla de transmitir información útil y discreta al usuario. Decir algo como: “¡Oye! Acabas de hacer clic aquí «. Puede resultar muy útil.
6. Proporcionar una página 404 útil
Hacer que el usuario se sienta cómodo es muy importante y mostrar un gran mensaje de error de Apache en la pantalla no es la mejor manera de lograrlo. Una página 404 útil puede ser muy útil y no tiene por qué contener los números «4» o «0», ya que no son muy útiles para nadie más que para el desarrollador. Además de esto, nadie realmente necesita conocer el código de error para cualquier cosa que suceda detrás de escena. Los usuarios solo quieren que un sitio funcione de la manera que esperan.
Si un usuario se encuentra en una «Página no encontrada», es mucho más útil llevarlo a algún lugar donde pueda encontrar la información que está buscando, proporcionando un texto de disculpa, un cuadro de búsqueda, o sugerir algunos posibles destinos. Pero trate de no culpar al usuario por aterrizar en una URL incorrecta.
Blogussion escribió un gran artículo sobre creando una página 404 informativa que enumera algunos consejos muy buenos e incluso algún código para aquellos usuarios de WordPress entre nosotros.
7. Usar el lenguaje para crear un ambiente informal
Escribir en la Web es un gran tema en este momento. Es como si estuviéramos revisando una lista de verificación gigante que se ocupa de cuestiones: HTML, CSS, mejora progresiva, accesibilidad, redacción para la Web y los «estándares Web» que lo abarcan todo.
Escuchamos mucho sobre la escritura en la Web y parece seguir cambiando. Desde los dias de Steve Krug diciéndonos que reduzcamos nuestro contenido a la mitad para usar listas con viñetas siempre que sea posible.
Ahora se supone que todos debemos escribir como si estuviéramos hablando con un amigo y todo vuelve a hacer que el usuario se sienta en un entorno cómodo. Cuando mantiene la copia en su sitio informal, hace que el usuario se sienta menos estresado, por lo que incluso cuando encuentran algo confuso, todavía pueden sentir una sensación de relajación e informalidad mientras buscan la respuesta.
8. Aplicar la altura de la línea para mejorar la legibilidad
La altura de la línea es una de las cosas que se pueden heredar directamente de los medios físicos, como libros y periódicos. Estas fuentes han existido durante cientos de años y han tenido mucho tiempo para dominar la legibilidad y la altura de la línea. Así que la próxima vez que te quedes atascado en esto, no tengas miedo de abrir un libro de texto y echarle un vistazo.
Este es un aspecto del diseño web que puede pasarse por alto fácilmente y abusarse fácilmente. Por lo general, comienzo con una altura de línea de aproximadamente 1.4em y la ajusto desde allí, según el diseño y el contenido.
9. Utilizar espacios en blanco para agrupar elementos
Agrupar elementos es una de las formas más fáciles de mostrar asociación. Puede hacerlo con imágenes, bordes o simplemente espacios en blanco antiguos. El uso de espacios en blanco para agrupar elementos crea asociaciones naturales entre elementos relacionados que, incluso cuando se leen de un vistazo, el usuario puede captarlos fácilmente.
A medida que el ojo escanea una página, el usuario naturalmente leerá primero los encabezados. Esto sucede mucho con las 10 listas principales (:: ejem: :). Con suerte, el contenido es lo suficientemente interesante como para llamar la atención y atraer al usuario a leer un poco más de cerca. Empujas a los usuarios en la dirección correcta al diseñar tu contenido de manera que las cosas que están relacionadas parezcan estar relacionadas.
10. Ser accesible
Al ser accesible, no me refiero al cumplimiento de la Sección 508 y la ADA. La accesibilidad, en este caso, significa estar ahí para sus usuarios cuando tienen un problema (capacidad de respuesta).
Si la usabilidad se trata de intentar asegurarse de que sus usuarios no se frustren y se vayan, la capacidad de respuesta es su última línea de defensa contra la pérdida de ese usuario ante uno de los millones de competidores que están a un corto clic de distancia.
En última instancia, puede hacer todas las pruebas que desee y seguir todos los consejos de usabilidad que tenga en sus manos, pero todos somos diferentes. Los usuarios se confundirán y perderán y eventualmente necesitarán ayuda. La cantidad de tiempo que dejas confundido a un usuario puede marcar la diferencia entre alguien que volverá y alguien que no.
Cuando se habla de accesibilidad, muchas personas prefieren una conversación sobre las personas con discapacidad visual, pero la accesibilidad se extiende mucho más allá de eso. Por ejemplo, debe hacer que su sitio web sea accesible para usuarios con restricciones de ancho de banda (conexiones de acceso telefónico, servicio celular, redes lentas) y navegadores más antiguos (algunas empresas no permiten que los empleados actualicen sus navegadores).
Si hacemos todo lo posible para que nuestros sitios sean lo más accesibles posible y respondemos rápidamente a las preguntas, podemos crear una experiencia general que dejará al usuario con ganas de más constantemente.
El servicio al cliente es importante … incluso en un blog.
Escrito exclusivamente para WDD por Tim Wright, diseñador / desarrollador web y bloguero. Puedes encontrar más de sus escritos en CSSKarma o sigue a Tim en Twitter.
¿Sigue todos estos principios en sus sitios web? ¿Cómo podemos crear una web mejor y más utilizable? Nos encantaría escuchar tus comentarios …
