mga/blog

Un problema de diseño web puede tener muchas soluciones, no todas necesariamente correctas (lo correcto o apropiado de la solución depende en buena medida del contexto en el que se utiliza). Esto lo había mencionado antes, pero vale la pena ampliar. Tomemos, por ejemplo, algo aparentemente muy sencillo: la restricción de acceso a un sitio. ¿Cuándo es el momento apropiado para pedir el login del visitante? Algunos sitios web permiten que el usuario los utilice sin exigir un registro a menos que éste quiera interactuar con otros usuarios:

… otros, en cambio, excluyen por completo a usuarios nuevos:

… y también hay casos donde el tipo de servicio que ofrece el sitio hace obligatoria la identificación del usuario:

Eso sin tener en cuenta si es necesario exigir que el usuario se registre ni los detalles que se pueden ver en las imágenes como el link “¿olvidó su clave?”, la casilla “recordar mi identidad en este computador” y otros elementos que cambian de un sitio a otro. La “respuesta correcta” depende de diferentes factores como el modelo de negocio del sitio, el carácter costo/beneficio de ese paso (o pasos) adicional (suele ser dispendioso registrarse en un sitio web, al punto de perder potenciales usuarios en ese punto a menos que el contenido o servicio que ofrezca sea valioso para el usuario), el tipo de servicio que se ofrece, y más.

El caso del login, a pesar de aparentemente ya “estar inventado”, muestra la gran cantidad de consideraciones que deben tenerse en cuenta al crear interfases web (o de cualquier tipo). Pero bueno, como diría el Chapulín Colorado: ¡que no panda el cúnico! ya que existen lo que llaman:

Patrones de diseño web

Un patrón de diseño web (web design pattern) describe la solución óptima a un problema común de diseño web en un contexto específico:

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern. [1]

Una definición bastante darwiniana. Los patrones se generan a partir de una especie de evolución, donde la mejor solución tiende a prevalecer. Los problemas pueden ser muy simples: cómo presentar grandes cantidades de información que viene organizada alfabéticamente; o muy complejos: cómo manejar cambios de estado por medio de transiciones. En internet hay muchas inciativas por agrupar y categorizar esos patrones, algunas de las cuales enumero a continuación:

• Yahoo! Design Pattern Library: En Yahoo! tienen un impresionante listado categorizado de patrones que usan en sus propios proyectos acompañados de imágenes, descripción y recomendaciones. Cada patrón está complementado por una entrada en el blog de interfases.
• A Pattern Library for Interaction Design: De Martijn van Welie, holandés, PhD en Human Computer Interaction y quien ha recopilado y organizado una gran cantidad de patrones e incluye links a otros sitios similares.
• Web Patterns Project: Iniciativa de unos estudiantes de U. C. Berkeley que se preguntaron “Our primary motivation for this project was to consider why user experience, particularly around web-based user interfaces, is so poor across the Berkeley domain. Why is a good user interface so difficult to create? Why is it that at U.C. Berkeley, a leader in technology research, a place of high academic achievement and innovation, good web user experience is hard to come by?”. Este suele ser un sentimiento generalizado.

Adicionalmente está User Interface Engineering, una firma de investigación en usabilidad de interfaces. Tienen una gran cantidad de artículos en el tema.

SPORE

En otra área del diseño (juegos en este caso) pero muy afín con la teoría de la evolución está Will Wright. Mundialmente conocido por ser el diseñador de SimCity y The Sims, exitosos juegos de video: el primero creó un nuevo paradigma (no se pierde ni gana) y el segundo es uno de los más vendidos. Wright fue portada y protagonista de una edición dedicada a juegos de la revista Wired en la que habla de Spore, un juego que permitirá al jugador simular la evolución de una especie (desde un organismo unicelular hasta la conquista del espacio). El juego aún no ha sido lanzado pero las expectativas son altas. En Marzo de 2007 Wright fue invitado a las TED Talks donde hizo una breve presentación de ese juego:

Hay que admitirlo: la mayoría de las interfaces humano-computador son aburridas. Desde el lanzamiento del Mac OS en 1984 hasta el Windows Vista en 2007, empresas han intentado redefinir el paradigma de interacción. Sin embargo hasta el momento seguimos usando los mismos dispositivos de hace treinta años. En Kiss Boring Interfaces Goodbye, la revista Wired describe Leopard, la próxima generación del Mac OS que proveerá a diseñadores de interfaces con Core Animation, una librería de programación y animación nativa del sistema operativo.

Pero aún seguimos con el mouse y el teclado. En los setentas y ochentas, antes del auge de las consolas de juego, existían unas mesitas con uno o varios juegos de video incluidos. Juegos como Space Invaders en esas mesas tenían un aspecto similar a este:

Uno se podía tomar una gaseosa mientras retaba a sus amigos y esperaba la pizza. Esas mesas eran un televisor de 14 pulgadas dentro de una caja de la cual salían los joysticks y botones por un lado. Hoy día se pueden conseguir esas mismas mesas en tiendas de antigüedades (la foto tiene un link a una tienda… se reciben regalos). Hace poco Microsoft anunció Surface, una mesa con una pantalla (un poco) más grande, sensible a múltiples puntos de contacto (similar a las que ya se habían mencionado antes) y que piensan instalar en bares y tiendas por todo el mundo. Hay unos ejemplos interesantes de esa mesa en uso:

Por otro lado, Jonathan Harris, Marcos Weskamp y Aaron Koblin, tres expertos en visualización de datos, han sido reunidos por 37signals en este chat donde hablan de sus proyectos.

Finalmente, hay una presentación muy buena en TED de Photosynth, un grupo de investigación de Microsoft en el análisis de fotografías para construir modelos tridimensionales. Vale la pena verlo:

En las ya mencionadas TED Talks se hace entrega de tres premios TED anualmente. Quienes son galardonados con el premio, además de recibir los US$100,000 que le corresponden, tienen la oportunidad de pedir un deseo que cambie al mundo. Entre los ganadores del TED Prize están Bill Clinton y Bono (ganadores un poco aburridos yo sé… pueden nominar a alguien si así­ lo desean). En esta ocasión quiero destacar la entrega del premio a E. O. Wilson, un reconocido entomólogo, cuyo deseo fue crear la Enciclopedia de la Vida. El video donde Wilson hace público su deseo está en el sitio web de TED. La Enciclopedia de la Vida busca ser un meta-documento que incluya la totalidad de la información sobre todos los organismos vivos en este planeta. Cada organismo podrá tener infinita información (fotos, textos, videos) ingresada por cualquier persona en cualquier lugar (algo similar a Wikipedia pero enteramente dedicado a la biologí­a). Dicho proyecto de acceso completamente gratuito nos permitirá entender la naturaleza y nuestro lugar en ella.

La presentación de Wilson fue tan convincente que varias empresas tomaron iniciativa en el desarrollo de la Enciclopedia: un personaje donó el dominio eol.org, otros empezaron a diseñar interfases y crearon un video promocional para “vender” la idea a grandes organizaciones que pudieran donar recursos al proyecto. El video propone unas ideas interesantes para la visualización y organización de información tan compleja como la biológica.

Otra interesante iniciativa es el Genographic Project de IBM y National Geographic. El proyecto busca establecer un mapa genético completo de la humanidad y rastrear el recorrido del homo-sapiens desde sus orí­genes en África hace tan solo 60,000 años. En este caso la colaboración se hace donando información genética personal para el beneficio del proyecto (entre más diversa y numerosa la muestra genética, mejor se puede determinar el mapa).

Para contribuir es necesario enviar al proyecto una muestra de saliva propia. Hay un kit completo que incluye información impresa y en DVD sobre el proyecto y los elementos necesarios para tomar la muestra de saliva; a vuelta de correo el donante recibe su mapa genético el cual se va enriqueciendo en el sitio web a medida que otros donantes envían su muestra. Cabe anotar que el proceso de donación es completamente anónimo: no se entregan datos personales, únicamente datos generales como lugar de nacimiento y año.

En el sitio web hay un Atlas de la Expedición Humana que muestra el recorrido genético que se ha podido determinar con la información que ha sido recopilada hasta el momento.

El clima, el tráfico terrestre y aéreo, las interacciones sociales, son todos ejemplos de sistemas complejos. La complejidad hace parte de nuestra cotidianidad y la mayorí­a de la veces no somos conscientes de ello. Un ejemplo reciente de visualización de información compleja (y el debate asociado que puede llegar a generarse por discrepancia de opiniones) es el documental ganador del Oscar An Inconvenient Truth. El documental busca encender una alarma a nivel mundial respecto al problema del calentamiento global. Al margen de la controversia como tal está la eficacia del uso de gráficos e imágenes al comunicar un mensaje. Sobre este tema hay un interesante artí­culo en Adobe.com:

Information visualization is able to communicate the intricacies of global warming in a way no other discipline can. Its messages can be immediate and powerful, without sacrificing the level of detail necessary to represent the complex subject accurately.

VisualComplexity.com es un sitio web que recopila y clasifica numerosos ejemplos de visualización de información compleja. Arte, biologí­a, redes sociales y música son algunas de sus categorí­as:

VisualComplexity.com intends to be a unified resource space for anyone interested in the visualization of complex networks. The project’s main goal is to leverage a critical understanding of different visualization methods, across a series of disciplines, as diverse as Biology, Social Networks or the World Wide Web. [texto completo]

Visualizar información de manera clara y acertada es una tarea delicada: datos mal representados pueden costar vidas (como en el caso del transbordador espacial Challenger). Edward Tufte, profesor de estadística, diseño gráfico y economía en la universidad de Yale, es reconocido por su habilidad para crear gráficos informativos (infographics o infografía) y por sus constantes crí­ticas al mal uso de herramientas de presentación (como Microsoft PowerPoint) por parte de presentadores y diseñadores. The Visual Display of Quantitative Information es uno de sus libros, el cual tuvo que publicar personalmente ya que no consiguió editorial que se ajustara a sus exigencias:

No publisher would print it to his exacting standards. Tufte wanted the book to exemplify the design principles he articulated. It had to have lavish, abundant, high-resolution images and footnotes alongside the text so a reader wouldn’t have to flip pages to find a reference. The book had to be printed on thick, creamy paper and sell for a reasonable price, about $30. “Publishers seemed appalled at the prospect that an author might govern design,” he later wrote. So he took out a second mortgage at nearly 18 percent interest and produced the book himself.
The Visual Display of Quantitative Information was instantly hailed as a classic.

La cita forma parte de un artí­culo de la Universidad de Stanford dedicado a Tufte.

Visual Explanations: Images and Quantities, Evidence and Narrative, Envisioning Information y The Cognitive Style of PowerPoint: Pitching Out Corrupts Within (su crí­tica personal a PowerPoint) son otros tres libros dedicados al mismo tema con aproximaciones y ejemplos diferentes. Uno de los ejemplos más interesantes que utiliza Tufte es el diagrama de la incursión y posterior retirada de Napoleón a Rusia elaborado por Charles Joseph Minard en 1869… se recomienda ver el diagrama.

El diseño de interfaces humano-computador es otro tema relevante: por medio del software, los usuarios (diseñadores, escritores, economistas) quieren hacer algo (dibujar un boceto, escribir un guión, realizar cálculos). Depende de la interfaz que se diseña el facilitar esa tarea. Joel Spolsky, quien formó parte del primer grupo de desarrolladores de Microsoft Excel® antes de trabajar por su cuenta, dice al respecto:

It has been said that design is the art of making choices. When you design a trash can for the corner, you have to make choices between conflicting requirements. It needs to be heavy so it won’t blow away. It needs to be light so the trash collector can dump it out. It needs to be large so it can hold a lot of trash. It needs to be small so it doesn’t get in peoples’ way on the sidewalk. When you are designing, and you try to abdicate your responsibility by forcing the user to decide something, you’re probably not doing your job.

Lo anterior forma parte de una serie de artí­culos que escribió y que vale la pena leer.

WIRED NextFest es una feria anual promovida por la revista WIRED que busca hacer reminiscencia de las grandes ferias mundiales de los siglos 19 y 20. Grass es una instalación interactiva desarrollada por The Barbarian Group que fue presentada en el NextFest 2006. En ella habí­a una pantalla gigante generada por cuatro proyectores. La imagen proyectada se ve afectada por el movimiento de las personas cerca a la pantalla. Se recomienda ver el video. El movimiento del pasto se modela a partir de un proceso matemático llamado Ruido Perlin que también se utiliza en software 3D para generar texturas, humo y otros efectos que necesiten de una apariencia natural. Daniel Shiffman, profesor en el Interactive Telecommunications Program del Tisch School of the Arts de NYU, tiene una serie de cursos que abordan esa temática del modelado de la naturaleza a partir de la programación. Shiffman tiene unos ejemplos y explicaciones de Ruido Perlin desarrollados usando Processing.

A continuación un discurso de Steve Jobs (con subtí­tulos) en una ceremonia de grado de la Universidad de Stanford:

Mind the gap es un letrero recurrente en el metro de Londres que sirve de inspiración para dos proyectos que vale la pena mencionar:

Hans Rosling es profesor del Instituto Karolinska en Suecia (el instituto que determina el merecedor del premio Nobel de medicina) y fundador de Gapminder.org, una organización sin ánimo de lucro que busca dar acceso y nuevo significado a la información estadística de las naciones (ingreso per cápita, crecimiento económico, población, cantidad de niños por mujer, etc.). Rosling fue invitado a las ya mencionadas TED Talks donde hace una presentación impresionante que replantea algunos mitos sobre los llamados paí­ses en desarrollo. Vale la pena verla, dura apenas 18 minutos. Rosling desde Gapminder desarrolló un software de visualización de dicha información estadí­stica el cual, con la colaboración de Google, ha puesto al alcance de cualquier persona en tools.google.com/gapminder. Es una herramienta basada en Flash que le permite a uno comparar diferentes datos de casi todos los paí­ses desde 1975 (!) y animarlos (!!!). En la imagen capturada de Gapminder se puede ver la comparación de la expectativa de vida (eje vertical) con el ingreso per cápita (eje horizontal) de Colombia (verde oscuro), Argentina (verde claro) y Corea del Sur (rojo) en su evolución desde 1975 hasta 2004:

Cabe anotar que el eje horizontal tiene una escala logarí­tmica (aumenta mucho a medida que se mueve a la derecha).

Ana Vélez es una colombiana que actualmente hace su tesis de maestrí­a en el departamento de Communications Design and Technology en Parsons en Nueva York. Mind the Gaps es el nombre de un ejercicio en el cual hace una reflexión gráfica/subservisa sobre las relaciones entre las diferentes metrópolis contemporáneas a partir de mapas de metro. Un resumen se puede ver en el siguiente video:

Hablando de mapas, Worldmapper.org tiene una interesante colección de mapas donde se distorsiona la forma original de los paí­ses en función de diferentes datos estadí­sticos.

Nota: recientemente Google adquirió Trendalyzer, el software detrás de Gapminder.

Actualización: a continuación la charla de Hans Rosling en TED:

Este video, o una de sus muchas versiones, se puede encontrar en la web. Resume parte del trabajo de Jeff Han, del Courant Institute of Mathematical Sciences de NYU, con interfases gráficas con varios puntos de contacto (pantallas táctiles donde se pueden usar varios dedos simultáneamente). La capacidad de detectar múltiples puntos de contacto presenta posibilidades muy interesantes en términos de interacción con información, de las cuales se hacen algunos ejemplos en el video:

Han también participó con este trabajo en los TED Talks (conferencias de las que ya se habí­a hecho mención antes acá). Han no es el único que trabaja con este tipo de interfases. Bill Buxton, músico, diseñador y profesor de la Universidad de Ontario, ahora trabajando en Microsoft Research, hace una recopilación de interfases táctiles que van desde 1982 y en el cual provee un contexto histórico y teórico.

Por otro lado, llegó a mi este video de un robot serpiente anfibio (como en “puede moverse en el agua y en la tierra”) desarrollado por el Hirose Lab, parte del Departamento de Ingenierí­a Mecánica y Aeroespacial del Tokyo Institute of Technology. Como su nombre lo indica, el movimiento del robot está basado en el movimiento de las serpientes. Vale la pena ver el sitio web del laboratorio para mayor información.

Snake es también el nombre del protagonista de Metal Gear Solid, juego de video creado por Hideo Kojima y uno de los más exitosos del Sony PlayStation. Lo revolucionario del juego, creado en 1987 y con varias extensiones posteriores, era su aproximación al combate: la premisa diferenciadora se basaba en evitar al máximo la confrontación directa (en contraste con otros juegos de la época y actuales cuyo propósito principal es agarrarse a bala con lo primero que se encuentre). A partir de Metal Gear y sus posteriores encarnaciones, Kojima ha redefinido los juegos de combate y ha cuestionado la política y ética de la guerra. Un claro ejemplo es la más reciente encarnación llamada Metal Gear Solid 4: Guns of the Patriots de la cual tienen el siguiente video:

MGS4 solo está disponible para el Sony PlayStation 3, del cual ya se ha hecho mención antes acá. ¿Será mejor comprarse el PS3 y no el Wii?