miércoles, julio 07, 2010

Programar bien y programar bonito

Buena pregunta.....

¿ Tu programas bien o programas bonito ?

¿ Tienes estándares de programación ?
¿ Haces códigos fuentes de menos de 1000 lineas ?
¿ Usas notación húngara ?
¿ Tus tablas están diseñadas siguiendo el modelo Entidad-Relación ?
¿ Los nombres y tipos de tus campos son coherentes entre las tablas que los usan ?

Eso en cuanto a programar bien, ahora en cuanto a programar bonito

¿ Comentas tus códigos fuentes ?
¿ Identas correctamente el código ?
¿ DISEÑAS TU INTERFACE CORRECTAMENTE ?

En este último punto es donde todos fallamos, me incluyo.

Hace muchos años, durante la época del MS-DOS, realmente no existía un estándar para desarrollar una interfaz con el usuario, así que teníamos la libertad de hacer lo que nos diera la gana al momento de diseñar la interfaz de nuestros programas, eso era el salvaje oeste, y lo que para algunos podría parecer un asco de interfaz, para otros era útil, sencilla o práctica o simplemente los usuarios se han acostumbrado a ella, pero en 1987 las cosas cambiaron radicalmente.

En 1987 IBM propuso un estándar de interfaz con el usuario a la que llamó CUA (Common User Access), el estándar CUA es (se sigue usando y tu lo usas todos los días aunque no lo sepas) un conjunto de especificaciones detalladas y reglas estrictas sobre la apariencia y la manera en que las aplicaciones deberían de funcionar, este fue el primer intento de poner en orden a las aplicaciones basadas en DOS, que como comenté anteriormente, hasta ese momento implementaban diferentes interfaces con el usuario.

IBM adoptó este estándar en todas sus aplicaciones y sistemas operativos, y también lo hizo Microsoft, así que, mi querido lector, tu usas CUA todos los días cuando trabajas con Windows, ya que las interfaces de este sistema operativo están ampliamente basadas en CUA.

El estándar CUA, a pesar de tener 23 años de edad, especifica cosas haces todos los días en tu trabajo diario, y que los programas que tu desarrollas deberían tener, como por ejemplo:

  • Todas las operaciones se deben poder hacer con el ratón, pero también con teclado, sin intervención del roedor.
  • Las opciones del menú se deben abrir usando la tecla Alt+Letra subrayada
  • Un grupo de opciones de un programa debe ser capturado usando dialogos, no ventanas
  • Las opciones en un diálogo se dividen usando pestañas, no se hacen dialogos larguísimos que se tengan que desplazar para capturar todas las opciones necesarias
  • La navegación dentro de un campo en un diálogo es con las flechas del cursor, la navegación entre los campos hacia adelante se hace con la tecla Tab; la tecla Shift+Tab navega hacia el campo anterior.
  • Los diálogos deben tener siempre un botón CANCELAR cuya operación debe relacionarse con la tecla ESC, y siempre se debe usar para descartar los cambios realizados en los campos capturados dentro del diálogo.
  • Los diálogos deben tener siempre un botón ACEPTAR, el cual acepta los cambios realizados en el diálogo y esta asociado siempre con la tecla ENTER
  • Todas las aplicaciones deben tener una opción de AYUDA en el menú, esta opción debe ser SIEMPRE la última del menú, la ayuda en línea para un caso específico debe ser invocada por la tecla F1
  • La primera opción del menú debe ser SIEMPRE la opción ARCHIVO, seguida siempre por la opción EDITAR
  • El comando CORTAR son las teclas SHIFT+DEL, COPIAR son las teclas CTRL+INS y PEGAR son las teclas SHIFT+INS
  • etc., etc., etc.
Detengo la lista hasta aquí porque estoy seguro que TOOOODOS tus programas siguen al pie de la letra el estándar CUA, el cual, dicho sea de paso, hace que tu aplicación califique como "compatible con Microsoft Windows".

Seguramente tu no eres de esos que pone degradados de colores en los fondos de sus programas, no no no no, ¿ como lo vas a hacer ?, eso no está documentado en CUA, ni pone botones de 30 colores diferentes con bitmaps y seguramente sabes usar perfectamente una RibbonBar, no la pones en tus programas nada mas porque la acaban de incluir en la última versión de tu herramienta de programación o porque viene en Office 2007, estoy seguro que sabes como dividirla y cuando usar cada componente, después de todo programas BIEN para Windows ¿ no ?.

Bueno, como todo lo anterior es cierto (programas BIEN en Windows), gracias por leer este artículo, nos veremos próximamente con algo más interesante, ¡ Hasta la próxima !
....
....
....
....
¿ Como ?...... ¿ sigues ahí ?.....

Ok, ok, si sigues ahí es porqué seguramente te sentiste identificado con algo que mencioné que tu NUNCA haces en tus programas.

Hace unos días estaba mirando en Facebook las imagenes que puso un colega programador de su aplicación...... oh my dog !.... con RibbonBar, OutlookBar, Menú, todo metido en la ventana principal, dialogos con fondos degradados, mensajes por todos lados, imagenes de distintos estilos por todos sitios.... y lo peor, los mismos colegas programadores comentado ....oooohhh que bonita aplicación......

No digo que la aplicación no se viera bonita, pero hay una línea muy fina entre lo bonito y lo grotesco, la verdad no sabría yo calificar si eso era bonito, o era grotesco.

Hasta ahora no he visto ninguna aplicación, salvo el WinZip o el Office 2007 que utilicen una RibbonBar como se debe y son muy pero muy muy muy pocos programas que me ha tocado usar, especialmente de desarrolladores independientes y aún de empresas que se dedican al desarrollo de software que pasarían una certificación de Microsoft.

No basta con que tu programa corra en Windows con una interfaz gráfica, tampoco basta decir que tu programa es "Compatible con Microsoft Windows" (y encima nos damos el lujo de decir con Windows XP y superiores 32 o 64 bits), hay que demostrar que tu programa realmente es 100% Windows compatible.

Para que un programa sea 100% Windows compatible, tiene que seguir el estricto estándar que Microsoft ha impuesto para el desarrollo de aplicaciones Windows compatibles.

Cada vez que Microsoft libera una versión de Windows, también publica una "guía" de la interacción que el usuario debe tener con el sistema operativo, elegantemente le llama "User Experience Interaction Guidelines" y está disponible en el MSDN como archivo PDF, te voy a ahorrar la molestia de buscarla, pero vas a tener que seguir leyendo hasta el final.

En este documento, de 867 páginas y 41 Mbytes de tamaño, Microsoft explica todos los controles que se usan en la interfaz de Windows, así como también explica detalladamente como y cuando deben de ser utilizados, como deben ser emplazados dentro de un diálogo o ventana, que distancia debe de existir entre ellos.

Otra cosa que también documenta es la lista de "violaciones" mas comunes que hacemos los programadores cuando estamos diseñado la interfaz de nuestros programas, como por ejemplo no usar textos en color azul porque el usuario asume que son links de internet, siempre coloca un boton CANCELAR, , usa tooltips solo cuando el control no tenga etiqueta, asigna aceleradores a todas la etiquetas de controles, el orden de TAB siempre debe ser de izquierda a derecha y de arriba hacia abajo, en los mensajes de tus programas no uses las palabras ERROR, FALLA, ILEGAL, VIOLACION, ABORTAR, FATAL, eso espanta a los usuarios, etc. etc. etc.

Lo que mas me gustó de la guía es que incluye una sección sumamente detallada del uso de controles, como usarlos adecuadamente, cuando tal control puede ser reemplazado por otro de otro tipo, cuando NO usar tal o cual control, baste con decir que la guía es tan detallada que solo la sección que trata del Checkbox ocupa 5 paginas, indicando con todo detalle ejemplos y casos de uso, solo como comentario, ¿ Sabias que la distancia que debe existir entre un LABEL y un CHECKBOX es de 5 pixeles y que la distancia entre cada CHECKBOX cuando hay varias opciones debe ser de 7 pixeles y que el tamaño del control debe ser de 10 pixeles de altura ?, bueno así como se detalla el Checkbox, se detallan el resto de los controles.

Mención por separado merece la documentación de la creación y uso de la RibbonBar, esta si es una obra maestra de la documentación, en 33 páginas te documenta, detale a detalle, cada elemento de una RibbonBar, y la forma correcta de usarlo, una vez que leas esta documentación te darás cuenta si realmente la RibbonBar está bien soportada e implementada en tu lenguaje de programación.

A estas alturas te podrías estar preguntando ¿ y realmente hay programas que respeten todo lo que dice el documento ?.... ¡ pues claro que los hay !, TODOS los programas que vienen en el sistema operativo de Windows y en genera TODOS los programas de Microsoft son diseñados siguiendo estrictamente las reglas de la UX Guide.

La UX Guide la puedes descargar haciendo Click aquí.

La mala noticia es que está todo en inglés y no existe versión en Español, por lo menos hasta el día en que descargué el documento, de todas formas la guía incluye una estupenda información que te ayudará a hacer programas mas poderosos y bonitos.

Ahora sí, programarás bien y programarás bonito.

4 comentarios:

Anónimo dijo...

Muy bien Rene,
Como siempre te has tirado de la moto, has conseguido que me ruborice. Saludos desde España

Antonio www.ontarioxb.es

Anónimo dijo...

Falta el "Standard" FER, no se hace mención. Más o menos es así:
1) Olvídese de poner la "Ayuda" eso es para ñoños... somos seres evolucionados "Por algo dominamos el planeta".
2) Cada quien es libre de andar y hacer lo que quiera. La libertad es un derecho universal... el diseño de sus programas lo hacen diferente de los demás. Es su sello personal. :-)
3) Los dialogos por ley y designio del Tio Bill, deben tener un botón "Aceptar" y "Cancelar". Excepto en aquellos casos donde el Señor que firma tus cheques te dice textualmente "Cambia el Aceptar por Guardar por que es para guardar los cambios y cambia el Cancelar por Salir" Nótese la ausencia del "Por favor".

:-)

Rene, siempre visito tu blog en espera de tus aportaciones, un gusto saludarte.

Fernando Leal

Lautaro Moreira dijo...

El tio Bill la tiene facil, no tiene que escuchar al usuario, hace lo que el piensa es mejor para el usuario.

;)

Saludos,

Lautaro Moreira

SAM dijo...

Gracias Rene muy buen articulo, existe una UX Guide para programación web?