sasa eh

Al parecer, la usabilidad es lo contrario del marketing

O al menos con esa sensación me voy a casa algunos días.

Siempre he pensado que el marketing, lo que pretende es dar a conocer, resaltar un producto que es ya de por si bueno, o que al menos tiene algunas características o virtudes que le hacen sobresalir frente a otros de la competencia.

Coca-Cola no da la felicidad, pero está rica (con ron).
Yo odio conducir, pero reconozco que los BMW son buenos coches.

Que luzca, que se vea, que salga el mejor perfil.

Pero, como decía un anuncio, La potencia sin control, no es nada.. Si el maldito coche es inmanejable o me deja tirado cada 2 por 3, ten por seguro que no me compro ningún BMW más… con la pasta que cuestan.

Por eso, en mi mente enferma, lo primero siempre debería ser el producto.

Estupendo, tengo un buen producto… que pena que la gente que lo conoce, no tenga ni idea de utilizarlo. Utilidad + usabilidad. Que tu producto resulte útil y sencillo de manejar. Que no necesite manual de uso (todo el mundo puede realizar búsquedas en Google, ¿verdad?), que sea lo más sencillo y claro posible Que cumpla tus expectativas y que te resulte útil. De verdad, que sea útil.

Si el BMW no anda, o no sé conducirlo porque me han cambiado los pedales de sitio… te lo quedas, que no llego al trabajo. Que si, que es muy bonico, que la línea es un primor, y la campaña tiene un eslogan fetén.

Segundo, utilidad y usabilidad.

Ahora es el momento de venderlo. Pero no me enseñes fotos de modelos que lo mismo venden braguitas que un Kalashnikov. Personalmente (y yo soy muy mío, lo reconozco), considero que la mejor forma de vender algo, es demostrando que es, efectivamente, el mejor en su gremio. Citando nuevamente un anuncio Busque, compare y si encuentra algo mejor… ¡cómprelo!. Pues claro que si.

Pero eso no mola. Es mejor que resulte imposible saber lo que compras y cuanto te va a costar (compañías de viaje), o compararse con la competencia (compañías telefónicas).

En el mundo web, creía que esto estaba más que superado, porque es mucho más fácil que el usuario y el cliente te pongan en tu sitio si algo no funciona. Pero siempre queda algún irreductible (como el que realizó la campaña de Nissan considerada, por cierto, un éxito a pesar de la pésima experiencia de usuario).

Pues bien, no dejemos que la realidad nos estropee una bonita postal, que eso es lo que la gente quiere, ¿no? Bonitas postales.

En fin. Que gran coche, si funcionase.

Esta web, ¿de qué va?

Con esto de que la web 2.0 es terriblemente sencilla de usar y las aplicaciones sólo proporcionan una función pero, oye, una función muy bien resuelta, muchacho, pues a veces se les olvida decir de que va la web, que es lo que hace, para que me tengo que logar, para que co** sirve ese buscador enorme y rosa.

Creí­a que era una de las cosas fundamentales: cuando un usuario entre en tu web, debe saber en que consiste. Bastante sencillo, en la mayorí­a de los casos.

Con todo el buzz 2.0 (a ver cuando lanzan el SP1), parece que todo el mundo sabe de antemano de que van las nuevas webs que se van reproduciendo… y no es así.

Hoy me ha pasado con hulu. Hace tiempo que no vivo entre vosotros y no tení­a ni repajolera idea de que era eso de julu, así­ que pasé por delante de un post, hice clic en www.hulu.com y… un gran logo, una serie de… ¿banners? y formularios para el mail y para logarme, pero… ¿para qué? Ni idea.

Me tuve que leer el post (un refrito de 7 u 8 iguales) para saber lo que era hulu… y saber que no me interesaba.

Primera aproximación a los microformatos

Bueno, tení­a una ligera idea de lo que eran los microformatos, en base al buzz que se genera en la web, pero nunca me habí­a detenido a leer con algo más de detenimiento acerca de ellos.

Básicamente los microformatos son una forma estándar de introducir información semántica dentro del (X)HTML.

Para ello, no hay que hacer realmente nada raro, se trata de utilizar el atributo class con valores estándar y significativos: tanto para el usuario como para el ordenador.

No se trata de una perversión del uso de class: According to the HTML4 spec, the class attribute is a general-purpose attribute for user-agents. Microformats are a perfectly acceptable use for the class attribute; the class attribute does not only apply to CSS..

Algunos son muy comunes. Por ejemplo todos estamos acostumbrados a las vCard para identificar a una persona. Con los microformatos, las vCard, se tranforman en hCard, y se puede representar como:

<div id="hcard-Juan-Nadie" class="vcard">
<a class="url fn" href="http://www.sasaeh.com">Juan Nadie</a>
<div class="org">sasa eh</div>
<div class="adr">
<span class="region">La Rioja</span>
<span class="country-name">España</span>
</div>
</div>

Lo importante no es la organización en divs, ya que puedes colocarlo como te venga en gana, lo importante es la estructuración de las class que son los que dan la semántica a ese trozo de código (X)HTML.

Enlaces:

• Microformats.org
• Microformats: More Meaning from Your Markup

Lector mal-herido

Joder, es simplemente… glorioso!.

Lo que yo sé de USABILIDAD no lo sabe nadie.

Aplicando el sentido común

Voy de sorpresa en sorpresa. Hace una semana, más o menos, me enteré que cierta cadena de supermercados, cuyo nombre no recuerdo, empezó a ordenar los estantes de una manera atípica, digamos, para lo que se estila en el gremio.

Esta cadena, ha puesto al lado de la zona de entrada todas las ofertas de las que dispone ordenadas de forma temática y con los productos que más se consumen al principio… y a la altura de la vista :o. ¡Revolucionario!

No contentos con esta iniciativa, han quitado esa sabia tendencia de los carritos a irse hacia un lado, y ahora el usuario tiene pleno control sobre ellos.

O son unos visionarios o piensan que los usuarios no son estúpidos y que cuanto antes compren, antes dejarán sitio para los demás.

Otro ejemplo de aplicación del sentido común a campos donde la manipulación de los usuarios es un arte, es el de los anuncios de TV.

En los tiempos de la cadena única, los anuncios tenían una duración razonable. No había ni competencia, ni una excesiva necesidad de dinero. Luego, se pasó a exprimir al espectador, con bloques de anuncios contínuos que apenas permiten ver las películas, bloques de anuncios asimétricos (cortos al principio y eternos cuando ya se tiene enganchado al espectador), publicidad más o menos subliminal, patrocinios de series… Y por fin, entradillas a anuncios del tipo:

Volvemos en 60 segundos… 59… 58….

¡Genial! ¡La invención de la rueda!.

Sabiendo lo que duran los anuncios puedo calcular si me da tiempo a hacer algo, y si son sólo 30 segundos… pues puedo esperar, ni siquiera tengo que hacer zapping, es poco tiempo y me puedo perder el comienzo.

Y ayer… ayer, fue el gran día. Me atraparon. Vi un anuncio y lo vi porque quise. ¿El método?

Volvemos en 1 anuncio.

¡Un (1) anuncio! Siendo sólo 1 no me puedo mover del sitio ni de la cadena. Bravo por la ETB.

Ahora tengo que ir un día de estos a IKEA y ver si soy capaz de salir de su laberinto en menos de 1 hora… deseadme suerte.

…The Times They Are a-Changin’

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.