Tag Archives: iPhone

Sitio web de la Biblioteca Franciscana

Ahora que la web puede accederse desde una PC, una laptop, un SmartPhone o una tableta, se nos presenta una paradoja a los diseñadores: debemos creer en la estructura semántica del contenido de las páginas, pero también hay que cuidar más que nunca la presentación de la información considerando tanto al usuario como el dispositivo a usar.  Últimamente me ha llamado la atención estos sitios que aprovechan las ventajas del CSS para ajustar sus layouts dependiendo de su resolución, así que aproveché experimentar con un proyecto de rediseño web que tenía  pendiente: La Biblioteca Franciscana.

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 :)

Concurso de Diseño de Interacción en CLIHC 2011

Desde que participé como estudiante voluntario en 2005, el Congreso Latinoamericano de Interacción Humano-Computadora —conocido como CLIHC— me ha permitido conocer sobre el trabajo académico y profesional relacionado con el área. Pero este año he tenido una oportunidad interesante: ser coach en el Concurso de Diseño de Interacción apoyando al equipo de la UDLAP, quien resultó ganador del primer lugar a nivel licenciatura este 28 de octubre en Porto de Galinhas, Brasil. El equipo lo conformó  Alan Andrade , Thaís Corona, Beatriz Martínez , Jorge D. López y Rafael de la Rosa, estudiantes de la Lic. en Tecnologías de Información y de Ing. en Sistemas.

 Alan Andrade , Thaís Corona, Beatriz Martínez , Jorge D. López y Rafael de la Rosa

El reto del concurso era diseñar una aplicación turística para ciudades donde ocurrirá un mega-evento, pero que al final pueda seguir siendo útil y provechosa para los locales y nuevos turistas. Fue así como presentaron InTour: una aplicación que no sólo es pensada para el turista individual, sino que fomenta la integración familiar y generacional a través de una vacaciones bien planificadas, tanto en presupuesto como en actividades. Dichas actividades son "manifestadas" por la ciudad misma —gobierno, empresas u ONGs, para demostrarle a los visitantes del mega-evento lo "viva que está la ciudad"— con opciones para armar un plan flexible dependiendo de la distancia, transporte, tópico, clima o dinero asignado para el día.

InTour: Aplicación móvil diseñada por el equipo UDLAP para el  Concurso de Diseño de Interacción en CLIHC 2011

El proceso de diseño involucró investigación secundaria y entrevistas a usuarios con el perfil de usuario potencial. Se diseñaron Personas, se hizo lluvia de ideas y se elaboraron bocetos —parte que a mi siempre me parece muy entretenida. Cuando se pulieron los detalles, verificando cómo se cumplían las metas de las Personas, se elaboró el prototipo cuya usabilidad fue evaluada.

Algo que disfrute mucho y que fue parte del proceso, fue cuestionar a los muchachos sobre cómo se presenta la información, qué comunica de un solo golpe en cada pantalla, cómo sí influye la visualización en la interacción y temas similares. Espero haber dejado en ellos que el diseño visual para IHC no es solamente que se vea bonito, sino que es parte "del show".

Extiendo mis felicitaciones al equipo UDLAP: se decidieron, lo intentaron y completaron la misión. Y es que en México desde el 2010 se ha fomentado este tipo de concurso y por si no saben, México, y en particular el equipo de la UTM de Oaxaca, se ha llevado el primer lugar en foros importantes. Así que el hecho de que la UDLAP se una a este conjunto de jóvenes entusiastas y ganadores, no solo me da mucho gusto por el triunfo, sino que señala que en el ámbito universitario hay un mayor interés por desarrollar el Diseño de Interacción y la Interacción Humano-Computadora. Si la academia se pone en paralelo con lo que está sucediendo a nivel profesional desde hace un par de años —como la creación de startups y grupos de interés, entonces algo bueno sucederá o dirá de nuestro país, ¿no creen?

Más información en la nota del concurso en el Blog de la UDLAP.

Gracias a Thaís, Jorge, Rafa, Alan y Betty por haber estado dispuestos a idear, charlar, discutir, criticar y diseñar juntos. ¡Felicidades! :)

TAT: The Astonishing Tribe

Gracias a Hugo de Bluku.tv me entero de The Astonishing Tribe, o TAT, quienes se definen como un grupo sueco que ha agregado el efecto wow a las interfaces de usuario en más de 270 millones de dispositivos móviles alrededor del mundo. Dejo aquí un par de video de sus últimos prototipos, aunque en general su showroom es de por sí interesante.

También están en facebook por si alguien los quiere agregar.

Me encantó su tagline:

Design loves technology.

Adaptación a una nueva interfaz

Una interfaz simple no necesariamente implica que sea fácil de usar. Por el contrario, una interfaz compleja no implica que, a mediano plazo, no se pueda dominar. Ya sea una aspiradora, un control de televisión o una aplicación web, interactuar con las interfaces de todos estos productos involucran un proceso de adaptación.

Bajo una reflexión rápida, se puede notar que estas adaptaciones y re-adaptaciones son más frecuentes en productos tecnológicos: por ejemplo el Nokia 3310, que podría decirse innovador en su tiempo, no podría competir con el hoy tan mercadeado iPhone de Apple en cuanto a diseño e interfaz, claro, en un sentido subjetivo. Una diferencia notable es cómo llevar a cabo su tarea básica: hacer una llamada. En el primer producto se "aprietan" botones mientras que en el segundo se "toca" una pantalla sensible. De cualquier forma, ambos casos requieren por parte del usuario un esfuerzo físico (mover brazos, manos y al menos un dedo) y mental (entender y mandar la señal para ejecutar la acción).

Apple Mighty Mouse

El Mighty Mouse de Apple

Es posible que una persona de 40 años en adelante posea un nivel de alfabetización informática menor a la de un joven adulto en sus 30s; a diferencia de este último, una persona que no "creció" con el paradigma WIMP (siglas en inglés para "ventana-icono-menú-apuntador") le cuesta trabajo conectar el movimiento del brazo y mano sobre algo voluminoso (el mouse) en una superficie horizontal para manipular algo diminuto (el apuntador) en una superficie cuasi-vertical (el monitor). Al no estar adaptados a la interfaz (mouse-apuntador), en algunas ocasiones se puede observar como a este tipo de usuarios se les "acaba" el pad y tienen que estar levantando constantemente el mouse.

Mario Galaxy para Nintendo Wii

Mario Galaxy para Nintendo Wii

Por otro lado, alguien que es "hijo del mouse" también se enfrenta a otro tipo de adaptaciones que alguien de 10 años podría obviar. El videojuego Super Mario Galaxy quizá no sea el más sofisticado, pero si el usuario está acostumbrado a trabajar en 2D, resulta un verdadero reto coordinar ambas manos (una para el control y otra para el nunchuck) para manipular a Mario en un espacio tridimensional sin dirección y sentido fijos emulado en la pantalla de televisión. Casos similares se presentan en el interfaces relacionadas con el diseño, como manipular una tableta Wacom, donde la adaptación implica pasar de un 2D-2D del mouse-pantalla a un 3D-2D porque la pluma se mueve en el "aire" y el clic significa "bajarla" y presionar la tableta.

Cuando los usuarios se sienten cómodos con los productos de diseño como herramientas, es porque ciertamente los encuentran fáciles de usar. ¿Podría decirse que esa facilidad es porque existe una "analogía" de aprendizaje previo con otros productos o herramientas? Sino, ¿por qué la metáfora sigue siendo reina en el diseño de las interfaces de usuario?

Una conjetura rápida es afirmar que el resultado que tienen los infantes del contacto con la tecnología durante su etapa de aprendizaje, derivarán en un cúmulo de estructuras mentales que los prepararán para aprender a usar nuevas herramientas tecnológicas en su futuro, todo a través una constante propagación de "analogías". 

Aunque los usuarios no quieran, así como pasa el tiempo, la tecnología va cambiando. Sin embargo, el re-adaptarse a nuevas interfaces quizá fuerce a los usuarios a aceptar estructuras mentales y/o esfuerzos físicos muy extraños para ellos, y aunque al final podría ser que acaben aprendiendo a usar la herramienta tecnológica, la perspectiva no será igual a alguien que aprendió con paradigmas más recientes. Al final, es un ciclo que continúa y continúa, resultando curioso que algunos de los problemas que resuelven la ingeniería y el diseño prácticamente son los mismos.

T-Mobile G1, el teléfono de Google

Mi amigo Russel, desarrollador en móviles, me pasó la liga en Gizmodo del video que muestra el funcionamiento del T-Mobile G1, una muy bien marcada competencia para el iPhone.

Video en Gizmodo sobre el funcionamiento del T-Mobile G1 de Google Android

El iPhone establece sin duda una nueva pauta de interacción: la pantalla táctil es lo de hoy, punto. Lo mismo sucedió con el iPod; los demás dispositivos derivan en una "extensión" o mejora a lo que la clickwheel institucionalizó como la mejor forma de interactuar simplista y usablemente con un reproductor de mp3.

El G1 presenta el mismo caso: "hay que derribar a Apple mejorando lo que el iPhone tiene". Supongo que esta será una ola de varios dispositivos que en un futuro cercano serán tan habituales como tener una interfaz gráfica en el celular y/o al menos la capacidad de enviar mensajes de texto. En este punto, lo interesante a considerar es la posibilidad de que Google derroque a Apple, lo cual tendría como consecuencia que

  1. la marca (Apple) se vaya a pique en cuanto a móviles y repercutiría indirectamente con las ventas de los demás equipos, sobretodo si Google desarrollaría pensando en usuarios Windows y 
  2. Google indicaría hacia donde sería el estándar de interacción y/en cómputo ubicuo así como la relevancia para el desarrollo de aplicaciones en este tipo de dispositivos. 

En síntesis, ya no vas a querer más una Mac porque Google gobernaría el reino móvil y ¡vamos! en el 2011 (por decirlo así) es igual de importante traer un buen móvil que una "estorbosa" laptop (¡aunque pese 400 gramos!)... la realidad del cómputo ubicuo próximo.

Supongamos que no pase tal cosa y que Apple, con su constante mercadotecnia de brindar lo mínimo a sus usuarios pero lo más fácil de usar y brindar la mejor experiencia (emotiva) de usuario con eso poco, se quedara con el mercado de los móviles... ¿qué va después del touchscreen? Hoy ya se pueden sacudir los iPod nano. Me da el feeling que el siguiente paso, para "extender" la posibilidad del acelerómetro, es la manipulación directa (literalmente)  sobre la interfaz. Esto es, pasar del 2D de la pantalla (con eventos como tocar, dejar en hold el tocar, arrastrar, estirar y pinchar) a un control 3D como podría ser el sumergir los dedos a cierta profundidad (ya sea una pantalla "gelatinosa" o una interfaz similar) y con eso dar más espacio de manipulación.

Que deslumbrante sería que además de estirar o pinchar, dependiendo de qué tanto incrustemos nuestros dedos, hagamos un zoom en 3D. Por ejemplo, para ir avanzando más rapido en la visión de calle de los Google maps.

Sea que lo que sea, aún no volamos en nuestros automóviles y ya estamos prácticamente en el 2009. Sin embargo, que la tecnología va marcando la pauta de "lo que se puede hacer". En contraste, podemos notar que zapatos y ropa siempre serán "los mismos" (la necesidad relacionada no muta o no mutaría mucho más), pero ver que el G1 te permite "moverte" en las calles gracias a su acelerómetro y el Google maps, podría derivar en una gama de necesidades creadas, naturales e incluso heredadas (porque antes "no se podía"), las cuales establecerán nuevas normas de comunicación, trabajo y aspectos culturales en una sociedad "casualmente" consumidora de tecnología.

Reflexión iPhonesca rápida

Actualización a 13 de julio:

Sí fui a un CAC Telcel en Puebla este viernes 11 de julio. Ya estando ahí, no había magia, como en las fotos vistas de Internet, sino una aburrida cola para mucha gente que estaba ahí viendo sus cosas y problemas con respecto a sus celulares. Al final decidí no esperar tanto porque sí dude en pedir informes sobre la contratación porque 24 meses, ya no me llamaban la atención. Me salí de la cola y sinceramente, ya no me dieron ganas de saber más sobre el iPhone ese día.

Plan 1 de renta mensual del iPhone con Telcel en México:

  • $459 pesos (USD 45 aproximadamente).
  • 100 MB incluidos.

Redondeando a 500 pesos...

  • Si me gasto por codo (ávaro) $50 al 2x1 en el cine, lo más barato, entonces mi renta mensual equivale a ir 10 veces al cine acompañado y echarme casi 20 horas de diversión y unos minutos extras de charla con colegas y cuates.
  • Si fuera como en gringolandia (EE.UU.) donde en lugares como starbucks puedo conectarme al iTune store y bajar mis canciones de 10 pesos aproximadamente, cada canción de 4 megas me limitaría a bajar en teoría 25 canciones, pero la neta entre "yu-tube", "mai-espeis" o qué se yo... digamos que me reservo 5 megas, muy austeramente hablando. El valor promedio de un CD con 15 canciones en México es de 160 pesos (15.5 USD aproximadamente).
  • Con 500 pesos compro no se cuantos chocolates-centenarios (de esos que parecen monedas de oro) y puedo tirarlos en el piso, hacer "angelitos" y sentirme "Mc Pato" un rato.
  • Esos 500 pesos equivalen a un 70% de moverme en taxi en la ciudad de Puebla.
  • Una buena cena, para una ocasión especial, en un lugar tranquilo, no muy "shic" o "naiz", llega a 500 pesos. Para dos personas, como dije, algo tranquilo, sobretodo en consumir bebidas alcohólicas.
  • 500 pesos representa 1/5 de la tarifa básica de la mensualidad de un carro. Interesante perspectiva, si en el futuro he de tener 5 iPhones en tarifa básica y ando en camión, entonces definitivamente algo estaré haciendo mal.
  • No con 500 pesos, pero sí con 2 cargas de a 200 pesos máximo al mes, le pongo crédito a mi celular y me los acabo de volada... ¿será un gancho la tarifa 1 del iPhone para compulsivos como yo?
¿Será buena idea contratar aunque sea el plan 1 de renta mensual del iPhone?
PD. El de 800 pesos mensual, definitivamente no. No soy tan "gadyetero"...