Curso de Diseño de Interacción (día 4)

El cuarto día estuvo dedicado el diseño para dispositivos móviles, tema de gran actualidad y en constante cambio. Fue impartido por Ester Serrano, diseñadora de interacción en DesignIt Madrid, que demostró su pasión y conocimiento del mundo móvil, terminando con una guinda filosófica de lo más inesperada 🙂

Introducción

Puesto que los hábitos previos nos condicionan (junto con el contexto y nuestras metas), empezamos por hacer un brainstorming de lo que nosotros asumiamos del diseño para móviles. El resultado aparece en la imagen de la derecha.

Después vimos algunas aplicaciones de iPhone para contextualizar un poco sobre qué iba a tratar la clase. Ejemplos: Paper, Clear, Flipboard, Readability, Any.Do, Minube y Svpply.

La vida de las apps es muy corta (en su mayoría). Puede ser interesante poner el foco en una sola cosa y hacerla muy bien.

Estadísticas

Ester nos comentó varios datos estadísticos muy interesantes, como por ejemplo que:

Estos datos están en constante cambio, con lo que conviene revisarlos con cierta frecuencia. Además, es muy interesante revisar las analíticas de uso de tu web para ver tu propia realidad. A continuación el ejemplo de una web mía:

Antes de empezar

Hay que plantearse para qué dispositivos queremos que funcione nuestra aplicación (cuántos más, mejor; es una cuestión de presupuesto). Después hay que decidir entre:

  • Web móvil, se genera una versión especial del frontend de la web en función del navegador web detectado. Hay que hacer una para cada tipo de móvil que queramos soportar. Aprovecha el poder de la URL. El acceso es más fácil y resulta menos caro que hacer una aplicación nativa para varias plataformas. No hay retrasos en las actualizaciones.
  • Aplicación nativa, que pueden descargarse de las tiendas de aplicaciones de cada marca y aparecen integradas con el resto de aplicaciones del teléfono. Hay que hacer una para cada tipo de móvil que queramos soportar. Permiten aprovechar todas las capacidades del dispositivo. El rendimiento suele ser mejor. Se puede cobrar por ellas.
  • Web responsive, es una única web que se visualiza de forma diferente según el dispositivo. Es el navegador el que determina cómo visualizarla.

En cuanto a las resoluciones de pantalla, también hay que determinar cuáles se van a soportar y ver el diseño cuanto antes en el dispositivo.

Diseño: Ortografía

  • Layout
  • Navegación (¿cuánto ocupa? Ponerla después del contenido)
  • Área touch (al menos 44 puntos para iOS. Ver recomendaciones para cada dispositivo)
  • Color (alto contraste en lo que sea importante)
  • Fuentes
  • Texto (en pantalla se necesita un tamaño mayor al del papel)
  • Formularios
  • Iconos

Diseño: Concepto y Método

Aquí hablamos sobre LukeW, mobile first, convertir las limitaciones en oportunidades, las media queries, las retículas fluidas, los patrones de navegación en responsive web design,…

Método:

  1. Establecer breakpoints
  2. Iterar y colaborar, prototipando mucho y pronto.

Del prototipo se pasaría a un wireframe digital y luego al diseño visual, o según la prisa que tengamos, se puede pasar del prototipo al diseño visual directamente.

Práctica

En esta ocasión realizamos la práctica a lo largo del día, intercalándola con teoría. Me gustó esta forma de trabajar.

El objetivo era diseñar una aplicación para teléfonos móviles. En nuestro caso elegimos realizar una aplicación para un festival de música Indie llamado Indie3.

Comenzamos pensando en:

  • El contexto. ¿En movimiento? ¿Influye el clima? ¿Compartido? ¿Se puede cambiar de móvil a PC y viceversa?.
  • La necesidad. ¿Qué problema soluciona? ¿A quién? ¿Dónde va a usarlo? ¿Modelo de negocio?.

Después realizamos un storyboard de cómo un usuario típico utilizaría la aplicación. Esto nos permitió ponernos en el lugar de la persona y trabajar con los datos de contexto que habíamos “obtenido” al principio.

Hicimos una especie de card sorting donde agrupamos las funcionalidades que queríamos que tuviera la aplicación. Esto nos ayudó a decidir qué quitábamos para una primera versión, ya que se nos ocurrían muchas cosas que estaban empezando a hacer demasiado compleja la aplicación.

Para terminar, hicimos prototipos de la pantalla principal y de las de cartel y mapa, que nos parecieron las más interesantes.

 

 

2 comentarios en “Curso de Diseño de Interacción (día 4)”

¿Opiniones, comentarios, críticas? :)