Como hacer una buena versión móvil de tu sitio

Todos nosotros conocemos la importancia de tener un sitio móvil estos días, es decir, un sitio que sea accesible desde un listófono, o incluso desde un celular básico que ya casi todos vienen con algún tipo de navegador. Y por supuesto los iPhones, iPads, iPods, iPuds y lo que venga después.

Lo bueno es que gracias a desarrollos como html5, css3, mejores pantallas en los móviles y motores como webkit, construir un sitio que se adapte a las dimensiones de un móvil es más fácil que nunca.

Lo malo es que eso no basta para crear un buen sitio móvil. Para que sea bueno tendrá que ir más allá de adaptar la resolución a la pantalla y cargar una nueva hoja de estilos para que se vea bien en el espacio reducido. Tenemos que pensar sobre que es lo más probable que el usuario quiera hacer y dejárselo lo más fácil y rápido posible.

Mirando a un vaso desechable en vez del sitio web

“¡Al diablo! Está más fácil encontrar la información en el vaso” Foto de Ed Yourdon

Por ejemplo, en un sitio para restaurantes en la versión de escritorio tal vez quieras poner fotos para mostrar el ambiente, los platillos, el estilo del lugar, etc. lo cual está muy bien cuando el usuario está pensando en a donde llevar a la novia a cenar al día siguiente o planeando una comida de negocios tranquilamente en su casa u oficina.

En la calle, con el móvil en la mano y un portafolios en la otra o esperando a que se ponga la luz verde, el usuario probablemente estará en una situación muy distinta: quiere saber que hay de comer, que tan lejos está del restaurante y si es necesario llamar para hacer una reservación. Todo eso con una sola mano, en una pantallita y con prisa. Así que si nos ponemos a enseñarle fotos y escondemos el número de teléfono en el pie de la página lo más probable es que sí se acuerde de nosotros pero no de una buena manera.

Esto no quiere decir que no puedas tener estas cosas en tu sitio móvil, pero será mejor dejarlas en un apartado secundario, a uno o dos clics de distancia, mientras que la primera pantalla se la dejamos a la información que el usuario realmente está buscando y las acciones que queremos que tome (llamar y hacer una reservación, por ejemplo).

El truco está en ponerse en los zapatos del usuario y la mejor manera de hacerlo es agarrar algunos cuantos (de preferencia desconocidos que cumplan el perfil de nuestro mercado meta) y pedirles que nos ayuden a probar un sitio. Y si puede ser en su hábitat natural (la calle, el taxi, el café), mejor. Y si tienen todos dispositivos diferentes, mejor.

Ya que los elegimos les pedimos que lleven a cabo una serie de acciones: hacer una reservación, encontrar el menú del día, hacer una orden, pedir más información, es decir, las acciones que a nosotros nos interesa más que nuestros usuarios lleven a cabo.

Mientras las hacen les pediremos que nos digan lo que piensan, que están haciendo y por que lo están haciendo sin darles nosotros ninguna ayuda.

Este es un tipo muy básico de prueba pero nos ayudará muchísimo a darnos cuenta como se comporta nuestro sitio web móvil y donde necesitamos corregir o hacer más fácil su uso. Literalmente hacer estas pruebas representan un mundo de diferencia.

¿Tienes alguna otra sugerencia o pregunta sobre sitios web móviles? ¡Déja un comentario!

Lecciones Aparte y 12 tips para los diseñadores web

Jeffrey Zeldman y Jeremy Keith en el SxSW 2007 en Austin

Jeffrey Zeldman (izq) y Jeremy Keith. Fotografía de Tantek

Jeremy Keith estuvo en el reciente Un Evento Aparte San Francisco y anotó en su blog, como hace siempre que va a este tipo de cosas, una serie de excelentes resúmenes y observaciones que, la verdad, son documentos indispensables para cualquier diseñador o desarrollador web.

Me quiero concentrar en el primero, Entender el Diseño Web, que trata de la exposición de Jeffrey Zeldman y comienza con la pregunta-respuesta ¿Qué es el diseño web? Empatía. Empatía con el usuario para ser más específicos. Jeffrey habla de la dificultad a la que se enfrentan los diseñadores web para hacer su trabajo más respetable, la inutilidad de los concursos y premios de la industria y lo que necesitamos hacer para mejorar nuestro oficio: no hacer diseño para impresionar a los demás (Como dice Dan Cederholm: Existe la posibilidad que un diseño web *realmente bueno* no reciba ni loas ni críticas. Funciona y ya.); el buen diseño es invisible, trata sobre la personalidad del contenido, no del diseñador, pone al usuario por delante.

Termina la exposición con 12 consejos para lograr un diseño web empático:

  1. Comenzar por el usuario.
  2. Conoce tus debilidades.
  3. Busca el trabajo o proyecto que te guste hacer.
  4. Vende las ideas, no los pixeles.
  5. Decirle al cliente “no sé” debe ser aceptable.
  6. Cultiva la confianza del cliente, que sepan que sabes lo que haces.
  7. Apoya tus ideas. No tengas miedo de respaldarlas con investigación.
  8. Documenta lo que estás haciendo. Deja un camino de papeles.
  9. Nunca cobres de menos.
  10. No hagas muestras gratuitas. No hagas una prueba gratis para conseguir un trabajo.
  11. No aceptes contratos que piden resultados apresurados. Nunca funcionan.
  12. Termina con el usuario. Y si tienes alguna duda, regresa al usuario.

Los consejos me parecen excelentes para todo aquel que se dedique al diseño web, y además hacen mucho eco con lo que apuntaba Cybergus en su blog sobre Lo que todo diseñador debería saber.

Espero que estas recomendaciones no caigan en oídos sordos, u ojos ciegos.