sasa eh

“Haz clic aquí­”

Una de las reglas de oro respecto a la usabilidad es que los enlaces sean significativos, lo cual invalida mucho de los recursos habituales a la hora de enlazar a páginas concretas como, por ejemplo, el infame haz clic aquí.

Es fácil caer en la tentación de usar este tipo de enlaces (no hay más que hacer una pequeña búsqueda en Google, por ejemplo). Quizá lo que nos motiva a usar este tipo de enlaces es evitar ensuciar el texto con enlaces que puedan distraer al usuario y que, francamente, no van a ser de gran utilidad. ¿os imagináis un texto lleno de enlaces? ¿alguien pincharí­a en algunos? ¿cual sería más relevante? ¿hacia cual dirigimos al usuario? Me estoy desviando… el caso es que parece que se utiliza para evitar colocar enlaces en el texto, le soltamos al usuario una parrafada enorme sobre lo que queremos decir y completamos la historia con un Pinche aquí para más información, y nos quedamos como un rey.

Bien, si la intención es separar el contenido del enlace, pues hagámoslo de la forma más elegante posible, y en lugar de usar una frase con el aquí­ enlazado, podemos usar palabras o mini-frases socorridas como Más información o Ver más o, en el colmo de la perversión algo realmente significativo como Rellenar encuesta (vs. Pinche aquí­ para rellenar la encuesta).

Algunos ejemplos:

• Pinche aquí:
  

  Nuestro nuevo producto zPlunk le permite ahorrarse hasta un 50% de tiempo a la hora de desarrollar nuevo software, lo cual repercute notablemente en su cuenta corriente.

  Pinche aquí­ para descargarse zPlunk.

• Más información:
  

  Nuestro nuevo producto zPlunk le permite ahorrarse hasta un 50% de tiempo a la hora de desarrollar nuevo software, lo cual repercute notablemente en su cuenta corriente.

  Más información ».

• Enlace significativo:
  

  Nuestro nuevo producto zPlunk le permite ahorrarse hasta un 50% de tiempo a la hora de desarrollar nuevo software, lo cual repercute notablemente en su cuenta corriente.

  Descargar zPlunk ».

¡Hey!, pero si eres de ciencias y no encuentras alternativas, ya sabes: pincha aquí para no hacer caso.

Formularios web

A la hora de plantear un formulario para solicitar información a un usuario hay que considerar más cosas de las que a primera vista pueden observarse. Hay que ver si hay campos que condicionan la aparición o validez de otros campos y como plantearlo (p.ej. se pedirá la provincia sólo si el pais es “España”), como representar ciertos campos que pueden dar un cierto juego (p.ej. un campo de fecha, o campos con valores conocidos), como plantear los errores, los ejemplos de formato, el orden, las agrupaciones, validaciones de los campos, etc…

Vamos, que en teorí­a exigirí­a al menos una pensada, cosa que no siempre ocurre.

Aquí­ me voy a centrar únicamente en como pondría las etiquetas, los botones y las marcas de “campo obligatorio” en un formulario.

Campos obligatorios

Hace tiempo que el asterisco (*) se usa de forma convencional para indicar una nota al pie y, en caso de formularios, un campo obligatorio. Generalmente se suele poner al principio del formulario junto con una frase del estilo Los campos marcados con * indican campos obligatorios. Muchas veces el * se enfatiza usando un color de advertencia rojo, naranja o similar.

En los campos, el asterisco se colocaría al final de la etiqueta, i.e.

Nombre*:

Con este asterisco, creo que es máss que suficiente para indicar la obligatoriedad del campo.

Disposición de las etiquetas

Generalmente un formulario se suele disponer dentro de una tabla, aunque no es obligatorio y ni siquiera hay acuerdo de que sea semanticamente correcto, sin embargo es una disposición habitual.

Lo que no es tan habitual es usar la etiqueta LABEL para asociar la etiqueta con el campo asociado.

Una de las ventajas de LABEL es que facilita el posicionamiento del foco en el campo que vamos a rellenar.

Y una desventaja de LABEL es que no se puede utilizar dentro de tablas si el control asociado está en otra celda, que es el caso que estamos considerando.

Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell.

Por lo tanto úsala si es posible y no te complica demasiado la vida y el código.

Como decí­a, si disponemos el formulario dentro de una tabla, tenemos la columna izquierda para las etiquetas y la columna derecha para los campos de entrada y las ayudas (formatos, indicaciones breves, etc.).

A mi me gusta alinear las etiquetas a la derecha de la columna, lo más próximos posible a los campos de entrada del formulario. Con ello mantenemos la relación visual entre los dos y evitamos que etiquetas demasiado largas hagan que el usuario pierda la referencia entre la etiqueta y su campo de entrada correspondiente.

Por ejemplo:

Datos personales


Nombre*:




Apellidos*:




N.I.F.*:

 DDDDDDDD-L (p.ej. 12345678-Z)


Dirección:




Otros datos de interés


Comentarios:

Es un formulario bastante feo, pero creo que se entiende el concepto.

Resumiendo…

• Etiquetas: Alineadas a la derecha, pegadas al campo correspondiente. Con asterisco indicando si el campo es obligatorio.
• Campos: Su tamaño debe indicar cuanta información esperamos que introduzca el usuario. Estarán alineados a la izquierda, junto a su campo asociado.
• Ayudas: Las indicaciones sobre formatos, ejemplos, etc. las colocamos a la derecha del input.
• Botones: Alineados a la izquierda en la columna de los inputs. Evita problemas a la hora de asociar los botones de acción con el formulario correspondiente. También puede ayudar el rodear el formulario con un borde, aunque dependerá del diseño.

Y si se puede, utiliza etiquetas LABEL.

Puf, si la entrada me ha quedado larga, su génesis ha sido eterna, a si que creo que la cierro aquí­.

Actualización 2006.07.04. Justo acabo de ver un artículo en A list apart en el que se menciona como adecentar un formulario sin usar tablas: Prettier Accessible Forms. Eso si, a cambio de un poco de Javascript.

Actualización 2006.07.26. Acabo de probar a poner LABEL en los campos de los comentarios y funcionan tal y como debiera… incluso estando en tabla.

Presencia de marca: la cabecera

En un proyecto de re-diseño reciente (bueno, más bien una redecoración) nos encontramos con el problema de que lo que menos (casi) llamaba la atención de la nueva imagen era el logotipo; la marca.

Toda la disposición de los elementos y zonas de la web era elegante y correcta… pero el logotipo pasaba desapercibido, o al menos no se veía tanto como pretendíamos.

Si os habeis fijado las webs actuales tienen una cabecera enorme, desproporcionada en algunos casos. Incluso muchas de ellas tienen cabeceras que no aportan nada salvo una enorme-zona-con-una-foto-bonita… y no todas son blogs y web 2.0.

Observando las alternativas que se usan para destacar la marca en la cabecera, podemos encontrar las siguientes

1. Enorme imagen de cabecera con o sin claim. Lo normal es saltártela, pero ya te ha dejado en la retina todo el mensaje. Personalmente la veo algo peligrosa, roba demasiado sitio al contenido. Una variante pueden ser las webs de un único propósito, como puede ser Google u otras estilo web 2.0.
2. Refuerzo de color sobre la cabecera. Suele ser el recurso más utilizado, una “mancha” oscura horizontal en la que se encuentra el logotipo y puede que el menú principal. Puede ir acompañada de degradados en vertical oscuro-claro, o encerrando la zona con un borde, dibujos, etc… o poniendo la “mancha” horizontal de lado a lado de la pantalla y apoyando sobre ella el contenido de la página.

Hay otras opciones para mostrar la marca sin necesidad de dejar todo el trabajo sobre la cabecera: se puede reforzar la presencia de marca mostrando el logotipo en todos aquellos recursos gráficos que vayan apareciendo en la web: cajas de productos, títulos, … o bien situándola de forma que rompa en el diseño de la página (en diagonal, superpuesta, …)

Gran imagen de cabecera

Esa puede ser una solución para la marca, desde luego, no falla, se ve quieras o no. Ejemplos de ello pueden ser:

• Subtraction. Una preciosa web con una cabecera de todo menos útil.

  

• The Web Standards Project. Combina la mancha de color con una cabecera desproporcionada. Al menos queda bien clarito de que va la web. Ah, como sigue los estándares y además es usable, puedes saltarte la cabecera gracias a un enlace que aparece cuando sitúas el ratón en la zona superior. Un recurso que estoy viendo cada vez más.

  

Cabecera oscura

Mi favorita, así que más vale que tengas un logo que lo permita, porque con esta opción puedes ahorrarte quebraderos de cabeza con otros departamentos.

Ejmplos hay bastantes, por poner 2:

• CSS Beauty. Un ejemplo de que no es necesario robar espacio al contenido para anunciarte.

  

• La Coctelera. Cositas sencillas y bien hechas.

  

Alternativas

• Cabecera por reconocimiento de otros medios. Se da en los periódicos: El País.
• Presencia de marca constante. Bien vía iconos, tipografías, etc. P.ej. Skype.
• Clásicos: logo arriba a la izquierda y punto. Con más o menos originalidad: A list apart.
• La web es mía y hago con ella lo que me da la gana. No pongo ejemplos, pero seguro que se pueden encontrar sin escarbar mucho.

total13 revisited

El bueno de Carlos es de las pocas personas que ha dado alguna utilidad a su alojamiento y a medida que ha ido añadiendo cosas y dándole utilidad, pues su página (es sólo una página en realidad) ha ido creciendo y ahora mismo pues ha roto las costuras.

El caso es que parece que la web está muy clara, y él además también creo que tiene claro que es lo que le gusta, le interesa y le da visitas.

Podríamos estructurar total13.net así:

• Fotos
  • Conciertos
  • Festivales
  • Lugares
  • Otros
• Enlaces
• Libro de visitas

Uuuhhmmm… no parece mucho, pero es algo así como 10 veces sasaeh.com ;).

Entonces, siguiendo esta estructura y considerando que:

• Lo que más visitas atrae a la web son las fotos de conciertos
• Lo que más ilusión hace es que escriban en el libro de visitas

Pues le propongo la siguiente estructura para la home:

Ponemos el enlace al libro de visitas como un destacado arriba a la derecha, usando un recurso bastante utilizado para novedades, promociones y cosas similares.

El párrafo introductorio que define la web iría en la zona superior… es lo suyo.

Y como plato fuerte y destacado, las fotos. Hasta aquí todo es fijo, y las fotos son lo que atrae a la gente, lo más llamativo… y lo que más cambia en total13.net, así que lo destacamos, le ponemos un pequeño comentario/título a cada foto (o al conjunto) y luego enlazamos con el resto de la sección de fotos.

Por último, ponemos las secciones: fotos, conciertos y enlaces. Los podríamos poner en una columna a la derecha, pero tal y como están las secciones actualmente, he preferido dar toda la importancia a las imágenes.

Hemos creado un pié de página para aquellos textos de la columna derecha de relleno: enlace a Creative Commons, correo y he añadido un enlace RSS, ¿por qué no poner un RSS con las últimas imágenes/conciertos/…?

Si os vale y os apetece hacer cambios, he dejado el prototipo en MS Visio en /files/bitacora/total13.vsd. Ahí hay una alternativa con pestañas o menú principal… quizá convendría hacer una de 2 columnas, ¿alguien se anima?

El fin del amateurismo

Obviamente, no es nada sexual ;). Desde que Internet es un medio de comunicación y diversión de masas, se han podido ver los cambios año a año.
Las webs iniciales repletas de artificios y movimientos, han dado paso a webs totalmente profesionales, y no me refiero a las webs de grandes empresas, posiblemente las que más tardan en mover los resortes para actualizarse.
Así que señores, mucho me temo que es el fin del amateurismo, se acabaron las webs tradicionales, ahora hay normas, reglas, cosas que se deben hacer de esta o de aquella forma, porque así­ es como están bien hechas.
…echaré de menos los viejos buenos tiempos.