Diseño de interfaces: sobre folders

09.may.2002

Uno de los controles que utilizo habitualmente en mis programas son los folders de Fivewin. Según el libro ‘ The Windows Interface Guidelines — A Guide for Designing Software’ este control se denomina TAB y presenta una analogía a los separadores de los cuadernos y permite mostrar varios páginas dentro de una ventana o dialogo, cada uno en una pestaña.

Los folders de Fivewin están pintados ‘a mano’, mediante la función FoldPaint() que se llama en el método Paint de la clase TFolder(). Esta función pinta los folders de la misma manera que Windows95 y ahí reside el problema: que los folders de Windows95 están mal diseñados desde el punto de vista de su usabilidad. Para verlo vamos a fijarnos en los folders de Windows95 y luego en sus competidores. Los de Windows95 son estos, de acuerdo a la imagen tomada de la configuración regional del panel de control:

Estos folders presentan los siguientes problemas:

  • Es difícil distinguir que pestaña está activa ya que no hay una diferenciación en tamaño y color entre la pestaña activa y las demás.
  • El problema de la diferenciación se agrava en cuanto cambiamos el esquema de colores de Windows y en especial el de la cara de botón por uno más claro que el definido por defecto. Los colores de la imagen corresponden a un sistema operativo Windows98 con los colores de XP y son los que uso habitualmente en uno de los sistemas operativos instalados en mi PC.
  • No utilizan aceleradores, por lo que es necesario usar el ratón para pasar de una pestaña a otra.

Veamos que aspecto tienen los folders de Gnome, Mac8 y Aqua – el último interfaz de Apple. Aquí los teneis entenéis en el citado orden:

Como se puede apreciar, el diseño de estos folders muestra de manera correcta cual es la pestaña activa mediante un realce de la misma o el oscurecimiento de las pestaña no activas. Los diseñadores de Microsoft han tomado nota de ello y en WindowsXP presentan unos folders que optan por un realce similar el modelo ‘Aqua’.

En los Folders de WindowsXP se ha reforzado la diferenciación visual entre la pestaña activa y las no activas, asi como la diferenciación del propio folder dentro de la ventana dándole un tono más claro que esta.

ahora con Fivewin

En mis aplicaciones utilizo dos tipos de folders:

  • Folders con imágenes
  •  Folders sin imágenes

La idea en ambos casos es la misma: utilizar aceleradores en las pestañas y diferenciar entre la pestaña seleccionada y las que no están seleccionadas oscureciendo estas últimas. En los folders con imágenes cada pestaña lleva su bitmap, mientras que en los folders sin imágenes refuerzo del papel de la pestaña activa pintando una raya ‘a la XP’ sobre ella. El oscurecimiento de las pestañas no activas se hace sobre el tono del color de botón, normalmente con el color GetSysColor(15) – RGB40,40,40). Con ello me aseguro de que el oscurecimiento es sobre el color del botón, evitando poner un color arbitrario.

Estos folders son ligeras modificaciones de la clase C5Folders, por lo que no puedo publicar su código fuente. Sin embargo, creo que con las indicaciones dadas se podría hacer unos folders similares basados en la clase Folder de Fivewin.