“El contenido precede al diseño. El diseño en ausencia de contenido no es diseño, es decoración”

De Jeffrey Zeldman en su Twitter.

Es una necesidad que día tras día hemos visto reflejada en muchos de nuestros clientes, quienes frente a la intención de lanzar su tienda en la red se encontraban con precios de implantación altos y en muchos casos desproporcionados con sus necesidades reales.

Por este motivo nos decidimos a desarrollar una solución de diseño web para comercios que cubriese las necesidades reales que nuestros clientes solicitan.

Aquí podéis ver las características,  posibilidades del producto y algunos ejemplos de tiendas:  Diseño web tienda online

Ayer mismo salió la actualización que arregla este bug (10.0.22.87), puedes bajarla desde Adobe: http://get.adobe.com/flashplayer/

CATEGORIAS

Las categorías son como carpetas – son colecciones de cosas relacionadas a un tema. Esto, en realidad, no es estrictamente cierto porque en el mundo digital puedes adjuntar más de una categoría a tu contenido, pero la función es la misma – categorizar.

La principal ventaja de las categorías es que hay una cantidad fija de ellas – y si quieres usarlas apropiadamente entonces tampoco deberían haber demasiadas. Esto permite que la gente escudriñe rápidamente por la lista para escoger el tema que desean navegar. Las categorías le dan estructura a tu contenido y una fácil experiencia de navegación.

La desventaja de las categorías recae en quien publica. Primero, tienes que decidir la lista de categorías que quieres usar. Usualmente esto es más difícil de lo que parece porque necesitas asegurarte de que no hay demasiadas categorías que podrían tener muchas o muy pocas entradas en ellas. No tiene sentido crear una categoría si todas tus entradas estarán incluidas en ella o si sólo hay una entrada. Y segundo, cuando publiques contenido nuevo, necesitas decidir en qué categoría ponerlo. Esto no es demasiado difícil si mantienes corta tu lista de categorías y asignas categorías múltiples al contenido, pero aún requiere un poco de esfuerzo.

ETIQUETAS

Las etiquetas son el equivalente digital a las etiquetas reales – pequeñas etiquetas que adjuntas a las cosas. Las etiquetas tienen una ventaja por sobre las categorías en el hecho de que no están pre-configuradas. Cuando adjuntas etiquetas las escribes manualmente y tienes la libertad de escribir lo que quieras. Si una etiqueta no existe todavía, lo hará una vez que aprietes publicar. No hay necesidad de preocuparse por encontrar una categoría existente para poner dentro la entrada – sólo escribes las etiquetas que crees representan mejor el contenido.

La desventaja de las etiquetas está en la experiencia de navegación. Una de las maneras más populares de navegar por etiquetas es usando algo llamado una “nube de etiquetas”. Una nube de etiquetas es un gran bloque de etiquetas ordenadas una después de la otra, teniendo cada enlace de etiqueta su propio tamaño dependiendo de cuántos objetos están etiquetados con ella.

Las nubes de etiquetas son geniales para mostrar qué clase de entradas son las más publicadas en el sitio, pero navegar por etiquetas es difícil debido a que usualmente hay demasiadas de ellas. El otro problema es que están desequilibradas – puede haber sólo una entrada adjuntada a una etiqueta en particular, o puede haber miles.

OK… ENTONCES ¿CÚAL USO?

La respuesta es… depende. Depende de qué clase de contenido tienes y cómo funciona tu búsqueda.

Si tienes un sitio como YouTube o Flickr donde los usuarios suben su propio contenido y tienes miles de millones de envíos, entonces las categorías no serán tan útiles como las etiquetas, porque pueden haber miles de entradas para cada categoría. Esto hace que la navegación sea muy difícil y en la mayoría de los casos imposible. Cada etiqueta puede también contener miles de entradas, pero habrán muchas otras etiquetas con una entrega de resultados mucho más enfocada; y usar combinaciones de etiquetas también reducirá grandemente el número de resultados por los cuales tengan que navegar tus visitantes.

Si el buscador de tu sitio usa etiquetas cuando busca a través de los registros, entonces las etiquetas pueden y van a agregar un claro beneficio. Si tu buscador es algo muy simple, como un buscador externo de Google que simplemente filtra los resultados por la dirección de tu sitio, entonces las etiquetas pueden no ser tan útiles porque no serán usadas para encontrar los resultados.

Yo no creo que para los blogs tenga mucho sentido etiquetar. Seguro, puede ser más fácil etiquetar cosas, pero la experiencia de navegación no es tan genial. A veces tendrás sólo una entrada adjuntada a una etiqueta – ¿de qué sirve eso? La gente generalmente querrá encontrar entradas sobre un tema particular, y esa es la función primaria de las categorías. Es más, no estás limitado a usar sólo una categoría – adjunta un par si sientes que la entrada es relevante para ambas.

Esta es sólo mi visión acerca de las etiquetas y las categorías, estoy seguro de que algunos de ustedes pueden estar en desacuerdo. Estoy muy interesado en escuchar si usas etiquetas o categorías en tus blogs (¿o ambas?) y por qué prefieres una por sobre la otra – por favor escribe tus pensamientos en los comentarios de más abajo.

(Fuente: artículo de usabilitypost.com escrito por Dmitry y traducido por Sara Salazar para nerv. )

Boletines de Email.

Como nuevo contratado en el servicio de marketing por email de AWeber, mi asignación fue crear un par de docenas de nuevas plantillas para los boletines de email en HTML de nuestros clientes. Para el diseñador web que gusta del código limpio, un email en HTML es un recuerdo de un pasado afligido. Después de semanas de trabajo e incontables dolores de cabeza, entregué el material. También aprendí mucho acerca de diseñar para email.

Para ayudarte a evitar muchos de los dolores de cabeza que tuve durante la fase de prueba, aquí hay algunas cosas que puedes hacer para crear emails en HTML que se vean geniales.

¡Crea Múltiples Cuentas de Email Para Probar!

Si sólo vas a tomar un consejo de este artículo, por favor que sea éste. Como diseñadores, pasamos mucho tiempo creando la experiencia de usuario perfecta en la web y probando esa experiencia en múltiples plataformas. Sin embargo, cuando se trata de email, demasiados de nosotros fallamos en entregar la misma atención al detalle.

Parecido a hacer pruebas para la web, crear un layout de email que se vea igual en cada cliente de email puede ser una pesadilla absoluta.
Para asegurarse de que tus suscriptores recibirán tu mensaje en la forma en que se propuso – ¡prueba en todo lo que puedas!

Esto incluye pero no se limita a:

- Yahoo
- Gmail
- AOL
- Windows Live Hotmail
- Outlook 2007
- Outlook 2003
- Lotus Notes
- Thunderbird
- Entourage
- Mac Mail

¡Pero espera – hay más!

Algunos de estos clientes de email tienen versiones múltiples, cada una de las cuales hará el render del CSS y HTML de forma diferente.

Esto es parte de un HTML siendo rendereado por la versión antigua de Yahoo.

Aquí está exactamente el mismo email siendo rendereado por la nueva versión de Yahoo.

Diferencias sutiles, debo admitir. Pero suficientes de esas diferencias sutiles resultan en un diseño descuidado. Y si eso no es suficiente… el navegador de internet del usuario también puede jugar un papel en cómo se renderea tu diseño.

Ahora, antes de que arrojes tu computador por la ventana con frustración… los siguientes pasos te pueden ayudar a descartar la mayoría de los problemas en las pruebas.

Diseña Tus Emails Para Que Degraden Con Gracia

Me sorprende ver a algunos de los anunciantes más grandes rompiendo reglas de usabilidad básicas acerca de los email en HTML.

Aquí hay algunos lineamientos para tener en cuenta:

• Nunca confíes en las imágenes para comunicar información importante… especialmente una de gran tamaño. Una gran mayoría de los clientes de email tienen las imágenes desactivadas por defecto. A menos que el usuario tenga cierta iniciativa… le habrás enviado un lindo mensaje en blanco.
• Nunca confíes en las imágenes de fondo para hacer legible el texto. Asegúrate de que tu texto tiene suficiente contraste con o sin las imágenes activadas. Outlook 2007, por ejemplo, no mostrará las imágenes de fondo en las celdas de las tablas incluso si las imágenes están activadas.
• Entrega un enlace para las personas que tienen problemas viendo tu mensaje. Ok, esto no es absolutamente necesario – pero es una buena idea darle a tus suscriptores la opción de ver tu mensaje en su navegador web (especialmente si es un diseño particularmente pesado en HTML).
• Usa etiquetas ALT en las imágenes importantes. ¡No puedo enfatizar esto lo suficiente! Con las imágenes deshabilitadas por defecto, las etiquetas ALT descriptivas son tu última mejor oportunidad de convencer al usuario para que active las imágenes.
• Cuando uses etiquetas ALT, reduce el desorden. Completa las etiquetas ALT que importan y deja las otras en blanco (Nota: ¡No he dicho que las excluyas!)

Este es el encabezado de un email que recibí de Discovery Health:

Tomé esta screenshot desde mi cuenta de Gmail – antes de activar las imágenes. ¿Ves cómo el texto ALT “bullet” y “spacer” se interponen?

Agregar etiquetas ALT a elementos que sólo sirven para propósitos de diseño desordena el diseño y distrae de tu mensaje.

¡Usa Tablas Para Estructurar Tu Layout

¿Ah? ¿Pasé todo este tiempo aprendiendo CSS y ahora tengo que volver a las tablas? Cuando se trata de diseño para email, las tablas son lo mejor como si fuera el año 2003 – son lo más cercano que tenemos a los estándares.

Unas pocas cosas que tener en cuenta:

• Asegúrate de configurar todos los atributos de tabla disponibles donde sea posible. Eso incluye el cellpadding, cellspacing, borde, valign, ancho y alto.
• Las tablas anidadas son tus amigas. Asegúrate de usar la sangría apropiada para un código limpio y fácil de leer.
• Usa el atributo de fondo en una celda de tabla para configurar imágenes de fondo. Esta es la manera más fácil de sobrepasar los fondos que no se vean en Gmail.

Nota: Tus imágenes de fondo se comportarán como si estuvieran en mosaico… así que planifícate de acuerdo a eso.

• Toma en cuenta que las imágenes de fondo aplicadas a tablas o divs no están soportadas por Outlook 2007. De hecho, la única manera de usar una imagen de fondo en Outlook 2007 es aplicándola el cuerpo del email, lo cual por supuesto no está soportado por otros clientes de email como Gmail, Yahoo, o Windows Live Hotmail. Fantástico, ¿verdad?

Yo tampoco lo pensé así.

¡Usa Estilos Inline Cuando Codifiques Tu CSS

Algunos clientes email populares ignoran el código dentro de tus etiquetas de encabezado. Gmail y Hotmail son culpables particulares que se vienen a la mente.

Con tu layout configurado en formato tabla, es hora de aplicar estilos a tu texto e imágenes. Aquí hay algunas pistas y trucos para asegurar que tu mensaje se vea casi idéntico en cada navegador:

• Usa etiquetas de saltos de línea como reemplazo al padding vertical. Para alterar la cantidad de espacio que consumen, intenta rodearlas con tags de span y configura un tamaño de fuente mayor o menor.
• Usa estilos inline repetitivamente y a menudo. Aplicar una etiqueta de fuente a una tabla madre no significa necesariamente que será traspasada a todas sus hijas. Asegúrate de configurar estilos inline en todos tus elementos HTML.
• Aplica estilos inline detallados a los enlaces. Especialmente para los usuarios de Gmail – debes configurar estilos específicos para cada enlace. De otra forma, heredarán la fuente por defecto, tamaño y color configurada en cada navegador del usuario.
• Rodea tus imágenes con tags de span y configura los atributos de las fuentes para estilizar tu texto ALT de acuerdo a ellas. Esto te permite estilizar tu texto ALT, haciéndolo más legible cuando las imágenes están desactivadas.

¡Usa el Formateo de la Bandeja de Entrada de Gmail Para Tu Provecho

¿Sabías que la línea de asunto de cada email enviado a una cuenta de Gmail está seguido por los primeros fragmentos de código de texto dentro de ese email en particular?

¡Por qué no usar eso en tu provecho!

Arriba hay una imagen de mi bandeja de entrada de Gmail.

Ambos boletines tienen el mismo contenido de encabezado.

Sólo una diferencia – El Boletín 1 saca provecho del formateo de la bandeja de entrada de Gmail.

Aquí está cómo lo hice:

Inserta una imagen de 1px por 1px como el primer elemento en tu email. Rodea la imagen con etiquetas de span configurando el color de la fuente con el mismo color del fondo. Cualquier texto que pongas en las etiquetas de ALT para tu imagen de 1px por 1px ahora reemplazará ese fragmento de código de google en la bandeja de entrada del usuario.

¡Es tan simple como eso! Esta sutil diferencia destacará tu mensaje del resto de los emails en la bandeja de entrada del usuario.

¡Entonces, ¿Ahora Qué?

He hecho mi mejor esfuerzo para compartir algunas cosas que hago cuando creo emails en HTML. ¡Es tu turno! ¿Cómo lo haces para diseñar, codificar y probar tus campañas de email?

Cualquier recomendación, pista o truco que quieras agregar será muy apreciada por la comunidad de tus compañeros diseñadores.

(Fuente: artículo de nettuts.com escrito por Bob Ricca y traducido por Sara Salazar para nerv. )

Eso es lo que se les ha ocurrido a los creativos de antena 3:

Nada más verlo se me ocurren otras fórmulas para asociar el logo con los números. Esto es un primer boceto con un trabajo mínimo solo para mostrar la idea que se me ha ocurrido:

¿Qué os parece?

¿Sí? Bueno, estás en buena compañía – todo el mundo ha tenido una experiencia similar así que no hay necesidad de sentirse avergonzado por ello. No es tu culpa: es culpa de tu software.

¿Por qué? Porque el software debería “saber” que formamos hábitos. El software debería saber que después de hacer clic en “OK” incontables veces en respuesta a una pregunta, probablemente también haremos clic en “OK” esta vez, incluso si no queríamos hacerlo. El software debería saber que no tendremos la oportunidad de pensar antes de desechar nuestro trabajo en forma accidental.

¿Por qué debería saber estas cosas? Porque los diseñadores de software deberían saber que formamos hábitos, querámoslo o no.

La formación de hábitos es realmente algo bueno: nos ahorra el problema de tener que pensar cuando nos enfrentamos a banalidades de interfaz y disminuye la probabilidad de que nuestro tren de pensamiento se descarrile. En el caso del diálogo “¿Está seguro de que desea terminar?”, nuestras manos han memorizado cerrar-y-hacer-clic como un gesto continuo individual. Eso es bueno, porque la mayoría de las veces no queremos pensar en la pregunta – sólo queremos hacer lo correcto. Desafortunadamente, nuestros hábitos a veces nos hacen hacer lo incorrecto: ni siquiera tenemos tiempo de darnos cuenta de nuestro error hasta después de haberlo cometido.

Así que, como diseñadores somos llevados a un principio general de interfaz: Si una interfaz va a ser humana, debe respetar la habituación.

Soluciones posibles

¿Qué tal si se hace la advertencia más difícil de ignorar? Una advertencia sutil no será tomada en cuenta, así que usaremos todas las trabas: haremos pestañear la pantalla y que suene un fuerte sonido estridente para asegurarnos de que el usuario está prestando atención. Y aunque lo intentemos, eso todavía no funcionará. A medida que la advertencia esté más en nuestras narices, más rápido querremos alejarnos de ella (al hacer clic en “OK”) y más errores cometeremos. La cosa es, no importa qué tan en nuestras narices nos presente el computador la advertencia, aún cometeremos el mismo error – hacer clic en “OK” cuando no queríamos. Pero sigue sin ser nuestra culpa: mientras sea posible habituarse a ignorar el mensaje, nos habituaremos, y entonces cometeremos errores.

¿Qué tal si se hace la advertencia imposible de ignorar? Si es la habituación en el lado humano lo que está causando el problema, ¿por qué no diseñar la interfaz de manera que no podamos formar un hábito? De esa manera siempre estaremos forzados a detenernos y pensar antes de responder la pregunta, así que siempre escogeremos la respuesta que queremos. Eso resolvería el problema, ¿cierto?

Este tipo de pensamiento no es nuevo: Es el acercamiento del tipo “escriba la palabra número x de esta frase para continuar”. En el juego Guild Wars, por ejemplo, borrar un personaje requiere hacer clic primero en un botón de “borrar” y luego escribir el nombre del personaje como confirmación. Desafortunadamente, no funciona siempre. En particular:

• 1. Causa que nos concentremos en la tarea inhabitual del momento y no en si deseamos desechar nuestro trabajo. Así, la advertencia imposible de ignorar es apenas mejor que una advertencia normal: Terminamos perdiendo nuestro trabajo de todas maneras. Esto (perder nuestro trabajo) es el peor pecado posible de un software.
• 2. Es remarcadamente molesto, y debido a que siempre requiere nuestra atención, necesariamente nos distrae de nuestro trabajo (lo cual es el segundo peor pecado de un software).
• 3. Siempre es más lento y causa más trabajo que una advertencia estándar. Así, comete el tercer peor pecado – requerir más trabajo nuestro del que es necesario.

En el ejemplo de Guild Wars, los puntos dos y tres no son particularmente aplicables, porque borrar un personaje es una acción poco frecuente. Sin embargo, si tuviéramos que escribir el nombre de un documento antes de que se nos permita salir de él sin guardarlo, lo encontraríamos muy trabajoso.

¿Qué hemos aprendido? Que las interfaces que no respetan la habituación son muy malas. Hacer la advertencia más grande, ruidosa, e imposible de ignorar no parece funcionar; de cualquier forma que lo miremos, las advertencias nos llevan a un gran y oscuro pozo de interfaz. Así que deshagámonos de la advertencia en su totalidad.

Deshacer al rescate

Tan sólo remover las advertencias no libera a nuestro trabajo del riesgo, pero usar una función de “deshacer” lo hace. Permíteme decirlo nuevamente: La solución a nuestras miserias con las advertencias es deshacer. Con un deshacer robusto, podemos cerrar nuestro trabajo con temerario abandono y estar seguros en el conocimiento de que siempre podremos recuperarlo. Con deshacer, podemos hacer que ese horrible sentimiento de “¡ups!” se vaya al recuperar nuestro trabajo. [1]

Debido a que formamos hábitos, nunca podremos garantizar que no tendremos un momento “¡ups!”. En vez de eso, los diseñadores deben aceptar que eso ocurrirá y diseñar de acuerdo a ello. Cada vez que tengamos la oportunidad de desechar trabajo, el computador nos debe permitir deshacer nuestras acciones.

Esto nos lleva a una de las mantras más básicas e importantes del diseño de interfaz: Nunca uses una advertencia cuando te refieras a deshacer.

Google Mail es un ejemplo sobresaliente de esta mantra. Cuando borras un e-mail, inmediatamente te da una opción para deshacer esa acción. ¡Qué humano! Esto evade limpiamente el tema de las advertencias (así como el tema de la visibilidad de la opción de deshacer). Cuando cometemos un error (lo cual estamos destinados a hacer) no es algo demasiado costoso porque simplemente podemos deshacerlo. Con deshacer, pasamos menos tiempo preocupándonos y más tiempo haciendo nuestro trabajo.

Fig.1. No es demasiado tarde. Gmail le da a los usuarios la opción de deshacer sus mensajes borrados.

Por supuesto que esto es sólo una capa de deshacer – y Gmail va incluso más lejos. Después de que borras un mensaje, no se pierde para siempre… permanece en el basurero para que puedas recuperarlo si decides después que en realidad no querías borrarlo.

Lamentablemente, esta es una lección que Google Calendar no ha aprendido aún. Y, como se predijo, he borrado eventos que en realidad no quería. A veces he borrado el evento equivocado, lo cual es particularmente malo porque entonces ni siquiera sé qué es lo que he borrado. Sin deshacer, no hay manera de averiguarlo.

Fig. 2. ¡Ten cuidado! Google Calendar no le permite a los usuarios deshacer sus borrados accidentales.

En realidad, ni siquiera Google Mail ha comprendido completamente la lección. Cuando remueves una etiqueta de Gmail, aparece una de esas odiadas advertencias. ¿Por qué Google puede hacerlo tan bien en un lugar, y unos cuantos clics más adelante hacerlo tan mal? Quizás porque el “pensamiento de advertencia” está tan arraigado que requiere un esfuerzo heroico librarse de él. Incluso las compañías que generalmente son bastiones del buen diseño, como 37 Signals, hacen esto derechamente mal.

Fig.3. La aplicación de 37 Signals, Highrise, provee advertencias pero no la opción de deshacer.

Usar una advertencia en lugar de una opción de deshacer es el camino de menos resistencia desde el punto de vista de un programador, y no requiere ningún nuevo pensamiento desde el punto de vista de un diseñador. Pero eso no es una excusa para que nuestros computadores sean inhumanos.

Conclusión

Las advertencias causan que perdamos nuestro trabajo, desconfiemos de nuestros computadores, y nos culpemos a nosotros mismos. Una metodología de diseño simple pero a prueba de tontos resuelve el problema: “Nunca uses una advertencia cuando te refieras a deshacer”. Y cuando un usuario está borrando su trabajo, siempre te refieres a deshacer.

Oh, y la próxima vez que veas que se usa una advertencia en lugar de la opción de deshacer, envíale al diseñador de la aplicación / sitio web un simpático e-mail sugiriendo que implementen una característica de “deshacer” en su lugar. Envíale un enlace a este artículo. Veamos si podemos cambiar la manera en que la gente diseña en la web – y en el proceso hacer que la vida computacional de todos sea más humana y menos frustrante en una manera pequeña. ¡Que comience la guerra de las advertencias!

NOTAS
[1] La idea del factor “¡ups!” salió de una conversación con Laura Creighton.

Acerca del Autor
Aza dio su primera charla sobre interfaz de usuario a la edad de 10 años en la sede local de SIGCHI en San Francisco y quedó enganchado. A los 17, estaba dando charlas y era consultor internacional; a los 19, fue co-autor de un libro de física porque era demasiado joven para comprar alcohol; a los 21, comenzó a beber alcohol y co-fundó Humanized. Aza disfruta tocar el Corno Francés y rondar en su laboratorio cuando el tiempo lo permite.