Pestañas Aplicación (control dinámico) (aplicaciones de la Tienda de Windows Phone)
El patrón de la pestaña Aplicación se usa para varias páginas de la interfaz de usuario entre las que el usuario se suele mover a menudo. Este patrón resulta de especial utilidad si tu aplicación se centra en un solo tema (por ejemplo, cine, baloncesto, etc.). En cada página se le mostraría al usuario algo relacionado con los datos generales que se presentan en la aplicación. El patrón de la pestaña Aplicación puede constituir toda la aplicación o se puede utilizar en una subárea. Por ejemplo, puedes establecer el control de navegación centralizada como el primer nivel principal de la aplicación (como se ha descrito en temas anteriores) y, a partir de ese control, hacer que el usuario vaya a una subsección de la aplicación en la que se utilice el patrón de la pestaña Aplicación (con el control dinámico).
Pon por caso que quieres una aplicación que catalogue las películas que tienes en tu colección personal. Podrías usar el patrón de la pestaña Aplicación para proporcionar varias vistas filtradas diferentes de las películas. En una vista filtrada se podrían mostrar las películas que hayas marcado como favoritas. Otra se podría dedicar a las películas de acción. Y otra podría destinarse a las películas que has clasificado en el orden en el que las verás cuando tengas tiempo. No cabe duda de que también te convendría tener una página para consultar la lista completa de películas sin filtros.
La siguiente ilustración te ayuda a visualizar esta estructura de aplicación. Cuando se inicia la aplicación, acabas en una de las páginas filtradas. Desde ese punto puedes desplazarte en horizontal por todas las páginas, que funcionan como pestañas en tu interfaz de usuario.
.png "Pestañas Aplicación para la Bandeja de entrada de Outlook")
Pestañas Aplicación para la Bandeja de entrada de Outlook
Fundamentalmente, cada pestaña podría ser una forma diferente de filtrar y ver datos que quieres que se muestren al usuario. Si se presiona el botón Atrás del hardware cuando una de estas páginas de vista filtrada está abierta, se cierra la aplicación.
Utiliza el patrón de la pestaña Aplicación para las aplicaciones que tengan un tipo de datos central que sirva como núcleo para mostrar vistas filtradas.
Usar el control dinámico como implementación de la pestaña Aplicación
Puedes usar el control dinámico para implementar el patrón de la pestaña Aplicación. Este control permite al usuario ir a derecha e izquierda en cada página (llamado "elemento dinámico").
La aplicación cliente de Outlook proporcionada por Microsoft usa el patrón de la pestaña Aplicación porque en la aplicación se muestra un solo tipo de datos: listas de mensajes de correo con diferentes filtros aplicados en cada elemento dinámico. Cuando miras la Bandeja de entrada de correo electrónico con la aplicación de Outlook, ves tres elementos dinámicos: todo, sin leer y urgente. Así te resulta más fácil ver solo los mensajes de correo urgentes, si es tu intención. De esa forma, no tienes que pasar por todos los mensajes de correo del elemento dinámico todo para encontrar los mensajes de correo que están marcados como urgentes.
.png "Aplicación cliente de Outlook")
Aplicación cliente de Outlook
Otra aplicación existente que usa el patrón de la pestaña Aplicación es la aplicación de Netflix. Cada elemento dinámico muestra listas de películas. La lista de cada elemento dinámico es diferente en función del filtro aplicado. Puedes compararlos para ver que cada uno es único y útil. El elemento dinámico instant (instantáneo) te muestra las películas situadas en esa cola para poder verlas cuando quieras en tu dispositivo de streaming. El elemento dinámico home (inicio) te muestra las películas que Netflix cree que te pueden interesar. El elemento dinámico search (búsqueda) muestra películas que coinciden con tus palabra clave de búsqueda.
Los elementos dinámicos se centran en datos y son eficientes. Su principal interés es la acción basada en tareas, como pueden ser el filtrado, la ordenación y la presentación de elementos relacionados. La navegación centralizada es expansiva, exploradora y acumula datos. Su gran utilidad es promocionar y mostrar contenido relevante reciente. Bajo algunas circunstancias, un control de navegación centralizada puede ser más adecuado que otro.
.png "Aplicación de Netflix")
Aplicación de Netflix
Funciones similares a pestañas
En realidad, cada elemento dinámico es una pestaña y estas se muestran en la parte superior. Como se puede ver en la ilustración de la aplicación de Netflix, la aplicación se encuentra en este momento en el elemento dinámico home (inicio) y se puede ver que a la derecha está disponible el elemento dinámico genres (géneros). Para ir al elemento dinámico genres, púlsalo o desplázate en panorámica hasta él.
Las aplicaciones deben minimizar el número de elementos dinámicos que tienen. Los usuarios se pueden perder si van de un elemento dinámico a otro. Intenta limitar el número de elementos dinámicos a cinco o menos. Si crees que necesitas más, define que uno de los controles dinámicos incluya un control de lista con vínculos que se puedan pulsar para ir a otras páginas o a otro nivel de navegación que sea a su vez un control dinámico. Para determinar si es tu caso, consulta Lista detallada para Windows Phone.
Nota Con el control dinámico puedes pulsar los encabezados del elemento para ir de un elemento a otro. El control de navegación centralizada no incluye esta opción.
Aspectos del filtrado de datos
Al principio de este tema mencionamos que la mayor utilidad del control dinámico era definir que cada elemento dinámico incluyera el mismo tipo de datos pero con un filtro diferente. También dijimos que el control de navegación centralizada se puede usar para mostrar secciones con datos sin relación. También podrías darle este uso al control dinámico si los datos en el fondo son diferentes pero aún así asociados en su totalidad a un tipo de contenido. Por ejemplo, si tuvieras información que quisieras mostrar sobre la ciudad de Nueva York en una aplicación para turistas, podrías definir un control dinámico con un elemento dinámico que incluyera estadísticas interesantes como la ubicación, la población y los ingresos fiscales anuales. Después podrías tener elementos dinámicos adicionales para información como los puntos de interés que hay que visitar u otro elemento dinámico para los hoteles en los que alojarse.
La aplicación de ESPN ScoreCenter sirve como ejemplo para el patrón de navegación de la pestaña Aplicación, en la que cada elemento dinámico contiene datos homogéneos basados en un tema central.
.png "Aplicación de ESPN ScoreCenter")
Aplicación de ESPN ScoreCenter
Combinar el control dinámico y un control de navegación centralizada
En la página de inicio de un control de navegación centralizada, como puede ser la de la aplicación de Facebook, puedes pulsar un elemento de navegación de la lista e ir a un control dinámico. Es lo sucede con la selección del perfil en la sección de navegación centralizada del inicio de Facebook. Cuando el usuario pulsa la selección de perfil, se les muestra un control dinámico con elementos dinámicos como muro, información, fotos en las que apareces, etc. Así se puede ir de un control a otro.
.png "Ir de un control principal de navegación centralizada a un control dinámico dentro de la aplicación de Facebook")
Ir de un control principal de navegación centralizada a un control dinámico dentro de la aplicación de Facebook
Puede que te tiente la idea de ir de la sección inicio de un concentrador de navegación centralizada a otro concentrador. No es buena idea, porque puede resultar confuso para los usuarios, ya que es fácil que se olviden de la aplicación en la que se encuentran. A veces el concentrador de navegación centralizada tiene una imagen grande estirada de fondo para que el usuario tenga siempre una idea de dónde viene y, si va a una subárea que también es un concentrador de navegación centralizada con otro fondo, es probable que le resulte confuso.
Barra de la aplicación en un control dinámico
Como todos los datos son del mismo tipo, en muchos casos puedes proporcionar una barra de la aplicación inferior que tenga botones relacionados con lo que se muestra. La aplicación de Outlook que se muestra en la siguiente ilustración tiene una barra de la aplicación que siempre está visible porque contiene acciones que el usuario necesita y que, de alguna forma, afecta a lo que se muestra.
Aplicación cliente de Outlook
En la aplicación de Outlook, la barra de la aplicación puede incluir las mismas opciones estés en el elemento dinámico en el que estés. En la ilustración anterior puedes ver que hay botones para crear un mensaje de correo, para mostrar las casillas de selección, para cambiar de carpeta y para resincronizar el correo. Así pues, esta es otra diferencia entre el control dinámico y el control de navegación centralizada, ya que es probable que en ningún caso colocaras una barra de la aplicación en esa sección inferior de la pantalla.
No des por hecho que siempre puedas tener los mismos botones al final a no ser que te plantees qué hay en cada elemento dinámico y tenga sentido. Puede que algunos usos del control dinámico no tengan siempre el mismo tipo de datos en cada elemento dinámico.
Elemento dinámico de "inicio"
El primer elemento dinámico se puede utilizar para mostrar una lista del resto de elementos dinámicos. Así el usuario puede pulsar uno e ir directamente a ese elemento dinámico en vez de deslizar la pantalla para llegar. La lista también podría incluir entradas que inicien otras aplicaciones.
No hace falta que establezcas que el usuario llegue al elemento dinámico de inicio si no quieres. Por ejemplo, en una aplicación de ordenación de películas, en vez de que el usuario llegue al elemento dinámico de inicio, puedes establecer que llegue a un elemento dinámico en el que se muestren gráficos de las películas más recientes y populares. De este modo, el usuario llega a una sección más atractiva.