Caso práctico de diseño: de iPad a aplicación de Windows en tiempo de ejecución

iOS es una plataforma popular para crear aplicaciones con experiencia táctil, divertidas y atractivas. Con la introducción de Windows 8, los diseñadores y desarrolladores tienen una nueva plataforma para dejar correr su imaginación.

En este caso práctico, queremos ayudar a los desarrolladores y diseñadores que están familiarizados con iOS a rediseñar sus aplicaciones usando los principios de diseño de las aplicaciones de la Tienda Windows. Te mostramos cómo trasladar diseños de experiencia e interfaz de usuario comunes encontrados en aplicaciones de iPad a aplicaciones de la Tienda Windows de Windows 8. Nos basamos en nuestra experiencia en la creación de la misma aplicación para iPad y para Windows 8. Usamos escenarios de desarrollo y diseño comunes para mostrar cómo sacar provecho de la plataforma de Windows 8 e incorporar los principios de diseño de las aplicaciones de la Tienda Windows.

Para más información acerca de la oportunidad comercial de Windows 8, consulta Venta de aplicaciones. Para más información acerca de las características usadas para crear aplicaciones de la Tienda Windows, consulta la guía de producto de Windows 8 para desarrolladores.

Descarga este artículo: para ello, consulta la versión sin conexión de este artículo.

La aplicación

La aplicación que estamos desarrollando es un diario fotográfico en el que los usuarios pueden ver y administrar sus fotos y vídeos en Internet usando una vista de escala de tiempo.

La aplicación de la Tienda Windows de diario fotográfico.

La aplicación se creó primero para iPad. En la siguiente imagen se muestra la anatomía de la aplicación de iPad. Veamos ahora cómo cada componente se traslada al lenguaje de diseño Microsoft.

La aplicación de iPad de diario fotográfico.

1. Diseño y navegación

2. Comandos y acciones

3. Contratos: buscar, contenido compartido y otros

4. Funcionalidad táctil

5. Orientación y vistas

6. Notificaciones

Diseño y navegación

Centrarse en el contenido, no en el contenedor visual

La aplicación de diario fotográfico tiene que ser excelente al mostrar las fotos del usuario y las actividades sociales recientes de esas fotos. Cuando se creó la aplicación de la Tienda Windows, nuestro primer objetivo fue quitar todos los elementos de interfaz de usuario que no eran directamente relevantes para la funcionalidad clave de la aplicación. Por ejemplo, la barra de navegación superior, los controles de paginación y la barra de control inferior pueden quitarse. En la siguiente sección, hablaremos de cómo los usuarios pueden llamar al contenedor visual cuando sea necesario mediante el uso de la barra de la aplicación.

Elementos de interfaz de usuario de la aplicación de iPad. Elementos de interfaz de usuario de la aplicación de la Tienda Windows.

Aplicación de iPad

A. Barra de navegación superior B. Contenido de la aplicación C. Interfaz de usuario de paginación D. Barra de pestañas inferior

Aplicación de la Tienda Windows

B. Logotipo y contenido de la aplicación

 

Ejemplo: vista de escala de tiempo en la pantalla principal

Ambas aplicaciones muestran fotos en su Pantalla principal organizadas por mes, pero el modo en el que se representa el mes difiere. En la versión de iPad del diario fotográfico, la página se optimiza para mostrar los doce meses de un año con una metáfora de fotografías apiladas usada para representar cada mes. Cuando se diseñó la Pantalla principal de la aplicación de la Tienda Windows, elegimos poner más imágenes y contenido social en el nivel superior, y así proporcionar más contexto a los usuarios. Quitamos los bordes de las imágenes y, en su lugar, usamos el espacio en blanco para proporcionar más enfoque visual a las fotografías, que son el punto focal de la aplicación.

Vista de mes en la aplicación de iPad. Vista mensual en la aplicación de la Tienda Windows.

Aplicación iPad: cada mes se representa mediante fotos apiladas con una única foto visible.

Aplicación de la Tienda Windows: cada mes se representa mediante varias fotos, sus títulos y el número de comentarios asociados a las fotos. Los usuarios pueden ver más contenido resaltado para un mes en la Pantalla principal.

 

Reducir la jerarquía de navegación

Hemos usado el diseño de navegación jerárquica en el diseño de la aplicación de la Tienda Windows. Cuando rediseñamos la aplicación, redujimos la jerarquía de navegación para que pueda obtenerse acceso a más contenido a través de la pantalla del concentrador de la aplicación y, de este modo, eliminar la necesidad de navegar.

Ejemplo: quitar la barra de pestañas inferior

Ver estados en la aplicación de iPad.Vista de comentarios en la aplicación de iPad.

Aplicación de iPad

A. Vista de fotos B. Vista de comentarios

La barra de pestañas inferior con dos tablas dinámicas (fotos y comentarios) siempre está en pantalla. Los usuarios pueden ver una vista o la otra.

Estados de visualización en la aplicación de la Tienda Windows.

Aplicación de la Tienda Windows

  • Combinamos el comentario y las fotos en una vista para eliminar la necesidad de una interfaz de usuario con pestañas.
  • El diseño de concentrador para la Pantalla principal revela el contenido más importante para cada sección.
  • Para ver toda la lista de comentarios, los usuarios pueden pulsar sobre el encabezado de grupo denominado Comentarios recientes.

 

Usar manipulación directa para navegar

La manipulación directa permite a los usuarios interactuar con contenido y navegar a diferentes áreas con naturalidad. Cuando se diseñó la aplicación de la Tienda Windows, usamos la manipulación directa siempre que fue posible mediante controles integrados, como el zoom semántico, que permite a los usuarios navegar con más eficacia.

Navegación en la aplicación de iPad.

Navegación en la aplicación de iPad.

Navegar por la aplicación de la Tienda Windows.

Uso del zoom semántico para seleccionar en grupos de datos.

Aplicación de iPad

En la Pantalla principal, pulsa en el botón Años en la barra de navegación superior para que aparezca una ventana emergente y selecciona un año.

Aplicación de la Tienda Windows

En la Pantalla principal, haz un gesto de alejar con dos dedos para ampliar y ver todos los meses y años. De esta manera, los usuarios pueden saltar a cualquier mes de cualquier año con rapidez. Los usuarios también pueden obtener una visión general de los meses que tienen fotos y los que no (fondo rojo atenuado). Los usuarios pueden navegar completamente mediante la manipulación del contenido sin usar contenedor visual ni navegar a una página diferente.

 

Para ayudarte a elegir el mejor patrón de navegación para tu aplicación, consulta Patrones de navegación.

Consulta el patrón de navegación plano como parte de nuestra serie Características de aplicaciones, de principio a fin.

Comandos y acciones

Mantener las acciones contextuales de la aplicación en la barra de la aplicación

Cuando se rediseñaron los comandos o las acciones contextuales en la aplicación, nuevamente seguimos el enfoque de "anteponer el contenido al contenedor visual" e hicimos que todas las acciones contextuales estén disponibles a través del control de la barra de la aplicación. Con frecuencia, los comandos usados se encuentran cerca de los bordes derecho e izquierdo para que sean fáciles de alcanzar con la mano. De este modo, la superficie de diseño de la aplicación no se encuentra abarrotada de controles y, sin importar dónde se encuentre un usuario, pueda deslizar rápidamente en la barra de la aplicación desde la parte inferior o superior de la pantalla para ver las acciones relevantes. Todas las aplicaciones de la Tienda Windows pueden usar la barra de la aplicación para sus comandos. Dado que los usuarios estarán familiarizados con las interacciones de la barra de la aplicación, también aumenta la facilidad de uso de nuestra aplicación y todo el sistema parece coherente.

Ejemplo: eliminar fotos

Eliminación de fotos en la aplicación de iPad. Eliminación de fotos en la aplicación de la Tienda Windows.

Aplicación de iPad

  • Los comandos de la aplicación se encuentran en la parte superior de la pantalla cuando un usuario entra en el modo de selección.

Aplicación de la Tienda Windows

A. De manera predeterminada, la barra de la aplicación está oculta para proporcionar a los usuarios una experiencia envolvente. Un usuario puede deslizar rápidamente desde la parte inferior o superior de la pantalla para abrir la barra de la aplicación. B. Cuando un usuario selecciona objetos en la página, las acciones contextuales para los elementos seleccionados aparecen en la barra. Las acciones cambian en función de si hay objetos seleccionados y del lugar donde se encuentra el usuario en la aplicación. Los comandos globales generalmente se colocan en el costado derecho de la barra de la aplicación. Los comandos que no son tan importantes deben colocarse en el costado izquierdo de la barra de la aplicación.

 

Contratos

Usar el contrato de Buscar para centralizar la experiencia de búsqueda

En lugar de crear una interfaz de entrada de búsqueda que forme parte del Canvas de la aplicación permanentemente, implementamos el contrato de Buscar. Los usuarios pueden invocar de forma coherente la búsqueda a través de los accesos, y los resultados pueden presentarse en la aplicación de una manera que sea natural para el contenido. Mediante el contrato de Buscar, los usuarios pueden invocar el acceso a Buscar desde cualquier parte del sistema para buscar contenido en las aplicaciones que admiten el contrato.

Ejemplo: buscar una foto en la aplicación de diario fotográfico

Búsqueda en la aplicación de iPad. El contrato de Buscar en la aplicación de la Tienda Windows.

Aplicación de iPad

  • La búsqueda está disponible dentro de la aplicación en la Pantalla principal.
  • Cuando un usuario escribe un término de búsqueda, los resultados comienzan a aparecer y el usuario puede seleccionar uno.

Aplicación de la Tienda Windows

  • El usuario abre la barra de accesos y obtiene acceso a Buscar. De manera predeterminada, está seleccionada la aplicación de diario fotográfico porque el usuario actualmente se encuentra dentro de ella.
  • Cuando el usuario comienza a escribir, la aplicación proporciona sugerencias de búsqueda en el panel. De este modo los usuarios pueden ver rápidamente qué términos generarán resultados de búsqueda. Una vez que el usuario envía su consulta, aparece una vista de resultados de la búsqueda y podrá seleccionar el que quiera.

 

Ejemplo: buscar una foto fuera de la aplicación de diario fotográfico (disponible solo en aplicaciones de la Tienda Windows)

En este ejemplo se muestra cómo buscar un término en diferentes aplicaciones eligiendo una nueva aplicación en el panel de búsqueda. Esta función permite a los usuarios buscar cualquier tipo de contenido, en cualquier aplicación y en cualquier momento.

Buscar fuera de la aplicación de diario fotográfico.

Aplicación de la Tienda Windows

Un usuario busca el término "Barcelona" en la aplicación de Tweet@Rama y quiere mirar fotos de Barcelona mediante el diario fotográfico. El diario fotográfico es ahora el proveedor de resultados de búsqueda. La aplicación se inicia automáticamente y muestra los resultados de la búsqueda. El usuario no necesita iniciar la aplicación de diario fotográfico y después realizar la búsqueda.

 

Usar el contrato para contenido compartido para llegar a más destinos y personas que te interesen

La integración de los medios sociales es un componente clave de la mayoría de las aplicaciones. Cuando se diseñan las aplicaciones de iPad, los diseñadores y desarrolladores generalmente eligen qué canales de medios sociales admite la aplicación (como Twitter o Facebook) y después los desarrolladores deben integrar cada uno de estos servicios de forma individual o usar uno de los marcos disponibles. Cuando hay cambios de API para estos servicios de uso compartido, los desarrolladores deben actualizar su código para que dichos servicios continúen funcionando.

Cuando se trasladó la funcionalidad de uso compartido a la aplicación de la Tienda Windows, usamos el contrato para contenido compartido del sistema. Este contrato simplifica el diseño y el desarrollo porque no hay necesidad de conectarse con cada servicio que el usuario quiera utilizar. Además de las redes sociales, los usuarios también pueden guardar contenido en otros servicios, por ejemplo, en una aplicación de toma de notas como Notespace o EverNote. Mediante el uso de tan solo una pequeña cantidad de código, nuestra aplicación se conecta con cada aplicación de la Tienda Windows que ha implementado el contrato para contenido compartido. No hay necesidad de lidiar con cambios de API en servicios web o sitios de redes sociales externos. Desde el punto de vista de los usuarios, siempre pueden compartir desde una ubicación coherente mediante los accesos y al abrir el panel Compartir.

Ejemplo: compartir una foto en el diario fotográfico con otra aplicación

Uso compartido de fotos en la aplicación de iPad.

iPad

Para compartir una foto desde la aplicación de diario fotográfico de iPad, un usuario primero pulsa en el botón de acción de la barra de navegación superior y después elige compartir en Facebook. El desarrollador necesita realizar trabajo adicional y agregar más botones Compartir si quiere integrarse con otros servicios de redes sociales más adelante.

El flujo de trabajo de uso compartido en la aplicación de la Tienda Windows.
Elegir un destino de uso compartido en la aplicación de la Tienda Windows.

Aplicación de la Tienda Windows

  • Los usuarios siempre pueden encontrar opciones de uso compartido en una ubicación coherente, sin importar qué aplicación estén usando.
  • Toda aplicación instalada que se haya designado como destino de contenido compartido aparece en la lista de aplicaciones en el panel Compartir. Por ejemplo, Socialite, Tweet@Rama, Notespace y PaintPlay son todas destinos de contenido compartido.
  • Los usuarios pueden compartir una variedad de tipos de contenido. Por ejemplo, pueden compartir vínculos, fotos o guardar información en una aplicación de toma de notas.
  • Los destinos de contenido compartido usados con más frecuencia se muestran en la parte superior de la lista para ayudar a los usuarios a completar las tareas con rapidez.

 

Además de ser un origen de contenido compartido, diseñamos nuestra aplicación de diario fotográfico para que sea también destino de contenido compartido. Los usuarios pueden compartir con facilidad fotos desde otra aplicación en sus secuencias de fotos del diario fotográfico. Esta conexión también se habilita mediante el contrato para contenido compartido. Consulta el tema sobre las directrices y la lista de comprobación para uso compartido de contenido para más información acerca de qué aplicaciones constituyen excelentes destinos de contenido compartido.

Ejemplo: compartir fotos de otra aplicación con el diario fotográfico: destino de contenido compartido (disponible solo en aplicaciones de la Tienda Windows)

En este ejemplo, un usuario de otra aplicación de fotos mira imágenes de un viaje a México. Quiere compartirlas desde el álbum con su propia colección de la aplicación de diario fotográfico para que sea más fácil verlas en una vista de escala de tiempo. Cuando abre el panel Compartir, ve que la aplicación de diario fotográfico se menciona como uno de los destinos de contenido compartido, entonces invoca al flujo de trabajo Compartir.

Compartir fotos desde otra aplicación con el diario fotográfico.

 

Usar el selector de archivos para obtener acceso a archivos desde diversas ubicaciones

El selector de archivos es un cuadro de diálogo de pantalla completa que permite a los usuarios obtener acceso a archivos y carpetas ubicados en el equipo local, en dispositivos de almacenamiento conectados o en un Grupo Hogar. También puede obtener acceso a los elementos desde aplicaciones que participan en el contrato del selector de archivos.

Ejemplo: cargar una foto desde el sistema de archivos local

Acceder a fotos desde el sistema de archivos y sitios de medios sociales en la aplicación de iPad.

Aplicación de iPad

La aplicación de iPad admite el acceso a fotos en la biblioteca de fotos local y un par de servicios de redes sociales.

Acceder a la interfaz de usuario del selector de archivos en la aplicación de la Tienda Windows.

Aplicación de la Tienda Windows

A. El usuario pulsa el botón Cargar en la barra de la aplicación y se abre la interfaz de usuario del selector de archivos. Esta es una interfaz de usuario coherente que el usuario ve siempre que quiera obtener acceso a los archivos. B. Si se pulsa en el encabezado Archivos, el usuario verá un control flotante de todas las ubicaciones de archivo disponibles y podrá navegar a una carpeta de archivos. C. El usuario selecciona múltiples fotos en la carpeta y aparece una lista de miniaturas en el costado inferior izquierdo que muestra las fotos seleccionadas.

 

Ejemplo: buscar una foto del diario fotográfico en otra aplicación (disponible solo en aplicaciones de la Tienda Windows)

También aprovechamos una característica que es exclusiva de las aplicaciones de la Tienda Windows y agregamos compatibilidad para la selección de contenido fotográfico desde el diario fotográfico de otra aplicación. Esto permite que los usuarios se ahorren el paso de descargar las fotos primero desde el diario fotográfico al sistema de archivos local y que después tengan que cargar las fotos en otra aplicación. El diario fotográfico implementa el contrato del selector de archivos para que el sistema lo reconozca como ubicación de almacenamiento de archivos.

Usar contenido del diario fotográfico en otra aplicación.

Aplicación de la Tienda Windows

Un usuario se encuentra en la pantalla Configuración del equipo y pulsa en Examinar para personalizar la foto de su cuenta. Dado que el diario fotográfico implementa el contrato del selector de archivos, el usuario puede ver que la aplicación está disponible para acceder a ella en el directorio de archivos. Entonces, el usuario puede seleccionar una foto almacenada en la colección de su diario fotográfico.

 

Funcionalidad táctil

Deslizar rápidamente desde el borde para ver los comandos del sistema y de la aplicación

En Windows 8, un usuario puede deslizar rápidamente desde los bordes para obtener acceso a diferentes comandos y navegar entre aplicaciones.

  • Los comandos de la aplicación aparecen al deslizar rápidamente desde el borde inferior o superior de la pantalla. La barra de la aplicación siempre debe usarse para mostrar comandos de la aplicación.
  • Al deslizar rápidamente desde el lado derecho de la pantalla, aparecen los accesos que contienen los comandos del sistema.
  • Al deslizar rápidamente desde la izquierda, se cambia a las aplicaciones que ya se usaron.
  • Al deslizar rápidamente desde el borde superior al borde inferior de la pantalla, se pueden acoplar o cerrar las aplicaciones.

Ejemplo: acceder a la barra de la aplicación y a los accesos en una aplicación de la Tienda Windows

Acceder a la barra de la aplicación en la aplicación de la Tienda Windows. Acceder a los accesos en la aplicación de la Tienda Windows.

Desliza rápidamente desde el borde inferior o superior de la pantalla para obtener acceso a los comandos de la aplicación.

Desliza rápidamente desde el borde derecho de la pantalla para revelar los accesos que contienen los comandos del sistema: Buscar, Compartir, Iniciar, Dispositivos y Configuración.

 

Deslizamiento transversal para seleccionar objetos

Con Windows 8, un usuario puede deslizar el dedo una distancia breve, perpendicularmente a la dirección del movimiento panorámico, para seleccionar un objeto de una lista o cuadrícula. Cuando se seleccionan objetos, se revela la barra de la aplicación que muestra automáticamente los comandos relevantes.

Ejemplo: seleccionar varias fotos para eliminar

Seleccionar varias fotos en la aplicación de iPad. Seleccionar varias fotos en la aplicación de la Tienda Windows.

Aplicación de iPad

  • Los usuarios entran en un modo de edición específico para realizar la acción de selección y otras acciones de edición. Esto se debe a que el gesto de pulsar se reserva para las acciones principales, como el inicio.
  • Los usuarios salen del modo de edición cuando han terminado.

Aplicación de la Tienda Windows

  • Los usuarios deslizan rápidamente hacia abajo sobre el objeto para seleccionar y la barra de la aplicación se muestra automáticamente con comandos relevantes contextualmente.
  • Los usuarios pueden pulsar o seleccionar un objeto sin entrar en otro modo y salir de él.
  • Este gesto es reversible, lo que hace que la selección sea mucho más eficiente en las aplicaciones de Windows 8.

 

Alejar y ampliar en el zoom semántico

Si bien los gestos de alejar y ampliar generalmente se usan para cambiar el tamaño tanto en las aplicaciones de la Tienda Windows como en las de iPad, en Windows 8 también permiten saltar al comienzo, al final o a cualquier parte del contenido mediante el zoom semántico. El zoom semántico permite al usuario alejar para ver los datos de grupos relacionados y proporciona un modo rápido de volver a reducir. En lugar de proporcionar navegación para revisar largas listas de contenido, usa el zoom semántico cuando sea posible para este tipo de interacción. Por supuesto, cuando un usuario visualiza una foto en el modo de pantalla completa, los gestos de alejar y ampliar pueden usarse para el zoom óptico.

Ejemplo: zoom semántico en la pantalla principal y en una página de radio de vista de mes

Usar el zoom semántico en la aplicación de la Tienda Windows.

Aplicación de la Tienda Windows

A. El zoom semántico en la Pantalla principal permite que los usuarios salten a un mes particular de cualquier año rápidamente. B. El zoom semántico en una página de radio de vista de mes permite a los usuarios saltar a un día particular y también proporciona un gráfico de información que detalla cuántas fotos están disponibles de ese año.

 

Orientación y tamaño de pantalla

Crear un diseño adaptativo

Una aplicación de iPad tiene una resolución y un tamaño de pantalla fijos con dos orientaciones que los diseñadores tienen que considerar. Windows 8 se ejecuta en diversos factores de forma, desde tabletas portátiles a equipos de escritorio todo en uno. Como resultado, puedes usar el espacio de pantalla adicional para mostrar más contenido a los usuarios. Cuando se rediseñó la aplicación de diario fotográfico, consideramos cómo se vería la aplicación en dos orientaciones de dispositivo, teniendo en cuenta los tamaños de los dispositivos y las resoluciones de pantalla. El diseño de cuadrícula facilita la escalación del diseño tanto para el diseño vertical como para las pantallas de alta resolución. Por ejemplo, incluimos más fotos resaltadas en cada mes donde hay más espacio vertical disponible.

Ejemplo: diseño de pantalla principal con orientación horizontal, orientación vertical y pantallas grandes (solo para aplicación de la Tienda Windows)

La aplicación de iPad en modo horizontal y vertical.

Aplicación de iPad

El mismo contenido se muestra tanto en el diseño horizontal como en el vertical. El contenido se redistribuye en la orientación vertical.

La aplicación de la Tienda Windows en varias resoluciones y modos de vista.

Aplicación de la Tienda Windows

La aplicación muestra más contenido en cada sección de la página de concentrador en el diseño vertical y en pantallas más grandes, lo que ocupa espacio adicional. De un modo similar a la creación de imágenes para una pantalla Retina de iOS, creamos varias imágenes para diferentes porcentajes de escala de Windows: 100 %, 140 % y 180 %. Estas imágenes se cargan automáticamente en tabletas de alta definición.

 

Usar los anchos estrechos para atraer a tus usuarios

Windows 8 permite que los usuarios realicen varias tareas poniendo múltiples aplicaciones una junto a la otra en la pantalla. Diseñar la aplicación para que funcione correctamente en los anchos estrechos es una excelente forma de aumentar el tiempo de la aplicación en pantalla y atraer a los usuarios por períodos más largos. Es sencillo para un usuario cambiar el tamaño de la aplicación manipulando la línea divisoria entre dos aplicaciones. Por ello, es importante mantener el contexto a través de los cambios de tamaño. No queremos que los usuarios pierdan el estado de la aplicación como resultado del cambio de tamaño de su aplicación.

Para obtener más información acerca del cambio de tamaño, consulta Directrices para tamaños de ventana y escalado en pantallas y Directrices para cambiar el tamaño de las ventanas a diseños alargados y estrechos.

Ejemplo: pantalla principal en ancho estrecho

La aplicación de la Tienda Windows en ancho estrecho

Aplicación de la Tienda Windows

  • Cuando se cambia el tamaño de la pantalla principal a un ancho estrecho, los usuarios pueden seguir teniendo acceso al mismo contenido.
  • En un tamaño alto y estrecho, un usuario se desplaza verticalmente para obtener más contenido porque es más cómodo desplazarse por el borde largo. Esto se diferencia del desplazamiento horizontal en la vista rellena, que también se optimiza para desplazarse por el borde largo.

 

Notificaciones

Usar iconos para actualizaciones dinámicas y persistentes

iOS 5 introdujo un centro de notificaciones donde las notificaciones nuevas aparecen rápidamente en la parte superior de la pantalla y los usuarios pueden deslizar rápidamente desde la parte superior para ver todos los mensajes en el centro. Además, los iconos de aplicación en Springboard de iOS pueden tener adheridas notificaciones numéricas para indicar que hay mensajes nuevos. Los iconos de la pantalla Inicio de Windows 8 combinan la funcionalidad de las notificaciones numéricas en los iconos de aplicación y del centro de notificaciones en un iPad. Los usuarios pueden iniciar aplicaciones y leer las notificaciones desde un solo lugar. Además, a diferencia de las notificaciones en iOS que tienen un formato fijo, los iconos de las aplicaciones de la Tienda Windows están disponibles en tres tamaños cuadrados y un tamaño ancho, y tienen una gran colección de plantillas entre las que los diseñadores pueden elegir.

Ejemplo: notificaciones en la pantalla principal

Una notificación de diario fotográfico en Springboard de iPad. La notificación y el icono del diario fotográfico en la pantalla Inicio.

iPad

A. Icono de la aplicación con notificación numérica en Springboard de iPad.

B. Centro de notificaciones con notificación del diario fotográfico.

Windows 8

C. Icono en la pantalla Inicio con notificaciones y notificaciones numéricas. Existen muchas plantillas de icono disponibles.

 

Usar notificaciones del sistema para notificaciones importantes y temporarias

Puedes usar notificaciones del sistema para notificar a los usuarios sobre eventos en tiempo real. A diferencia de las actualizaciones de icono, que son pasivas, las notificaciones del sistema en las aplicaciones de la Tienda Windows son actualizaciones importantes que interrumpirán a los usuarios. Se muestran en la parte superior derecha de la pantalla y pueden aparecer en cualquier parte del sistema. Generalmente, es mejor permitir que los usuarios elijan recibir notificaciones durante la primera ejecución de la aplicación. Si corresponde, muestra las notificaciones del sistema recientes en los iconos mientras todavía sean relevantes. Las notificaciones del sistema son similares a las alertas transitorias de iOS que se muestran como pancartas en la parte superior de la pantalla. Pero los diseñadores pueden elegir entre una colección de plantillas de notificaciones del sistema para hacer que sus notificaciones sean más relevantes.

Ejemplo: el diario fotográfico notifica a los usuarios cuando reciben un comentario de un familiar

Una notificación del sistema en la pantalla Inicio.

El usuario está configurado para recibir notificaciones del sistema cuando un familiar comenta fotos de la aplicación.

 

Acerca de los autores

Bart Claeys, Ratio Interactive.

Bart Claeys es el diseñador principal de experiencia del usuario de Ratio Interactive y se especializa en interfaz de usuario y experiencia del usuario en aplicaciones móviles y web. Anteriormente, trabajaba como director de arte interactivo para Saatchi & Saatchi Brussels, donde creó campañas interactivas para Toyota, Sony y muchas otras marcas internacionales. Bart realizó una maestría en Desarrollo de Productos y recibió instrucción adicional en administración de marcas. Es el fundador de Creativeskills.be, el tablón de anuncios de trabajo creativo líder de Bélgica. En 2006 Bart ganó el premio "Jij Bent Flanders Future", creado por el gobierno flamenco para promover el espíritu empresarial.

Qixing Zheng, Microsoft Corporation.

Qixing Zheng es directora del programa de experiencia del usuario de Microsoft. Forma parte del equipo que creó la interfaz de usuario de Windows 8 y ha estado ayudando a los diseñadores a aprender más acerca del lenguaje de diseño Microsoft. Su gran pasión es ayudar a las personas a mejorar su experiencia del usuario con la tecnología de la que dependen día a día. Antes de unirse al equipo de Windows, Qixing trabajó como la primera asesora en experiencia del usuario en Microsoft Canadá, donde ha dado conferencias en universidades, comunidades de diseño y empresas acerca de la inversión de Microsoft en experiencia del usuario. También ha trabajado en la identificación de creativos y la recolección de historias sobre diseño obtenidas en la comunidad.

 

Temas relacionados

Recreación de diseños de aplicaciones de iOS en Windows 8

Recursos para desarrolladores de iOS