Muchas aplicaciones web usan el favicon para notificar eventos, como nuevos mensajes o nueva actividad. Uno de los ejemplos más claros es Gmail, aunque también otros como Facebook o Pinterest lo usan.

Hace poco encontré una clase Javascript que permite implementar esta funcionalidad en una web: Notificon. Con esta clase, el notificar al usuario, por ejemplo, que tiene un nuevo mensaje en nuestra aplicación web es coser y cantar.

Una técnica CSS muy extendida, casi básica, es la de reemplazar un texto por una imagen usando text-indent. Con esta técnica podemos transformar un enlace en un botón, o un aburrido título en un título con fuentes especiales o con un bonito diseño. Esto último es cada vez menos necesario ya que podemos usar fuentes propias con CSS3, pero para muchas otras situaciones el reemplazar texto por imagen sigue siendo una labor del día a día.

Hasta ahora usábamos la identación negativa del texto, a la vez que dábamos una imagen de fondo al elemento; así, conseguimos que se muestre la imagen pero el texto se desplaza fuera de la pantalla, siendo "invisible":

background: url("../images/boton.png") 0 0 no-repeat;
text-indent: -9999px;

Esto conlleva dos pequeños detalles, uno de rendimiento y otro de diseño:

1. El navegador debe "dibujar entre bastidores" una caja de 9999 píxels cuadrados, o dicho más fácilmente, una caja inmensa. Esto consume memoria, y si en una misma página usamos varias veces esta técnica (varios botones, por ejemplo) el problema se multiplica.
2. Al hacer clic en elementos con texto oculto aparecen esas horribles líneas (outlines, las "líneas de enlace") desde la izquierda de la página. Estas líneas se podrían ocultar con outline: 0; pero eso está prohibido si queremos que nuestra página sea accesible a personas con deficiencia visual.

La nueva solución

Un nuevo planteamiento para resolver esta situación, propuesto por Scott Kellum en Zeldman.com, identa el texto al mismo tamaño que la caja contenedora, pero al no hacer wrapping y esconder el overflow, el texto no aparece ni cambia el tamaño de la caja:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Esta solución evita los dos problemas del clásico -9999px, siendo una solución mucho más elegante y limpia.

En muchas webs encontramos cajas de texto con limitación de caracteres. Esto suele ser debido a limitación en el tamaño de datos que la web quiere soportar, o a limitación de espacio en pantalla. Cada desarrollador elige lo que cree más conveniente. Pero cuando esta limitación interfiere con la usabilidad del sitio web ya entramos en el ámbito del fallo, por no hablar de chapuza.

Esto viene a raíz de que hace un rato me he estado registrando en un nuevo servicio web de proyectos y servicios freelance, cuyo nombre mantendré en la intimidad. En el momento de introducir mi descripción, me aparece una caja de texto. Escribo una descripción que considero adecuada y... error, máximo 500 caracteres. Problemas de usabilidad:

1. En ningún momento se indica que exista esta limitación, sólo aparece el mensaje de error al tratar de enviar un texto de más de 500 caracteres. Esto implica que alguien puede perder mucho tiempo redactando un texto que luego no podrá guardar.
2. No hay un contador de caracteres, de forma que la única forma de saber si el texto ya es correcto o si aún es demasiado largo es pulsando una y otra vez el botón de Guardar y recibiendo, una y otra vez, el mensaje de error.

Estos dos problemas derivan en una experiencia de uso nefasta. El buen trabajo hecho en el resto del diseño del portal se va al traste cuando se trata de rellenar un apartado tan importante como es la descripción del usuario del servicio y te encuentras con esta... desfuncionalidad. Una de las reglas de oro de la usabilidad es no sorprender nunca al usuario. No se le puede pedir al usuario que rellene un texto y darle la sorpresa de que hay un límite de tamaño del que no se le ha informado previamente. Ni tampoco se puede pedir al usuario que vaya contando caracteres uno a uno.

Además, es un error tan fácilmente subsanable que confío en que lo arreglen cuanto antes mientras este servicio aún luzca el cansino cartel de Beta en su logo. Para arreglar este problema de usabilidad basta con poner un mensaje al mostrar la caja de texto, indicando el tamaño máximo del texto a introducir, y poner un contador de caracteres que de feedback al usuario de la longitud del texto que lleva escrito (hace más de un año que liberé maxlen, un plugin jQuery para dotar de esta funcionalidad -y más- a un textarea).