Elementos gráficos para el diseño. Botones gráficos

Son elementos exclusivos de las aplicaciones informáticas y son muy comunes en las páginas web.

02/8/05 - Los botones gráficos son elementos exclusivos de las aplicaciones informáticas, en las que tienen básicamente la misión de capturar eventos realizados por el usuario para lanzar acciones de respuesta adecuadas.

Es común ver en las páginas web botones que permiten al usuario interactuar con la aplicación, informándole de la acción que se va a producir si pincha sobre ellos. Funcionan de esta forma como iconos ampliados, que permiten ejercer las mismas funcionalidades que estos elementos pero sin estar tan limitados en aspectos como formas, tamaños, colores, etc.


También es frecuente utilizar los botones gráficos para sustituir a los botones típicos de los formularios. Cuando aparecieron los formularios sus botones de acción eran todos rectangulares, de color gris y con el texto en negro, diseño que muchas veces se hacía demasiado soso y que chocaba con el estilo general de la página. La solución a este problema de diseño fue la sustitución de estos botones estándares por botones gráficos que realizaran las mismas funcionalidades, generalmente apoyándose en lenguajes de cliente como JavaScript.


Posteriormente, con la aparición de las Hojas de Estilos en Cascada (CSS), fue posible configurar el aspecto de los botones de formulario, aunque sólo admiten esta funcionalidad los navegadores más recientes (Netscape 4x no la admite, por ejemplo). A pesar de ello, el uso de botones gráficos a continuado, ya que sus posibilidades de diseño que ofrecen son mucho mayores; como contrapartida, es necesario a veces un fuerte apoyo de programación, ya que los botones gráficos no responden por si solos a los eventos propios de los botones de formulario.

Otro uso común de los botones gráficos es el de representación de opciones en un menú de navegación. Los sistemas de navegación suelen estar formados por enlaces textuales, a los que, como mucho, se les cambia el estilo propio de este tipo de elementos (color azul y subrayados cuando están inactivos, color morado y subrayado cuando han sido ya visitados). Este sistema es muy efectivo, permitiendo configurar los textos como deseemos, trabajar cómodamente con capas y DHTML, etc., pero presenta ciertas limitaciones que conviene evitar.


Por una parte, los contenidos textuales permiten poco adorno, generalmente el color de fondo y el color del texto, su tipografía y su tamaño. No cabe duda que un elemento gráfico es mucho más maleable, siendo posible diseñar y personalizar cada uno de los píxeles que lo componen.

Además, la zona activa de un enlace textual queda limitada generalmente al texto mismo, por lo que si tenemos una celda de tabla que contiene la opción de menú, el usuario tendrá que situar el puntero del ratón exactamente sobre alguna de las letras del texto para que el enlace se active. Sin embargo, cuando se usa un botón gráfico toda su superficie captura el evento, por lo que el enlace se activará en cualquier punto del mismo (actualmente es posible conseguir lo mismo en celdas de tabla con textos aplicando CSS).

El uso de elementos gráficos como opciones de menú permite realizar uno de los efectos visuales más apreciados en las páginas web. Nos estamos refiriendo a la creación de rollovers, elementos gráficos creados con dos o más imágenes diferentes que permiten hacer botones que cambian cuando el usuario sitúa el puntero del ratón encima de ellos y cuando los pulsa. Los rollovers son muy usados en la actualidad, dando a la página web un dinamismo visual muy adecuado.


La forma más normal de los botones gráfico es la rectangular (sobre todo la de los que sustituyen botones de formulario), que a veces puede tener las esquinas redondeadas. También pueden presentarse circulares o elípticos, trapezoidales, en forma de estrella, etc. Dentro de esta forma primaria se incluye un texto corto (una o dos palabras) que indican la funcionalidad del botón.

El uso de botones gráficos permite personalizar estos elementos en una interfaz de usuario, adaptándolos al estilo general de la misma, pero presenta también algunos inconvenientes, derivados de su naturaleza gráfica y estática.

Uno de ellos es la dificultad de trabajar en multi-idioma, al ser los textos que contienen de carácter gráfico, lo que impide cambiarlos dinámicamente de acuerdo con el idioma de la página. Una posible solución es crear tantas versiones del botón como idiomas maneje la aplicación web, cambiando las rutas de las imágenes que contienen los botones al cargar la página, proceso que requiere generalmente programación del lado del servidor web.

Otro grave problema se puede presentar es la falta de accesibilidad si el usuario accede a la página que contiene botones gráficos con un navegador de sólo texto o que tenga deshabilitada la opción de carga de imágenes, hecho que puede impedir que navegue por el sitio web y que realice las tareas necesarias. Ante este problema hay pocas soluciones, siendo tal vez la única posible el establecer siempre en la etiqueta IMG que implementa cada botón las dimensiones del mismo (mediante los atributos WIDTH y HEIGHT) y un texto alternativo que explique la misión del botón (mediante el atributo ALT).


Estos inconvenientes, si bien son importantes, son poco comunes, ya que en la mayoría de los casos los sitios web no implementan opciones multi-idioma dinámicas y los usuarios utilizan navegadores comunes (Internet Explorer o Netscape Navigator) con sus capacidades gráficas activadas, factores que hacen que el uso de botones gráficos en aplicaciones web sea muy normal.

No obstante, es posible simular con una tabla, algunas imágenes que definan los bordes del botón y CSS el aspecto de un botón gráfico, pero siendo la información interna textual, lo que, dentro de unos límites, permite construir botones de aspecto gráfico en los que se puede modificar su texto.

+ 1 manual relacionado
+ 1 categoria relacionada

Autoría, licencia y acciones sobre este artículo

Informe de Luciano Moreno* Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. URL: http://www.htmlweb.net/ Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Guias de diseño

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba