TECNOLOGÍA-Guía-13_Prototipado-de-la-App

Vista previa del material en texto

TECNOLOGÍA 1º MEDIO GUÍA Nº13
	NOMBRE:
	CURSO:
	FECHA:
Prototipo en Papel
	Objetivo:
· Aprender sobre convenciones comunes de Interfaz de Usuario
· Crear un prototipo en papel de tu aplicación
	Términos Clave y Conceptos
	· Prototipo - un modelo inicial de tu producto
· Prototipo en Papel - una representación dibujada a mano de como se verá tu aplicación
· Convenciones - algo que es común o que se usa mucho
	Inspiración
	Ahora que tienes una idea para un producto mínimo viable (PMV), es tiempo de bosquejar algunas ideas y pensar en cómo se verá tu aplicación y su interfaz gráfica.
Hay diferentes tipos de prototipos, pero nos enfocaremos en prototipos de papel, que es una representación dibujada a mano de como se verá la aplicación. Típicamente se parece a capturas de pantalla. 
¿Cuáles son los beneficios de un prototipo en papel, o de crear un prototipo en papel?
· Puedes comunicar tus ideas rápidamente de una manera visual. Por ejemplo, puedes mostrar lo que sucede cuando presionas los botones de tu aplicación. 
· ¡Es colaborativo! Cuando trabajas en papel, es más casual y las conversaciones brotan de la experimentación.
· ¡Es barato! No tienes que gastar mucho dinero y tiempo para crear un prototipo en papel. Puedes usar materiales como papel, recortes de revistas, post-its, marcadores, calcomanías, cinta y pegamento.
· No necesitas acceso a una computadora o al Internet.
· No tienes que ser un experto técnico para esta parte del proceso.
· Los prototipos ayudan a confirmar las decisiones de diseño antes de invertir tiempo desarrollando y codificando la aplicación.
	Convenciones básicas de Interfaz de Usuario (UI) que puedes usar en tu aplicación. Una convención es algo que es común o se usa mucho. A continuación una serie de convenciones de interfaz de usuario. No necesitas usarlas todas, sólo son sugerencias para ciertas cosas que quisieras incluir en tu aplicación. 
	
Botones
Los botones se usan en todas partes de la interfaz de usuario en aplicaciones móviles. Son usados para solicitar al usuario que tome una acción importante como “registrarse” o “enviar”. 
Ten cuidado de no usar de más estos botones, demasiados botones pueden verse desordenados y confusos, y el usuario no sabrá cuál usar.
	 
	
Pantalla de Bienvenida
Muchas aplicaciones usan la pantalla completa para mostrar su logo cuando se inician. A esto se le conoce como pantalla de bienvenida (splash screen). Algunas veces se pone un menú de navegación o botones en esta pantalla.
	
	
Logo y Encabezado
La mayoría de las aplicaciones tienen un lugar en la parte superior donde se muestra el logo en el menú principal de navegación.
	
	
Barra de Navegación
La barra de navegación ayuda a los usuarios a encontrar lo que están buscando en una aplicación. Muchas aplicaciones ponen una barra de navegación en la parte inferior de la pantalla con algunos iconos. Debes limitar el contenido de la barra de navegación a cinco elementos o menos para que no se vea desordenada. 
	 
	
Menús de Pantalla Completa
Puedes mostrar un menú de pantalla completa para ayudarlos a navegar tu aplicación. Este se puede ver como una lista, o puedes ponerte creativa y usar bloques de color o imágenes.
	 
	
Menú de Hamburguesa
Un menú de hamburguesa se ve así:
Es usado cuando un menú completo no cabe en la pantalla. Cuando lo presionas, despliega el menú completo que está escondido.
	
	
Menú de más opciones
Un menú de más opciones se ve así: 
De manera similar a un menú de hamburguesa, este menú también despliega información que no cabe en la pantalla.
	
	
Barra de Búsqueda
Tener una barra de búsqueda es una manera extremadamente común de ayudar a los usuarios a navegar en tu aplicación.
Agregar una lupa enseguida de la barra de búsqueda ayuda a los usuarios a saber que esta sección es una barra de búsqueda.
	
	
Desplazamiento Infinito
La mayoría de los usuarios están acostumbrados a desplazar la pantalla hacia abajo para ver más información. Un desplazamiento infinito puede ser usado para mostrar más información de la que puede caber en una pantalla.
	
	Mira algunas de las aplicaciones que tienes en tu teléfono. ¿Qué partes de la interfaz de usuario notas que se usan una y otra vez? ¿Qué partes crees que lucen agradables o que hacen la aplicación más fácil de usar?
Aunque es posible que quieras que tu aplicación se vea realmente diferente para destacarse de tus competidores, usar convenciones puede realmente ayudar a que tus usuarios entiendan cómo usar tu aplicación de una manera más rápida. Por ejemplo, la mayoría de los usuarios están familiarizados con un menú de hamburguesa, así que incluir uno en tu aplicación puede ayudar a un usuario a entender rápidamente qué hacer cuando abre tu aplicación. También podrías diseñar un nuevo tipo de menú, pero puede resultar confuso para los usuarios y puede que no logren entender cómo usar tu aplicación. Por supuesto, ¡debes ser creativo con tu aplicación si así lo deseas! 
Observa o descarga una app en tu celular ¿Tiene alguna de las convenciones mencionadas anteriormente? ¿Cuánto tardaste en entender cómo usarla al principio?
¿Listo para empezar? Es el momento de crear tu propio prototipo en papel. Bosquejar es una parte fundamental del proceso de diseño y puede ayudarte a tomar decisiones acerca de él. Tu prototipo de papel puede ser tan simple como dibujar en un papel y es de gran ayuda cuando estás trabajando con las ideas iniciales. Puedes mostrar la estructura básica de tu aplicación y experimentar cómo la gente va a interactuar con ella. También puedes probar colores y dónde colocarás los botones. Invertir tiempo ahora para probar tus ideas en papel te ahorrará tiempo después cuando transfieras tus ideas a tu prototipo digital.
	Actividad - Realizando el prototipo en Papel
	Hoja de Trabajo
Qué necesitarán:
· Papel
· Marcadores
Opcional: 
· Varias hojas de trabajo impresas
· Calcomanías 
· Pegamento
· Tijeras
· Cinta
· Revistas
Qué harán:
Como equipo, bosquejen cada pantalla de su aplicación. Pongan sus ideas como van surgiendo y traten de no juzgarlas. ¡Las pueden cuestionar después! Recuerden enfocarse en las características creativas de su aplicación que son parte del PMV de la última lección de ideación. Comiencen diseñando primero las funcionalidades que se incluyen en el PMV. A medida que hacen esto, consideren: 
· ¿Cómo se verá la primera pantalla? ¿Tendrá el logo creado? ¿Cuál será el esquema de color? 
· ¿Su aplicación necesita un menú de navegación? ¿Cómo se verá ese menú? ¿Qué habrá en ese menú? 
· ¿El usuario tendrá que iniciar sesión en tu aplicación? ¿Cómo se vería la pantalla de inicio de sesión?
· ¿Qué hay de la página de perfil de usuario?
· ¿Qué pasa cuando el usuario presiona un botón para ir a la siguiente pantalla? ¿Cómo se verá cada pantalla? 
Ejemplo de un prototipo en papel. Noten cómo las calcomanías son usadas para mostrar al usuario que puede presionar en los botones. También, se muestran las siguientes pantallas a las que el usuario puede navegar al presionar un botón.
Una vez que tienen un prototipo terminado, pueden crear un flujo de cómo el usuario navegará en la aplicación. Pueden tomar fotos y crear un .gif o un video. 
	Reflexión
	Luego de crear su prototipo en papel, les recomendamos que lo guarden porque pueden necesitar referirse a él a medida que van construyendo la aplicación. 
· Si el diseño de su aplicación debe ser el “Producto Mínimo Viable”, ¿Qué funcionalidad sí se debe incluir y cuál se debe remover de su diseño? 
· ¿Seleccionaron algunas convenciones para usar? Si es así, ¿cuáles?
	Recursos adicionales - Usar una herramienta digital para hacer el prototipo
	Si estás en un equipo remoto, puede que quieras trabajar en un prototipo digital para tu aplicación. Puedes probar con una herramienta como whimsical.com o InvisionApp o algo más simple como Presentaciones de Google.