Professional Documents
Culture Documents
para mviles
Tabla de contenidos
1
Las aplicaciones
13
Entendiendolas posibilidades
27
Irene Pereyra
49
Explorando ideas
57
Definiendo la propuesta
65
Dustin Barker
81
Interaccin y patrones
89
Diseo visual
119
Dustin Mierau
157
10
165
11
175
12
Loren Brichter
191
13
Ejemplos a seguir
197
14
El mundo tableta
217
15
Erik Spiekermann
227
16
Lanzando la app
231
17
245
18
Reflexiones finales
253
5
Definiendo la
propuesta
Las Personas
permiten
nes comunes
a muchos
usuarios.
66
Las Personas
El concepto de Personas fue acuado por Cooper1, una compaa de diseo y estrategia ubicada en San Francisco, y es una
herramienta de gran utilidad que se usa constantemente en
o arquetipos de usuarios para los cuales disear, teniendo en
cuenta sus necesidades y objetivos.
Para crear las Personas hace falta una investigacin real que
nos aleje de meras conjeturas, analizando muchos usuarios
posibles y determinando cules son los patrones de comportamiento y pensamiento que tienen en comn entre ellos,
evitando caer en sus caractersticas individuales, centrndose
solo en aquello que comparten.
cin visual donde se modela al usuario a partir de los datos
obtenidos: la Persona tendr una cara, un nombre, una historia,
ambiciones y objetivos.
Pueden determinarse diferentes tipos de Personas para una
aplicacin, pero para que este ejercicio tenga una utilidad real
no deberan ser ms de tres. Idealmente, el proyecto debera
enfocarse en una sola Persona primaria.
1 http://www.cooper.com/journal/personas
2
, Jason. An introduction to user journeys. http://boxesandarrows.com/anintroduction-to-user-journeys/
Definiendo la propuesta
67
que lleva a cabo una Persona desde que tiene una necesidad
hasta que la satisface usando la aplicacin.
Nada mejor que un ejemplo para entender de qu se trata
todo esto: alguien que est perdido y necesita orientacin, puede
usar el mvil para saber cmo llegar a casa. Para crear un Viaje
de usuario a partir de esta situacin, hay que considerar desde
el momento en que est perdido, cuando an no ha abierto la
app, hasta que cumple su objetivo de orientarse, pasando por
cada una de las acciones que lleva a cabo usando la aplicacin.
lineal, separando las etapas entre s y detectando en ellas las
encuentra en cada paso y las acciones concretas que realiza
para seguir adelante, por ejemplo, buscar. De esta manera, se
puede detectar en qu puntos debe enfocarse el diseo para
resolver problemas de interaccin y lograr una app ms usable.
68
El Viaje del usuario sirve tambin para sentar las bases prelilas funciones, sin pensar en una estructura rgida o jerrquica.
Instagram es
actualmente
una de las
apps ms populares para
tomar fotos y
videos.
Definiendo la propuesta
69
70
Un diagrama
de arquitectura
de informacin permite
visualizar rpidamente los
vnculos entre
contenidos.
4 http://gettingreal.37signals.com/ch04_Make_Opinionated_Software.php
Definiendo la propuesta
71
72
Los wireframes
son fundamentales para
entender cmo
puede estar
estructurada
cada pantalla
de una app.
Definiendo la propuesta
73
Stencils
Este sera el paso siguiente y algo ms profesional que un
wireframe dibujado a mano alzada, manteniendo la esencia del
trabajo en papel. Los stencils generalmente de metal con
las que se pueden dibujar los elementos de interaccin direc-
Con plantillas
metlicas se
obtenienen
formas ms
que a mano
alzada.
74
plantillas en
este caso de
Android que
se pueden
aprovechar
para disear
wireframes en
el ordenador.
Definiendo la propuesta
75
Omnigrasoftware de
escritorio que
permite usar
plantillas
importadas
como libreras.
76
Formatos de prototipos
Existen diferentes maneras de hacer un prototipo de aplicacin: desde un dibujo en papel, pasando por el uso de software
de diseo tradicional, hasta aquellos programas destinados
exclusivamente al desarrollo de prototipos. La forma que se elija
9
Definiendo la propuesta
77
Documentos navegables
Los prototipos pueden presentarse en forma de documentos que
se han usado toda la vida para presentaciones comerciales o
distribucin de informacin, aadiendo la interaccin necesaria
para navegar de una parte del documento a otro.
Por ejemplo, un PDF basado en archivos de diseo o fotografas de un boceto de la aplicacin puede servir para representar
el funcionamiento bsico. Balsamiq es una herramienta que
Lo mismo sucede con archivos de presentaciones como los
usados en documentos de Microsoft PowerPoint, Apple Keynote
10
permite crear, a partir de plantillas,
documentos compatibles con estos software a los que se les
aade una capa de interaccin para simular el comportamiento
de la app.
Para poder abrirse, este tipo de documentos tiene que ser
primero descargado y las transiciones y animaciones entre
pginas suelen ser algo bsicas.
Versiones web
Muchos software de prototipos de escritorio o en la nube
permiten crear representaciones de la app en forma de sitios
web y que por lo tanto necesitan conexin a Internet y un
navegador basados en HTML5 y CSS3 para conseguir interacciones y animaciones que se asemejan en gran medida a
las de la aplicacin.
10 http://keynotopia.com/
78
11
12
13
14
15
16
http://www.codiqa.com/
http://www.framerjs.com/
http://giveabrief.com/
http://popapp.in/
Definiendo la propuesta
79