BASES PARA DISEÑAR APPS PARA MÓVILES. Wenceslao Zavala

Transcripción

1 BASES PARA DISEÑAR APPS PARA MÓVILES Wenceslao Zavala

2 Qué son las aplicaciones? En esencia, es un software Las aplicaciones son para los móviles lo que los programas son para las computadoras iphone: cambio grande en las App, generó nuevos modelos de negocio que hicieron de las aplicaciones rentables (App Store, Google Play y Windows Phone Store)

3 Aplicaciones móviles vs Softwares Apps (mobile) Softwares (desktops) (-) Procesamiento (+) Procesamiento Pantalla + pequeña Pantalla + grande Touchscreen + avanzado Pantalla simples (+) Interacción (-) Interacción

4 Web Móviles Las web móviles se acceden usando Internet y un navegador. Son sitios web que se adaptan a las pantallas de los distintos dispositivos.

5 Aplicaciones vs web móviles DESEMPEÑO COSTO COMPATIBILIDAD Apps Nativa Se lo ejecuta localmente con cargamento rápido y mejor Interacción Más inversión debido a la demanda de tiempo y recursos Exige una versión diferente para cada sistema operacional (nativo) Web Apps La dependencia de Internet resulta en cargamento y respuesta más lentos Menos inversión, ya que es más rápido y fácil de desarrollar Creación fácil de versiones multiplataforma y para navegadores (HTML5)

6 Mobile First El concepto de mobile first, implica plantear el proceso de diseño teniendo en cuenta el móvil en primer lugar Libro: Mobile First Luke Wroblewski Esta forma de trabajar nos hace pensar en el móvil como punto de partida, obliga a concentrarse en lo esencial de un producto y a hacer foco solo en lo que tiene sentido

7 Tipos de aplicaciones Existen varias formas de desarrollar una aplicación, con diferentes características y limitaciones, especialmente desde el punto de vista técnico El tipo de aplicación a elegir condiciona el diseño visual y la interacción

8 1. Aplicaciones nativas Son aquellas que han sido desarrolladas con el software que ofrece cada sistema operativo, llamado genéricamente Software Development Kit o SDK. Se diseñan y programan específicamente para cada plataforma, en el lenguaje utilizado por el SDK

9 2. Aplicaciones web La WebApp está basadas en navegadores, con programación en HTML, conjuntamente con JavaScript y CSS, herramientas ya conocidas para los programadores web. Permite programar de forma independiente al sistema operativo en el cual se use la aplicación.

10 3. Aplicaciones híbridas Combinación entre Aplicaciones Nativas y WebApps Se desarrolla como una aplicación web (HTML, CSS y JavaScript), y una vez que está terminada, se compila o empaqueta como una aplicación nativa Esto permite casi con un mismo código obtener diferentes aplicaciones para Android y ios, y distribuirlas en cada una de las tiendas Mediante librerías se puede acceder a las capacidades del teléfono como una app nativa.

11 3. Aplicaciones híbridas - ventajas Las aplicaciones híbridas, también tienen un diseño visual que no se identifica en gran medida con el del SO Hay formas de usar controles y botones nativos de cada plataforma para apegarse más a la estética propia de cada una Herramientas para desarrollar este tipo de aplicaciones: Apache Cordova o Icenium Apache Crodova: Icenium:

12 Cuál se debería utilizar Decidirse por una u otra está determinado por la forma en que afectan la experiencia de uso: Si la disponibilidad de la app sin Internet, la posibilidad de usar notificaciones y el acceso a los recursos de hardware del teléfono sean importantes, la opción es una aplicación nativa Si ninguna de estas cosas es realmente importante para la aplicación, quizás sea más fácil diseñar una aplicación web, siendo el costo de desarrollo más bajo y la forma de trabajar un poco más ágil. Las aplicaciones nativas ofrecen una mejor experiencia de uso y sobre todo, rendimiento. Algunas híbridas pasaron a ser nativas por este motivo.

13 Desarrollar mi App Antes de desarrollar la idea de una aplicación hay que tomar una serie de decisiones que marcarán el rumbo del proyecto Categorías de las aplicaciones: Una forma de agrupar las aplicaciones es de acuerdo al tipo de contenido que ofrecen al usuario

14 Categorías de las aplicaciones Entretenimiento: Angry Birds Sociales: Facebook, Twitter e Instagram Utilitarias y productividad: Evernote Educativas e informativas: Nearpor, Articles, Pulse Creación: Paper, Mindomo

15 Tipos de aplicaciones por costo Apps gratuitas: mayor beneficio a obtener de una aplicación gratuita es el alcance o la cantidad de usuarios potenciales a los que puede llegar, fundamental para el conocimiento de la aplicación Apps de pago: requieren las cantidad de descargas para ser rentables Freemium: combinación de los dos anteriores (free y premium), consiste en descargar la aplicación gratis, permitiendo un uso básico y limitado, y al pagar puede recibir funciones más avanzadas

16 Monetización Los modelos de monetización son diferentes caminos para obtener dinero a través de las aplicaciones: Compras dentro de la app (In-app purchase) Line, vende stickers Pagar por la versión completa Fruit Ninja Publicidad

17 Ofrecer algo que diferencie a tu aplicación y que tenga valor para el usuario La cantidad de aplicaciones disponibles en el mercado representa una gran competencia, pero también es un desafío y una oportunidad para sobresalir. Una idea comprobada es el primer paso para conseguirlo.

18 Explorando ideas Para diferenciarse de las demás, una aplicación tiene que aportar algo significativo y de valor para el usuario 1. Tener un objetivo, como buscar el mejor camino para llegar a casa cuando se está perdido 2. Pensar en el usuario, diseño centrado en el usuario, conocer al usuario permite tomar decisiones de diseño que ayuden a crear aplicaciones intuitivas y más fáciles de usar 3. Determinar el contexto, no es lo mismo diseñar una app para una persona que está corriendo, que para alguien que estará sentado esperando el micro

19 Proceso de diseño y desarrollo Va desde la concepción de la idea hasta el análisis luego de ser publicada en las tiendas

20 1. Conceptualización Esta etapa se define una idea de lo que será la aplicación, teniendo en cuenta las necesidades y problemas de los usuarios. Ideación Investigación Formalización de la idea

21 2. Definición Personas y Viaje del usuario, se describe detalladamente a los usuarios para quienes se diseña la aplicación, usando estas metodologías Definición de usuarios Definición funcional Experiencia de Usuario: Es la capacidad de una interfaz de generar sensaciones y emociones positivas durante el proceso de interacción con quien la utiliza.

22 Los 5 planes (Jesse James Garret.The Elements of User Experience) La Superficie trae todo lo visual unido: Cómo será el aspecto del producto final? El Esqueleto hace concreta a la estructura: Qué componentes permitirá a la gente a usar el sitio? La Estructura da forma al alcance: Cómo encajan y se comportan las piezas del sitio? El alcance transforma la estrategia en requisitos: Qué características del sitio se necesidad incluir? La estrategia es donde todo comienza: Qué queremos para publicar el sitio? Qué quieren los usuarios?

23 Elementos de la Experiencia de Usuario

24 2. Definición Concepto Personas Bases para diseñar tu Web APP para móviles

25 2. Definición Concepto Personas El concepto Personas fue acuñado por Cooper, y es una herramienta de gran utilidad que se usa constantemente en el diseño de interacción actual Consiste en definir modelos o arquetipos de usuarios para los cuales diseñar, teniendo en cuenta sus necesidades y objetivos El resultado final de esta investigación es una representación visual donde se modela al usuario a partir de los datos obtenidos: la Persona tendrá una cara, un nombre, una historia, ambiciones y objetivos Bases para diseñar tu Web APP para móviles

26 2. Definición Concepto Personas Bases para diseñar tu Web APP para móviles

27 2. Definición Viaje del usuario Las Personas vistas individualmente pueden servir para conocer un modelo de usuario, pero lo importante es saber cómo se comporta y siente, cuando tiene un objetivo que cumplir en un contexto de uso determinado Acá es donde entra en juego el Viaje del usuario (user journey), una forma de contar visualmente de principio a fin, el proceso que realiza una Persona desde que tiene una necesidad hasta que la satisface usando la aplicación Bases para diseñar tu Web APP para móviles

28 2. Definición Viaje del usuario Bases para diseñar tu Web APP para móviles

29 2. Definición Definición funcional 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. Siguiendo el Viaje del usuario, se puede detectar cuáles son las necesidades que tiene en cada etapa y cuáles herramientas requiere para poder avanzar a la siguiente Bases para diseñar tu Web APP para móviles

30 3. Diseño Se llevan a un plano tangible los conceptos y definiciones anteriores Wireframes Prototipos Test con usuarios Diseño visual

31 3. Diseño AI 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 Ya definido el Viaje de usuario y las funciones, un diagrama de arquitectura utiliza esta información para determinar cuáles son las pantallas necesarias en cada etapa del viaje y qué funciones debería tener cada una de ellas

32 3. Diseño - Wireframes Un wireframe es una representación muy simple de una pantalla, que permite tener una idea inicial de la organización de los elementos que contendrá, identificando y separando aquellos informativos de los interactivos

33 3. Diseño - Wireframes Para qué sirve: Como herramienta personal de exploración Evaluar diferentes alternativas de navegación e interacción, de una forma ágil y rápida Como herramienta para comunicar ideas abstractas En etapas tempranas del proyecto, es necesario transmitir la idea general de la aplicación a otras personas, centrándose en la funcionalidad, objetiva y racional Como un mecanismo para realizar las primeras evaluaciones de interfaz Es posible detectar problemas de interacción y usabilidad, al sondear con usuarios o personas ajenas al proyecto

34 3. Diseño - Wireframes La idea de una solución requiere ser bajada a la realidad usando wireframes antes de empezar a diseñar los detalles de una interfaz

35 3. Diseño - Prototipos Representación de la aplicación que sirven para probarla, permitiendo detectar errores de usabilidad en etapas tempranas de desarrollo. Generalmente, se trata de maquetas con una interacción suficiente para poder navegar entre las diferentes pantallas Están destinados a pruebas, por lo tanto deben desarrollarse solo aquellas pantallas necesarias para completar de principio a fin la tarea que se quiere probar

36 3. Diseño - Diseño visual La interfaz de una aplicación es como la ropa que nos ponemos para salir a la calle Es también la capa que hay entre el usuario y el corazón funcional de la app, el lugar donde nacen las interacciones Compuesta por botones, gráficos, íconos y fondos, que tienen una apariencia visual diferente en cada uno de los sistemas operativos, porque Android, ios y Windows Phone tienen su propia forma de entender el diseño

37 3. Diseño - Diseño visual Interfaz Nativa (mobile) Basadas en elementos preestablecidos según plataforma Menos trabajo de Diseño Usuario familiarizado con la interfaz Aplicación estándar, por lo tanto, poco atractiva. Interfaz Personalizada (web app) Creada desde cero, con un diseño propio Mayor trabajo de diseño y desarrollo Una interfaz más atractiva y diferenciada Más atención en cada detalle (navegación, usabilidad)

38 3. Diseño - Diseño visual Claves en el diseño: Diseñar para el tamaño del dedo. Se recomienda botones con por lo menos 40 a 80px. No existe el evento "mouse over. Desplazamiento de contenido vertical y navegación horizontal, que sea fácil de aprender.

39 El diseño no es sólo lo que se ve y siente. El diseño es cómo funciona. Steve Jobs

40 4. Desarrollo El programador le da vida a los diseños y crea la estructura sobre la cual se apoya el funcionamiento de la aplicación Una vez terminada la versión inicial, se dedica a corregir errores funcionales para asegurar el correcto desempeño de la app y preparla para su aprobación en las tiendas Programación del código Corrección de bugs

41 4. Desarrollo - Plataformas Appery.io: basada en la nube, crea apps para Android, ios y Windows Phone, e incluye Apache Cordova con acceso a sus componentes integrados Mobile Roadie: soporta todos los tipos de medios de comunicación, con la importación automática de RSS, Twitter o Google News Key Words TheAppBuilder: utiliza el kit de herramientas en línea. Good Barber: apps para iphone y Android, sin producir una sola línea de código Appy Pie: Basada en la nube, permite crear apps para Windows, Android e ios, y publicarlas directamente en Google Play o itunes.

42 5. Publicación La aplicación se pone a disposición de los usuarios en las tiendas. Es muy importante evaluar el comportamiento y desempeño de la app a través de analíticas, estadísticas y comentarios de usuarios para corregir errores y realizar mejoras. Lanzamiento Seguimiento Actualización

43 5. Publicación - en las tiendas oficiales Una aplicación se publica después de la etapa de pruebas, cuando ya se tiene seguridad acerca de su correcto funcionamiento, estabilidad, desempeño y se considera libre de errores, tanto de usabilidad como de diseño

44 5. Publicación - en las tiendas oficiales La publicación no es gratuita. Hay que asumir un costo para iniciar el proceso que varían en cada caso Google Play: 25 dólares por única vez App Store: 99 dólares anuales Windows Phone: 99 dólares anuales Crear la cuenta para publicación y realizar el pago correspondiente, permite acceder a una serie de herramientas de gestión y estadísticas sobre la cantidad de descargas de la app y su monetización

45 5. Publicación - Aprobación Subir una aplicación no garantiza que esta sea publicada, ya que debe someterse a un proceso de aprobación diferente en cada tienda Google Play es más abierto y tolerante, a menos que incumplan claramente alguna de las políticas de la tienda App Store la aprobación es especialmente rigurosa, con una política pensada para garantizar cierto estándar de calidad Windows Phone la aplicación debe pasar un proceso de certificación en el cual se verifica que se cumplan las normas de la tienda

46 BASES PARA DISEÑAR APPS PARA MÓVILES Wenceslao Zavala