Imagen en el submit de un form

Adlatina es un portal de comunicación. Tiene unos cuantos años online, si trabajan en publicidad lo conocen por obligación (si trabajan y no lo conocen, que esperan?). Algo que me molesta, y mucho, es que en su formulario de login no funciona el «enter». O sea, pongo mi email, mi password, toco enter……… y muevo el mouse hasta el boton «Ingresar» para hacer click y loguearme. Horrible…

El otro día me puse a pensar en esto, porque simplemente no puede ser que suceda. Pensé un poco más, y la conclusión es que si está hecho de esa forma (y hace años), es porque no saben hacerlo bien. Alguno dirá «pero es un botón de submit, cómo no van a saber hacerlo?». Corrección, es un botón de submit con una imagen, es otra cosa.

Veamos el código que usaron para este botón sin usabilidad:

<div class="box">
	<div class="content2">
		<a tabindex="7" class="boton" title="ingresar" onclick="document.formulario.submit();" href="#"><span>ingresar</span></a>
		<div class="clear"> </div>
	</div>
</div>

Como se puede ver, no hay ningún elemento de formulario que haga el submit. En vez de un <input type=»submit»>, hay un <a><span>, donde el atributo onclick del <a> es un javascript que hace el submit de un form. Espantoso.

Según mi teoría, el que hizo este formulario no supo cómo resolver el poner una imagen en el submit del formulario. El problema con los input, es que cuando se trata del <input type=»submit» /> el css empieza a comportarse extraño con todos los navegadores. Mientras en Firefox funciona, Explorer falla siempre. Entonces, en su lugar hay que usar un elemento que no lo usa nadie, el <button>.

El código quedaría así:

<div class="box">
	<div class="content2">
		<button tabindex="7" type="submit" class="boton_usable"><div><span>ingresar<span></div></button>
		<div class="clear"> </div>
	</div>
</div>

A la etiqueta button se le puede poner como contenido un <div> o un <span>, si son maquetadores y no conocían <button>, se acaban de dar cuenta que es su nuevo mejor amigo.

Les dejo el link con el formulario tal cuál como está hoy, y mi propuesta. Chusmeen el CSS.

Keep It Simple, Stupid

Hoy leo que ejecutivos de Silicon Valley se quejan de la simplicidad de interfaz de Google, una de las cosas más ridículas que leí en los últimos meses.

Esta opinión sólo se entiende cuando hay otro negocio por detrás. Bajo ningún punto de vista tolero que esto se haya dicho en serio. De otra manera, el desconocimiento en usabilidad que estos ejecutivos muestran es alarmante.

En su momento escribí que el éxito de Google se basa exclusivamente en su diseño minimalista, habiendo sido el primer buscador en entregar resultados de una búsqueda en forma clara y veloz… hace diez años se requerían respuestas con la misma urgencia de hoy, pero con conexiones de dial-up.

Simple

KISS… siglas para «Keep It Simple, Stupid».

VibeStreamer, cómo un buen diseño se convierte en una descarga

De qué manera puede medirse o comprobarse que el diseño de un sitio web es correcto? Sin dudas, se necesita monitorear el a nuestros visitantes para saber si las acciones que lleva a cabo son las pretendidas.

Hoy entre a un sitio web, y luego de navegarlo entre 5 y 10 minutos, supe inmediatamente lo bien que estaba diseñado. El sitio es Vibe Streamer, llegué mediante a PuntoGeek, y es la página de un software para hacer streaming de tus mp3 desde cualquier máquina con internet.

El sitio no tiene nada espectacular, no va a ganar un premio por su originalidad en la web. Pero su diseño es eficaz, en menos de 10 minutos leí de qué se trataba el software, requerimientos de la máquina, documentación básica, y por supuesto, lo descargué.

Tarea cumplida para el diseñador. El mensaje llegó, claro, rápido, y se logró una acción por parte del usuario, en este caso una descarga (que supongo es la esperada).

Mañana estaré probando Vibe Streamer desde el laburo, y tendrá su reseña en este blog, pero hoy felicito el trabajo en la página.

Rediseño (y van…)

Desde hace unos días que hay un nuevo diseño en el sitio.

Qué tuve en cuenta esta vez? Aprendí mucho desde la última vez que actualicé el sitio, especialmente en CSS, por lo que hay una optimización muy grande en las hojas de estilo.

Otro tema sobre el que estuve leyendo fue accesibilidad, por lo que poco a poco estoy convirtiendo al sitio en una web 100% accesible. Hay una barrera importante en lo que se refiere a la galería de arte digital, por lo que representa en sí a veces se complica hacerla completamente accesible.

Hace un tiempo escribí sobre esto mismo, por aquél entonces el sitio figuró en el puesto Nº44, luego del rediseño subí al puesto Nº23. Nada mal, esta vez hecho un poco más a conciencia.

Ahora valido en casi todas las páginas html, feed y css.

[Valid RSS]
pondría el de CSS, pero en este momento no funciona.

Por supuesto, si están usando el IE6 seguro que todo se ve mal. No me importa, ya estoy cansado de pensar en un navegador que tiene 6 años de antigüedad. Acaso alguien hace software para W98, o W95?

Usabilidad y Accesibilidad

En los últimos meses me vi más interesado en temas como la usabilidad y accesibilidad. En realidad, usabilidad es algo sobre lo que siempre leí, no así accesibilidad. No estoy seguro el por qué del cambio, al menos no recuerdo ningún hecho en particular.

Ayer me encontre con eXaminator, una herramienta desarrollada en Accesible.com.ar que te permite evaluar un sitio para detectar errores.

Este sitio (al menos la portada) figura en el puesto 44º, nada mal por ser la primera vez que someto el sitio a un análisis seriamente, sumado al hecho que al hacer el sitio no tuve presente en mente la accesibilidad como la mayor directiva.

Esta semana (de a poco) voy a ir cambiando lo necesario para corregir errores.

Batalla Naval

Otra vez no puedo tener la frecuencia de posteo que me gusta. Ya podré encajar todo como corresponde.

En la batalla de navegadores hace un tiempito mencioné algo sobre el Opera mini, y ahora se sabe que Firefox quiere participar del mundo de dispositivos móviles. Qué se puede esperar? Que Opera tenga competencia, porque si bien Firefox es conocido por incorporar más tarde funciones de Opera, ambos son buenos navegadores.

Y el explorer? Bueno, como diseñador hay que contemplar todo, incluso que haya gente que use un programa tan malo, entonces lo que pasa es que el ie7 puede instalarse en cualquier XP, sea este pirata o no. Hasta hace poco, la versión del sistema operativo debía ser original (o debías intentar de que lo sea ;)), ahora ya no más restricciones. Por qué? experiencia del usuario: qué es más simple, software en regla y bajar un navegador mediocre, o software pirata libre con navegadores open source y downloads sin restricciones?

Parece que este no ha sido el año de Microsoft bajo ningún punto de vista (cuak).

Y qué estuviste haciendo que te mantuvo ocupado?

En las próximas semanas (como mucho, a fin de mes) ya estarían terminados gran parte de los sitios que estoy haciendo ahora. Más orgulloso de unos que de otros, pero me gustan todos. En un proyecto en particular se dió todo lo que hay que evitar para tener un óptimo resultado. Consecuencia: hoy estoy corrigiendo errores de un sitio entregado hace más de un mes.

Lo positivo, todo fue previsto, eran de esperar errores (y muchos) en el desarrollo de un sitio con sistema de autogestión e informes cuando había que entregarlo en ¡dos días! Pero bueno, esas fueron las circunstancias. Ya está un 99% terminado, en cuanto esté todo voy a comentarlo por acá.

Hoy leo que en México se firma manifiesto de Usabilidad y Accesibilidad en sitios del gobierno. Qué bueno que se tomen este tipo de iniciativas en Latinoamérica. Hacer un sitio usable es el trabajo de cualquier diseñador web, es su obligación, es lo que marca la diferencia con alguien que no maneja conceptos de diseño.

Según mi experiencia el problema está en el cliente (ojo, no tiene la culpa), que no tiene por qué estar al tanto de este tipo de sitios. La realidad marca que el cliente (y el usuario) común no navega este tipo de sitios. Mi tarea es explicarle de su existencia y beneficios, pero la realidad es que flash vende… mejor dicho, el cliente compra flash. No tengo nada en contra de flash, lo usé como el mejor ejemplo de lo que el cliente piensa que es lo mejor. Flash es bueno para unas cosas, para otras no. Mi autocrítica es que debo ponerme más firme y explicar mejor los beneficios de este tipo de diseño.

Ya llegará el día…

Al día

Me llevó todo el domingo leer los cientos de post que acumulé durante las últimas ¿3 semanas? Este es uno del motivos de mi posteo anterior, me gustaría dedicar tiempo a leer los post del día durante la semana, pero terminaba cansado como para ponerme a leer todo.

Como es de esperar de un blogger (no sé si entro del todo en esta categoría), leo blogs que escriben sobre blogs. Y la verdad, tengo que depurar eso. Le doy la razón a Fabio en que la peor categoría es la que eligen Adsense como tema de lectura.

Cuando me preguntan sobre posicionamiento-Google-Adsense les hablo sobre mi experiencia con este sitio, en donde sin ser un gran posteador, sin tener en cuenta las palabras claves, sin hablar del iPhone, ni tantas otras cosas, mi sitio no sólo está indexado como corresponde, sino que no se vuelve una tarea imposible encontrarme en la web. No hice nada especial para ello, de hecho, debería dedicarme más a generar contenido. Porque si hay algo que no hago es copy/paste de otros sitios. Aparte de que tengo ideas para ampliar este sitio, pero por ahora no puedo dedicarme.

Volviendo un poco sobre lo que estuve leyendo, el spam siempre será motivo de queja, y cómo agregan y desarrollan mejores captchas. En breve estaremos relanzando el sitio de Cadmus, con el mejor captcha que encuentro, formularios en flash. Flash lo tienen instalados todos, y me parece un buen lugar en donde utilizarlo.

Y ya que me fui para el lado del desarrollo, AJAX está bueno, pero no deja de ser Javascript, o me equivoco? Lo admito, tengo que estudiar más el tema, pero de ser así el problema con AJAX es el mismo que con javascript, si el usuario lo tiene bloqueado, se vuelve innavegable, al menos que su función no gravite en la usabilidad del sitio. Como dije, tengo que leer sobre el tema.