Blog

Diseño y desarrollo de un proyecto móvil: metodología, técnicas y herramientas.

(Créditos: koey)

Hay muchas herramientas y técnicas que nos ayudan a diseñar proyectos digitales para dispositivos móviles dentro de una metodología de trabajo UX. La mayoría de ellas las utilizamos también cuando diseñamos productos para otros dispositivos: desktop, TV o e-readers. Cada profesional utiliza unas u otras según las necesidades del proyecto. Os describo mi forma de trabajar y algunas de las que utilizo.

Para empezar un proyecto móvil puedes optar por varias metodologías de trabajo UX  (DCULearn StartupAgile UX). Por mi experiencia te diré que, al final, para ser ágiles en nuestro trabajo tenemos que usar las técnicas adecuadas y utilizarlas en su justa medida. Además, la tecnología cambia continuamente y tenemos un sinfín de oportunidades para aprender y probar nuevos enfoques.

Probar siempre nuevas ideas porque al final siempre hay otra forma mejor de hacer las cosas. 

A lo largo de cada una de las fases de trabajo cliente, responsable de proyecto, diseñador/es y programador/es, trabajaremos juntos.

La COMUNICACIÓN de todo el equipo en todo el proyecto será fundamental y uno de lo pilares fundamentales en cualquier metodología de trabajo que se siga.

En el desarrollo de un proyecto móvil suele haber dos enfoques de trabajo: por un lado el diseño de una aplicación nativa y, por otro, el diseño de una web app. En la primera el rol del diseñador UX está muy bien diferenciado con respecto al trabajo del programador. El diseñador UX es el encargado de definir, entre otras cosas, la estructura general de las pantallas y sus elementos de interacción, el diseño de la interfaz y la preparación de los archivos para enviarlos al desarrollador que se encargará de desarrollarlo con el lenguaje de cada plataforma móvil: Objective C para iOS, Java para Android o C# para Window Phone.

Si diseñamos una webapp (tecnología más sencilla y estándar, muchos sitios web móviles se están desarrollando en HTML5/CSS3,) tendremos que tener en cuenta que los diseños tienen que ser Responsive Web Design. Podemos utilizar cualquier herramienta para hacer nuestro prototipos pero utilizar frameworks de javascript nos ayudará mucho y facilitará la implementación posterior. Por eso aquí si el diseñador UX  conoce bien estos lenguajes dará mucho valor añadido al proyecto.

Por otro lado, decidirnos por un enfoque u otro dependerá de los objetivos de negocio y entender las características que diferencian las aplicaciones web, las aplicaciones nativas, híbridas y los diseños responsive. De cualquier forma, no  siempre hay que elegir entre una u otra. Webapps y aplicaciones nativas no son competidoras y pueden complementarse entre ellas. Mi opinión, a fecha de hoy, es tener primero una web de calidad y que ofrezca una buena experiencia de uso (todavía queda mucho camino por recorrer ) y luego centrarse en ofrecer una funcionalidad añadida a través de una aplicación nativa.

☂ Fases de trabajo: Explorar, Crear, Evaluar, Desarrollar, Publicar y Analizar.

Antes de abordar cualquier proyecto debemos asesorar a nuestro cliente, sobre todo si se enfrenta por primera vez a un desarrollo móvil: plataformas tecnológicas, técnicas, tipos de aplicaciones, ventajas e incovenientes de cada una de ellas, etc. Y en todo momento involucrarle en todas las fases de su desarrollo, parte de nuestro trabajo será garantizar, por un lado, que el producto es lo que el cliente ha pedido y, por otro, satisfacer las necesidades de nuestros usuarios. La clave es buscar ese equilibrio.

Explorar

Puede ser que nuestro cliente venga  ya con una idea de aplicación o que no lo tenga nada claro. De cualquier forma, debemos investigar, observar nuestro entorno, las personas que están a nuestro alrededor y las dificultades que encuentran los usuarios en su vida cotidiana. Esto nos ayudará a dar forma a esa idea o descubir otras nuevas y además saber si el proyecto es viable.

Tenemos que tener en cuenta que no es oro todo lo que reluce en el mercado de las aplicaciones para móviles. La mayoría de las apps que se realizan al final no son monetizadas porque los consumidores no están dispuestos a pagar por ellas. Por eso importante saber hacia donde vamos. Muchas veces, se hacen aplicaciones sin pensar en el objetivo del negocio y las necesidades del usuario. 

 “No hay viento favorable para el que no sabe a dónde va” (Séneca) . Una meta bien definida es fundamental, ya que ésta te va a orientar hacia la acción.

En esta etapa trataremos de obtener la mayor cantidad de información posible y necesaria para nuestro proyecto a realizar, tanto acerca del cliente como de los usuarios.

Cuando tengamos la idea es conveniente sondear las primeras impresiones entre nuestros usuarios o cuando los plazos de tiempo son muy ajustados.Podremos tantear si realmente puede funcionar o si debe corregirse. Es lo que llamamos test de guerrilla, comprobar si vamos bien con el concepto inicial planteado y recibir las primeras impresiones de ellos. Lo podemos llevar a cabo simplemente observando a las personas que tenemos  nuestro alrededor, familiares, amigos, vecinos, tomando nota de sus costumbres y dificultades y evaluando cómo la idea propuesta podría ayudarlos.

 

TÉCNICAS PROPUESTAS

:: Entrevistas y Encuestas.

:: Analítica  (cualquier herramienta nos proporciona información clave sobre qué tipos de usuarios móviles visitan la web. Yo uso Google Analytics).

:: Benchmarking (análisis competitivo).

:: Tormenta de ideas  (brainstorming).

:: Test heurísticos(rediseños), etc.

USUARIOS
-Para conocer a nuestros usuarios para quienes se diseñará la aplicación, podemos usar técnicas como «Personas y escenarios»,«Storyboard» o «Customer journey map».

Las «Personas» son descripciones detalladas de los usuarios de un sitio web o aplicación y sus metas.  El concepto de  “persona” corresponde a personajes determinados aunque ficticios, que permiten entender de manera clara quiénes serán los usuarios del mismo y más tarde los “escenarios“, es decir, las situaciones en que dichos personajes emplearán la aplicación. Este arquetipo que hagamos es fruto de una investigación real, analizando muchos usuarios posibles y determinando cuáles son los patrones de comportamiento y pensamiento que tienen en común entre ellos.

  Para comunicar los resultados de tus investigaciones al resto del equipo y cliente puedes hacer storyboard o un mapa con el ciclo de vida del cliente/usuario de tu app. Con estas técnicas podremos ilustrar la experiencia de nuestros usuarios con nuestro producto/servicio y transmitir algo más que citas en un documento aislado de persona y escenario:

El «storyboard» es  una herramienta visual muy útil para comunicar rápidamente las ideas conseguidas de la persona en un escenario de interacción. Se comparte con el equipo de diseño para aprender del usuario e inspirar nuevos conceptos de diseño. Echa un vistazo a la tira cómica de Matt, Un día en la vida de un diseñador UX .

«Customer journey map» (o mapa del ciclo de vida del clienteilustra los pasos que recorrerá nuestro usuario/cliente antes, durante y después de adquirir nuestro producto o servicio: sus necesidades individuales, la serie de interacciones que tendrá que realizar para cumplir con ellas y los estados emocionales que podrá experimentar durante todo el proceso. Puede proporcionarnos una presentación clara de todo el proceso llevado a cabo por el usuario, similar al storyboard. 

Como veremos en la siguiente fase, estas técnicas nos ayudarán a definir las funcionalidades que tendrá nuestra aplicación, realizar los diagramas conceptuales, de interacción y los wireframes.

 

HERRAMIENTAS

:: Encuestas online: surveymonkey.com, E-encuestas, etc.

:: Para elaborar nuestras presentaciones de personajes podemos utilizar cualquier software: Word, Powerpoint, Illustrator, etc.

:: Algunas plantillas que puedes utilizar para hacer Viajes de usuario.

:: Plantilla Persona es una plantilla de MS Word para ayudarte a desarrollar los perfiles de usuario en proyectos.

:: Para contar historias de usuarios te propongo:

:: Storyteller, una herramienta gratuita en línea que permite crear automáticamente storyboards de películas (o storyboards) a partir de guiones de texto.

:: Indigo Studio es una herramienta gratuita para bocetar y prototipar, útil para diseño web y de aplicaciones. También permite la realización de storyboards.

Crear

Parte de nuestra estrategia es la de crear un buen diseño: el diseño es la base del producto, el atractivo que impulsa a las personas a interesarse por él. Basándonos en la fase anterior, la premisa de la fase de diseño es poner los resultados de nuestras investigaciones y las ideas frente a los usuarios, obtener sus comentarios, refinarlos y repetir. Estas ideas pueden ser representadas por prototipos realizados con papel y wireframes interactivos, todos creados en un principio en baja fidelidad para evitar, de momento, cualquier conversación relacionada con los detalles visual.

Empezamos sentando las bases de la funcionalidad. Todas las acciones e interacciones que hacen falta para que un usuario consiga su objetivo, se traducen en funciones que debe tener la aplicación.

Después, realizar un diagrama de arquitectura nos ayudará a determinar cuáles son las pantallas necesarias y qué funciones debe tener cada una de ellas. La Arquitectura de Información es una forma de organizar el contenido y funciones de toda la aplicación, de forma que puedan ser encontrados rápidamente por el usuario.  Los dispositivos móviles tienen su propio conjunto de patrones de Arquitectura de la Información. Mientras que la estructura de un sitio realizado con la técnica de Responsive Web Design puede seguir unos patrones “clásicos” para la web, las aplicaciones nativas, por ejemplo, a menudo emplean estructuras de navegación basado en pestañas.  Designing for Mobile, Part 1: Information Architecture.

  Ahora ya podemos empezar a construir nuestros wireframes.

Un Wireframe es una representación muy simplificada de una pantalla individual, que permite tener una idea inicial de la organización de los elementos que contendrá nuestra aplicación. Pueden ser construidos con papel o con software.

Puedes empezar haciendo tus primeros bocetos en papel o ayudándote de plantillas metálicas (stencils), para luego pasar a hacer  los wireframes/prototipos con software y ejecutar la interacción entre las diferentes pantallas.

Principios de usabilidad y buenas prácticas en móviles y tabletas

Al diseñar para múltiples dispositivos, la mejor estrategia es mantener la experiencia del usuario final en mente. Asegurarnos de que en todos los dispositivos, los usuarios pueden completar su tarea con facilidad y eficiencia, y la experiencia se sintoniza a sus expectativas desde ese dispositivo. Ten en cuenta siempre los principios de usabilidad y buenas prácticas en móviles y tabletas y que la mayoría de los dispositivos modernos móviles emplean pantallas táctiles. Las usamos no sólo para ver el contenido, sino también para interactuar con ese contenido. Esto obliga a los diseñadores a considerar la ergonomía, los gestos, las transiciones y por último, los patrones de interacción específicos para móviles.

 Look and feel

En esta fase convertimos los prototipos en una maqueta gráfica, dando vida a los wireframes con nuestro estilo y marca de la empresa.

Para ayudarnos a dar forma a nuestros diseño podemos ayudarnos de retículas (Grid en inglés), que serán la base sobre la que se construirá nuestro diseño. Cada  uno de los sistemas operativos móviles tiene diferentes retículas por eso para que una aplicación pueda estar disponible para todos los tipos de smartphone y tablets de iOS y Android, tiene que diseñarse para iPhone, iPhone con pantalla retina, Android ldpi, Android mdpi, iPad 2, iPad 3, etc. Tenemos que tener en cuenta, las diferentes densidades, los tamaños de las diferentes pantallas y los tamaños de los iconos de cada sistema operativo móvil. La retícula nos puede asegurar mayor equilibrio en nuestra composición en el momento de diseñar y permitirá tomar decisiones y hacer pruebas más rápidamente.

Tenemos que tener como referente en todo momento las Guías de estilo (Human Interface Guidelines) de cada sistema operativo móvil (en el apartado herramientas os dejo un enlace a cada guía).

♥ Diseño emocional - ¿Qué queremos que sienta la gente?

Una de las tendencias actuales en el mundo del diseño es la de centrar la atención en el usuario y en sus emociones. Un diseño adecuado marca la diferencia en productos y servicios. Se trata de intentar que el usuario viva una experiencia emocional. Y que esa experiencia sea grata para que dicho usuario quiera repetir. Mira el vídeo de iOS7 de Apple.

Las emociones son cada vez más importantes en el mundo del software y su reconocimiento será una parte esencial de las aplicaciones que se desarrollen a partir de ahora.

Pasamos de diseñar cosas prácticas (funcionan bien, se entienden bien) a productos y servicios que se disfruten, que reporten placer y hasta diversión, en definitiva que hagan florecer las emociones.

Donald Norman  lo explicó muy bien en su libro “Emotional Design”, proponiendo que el diseño emocional se basa en la respuesta emocional que obtenemos de un usuario cuando usa un producto o servicio. No solo Donald Norman ha estudiado estos temas.  Patrick Jordan o Peter Diesmet son algunos de los estudiosos de cómo introducir la emoción desde el diseño. Una de las herramientas más sorprendentes mediante las que los diseñadores introducen el sentimiento en sus productos y servicios es la Ingeniería Kansei. El concepto japonés de Kansei se refiere a la imagen mental y a la percepción que tiene un usuario cuando se encuentra ante un nuevo producto.

Hace unos meses me llamó la atención la forma de saber cuando una decisión de diseño es buena o mala que utilizó el equipo de UX de Android. Se inicia con un modo de pensar: cada decisión de diseño que hacen afecta a las emociones del usuario de una manera positiva o negativa. Presentación en el Google I/O 2013.

 

TÉCNICAS PROPUESTAS

:: Análisis de tareas (Task Analysis).

:: Diagrama de funcionamiento (Flow diagram).

:: Sketching (prototipo en papel).

:: Diagrama de presentación (Wireframe).

:: Etiquetado (Labeling).

:: Responsive Web Design.

 

HERRAMIENTAS

ESQUEMAS CONCEPTUALES

:: XMind es un programa de mapas mentales de código abierto para Windows, Mac OS X y Linux.CMapTools.

::Los usuarios de Mac OS X y iPad pueden elegir OmniGraffle para crear diagramas de flujo, organigramas, y muchos otros tipos de diagramas.

:: Gliffy es una aplicación de diagrama basado en Web con soporte para diagramas de flujo y mapas de sitio.

WIREFRAME Y PROTOTIPOS

Hay muchas herramientas para crear wireframing. Te diré que no hay ninguna ideal, por lo menos para mí.Para las primeras etapas se suelen hacer a lápiz y luego utilizar software para dotarlas de interacción. La mayoría de estos programas tienen además plantillas para móviles que puedes descargar e incluir como librerías.

  1. Primeros prototipos en papel
    1. Popapp.  Esta aplicación nos permite diseñar en papel, tomar fotos y finalmente simular la interacción.
  2. Wireframe
    • Prototipos con software de escritorio. La mayor parte de estos programas ofrecen plantillas para smartphones y tablets para diseñar wireframes con los elementos básicos de interacción y de interfaz (botones, listas y cabeceras)
      • Balsamiq.
      • Axure RP Pro.
      • Pencil Project  (gratuito). Puede ser usada como aplicación en Windows, Mac o Linux, o bien como una extensión de Firefox. Puede incorporarse a esta herramienta unas utilidades específicas para prototipar para Android, las Android UI Utilities.
  3.  Si dominas HTML o eres también el que desarrolla la aplicación web, puedes prototipar con estas herramientas más relacionadas con el desarrollo front-end.
      • Sublime Text (gratuito).
      •  Dreamweaver.
      • y para los más atrevidos:
        • Usar librerias de Javascript: Lungo.js   jQuery Mobile.
        • Usar Bootstrap, es un framework diseñado para simplificar el proceso de creación de diseños web. Para ello nos ofrece una serie de plantillas CSS y de ficheros JavaScript.
  4.  Herramientas específicas de prototipado de aplicaciones móviles:
    • fluid, pensada específicamente para desarrollo de aplicaciones móviles.
    • Una herramienta multiplataforma online es proto.io. Nos permite orientarnos a varias plataformas además de poder usarla también para sitos móviles o web apps.
    • Sencilla y gratuita, y también para iPad está app Manuvo.
    • También gratuita está Blueprint Lite.
  5.  Herramienta propia de cada aplicación:
    • Xcode, para el desarrollo de iOS.
  6. En la nube: UxPIN.
PLANTILLAS PARA PROTOTIPAR
Sneakpeekit: Esta web provee retículas en pdfs para poder imprimir y bosquejar nuestras ideas sobre el diseño de las aplicaciones web o móviles. También las tienes en pdf para convertirla posteriormente en una maqueta gráfica.

EXTENSIONES Y EMULADORES

A medida que vayas avanzando en tus prototipos conviene que pruebes constantemente con emuladores de dispositivos móviles. Una interfaz puede verse muy bien en la pantalla del ordenador, pero esto no es un escenario real pues no es allí donde finalmente se verá el diseño.

:: Existen diferentes herramientas que permiten probar el diseño directamente desde el ordenador conectado al móvil. Para Android una alternativa es usar Android Design Preview, mientras que en iOS su equivalente es LiveView

:: MicroEmulator : Simulador de Opera Mini.

:: iPad Peek : te permite ver cómo se representará cualquier página en el iPad.

Si es Responsive Desing, yo uso las siguientes extensiones para Chrome y Firefox.

::  Window Resizer (Chrome). Cambia el tamaño de la ventana del navegador para emular varias resoluciones de pantalla

:: Responsive Testing, para Chrome. Prueba tu sitio web en las medidas de los dispositivos moviles.

:: Modify Headers:  Extensión de Firefox que puede configurarse para que el navegador imite el funcionamiento de varios dispositivos móviles.

La extensión Web Developer agrega varias herramientas de desarrollo web a un navegador. La extensión está disponible para  Firefox y  Chrome, y se ejecutarán en cualquier plataforma que estos navegadores soportan incluyendo Windows, Mac OS X y Linux.

VALIDAR

:: El W3C mobileOK Checker  es un servicio gratuito de la W3C. Esta herramienta valida que nuestra app web sigue los estándares, se muestra bien en dispositivos móviles y cómo mejorarla.

:: W3C Mobile Web Buenas Prácticas. Las “Buenas Prácticas en Web Móvil” son un Estándar Web del W3C cuyo objetivo es ayudar a los desarrolladores Web a diseñar y publicar contenido Web que funcione adecuadamente en dispositivos móviles.

:: mobiReady: evalúa los sitios web para móviles.

MAQUETA GRÁFICA

:: Photoshop – Hay diseñadores que directamente hacen sus prototipos en Photoshop y luego hacen un diseño de alta calidad cuando está aprobado.
:: Illustrator.
:: Sketch herramienta de diseño basada en vectores.
:: Origami. Herramienta gratuita para Quartz Composer, creada  por el equipo de Facebook para crear prototipos de diseño interactivo.

Hay páginas de diseñadores online que ofrecen botones, iconos y todos los elementos que incluye una interfaz, para que de una manera sencilla puedas crear un prototip:

:: House of Buttons: Una selección muy cuidada de botones para páginas web y aplicaciones móviles y de escritorio. Carece de buscador, pero buceando por sus páginas seguramente encuentres algo de tu interés.

Existen en Internet plantillas de diseño tanto para Android, como para iOS y Windows Phone, que contienen elementos de interfaz que pueden ser aprovechados para comenzar con una base de componentes visuales como botones, barras y fondos. La mayoría de estos gráficos están en formato vectorial, lo que facilita llevarlos a diferentes tamaños.

CAPTURAS DE PANTALLA: PATRONES DE INTERACCIÓN

Para ver las diferentes propuestas de interacciones que han realizado otros diseñadores puedes visitar estas páginas:
:: uxarchive.
:: iOS Patterns.
:: Mobile Patterns.
:: Pttrns.

GUÍAS DE ESTILO DE LOS PRINCIPALES SISTEMAS OPERATIVOS MÓVILES

TIPOGRAFÍA

Tipografía para móviles

Tipografía: RWD. Un resumen de los mejores artículos y tutoriales

Evaluar

Una vez que tengamos algo concreto pasaremos hacer nuestras pruebas de usabilidad . Otro de los dolores de cabeza más comunes cuando diseñamos una aplicación es el testing de aplicaciones moviles.  Algunas funcionalidades de las aplicaciones se basan en características intrínsecas ligadas a los dispositivos móviles, como la geolocalización, la conectividad a Internet en todo momento, la realidad aumentada, etc. Además las aplicaciones para móviles están vinculadas a un contexto de uso determinado y no siempre se pueden recrear en un laboratorio.

Los tipos de pruebas para dispositivos móviles están dirigidos hacía la funcionalidad, compatibilidad, interoperabilidad, localización y por supuesto, la usabilidad de la aplicación.

Podemos hacer pruebas en cualquier fase de desarrollo de nuestro proyecto. Con los primeros prototipos que hagamos se pueden ofrecen propuestas de interacción a nuestros clientes y resto de equipo y, por otro lado, se puede comprobar que los flujos están bien definidos y las necesidades de los usuarios cubiertas.

Se pueden hacer también pruebas cuando tenemos una versión de alta fidelidad del producto, con su identidad gráfica. Entoncea se valida de nuevo con las partes interesadas y los usuarios finales a través de las sesiones de pruebas de usuario.

Para cualquier de las pruebas primero tienen que plantearse una serie de tareas y objetivos sobre la aplicación o webapp que tienen que cumplir nuestros usuarios.

 

TÉCNICAS

Pruebas con usuarios para móviles(User test).

 

HERRAMIENTAS

Una Interesante forma de hacer test con usuarios en dispositivos móviles

- Apps para testear las apps: Test Studio

Remote Test Lab de Samsung. La solución de Samsung ofrece un montón de diferentes dispositivos, todos de Samsung, para que los desarrolladores puedan testear sus apps.

Empresas que  ofrecen el servicio de testing de aplicaciones moviles:

http://appytest.bdigital.org/

http://testobject.com/

- Mobile testing (userzoom) te permite realizar Tests de Usuarios en la interfaz de dispositivos móviles.

Desarrollar

Una vez realizado nuestros prototipo pasaremos al programador los archivos, documentación e indicaciones necesarias, dándole soporte en todo el proceso de desarrollo. La comunicación entre diseñador y programador es constante ya que surgen dudas, errores que hay que corregir, etc.


Publicar y Analizar

Una vez terminado el proceso de desarrollo, la aplicación es finalmente puesta a disposición de los usuarios, ya sea por medio de aplicación web  o a través de cada tienda ( “markets”):  App StoreGoogle Play, Window Phone o Firefox Marketplace.

Se debe realizar analíticas, estadísticas y comentarios de usuarios, para evaluar el comportamiento y desempeño de la app, corregir errores, realizar mejoras y actualizarla en futuras versiones.

Las herramientas de tracking sirven para hacer seguimiento de campañas en diferentes servidores o soportes publicitarios.  Conocer la fuente de tráfico que genera más y mejores instalaciones (las que generan más dinero) permitirá tomar decisiones de marketing en función de la rentabilidad de las distintas campañas. Los trackers más importantes a escala mundial son Flurry y Mobile app tracking.

Analytics

Este análisis no dista mucho del análisis web tradicional: qué secciones funcionan, cuánto se usa la app, qué acciones se realizan… Hay muchas herramientas de Analítica, yo uso Google analytics, que además es 100% gratuita.

También hay herramientas que miden “por fuera” de la app. Recopilan datos para tomar decisiones estudiando la competencia, como App Annie, que ofrece información sobre descargas, países y rankings a nivel mundial, hace estimación de ingresos y da información sobre los dispositivos que descargan las apps que nos interesan. Distimo es otro ejemplo de este tipo de herramienta. Ninguna requiere instalar nada en la app y nos ayudan a medir las acciones de SEO o ASO de forma gratuita.

 

FIN DEL POST. ¿un poco largo quizás?

Enlaces recomendados

Créditos de los iconos: Flaticon

Este post tiene 1 Comentario

  1. [...] Diseño y desarrollo de un proyecto móvil: metodología, técnicas y herramientas por Angeles_Alonso a accnera.com enviado: ____ Diseño y desarrollo de un proyecto móvil: metodología, técnicas y herramientas. etiquetas: diseño móvil, ux mobile usuarios: 1   anónimos: 0   negativos: 0   compartir: sin comentarios tecnología, diseño karma: 6 (adsbygoogle = window.adsbygoogle || []).push({}); [...]

Deja tu comentario