Mi solución es bastante artesanal y no tiene nada de sofisticada. Aunque hay artículos bastante completos sobre el tema, yo había leído alguna vez que tenía que ver con el viewport, y entre los resultados de mi búsqueda di con el uso del parámetro media y los CSS Media Queries. En los siguientes recursos está cómo emplear diferentes hojas de estilo dependiendo del medio:

http://css-tricks.com/6206-resolution-specific-stylesheets/

http://css-tricks.com/6731-css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://www.css3.info/preview/media-queries/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.thecssninja.com/css/iphone-orientation-css

En cuanto al diseño web, siempre tuve una preferencia por layouts fijos por tener un mayor control del espacio en ventana y por tomar en cuenta la resolución estándar de un usuario potencial. Nunca me había preocupado porque la información quedara bien acomodada en diferentes resoluciones; es un reto interesante conservar la estética reticular y mantener un flujo de lectura adecuado para cada resolución. Este tipo de soluciones requiere que tengamos una actitud algo quisquillosa y obsesiva, así como trabajar cada layout hasta quedar satisfechos.

Justo por el cambio de "paradigma" de fijo a adaptable, y ante una especie de "bloqueo ante la hoja en blanco", no quedaba conforme en (regresar a) maquetar primero en algún software de diseño, así que lo trabajé directo en pantalla. Un pro de esta decisión es que vas viendo "en tiempo real" como quedan las cosas en diferentes navegadores y resoluciones. Un contra es que podemos perder el control fácilmente —sobretodo si dejamos el proyecto un día o dos. Es importante hacer anotaciones en papel y documentar en las hojas de estilo para que recordemos por qué tomamos ciertas decisiones. En este proyecto, me resultaron —a mi juicio— muchas hojas de estilo y fui redundante en ciertas reglas, dejándolas en cada hoja porque no sabía como iba a verse "el final" en todas las resoluciones; algo así como "un cambio por aquí y luego ajusto por acá".

Con un layout fijo no considero útil que tengamos muchas hojas de estilo, pero dadas las múltiples resoluciones, parece ser necesario un mayor número de "enlaces". Un colega me sugirió hacer importaciones, pero al final descarté esta opción porque según hojeé, afecta el rendimiento:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Otro punto importante es verificar la compatibilidad de los CSS Media Queries. Originalmente estaba muy feliz —tipo the Oatmeal— porque IE se comportaba decente; pero por no leer, me llevo la sorpresa de que fuera de IE 9, simplemente no funcionan:

http://caniuse.com/css-mediaqueries

Ante esta situación, decidí dejarle un layout fijo a todos aquellos usuarios que tuvieran de IE 8 para abajo y tomando como resolución estándar 1024 px de ancho.

Luego está el asunto del iPhone y del iPad. Hay que poner una línea de código que indique qué va a pasar cuando el navegador sea Safari. Esta línea asocia la variable "ancho" empleada en el CSS Media Query con el "ancho" del iPad, iPod o iPhone —según sea el caso. Además, resulta que cuando pasamos de modo landscape a portrait, o viceversa, se hace un zoom medio raro y es posible que los textos se desplieguen de diferente tamaño a como los observamos en una computadora de escritorio. Para validar todo lo anterior está como referencia el siguiente recurso:

http://stackoverflow.com/questions/2977550/iphone-safari-css-rotation-bug

A mi me divirtió mucho esta idea de presentar el mejor layout dado el ancho del iPod, iPhone o iPad. Sin embargo, siendo sinceros y "usables", la desventaja de jugar con diferentes acomodos de la información es que rompemos con la navegación (browsing) del usuario. Cuando alguno de estos dispositivos se rota 90 grados, debido a este re-acomodo, el usuario pierde vista la información de su interés. Lo anterior es más evidente en el caso del iPod/iPhone. Cognitivamente, lo que hacemos es "resetear"  el flujo de interacción; definitivamente algo no bueno para ningún usuario. En este proyecto, la mayoría de la información es estática y aquella que podría cambiar o agregarse durante el año, estará ubicada en la parte superior de las páginas correspondientes.

Una colega me señaló que estos ajustes automáticos no siempre convenían si trabajamos en una computadora de escritorio  —o en una laptop con pantalla grande — porque quizá el re-acomodo de la información podría perjudicarnos cuando llevemos a cabo una tarea más compleja, donde trabajemos con la información proveniente de diversas ventanas. Se me hizo un punto válido; por ejemplo, yo mismo he copiado y pegado información de una página web a Word o Excel. En este tipo de situaciones, debería de haber una opción para "fijar" el layout.

Por último, no olviden visitar http://ciria.udlap.mx/franciscana/ para enterarse de qué conferencias y exposiciones habrá en dicha biblioteca. Saludos

En caso de que no estés familiarizado con el tema de affordances, quizá este post podría ser de apoyo.

No me considero un Mac Fan Boy (del todo), pero admito que para empezar, es sorprendente el avance tecnológico de esta compañía en el último par de años. De pasar de un disco duro portátil con el iPod (hasta su versión "Video"), ahora tenemos algo tan liviano, con alta calidad de imagen y que además permite comunicarnos viéndonos los rostros. Vamos, metafóricamente podríamos decir que es "tener Internet en el bolsillo". Aún no llegamos al ápice del concepto de la Computadora Invisible introducido por Mark Weiser, pero la realidad "ubicua" (computacionalmente hablando) de nuestro presente no deja de ser sorprendente después de todo.

Con respecto a la muerte de la affordance, es porque desde la salida del iPod Touch, y luego del iPhone, siempre he creído que una pantalla touch nunca remplazará las "ventajas interactivas" que tiene una interfaz con controles físicos, como sucede con los botones: su textura, forma, altura, reacción ante la presión, propiedades estéticas inherentes en el objeto, entre otras. Sin embargo, el touch es una realidad; en el caso de Apple, parece que la click wheel va de salida.

Lo touch no tiene su importancia en ser "lo que está in"; en realidad es algo intuitivo ya que desde chicos nos metemos los dedos en la nariz y en la boca, rascamos la tierra para descubrir qué "bichitos" andan caminando en ella, e incluso no dudamos embarrar la mesa con nuestra comida y expresarnos artísticamente (supuestamente, claro). Así que lo táctil es algo natural, algo sencillo de entender.

Sin embargo, y eso lo podemos notar desde el principio de la aparición de estos aparatitos táctiles, que hay que compensar una cosa con otra: a falta de una demostración evidente de cómo interactuar con el producto debido a sus mismas características físicas, es necesario enriquecer la interacción de manera visual con evidentes cambios de estado visual a través del tiempo. Sin una obviedad gráfica en las interfaces del iPod/iPhone (por ejemplo, que los botones se vean como botones) y sin las respuestas visuales (como cuando se corren los paneles con cierta velocidad/fricción/sentido), estoy casi seguro que sentiríamos la interacción "estúpida" o "fría". La experiencia entonces está supeditada a estresar otros sentidos ajenos al toque, en este caso la vista.

La duda está en que si lo touch resulta igual o más intuitivo para interactuar con interfaces ricas o complejas en información (visual, textual o auditiva), entonces ¿cuántas cosas y hasta dónde exageraremos para que todo esté en pantallas táctiles? ¿Cómo este "avance" limita o "agacha" el desarrollo de otro tipo de interacciones más físicas o de interfaces intangibles como las construidas a través de voz? Es algo complejo según lo veo.

¿Qué vendrá entonces con los futuros iPod? ¿Se doblarán o estirarán como un display con comportamiento de plastilina? Espero llegue a ver los objetos con interfaces maleables/orgánicas como parte del día a día. Estaría genial.

* Imágenes tomadas de Apple.com con fines meramente de ilustrativos.

La profesora tenía que subir la tarea correspondiente para cada sección del curso. Me solicitó ayuda, accedí con gusto y juntos conectamos el USB, buscamos la liga para subir la tarea dentro de un mar de opciones para la primera sección (del curso), buscamos la carpeta con los archivos dentro de la USB y subimos el archivo; sin embargo, para el resto de las veces ella no pudo realizar la tarea por si sola, tuve que seguir asistiéndola. ¿Por qué?

En ese momento recordé que esto de la usabilidad parece algo tan tonto a veces. Tonto, hasta que uno se da cuenta de que los usuarios sí tienen problemas al interactuar con el producto. La profesora, al igual que sucede con personas cuya alfabetización informática es deficiente, caracteriza la interacción como una secuencia lineal cuasi-estricta que deben de seguir para completar la tarea. Por lo tanto, al no "aprender un paso", se pierden completamente.

Tengo la conjetura de que  alguien con mayor alfabetización tecnológica, sobretodo cuando se va volviendo experto, comienza a relacionar ideas. Por lo tanto, no intenta realmente aprenderse la secuencia de pasos para realizar la tarea, sino que estructura todo un modelo mental que involucra los conceptos (lo que se entiende por archivo, arrastrar, abrir, memoria, movimiento, etc.) así como los diferentes "caminos" con los que puede realizar la misma tarea, lo cual implicar el entendimiento de cómo moverse "en ese espacio" (en este ejemplo la plataforma educativa).

Algo evidente en esta experiencia fue notar que la usabilidad está ligada a la arquitectura de información. Habían muchas opciones y prácticamente la profesora sólo requería aquellas que le mostraran a) en que sección está subiendo la tarea y b) cómo subir la tarea. Entonces, lo complicado está en hacer una "reducción de puertas" por las que tiene pasar el usuario mientras va "navegando" en este espacio y más aún, que dichas puertas esten bien "marcadas". Sí note a la maestra hacer recorrido visual para las opciones que dispone la plataforma, pero también notaba una expresión de que no entendía bien a lo que se referían tantas palabras.

En días pasados, me llamaron para asistir a una investigadora que estaba transcribiendo, según vi, unas notas periodísticas sobre el tema de braceros y también estaba registrando algunos detalles importantes sobre dichas notas. Cuando llegué estaba algo exaltada porque no entendía porque el Word le ponía el párrafo que estaba tecleando en ese momento en rojo cuando ella lo único que quería era ponerlo en subrayado o negritas (no recuerdo bien). ¿Qué es lo que estaba pasando?

La verdad no tenía idea. Pero algo que se me ocurrió fue dar clic derecho para obtener opciones sobre ese párrafo. Entonces noté algo parecido a "aceptar inserción". Di clic y el texto cambió a negro. Supongo que el párrafo en rojo era para dar evidencia en el manejo de versiones entre lo que ya estaba guardado y lo nuevo.

Desde mi perspectiva, ambas mujeres me figuraban que usaban con sus respectivas herramientas en forma "mecánica". Por ejemplo, la primera profesora solo quería saber dónde estaba el archivo y en qué lugar debería de colocarlo, literalmente. Como cuando mueves un objeto dentro de un cuarto. En el caso de la investigadora, me imaginé que era una persona que usaba la máquina de escribir y luego con el desarrollo tecnológico tuvo que usar Word. Obviamente en la máquina no podías hacer inserciones nuevas sobre lo ya escrito.

Un punto que me llamó la atención con la investigadora, supongo que parte de su personalidad, es comentar cosas como "no se qué le apreté", "yo estaba trabajando y no se que pasó". De alguna manera lo relacioné con el caso de la primera profesora, donde el "no entender" es literalmente eso: no entender con qué estás interactuando.

Por ejemplo, dado el caso de la investigadora, mi conjetura es que el problema es la falta de correspondencia uno a uno entre el modelo de lo ya conocido (la máquina de escribir) y el modelo mental que involucra la nueva herramienta (la laptop más el Word). Obviamente el último es mucho más grande que el primero, y que al parecer está contenido (la idea de la máquina de escribir, teclear en una hoja sólo que ahora en la laptop).

Extender el modelo mental sobre el objeto antiguo para derivar en uno nuevo más complejo, puede ser complicado. La herramienta debe tener un diseño que brinde una buena curva de aprendizaje durante el proceso. Algo me dice que cuando no logramos bien esa curva, claro que podemos utilizar la nueva herramienta, pero nos quedamos utilizándola en esta forma "mecánica".

Después, con la misma usuaria, surgió otra emergencia: después de alcanzar alrededor de 200 hojas en su documento, había perdido toda la información, quedando solamente una hoja en todo el documento con lo último que tecleó. ¿Qué fue lo ocurrió?

Realmente es un misterio. Yo medio hice un par de cosas, incluyendo el "deshacer" para ver si aparecía su texto original y checar sí habían copias, pero nada. Luego solicitamos la ayuda de un ingeniero en sistemas, el cual trató de conducirla a través de preguntas que entendí que eran para dar evidencia del "error de usuario". Pero nada. Platicando con él, llegamos a la conclusión de que al no encontrarse corrupto el archivo, quizá no se fijo de que estaba tecleando sobre un documento nuevo y por no entender la diferencia entre un "save" o "save as", o bien quizá por el estrés, no se dio cuenta y sobre-escribió su archivo.

Una última historia. Un día, cierto diseñador de información, con formación también en cómputo, y que además le gusta platicar y discutir sobre el diseño de interacción, estaba mandando un mail en el móvil de Apple. Por error, hizo "tap" en enviar el mail y entonces no supo como cancelar la acción. Aunque se regresó al menú inicial para ver si aparecía el "outbox", no consiguió nada. Después de otro par de "taps" para checar qué estaba pasando, el correo salió con la mitad de texto. Tuvo entonces que mandar otro correo con el texto faltante.

Sí, a mi me pasó. De hecho, en el ciente de MacOS cuando no quería descargar los correos o bloquear la salida de uno, me iba rápidamente a checar la ventana de actividades y le daba "alto" a ese proceso. En el teléfono no pude localizar la "tachita" para detener el envío, y tampoco me "salió" el outbox para entrar ahí y de nuevo buscar una "tachita" para cancelar. Quise hacer un mapeo entre el modelo que tiene el cliente de correo para computadoras de escritorio con el cliente para móviles. Y no dudo que exista una forma de "parar" el correo, sólo que no "entendí" cómo descubrir esa forma.

En resumen, podríamos decir que las interfaces pueden tornarse realmente complejas pero que esa complejidad no va siempre a la par con la curva de aprendizaje de usuario para utilizar la nueva herramienta, no tanto por su falta de capacidad (los usuarios no son estúpidos) sino por falta de alfabetización informática y/o tecnológica quizá, o bien, porque simplemente no se esfuerzan (porque no les interesa, su tarea base siempre está muy clara y es lo más sencilla, no importa cuán sofisticada sea la herramienta con sus "extras") en sacarle más "jugo" a las mejoras, en parte porque todos queremos una vida sencilla dentro de lo complicada que nos la hacemos. Y claro, el entendimiento, semiosis o conformación de un modelo mental del espacio de interacción, o como quieran llamarlo, entre lo que trae en la cabeza el diseñador para ofrecer una solución a lo que tiene un usuario, definitivamente no es lo mismo. Bien dicen: cada cabeza es un mundo.

Todo un reto, ¿no creen? ¿Hasta dónde eres como diseñador de interacción una guía montessori o un dictator con tus propuestas?