Calidad en la interfaz de usuario

Recientemente me han preguntado sobre cómo aplicar calidad en las interfaces de usuario…


 Esto es una interfaz de usuario sencilla e intuitiva, es decir, el usuario lo ve y ya sabe que es lo que tiene que hacer, ¿no?
Dejando de un lado las tecnologías para mejorar la experiencia de usuario como Ajax, Silverlight, WPF o incluso combinaciones de hardware y software como Microsoft Surface, voy a centrarme en la creación de formularios con controles genéricos y como se deben aplicar.

No voy a entrar a valorar si la mejora manera de mostrar datos a un usuario es un grid o tarjetas de presentación, solo voy a dar algunos consejos que me han servido para mejorar las interfaces de usuario… ¡Bien! Pues aquí entran en juego muchos parámetros como la accesibilidad, la usabilidad, el rendimiento… lo cierto es que existen muchos estudios de este tema, solo hay que buscar un poquito en Internet…


La premisa básica para obtener una buena interfaz de usuario es la sencillez (el mejor ejemplo: google), con el menor número de controles y opciones posibles. De echo mi opinión personal es que el éxito de google, debe mas a su interfaz de usuario que al algoritmo de búsqueda o al PageRank.
En primer lugar, como es evidente, la interfaz de usuario es dependiente del tipo de aplicación que estemos desarrollando, (web, escritorio, móvil…), ya que las aplicaciones web y las aplicaciones móviles tienen carencias por su propia arquitectura. Voy a centrarme en las aplicaciones de escritorio, que son las que mas posibilidades permiten, aunque muchos de estos consejos se pueden extender a otro tipo de aplicaciones.


 



Voy enumerando y aclarando:



  • Interfaz homogénea: es muy importante que los formularios de nuestra aplicación (y muy recomendable que los formularios de todas nuestras aplicaciones, incluso todas las aplicaciones de nuestra compañía), sigan un patrón común de funcionamiento y un estilo visual determinado (es recomendable tener escrita un guía de estilos que aclare estos temas).

  • Posicionamiento de controles: Lo natural es que el usuario vaya a buscar el botón de cerrar instintivamente en el lugar donde lo tienen el resto de aplicaciones, el botón de buscar suele estar arriba a la derecha, la ayuda se suele sacar pulsando F1, … Es muy importante no inventar nuevos métodos de trabajo sobre las aplicaciones y seguir los estándar. También es muy importante que la posición física de los controles sea siempre la misma.

  • Acciones comunes: los botones de navegación, botones de visualización edición, eliminar, exportar, imprimir… las acciones típicas deberán estar en una botonera común a toda la navegación, ¡y siempre la misma!, de modo que todas las acciones frecuentes a los formularios estén accesibles desde un punto fijo, además de este modo, se clarifica el contenido. Es muy útil en formularios MDI, hacer que la botonera haga uso sobre el formulario que tiene el foco (Active Form).
    Acciones comunes

  • Sobrecarga de controles: Es muy util utilizar un botón de acciones: Las acciones específicas de un formulario nunca deberán ser botones, ya que las aplicaciones evolucionan y los mantenimientos perfectivos van a tener lugar (no olvidéis que debemos seguir una metodología de programación orientada al “cambio ágil” y el hecho de añadir controles a nuestros formularios nos obliga a rediseñarlos y a evolucionar a formularios como este o este otro). Para este tipo de problemas se suelen utilizar botones de acciones múltiples, como el que muestro aquí.

  • Mantener al usuario informado, todas las acciones que se estén llevando a cabo deberán mostrar un mensaje en una zona de la pantalla común dedicada a ello. Barras de progreso, si es posible, cambiar el icono a AppStarting, deshabilitar botones que puedan dar lugar a conflicto o a sobrecargar servicios o accesos a datos. El usuario debe tener el control de la aplicación en todo momento, por lo tanto ha de tener información de todo lo que la aplicación realiza

Recomendaciones al rendimiento: Este es el punto más delicado y que mas “arte” requiere;




  • No sobrecargar el hilo principal de la aplicación, ¡fundamental!


  • Generar hilos por cada tarea secundaria o tareas pesadas, el objetivo es la sensación de multitarea. El objetivo es que no haya una interfaz que no responda, y provoque que el usuario se impaciente (ya sabemos lo que ocurre con un usuario impaciente, en el mejor de los casos uso descontrolado de ctrl, alt, supr y en el peor, aporreo incontrolado del teclado)


  • Uso inteligente de la memoria, no es muy recomendable declarar muchas variables globales o trabajar con objetos pesados si no se van a usar, castings innecesarios, uso adecuado de las colecciones de datos, promover el uso de arraylist en lugar de otras estructuras más rígidas o pesadas,… pero de este tema habría mucho que discutir…


  • Tacañear los accesos a datos, evitar los select * from, ser cuidadoso con las consultas y si es posible implementar una capa de servicios con cacheo de datos.



El listado de recomendaciones sería mucho más amplio, no obstante, espero que la lectura de este artículo haya orientado a alguien o haya dado alguna idea para crear una interfaz de usuario con calidad y por otro lado no haya aburrida demasiado 😉
En este enlace dejo un listado completo de recomendaciones en interfaces de usuario (http://www.raizlabs.com/blog/), y aquí las de Microsoft (http://www.microsoft.com/downloads/details.aspx?FamilyID=a1fe1066-bf4f-44fc-834b-676b311e83a2&DisplayLang=en).


Mas enlaces de Interés:


Principios, Prototipos y Heurísticas de Interfaces de Usuario. http://www.monografias.com/trabajos11/heuri/heuri.shtml
Estructurar una interfaz de usuario: http://www.alzado.org/articulo.php?id_art=486
Calidad y Usabilidad: http://www.torresburriel.com/weblog/2007/05/11/usabilidad-versus-calidad/
La interfaz gráfica: http://www.hipertexto.info/documentos/interfaz.htm

Para no extenderme demasiado (ya que me quedan temas de que hablar… accesibilidad, usabilidad, navegación, contenidos, organización…, pero no quiero aburrir), por último, quiero hablar un poquito de los nuevos Frameoworks AJAX que mejoran considerablemente la experiecia de usuario (GWT (http://extjs.com/products/gxt/), ExtJS (http://extjs.es/) )… recientemente hemos desarrollado una aplicación que integra ciertas tecnologías (Reporting Services, WCF, ASPNET 3.5 y ExtJS) y con respecto a la interfaz de usuario, la integración de ASPNET y controles EXT. El resultado ha sido excelente!!, una aplicación web con una riqueza visual similar a una aplicación Windows nativa.


Y ya termino… 


El desarrollo de una buena interfaz de usuario es una tarea complicada, que requiere mucho sentido común (el menos común de los sentidos), mucho pensar y ponerse en el lugar del usuario. Para el personal del equipo de desarrollo es tan complicado, porque una interfaz no son mas que controles (grids, combos, listas…) pero para el usuario, una interfaz de usuario es una pantalla donde aparecen cosas que no concuerdan con su mundo real… no aparecen destornilladores, ni grapadoras, ni archivadores… y es nuestra tarea hacer esa transición, del mundo real, a la pantalla del ordenador, lo menos traumática posible. Por eso cuando desarrollemos interfaces de usuario debemos pensar en las secretarias, funcionarios, operadores, mecánicos, carpinteros… y ponernos en su lugar!


Seguro que así vamos a mejorar la calidad de nuestras interfaces de usuario!!


 

3 comentarios en “Calidad en la interfaz de usuario”

  1. Muy buena guía de buenas prácticas, Miguel, no sólo por el contenido de tu post sino por la genial recopilación de enlaces que has realizado. ¡Enhorabuena!

    Ahora bien, creo que este tema se merece un segundo capítulo por tu parte, y sería el de cómo evaluar dicha calidad en la UI, qué personas son las más indicadas para testear nuestras UI (desarrolladores, testers con background técnico, testers “manuales”, usuarios de a pie…), etc.

    Buenísima la foto también, ahora el término “Pichichi” adquiere otro significado adicional 😛

    Saludos,

  2. Que consejos tan buenos!!
    La verdad es que si lo piensas son de sentido común, el problema es que cuando se hacen las interfaces nadie piensa, los desarrolladores se ponen a arrastrar controles como locos.
    He leído este post, porque entro de vez en cuando en Geeks, pero me ha llamado mucho la atención y he leido los demás que has escrito y veo que todos mantienen muuucha calidad.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *