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



Documentos relacionados
Ahora tú también puedes crear aplicaciones

Elemento Design e Mobile PagBoleto Floopie App

TP2. Sistemas de DG. Movil Apps

Qué utilidad tiene esta aplicación en licenciatura en Derecho?

4.1 Dispositivos y manejadores de dispositivos: device drivers

inmoapp El sistema de software para tener Web + App

Todos los dispositivos, un solo diseño.

Cómo aprovechar la tecnología móvil en mi negocio

FOTOGRAFIA MOVIL EN IPHONE Y ANDROID.

Sistemas. Tecnologías de la Información y la Comunicación 1º bachillerato

Tu empresa te pide que subas una App al Google Play Store.

Sesión No. 12. Contextualización INFORMÁTICA 1. Nombre: Editor de Publicaciones (Microsoft Publisher)

AVISO IMPORTANTE Creative Commons Atribución, No-Comercial En colaboración con

Análisis y Diseño de Sistemas Departamento de Sistemas - Facultad de Ingeniería

Guía de uso para la aplicación móvil

Contenido. Qué es y para qué sirve Excel 2010? Características y ventajas de Excel Qué es y para qué sirve Excel 2010?

APLICACIONES MÓVILES NATIVAS. Sesión 12: Otras plataformas para el desarrollo de aplicaciones móviles

APP TrailsSport. Alejandro Aguilar Baena. Entrega Final TFC. Consultores: Helena Boltà Torrell. Jordi Almirall López.

Elaboración de objetos de aprendizaje en herramientas de software libre y su integración en Moodle 2. Leticia García Pérez. Leobardo A.

FICHA PÚBLICA DEL PROYECTO

Microsoft Visual Studio.NET 2010 desarrollador y diseñador. Fabricante: Microsoft Grupo: Desarrollo Subgrupo: Microsoft Visual

DIPLOMADO DE DESARROLLO DE APLICACIONES MVC CON MICROSOFT.NET (C# - SQL) Y SCRUM TABLA DE CONTENIDOS

DESARROLLO DE NUEVOS PRODUCTOS

El Mobile Marketing y su importancia en la estrategia de las empresas y organizaciones. Mayo 2017

Fibroline El presente proyecto

Diseño de apps, monetización y diseño detallado de la interacción

Amplíe las fronteras de su negocio J

MEDIADORESENRED QUIERO HACER MI PROPIA WEB. Liberty Seguros. Tu nuevo punto de encuentro

Nunca fue tan fácil!

DESEAPP. Diccionario de Lengua de Señas Colombiana- Español Instituto Nacional para Sordos- INSOR

CIBELES GROUP Especializados en COMUNICACIÓN

VentApps MEXICO Apps y Sitios Web para dispositivos móviles

GESTIÓN DE INCIDENCIAS DE CALIDAD EN LAS ORGANIZACIONES Andoni Aranzamendi Director General Madrid, 16 Febrero 2016

2º Técnico Superior en Gráfica Publicitaria

Cómo recibir las novedades de llamados en celulares con sistema operativo Android

IFCT0610 Administración y Programación en Sistemas de...

MANUAL DE USUARIO [versión 2, act. 17/11/2014] Apps Bluefire Reader y Aldiko Book Reader

DE COMUNICACIÓN DE COMUNICAR BIENVENIDO A SU PROPIO MEDIO UNA NUEVA MANERA

Todos los estados del país.

DATOS LIBETH ALVAREZ FANNY BRACHO GRISKA ISEA

Tu música favorita, en toda tu casa, con sólo tocar un botón

CCU Esri Colombia 2014 Taller Técnico Introducción a CityEngine

PLIEGO DE CONDICIONES TÉCNICAS PARA LA CONTRATACIÓN DEL SERVICIO DE MANTENIMIENTO Y DESARROLLO DEL PORTAL Y SITIOS WEB DE RTPA EXPTE:

frente a controles robóticos de OEM

Oscar Manuel Aguillón Silva Yolher Camilo Hernandez Reyes

Capítulo IV. Análisis y Diseño del software (Módulo de dictado)

Diska. Portafolio Comunicación y Software.

Proyecto El sitio web: protagonista de la era digital

OFERTA DE DISTRIBUCIÓN

TOOLS MARZO 2016 JAVASCRIPT SEDE EN LA INDUSTRIAL DIRECCIÓN: C/ SAN ANDRÉS 8, MADRID INFO:

Programming in HTML5 with JavaScript and CSS3

Lenguajes de Cuarta Generación (4GL)

CARTA DE VENTA CURSO EXPRESS FACEBOOK ADS

MANUAL DE USO E INSTALACIÓN ADT GO

Guía básica de implementación

SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA INTEGRADO DE GESTIÓN Procedimiento Ejecución de la Formación Profesional Integral GUÍA DE APRENDIZAJE

Desarrollo de aplicaciones móviles par la mejora de la competitividad de las pymes turísticas en regiones de convergencia

LA INTEGRACIÓN DE SISTEMAS

PERFIL COMPETENCIA ANALISTA DESARROLLADOR DE APLICACIONES DE SOFTWARE (TIC-PROG)

TEMA 5: INTRODUCCIÓN A LA INGENIERÍA DEL SOFTWARE. Definición de Ingeniería del Software

ElTenedor, el gran aliado de los restaurantes

Manual para uso del servicio a través de un Samsung Smart TV

Oferta tecnológica: Guante desfibrilador para reanimación, primeros auxilios y emergencias

Materiales on line para PDI es un conjunto de recursos orientados a facilitar el trabajo en el aula con pizarra digital interactiva.

Webinar Avantare. Dr Jorge Rafael Aguilar Cisneros Depto. Ingenierías, UPAEP.

Fundación Universitaria UNINPAHU. Que es SlideBoom. Creado Por : Jhonatan Ayala Javier sarmiento Sergio Jiménez

CAPITULO 6 Interfaz de comunicación con Visual Basic

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS4 - URJC

Eliminador de Temporales y Reparador de Registros

Carolina V. Coronel Diseñadora en Comunicación Visual

DEFINICIÓN DE LOS PROBLEMAS; IDENTIFICACIÓN DE LOS FACTORES Y LOS OBJETIVOS. UNIVERSIDAD EL BOSQUE. HÉCTOR IVÁN HURTATIS ESPINOSA.

MICROSOFT ACCESS 2007

Abrir y cerrar Outlook 2010

Overview GeneXus Qué es y para qué sirve GeneXus? Principales características y beneficios.

FRONTPAGE I LECCIÓN N 1

Guía del Curso Curso Profesional de Especialista en Periodismo Deportivo

MICROSOFT ACCESS 2013 (COMPLETO)

AJAX: EJEMPLOS EFECTOS Y USO EN DESARROLLOS WEB CON HTML, CSS, JAVASCRIPT VENTAJAS E INCONVENIENTES (CU01205F)

NUEVAS TECNOLOGÍAS APLICADAS A LA VIDA: SMARTPHONE, TABLET E INTERNET. INICIACIÓN ANTONIO FERNÁNDEZ HERRUZO

PhoneGap Build Generación de Aplicaciones Móviles Na7vas con HTML/JS/CSS

Reporte de las APP S del INEGI

Programación Android - Completo

Manual para uso del servicio a través de dispositivos Android

Movistar Fusión Empresas Su negocio siempre un paso por delante. Anticípese al resto con la tecnología más avanzada

Agenda. Apache Cordova para el Desarrollo móvil XII Encuentro Danysoft en Microsoft Directos al código. Sala 1 Visual Studio

Flujo de Compras Activo Fijo

Guía definitiva para crear la App de tu empresa

Automatización de pruebas funcionales Proyecto GXportal. Ignacio Esmite Nicolás Farías Mauricio Farías

Unidad II: Metodologías de Desarrollo. 2.1 Metodologías clásicas Cascada

GLOSARIO TIC A

Curso de Herramientas web para los Emprendedores

Capítulo I. Introducción

CitiDirect BE SM para Tablet

Ingeniería de Software: APP PENSUM UMG APP PENSUM UMG

INICIAL FUNDAMENTACIÓN

Tema 2 Concepto de calidad y dimensiones que lo componen

Preguntas más frecuentes:

Taller: Empresa y dispositivos móviles. Dispositivosmóviles

Transcripción:

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

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)

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

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.

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)

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

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

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

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.

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.

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: http://cordova.apache.org/ Icenium: http://www.telerik.com/appbuilder

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.

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

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

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

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

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.

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

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

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

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.

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?

Elementos de la Experiencia de Usuario

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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.

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

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

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.

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

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

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

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

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