Esa cosa llamada Usabilidad

Hoy hablaré de esa “cosa” llamada Usabilidad, la cual, muchos de los UX-UI Designers (Diseñadores) tiene en cuenta a la hora de construir la Interfaz de Usuario de cualquier Aplicación.

Entendemos por usabilidad a aquellas normas o reglas no escritas, que se aplican a la hora de maquetar una interfaz de usuario, haciendo de esta fácil de usar y comprender por el público a la cual va dirigida.

Se dice de normas o reglas no escritas porque no hay un estándar a seguir. La usabilidad de una aplicación depende de un simple factor, su público o audiencia y de ahí ya depende de su edad, género, cultura, etc.

Ahora llega la pregunta del millón, ¿Qué medidas o qué reglas adoptamos a la hora de crear una nueva aplicación? Siempre las que más se adapten a los usuarios a la cual vaya dirigida.

La aplicación en todo momento debe guiar al usuario, dar mensajes descriptivos de sus aciertos o errores, ofrecer siempre una posibilidad de volver sobre sus pasos, etc. Para que todo esto se cumpla, debemos de tener ciertas cosas en mente:

  • Opciones de navegación siempre disponibles.
  • Formularios bien delimitados.
  • Textos de ayuda que informen al usuario de las operaciones que realice.
  • Información estructurada, ya sea en tablas de datos, textos bien visibles, etc.
  • Tener en cuenta siempre su cultura, es decir, orden de lectura, formatos de fechas, lenguaje utilizado, etc.
  • Evitar siempre que se pueda el scroll.
  • Mantener siempre un tono amigable para el usuario, es decir, tener un diseño estructurado con una paleta de colores agradable.
  • Que la aplicación se adapte a todo tipo de pantalla.
  • Siempre pensar en el usuario.

Todo esto sin ejemplos prácticos no sirve de nada:

Ejemplo número 1: Los botones y su posición

Este tema es uno de los más controvertidos que hay, puede generar discusiones interminables y en la mayoría de los casos deberá decidir el propio usuario. Como forma predeterminada, estableceremos el orden de los botones tal y como leyéramos un libro:

  • Anterior – Siguiente.
  • Cancelar – Aceptar.
  • Limpiar – Buscar.

Principalmente, esto sería lo más adecuado si la aplicación fuera localizada a otras culturas con otro orden de lectura, es decir, cultura Halal (árabe), Japonesa, etc.

También tenemos que tener en cuenta que los botones siempre tienen que estar visibles y accesibles en todo momento para el usuario, es decir, no basta con el orden sino que también debemos pensar cuidadosamente la posición de los botones.

 

Un ejemplo con la disposición lo tendremos con la siguiente imagen, en ella se ven las diferentes disposiciones de los botones.

Para mejorar el ejemplo anterior, podemos introducir iconos que aumenten más el significado de los botones:

Ejemplo número 2: Formularios

Para los formularios, tendremos que tener un control asociado siempre a una Label y siempre poner la propiedad “for”, para que el usuario pueda hacer click en la label y se ponga el foco sobre el control. También debemos usar la propiedad placeholder para los controles.

Todos los controles deben estar alineados de igual forma. Las etiquetas deben ser descriptivas.

Ejemplo 3: mensajes al usuario

Control requerido:

Mensajes de información:

Para finalizar, siempre es bueno tener un prototipo de cada pantalla al menos en papel, para así plasmarlo en HTML. Siempre hay que pensar en el usuario y en los modos posibles en los que pueda utilizar la aplicación. Y sobre todo mantener la interfaz limpia y sencilla.

Descubre cómo desde SOGETI te ayudamos al desarrollo de proyectos IT adaptados a tus necesidades.

fco-javier-gonzalez-blog

Javier González

.NET Senior Developer and Technical Leader | Soluciones Microsoft | SOGETI ESPAÑA

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s