Tzek Blog de Diseño

Buscando información sobre Interacción Humano Computadora (HCI por sus siglas en inglés) en la web, me topé con una empresa que se especializa en esta disciplina, en particular con la siguiente imagen:

Esto me reafirma la idea de por qué la Maestría en Diseño de Información de la UDLA tenía de entre los ingenieros que estábamos en la generación, al menos a 3 que nos interesa la HCI. De hecho, una amiga mía de la generación me comentó que viniendo de ingeniería (ella es Ing. en Sistemas Computacionales) la MDI era “lo más cercano” para continuar tu formación hacia HCI.

El punto al que quiero llegar, es que este dibujito me recordó la frase “diseñar para diseñadores” (muy popular en los concursos de diseño) y que estando en cómputo, parece que si uno no se mete a esto de lo transdisciplinario, la HCI podría resultar muy “sintética”, esto es: “HCI de computólogos para computólogos”. ¿Será? Estoy bien “moco” en HCI pero me da curiosidad.

Sumado a lo anterior, creo que el diseñador también va por ahí, sobretodo los diseñadores de interacción (obvio), de experiencia y de información. A ver que sucede….

Apéndice:

En la MDI llevé muchas materias que si no son la “burbujita de arriba” al menos tenían que ver con alguna…* 

•  Psicología: Llevé una materia de psicología cognitiva. Los de cómputo no llevan cursos de este estilo… Se habló de percepción y eso ayuda mucho en el diseño de interfaces. También llevé en otro curso temas de psicología social, muy enfocados a estudios de género, que me resultaron interesantes aunque aun no me queda clara la conexión con HCI (o aplicarlo a diseño de interfaces).
• Ergonomía y factores humanos: Mmm… creo que esos temas corresponderían a los cursos que tuve de psicología, tipografía y texto, diseño de interfaces y psicología. 
• Ingeniería: Ahí dependía de cada quien… habíamos en mi generación dos ingenieros industriales**, dos ingenieros en sistemas y yo de computólogo.
• Diseño: Ahí si… si no todos los cursos, el 99% se traslapaba con el diseño.
• Semiótica y branding: Tuve un curso de semiótica y uno de retórica… como me encantan esas materias. Aunque admito que leer a veces sobre ellas es un zzzzzz…
• Etnografía: En mi clase de proyectos y en la clase donde tocamos temas de psicología social.
• Sociología: Tuve una clase de sociología, aunque enfocada a la comunicación… Pero tuve un curso de sociología ¡que raro siendo computólogo! Junto con mi curso de comunicación (muy bueno) te dan un enfoque social de la comunicación, hegemonía, estrategias, etc.
• Lenguaje: Mi curso de teoría del texto… definitivamente. Y de hecho, los 3 interesados en HCI tomamos un taller en el CLIHC 2005 donde se explicaba la semiótica, narrativa y estructuras textuales de una interfaz…. que chistoso, hasta ahí nos dimos cuenta que no andábamos tan errados en el camino.
• Ciencias de la computación: Pues también… eso de la carrera.

 Notas:

* Obviamente, esta es una perspectiva personal sobre lo que he visto, medio aprendido y medio razonado (ahí vamos poco a poco con estos rollos). Y cual disclaimer, no refleja los intereses de nadie en la MDI, ni de mis profes ni de mis compañeros de clase y además el plan de estudios actualmente es otro.

** Me encanta como los Ingenieros Industriales ven y desean aplicar el diseño de información: mucho de cómo estructurar datos y luego como presentar la información resultante y que esta sirva como herramienta de análisis y toma de decisiones. 

Abundando en esto de lo cookie y melcochoso del día de Sn. Valentín hice esta postal para todos uds…

•  Hice primero la forma del cupido con lápiz y el acabado fue en Illustrator.
• El copy va ma’ o menos en este sentido: Psiqué por la pareja de cupido pero también por esta cuestión del alma/mente… el ride va con doble sentido… algo así como ¿puedes explotar orgásmicamente tu alma y mente? Que palabras menos cantinflescas es un “disfruta la vida”.

Prefacio.

Mi primer post: ya hace un año que escribí sobre cómo me asombró el cambio en la conducta social de nuestra generación gracias a la tecnología. El año pasado fue interesante: la consolidación del facebook y el twitter como nichos sociales en la web 2.0, el lanzamiento del iPod Touch y la Zune, del iPhone y el Kindle de Amazon… Tzek Blog de Diseño cumple un año (increíble) y fuera de ser el nazi blogger con mis alumnos (jajaja… no en serio, gracias a mis alumnos por leerme), agradezco a todos los que se toman el tiempo de leer esto y me ofrecen feedback, a los bloggers/lectores de blog con los que he podido tener contacto (virtual/presencial) y dejarme aprender sobre este medio. Así que me celebro este acontecimiento con el siguiente post:

En agosto del año pasado, ante la llegada del iPhone, no pude dejar de cuestionarme sobre el diseño que viene. He jugado con 2 iPhones (prestados, claro) y varias veces con un iPod Touch. Actualmente estoy convencido que estos dos aparatitos, por la interacción con la pantalla táctil y la monstruosidad mercadológica, sí influirán en el diseño de las interfaces para móviles e incluso ser el punto de partida para la interacción con productos de cómputo ubicuo (así como el iPod marcó a todos los demás MP3 Players).

El nacimiento de una web 2.iPhone.

La web 2.0 ya nos dijo: aquí puedes ser tú, no quién te han enseñado a ser.. ¡vamos! socializa, comparte, presume, re-defínete, exprésate. Hay todo un cúmulo de aplicaciones web que te lo permiten –y en voz baja– así como todo un grupo de interesados en el poder de lucrar con toda la información que gratuitamente amablemente nos brindas.La web 2.iPhone nos dirá: Toma tu iPhone y si no tienes lana, toma tu iPod Touch, sacúdelo, “estírale” a la pantalla, desliza tus dedos… aprovecha todo esto para acceder a tu mundo web donde sea y cuando sea…

• ¿Necesitas poner algo nuevo en el facebook? ¡Arrástralo!
• ¿Quieres poner/hacer un twit nuevo? ¡Prueba este convertidor voz-texto directo del iPhone!
• ¿Tienes a ese amor lejos el día de tu cumple? ¡Ah! Entonces a más tardar en la noche manda el album iPhone orgullosamente decorado por mi Scrapbook for iPhone de Flickr.

En México, quizá no todos tengan un celular que pueda navegar la web, pero en la calle, muchas personas tienen un iPod, ya sea un shuffle, un video o ahora un touch. Una vez que venía en un vuelo con escala en Monterrey, lleno de gente joven, muchos de ellos traían el iPod para entretenerse mientras llegabamos… ¿Qué va a pasar cuando estén dispuestos a navegar para socializar, exponerse o jugar mientras esperan cerca de un hot spot en el aeropuerto? ¿Qué tipo de producto de diseño seducirá a esta audiencia del aparatito en mano?

El símil Nextel.

El otro día me estaban convenciendo platicando de por qué comprar un Nextel (este radio popular entre los universitarios y hombres de negocios). Donde sí estuve de acuerdo es que tener un Nextel podría, si no tener más ingresos por proyectos, ponerme en contacto con más personas para discutir sobre algo en que pueda apoyar con mis servicios de diseñador. Un punto interesante en el discurso de venta fue “el que te llame de un Nextel, es porque es alguien de negocios y que probablemente pueda pagar una buena tarifa…”

Lo que pasa con el iPhone/iPod es que tendrás toda la ventaja multimediática para “jalar” a un cliente, empezando por lo más simple: el portafolio. Si muchos de los clientes a los que aspiran tienen un iPhone/iPod, que rico que puedan navegar cómodamente tu portafolio. De entrada esto tiene implicaciones directas en el diseño visual: es claro que la arquitectura de información, el diseño de información y el diseño de interacción se ven afectados si piensas que te navegarán desde uno de estos artefactos.

Arriba está una foto de mi portafolio en un iPod.

Las ventajas:

• El navegador si no es Safari al menos si es una versión light de éste. Super… ya no lidiar con las broncas de Internet Explorer. Además:
  • Se pueden leer PDFs.
  • Soporta AJAX.

Desventajas:

• No toca flash… aunque mi trabajo no está hecho en flash, no pude checar portafolios que lo emplean.

Lo que debí hacer como adecuación al iPhone/iPod:

• Emplear ems como medida para la tipografía, no pixeles. Aunque lo anterior es una buena práctica, uno puede “esquivarla” teniendo en cuenta la resolución esperada de los usuarios, pero en el iPhone/iPod se evidencía como un error porque te “ajusta” el tamaño del texto para leerlo en pantalla pequeña si no se le da un puntaje fijo en pixeles.
• Los botones deben tener un tamaño adecuado a la yema de los dedos. Yo puse dos imágenes para navegar, lo cual NO es cómodo sin hacer zoom a la pantalla.
• Uff… saber cómo explotar la interacción con el iPhone/iPod (estirar, girar, doble “dedazo”, empujar) para producir elementos de interfaz.

El caso de Amazon.

¡Alto! Amazon tiene una versión beta de su sitio para iPhone/iPod con ciertas peculiaridades:

• El layout para la interfaz es líquido. Los anchos en la caja de búsqueda y el tamaño de los combos y botones varian dependiendo si estás navegando el iPhone/iPod vertical u horizontalmente.
• La arquitectura de amazon es mucho más simple. Con la pantalla pequeña se demuestra que la búsqueda es la base de la experiencia en amazon… la navegación fue sumamente simplificada y manada hasta abajo en la pantalla de inicio.
• El diseño de información resalta por su óptima aplicación en los elementos de la interfaz.
• ¡Increíble! Bloquea la interacción básica del iPhone/iPod. Por ejemplo: el zoom causado por “estirar” la pantalla con los dedos y también el “doble dedazo” para el zoom sobre objetos. La analogía sería “emplear pixeles en vez de ems” para el puntaje tipografíco… un claro ejemplo de controlar cualquier cosa rara que el usuario pueda hacer.

Juegos y Diseño.

Esta genial que puedas jugar en el iPhone/iPod. Las generaciones actuales de estudiantes de diseño están muy enfocadas a la animación y videojuegos, en parte por la influencia del ánime y manga. No es dificil aceptar que los futuros diseñadores al crecer con este tipo de artefactos se verán interesados en el desarrollo de videojuegos y lo cual traerá como consecuencia el re-enfoque de la participación de un diseñador, la cual se inclina a lo multidisciplinario y/o transdisciplinario.

El rediseño de widgets para una pantalla pequeña.

En el amazon noté cómo está rediseñado un combo, ahora simulando un tambor que da vueltas en vez de una lista que cae como sucede en una pantalla grande. Sin embargo, cosas como los radio-button siguen igual y eso resulta poco usable para manipular con los dedos.

No es difícil de vaticinar que los diseñadores buscarán nuevas formas de representar los widgets para ser usados con las yemas de los dedos. Será muy interesante de ir descubriendo cómo se va a ir cubrindiendo esta necesidad con el tiempo.

¿Conclusiones?

• Si se repite la historia del iPod con el iPhone y el iPod touch entonces el diseño de interfaces para móviles con navegador para la web e interfaz de pantalla táctil será una realidad a la cual los diseñadores se enfrentarán y encontrán nuevas soluciones diseñísticas las necesidades sociales y de comunicación que ha inculcado el desarrollo de la web 2.0.
• El arquitecto de información podría encontrar la forma metodológica y experimental de mapear la organización navegacional y de contenido de una “pantalla normal” a un “dispositivo móvil” de forma que la experiencia de usuario no se degrade (en la medida de lo posible).
• El diseñador de información tiene la posibilidad de explotar sus conocimientos sobre organización visual (y quizá multimediática en general) para comunicar en forma usable “lo más en lo menos”, esto es, la mayor información en el espacio reducido de pantalla.
• El flash o alguna herramienta similar, aunque parezca que muere, por cuestiones de mercadotecnia y convenios comerciales, sin duda sería empleada por diseñadores, pero no en forma tan “artística” al comenzar esta travesía con la carencia de éste (el flash). Es decir, si ahora “no hay” y creas todo un esquema de interacción que te lleve a soluciones creativas en contraste con las actuales (bajo el empleo de flash), entonces cuando se permita usarlo de nuevo, otro enfoque podría ser altamente tomado en cuenta… Por ejemplo, para el desarrollo de nuevos widgets que sean cómodos para los dedos y adecuados a la pantalla pequeña.
• ¿El medio es el mensaje?

Muchas gracias por su apoyo. Saludos a todos y espero poder continuar con el blog otro rato más.

Saludos.

Tzek.

Ayer tuve la oportunidad de tomar un taller de identidad con Josep Palau (Pep) de Ideograma en el congreso de diseño de información de la UDLA Códice 7. Anteriormente había también tenido la oportunidad de tomar un taller con el otro socio de ideograma, Juan Carlos Fernández. Ambas experiencias fueron complementarias y aprendí mucho (sobretodo porque cosa que oía, cosa que trataba de mapear en a mi joven experiencia sobre identidad :)). En el caso del taller de ayer: 

1. Un proyecto de identidad deriva de muchos factores.

Fue muy interesante escuchar cuáles podrían ser los factores asociados:

• cambio de la tecnología, 
• renovación, cambio generacional, 
• design trend, 
• propósitos de venta, y muchos otros.

Aquí Palau marcó la importancia de ser un diseñador activo, involucrado en el ambiente corporativo en forma tangencial (ya que no somos empresarios ni gente de administración) viendo, escuchando y leyendo, y de esta forma estar preparado para saber a dónde, a quiénes y cómo dirigir nuestros esfuerzos de venta/propuesta para un proyecto de identidad. En contraste, definió el diseñador pasivo como el vendedor de tiendita, el que espera a que llegue algo de venta.     

2. Con la identidad hay que dejar claro a tu cliente quién es aquí y hoy, pero también quién será mañana.

 Cuando realizas un proyecto de este tipo es importantísimo que tu cliente se autoreconozca, que sepa cuál es su razón de ser, su esencia como empresa, a dónde quiere llegar y cómo lo va a lograr.

•  Un FODA, básico para una empresa, había leído cómo es útil en proyectos de publicidad. En identidad, no se queda atrás por lo que vi en el taller. Tanto el análisis empresarial como un benchmarking son básicos para que el diseñador “ponga un pie
• ” en la empresa. 
• Parte de la chamba del diseñador es hacer investigación secundaria. Siempre.
• Lo que propongas como diseñador, y tu cliente acepte, debe tener una vigencia acorde a la empresa y su crecimiento/permanencia: una buena marca dura en promedio 10 años, aunque según comenta Palau, puede pensarse ahora en menos (de 5 a 10 años) debido al cambio vertiginoso del mercado, sobretodo en marcas de productos de consumo directo.
• El racional que acompaña a la justificación/propuesta de identidad es consecuencia directa del esfuerzo de trabajar en entender quién es el cliente y cuál es su contexto.
• Una identidad es flexible si puede irse “cambiando de mudas de ropa” según requiera la tendencia de mercadotecnia (por ejemplo, Coca-Cola).

3. El asunto del cobro

Definitivamente eso es parte del know how empresarial y del how much (plop!) por lo que resulta complicado compartir dicho conocimiento ¿o no preguntamos mucho eso cuando nos topamos con despachos fuertes?.Palau nos hizo ver la analogía de un proyecto de identidad con un carro… lo cual aplica en sí a cualquier proyecto de diseño. Si un proyecto de identidad fuera un carro, ¿cuánto pagaríamos? Al hacer la analogía con un proyecto de identidad uno puede ir vislumbrando que:

•  El que compra el carro tiene que hacer un análisis de ¿cuáles son sus necesidades actuales?, 
• ¿qué tanto ocupa de un carro? (austero, sofisticado o con quema-cocos), 
• ¿qué implica tener un carro como el que quiere?, etc. 

Uno se convence de esta forma que un proyecto de identidad vale y no sólo en el sentido económico, sino vale para la empresa: su existencia es útil.  Lo anterior, aunado a la vigencia de la identidad resultante, tiene que quedar claro al cliente el beneficio de adoptar dicha identidad porque la inversión de hoy se verá implicada en la percepción de la empresa en el mañana. 

• Enlace recomendado por Palau si te quieres dedicar a la identidad: Identityworks de Tony Spaeth. 

Hoy me prestaron un iPod Nano de la última generación (de esos que tocan video). Lo primero que saltó a mi vista, no fue ni siquiera la disposición de la interfaz misma (el layout) sino la tipografía..!

¿Helvetica?¿En la GUI del iPod? Entonces volteé a ver mi iPod Video. Siempre me quedé con la idea de que empleaba Myriad Pro… “ahora no estoy seguro si en realidad se trata de Myriad o de Verdana” – me pregunté.  

 Entonces me fijé en como estaba la “pancita” de la ‘a’ y después la ‘g’ y la doble ‘t’ que aparece en la palabra settings.

• Pues no… Myriad o Myriad Pro, parece que no es ni una ni otra aunque esa “tt” me causa mucho ruido (por sus piquitos).
• Pasando a Verdana, uno nota que efectiva es aun más redonda que las dos anteriores. Entonces, y ahora que por eliminación, me vino a la mente ¿qué otra tipografía es de Apple que tiene diseñado para la pantalla?

 La ‘y’ tiene una colita que se quiebra hacia la izquierda…

• Pues parece que es Geneva… solo que la ‘a’ y la “tt” de mi iPod me sacan de onda: parece Verdana a primera vista. Quizá tenga que ver con el hinting asociado y el puntaje en la interfaz.

Pero la letra ‘M’ no es la de Verdana o Geneva. Además siguen esos “piquitos” en las ´t´. Arial, ¿eres tú? 

Fue una situación curiosa el ver la nueva interfaz del iPod Nano, lo cual me dejó pensando que:

1. Parece que es Arial. Aunque ya ando más mareado que antes: ¿será cuestión del hinting?
2. Que chistoso el hecho de que Helvetica haya logrado un vuelco en la percepción de la interfaz de mi iPod. Hasta que la vi en esta tipografía me cuestioné sobre la legibilidad e importancia morfológica para la GUI del iPod (con mi cabeza tan bombardeada por Apple).
3. De verdad que “una letra” cambia la percepción de las cosas.
4. Es chistoso como Apple, si fuera así, sacrifica el branding (en su manifestación tipográfica) por una mejor GUI ¿será?

   Actualización: Viendo como quedó publicado este post y checando el texto… Parece que sí es Arial.