En esta ocasión, el podcast es bastante preciso y corto, y los temas que convergen son:

1. Yo no valido.
2. HTML5, CSS3 y rediseño de este sitio.

Y para ser más cabrón, desde ahora lo pueden escuchar aquí mismo (si tienen un browser moderno) a través de la nueva etiqueta <audio></audio>. Si no ven el player, pueden actualizar su navegador a Firefox ó Safari, ó simplemente bajar el archivo .zip el cual también entrego.

Escuchar (HTML5):

Bajar: Bajar Podcast 04 (13.20 min, 12.6mb, .zip)

Feed: RSS2

El diseño web no debe ser tratado como el diseño gráfico; es una disciplina tan específica que debe ser separada definitivamente como una rama independiente. Implica conocimientos de áreas propias que son disciplinas en sí. Por nombrar algunas:

• Diseño gráfico
• Psicología
• Sociología
• Marketing
• Historia
• Comunicación Social
• Arquitectura de información
• Usabilidad
• Programación

He visto muchos diseños que merecen más ser impresos que aplicados en una pantalla; comenzando por que van a pesar bastante y pasando por formas imposibles de ser realizadas mediante codigo HTML y CSS. En mi humilde opinión, un diseñador web para ser efectivo en su trabajo debe considerar por lo menos alguno de los siguiente puntos:

Tareas

Siempre recuerda: el ser humano basa su comportamiento en tareas y objetivos, y por lo tanto el lograr realizarlas. Un sitio web no es sólo una vitrina, también es una vía para lograr un potencial cliente. Nadie llega a un sitio por azar; el usuario eligió llegar a él a través de un click en un enlace, una búsqueda orgánica o por vía directa. Por lo tanto, se debe tratar de encantarlo y extender su estadía en él, y el diseño es el medio más directo para ello.

Usuario

Estudiar al usuario no es fácil y se necesita tiempo y estudio para lograr algo fidedigno. Lamentablemente, sabemos que para un proyecto web se trabaja muy rápido y con deadlines muy ajustados. Ante ello, estudios y conocimientos previos son imprecindibles.

Soporte

Siento que es muy importante conocer (pero no necesariamente dominar) cuál será el soporte final del sitio, antes de siquiera comenzar el diseño. ¿Estará alimentado por un CMS? ¿Qué posibilidades me ofrece? ¿Podré usar Flash parcialmente? ¿Qué versión? Con algunas pocas respuestas se podrá exigir más a la herramienta y no esperar tanto al aprendizaje del usuario.

Performance

No existen usuarios expertos, y todos estamos constantemente aprendiendo a través de constantes innovaciones de gente muy creativa. Pero es importante considerar que el tiempo que el usuario gasta en un sitio web es tan valioso como nuestro tiempo como profesionales creándolo, por lo tanto se debe diseñar estructuras que sean además de fácil de entender, rápido de recorrer, de cargar y de encontrar lo que se busca.

Diseño Centrado en el Usuario

En el mundo para el cual trabajamos existe un concepto muy conocido pero poco aplicado, por lo que he observado navegando. El Diseño Centrado en el Usuario es una filosofía y un proceso con el cual se busca mediante el diseño necesidades, deseos y limitaciones de una interfaz que satisfacen al usuario final del sitio web. Esto puede ser considerado como un proceso múltiple, donde no sólo se requiere que el diseñador resuelva la estética (como comúnmente sucede), sino cómo los usuarios interpretan una interfaz y su comportamiento utilizándola. Con esto, se hace imperativo una etapa de pruebas con usuarios reales (sin miedo a redefiniciones) y una etapa inicial de análisis tanto de target como de arquitectura de información.

Pienso que debemos diseñar experiencias, no productos. Si haces un producto bonito, puede que quien lo utiliza le agrade la estética y lo tenga en un lugar destacado. Pero si el usuario tiene una experiencia diferente, satisfactoria navegando, es muy probable que vuelva y que lo recomiende a otros usuarios, todos potenciales clientes.

Y ¿qué implica este diseño de experiencias?

• Pensar global: desde que el usuario carga el sitio, hasta que lo deja. Cada paso, cada elemento debe ser cuidadosamente pensado y aplicado.
• Considerar tanto la presentación del contenido para todos (accesibilidad), como la facilidad del uso de cada elemento del sitio (usabilidad).
• Desarrollar hacia el usuario, desde lo complejo del proceso a la simplicidad de la tarea.
• Diseñar mensajes, ayudas, errores y guías de navegación que apoyen y orienten al usuario, y que lo haga sentirse bien y no fracasado por no haber logrado algo.
• El contenido es el rey, por lo tanto debe ser tratado como tal y el diseño es el soporte para el mensaje que se quiera entregar al usuario a través del sitio web. Pero el diseñador debe ser hábil: puedes persuadir al usuario tanto con buenos textos como con buen diseño.

Como ven, esto es sólo un esbozo de lo que pienso debería ser un diseñador web integral, que cumpla con efectividad su tarea comunicadora y persuasiva y que finalmente pueda ser valorado como tal. Este tema queda abierto a sus comentarios, los que pueden nutrir y complementar este tema.

Este es uno de tantos artículos de este sitio que son inspirados a partir de vivencias, experiencias y conversaciones con otras personas que comparten el mismo oficio.

El comienzo

Típico proyecto web, se hizo la etapa de AI, wireframming, diseño de propuestas, se aprobó un estilo gráfico, se hicieron mejoras en el diseño y se comenzó a maquetar las páginas. Lo siguiente es una variación (más simple) del wireframe de la home (por motivos de privacidad, omito el nombre del proyecto/cliente y detalles):

Hasta aquí todo medianamente normal, pero al hacer funcionar la parte de Noticias, nos topamos con un pequeño gran detalle: en el wireframe y en el boceto se muestra que hay tabs por tipo de noticias, y además hay resumen de 3 noticias (según tipo) con fotografias a desplegarse, según pases el mouse sobre cada texto:

El análisis

¿Dónde veo un problema? Veámoslo según cada disciplina

• Usabilidad: técnicamente, intervienen 2 tabs: por noticias, que al desplazar el cursor sobre cada resumen se reemplaza por su imagen respectiva; y por tipo de noticia, que son 3 tabs. Este doble tab puede crear confusión al usuario.
• Experiencia de usuario: En total, son 9 imágenes cargadas: 3 tipos de noticias, 3 noticias por tipo; cada imagen, por el tamaño, es probable que pese cada una 20kb, lo que en total se debe cargar 180kb. Quizás no es mucho peso, pero hay que tomar en cuenta que además se cargan los banners, que son bastante grandes y pueden llegar a ser pesados…
• Accesibilidad: Para conexiones lentas, no debemos pedirle tanto al usuario si es poco probable que vaya a necesitar de esas 9 imágenes. Para conexiones desde celulares, sería un abuso.
• Desarrollo: para aminorar esa carga, podríamos cargar las noticias en los tabs según el usuario vaya haciendo click en ellas mediante AJAX; pero esto involucra un desarrollo extra que no estaba estimado.

Sinceramente, podríamos haber continuado con la construcción del sitio y ya. Pero es importante tomar en cuenta estos detalles, que al fin y al cabo hacen que un proyecto marque la diferencia.

La solución

Aún se está trabajando en ello, pero se intervendrá el diseño y probablemente se quitarán las imágenes asociadas por cada noticia, y se dejará sólo 1 imagen principal por tipo de noticia, lo que reduce la carga a sólo 3 imágenes:

Como ven, no impacta mayormente en el diseño final, pero sí será necesario cambiarlo y transparentarle esta modificación al cliente, siempre argumentando que es para mejor.

Esto es todo, como aún el proyecto está en proceso no hay desenlace (favorable o no), aún así me encantaría leer sus opiniones.

Desarrollar pensando en 3 versiones de browser de una misma empresa, cada uno menos peor que el otro, es un problema grave. En este artículo, quiero compartir mi experiencia sobre cómo lograr los menos problemas posibles, creando un layout que se vea de manera similar en la mayoría de los navegadores disponibles en el mercado. Básicamente enunciaré algunos consejos prácticos que por mi experiencia ayudan en esta ardua tarea:

Usar un buen reseter CSS.

No pretendo difundir el mío, pero sinceramente no me ha dado problemas de ningún tipo y me acompaña siempre en mis grandes proyectos. Con él, me permito reescribir los estilos que defina como prioritarios, sin perder tiempo en arreglar los defectos de IE6. Un impresindible en grandes proyectos.

Entender cómo funciona IE6.

No basta con cabecearse cuando encuentras un descalce en tu layout que piensas funciona perfecto en todos los navegadores, hasta que lo pruebas en IE6. Deberías conocer -y prevenir- que IE6 tiene problemas posicionando relative/absolute/fixed, con el modelo de caja, doble margen a elementos flotados, utilizando z-index, soportando canal alpha para archivos PNG, con porcentaje como unidad de medida, con overflow, con pseudo-classes, con min-height, max-height, min-width, max-width… etc, etc, etc. Con eso en mente, puedes evitar muchos problemas desde el comienzo.

Tener mucho cuidado con IE7.

Microsoft lo presentó como una necesaria actualización a IE6, pero fue un gran FAIL. Arregló algunos bugs, pero sacó a luz otros nuevos; realmente me intriga qué sucede con el departamento de informática de esa compañía, cómo logran caer en los mismos errores una y otra vez. El principal problema de IE7 es el uso de position: relative/absolute aunque me he deparado con algunos errores menores por ahí.

Usar meta-tag para IE8.

Siento que Microsoft se apresuró mucho en lanzar IE8, probablemente presionada por las contínuas mejoras de sus compeditores Opera, Safari y Mozilla. A raíz de esto, he visto como de una actualización a la siguiente el comportamiento de este browser respecto al renderizado de HTML y CSS es muy diferente, muy pero my diferente; a tal nivel de que un cliente reclame que su nuevo y flamante sitio no se vea bien en este navegador, y antes que yo pudiera investigar qué estaba sucediendo el cliente me comenta:

Bah, ahora se ve bien… actualice IE8 anoche y se arregló.

Mi solución hasta ahora es una alternativa que viene de la misma casa de Redmont: una etiqueta <meta> que hace que IE8 se comporte como si fuera IE7; así de simple. Hace lo mismo que el Compatibility Button, pero lo ejecuta desde el comienzo de la carga del documento:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

Probar, probar, probar…

Aunque seas un master de las hojas de estilo y del HTML, no deberías dejar para el final probar en los principales browser, y menos aún confiarte del preview de Dreameaver (grave error); debes probar casi que a cada nueva definición de propiedad. El costo de volver atrás es muy alto como para arriesgarte, no pierdas tu tiempo por confiarte demasiado. Probando en Safari y Firefox primero, luego en IE7 e IE6 para los detalles menores… pero nunca, nunca maquetar para IE: lo más seguro es que tendrás que deshacer más de lo que ya hayas hecho.

Links

• Introducing Compatibility View
• Explorer Exposed!

Es casi imposible crear una interfaz que encaje con todos los usuarios; pero aún así, es importante entregarles una variedad de opciones que les permita ejecutarlas mismas tareas de diferentes maneras, y de la que más le acomode. Después de todo, nuestra misión es no hacerle perder su tiempo con nuestros errores.

Y ¿cómo se comporta un usuario? No tengo una respuesta a esto; son muchas las variantes. Cada usuario es particular e impredecible en su comportamiento frente a un monitor, pero sí existen similitudes en lo que esperan cuando se les presenta una interfaz web:

• Quiere estar entretenido: el usuario navega por internet buscando algo interesante para sí mismo: información, juegos, pornografía, etc. Para entretenerlo, necesitas captar la atención y dirigirla hacia el objetivo de tu proyecto web. Cuando se dicta una charla, se considera que el mensaje está compuesto por un 60% de lenguaje corporal, 10% el contenido y 30% el tono de la voz. Extrapolando esto a un proyecto web, podríamos llegar a consolidarlo en un 60% de diseño, 10% de contenido y 30% del estilo en que ese contenido está redactado. ¿Conclusión? Puedes entretener al usuario con sólo presentarle lo que busca con un lenguaje acorde, mínimo.
• Quiere descubrir cosas: no necesariamente debes pensar que tus usuarios son estúpidos y que debes darle todo fácil; a ellos les gusta sentirse inteligentes y curiosear entre enlaces y conocer sus consecuencias; por algo las ventanas modales y los efectos que nos ofrecen las librerías Javascript se han hecho tan populares.
• No tiene tiempo de aprender cosas muy complicadas: bueno, tienes que hacer un balance entre no entregarles todo muy fácil, pero tampoco demasiado complicadas; siempre deberías guiar al usuario si le presentas nuevas interfaces o si tratas de innovar en alguna existente. Evita formularios complejos y con muchos pasos ya que la paciencia del usuario tiene límite.

Finalmentes ¿cómo obtener simplicidad? Claramente, no es un trabajo fácil. Sin embargo, existen ejercicios para llegar a ello:

• Enfócate en conocer tus usuarios, la audiencia que esperas lograr con tu sitio web, construir para ellos y reducir elementos innecesarios teniéndolos en cuenta.
• Creando diseños, interfaces e interacciones que logren seducir a tus usuarios en un nivel sensorial (estimulando sus emociones de alguna manera), obtendrás visitantes satisfechos y seguro volverán por más.
• Consistencia, consistencia, consistencia. ¿Mencioné consistencia? ¡Consistencia! Agrupa elementos visualmente, haz que el comportamiento sea similar a lo que el usuario espera. Por ejemplo, si defines que el estilo de tus enlaces serán subrrayados (text-decoration: underline), haz que todos los enlaces sean iguales, y no hagas que algunos no tengan subrrayados o en itálica; sólo lograrás confundir a tus usuarios.

Existe una paradoja que define muy bien lo dificil de dominar esta disciplina:

Es más simple crear una interfaz compleja porque es más complejo simplificarla.

La simplicidad toma tiempo, pero tiene su valor en los resultados.

K.I.S.S. es el acrónimo para Keep It Simple, Stupid, una manera cortés de decir Manténlo Simple, Estúpido.

¡Ah, pero no es soportado por IE6!

Mmm súper bueno, pero IE6 no lo permite…

Mejor eso no, no se va a ver en IE6…

Paralelo a esa conciencia de la que les mencionaba, han surgido corrientes más duras que mantienen proyectos que pretenden enterrar IE6 de la faz del mundo, y hasta le han dado fechas a su obituario. Mediante banners ó scripts (me incluyo con killIE), se pretende hacer notar al usuario de IE6 que hay mejores opciones; porque precisamente esa es la principal razón de porqué IE6 aún es un browser a considerar: la gran mayoría de sus usuarios no saben que existen otros, ya que fue el navegador por defecto que venía instalado en sus PC’s. Esa ignorancia nos ha afectado, y es nuestro deber hacerles ver que existen otras opciones mucho mejores, que pueden afectar su experiencia de navegación.

Personalmente he tomado una desición y postura hace un poco más de 1 año respecto a este tema: Les explico a los clientes las razones, les doy los argumentos necesarios, pruebas, estudios, estadísticas a la fecha para justificar que ya no ofrezco soporte para Internet Explorer 6.

¿Locura, no? Pues me explico.

• Ya no me limito para crear nuevas experiencias a través del diseño. Por ejemplo, utilizo PNG’s transparentes, aunque agrego un PNGfix por deferencia sólo para usuarios de ese browser.
• No me limito con las pseudo-class y selectores avanzados. los estilos degradarán bien, pero no como se verá en mejores browsers.
• Como he adquirido a través del tiempo la experiencia y la virtud de maquetar sitios cross-browser casi sin diferencias, no utilizo hacks ni comentarios condicionales.
• Utilizo librerías JS para efectos varios, pero no puedo hacer que se comporte igual como se ve en Firefox ó Safari; IE6 simplemente no puede con algunos efectos y animaciones.

Como pueden haber entendido, el sitio se verá bien tanto en IE6 como en los browsers modernos (no hay esfuerzo extra en eso), pero no tan bien y no como quisiera; ése es el soporte que ya no ofrezco y esa es mi lucha por educar al cliente y al usuario de ello.

Espero cada uno pueda dar lo suyo para que podamos evolucionar a mejores tecnologías, donde con menos esfuerzos en solucionar problemas podamos poner más energía en entregar satisfacciones. ¡HTML5 se viene, le tengo fe!

Links:

• Stop IE6 Campaign
• DiE6
• Bring Down IE 6
• End 6!

OK, es importante, pero: ¿Porqué es tan importante?- se preguntarán. Porque nuestro oficio está estrechamente relacionado con la interacción humano-computador (HCI), y de esa interacción surgen varios dilemas con los cuales no estamos acostumbrados por naturaleza. Piensen que estamos interactuando con una máquina, y esa máquina responde a nuestros estímulos (mover un mouse por ejemplo gatilla que el cursor se mueve por la pantalla). Pero esa máquina nos entrega una respuesta ‘inteligente’ a nuestro estímulo, lo que puede interpretarse como una reacción natural, pero no lo es ya que fue programada por alguien similar a nosotros para ello. Esa reacción fue adquirida por nosotros a través del tiempo, y la actual generación joven tiene a Internet y a estas interfaces ya propias, y no conocen otro mundo sin ellas.

Actualmente la psicología cognitiva es utilizada para entender y predecir el comportamiento de los usuarios ante un rediseño o una innovación. En un sitio web donde su rediseño puede afectar a miles de usuarios, esta rama de la psicología es fundamental. Aunque las desiciones y conclusiones que se tomen de aquí no son absolutas -nunca lo son cuando se estudia al ser humano; somo seres impredecibles- sí es posible amortiguar errores y que éste no sea catastrófico o hacer perder millones en inversión. Recuerdo el caso de Yahoo! cuando rediseñó su actual web, algo que aún le repercute y del cual Google está muy agradecido, y el más reciente rediseño de Facebook queriendo acercarse más al modelo de Twitter, causando un rechazo importante de sus usuarios expresado en su misma plataforma.

Pero no basta con saber cómo piensa el usuario que se enfrenta a una interfaz; también debes conocer a fondo las herramientas disponibles para sacar el máximo provecho a la información y a la interacción del usuario con ella. No es lo mismo una galería de fotos normal que una que utiliza alguna caja modal para mostrar la imagen en mayor calidad, pero ¿realmente la necesitas? ¿y la accesibilidad? ¿qué sucede si el usuario tiene javascript deshabilitado? Estas son preguntas mínimas que deberías hacerte si quieres poner al usuario frente a tu cliente.

… continuará

Esta es una joya… nunca, pero NUNCA había visto un <div> dentro de la etiqueta <title>… ¡Al parecer pretendían implementar los estándares desde el comienzo del código HTML! Quedé anonadado…

Hace mucho que debería haber escrito algo sobre este tema, pero esta espera ha sido mejor ya que he podido profundizar mi opinión al respecto. La última vez que recuerdo que un término inventado se haya tergiversado tanto y aún así puesto tan de moda fue comenzando el milenio, con AJAX que aún vende como pan caliente. Pero ahora me he llegado a asustar del mal entendido que abunda en el sector, y cómo gente relacionada con el marketing venden productos y aplicaciones como 2.0 y que no tienen nada que ver con el concepto original del mismo. Mucha de la culpa la tenemos nosotros quienes nunca definimos bien su significado ó los alcances del concepto.

Primero, me gustaría listar algunas ideas de lo que NO es la Web 2.0:

• Web 2.0 NO es AJAX, jQuery, Mootools, script.aculo.us ó Dojo; estos elementos soportan una nueva manera de mostrar el contenido de la Web, no la hacen
• Web 2.0 NO es RSS, pero sí cómo ésta ayuda a la llegada de la información más rápida y limpia al usuario que la pide
• Web 2.0 NO se trata de tecnología
• Web 2.0 NO se trata de programación
• Web 2.0 NO son elementos gradientes, que parezcan plástico o con reflejos; por lo tanto NO se trata de diseño
• Web 2.0 NO es Orkut, Facebook, MySpace, MSN y demases. Medios sociales han existido desde las BBS donde se compartían archivos; ICQ, IRC…

Este término fue acuñado por Tim O’Reilly y su equipo sólo para denonimar al conjunto de charlas (Web 2.0 Conference) que estaban dando a inicios del 2004; por lo tanto se ha concluído que es un término meramente comercial para fundar la web, para ayudar a que la internet fuera nuevamente rentable luego del burbujazo de las .com del 2001. Pero quiero ir más allá de eso. Me gustaría mostrar y explicar el fundamento real de la era anterior, la denominada Web 1.0 y la en superación, Web 2.0 para una pronta Web 3.0.

Es todo sobre información

Compartir información, aumentar el conocimiento a través del colectivismo, agregar valor singular mediante acciones comunitarias. Eso resume lo que significa realmente Web 2.0. Se trata de aumentar el conocimiento, el valor real de la información a través de lo que cada uno de nosotros, usuarios, podemos aportar.

Es el trabajo que se ha hecho con Wikipedia, la controvertida enciclopedia más completa y actualizada en la historia de la humanidad. Es lo que cada uno de los usuarios aportan para aumentar esta información, mediante la experticia de cada uno de ellos.

Es lo que se hace con del.icio.us, donde cada uno aporta lo que le interesa mediante links y se comparte a través de las etiquetas (tags)que se agregan a cada una de ellas. Ya no tienes tus bookmarks para tí sólo en tu browser; ahora los compartes para aumentar el conocimiento colectivo a través de tus intereses.

Son los comentarios de los weblogs, donde se construyen contenidos mucho más interesantes a partir de las opiniones de los lectores (muchas veces me entretengo más leyendo los comentarios que los propios artículos).

Es dejar que la web la construya el usuario, y no el editor frívolo detrás de una pantalla y que mediante el teclado ingresa texto que es inequívoco e irrestricto, lo que sería una definición simplificada de Web 1.0.

Ya por el otro lado, tenemos la hipotética Web 3.0, ó Web Semántica, donde la información es procesada mediante metadatos por máquinas (webservices) que entienden y satisfacen los requerimientos de los usuarios y de otras máquinas que usan contenido web; deriva de la visión romántica de Tim Berners-Lee de una web universal de intercambio de información, datos y conocimiento. Pero nuevamente, son ideales que poco a poco van tomando forma.

Por supuesto que el tema da para mucho más, pero con esto dejo zanjado las ideas que se están malinterpretando en el medio. Finalmente cada uno es quien los maneja como quiere, pero cada uno también es responsable de lo que crea. Y todos sabemos lo que sucede cuándo se especula mucho sin argumentos que lo fundamenten… los cimientos terminan por ceder.

Links:

• Not 2.0?
• What Is Web 2.0
• Semantic Web