Estaba pensando en esto mientras navegaba la tienda online de Dell.
A todos nos gusta el Video en flash, pero funciona bien en todos los ordenadores ?

No lo creo.
Solía gustarme la tienda online de Dell, que en mi opinion es uno de los mas atractivos e innovadores sitios de e-commerce online, pero hoy no me gustado tanto la experiencia Dell. La razón ?
En las paginas de presentación de producto los videos en flash de gran formato y las animaciones 3D hacen que por momentos el sitio se congele entorpeciendo bastante la navegación de la pagina.

La PC que uso en casa no es tan vieja :
Intel Pentium III, 931 MHz, 384 MB RAM

Esto me deja pensando :
Cuantas personas usan ordenadores viejos y lentos como este ?
Cuantos de ellos eligen dejar el sitio cuando estos flash videos congelan todo el ordenador ?
La experiencia “eye candy” aumenta el negocio o también reduce parte de las ventas online ?

El Flash video y las animaciones son geniales para mostrar productos si son usadas racionalmente. Cuando se usan de forma no apropiada simplemente se comen todos los recursos del CPU reduciendo la usabilidad del sitio y entorpecen la experiencia de navegación.

Todo esto me hizo recordar del libro “Creando Killer Websites” que promocionaba los flash intros y otras atrocidades del diseño web. Pronto fue probado que los Killer Websites Mataban el Negocio ( Citando a Jakob )

Mi recomendación es:
Usar video, pero testearlo con ordenadores lentos, con 10 ventanas abiertas y con memoria reducida para asegurarse que el video sigue su curso sin arruinar la navegación del sitio. Por que este puede ser justo el caso de un cliente potencial intentando comprar algo en tu tienda online.

(Traducción del original, con apuntes personales identificados por el texto en Italic )

Estos son los lugares donde es útil usar Ajax: (Si desean colaborar con ideas el sitio original tiene un wiki colaborativo)

1. Interacción con Formularios
   Los Formularios son lentos. My lentos.
   • A LA VIEJA USANZA
     Para Editar una categoria en un bookmark de del.icio.us:
     Haces click en Editar enlace para cargar el formulario de edición ( CLICK), despues editar el campo (CLICK) y luego le das al botón submit ( CLICK y espera). Luego retornas a la pagina previa y haces scroll para ver el cambio que has hecho.
     (RESUMEN :4 CLICKs mas scroll)
   • CON AJAX
     Haces click en editar para instantaneamente cambiar las categorias y un otro click mas para enviar el cambio y verlo en el mismo sitio. Sin recagar la página y sin scroll (RESUMEN : 2 CLICKs)
   • Subcategoría de Formularios: Menus de selección enlazados.
     Imagina una camiseta con 3 opciones; Tamaño, color y estilo. Cuando miramos el inventario de productos, sabemos que hay Large, Rojas y Polo en stock pero no la combinación que hemos elegido…
     Para el usuario es frustrante realizar el proceso de elección y recibir un error en la pagina de CheckOut de que esta fuera de stock con lo cual tendrán que volver al proceso de selección y reconfigurar el item ( Esto usualmente hace que perdamos tiempo y que directamente nos vayamos de la tienda )
     Usando AJAX, puedes chequear las opciones de stock en el mismo momento que el usuario selecciona el item y dar los mensajes correctos sin que el usuario tenga que terminar el proceso para darse cuenta que su elección no esta en la tienda.
   • Subcategoría de Formularios: Autosave.
     Un usuario escribiendo en Word. Que boton se usa mas ? El de GRABAR.Con javascript se puede hacer algo mejor. No solo puedes hacer un Grabar y Continuar – puedes también autograbar!
     Recuerda de decirle al usuario de usar esto, ya que estar al corriente de la grabación automática relaja a mucha gente. (En mi caso personal odio perder documentos o escrituras en proceso)
     Los relojes de cuenta-atras que indican cuando se hace el autosave son los preferidos, por razones obvias.
2. Navegación jerarquica en arbol.
   Primero que nada, las aplicaciones con arboles jerarquicos profundos son generalmente una pesadilla. Las topologías planas y las búsquedas y categorización suelen trabajar bien en la mayoría de los casos. Pero si una aplicación realmente lo necesita, usa Javascript para to administrar la topología la interface grafica, y Ajax para evitar para disminuir la carga en el servidor cargando los datos jerarquicos. Por ejemplo:
   Consume demasiado tiempo leer discuciones teniendo que recargar una nueva pagina para ver respuestas de una linea.
3. Comunicación usuario-a-usuario rápida.
   En una aplicación para enviar mensajes instantaneos entre personas, algo que realmente molesta es tener que refrescar la pagina una y otra vez para ver respuestas. Las respuestas deben ser instantaneas, los usuarios no deberían tener que refrescar la pagina obsesivamente.
   Incluso Gmail, que mejora el viejo hotmail/yahoo mail inbox, en el refresque automatico del inbox, no lleva Ajax al limite al punto de notificar nuevos emails instantaneamente.Aclaración: Todo este proceso de refresque automático utiliza bastantes recursos (e hilos) en el server. Si lo multiplicamos por la cantidad de usuarios que utilizan un servicio nos podemos dar cuenta de que es normal que no refresquen cada segundo con lo cual no es instantaneo. Sería imposible mantener tal cantidad de conexiones abiertas simultaneamente incluso para un gigante como Google. En mi opinion es por eso que no es instantaneo sino cada NN segundos (Lo cual es suficiente al menos en mi caso) (Traducción en proceso…)
4. Votaciones, Opciones Si/No (checkboxes), Ratings submitidos por el usuario.
   It’s really too bad there are no consistent UI cues for Ajax submission, because submitting a vote or a yes/no response is so much less painful when the submission is handled through Ajax. By reducing the time and impact of clicking on things, Ajax applications become a lot more interactive – if it takes a 40 seconds to register a vote, most people would probably pass unless they really care. If it takes 1 second to vote, a much larger percentage of people are likely to vote.
5. Filtros y la manipulación datos.
   Applying a filter, sorting by date, sorting by date and name, toggling on and off filters, etc. Any highly interactive data manipulation should really be done in Javascript instead of through a series of server requests. Finding and manipulating a lot of data is hard enough without waiting 30 seconds between each change in views, Ajax can really speed this up.
6. Textos comunes hints/autoterminación.
   Entering the same text phrases or predictable text phrases is something software/javascript can be good at helping out with. It’s very useful in del.icio.us and GMail, for quickly adding tags/email addresses.
7. Consultas largas /Llamadas remotas
   If a query or a call to a remote webservice is going to take a long time that cannot be avoided, Ajax works well to manage the time a user waits for the call to return. For example, SWiK uses Ajax to fill in results from webservices detailing new projects: a user doesn’t have to wait for Google webservice to return before starting to edit a new project
8. Operaciones de cómputo costosas
   Unfortunately, Javascript has a tendency to be quite slow. Complex math or number crunching just isn’t Javascript’s forte. Additionally, heavy Javascript computation can slow the basic user interface to a crawl. An XMLHTTPRequest call can be helpful here, pushing expensive computations to beefier remote servers.
9. Salvar del lado del Servidor
10. Encuadramiento interativo y moverse a traves de listado de datos

La importancia del azul es muy relevante cuando definimos estilos CSS para los colores de los links. Como escribe Jakob:

Textual links should be colored and underlined to achieve the best perceived affordance of clickability (With a few exceptions)

Y tiene un extensa investigación sobre el tema. Mi opinion personal es que tienes que reconocer siempre las areas clicables y no deben confundirse con otros textos para poder navegar correctamente. Esto incluye el no usar textos subrayados en azul o otros colores sino estan enlazados a algún sitio.

Una de las otras interesantes excepciones es que los enlaces subrayados incrementan la accesibilidad para usuarios con poca visión. Lo cual indica que estos usuarios que ven mal, resaltan estas lineas subrayadas y pueden leerlas mejor. Otros veran esas mismas lineas subrayadas y querran clicarlas, y eso lleva a una buena reflexión para pensar en el color y la combinación legibles de nuestros links.

En este blog escribire sobre muchas cosas relacionadas con Internet y Tecnología y una de ellas que es muy importante actualmente es la usabilidad.Jakob Nielsen define en su libro Prioritizing Web Usability:

Usabilidad es el atributo de calidad relacionado a cuan facil de usar es una cosa. Se refiere a cuan rapido una persona puede aprender a usar algo.

Trabajando para la web la usabilidad es esencial por que si el usuario no puede usar nuestra interface simplemente se ira de nuestro sitio.
En esta entrada del blog, hablare sobre los labels (etiquetas), esos pequeños pedazos de html que ayuda a reducir la cantidad de kilometros diarios echos con el raton cada dia.

Como dice Garret, estoy obsesionado con la usabilidad y la eficiencia, y totalmente convencido de que “Si necesita instrucciones, no funciona de primera”. Y los formularios sin el label tag no son vistos o no estan en sentido común de los desarrolladores. Desafortunadamente, incluso grandes sites como Amazon.com todavia no usan este simple y poderoso tag.
Y lo refuerza con:

Los Labels no solo incrementan la accesibilidad, pero también hacen el area clicable de los radio buttons y los checkboxes mucho mas grandes incrementando directamente la usabilidad. (Para leer mas sobre esto, chequear la Ley de Fitt’s.)

También, los lectores de pantalla para ciegos associan el label con su respectivo input tag, que por supuesto es algo muy bueno.

Definición de Labels
Relaciona una etiqueta a un control. Si haces clic en el texto dentro del elemento label este debería accionar el control.

Podemos ver este ejemplo en Google.co.uk:
Search:

the web

pages from the UKAsi seria sin labels:
Search:
the web

pages from the UKEn este ultimo ejemplo necesitamos hacer clic en el radio button para seleccionarlo. Usando labels haremos que el usuario gane tiempo y pueda hacer clic directamente en el texto relacionado para realizar su selección.Explicación HTML <form name=”input” action=”">
<input type=”radio” name=”sex” id=”male” />
<label for=”male”>Male</label>
<br />
<input type=”radio” name=”sex” id=”female” />
<label for=”female”>Female</label>
</form>

Read the rest of this entry »