Trucos para mejorar su Web

Escrito por Daniel P. Uriol

sábado, 27 de septiembre de 2008

Los botones en una interfaz son elementos vitales, ya que en la mayoría de los casos aglutinan muchas de las capacidades de navegación que su creador ha concebido. Por ese motivo, adquieren un protagonismo colosal, aun cuando, por regla general, son los elementos de menor tamaño dentro de una interfaz y, además, los más comúnmente utilizados dentro de la misma.


Por todo ello, una correcta utilización de estos elementos se antoja vital de cara a obtener el uso óptimo de esa interfaz. A fin de lograrlo, se presentan aquí una serie de recomendaciones desde el punto de vista de la usabilidad que ayudarán, sin duda alguna, a ese mejor uso.

Dichas recomendaciones quedan agrupadas en tres conjuntos:

- Recomendaciones sobre el texto contenido por los botones
- Recomendaciones sobre las características de los botones

Recomendaciones sobre el texto contenido por los botones

Principalmente, existen dos tipos de botones en los entornos web:

- Botones textuales: Son aquellos que básicamente basan toda la información que transmiten sobre textos o a través de ellos.

- Botones icónicos: Son aquellos que transmiten su información principalmente a través de una imagen siendo capaces de que la interpretación que el usuario dé a dicha imagen sustituya con éxito el mensaje textual que se les podría haber proporcionado. Asimismo, estos pueden disponer de información textual, la cual vendría dada por el etiquetado del icono.

Centrándonos en la información textual transmitida por los botones textuales, existen varias recomendaciones a tener en cuenta:

1.- Es necesario etiquetar todos los botones con verbos imperativos. Estos etiquetados han de tener siempre la primera letra en mayúscula, como por ejemplo ‘Salvar', ‘Buscar', ‘Eliminar' ... De este modo, habría que huir de botones con textos tales como “Acepta”, “Accede”, …

2.- Se recomienda usar el símbolo (...) ó ‘...' al final de las etiquetas si la acción requiere más explicación para el usuario antes de la acción sea llevada a cabo. Por ejemplo ‘Salvar como ...' o ‘buscar ...'. Estos signos, no deberían añadirse en comandos tales como ‘Propiedades', ‘Preferencias', ‘Configuración', ya que estos comandos no requieren mayor explicación que la que ya expresan por medio de su etiquetado.

3.-Se recomienda utilizar siempre términos breves y representativos. Las frases largas de carácter descriptivo son desaconsejables. El uso de terminología ha de abarcar entre dos y tres palabras.

4.- En el caso de que el etiquetado del botón tenga dos o más palabras, es crítico mantener la consistencia con el español. Un error muy común a la hora de etiquetar botones es importar errores tipográficos internacionales, la mayoría de procedencia anglosajona. De todos ellos, el más común es el de entremezclar mayúsculas y minúsculas dentro de una misma frase sin criterio alguno. Hay que hacer notar que si bien en la lengua inglesa no constituye falta de ortografía el comenzar con letra mayúscula cada palabra que no sea determinante, adverbio o preposición dentro de una misma frase, esto constituye una falta de ortografía en castellano. No obstante, poner mayúsculas a palabras situadas en mitad de frases castellanas se está convirtiendo en costumbre común. Un empeoramiento de esta situación lo constituye el situar dichas letras mayúsculas en algunas palabras de dicha frase y en otras no.

Recomendaciones sobre las características de los botones

El segundo aspecto a tener en cuenta una vez se posee una idea más o menos clara sobre las cuestiones lingüísticas es la funcionalidad de dichos elementos. La funcionalidad de un botón en una interfaz web es casi tan importante como su etiquetado lingüístico. El comportamiento de dicho botón proporcionará información crítica al usuario y le guiará por su interacción normal con el sitio web.

En aras de una potenciación de la Accesibilidad de un sitio web, el acceso a las distintas secciones del mismo por medio de botones debería poder hacerse de dos maneras:

- Navegando por medio del ratón: Es el uso más común por medio del cual interacciona el usuario con los sitios web.

- Navegando por medio del teclado: Posibilidad necesaria para aquellas personas que tienen necesidad de hacer uso de los sitios web accesibles debido a algún tipo de discapacidad.

Acorde a estos usos, las recomendaciones que se pueden hacer son:

1.- En el caso de que se habilite una navegación por medio del teclado para el sitio Web, cada opción designada debería quedar asociada con los botones del teclado escogidos. De esta manera si para acceder al apartado ‘Inicio' se han de pulsar los botones CTRL + I (Control + tecla ‘I'), esta letra debería quedar resaltada de algún modo en el texto del botón. Ejemplo I nicio, Ve n tana, etc.

2.- Una vez que una función de navegación ha sido asociada a un botón, no se debe cambiar el botón por defecto manteniendo dicha función inamovible para el resto de la estructura. Se pueden añadir o eliminar el estado de esos botones si ello ayuda a prevenir que el usuario cometa errores. Pero el que los botones aparezcan o desaparezcan de la pantalla en función de las acciones que el usuario va realizando no logrará sino despistarlo.

3.- Es crítico etiquetar todos los botones a fin de que el usuario pueda obtener información acerca de la funcionalidad sin necesidad de pulsarlos. Adicionalmente, ello posibilitará la navegación en el caso de que los botones no se carguen, tarden en hacerlo o, directamente, no existan por algún tipo de incompatibilidades con el navegador que está usando.

4.- Si el botón es capaz de generar texto, un icono o ambos, es necesario describir gráficamente lo que va a suceder. La generación de texto en la pantalla ocultará algunos elementos de la misma y ello podría propinar que el usuario se pierda. Es mejor advertir antes que subsanar.

Con respecto a la apariencia que se le debe dar a los botones dentro de una interfaz, la recomendación básica que ha de primera sobre el resto es la de mantener la consistencia. La consistencia dotará al sitio Web de faculta a los usuarios a poner en marcha sus aprendizajes previos así como le permite dotarse de pautas de actuación más o menos cómodas a la hora de interactuar con un sitio web. Por tanto, hay que tener en cuenta los siguientes puntos:

1.- No usar más de uno o dos anchos para los botones que componen una interfaz y, en cualquier caso, usar siempre el mismo alto. Ello ayudará a proporcionar un cómodo sistema visual para que la percepción del sujeto sea capaz de clasificar los elementos que componen una interfaz.

2.- Aquellos botones cuya función, a causa de las acciones del sujeto, quede inhabilitada, deberán quedar presentes, pero inhabilitados. Un ensombrecimiento de los mismos, ayudará sin duda a clarificar que, a causa de esa acción, el botón ya no está disponible o aún no ha sido activado.

3.- En un texto, un botón puede constituir el botón por defecto de una interfaz. Para ello, tiene que estar resaltado con un borde distinto y debe volverse de la misma manera cuando el sujeto regrese al la citada interfaz. Generalmente, este tipo de botones suelen ser los etiquetados con las funciones “Aceptar”, “Adelante”, “Siguiente”, etc... Tan sólo en casos excepcionales “Cancelar” debería ser el botón activado por defecto de una función.

4.- Si un botón por defecto sólo va a poder ser utilizado una vez el usuario haya completado un cierto número de pasos (por ejemplo, rellenar un nombre de usuario y una contraseña), este botón NUNCA debería activarse hasta que el usuario ha realizado correctamente la tarea en cuestión. No tiene sentido posibilitarle el pulsarlo si el pulsado va a conducir a un error de la herramienta.

Con respecto a la apariencia que los botones han de tener con respecto a la interfaz global del sitio web, se han de tener en cuenta los siguientes puntos:

1.- Cada vez que un botón se pulse, hay que dar feedback al usuario de que está siendo pulsado. Este feedback sí que admite las animaciones o los sonidos, siempre y cuando ayuden a aclarar al sujeto que ese sonido está describiendo auditivamente el pulsado de un botón. En el caso de optar por dotar al botón de una animación a fin de resaltarlo, esta ha de estar hecha acorde a los principios básicos de la usabilidad, siendo lo más destacados:

a.- La animación solo debería activarse cuando se comience a ejecutar la acción que la desencadena y debería finalizar cuando dicha acción ha dejado de realizarse. Las animaciones que aparecen en una interfaz sin que el usuario tenga relación alguna con ellas, no hacen sino despistarle.

b.- Las animaciones han de ser sencillas y comunes al entendimiento del usuario. Un despliegue espectacular ante la realización de una acción sencilla, rompería la coherencia de actos en la interacción con el sitio web.

c.- De cara a mantener las acciones de accesibilidad, sería idóneo proporcionar algún tipo de feedback adicional a la acción de pulsado del botón, para que aquellos usuarios que no sean capaces de percibir esa animación, puedan tener algún tipo de feedback que les proporciona similar sensación.

2.- La ubicación de los botones en la interfaz de un sitio web es un aspecto fundamental. Es recomendable que el botón con mayor posibilidad de ser pulsado sea mostrado en primer lugar. En este sentido, hay que tener en cuenta que las pautas de lecto escritura occidentales podrán ayudar en esto, ya que los usuarios leen de izquierda a derecha y de arriba abajo. Estas pautas nos van a proporcionar las reglas a seguir acorde a las ponderaciones en importancia otorgadas.

3.- En el caso de que la interfaz tenga ciertas particularidades por medio de las cuales no sea posible dotar al sitio web de indicadores claros de pulsado, puede ser aconsejable introducir alguna pista que enfatice los botones usados con más frecuencia o los más previsibles