Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Diseñando apps para móviles

No description
by

Sofía Schoo Lastra

on 27 October 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Diseñando apps para móviles

Diseñando apps
para móviles

Javier “Simón” Cuello y José Vittone
¿Qué son las aplicaciones?
Entendiendo las posibilidades
Explorando ideas
Definiendo la propuesta
Interacciones y patrones
Diseño visual
Probando con usuarios
Preparando los archivos
Lanzando la app
Las aplicaciones son para los móviles lo que los programas son para los ordenadores de escritorio.
En los primeros teléfonos
(feature phones)
estaban enfocadas a la productividad personal
Aplicaciones
Web móviles
Descargadas e instaladas antes de usar
Se accede con internet y navegador
Web responsive:
el contenido toma la forma del contenedor, se adapta a la pantalla
Permite acceder al hardware
Navegación más fluida, menos tiempo de espera
No requiere conexión a internet
Proceso de diseño y desarrollo
Idea

Investigación

Formalización de la idea
Definición funcional
Definición de usuarios
Wireframes
Prototipos
Tests con usuarios
Diseño visual
Programación del código
Corrección de bugs
Lanzamiento
Seguimiento
Actualización
Tipos de apps según su desarrollo
Aplicaciones nativas
Desarrolladas con el software de cada sistema operativo: lenguaje SDK (
software development kit
)
Pueden usar notificaciones del SO
Requieren actualizaciones frecuentes
Se descarga e instala desde las tiendas de aplicaciones, aprovechando marketing y promoción.
No requiere internet para funcionar
Permite uso de hardware
Realizado según guías de cada SO, logrando coherencia y consistencia con el resto de aplicaciones y con el propio SO
Aplicaciones web
Programación como web: HTML, JavaScript y CSS
Pueden ser utilizadas en diferentes plataformas
No necesitan instalarse, se visualizan desde navegador
Se distribuye de forma independiente, no en tienda de apps
Requiere conexión a internet
No requiere actualización, siempre se ve la última versión
Restricciones en gestión de memoria
No permite aprovechar componentes de hardware
Interfaz genérica, independiente del SO, menor identificación de los usuarios
Aplicaciones híbridas
Desarrollo similar a webapp: HTML, JavaScript, CSS y una vez terminada se compila o empaqueta
Con un mismo código se obtienen diferentes aplicaciones para distintas tiendas
Permite acceder a las capacidades del teléfono
Diseño visual que no se identifica con el SO
Categorías de aplicaciones
Creación
Educativas e informativas
Utilitarias y productividad
Entretenimiento
Sociales
F
r
e
e
m
i
u
m
Gratis
De pago
Gran alcance
Difícil hacerse visible por gran competencia
Disminuyen las expectativas
Requieren más descargas para posicionarse en ranking
Como ventana de promoción
Muchas descargas para ser rentable
Barrera que debe sortear el usuario
Influye la competencia con similares gratuitas
Depende la tienda en la que se encuentre
Cuantas más y más altas valoraciones tenga, mejor
Las tiendas cobran comisión por ventas
Monetización
Compras dentro de la app
Pagar por versión completa
Publicidad
Para qué plataforma desarrollar
Personalidad de los usuarios
Características
geográficas, demográficas, psicográficas y conductuales
Mar de aplicaciones
Valor para diferenciarse
Tener un objetivo
Pensar en el usuario
Determinar contexto de uso
¿Será la app la respuesta?
Investigar
Benchmarking
¿Funcionará?
Definición funcional
Arquitectura de información
Wireframes
Prototipos
Investigar al usuario
Analizar muchos usuarios posibles y determinar patrones de comportamiento y pensamiento que tienen en común entre ellos
Las personas
Metodologías
El resultado 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.
¿Cómo se comporta y siente cuando tiene un objetivo que cumplir en un contexto de uso determinado?
Viaje del usuario
Es una forma de contar visualmente el proceso que lleva a cabo una Persona desde que tiene una necesidad hasta que la satisface usando la aplicación.
Todas las acciones e interacciones que hacen falta para que un usuario consiga su objetivo. Funciones que debe tener la aplicación
Forma de organizar el contenido y funciones de toda la aplicación. Es la relación entre los contenidos de diferentes pantallas y a nivel particular, la organización de contenidos dentro de la misma pantalla.
Es una representación muy simplificada de una pantalla individual. Permite tener una idea inicial de la organización de los elementos que contendrá, identificando y separando aquellos informativos de los interactivos.
¿Para qué sirve?
- Herramienta de exploración personal
- Comunicar ideas abstractas
- Mecanismo para primeras evaluaciones de interfaz.
Son maquetas con una interacción suficiente para poder navegar entre las diferentes pantallas
Su fidelidad depende de cuanto se corresponda su apariencia y comportamiento con la versión final esperada de la aplicación.
Deben desarrollarse solo aquellas pantallas necesarias para completar de principio a fin la tarea que se quiere probar.
Principios de experiencias de usuarios
Simplicidad
Consistencia
Navegación intuitiva
Formas de sostener el móvil y orientación del terminal
Martijn van Welie: "Un patrón de interacción es un resumen práctico de una solución de diseño que se ha demostrado que funciona más de una vez. Utilízalos como guía, no como una ley»
Patrones de interacción
El estilo de las interfaces
El diseño plano de Windows Phone
iPhone, en busca de ligereza visual
La belleza simple de Android
¿Interfaz nativa o personalizada?

Identidad visual

Íconos y pantalla inicial

Grilla o retícula

Tipografía

Color

Lenguaje

Detalles visuales

Animaciones
Test de usabilidad
Test en móviles
Test de guerrilla
Otras formas de obtener información
Se efectúan en
laboratorios
o espacios preparados para tal fin.
Conviene probarlo en etapas tempranas y de forma asidua
El
usuario voluntario
realiza
tareas concretas
, previamente establecidas por un
moderador
que guía la prueba, mientras un
grupo de observadores
realiza anotaciones acerca de lo que ve.
Simular las condiciones de uso lo más cercano a la realidad
El teléfono también debe acercarse a la realidad, tanto el modelo como el sistema operativo
No es necesario tener una app terminada, sino que se hace con un prototipo
Tener en cuenta los gestos de los dedos
Alternativa ágil y económica. Formato más informal y menos usuarios. Una persona del equipo será responsable de liderar la prueba.

Preparación:
se establece el objetivo y pautas. Dos alternativas: mostrar la app y ver si entienden para qué sirve y cómo funciona o asignar una tarea específica y observar cómo la resuelven. Se definen las preguntas que se harán y se elige a los participantes. Puede haber una prueba piloto entre los miembros del equipo.

Ejecución:
se realiza con un voluntario a la vez. Comienza con introducción y presentación. El moderador tiene que estar más atento al comportamiento del usuario que a lo que dice.

Análisis:
moderador y observadores se reúnen para comentar los resultados del test y revisar las notas. Se seleccionan los problemas que serán resueltos y se plantean posibles soluciones.
Dogfooding

Test de los cinco segundos
Entender las diferencias tecnológicas
Tamaño de pantalla
Preparar documentos para diseñar, recomendaciones de cada SO
Separar las imágenes incluidas en la interfaz y guardar en archivos separados: una imagen en cada densidad, botones, fondos, íconos de pestañas y barras.
Importante los nombres de archivos y la comunicación con el desarrollador
Densidad de pantalla
Lleva un tiempo de aprobación.
Los costos varían en cada una. Permite acceder a herramientas de gestión y estadísticas.
Deben subirse imágenes y elementos promocionales
Publicación y distribución fuera de tiendas
Publicación en las tiendas oficiales
Después del lanzamiento
Comentarios de los usuarios, valoraciones y reseñas
Analíticas de uso
Campañas de marketing, anuncios en Internet o reseñas de la app en blogs especializados.
Importante completa y clara landing page.
Promoción
Actualizaciones
SOFTWARE
Full transcript