Vamos a hacer un experimento: Si usted está viendo este sitio web en Firefox, vaya al menú “View > Page Style” del programa y escoja la opción “No Style”. Verá que la página se ve como sigue:

GuerrillaPop luego de apagarle el estilo y las imágenes

La mayoría de las gráficas que componen la página se han ido, y la composición de la página parece más un documento para imprimirse que una página web. Las cosas aparecen en un orden lógico, con el título de la página primero, seguido por los artículos, y por último la navegación. Más aun, si usted apagara por completo las imágenes (lo puede hacer en las opciones avanzadas de Firefox), todas las imágenes son reemplazadas por texto significativo, que explica el contenido de cada una.

El código HTML que compone esta página (y el de muchas otras, incluyendo muchos blogs) está hecho de manera tal que diferentes personas lo puedan acceder desde diferentes sistemas o dispositivos y puedan tener una experiencia agradable. A esto le llamamos accesibilidad.

Considere una persona que está mirando esta página desde un teléfono celular u otro dispositivo básico que sólo puede ver texto. En ese caso la página se verá más o menos como la está viendo usted luego de nuestro experimento. La persona en el celular no ve una página bonita, pero la página se lee bien y se puede navegar sin problemas. De igual forma piense en una persona ciega que depende de softwares especiales llamados “screen readers“, que leen el contenido del sitio en voz alta por medio de una voz artificial. El mismo caso aplica; el sitio funciona porque el verdadero núcleo de la página (el contenido) está totalmente separado de las gráficas, tipografía y colores (la presentación).

Experimento, Parte 2: Ahora vaya al website de Toyota de Puerto Rico (http://www.toyotapr.com) y haga el mismo experimento. Esta vez no pasa lo mismo; en vez vemos una página vacía con un cuadro que no dice nada ni responde a nuestro ratón:

Website de Toyota PR luego de apagarle el estilo

¿Por qué sucedió esto? El sitio de Toyota PR lo diseñaron usando la tecnología Flash, que permite crear animaciones interactivas con sonido y vídeo, pero que no permite esta separación de presentación y contenido que hablamos anteriormente. De hecho, si usted ve el site de Toyota PR en condiciones normales notará que es muy bonito y las animaciones son impresionantes. Pero el sitio se rompe en cualquier cosa que no sea una computadora personal. Los diseñadores de este sitio no comprenden la idea básica de la Web. Creen que la web es una plataforma de diseño gráfico y no una plataforma de información.

No se equivoquen, Flash tiene sus usos. Por ejemplo, Cnet.com, un sitio dedicado a reseñar equipos electrónicos, complementa el material textual con vídeos Flash que le permiten al usuario ver el producto en acción. Otros fabricantes de autos utilizan Flash como parte del diseño HTML para presentar animaciones de vehículos y vistas tridimensionales. Estos son excelentes usos de la tecnología. El problema está cuando el sitio entero es en Flash. Imagínese que yo abriera Photoshop, escribiera todo el texto de este artículo allí y se los presentara a ustedes como un jpeg bien grande. Así de ridículo es hacer un sitio completamente en Flash.

Otro ejemplo: Phantomvox.com, la página del cantante Robi Draco Rosa está hecha toda en Flash, y es una de las páginas más irritantes que he visto. Tarda una eternidad en subir (aun en banda ancha) y todos los links de la navegación superior abren una ventana nueva (!). Nota adicional: Los sitios en Flash también son difíciles de mantener y actualizar; supongo que por eso han tenido el mismo diseño por casi 4 años.

En fin, estas páginas se ven de lo más “slick”, y tienen muchos gráficos de vanguardia, pero son verdaderos dinosaurios. Desafortunadamente la Web ha sufrido por mucho tiempo de diseños hechos por gente y compañías que vienen del campo de diseño gráfico tradicional (prensa, televisión, cine) y que no se han tomado el tiempo para entender verdaderamente el medio. En vez, diseñan una página Web igual que una página de revista o, peor, igual que una película o anuncio de TV. “Cómo se ve” es más importante que “cómo funciona”.

Este tema se viene discutiendo desde hace años, pero ahora cobra mayor importancia. Nos estamos moviendo hacia una Web que no está atada a la computadora personal como en tiempos anteriores. La popularidad del Wi-Fi , el Internet por celular y otras tecnologías están permitiendo el acceso al web desde múltiples dispositivos de diferentes tamaños y capacidades. Muchas tecnologías sencillas y excitantes como RSS están rompiendo con las nociones antiguas de lo que es una “página” o un “sitio web”. En este escenario la web se ha levantado una vez más como la plataforma de información por excelencia.

Y en este escenario la lección entonces debe ser: información primero, diseño después.

Presiona para mostrar los comentarios (12) o añadir un comentario. Comentarios (presiona para esconder)
  1. Albizu diciembre 13, 2005 1:06 pm

    Broder, por poco me sacas una lágrima. Esto es una de las cosas que continúo viendo a menudo en la gente que son artistas gráficos y se vuelven “artistas de websites” sin entender bien como debe ser la experiencia para el usuario final del sitio.

    No sabes cuanto me molesta el no poder accesar información básica desde mi Treo 650 para conseguir algo tan sencillo como un número de teléfono de algunos websites por el empeño (o ignorancia) de los diseñadores a usar frames, tablas, flash, la falta de texto alterno para las imágenes, etc.

    Oh, y deberías dedicarle un post a nuestros amigos que les encanta ponerle música y efectitos de sonidos a los websites sin darle la opción al usuario de apagarlo antes de empezar. Un buen ejemplo es PrimeraHora.com donde de vez en cuando sale un banner en flash para una sección de cráteres en las carreteras o algo así. El mismo tiene un sonido de un carro chocando el cual suena extremadamente duro y tienes que espetártelo cada vez que regresas a la página principal. No hay escapatoria.

  2. Eugenio diciembre 13, 2005 3:05 pm

    Exelente, tremendo artículo, de verdad que no sabía nada de lo que enseñastes aquí. Tenía cierta sensación de que el HTML iba a ser eventualmente reemplazado por el Flash, pero ya veo por que no.

    Eso de “información primero, diseño después” está bueno. Es como para escribirlo en una pared de un baño.

  3. Rafi diciembre 13, 2005 9:54 pm

    La accesibilidad y la usabilidad en la web son temas que han sido bien estudiados y resulta super interesante leer los hallazgos y las recomendaciones, ya que muchas veces van contrario a lo que de primera intención parece sentido común. El site de Jakob Nielsen (http://www.useit.com/) es la autoridad en este campo, y he leído algunos libros tremendos. De seguro continuaré el tema en artículos siguientes. Gracias por los comentarios.

  4. AsharEdith diciembre 13, 2005 10:13 pm

    Gracias por esta información. Deberas que no conocía ese feature de Firefox y la importancia de describir las fotos cuando diseño mis blogs. Hasta fui a probar a ver si pasaban la prueba… Y sabes qué la pasaron. jejeje
    ~Edith

  5. Fernando Freire diciembre 13, 2005 10:52 pm

    Primero que nada me siento tan alegre de conseguir el primer blog en Puerto Rico que habla algo de diseño web con perspectiva orientada al usuario. Rafi, estoy en el proceso del diseño y desarrollo de mi blog personal donde los temas principales son: Accesibilidad, Arquitectura de Información, SEO, SEM, Usabilidad, Experiencia de Usuario, Diseño de Interacción, Diseño de Información, Estrategia de Contenido, Web 2.0, Ajax, Web Marketing, Getting Things Done (GTD), Convetion Rate, Landing Page Optimization, Project Management, Redacción para el Web y otros.

    Llevo mucho tiempo trabajando como Web Developer y Especialista de Accesibilidad en Sección 508. Viajo contantemente a conferencias mundiales (Jeffrey Zeldman, Nick Finck, Kelly Goto, Jakob Nielsen, Jeffrey Veen, Jesse James Garrett, Nick Usborne’s, Molly E. Holzschlag, Eric Meyer, etc), pero al llegar a PR es como si me dieran un baño de agua fría. Tenemos mucho que compartir.

    El proyecto del blog me ha tomado un tiempo ya que tengo varias metas establecidad que quiero alcanzar con el mismo. He estado observando tu trabajo desde hace un tiempo y creo que podemos contruir algo muy bueno en cuanto a comunidad de blogs se refiere. Por favor escribeme a mi email. El blog lo publíco en enero de 2006. Estoy seguro que el contenido del mismo te encantará. Me enfocaré en artículos, ideas, estudios que he llevado a cabo relacionados al tema de accesibilidad. Bueno espero tu email.

  6. Rafi diciembre 14, 2005 11:16 am

    ¡Ah, excelente! Espero su blog con mucho interés. Todos esos temas me interesan muchísimo y sé que a otras personas también. Será un espacio para tener discusiones muy interesantes sobre estos temas.

    También le envié un correo, saludos.

  7. Albizu diciembre 14, 2005 10:07 pm

    Fernando, me llama mucho la atencion tu blog. Acuerdate soemterlo a PuertoBlogs tan pronto salga y cuenta conmigo para cualquier cosa que necesites. Este es un tema que debemos tratar de difundir lo más posible.

  8. GuerrillaPop » Blog Archive » Los Diez Errores Más Comunes en el Diseño de Blogs diciembre 15, 2005 11:18 am

    […] Continuando con el tema de la accesibilidad y usabilidad en la Web, Jakob Nielsen, uno de los más reconocidos expertos en el tema, ha publicado una lista de los diez errores más comunes en el diseño de blogs. Es una lectura interesantísima. En resumen, estos son los diez errores principales: […]

  9. Eugenio marzo 17, 2006 1:48 am

    Rafi: Estaba usando este artículo para algo que escribí para mi trabajo, y me acordé eso que dijiste de que:

    “Imagínese que yo abriera Photoshop, escribiera todo el texto de este artículo allí y se los presentara a ustedes como un jpeg bien grande”

    ¿Esto también aplica para los documentos en PDF? ¿O no tiene nada que ver?

  10. Rafi marzo 17, 2006 10:44 am

    Eugenio: La misión principal de la tecnología PDF es presentar información destinada a ser impresa en papel, punto. En el contexto de un sitio web, el PDF nunca debe utilizarse como el método principal de entrega de información, por muchas de las mismas razones que Flash (y por otras razones, como bien describe Jakob Nielsen en un artículo acerca de los PDFs).

    Si la meta es que la pieza de información sea accesible y que aproveche las ventajas que ofrece la web en términos de accesibilidad, entonces te recomendaría que el texto estuviera en HTML. El PDF entonces se puede publicar también pero como complemento al HTML, en caso de que alguien quiera imprimirlo para leerlo en otra ocasión, o para llevárselo a alguien que no tiene acceso a la red.

  11. Tinta Digital :: Algunas obsevaciones sobre Blogalaxia :: April :: 2006 abril 12, 2006 1:37 am

    […] E. Uso de muchas imágenes: Vivimos en una cultura altamente visual, por lo que el rol de las imágenes y el diseño es fundamental para que el proyecto sea atractivo. En Blogalaxia, una pequeña imagen acompaña casi cada párrafo del portal, pero ojo, sin sacrificar contenido por estilo. […]

  12. Tinta Digital » Mi asistente personal…digital marzo 19, 2008 12:51 am

    […] He estado, en estos día, redescubriendo la web desde una pantalla de 2×3 pulgadas, y la verdad es que las cosas se ven bastante bien. Las versiones móviles de los portales que visito son mucho más sencillas y al grano, más volcadas a la información que al diseño gráfico. Pero se leen bien, sin dificultad alguna .Por fin, casi 3 años después, fue que entendí aquel articulo de Guerrilla Pop “La Web como Medio de Información vs. Medio Gráfico”. […]