APP II Clase 1 (Aplicaciones Móviles Avanzadas)

Tema:

Manejo de Pantallas (Screens)

Justificación del tema:

Estructurar las diferentes pantallas dentro de una App móvil evita la saturación y aumenta el impacto

del contenido que se despliega. La herramienta Screen facilita al desarrollador separar y organizar los

formatos de contenido de forma adecuada.

Objetivo:

Identificar e implementar múltiples pantallas en una App.

Conceptos:

Pantalla (Screen)

Splash

ScreenAnimation

Navegabilidad

Usabilidad

Home

Thread

Menú

Hint

Desarrollo:

Pantalla (Screen): Se refiere al componente que permite visualizar el contenido o parte del contenido de una

aplicación.

Ejemplo de una App con 3 Screens (pantallas)

Splash: También llamada Splash Screen, es la pantalla de inicio en la aplicación móvil. En otras palabras, un

Splash Screen es una pantalla de bienvenida, normalmente contiene una imagen, un logotipo, el nombre de la

aplicación y eventualmente la versión actual del software.

Ejemplo de Splash Screens de las Apps de Computer Data Systems, Instagram y Spotify

ScreenAnimation: Propiedad que permite establecer animación a las pantallas de la aplicación. En App

inventor se puede establecer animación de cierre y animación de apertura de las pantallas.

ProgressBar: Elemento de la interfaz de usuario que indica el progreso de una operación.

Es importante considerar el uso de barras de progreso en nuestras aplicaciones para dar indicios a los usuarios

que se están llevando a cabo procesos internos y que la App no se ha quedado “congelada”.

En el desarrollo de aplicaciones móviles existen Progress Bar horizontales y Circulares, incluso los hay

verticales, aunque con menor frecuencia.

Navegabilidad: Se refiere a la facilidad para desplazarse entre las pantallas de la aplicación y que deja al

usuario una experiencia de uso positiva.

La técnica para determinar la navegabilidad de una App se conoce como wireframing y existen diversos sitios y

aplicaciones en línea para determinar la forma en que las pantallas de las apps se entrelazan, tal es el caso de

justinmind.com o invisionapp.com

Crear un buen esquema de navegabilidad trae muchos beneficios al diseñador de la UI y UX de una App,

como, por ejemplo:

Ahorro de tiempo al programar

Hace más fácil detectar problemas de usabilidad

Permite a los desarrolladores enfocarse en la programación, no en el diseño.

Usabilidad: Se refiere a la facilidad con que los usuarios pueden utilizar una aplicación.

Una App debe ser intuitiva para evitar el tedio al usarla, significa que una persona debe poder utilizarla sin

tener que consultar un manual para realizar una actividad determinada.

Algunas razones por las que algunos usuarios no prefieren ciertas Apps pueden ser:

La App no está disponible en mi Sistema Operativo

La App funciona bien en ciertos modelos, pero no en el mío

Hay que seguir varios pasos para instalar y configurar la App

La App no está disponible en mi idioma

No es fácil de usar

Algunas Apps consumen demasiados recursos como datos

Las Apps no ofrecen incentivos ni recompensas

Tiene demasiados formularios pidiendo información aquí y allá

Nota: la usabilidad es un concepto relacionado a UX (Experiencia o percepción subjetiva del usuario). Por otro

lado, en el caso de la navegabilidad, esta tiene más relación con UI (diseño de la interfaz de usuario)

Tanto en Android como en iOS la forma de navegar en las aplicaciones cambia drásticamente de un sistema a

otro debido a la diferencia en la ingeniería de funcionamiento de los dispositivos en sí. Por ejemplo, en iOS

tenemos un solo botón (en los últimos modelos de iPhone ni siquiera hay botón físico), en el caso de Android

existen 3 botones (se ha mantenido fiel a su estilo).

Home: Botón de Inicio del dispositivo móvil.

Existen 5 claves diferenciales entre la navegación de un dispositivo con iOS y un dispositivo con sistema

Android:

1. Botón de Inicio (Home)

2. Barra de Navegación

3. Mecanismos de Navegación

4. Botones de Acciones Flotantes

5. Tipografías

Thread: Se refiere al registro de las pantallas de las Apps utilizadas recientemente en el dispositivo.

Las aplicaciones creadas para ser utilizadas en dispositivos con sistema Android tienen un ciclo de vida que se

describe a continuación:

Launch: Abrir la App

Created: carga del contenido

Started: Es cuando se puede visualizar el contenido en la pantalla

Resumed: La App se encuentra funcionando correctamente

Paused: La App esta pausado o trabajando en segundo plano (Running in Background)

Stopped: La App ha sido detenida forzadamente

Destroyed: La App se ha cerrado y no hay más procesos ejecutándose.

Nota: Es sumamente importante saber que normalmente el ciclo de vida de la App no llega hasta Stopped ni

tampoco a Destroyed porque al cerrar una App en Android esta sigue ejecutándose en segundo plano

(Paused), es esta pequeña cualidad la que determina la velocidad de carga de las Apps que han sido

ejecutadas al menos una vez y a las cuales eventualmente volveremos a entrar (Resumed).

Menú: Es un elemento a través del cual el usuario accede a las diferentes pantallas que se pueden encontrar

en una App.

Hint: Es una propiedad principalmente de los componentes para ingresar datos como los TextBox. La

propiedad Hint sirve para indicar qué dato se debe ingresar y da indicios del formato en que se pide la

información.

Parte 2: Crear una propuesta de diseño UI para una App de entrega de comida a domicilio tomando en cuenta

los siguientes datos:

Utilizar cualquier herramienta en línea para crear wireframes, incluso puede usar lápiz y papel

Se recomienda escribir el objetivo de la App. Ejemplo: “Brindar servicios de entrega de comida… etc.”

Incluir el diseño de un Splash Screen con los elementos mencionados en la clase.

Decidir el nombre de la App (de preferencia corto y fácil de recordar)

Las opciones y el contenido de la aplicación deben estar distribuidos como mínimo en 3 Screens (sin

contar el Splash Screen)

El área de funcionamiento de la App será San Salvador