Diseño de UX para Aplicaciones

Diseo de UX para aplicaciones
Aprenda a crear aplicaciones para Tienda Windows

Planear aplicaciones de la Tienda Windows
Directrices de diseo para aplicaciones de la Tienda Windows
Inspiracin para el diseo (aplicaciones de la Tienda Windows)
Casos prcticos (aplicaciones de la Tienda Windows)
Activos de diseo para aplicaciones de la Tienda Windows
Personas que lo han encontrado til: 24 de 41 - Valorar este tema
Planeacin
Enfoque de la aplicacin
Escenarios de usuario
Caractersticas de las aplicaciones
Hacer dinero
Diseo de la interfaz de usuario
Primeras impresiones
Validacin
Gua de diseo
Navegacin
Comandos
Tacto
Publicidad
Creacin de marca
Directrices para la experiencia de usuario
Inspiracin
Juegos
Entretenimiento
Noticias
Productividad
Deportes
Compras
Viajes
Educacin
Casos prcticos
iOS:> aplicaciones para la Tienda Windows

Sitio web:> aplicaciones para la Tienda Windows
Activos
Planear aplicaciones de la Tienda

Windows (Windows)
Planear para la rentabilidad (aplicaciones de la Tienda Windows)
Planear para calidad y certificacin (aplicaciones de la Tienda Windows)
Diseo para diferentes factores de forma (aplicaciones de la Tienda Windows)
Diseo para un mercado global (aplicaciones de la Tienda Windows)
Diseo de accesibilidad (aplicaciones de la Tienda Windows)
Evaluar la facilidad de uso de las aplicaciones de la Tienda Windows
En este artculo
1. Determina los puntos fuertes de la aplicacin

2. Decide qu actividades del usuario admitirs
3. Decide qu caractersticas incluirs
4. Decide cmo rentabilizar la aplicacin
5. Disea la interfaz de usuario de la aplicacin
6. Causa una buena primera impresin
7. Crea un prototipo y valida tu diseo
Consulta tambin
Cuando planees tu aplicacin de la Tienda Windows, piensa menos en qu

caractersticas quieres incluir y ms acerca de qu experiencia quieres proporcionar a
tus usuarios. Si todava no has ledo Creacin de aplicaciones de la Tienda Windows
sobresalientes, sera recomendable que lo hicieras ahora.
Te recomendamos que sigas estos pasos para planear tu aplicacin de la Tienda
Windows.
1. Determina los puntos fuertes de la aplicacin

La parte ms importante del diseo de una aplicacin de la Tienda Windows consiste en
determinar cules sern los puntos fuertes de la aplicacin. Supongamos que quieres
crear una aplicacin de fotos. Piensas en los motivos por los que los usuarios trabajan
con sus fotografas, las guardan y las comparten, y te das cuenta de que quieren revivir
recuerdos, conectarse con otras personas a travs de las fotos y conservarlas en un lugar
seguro. Quieres que esos sean los puntos fuertes de la aplicacin y usas esos objetivos
de experiencia del usuario para guiarte durante el resto del proceso de diseo.
En qu consiste la aplicacin? Comienza con un concepto amplio y enumera todo lo
que quieres que los usuarios puedan hacer con la aplicacin.
Imagina que quieres crear una aplicacin que ayude a las personas a planear sus viajes.
Aqu te presentamos algunas ideas que bien podras haber anotado en una servilleta:
Conseguir mapas de todos los lugares de un itinerario y llevarlos contigo al viaje.

Averiguar sobre eventos especiales que tengan lugar mientras ests en la ciudad.
Permitir que los compaeros de viaje creen listas con actividades y atracciones
indispensables por separado, pero que puedan compartirlas.
Permitir que los compaeros de viaje recopilen sus fotografas y las compartan
con familiares y amigos.
Obtener los destinos recomendados en funcin del precio de los vuelos.
Encontrar una lista consolidada de restaurantes, comercios y actividades dentro
del rea de destino.
En qu se destaca tu aplicacin? Retrocede un paso y examina la lista de ideas para

ver si algn escenario en particular te llama la atencin. Acepta el reto de reducir la lista
a un solo escenario en el que quieras centrarte. En el proceso, podras tachar muchas
ideas buenas, pero decirles "no" es fundamental para lograr un solo escenario
excepcional.
Despus de elegir un solo escenario, decide cmo explicaras a una persona normal los
motivos por los que tu aplicacin es excelente, y escrbelos en una sola frase. Por
ejemplo:
Mi aplicacin para viajes es excelente para crear itinerarios de forma conjunta

para viajes en grupo.
Mi aplicacin de gimnasia es excelente para permitir a los amigos realizar un
seguimiento de su progreso y compartir sus logros.
Mi aplicacin de tiendas de comestibles es excelente para ayudar a las familias a
coordinar sus compras semanales para que no se olviden de comprar algo ni lo
compren dos veces.
Este es el enunciado de puntos fuertes de la aplicacin y puede orientar muchas

decisiones y disyuntivas de diseo que surgen mientras se crea la aplicacin.
Concntrate en los escenarios del usuario que quieres permitir y ten cuidado de no
convertirlo en una lista de caractersticas. Debe tratarse de lo que podrn hacer los
usuarios y no de lo que podr hacer la aplicacin.
Entre las tcnicas habituales para ayudarte en este paso se encuentran los diagramas de
lluvia de ideas, de asociacin y de ideas.
2. Decide qu actividades del usuario admitirs

Un flujo es un conjunto de interacciones relacionadas que los usuarios tienen con la
aplicacin para alcanzar sus objetivos. Cada flujo debe estar estrechamente relacionado
con el enunciado de puntos fuertes y debe ayudar a los usuarios a alcanzar ese nico
escenario que quieres resaltar. Una aplicacin excelente cuenta con flujos fciles de
aprender que requieren interacciones mnimas.
Tcnicas habituales para ayudarte con este paso:
Explicar el flujo: Qu es lo primero, qu sigue?

Presentacin grfica del flujo: Cmo deben desplazarse los usuarios por la
interfaz de usuario para completar el flujo?
Prototipo: probar el flujo con un prototipo rpido.
Qu deben poder hacer los usuarios? Por ejemplo, la aplicacin para viajes es
"excelente para crear itinerarios de forma colaborativa para viajes en grupo".
Confeccionemos una lista de los flujos que queremos destacar:
Crear un viaje con informacin general.

Invitar a amigos a sumarse al viaje.
Unirse al viaje de un amigo.
Ver itinerarios recomendados por otros viajeros.
Agregar destinos y actividades a los viajes.
Modificar y comentar los destinos y las actividades que agregaron los amigos.
Compartir itinerarios para que puedan seguirlos amigos y familiares.
3. Decide qu caractersticas incluirs

Cuando sepas qu es lo que buscan los usuarios y cmo puedes ayudarlos a encontrarlo,
puedes echar un vistazo a algunas herramientas de la caja de herramientas. Explora la
plataforma de Windows y asocia las caractersticas con las necesidades de la aplicacin.
Asegrate de seguir las directrices de experiencia del usuario para cada caracterstica.
Tcnicas comunes:
Investigacin sobre la plataforma: descubre qu caractersticas ofrece la

plataforma y cmo puedes usarlas.
Diagramas de asociacin: conecta los flujos con las caractersticas.
Prototipo: prueba las caractersticas para asegurarte de que hacen lo que
necesitas.
Contratos entre aplicaciones Tu aplicacin puede participar en contratos entre

aplicaciones que habilitan amplios flujos de usuarios entre caractersticas y aplicaciones.
Buscar Permite que los usuarios busquen rpidamente el contenido de la

aplicacin desde cualquier parte del sistema, incluso desde otras aplicaciones. Y
viceversa.
Compartir Permite a los usuarios compartir contenido desde la aplicacin con
otras personas a travs de otras aplicaciones. Tambin permite recibir contenido
de otras personas y aplicaciones que se puede compartir.
Reproducir Permite que los usuarios disfruten de la transmisin de audio,
vdeo o imgenes desde tu aplicacin a otros dispositivos de la red domstica.
Selector de archivos y extensiones de selector de archivos Permite que los
usuarios carguen y guarden sus archivos desde el sistema de archivos local, los
dispositivos de almacenamiento conectados, el Grupo Hogar o incluso desde
otras aplicaciones. Tambin puedes proporcionar una extensin de selector de
archivos para que otras aplicaciones puedan cargar el contenido de la aplicacin.
Para ms informacin, consulta el tema sobre las extensiones y los contratos entre
aplicaciones.
Diferentes vistas y factores de forma Windows 8 pone a los usuarios al mando y a tu

aplicacin en primer plano. Deseas que la interfaz de usuario de la aplicacin destaque
en cualquier dispositivo, con cualquier modo de entrada, en cualquier orientacin, en
cualquier circunstancia en la que el usuario decida usarla. Obtn ms informacin sobre
la planeacin de diferentes factores de forma.
Experiencia tctil Windows 8 ofrece una experiencia tctil nica e incomparable, que
hace mucho ms que simplemente emular la funcionalidad del mouse.
Por ejemplo, un zoom semntico es un modo optimizado para funcionalidad tctil que
permite navegar por un conjunto extenso de contenido. Los usuarios pueden desplazarse
de lado a lado o de arriba a abajo por las categoras del contenido y acercar la vista de
las categoras para ver ms informacin y con ms detalle. Puedes usarlo para presentar
el contenido de una manera ms tctil, visual e informativa que con los modelos
tradicionales de navegacin y diseo, como las pestaas.
Por supuesto, puedes utilizar diferentes interacciones tctiles, como girar, desplazar
lateralmente, deslizar transversalmente, etc. Obtn ms informacin sobre la interaccin
tctil.
Atractiva y original Asegrate de que tu aplicacin sea original y atraiga a los
usuarios con estas experiencias estndar:
Animaciones Usa nuestra biblioteca de animaciones para que tu aplicacin sea

rpida y fluida. Ayuda a los usuarios a comprender cambios contextuales y
relaciona las experiencias entre s con transiciones visuales. Obtn ms
informacin sobre cmo animar la interfaz de usuario.
Notificaciones del sistema Informa a los usuarios sobre contenido
personalmente relevante o sujeto a limitacin temporal a travs de notificaciones
del sistema para atraerlos a la aplicacin aunque est cerrada. Obtn ms
informacin sobre los iconos, las notificaciones y las notificaciones del sistema.
iconos secundarios Promueve contenido interesante y vnculos profundos de la
aplicacin en la pantalla Inicio y permite a los usuarios iniciar la aplicacin
directamente en una pgina o vista especficas. Obtn ms informacin sobre los
iconos secundarios.
Iconos de la aplicacin Ofrece actualizaciones nuevas y relevantes para que los
usuarios quieran volver a la aplicacin. Podrs encontrar ms informacin en la
siguiente seccin. Obtn ms informacin sobre los iconos de la aplicacin.
Personalizacin
Configuracin Permite guardar la configuracin de la aplicacin para que los

usuarios puedan crear la experiencia que quieran. Consolida toda la
configuracin en su solo lugar. Los usuarios pueden configurar la aplicacin con
un mecanismo comn con el que ya estn familiarizados. Obtn ms
informacin sobre cmo agregar configuracin de la aplicacin.
Movilidad Crea una experiencia continua de un dispositivo a otro con la

movilidad de datos, que permite al usuario retomar una tarea exactamente donde
la dej y preserva la experiencia del usuario que ms les interesa,
independientemente del dispositivo que estn usando. Mantn la configuracin y
los estados con movilidad para que los usuarios puedan usar la aplicacin en
todas partes, en el equipo familiar de la cocina, en el del trabajo o en una tableta
personal. Obtn ms informacin acerca de cmo administrar datos de la
aplicacin y consulta Directrices para perfiles mviles de datos de la aplicacin.
Imgenes de usuario Haz que la aplicacin sea ms personal para los usuarios
mediante la carga su imagen de usuario o permite que establezcan contenido de
la aplicacin como su icono personal en Windows.
Capacidades del dispositivo Asegrate de que la aplicacin aprovecha al mximo la

funcionalidad de los dispositivos actuales.
Gestos de proximidad Permite que los usuarios conecten dispositivos haciendo

que se toquen fsicamente, para mejorar las experiencias en las que esperas que
haya varios usuarios situados cerca unos de otros (juegos multijugador). Obtn
ms informacin sobre los gestos de proximidad y pulsacin.
Cmaras y dispositivos de almacenamiento externos Conecta a los usuarios
con sus cmaras integradas o conectadas para conversar, realizar conferencias,
grabar vdeo blogs, tomar fotografas del perfil, documentar hechos del mundo
que los rodea o para cualquier otra actividad en la que se destaque tu aplicacin.
Obtn ms informacin sobre el acceso a contenido en almacenamiento extrable.
Acelermetros y otros sensores Hoy en da, los dispositivos vienen con
diversos sensores. La aplicacin puede atenuar o iluminar la pantalla segn la
luz ambiental, redistribuir la interfaz de usuario si el usuario gira la pantalla o
reaccionar ante un movimiento fsico. Obtn ms informacin sobre los sensores.
Ubicacin geogrfica Usa la informacin de ubicacin geogrfica de datos web
estndar o de sensores de ubicacin geogrfica para que los usuarios puedan
desplazarse, encontrar su posicin en un mapa u obtener avisos sobre personas,
actividades o destinos cercanos. Obtn ms informacin sobre la ubicacin
geogrfica.
Volvamos a tomar el ejemplo de la aplicacin para viajes. Para ofrecer una excelente
ayuda a un grupo de amigos que quieren crear de forma conjunta los itinerarios de
viajes en grupo, podras usar algunas de estas caractersticas, por mencionar algunas:
Compartir: los usuarios comparten sus prximos viajes e itinerarios en diferentes

redes sociales para compartir el entusiasmo previo al viaje con amigos y
familiares.
Vistas acoplada y rellena: los usuarios pueden tener la aplicacin para viajes de
un lado de la pantalla y el explorador del otro lado para realizar investigaciones
y reservas.
Buscar: los usuarios buscan y encuentran actividades o destinos en los itinerarios
compartidos o pblicos de otras personas que pueden incluir en sus propios
viajes.
Notificaciones: los usuarios reciben una notificacin cuando sus compaeros de
viaje actualizan los itinerarios.
Configuracin: los usuarios configuran la aplicacin segn su preferencia, por

ejemplo, qu viaje debe generar notificaciones o qu grupos sociales tienen
permitido buscar los itinerarios de los usuarios.
Zoom semntico: los usuarios se desplazan por la escala de tiempo del itinerario
y acercan la vista para ver con ms detalle la larga lista de actividades que
planearon.
Imgenes de usuario: los usuarios eligen la imagen que quieren que aparezca
cuando comparten su viaje con amigos.
Como puedes ver, Windows 8 te ayuda a crear experiencias nuevas y atractivas que
deleitarn a los usuarios. Para obtener ms ideas, consulta Desarrollo de aplicaciones de
la Tienda Windows.
4. Decide cmo rentabilizar la aplicacin

Cuentas con muchas opciones para ganar dinero con tu aplicacin. Si decides usar
publicidad o ventas en la aplicacin, querrs disear una interfaz de usuario que lo
permita. Para ms informacin, consulta el tema sobre la planeacin para la rentabilidad.
5. Disea la interfaz de usuario de la aplicacin

Se trata de comprender correctamente los aspectos fundamentales. Ahora que sabes
cules son los puntos fuertes de tu aplicacin y ya pensaste en los flujos que quieres
admitir, puedes comenzar a pensar en los aspectos fundamentales del diseo de la
interfaz de usuario.
Cmo deberas organizar el contenido de la interfaz de usuario? La mayor parte
del contenido de la aplicacin se puede organizar en ciertos tipos de grupos o jerarquas.
Lo que elijas como grupo de nivel superior del contenido debe coincidir con el objetivo
del enunciado de puntos fuertes.
Por ejemplo, en la aplicacin para viajes existen varias formas de agrupar los itinerarios.
Si el objetivo de la aplicacin fuera descubrir destinos interesantes, entonces podras
agruparlos segn los intereses, como aventura, diversin bajo el sol o escapadas
romnticas. Sin embargo, como el objetivo de la aplicacin es planear viajes con amigos,
tiene ms sentido organizar los itinerarios en funcin de crculos sociales, como familia,
amigos o trabajo.
Elegir cmo quieres agrupar el contenido te ayuda a decidir qu pginas o vistas
necesitas en la aplicacin. Las plantillas de proyecto disponibles en Microsoft Visual
Studio Express 2012 for Windows 8 ofrecen los modelos de diseo de aplicacin
comunes que se adaptan a la mayora de las necesidades de contenido. Para ms
informacin, consulta el tema sobre el diseo de navegacin y las plantillas para
acelerar el desarrollo de tu aplicacin.
Qu superficies y comandos de la interfaz de usuario necesitas? Revisa los flujos
que identificaste anteriormente. Para cada flujo, crea una descripcin general de los
pasos que deben dar los usuarios.
Examinemos el flujo "Compartir itinerarios para que los sigan amigos y familiares".
Supongamos que el usuario acaba de crear un viaje. Compartir un itinerario de viaje
podra requerir estos pasos:
1.
2.
3.
4.
5.
El usuario abre la aplicacin y ve una lista con los viajes que cre.
El usuario pulsa en el viaje que quiere compartir.
Los detalles del viaje aparecen en pantalla.
El usuario accede a una interfaz de usuario para empezar a compartir.
El usuario selecciona o escribe la direccin de correo electrnico o el nombre
del amigo con el que quiere compartir el viaje.
6. El usuario accede a una interfaz de usuario para terminar de compartir.
7. La aplicacin actualiza los detalles del viaje con la lista de personas con las que
comparti el viaje.
Durante este proceso, comienzas a ver qu interfaz de usuario necesitas crear y los
detalles adicionales en los que debes pensar (por ejemplo, redactar un correo electrnico
estndar reutilizable para los amigos que an no utilizan la aplicacin). Tambin puedes
comenzar a eliminar pasos adicionales. Quizs, el usuario en realidad no necesite ver los
detalles del viaje antes de compartirlo, por ejemplo. Cuanto ms claro sea el flujo, ms
fcil ser usarlo.
Para obtener informacin detallada sobre cmo usar superficies distintas, consulta
Diseo de comandos para aplicaciones de la Tienda Windows.
Cmo deberas organizar los comandos? Usa tu esquema sobre los pasos del flujo
para identificar posibles comandos que necesites disear. A continuacin, piensa en la
ubicacin que tendrn los comandos en la aplicacin.
Trata siempre de usar el contenido. Siempre que sea posible, permite que los
usuarios manipulen directamente el contenido en el Canvas de la aplicacin, en
lugar de agregar comandos que acten sobre el contenido. Por ejemplo, en la
aplicacin para viajes, permite que los usuarios reorganicen el itinerario
arrastrando y colocando las actividades de una lista en el Canvas, en lugar de
seleccionar la actividad y usar los botones de comandos Arriba o Abajo.
Si no puedes usar el contenido, coloca comandos en una de estas superficies de
la interfaz de usuario.
o En la barra de la aplicacin: debes colocar la mayora de los comandos
en la barra de la aplicacin, que generalmente permanece oculta hasta
que el usuario decide mostrarla.
o En el Canvas de la aplicacin propiamente dicho: si el usuario se
encuentra en una pgina o vista que tiene un solo propsito, puedes
ofrecer comandos para ese propsito directamente en el Canvas. Debera
haber muy pocos de estos comandos.
o En un men contextual: puedes usar los mens contextuales para
acciones del Portapapeles (como cortar, copiar y pegar) o para comandos
que se aplican al contenido y que no se pueden seleccionar (como
agregar un alfiler de anotacin en una ubicacin sobre el mapa).
Decide cmo disear tu aplicacin en cada vista. Windows 8 admite vistas verticales,
horizontales, acopladas y rellenas. Los usuarios pueden colocar la aplicacin en
cualquiera de estas vistas en cualquier momento, y quieres lograr que la aplicacin se
vea y funcione perfectamente en cada una de ellas. Esto significa que debes planear el
diseo de los elementos de interfaz de usuario para cada vista y asignar la
implementacin del diseo a cada estado de visualizacin. Cuando lo haces, la interfaz
de usuario de la aplicacin cambia de forma fluida para satisfacer las necesidades y
preferencias del usuario.
Para obtener ms informacin, consulta los temas sobre las directrices para diseos, la
eleccin de un diseo y las directrices para vistas ajustadas y rellenas.
6. Causa una buena primera impresin

Piensa en lo que quieres que sientan, piensen o hagan los usuarios cuando inicien por
primera vez la aplicacin. Vuelve a consultar el enunciado de puntos fuertes. Aunque no
tengas la oportunidad de decir a los usuarios en persona para qu es excelente la
aplicacin, puedes transmitirles el mensaje con tu primera impresin. Aprovecha lo
siguiente:
Notificaciones & de icono El icono es la cara de tu aplicacin. Entre todas las
aplicaciones que el usuario pueda tener en su pantalla Inicio, qu es lo que har que
quiera iniciar la tuya? Asegrate de que el icono resalte la marca de tu aplicacin y
muestre sus puntos fuertes. Recurre a las notificaciones de icono para que la aplicacin
siempre tenga una apariencia renovada y relevante, lo que har que el usuario vuelva a
ella una y otra vez.
Pantalla de presentacin La pantalla de presentacin debe cargarse lo ms rpido
posible y permanecer en la pantalla solo el tiempo necesario para inicializar el estado de
la aplicacin. Lo que muestres en la pantalla de presentacin debe expresar la
personalidad de la aplicacin.
Primer inicio Qu vern los usuarios antes de suscribirse al servicio, iniciar sesin en
su cuenta o agregar su propio contenido? Intenta demostrar el valor de la aplicacin
antes de solicitar informacin a los usuarios. Considera la posibilidad de ofrecerles una
muestra del contenido que puedan manipular para que comprendan el propsito de la
aplicacin antes de pedirles que se comprometan.
Pgina principal La pgina principal es la pgina que vern los usuarios cada vez que
inicien la aplicacin. El contenido debe tener un propsito claro y mostrar de inmediato
para qu sirve la aplicacin. Haz que esta pgina sea excelente en algo en particular y
confa en que las personas explorarn el resto de la aplicacin. Elimina las distracciones
de la pgina de destino, pero no su detectabilidad.
Para comprender mejor el xito de los mensajes, consulta Evaluar la facilidad de uso de
las aplicaciones de la Tienda Windows.
7. Crea un prototipo y valida tu diseo

Antes de ir demasiado lejos con el desarrollo real, debes validar el diseo o crear un
prototipo basado en instrucciones, impresiones del usuario y requisitos, para evitar tener
que trabajar sobre ello ms tarde. Cada caracterstica cuenta con un conjunto de
directrices de experiencia del usuario que te ayudan a pulir la aplicacin y un conjunto
de requisitos comerciales que debes cumplir para vender la aplicacin en la Tienda
Windows. Puedes usar el Kit para la certificacin de aplicaciones en Windows para
comprobar si tu aplicacin cumple tcnicamente con los requisitos comerciales.
Usa las directrices detalladas de la experiencia de usuario para aplicaciones de la Tienda
Windows para mantenerte centrado en las caractersticas importantes.
Consulta tambin
Para ms informacin sobre la planeacin y el diseo de aplicaciones de la Tienda
Windows, consulta los siguientes temas.
Tema
Descripcin
Las aplicaciones de la Tienda Windows te ofrecen distintas maneras
Planeacin para
de amortizar el duro trabajo que has invertido en desarrollar
la rentabilidad
aplicaciones excepcionales.
La calidad de las aplicaciones de la Tienda Windows se evala
mediante varios procesos de prueba. En este tema se describe la
Planeacin de
prueba que lleva a cabo el Kit para la certificacin de aplicaciones en
calidad y
Windows. Si diseas la aplicacin para que pase estas pruebas,
certificacin
mejorars la calidad y la confiabilidad. Tambin conseguirs la
certificacin de almacenamiento de manera ms fcil.
Las aplicaciones de la Tienda Windows se encuentran en casa en
equipos de escritorio, equipos porttiles y tabletas tctiles. Necesitas
disear las aplicaciones de la Tienda Windows para que se ajusten
Diseo para
como un guante a los distintos factores de forma. Los usuarios
diferentes
pueden alternar entre diferentes dispositivos, cambiar el mtodo de
factores de forma
entrada, cambiar la orientacin de la pantalla o apagar y encender
todo, y la aplicacin de la Tienda Windows deber moverse, cambiar
y reaccionar con ellos.
Windows se usa en todo el mundo, en una variedad de diferentes
mercados con clientes que varan en cultura, regin geogrfica o
Diseo para un
idioma. Sigue estas directrices cuando disees la aplicacin y podrs
mercado global
adaptarla ms adelante para otras culturas, regiones, idiomas y el
mercado global.
Mientras diseas tu aplicacin, recuerda siempre que los usuarios
tienen una amplia variedad de capacidades, discapacidades y
preferencias. Seguir los principios de un diseo accesible desde el
comienzo garantiza que la aplicacin sea accesible para el pblico
Diseo de
ms amplio posible y hace que ms clientes se sientan atrados por tu
accesibilidad
aplicacin en la Tienda Windows.
Evaluacin de la Describe un marco que permite medir y mejorar el diseo de la

usabilidad
experiencia de usuario para la aplicacin de la Tienda Windows.
Planear para la rentabilidad

(aplicaciones de la Tienda Windows)
(Windows)
Este tema an no ha recibido ninguna valoracin - Valorar este tema
Las aplicaciones de la Tienda Windows te ofrecen distintas maneras de amortizar el
duro trabajo que has invertido en desarrollar aplicaciones excepcionales.
Nota Windows 8 solo admite aplicaciones gratuitas y ofertas desde la aplicacin
gratuitas. Admite perodos de prueba y ofertas en la aplicacin, as que puedes usar
estas caractersticas de prueba en tu aplicacin aunque sea gratuita. Hasta que no ests
registrado como un desarrollador de la Tienda Windows, solo podrs probar estas
caractersticas en tu equipo local.
Versiones de prueba, de pago y mixtas

Puedes hacer que tus aplicaciones de la Tienda Windows figuren en la Tienda Windows,
de modo que tus clientes deban pagar por ella para poder usarla (una aplicacin de pago
con funcionalidad completa) o bien puedan probarla gratis durante un perodo (perodo
de prueba gratuito). Un usuario puede actualizar de una versin de prueba de tu
aplicacin a una versin completa comprada desde la propia aplicacin o desde la
Tienda Windows.
La License API proporciona la interfaz que te permite comprobar el estado de la
licencia de la aplicacin y el estado de las compras realizadas a travs de la aplicacin.
Tambin puedes usarla para comprobar las fechas de expiracin de las compras dentro
de la aplicacin, y permitir que los usuarios realicen otras compras desde la aplicacin.
Para obtener ms informacin sobre cmo planear y disear estos tipos de aplicaciones,
consulta:
Elegir tu modelo comercial

Cmo ven tu aplicacin los clientes en la Tienda Windows
Ventas en la aplicacin
Las ventas en la aplicacin te permiten vender contenido, otras aplicaciones o nuevas
funcionalidades de la aplicacin, como el desbloqueo del nivel siguiente de un juego
desde la aplicacin. Puedes incluir opciones de compra en cualquier parte de la
aplicacin para que resulte ms cmodo para los clientes.
Para obtener ms informacin sobre cmo planear y disear ventas desde tu aplicacin,
consulta La experiencia de compra desde la aplicacin para un cliente.
Publicidad en la aplicacin
Puedes vender e incluir anuncios en tu aplicacin. S cuidadoso para designar el lugar
donde deseas ubicar la publicidad para que la experiencia del usuario no se vea afectada.
Asegrate tambin de que los anuncios proporcionados por el servicio publicitario
cumplen con los Requisitos de certificacin para una aplicacin para Windows 8 antes
de incluirlos en la aplicacin.
Para obtener ms informacin acerca de cmo disear tu aplicacin para que incluya
publicidad, consulta Directrices de publicidad.
Temas relacionados
Venta de aplicaciones
Planear para calidad y certificacin

(Windows)
La calidad de las aplicaciones de la Tienda Windows se evala mediante varios

procesos de prueba. En este tema se describe la prueba que lleva a cabo el Kit para la
certificacin de aplicaciones en Windows. Si diseas la aplicacin para que pase estas
pruebas, mejorars la calidad y la confiabilidad. Tambin conseguirs la certificacin de
almacenamiento de manera ms fcil.
El Kit para la certificacin de aplicaciones en Windows pone a prueba las categoras
siguientes. Despus de probar la aplicacin con el Kit para la certificacin de
aplicaciones en Windows, obtendrs un informe detallado de la aplicacin. Como sabes
de antemano qu prueba el Kit para la certificacin de aplicaciones en Windows, puedes
disear tu aplicacin teniendo en cuenta esos aspectos.
Errores de la aplicacin
La aplicacin debe bloquearse ni colgarse. Los errores de la aplicacin, como bloqueos
o cuelgues interrumpen y frustran a los clientes. Eliminar dichos errores mejora la
estabilidad y la confiabilidad de la aplicacin y en general, ofrece a los clientes una
mejor experiencia.
Manifiesto de la aplicacin
El manifiesto de la aplicacin debe contener todos los atributos necesarios.
Caractersticas de seguridad de Windows

La aplicacin debe usar caractersticas de seguridad de Windows.
API de la plataforma compatible

La aplicacin solo debe usar las API del Kit de desarrollo de software de Windows
(Windows SDK) para Windows 8.
Rendimiento de inicio
La aplicacin debe contar con una experiencia de inicio rpida y al mismo tiempo
consumir una cantidad razonable de recursos del sistema (CPU, archivo, E/S, memoria,
etc.) para habilitar una conmutacin rpida y multitarea entre aplicaciones que an no se
abrieron.
Rendimiento de suspensin
La aplicacin debe contar con una experiencia de suspensin rpida y al mismo tiempo
consumir una cantidad razonable de recursos del sistema (CPU, archivo, E/S, memoria,
etc.) y asegurarse de que los recursos se liberen eficientemente.
Validacin de recursos del paquete de la aplicaci

El manifiesto de la aplicacin debe contar con recursos vlidos que se definen en el
archivo resources.pri, como se explica en el esquema del manifiesto del paquete de la
aplicacin.
Comprobacin de la versin de .NET

La aplicacin debe usar .NET 4.5 o una versin posterior.
Diseo para diferentes factores de forma

(Windows)
En este artculo
Interacciones tctiles, de lpiz, de mouse y de teclado

Funcionalidades del dispositivo
Vistas mltiples y fluidas de la aplicacin
Escala grfica integrada
Datos de movilidad
Las aplicaciones de la Tienda Windows se encuentran en casa en equipos de escritorio,

equipos porttiles y tabletas tctiles. Necesitas disear las aplicaciones de la Tienda
Windows para que se ajusten como un guante a los distintos factores de forma. Los
usuarios pueden alternar entre diferentes dispositivos, cambiar el mtodo de entrada,
cambiar la orientacin de la pantalla o apagar y encender todo, y la aplicacin de la
Tienda Windows deber moverse, cambiar y reaccionar con ellos.
Interacciones tctiles, de lpiz, de mouse y de teclado

Si diseas una aplicacin para interacciones tctiles, obtienes soporte para interacciones
de lpiz, mouse y teclado de forma gratuita. Los usuarios pueden pasar de un mtodo de
entrada a otro sin perder ni un pice de la experiencia de la aplicacin. Deseas conectar
el teclado a una tableta? No hay ningn problema. La aplicacin responde de manera
coherente y predecible a las elecciones de los usuarios.
Para obtener ms informacin, consulta Diseo de interaccin tcil y Responder a la
interaccin del usuario.
Funcionalidades del dispositivo

Las grandes aplicaciones aprovechan al mximo los dispositivos en los que se ejecutan.
Windows 8 ofrece compatibilidad integrada para estas funcionalidades de dispositivos:
Acelermetros y otros sensores Hoy en da, los dispositivos vienen con

diversos sensores. La aplicacin puede atenuar o iluminar la pantalla segn la
luz ambiental, cambiar la distribucin de la interfaz de usuario si el usuario gira
la pantalla o reaccionar a un movimiento fsico. Obtn ms informacin sobre
los sensores.
Ubicacin geogrfica Usa la informacin sobre la ubicacin geogrfica de
datos web estndar o de sensores de ubicacin geogrfica para que los usuarios
puedan desplazarse, encontrar su posicin en un mapa u obtener avisos sobre
personas, actividades o destinos cercanos. Obtn ms informacin sobre la
ubicacin geogrfica.
Cmaras Conecta a los usuarios con sus cmaras integradas o conectadas para
conversar, realizar conferencias, grabar vdeo blogs, tomar fotografas del perfil,
documentar hechos del mundo que los rodea o cualquier otra actividad para la
que destaque la aplicacin.
Gestos de proximidad Permite que los usuarios conecten dispositivos
tocndolos fsicamente al mismo tiempo, para mejorar las experiencias en las
que esperas que haya varios usuarios fsicamente prximos (juegos
multijugador). Obtn ms informacin sobre los gestos de proximidad.
Cuando planees las caractersticas de tu aplicacin, ten en cuenta los dispositivos en los
que podra ejecutarse. Se necesita alguna funcionalidad del dispositivo para que la
aplicacin funcione correctamente? O puedes arreglrtelas sin ellas? En el manifiesto
de la aplicacin debes declarar qu funcionalidades admite tu aplicacin, pero en la
aplicacin misma puedes crear reservas para capacidades opcionales. Por ejemplo,
supongamos que una aplicacin de mapas para viajes permite a los usuarios hacer un
seguimiento de sus viajes en el mapa, etiquetar sitios, incluir comentarios de bitcora,
enviarlos a los medios sociales y agregar fotografas o vdeos del viaje. La ubicacin
geogrfica sera una funcionalidad obligatoria, pero la compatibilidad con la cmara
podra ser opcional. Si el dispositivo no tiene cmara, los usuarios podran cargar vdeos
o fotografas tomadas en otro dispositivo. Las grandes aplicaciones cubren todas las
opciones.
Vistas mltiples y fluidas de la aplicacin

Con Windows 8, los usuarios estn al mando. Deseas que la interfaz de usuario de la
aplicacin destaque en cualquier dispositivo, con cualquier modo de entrada, en
cualquier orientacin, en cualquier circunstancia en la que el usuario decida usarla.
Si diseas la aplicacin con vistas fluidas, la interfaz de usuario de la aplicacin se
redistribuye naturalmente en respuesta a los cambios de la orientacin del monitor del
usuario, su dispositivo mvil o el mtodo de entrada. Windows administra estos
comportamientos por ti.
Horizontal Disea primero la vista horizontal para que tu aplicacin se vea

bien en todos los factores de forma.
Vertical Pero recuerda que algunos dispositivos giran! Por lo tanto, optimiza
el diseo del contenido en vista vertical y conserva la funcionalidad siempre que
sea posible.
La clave para obtener una buena apariencia en estas vistas (y tambin en las vistas
acoplada, rellena, de pantalla completa, de teclado tctil y de panel de escritura a mano)
es definir diseos para la aplicacin en cada vista. Si planeas con anticipacin cada vista,
la interfaz de usuario de tu aplicacin se redistribuye automticamente al activarse una
vista diferente en el dispositivo.
Para obtener ms informacin, consulta el tema sobre cmo elegir un diseo y sobre las
directrices para diseos.
Escala grfica integrada

Si los usuarios puede acceder a la aplicacin en varios factores de forma, esto significa
que tienes que disear una UI diferente para cada posible tamao de pantalla con el que
trabaje Windows? Las posibilidades son muchsimas! La respuesta es: no
necesariamente. Escala integrada significa que la aplicacin y el contenido siempre se
ven genial, ya sea en un dispositivo pequeo de 7" o en un monitor grande de 30".
Simplemente tienes que usar un diseo fluido y asegurarte de que los grficos de la
aplicacin se vean bien al ampliarse.
Para obtener ms informacin, consulta el tema sobre directrices para escala.
Datos de movilidad
Qu sucede si los usuarios pasan del equipo de escritorio de la oficina a la tableta tctil
de casa? Los archivos, el estado y las preferencias de la aplicacin van con ellos.
Pueden retomar directamente desde donde los dejaron, en diferentes mquinas y
sesiones de usuario.
Obtn ms informacin sobre movilidad y cmo administrar datos de la aplicacin.
Diseo para un mercado global

(Windows)
Windows se usa en todo el mundo, en una variedad de diferentes mercados con clientes
que varan en cultura, regin geogrfica o idioma. Sigue estas directrices cuando disees
la aplicacin y podrs adaptarla ms adelante para otras culturas, regiones, idiomas y el
mercado global.
Introduccin a la disponibilidad mundial

Muchos desarrolladores de aplicaciones crean sus aplicaciones teniendo en cuenta
nicamente su propio idioma y cultura. Si la aplicacin comienza a expandirse a otros
idiomas y mercados, adaptar la aplicacin puede resultar difcil. Se podran especificar
recursos de texto e imagen directamente dentro del cdigo, lo cual dificulta la tarea de
traduccin y la preparacin para otras culturas. Este proceso se puede simplificar
teniendo en cuenta ciertas cuestiones cuando se disea la aplicacin por primera vez.
Directrices para el diseo de aplicaciones

stas son directrices a tener en cuenta mientras diseas la aplicacin para un mercado
global.
Aumenta el espacio horizontal y vertical de etiquetas y texto.

Algunos idiomas requieren un diseo con espacio extra para texto ms extenso
que el que se necesita para en espaol. Evita elementos de ancho fijo y permite
ajustar el texto si es posible. Algunos caracteres que suelen verse en otros
idiomas incluyen marcas por encima y por debajo de lo que habitualmente se usa
en ingls (como o ). Usa los tamaos de fuente y las alturas de lnea estndar
para ofrecer espacio vertical adecuado. Ten en cuenta que es posible que para las
fuentes de otros idiomas se requieran tamaos de fuente mnimos ms grandes
para que sean legibles.
Usa etiquetas y texto forma coherente.

Crea una sola cadena de texto para transmitir un concepto que se pueda usar en
varias ubicaciones de la aplicacin, como una instruccin para el usuario o un
mensaje de error. Colocar esa cadena en un archivo de recursos hace que ste se
traduzca una sola vez y reduce variaciones en su presentacin. Para obtener ms
informacin sobre la creacin de archivos de recursos, consulta el tema sobre
definicin de recursos de la aplicacin.
Evita expresiones familiares y metforas.

Dichos conceptos habitualmente son especficos para un solo idioma y pueden
ser especficos para una demografa dentro de un idioma. Si adoptas una voz o
tono informal, asegrate de ofrecerle una explicacin a los traductores al
respecto. Para aprender cmo comentar las cadenas, consulta el tema sobre
definicin de recursos de la aplicacin.
No uses una jerga tcnica, abreviaturas o acrnimos.

Son difciles de traducir y no son tiles para las audiencias no tcnicas.
Evita texto o imgenes especficos de una cultura.

Puede resultar difcil generar versiones traducidas de las imgenes que pueden
aumentar el tamao de la aplicacin y ralentizar las velocidades de descarga.
Evita texto e imgenes que deban traducirse y evita imgenes especficas de la
cultura como los buzones de correo, que no son iguales en todo el mundo. Evita
imgenes con contenido religioso, poltico o sexista. La visualizacin de carne,
partes del cuerpo o gestos con las manos tambin pueden ser un tema delicado.
Muestra valores numricos, nombres y direcciones correctamente para los

mercados globales.
Elementos como las fechas, horarios, nmeros, calendarios, monedas, nmeros
telefnicos, unidades de medida y tamaos de papel se pueden mostrar de
diferente forma segn la cultura. El orden en que se muestran los apellidos y los
nombres de pila, y el formato de las direcciones tambin pueden diferir. Usa
presentaciones estndar de fecha, hora y nmeros. Usa controles de selector de
fecha y hora estndar. Usa informacin de direccin estndar.
Ten presente cundo usar color para transmitir significado.

S cuidadoso al usar color para transmitir significado. Es posible que expertos
en cultura deban repasar las opciones de color para personalizarlas. Transmite
siempre la misma informacin con otros medios que no sean el color, como
tamao, forma, o una etiqueta para los lectores daltnicos.
Diseo de accesibilidad (aplicaciones de

la Tienda Windows) (Windows)
Mientras diseas tu aplicacin, recuerda siempre que los usuarios tienen una amplia
variedad de capacidades, discapacidades y preferencias. Seguir los principios de un
diseo accesible desde el comienzo garantiza que la aplicacin sea accesible para el
pblico ms amplio posible y hace que ms clientes se sientan atrados por tu aplicacin
en la Tienda Windows.
Escenarios de accesibilidad
Disear la aplicacin teniendo en cuenta la accesibilidad ayuda a garantizar que
funcione correctamente en los siguientes escenarios de accesibilidad.
Lectura de pantalla: Los usuarios que sean ciegos o tengan discapacidades

visuales dependen de los lectores de pantalla que los ayudan a crear y mantener
un modelo mental de la interfaz de usuario de la aplicacin. Or informacin
sobre la interfaz de usuario, incluidos los nombres de sus elementos, ayuda a los
usuarios a comprender el contenido de la interfaz de usuario y a invocar la
funcionalidad disponible.
Para admitir la lectura de pantalla, la aplicacin debe ofrecer informacin
correcta y suficiente sobre los elementos de la interfaz de usuario, incluidos el
nombre, el rol, la descripcin, el estado, la posicin, etc. Obtn ms informacin
sobre cmo exponer informacin sobre los elementos de la interfaz de usuario.
Accesibilidad de teclado: el teclado forma parte integral del uso del lector de
pantalla y tambin es importante para los usuarios que prefieren el teclado como
una forma ms eficaz de interactuar con la aplicacin. Una aplicacin accesible
permite a los usuarios acceder a todos los elementos interactivos de la interfaz
de usuario nicamente a travs del teclado, lo que les permite tambin:
o Navegar por la aplicacin mediante las teclas de flecha y de tabulacin.
o Activar elementos de la interfaz de usuario mediante la barra espaciadora
y la tecla Entrar.
o Acceder a los comandos y los controles mediante los accesos directos de
teclado.
Hay disponible un teclado en pantalla para los sistemas que no incluyen un

teclado fsico o para los usuarios cuyos problemas de movilidad le impidan usar
los tradicionales dispositivos de entrada fsicos.
Obtn ms informacin sobre la implementacin de accesibilidad de teclado.
Experiencia visual accesible: los usuarios con discapacidades visuales

necesitan que el texto se muestre con un contraste alto. Tambin necesitan una
interfaz de usuario que se vean bien en modo de contraste alto y se ajuste a la
escala correcta al seleccionar Aumentar el tamao de todo lo que ves en la
pantalla en el panel de control Accesibilidad. Si se usa color para transmitir
informacin, los usuarios daltnicos necesitan alternativas al color como texto,
forma e iconos. Obtn ms informacin sobre compatibilidad con alto contraste
y cumplimiento de los requisitos de texto accesible..
Compatibilidad para accesibilidad en la plataforma de desarrollo

La plataforma de desarrollo de Windows 8 admite accesibilidad en todas las fases del
ciclo de desarrollo:
Creacin: el cdigo que se genera en Microsoft Visual Studio Express 2012

para las plantillas de aplicacin para Windows 8 incluye informacin sobre
accesibilidad.
Codificacin: la plataforma de desarrollo incluye la siguiente compatibilidad
para accesibilidad durante la fase de codificacin.
o Microsoft IntelliSense en Visual Studio Express 2012 para Windows 8
incluye informacin sobre accesibilidad.
o Los controles incluidos en la plataforma Windows 8 tienen
compatibilidad integrada para accesibilidad.
o La documentacin del Centro de desarrollo de Windows incluye
directrices para accesibilidad y ejemplos de aplicaciones.
Pruebas: el Kit de desarrollo de software de Windows (Windows SDK) para
Windows 8 incluye herramientas de prueba de accesibilidad. Para obtener ms
informacin, consulta el tema sobre cmo probar la accesibilidad de una
aplicacin.
Venta: puedes marcar tu aplicacin como accesible cuando la publiques en la
Tienda Windows para que los usuarios puedan descubrir tu aplicacin cuando
usen el filtro Accesibilidad mientras examinan la Tienda. Para obtener ms
informacin, consulta cmo declarar tu aplicacin como accesible en la Tienda
Windows.
Usa los controles de la plataforma

Las etiquetas HTML estndar, los controles JavaScript y los controles XAML que se
incluyen en la plataforma Windows 8 cuentan con compatibilidad integrada para
accesibilidad. Con la plataforma HTML y los controles, gran parte de la compatibilidad
para accesibilidad la puedes obtener de forma "gratuita". Por ejemplo, el control de
clasificacin es completamente accesible sin ningn trabajo adicional, mientras que el
control ListView solo requiere un nombre accesible para el elemento de la lista
principal el resto de la compatibilidad para accesibilidad est integrada. Para obtener

una lista de controles de plataforma, consulta Lista de controles.
Proporciona informacin bsica de accesibilidad

Si bien la mayor parte de la compatibilidad para accesibilidad se obtiene de forma
"gratuita", es necesario establecer un nombre accesible para la mayora de los controles
y del contenido grfico como imgenes, grficos y reas de dibujo. Los lectores de
pantalla leen el nombre accesible para ayudar al usuario a comprender los controles y el
contenido. Para los elementos con texto implcito como texto esttico, botones y
vnculos, el sistema utiliza automticamente el texto implcito como un nombre
accesible. Obtn ms informacin sobre los nombres accesibles.
Tambin debes proporcionar informacin adicional sobre accesibilidad para los
elementos de la interfaz de usuario con contenido dinmico, como una regin activa en
una aplicacin de la Tienda Windows con JavaScript con HTML. La informacin de
accesibilidad adicional permite que los lectores de pantalla anuncien las modificaciones
que se realizan en el contenido. Para ofrecer informacin de accesibilidad para una
regin activa, establece el atributo aria-live de los elementos que tienen contenido
dinmico. Obtn informacin sobre cmo hacer las regiones activas accesibles.
Para garantizar que la aplicacin sea visualmente accesible, proporciona imgenes de
alto contraste y configura manualmente los colores para cumplir con los requisitos de
contraste y para personas daltnicas. Obtn ms informacin sobre compatibilidad de
alto contraste.
Crea controles personalizados accesibles

Si usas un control personalizado, debes proporcionar toda la informacin de
accesibilidad bsica del control, incluido el nombre accesible, el rol, el estado, el valor,
etc. Tambin debes asegurarte de que se pueda acceder por completo al control a travs
del teclado y de que la UI cumpla con los requisitos de accesibilidad visual.
Por ejemplo, supongamos que incluyes un elemento div que representa un elemento
interactivo personalizado; es decir, que controla el evento onclick. Debes:
Establecer un nombre accesible para el elemento div.

Establecer el atributo role en el rol interactivo Aplicaciones de Internet
enriquecidas accesibles (ARIA) correspondiente, por ejemplo, "botn.
Establecer el atributo tabindex para que incluya el elemento en el orden de
tabulacin.
Agregar controladores de eventos de teclado para admitir la activacin por
teclado; es decir, el equivalente para teclado de un controlador del evento
onclick.
Para obtener ms informacin acerca de la exposicin de elementos de interfaz de

usuario personalizados para accesibilidad, consulta el tema sobre aplicaciones de
Internet enriquecidas accesibles (ARIA).
Evitar usar Canvas

El elemento HTML5 canvas no es compatible con la accesibilidad. Debido a que no
ofrece ninguna forma de exponer la informacin de accesibilidad para su contenido,
evita usar canvas a menos que sea absolutamente necesario. Si usas canvas, trtalo
como un elemento de la UI personalizado.
Temas relacionados
Creacin de una aplicacin de la Tienda Windows con JavaScript accesible
Crear una aplicacin accesible (C#/C++/VB)
Muestra de ARIA
Evaluar la facilidad de uso de las

aplicaciones de la Tienda Windows
(Windows)
Resumen
Describe un marco que permite medir y mejorar el diseo de la experiencia de

usuario para la aplicacin de la Tienda Windows.
En este artculo
Importancia de evaluar la experiencia del usuario para tu aplicacin

Medir el xito potencial del diseo
Etapa 1: Autoevaluacin
Plantilla de evaluacin de aplicaciones: autoevaluacin
Etapa 2: Simulacin en voz alta
Plantilla de evaluacin de aplicaciones: simulacin en voz alta
Evaluacin del deseo y la conexin emocional
Evaluacin de la marca
Panel de experiencia del usuario
Temas relacionados
Importancia de evaluar la experiencia del usuario para tu aplicacin

Cuando mejoras el diseo de la experiencia del usuario de tu aplicacin:
A la gente le resulta ms fcil usar tu aplicacin.

Ms gente considerar que tu aplicacin es valiosa.
A ms gente le gustar tu aplicacin y las caractersticas que ofrece.
Ms gente descargar y usar la aplicacin.
Obtendrs ms ingresos de tu aplicacin.
Evaluar el diseo de la aplicacin te aporta la confianza de que el producto que vas a

enviar es el que te habas propuesto, que su experiencia de usuario es excelente y que
los usuarios la considerarn til, fcil de usar y atractiva.
Medir el xito potencial del diseo

Para comenzar, define los objetivos de la aplicacin. Los objetivos te ayudan a
simplificar el proceso de creacin de la aplicacin, y pueden ayudarte a evaluar el xito
de la aplicacin. Para obtener ms informacin sobre cmo fijar objetivos, consulta
Planear aplicaciones de la Tienda Windows.
Existen varias herramientas que puedes usar para evaluar el xito de tu aplicacin.
Cuntas de estas herramientas usars depende de la cantidad de tiempo y de los recursos
que puedas dedicar al diseo de la experiencia del usuario de la aplicacin. Puedes usar
tres etapas de evaluacin, en funcin del tiempo y los recursos de los que dispongas.
Tiempo y recursos mnimos: simulacin en voz alta

Ms tiempo y recursos: estudio de usuarios
Despus del envo: iteracin, telemetra, evaluaciones de usuario y comentarios.
Etapa 1: Autoevaluacin
Este es el primer paso para evaluar la experiencia del usuario de la
aplicacin y se basa en los objetivos que definiste anteriormente. Este
Introduccin mtodo de evaluacin tiene por finalidad garantizar que el diseo est en
lnea con lo que te propusiste hacer. Este paso se centra en la experiencia
del usuario general de la aplicacin.
15-30 minutos. El tiempo depende de la aplicacin y del nmero de
Tiempo
situaciones clave de la aplicacin.
Puedes usar esta evaluacin durante la fase conceptual del diseo de la
Cundo aplicacin. Tambin puedes usarla en cualquier momento del desarrollo
cuando desees comprobar cmo avanzan tus planes originales.
Para esta evaluacin se necesita a uno o varios de los diseadores o
Quin
desarrolladores de la aplicacin.
Enumera las principales experiencias o tareas que deseas que la
aplicacin ofrezca a los usuarios. Por ejemplo, en una aplicacin
de sopa de letras, una tarea podra ser escribir una palabra y
Cmo
enviarla.
Escribe esta lista empezando por las tareas ms importantes y

terminando por las menos importantes.
Termina la lista de tareas por orden de prioridad para la
aplicacin. A medida avanzas por las tareas, consulta la plantilla
de planeacin que creaste cuando enumeraste los objetivos de la
experiencia de usuario de la aplicacin. Crees que la aplicacin
cumple los objetivos que te propusiste en un principio?
Si no es as, en qu estado se encuentra la aplicacin? Qu hace
falta para asegurarte de que se cumplan los objetivos de la
aplicacin?
Usa esta plantilla de evaluacin de aplicaciones para anotar los
resultados obtenidos en la autoevaluacin.
Describe las valoraciones de la experiencia de este modo:
Supera las expectativas Esta valoracin indica que la

experiencia del usuario supera tus objetivos.
Segn lo previsto Usa esta valoracin si todas las experiencias o
tareas estn cumpliendo las expectativas del usuario y no hay
ningn problema.
No cumple las expectativas del usuario Usa esta valoracin
cuando la experiencia del usuario presente uno o varios problemas
que, si no se resuelven, podran afectar considerablemente a la
experiencia del usuario.
Problemas con la planeacin del producto Usa esta valoracin
cuando haya varios problemas de planeacin o cuando sea
necesario realizar revisiones importantes al marco general del
diseo.
Plantilla de evaluacin de aplicaciones: autoevaluacin

La siguiente tabla es una plantilla de evaluacin de aplicaciones que contiene resultados
de una autoevaluacin de ejemplo.
Indicador de
xito
Objetivos
Qu falta
Estado
para
Comentarios Problema
(Fecha)
cumplir los
objetivos?
La aplicacin
consigue ofrecer
Puntos fuertes:
a los usuarios
Cules son los
una experiencia
puntos fuertes
entretenida y
de la aplicacin?
Segn lo
divertida, y la
Cul debe ser
previsto
posibilidad de
el foco de los
competir con
elementos
amigos al
visuales?
deletrear
palabras.
Facilidad de
Los usuarios
uso: Qu
deberan saber
deberan saber,
Problemas
cmo desplazarse
conocer o
con la
por el juego,
mejorar los
planeacin
escribir palabras
usuarios con la
y enviarlas.
aplicacin?
Utilidad: Qu
quieres que los
Los usuarios
usuarios valoren
deberan valorar
de la aplicacin?
Segn lo
esta aplicacin
Qu
previsto
como divertida y
comentarios te
entretenida.
gustara recibir
y cules no?
Cuando la gente
Atractivos:
describa la
Qu partes de aplicacin, nos
la aplicacin
gustara ver
diseaste para palabras como: Segn lo
hacerla ms
til, agradable, previsto
atractiva o
me mantiene en
popular entre los contacto con mis
usuarios?
amigos y mi
familia.
n/a
n/a
Los usuarios
no saben
pasar de un
amigo a otro
cuando
juegan a
deletrear.
Hay que
redisear la
interfaz de
usuario.
Etapa 2: Simulacin en voz alta

El mtodo de simulacin en voz alta consiste en que los usuarios realicen
tareas definidas en la aplicacin y las comenten al mismo tiempo. Este
mtodo presenta una clara ventaja con respecto a la autoevaluacin, ya
Introduccin que los comentarios que se reciben provienen de usuarios reales de la
aplicacin. El aspecto ms importante de este mtodo es que los usuarios
comentarn en voz alta mientras realizan las principales tareas que hayas
establecido.
~30-60 minutos. El tiempo depende de la aplicacin y del nmero de
Tiempo
situaciones clave de la aplicacin.
Puedes usar esta evaluacin durante la fase conceptual del diseo de la
aplicacin, mediante el uso de tramas. Tambin puedes usarla en
Cundo
cualquier momento del desarrollo, cuando desees comprobar cmo
avanzan tus planes originales.
Para esta evaluacin se necesitan uno o varios usuarios de la aplicacin
que hayas identificado como el pblico de destino. Para definir el pblico
de destino, hazte preguntas como:
Quin
Quin usar la aplicacin?

Qu edad tiene el pblico?
Qu identificadores clave hacen que este pblico sea nico?
Enumera las principales experiencias o tareas que deseas que la

aplicacin ofrezca a los usuarios. Por ejemplo, en una aplicacin
de sopa de letras, una tarea podra ser escribir una palabra y
enviarla.
Escribe esta lista empezando por las tareas ms importantes y
terminando por las menos importantes.
Haz que cada usuario complete la lista de tareas por orden de
prioridad en la aplicacin. Recuerda a los usuarios hablar en voz
alta mientras completan cada tarea. Consulta los objetivos que
anotaste en la plantilla de planeacin mientras los usuarios
evalan la aplicacin. Hazte preguntas como:
o Crees que la aplicacin cumple los objetivos que me
propuse en un principio?
o Los usuarios pueden completar cada tarea?
o A qu problemas se enfrentan cuando realizan las tareas?
o Cmo es su experiencia al realizar las tareas comparada
con los objetivos para la aplicacin que me propuse en un
principio?
o En qu estado se encuentra la aplicacin y qu hace falta
para asegurarme de que se cumplan los objetivos de la
aplicacin?
Usa esta plantilla de evaluacin de aplicaciones para anotar los
resultados obtenidos en la simulacin en voz alta.
Cmo
Describe las valoraciones de la experiencia de este modo:
Supera las expectativas Esta valoracin indica que la

experiencia del usuario supera tus objetivos.
Segn lo previsto Usa esta valoracin si todas las experiencias o
tareas estn cumpliendo las expectativas del usuario y no hay
ningn problema.
No cumple las expectativas del usuario Usa esta valoracin
cuando la experiencia del usuario presente uno o varios problemas
que, si no se resuelven, podran afectar considerablemente a la
experiencia del usuario.
Problemas con la planeacin del producto Usa esta valoracin
cuando haya varios problemas de planeacin o cuando sea
necesario realizar revisiones importantes al marco general del
diseo.
Plantilla de evaluacin de aplicaciones: simulacin en voz alta

La siguiente tabla es una plantilla de evaluacin de aplicaciones que contiene resultados
de ejemplo de una simulacin en voz alta.
Indicador de
xito
Puntos fuertes:
Cules son
los puntos
fuertes de la
aplicacin?
Cul debera
ser el punto de
foco de los
elementos
visuales?
Facilidad de
uso: Qu
deberan saber,
conocer o
mejorar los
usuarios con la
aplicacin?
Objetivos
Estado
(Fecha)
Mi aplicacin
destaca a la hora
de proporcionar
a las personas
una experiencia
Segn lo
divertida y
previsto
entretenida
donde compiten
con sus amigos
deletreando
letras.
Los usuarios
deberan saber
cmo
Problemas
desplazarse por con la
el juego, escribir planeacin
palabras y
enviarlas.
Comentarios
Problema
Los dos
usuarios
evaluados
pudieron ver
n/a
claramente las
intenciones de
la aplicacin.
Los dos
usuarios
evaluados
tuvieron
problemas
para
desplazarse y
para escribir
palabras.
Qu es
necesario
para
alcanzar
los
objetivos?
n/a
Hay que
redisear la
interfaz de
usuario.
Utilidad: Qu
quieres que los
usuarios
valoren de la
aplicacin?
Qu
comentarios te
gustara recibir
y cules no?
Los usuarios
Segn lo
deberan valorar previsto
esta aplicacin
como divertida y
entretenida.
Cuando la gente
Atractivos:
describa la
Qu partes de aplicacin, nos
la aplicacin gustara ver
diseaste para palabras como: Segn lo
hacerla ms
til, agradable, previsto
atractiva o
me mantiene en
popular entre contacto con mis
los usuarios? amigos y mi
familia
Ambos se
divirtieron con
la aplicacin.
Ambos
escribieron
palabras que
coincidan
directamente
con nuestros
objetivos.
Evaluacin del deseo y la conexin emocional

Windows 8 se dise mediante un kit de herramientas que permite conocer las
respuestas sobre las experiencias de los participantes de la investigacin. Para ello se
emplean diferenciales semnticos o palabras opuestas, como "claro" frente a "confuso".
El kit de herramientas acumula todas las valoraciones de un determinado estudio y
permite realizar comparaciones entre varios estudios. Esta herramienta ayuda a conocer
la intensidad de los sentimientos en respuesta a las experiencias. Se entrevista a los
participantes para conocer mejor qu partes del producto, en combinacin con su
perspectiva personal, contribuyeron a formar estas respuestas.
Esta es una lista de posibles palabras que los participantes de una investigacin pueden
usar para describir su experiencia. Elige tres trminos que desearas que dijeran los
usuarios y salos como referencia para los trminos que esperas escuchar cuando los
usuarios describan su experiencia con la aplicacin.
Estoy encantado de usar esta aplicacin

Estoy seguro de que puedo alcanzar todos mis objetivos con esta aplicacin
Quiero incluir esta aplicacin en actividades importantes o habituales
Esta aplicacin me hace sentir ms satisfecho o feliz
Estoy orgulloso de usar esta aplicacin
til
Funcional
Rpida
Esencial
Agradable
Compatible
Me mantiene al da y en contacto con personas
Me conecta con dispositivos y entornos
Funciona con mis necesidades individuales
Me refleja a m o a mis intereses

Atractiva visualmente
De primera calidad
Coherente
Cmoda
Limpia
Natural
Interesante
No estoy ilusionado por usar esta aplicacin
No estoy seguro de que pueda alcanzar todos mis objetivos con esta aplicacin
No quiero incluir esta aplicacin en actividades importantes ni habituales
Esta aplicacin me hace sentir insatisfecho o frustrado
No estoy orgulloso de usar esta aplicacin
No es til
No funciona
Lenta
No es esencial
No es agradable
Incompatible
No me mantiene al da ni en contacto con personas
No me conecta con dispositivos y entornos
No funciona para mis necesidades individuales
No me refleja ni a m ni a mis intereses
No es atractiva
Incoherente
Intimidante
Catica
Poco natural
Poco interesante
Evaluacin de la marca
Al evaluar la marca, Microsoft usa conjuntos de parejas de opuestos que conforman los
atributos de nuestra marca. Por ejemplo, segn las investigaciones, el atributo de marca
Social tiene muchos significados. Si lo definimos con cuatro conjuntos de palabras
conseguimos que los participantes expliquen sus percepciones con mayor detalle. Estos
cuatro ejes nos ayudan a entender hasta qu grado una experiencia concreta es acorde a
la marca:
gil frente a Lenta

Social frente a Solitaria
Segura frente a Vulnerable
Conectada frente a Desconectada
A veces cuando se mide el xito de una experiencia, tratamos unos pocos atributos
especficos para obtener una puntuacin alta en ellos. Otras veces nos centramos en una
experiencia que ofrece una puntuacin alta en cuanto a deseo en los cuatro valores de
marca.
Si ests buscando mtodos para saber si la experiencia de la aplicacin es deseable o
est acorde con la marca, cntrate en qu comentarios te gustara que hicieran los
usuarios novatos y experimentados durante una conversacin con un buen amigo. Es
importante que des prioridad a los elementos ms importantes. La experiencia completa
debera ofrecer emociones positivas. Pero, a veces, una mayor efusividad en una parte
de la experiencia implica una menor respuesta emocional en otra parte. Es importante
que sepas qu es lo que esperas y prestes atencin a los aspectos ms importantes para ti.
Panel de experiencia del usuario

Plantate crear un panel de equipo interno para realizar un seguimiento del modelo de
confianza. El panel de confianza ofrece un portal unificado para que informes del estado
con respecto a los objetivos y reflejes tus prioridades para tus recursos. Asegrate de
que cada escenario que creas tiene unos objetivos claramente definidos. Asegrate de
que el equipo de escenario use estos objetivos como herramienta de toma de decisiones.
Indica el progreso con respecto a estos objetivos y realiza un seguimiento: expresa tu
nivel de confianza Desarrolla tu idea de qu convierte una experiencia de usuario en
"excepcional y de xito".
La confianza en el escenario se basa en si ofreces un buen escenario para los usuarios en
todos estos aspectos. Es posible que algunos indicadores tengan ms prioridad en
algunos escenarios. Por ejemplo, es posible que para algunos escenarios no sea
necesario comprender un modelo.
Tu confianza ser la mxima cuando los indicadores de facilidad de uso estndar, como
xito, deteccin y finalizacin de tareas, se correspondan con otros canales de datos,
como comentarios del campo, instrumentos, encuestas y grupos de noticias.
Temas relacionados
Directrices de diseo para aplicaciones

de la Tienda Windows (Windows)
Diseo de navegacin para aplicaciones de la Tienda Windows
Diseo de comandos para aplicaciones de la Tienda Windows
Diseo de interaccin tcil (aplicaciones de la Tienda Windows)
Directrices de publicidad
Personalizacin de marca de las aplicaciones de la Tienda Windows
ndice de las directrices sobre la experiencia del usuario para aplicaciones de la Tienda
Windows
Diseos de navegacin
Cmo organizo el contenido de mi

aplicacin para que los usuarios se muevan
fcilmente de una pgina a otra?
Qu comandos y otros elementos de interfaz
de usuario puedo usar para que los usuarios
sepan moverse?
Diseos de comandos
En qu lugar del Canvas de la aplicacin

debo colocar los comandos comunes, como
copiar y pegar?
Qu comandos van en la barra de la
aplicacin y cules en los accesos?
Diseos de interaccin tctil
Qu gestos o interacciones tctiles debo

usar en mis aplicaciones de la Tienda
Windows?
De qu tamao tienen que ser los objetivos
tctiles y dnde debo situarlos en la pantalla?
Qu directrices debo seguir para garantizar
una experiencia tctil del usuario
satisfactoria?
Patrones de publicidad
Cmo puedo incluir anuncios sin que afecte

a la experiencia del usuario?
Cules son los requisitos relacionados con
la publicidad?
Cmo puedo elegir un proveedor de
anuncios?
Patrones de personalizacin de marca
Por qu es importante infundir mi marca en

las aplicaciones de la Tienda Windows?
Cmo incorporo mi marca en mis
aplicaciones?
Directrices sobre la experiencia del usuario
Temas relacionados
Escenarios de accesibilidad
Cmo puedo encontrar directrices de diseo

para cada control y caracterstica de
Windows?
Qu directrices debo seguir para garantizar
una experiencia del usuario global
satisfactoria?
Diseo de navegacin para aplicaciones

Windows

En este artculo
Sistema jerrquico
Sistema plano
Anatoma de navegacin
Navegacin deslizando rpidamente desde el borde
Navegar con las etiquetas de la seccin y los mens de encabezado
Navegar con filtros, tablas dinmicas, ordenaciones y vistas
Aprende a organizar el contenido de tu aplicacin de la Tienda Windows

para que los usuarios puedan navegar de manera fcil e intuitiva. Si usas
los diseos de navegacin correctos, podrs limitar los controles que
aparecern constantemente en la pantalla, como las pestaas. Esto
permite que los usuarios se concentren en el contenido actual.
Sistema jerrquico
La mayora de las aplicaciones de la Tienda Windows
de Windows 8 usarn un sistema de navegacin
jerrquico. Este patrn es comn y resultar familiar
para los usuarios, pero incluso se ha mejorado mediante
el diseo de navegacin de concentrador. Este patrn
permite que las aplicaciones de la Tienda Windows sean
rpidas y fluidas y, al mismo tiempo, fciles de usar.
Este diseo est indicado para aplicaciones con grandes
colecciones de contenido o muchas secciones de
contenido diferentes que un usuario puede explorar.
Niveles de la jerarqua
La esencia del diseo de concentrador es la separacin del contenido en distintas

secciones y niveles de detalle.
Pginas de concentrador
Las pginas de concentrador son el punto de acceso
del usuario a la aplicacin. Aqu, el contenido se
muestra en una vista panormica horizontal
enriquecida que ofrece a los usuarios una vista rpida
de lo que es nuevo y est disponible.
El concentrador consta de distintas categoras de
contenido, cada una de las cuales se asigna a las
pginas de seccin de la aplicacin. De cada seccin
debe emerger contenido o funcionalidades. El
concentrador debe ofrecer una amplia variedad visual,
atraer a los usuarios y llevarlos a distintas partes de la
aplicacin.
Pginas de seccin
Las pginas de seccin son el segundo nivel de una
aplicacin. El contenido se puede mostrar de la
manera que mejor represente el escenario y el
contenido que incluye la seccin.
La pgina de seccin consta de elementos
individuales, cada uno de ellos con su propia pgina
de detalles. Las pginas de seccin tambin pueden
aprovechar la agrupacin y el diseo de estilo
panormico.
Pginas de detalles
Las pginas de detalles son el tercer nivel de una
aplicacin. Aqu se muestran los detalles de los
elementos individuales, cuyo formato puede variar
enormemente segn el tipo de contenido en particular.
La pgina de detalles consta de detalles de elemento o
funcionalidades. Las pginas de detalles pueden
contener mucha informacin o un solo objeto, como
una imagen o un vdeo.
Sistema plano
Muchas aplicaciones de la Tienda Windows de
Windows 8 usan un sistema de navegacin plano. Este
diseo suele verse en juegos, exploradores o
aplicaciones de creacin de documentos, donde el
usuario se desplaza por las pginas, las pestaas o los
modos que residen en el mismo nivel jerrquico.
Este diseo est indicado cuando el escenario principal
implica cambios rpidos entre un pequeo nmero de
pginas o pestaas.
Pginas de contenido
La esencia del sistema plano es la separacin del

contenido en diferentes pginas.
Barra de la aplicacin superior
La barra de la aplicacin superior es perfecta para
cambiar entre varios contextos. Entre los ejemplos, se
incluyen pestaas, documentos y sesiones de
mensajera o de juegos.
Esta barra es un elemento transitorio que se encuentra
en la parte superior de la pantalla, y est visible
cuando los usuarios deslizan el dedo rpidamente
desde el borde superior o inferior. Aunque el formato
de los elementos de la barra puede variar, un
tratamiento tpico es el uso de una miniatura simple.
Cambiar
A diferencia del sistema jerrquico, en el sistema
plano no suele haber un botn Atrs permanente ni
una pila de navegacin, por lo que para moverse por
las pginas se usan vnculos directos dentro del
contenido o de la barra de la aplicacin superior.
Puedes elegir incluir otras funcionalidades dentro de
la barra de la aplicacin superior, como agregar un
botn + para crear una nueva pestaa, una pgina o
una sesin.
Anatoma de navegacin
A continuacin se muestra la anatoma de la navegacin entre las secciones de una
aplicacin, entre los diferentes niveles de la jerarqua y dentro de una nica pgina de la
aplicacin.
1. Encabezado y botn Atrs
El encabezado etiqueta la pgina actual y resulta til para que el usuario sepa
dnde se encuentra. El botn Atrs permite al usuario volver rpidamente a
donde estaba.
2. Pgina de concentrador
La pgina de concentrador obtiene informacin de distintas reas de la
aplicacin para mostrarla en una pantalla. Ofrece al usuario una vista
panormica de todo lo que hay disponible en la aplicacin.
3. Secciones de contenido o categoras
Se puede aplicar formato a las secciones de contenido para que muestren la
funcionalidad o los elementos que promueven.
4. Zoom semntico: navegar entre los niveles de una jerarqua

El zoom semntico permite examinar una vista y moverse por ella de manera
rpida y fluida, sobre todo si la vista es una larga lista panormica.
5. Barra de la aplicacin superior

La barra de la aplicacin superior contiene un acceso transitorio a los controles
de navegacin o a otras reas de la aplicacin.
6. Men de encabezado
El men de encabezado est disponible en cualquier parte de la aplicacin y
permite a los usuarios saltar rpidamente de una seccin de la aplicacin a otra.
7. Vnculo de pgina principal
El vnculo de pgina principal se encuentra en la parte inferior del men de
encabezado y es una forma rpida de volver a la raz de la aplicacin.
8. Barra de la aplicacin inferior
La barra de la aplicacin inferior contiene un acceso transitorio a los comandos
relevantes para una vista en particular.
9. Ver/Ordenar/Filtrar
Estos comandos cambian el modo en que se muestra el contenido dentro de una
vista especfica. El mejor lugar donde pueden encontrarse es la barra de la
aplicacin.
10. Borde
Al deslizar el dedo rpidamente desde el borde de la pantalla, se muestran las
barras de la aplicacin y los accesos.
Navegacin deslizando rpidamente desde el borde

Los usuarios pueden navegar dentro de las aplicaciones
y por todo el sistema deslizando rpidamente un dedo o
el pulgar desde uno de los bordes. Para usar las
aplicaciones de la Tienda Windows de manera eficaz,
los usuarios querrn aprender la funcin de cada uno de
los siguientes gestos de deslizamiento rpido desde el
borde.
Al deslizar rpidamente desde el borde inferior o

superior de la pantalla, se muestran las barras de la
aplicacin de navegacin y de comandos.
Al deslizar rpidamente desde el lado derecho de la
pantalla, aparecen los accesos que exponen los
comandos del sistema.
Al deslizar rpidamente desde la izquierda, se
recorren las aplicaciones en ejecucin actualmente.
Al deslizar rpidamente desde el borde superior al
borde inferior de la pantalla, se cierra la aplicacin
actual.
Al deslizar rpidamente desde el borde superior
hacia abajo y hacia el borde izquierdo o derecho, se
acopla la aplicacin actual a ese lado de la pantalla.
Navegar con las etiquetas de la seccin y los mens de encabezado

Usaremos una aplicacin de muestra llamada Comida con amigos para ilustrar un
diseo para usar las secciones de contenido, el men de encabezado y el botn Atrs
para navegar por una aplicacin de la Tienda Windows.
El men de encabezado contiene un vnculo a cada

pgina de seccin (nivel 2), as como un vnculo de
regreso al concentrador (nivel 1). Esto permite que
los usuarios se muevan por la aplicacin
rpidamente. El men aparece en cada nivel y en
cada pgina de la aplicacin, lo que lo convierte en
una manera confiable y eficaz para que los usuarios
vayan adonde quieran.
Los usuarios pueden pulsar la etiqueta de

la seccin para rastrear la pgina
correspondiente de dicha seccin.
Proporciona una indicacin visual, como
Ver todos los (x), para indicar a los
usuarios que existen ms elementos en
esta seccin que los que se muestran en
el concentrador. Con este diseo, se evita
la necesidad de usar un espacio de icono
o colocar un vnculo dentro del
contenido.
Con este diseo, as se vera el diagrama de navegacin para el ejemplo Comida con
amigos. Este es un diagrama simplificado que muestra solamente ejemplos cannicos de
elementos de navegacin, usados como representativos de todo lo que es interactivo.
Navegar con filtros, tablas dinmicas, ordenaciones y vistas

Otra parte de la navegacin en una aplicacin consiste en determinar cundo, dnde y
cmo proporcionar a los usuarios ms control sobre el modo en que experimentan el
contenido. Tanto los filtros como las tablas dinmicas, las ordenaciones y los selectores
de visualizacin deben tenerse en cuenta en el diseo de la aplicacin.
Periodo
Definicin
Ejemplo
Filtro
Quitar u ocultar contenido

Cuando buscas un juego para jugar,
dentro de un conjunto de
probablemente eliges ver solo aquellos juegos
datos, sobre la base de ciertos
dentro de la categora "Aventura".
criterios.
Tabla
dinmica
Reorganizar el contenido
Cuando examinas una coleccin musical,
dentro de un conjunto de
probablemente quieres organizar las canciones
datos, sobre la base de ciertos
por intrprete, lbum o gnero.
criterios.
Cambiar el orden en que se

Ordenacin muestra el contenido dentro
de un conjunto de datos.
Vista
Cuando buscas un artculo para leer en una

aplicacin de noticias, probablemente quieres ver
enumerados en primer lugar los artculos ms
recientes.
Cuando buscas un lugar para comer en una

Cambiar el estilo o mtodo en aplicacin de bsqueda de restaurantes,
que se muestra el contenido. probablemente quieres ver los restaurantes en un
mapa en lugar de en una lista.
En el Canvas
Usa controles en el Canvas para filtrar, crear tablas dinmicas u ordenar cuando la
bsqueda de un elemento es una tarea principal, como en una coleccin o pgina de
resultados de bsqueda.
Los controles deben ir dentro de la barra de la aplicacin, si la aplicacin se centra en la
bsqueda de contenido, como una aplicacin de compras o revista.
Ordenaciones y filtros de pgina
Para filtrar y ordenar contenido dentro de una vista de coleccin, pueden colocarse
comandos de ordenacin y filtro en una fila entre el encabezado y el contenido. En el
siguiente ejemplo, la vista se filtra para mostrar solamente episodios de televisin
ordenados y agrupados por serie.
En este ejemplo para una aplicacin de mercado, controles de seleccin desplegables

filtran el contenido para la vista actual. A medida que se muestran los mens, el filtro
actualmente activo aparece seleccionado en la lista desplegable.
La barra de la aplicacin superior
La barra de la aplicacin superior se usa principalmente para navegar a secciones o

pginas de una aplicacin que usan el diseo de navegacin plano. Esta barra, que en
ocasiones se llama barra de la aplicacin de navegacin, tambin puede usarse junto con
el patrn jerrquico, en lugar del men de encabezado, como medio para proporcionar
controles de navegacin global. La barra de la aplicacin superior debe mostrarse en
cada pgina y en todos los niveles de la aplicacin para proporcionar a los usuarios un
modo conveniente y coherente de navegar.
En este ejemplo de aplicacin de finanzas, el concentrador (L1) promueve secciones de
la aplicacin (Titulares, Lista de seguimiento) al concentrador, y los encabezados de
seccin se vinculan con ellos. En el nivel de seccin (L2), cuando se invoca la barra de
la aplicacin superior deslizando el dedo rpidamente desde el borde superior o inferior,
el usuario tiene acceso a la raz y todas las dems secciones de la aplicacin.
Cambio de vista de la barra de la aplicacin
La barra de la aplicacin se usa principalmente como una superficie de comandos, pero

tambin puede usarse para modificar el modo en que se ve el contenido. El cambio de
vista, la creacin de tablas dinmicas, el filtrado y la ordenacin pueden llevarse a cabo
con la barra de la aplicacin. No uses la barra de la aplicacin para navegar desde un
lugar de la aplicacin a otro. Todos los elementos de la barra de la aplicacin deben
actuar en el contenido que se encuentra actualmente en la vista.
En este ejemplo de aplicacin de calendario, el valor predeterminado de la vista es una

vista de mes, para la que se optimiz esta aplicacin. Los comandos para elegir otras
vistas de calendario se encuentran en la barra de la aplicacin, y se obtiene acceso a
ellos deslizando rpidamente desde el borde superior o inferior. Otros comandos, como
realizar una cita nueva, pueden aparecer tambin en la barra.
En la pgina Todos los restaurantes del ejemplo Comida con amigos, estn disponibles
las opciones para ver los elementos como una lista o un mapa, as como tambin para
filtrar y ordenar la vista sobre la base de ciertos criterios, como costo, ubicacin y
clasificacin. Aqu, las opciones de filtrado se exponen como controles en un men de
control flotante.
Diseo de comandos para aplicaciones de

la Tienda Windows (Windows)
Windows

En este artculo
Usar el Canvas
Usar los botones de acceso
Usar la barra de la aplicacin
Usar mens contextuales
Colocacin de los comandos
Tienes a tu disposicin varias superficies para colocar en ella comandos y controles en

la aplicacin de la Tienda Windows, como la ventana de la aplicacin, las ventanas
emergentes, los cuadros de dilogo y las barras. Elegir la superficie correcta en el
momento adecuado puede suponer la diferencia entre que una aplicacin sea incmoda
o vaya como la seda.
Para obtener una versin que puedes descargar de este tema, ve aqu.
Usar el Canvas
Los usuarios podr completar los escenarios principales con solo usar el Canvas.
Siempre que sea posible, permite que los usuarios manipulen directamente el contenido
en el Canvas de la aplicacin, en lugar de agregar comandos que acten sobre el
contenido.
Por ejemplo, en una aplicacin de bsqueda de restaurantes, la bsqueda y la
visualizacin de restaurantes debera realizarse sobre el Canvas al pulsar, realizar un
movimiento panormico o seleccionar contenido.
Usar los botones de acceso
Aprovecha los contratos de botones de acceso y de aplicacin para habilitar los

comandos de aplicacin comunes. Evita duplicar la funcionalidad de contrato de
aplicacin en el Canvas de la aplicacin o en la barra de la aplicacin.
Buscar: permite que los usuarios busquen rpidamente el contenido de la aplicacin

desde cualquier parte del sistema, incluso desde otras aplicaciones. Y viceversa.
Compartir: permite que los usuarios compartan contenido de la aplicacin con otras
personas o aplicaciones, y reciban contenido compartido.
Dispositivos: permite que los usuarios disfruten de la transmisin de audio, vdeo o
imgenes desde la aplicacin a otros dispositivos de la red domstica.
Configuracin: consolida toda la configuracin en un solo lugar y permite que los
usuarios configuren la aplicacin mediante un mecanismo comn con el que ya estn
familiarizados.
Usar la barra de la aplicacin
La barra de la aplicacin te permite mostrar comandos a los usuarios a peticin. La

barra de la aplicacin muestra comandos relevantes para el contexto del usuario,
normalmente la pgina actual o la seleccin actual.
La barra de la aplicacin no est visible de manera predeterminada. Aparece cuando un
usuario desliza rpidamente un dedo desde la parte superior o inferior de la pantalla. La
barra de la aplicacin tambin puede mostrarse mediante programacin al seleccionar el
objeto o hacer clic en l.
La barra de la aplicacin es transitoria y desaparece despus de que el usuario pulse un

comando, pulse el Canvas de la aplicacin o repita el gesto de deslizar el dedo
rpidamente desde el borde. Si es necesario, puedes mantener visible la barra de la
aplicacin para facilitar los escenarios de seleccin mltiple.
Usar mens contextuales
Puedes usar los mens contextuales para acciones del Portapapeles (como cortar, copiar
y pegar) o para comandos que se aplican a contenido que no se puede seleccionar (como
una imagen en una pgina web).
El sistema ofrece aplicaciones con mens contextuales predeterminados para el texto y
los hipervnculos. Para el texto, el men contextual predeterminado muestra los
comandos del Portapapeles. Para los hipervnculos, el men predeterminado muestra
comandos para copiar el vnculo y para abrirlo.
Colocacin de los comandos

Vamos a usar una aplicacin ficticia de restaurantes para ilustrar el proceso de
organizacin de los comandos en la barra de la aplicacin, centrndonos en un escenario
de exploracin.
Organizar comandos
El primer paso es identificar todos los comandos de la aplicacin y organizarlos por

escenario o por ubicacin. Esta es la lista de los comandos que se usan con ms
frecuencia cuando se examinan restaurantes.
Qu comandos deben aparecer en toda la aplicacin?

Qu comandos deben mostrarse solo en ciertas pginas?
Qu comandos deben usar botones de accin o ir en la configuracin?
Crear conjuntos de comandos
Ahora, agrupamos los comandos en conjuntos. La barra de la aplicacin muestra

conjuntos de comandos como una unidad, con un divisor entre los conjuntos.
Qu comandos estn relacionados segn su funcionalidad?

Qu comandos alternan distintos tipos de vista?
Qu comandos deben aparecer cuando se realiza una seleccin?
Comandos de vista
Comandos de filtrar
Comandos de ordenar
Comandos de seleccionar Comandos de la vista de mapa Comandos de nuevo elemento
Crear mens
Despus, piensa si los conjuntos de comandos estaran mejor en un men de comandos.
La barra de la aplicacin est demasiado abarrotada o hay demasiados comandos por

incluir?
Hay algn conjunto que podra tener etiquetas ms largas o controles interactivos?
Los mens te permiten presentar ms opciones

en menos espacio e incluir controles
interactivos.
En este ejemplo, el men Ordenar muestra una
lista simple que facilita la eleccin de las
opciones. El men Filtrar muestra un conjunto
de controles que permite a los usuarios filtrar
los elementos por criterios ms complejos.
Colocar comandos en la barra de la aplicacin
Existen diferentes maneras de colocar los comandos en la barra de la aplicacin y puede

haber variaciones en determinadas circunstancias. Estas son las reglas de colocacin de
comandos que debes seguir siempre que sea posible.
Previsibilidad En la medida de lo posible, usa una seleccin de ubicacin coherente de
los comandos y las interacciones en todas las vistas de tu aplicacin.
Ergonoma Valora cmo la seleccin de ubicacin de comandos especficos puede
mejorar la velocidad o facilidad con la que se puede actuar en un comando.
Esttica Limita el nmero de comandos para evitar que la barra de la aplicacin parezca
complicada. Elige iconos que sean fciles de comprender o predecir. Usa etiquetas de
texto cortas.
1. Colocar los comandos persistentes a la derecha
Comienza por colocar los comandos predeterminados en el lado derecho de la

barra de la aplicacin. Si hay pocos comandos, la barra de la aplicacin podra
quedar con comandos solo a la derecha.
En este ejemplo de los comandos Examinar, los conjuntos de comandos de vista
y de filtrar/ordenar son persistentes.
2. Usar los bordes
Si hay muchos comandos, separa los distintos conjuntos a la derecha o a la

izquierda para equilibrar la barra de la aplicacin y hacer que los comandos sean
ergonmicamente ms accesibles.
Aqu decidimos mover el conjunto de comandos de vista a la izquierda y
mantener el conjunto de filtrar/ordenar a la derecha. En este ejemplo, cuando la
vista de mapa est activa, los comandos de la vista de mapa aparecen a la
derecha del conjunto de comandos de vista.
3. Mostrar y ocultar comandos deshabilitados
Deben ocultarse los comandos que no son relevantes en determinadas

circunstancias. Cuando aparezcan, no deben alterar el orden de los comandos
persistentes.
En este ejemplo, cuando la vista de mapa est activa, los comandos de la vista de
mapa aparecen a la derecha del conjunto de comandos de vista.
4. Insertar comandos de seleccin
Los comandos que aparecen cuando el usuario realiza una seleccin se sitan en
el extremo izquierdo, desplazando los comandos que pudiera haber ah. Esto
hace que los comandos de seleccin sean ms notorios y fciles de acceder.
Aqu, el conjunto de comandos de vista desplaza el resto a la derecha para
hacerse sitio.
Usar una colocacin estndar para los controles comunes
Algunos comandos son comunes y aparecen en muchas aplicaciones. Para crear

coherencia e infundir confianza, siga estas directrices para decidir dnde colocar los
comandos en la barra de la aplicacin.
Comandos de seleccin Los comandos relacionados con la seleccin siempre se
muestran en el extremo izquierdo, ya sean comandos contextuales que aparecen al
seleccionar o comandos que afectan a la seleccin.
En este ejemplo, antes de que los usuarios seleccione algo, se muestra un comando
"Seleccionar todo" a la izquierda. Despus de que los usuarios seleccionen algo, se
muestran los dems comandos de seleccin a la izquierda.
Comando de nuevo elemento Si tu aplicacin llama a un comando "Nuevo" para crear

cualquier tipo de entidad (agregar, crear, redactar), coloca ese comando en el borde
derecho de la barra. As, todos los comandos "Nuevo" tendrn una seleccin de
ubicacin coherente y sern fcilmente accesible con los pulgares independientemente
de la aplicacin o contexto especfico.
En este ejemplo, el comando "Nueva crtica" permite al usuario crear una nueva crtica
de un restaurante. Otros comandos relacionados con "Nueva crtica" se colocan junto a
l a la izquierda.
El glifo + solo debe usarse para representar el comando "Nuevo" y no debe aparecer en
ningn otro lugar de la barra de la aplicacin.
Comandos de eliminar Usa Eliminar/Nuevo si tu aplicacin
administra entidades individuales que podran persistir fuera de
tu aplicacin, por ejemplo, una aplicacin de correo o de cmara.
Eliminar/Nuevo deben aparecer siempre en este orden.
Comandos de quitar Usa Quitar/Agregar si tu aplicacin
administra una lista, por ejemplo, lista de tareas pendientes, lista
de ciudades en una aplicacin de informacin meteorolgica o
una lista de restaurantes incluidos en marcadores. Quitar debe
aparecer siempre a la izquierda de Agregar.
Comandos de borrar Usa Borrar si vas a realizar una accin
destructiva en todos los elementos posibles. Usa la etiqueta del
comando y s explcito acerca de la accin que realizar el
comando, por ejemplo, "Borrar seleccin".
Diseo de interaccin tcil (aplicaciones

de la Tienda Windows) (Windows)
Windows
En este artculo
Gua tctil
Lenguaje tctil de Windows 8
Postura tctil de Windows 8
Objetivos tctiles de Windows 8
Accesibilidad e interacciones tctiles
Temas relacionados
En este tema se describen las interacciones tctiles para Windows 8 y se ofrecen

directrices para disear interacciones tctiles adecuadas. Para obtener una versin
descargable de este tema, ve aqu.
Gua tctil
1. Usa el lenguaje tctil de Windows 8.
Windows 8 proporciona un escueto conjunto de interacciones tctiles que se usa

de forma coherente en todo el sistema. Aplicar este lenguaje de forma coherente
hace que la aplicacin resulte familiar a los usuarios. Al hacer que la aplicacin
sea ms fcil de aprender y de usar, aumenta la confianza del usuario.
2. Usa los dedos para lo que valen.
Un mouse y un lpiz son precisos, pero los dedos no, y los objetivos pequeos
requieren precisin. Usa objetivos grandes que permitan la manipulacin directa
y ofrezcan datos de interaccin tctil enriquecidos. Deslizar el dedo rpidamente
hacia abajo en un elemento grande es fcil y rpido porque todo el elemento es
un objetivo de seleccin.
3. Examina el contenido mediante gestos tctiles.
El zoom semntico y el movimiento panormico hacen que la navegacin sea

rpida y fluida. En lugar de colocar contenido en varias pestaa o pginas, usa
Canvass amplios que permitan realizar movimientos panormicos y usar el
zoom semntico.
4. Proporciona respuesta.
Aumenta la confianza del usuario ofreciendo informacin visual inmediata

siempre que se toque la pantalla. Todos los elementos interactivos deben
reaccionar cambiando de color, de tamao o desplazndose. Los elementos que
no son interactivos deben mostrar elementos visuales tctiles solo cuando se
toque la pantalla.
5. El contenido sigue al dedo.
Los elementos que un usuario puede mover o arrastrar, por ejemplo, un Canvas
o un control deslizante, deben seguir el dedo del usuario mientras se mueven.
Los botones y otros elementos que no se mueven deben volver a su estado
predeterminado cuando el usuario levanta el dedo o lo desliza fuera del elemento.
6. Haz que las interacciones sean reversibles.
Si seleccionas un libro, puedes volver a dejarlo donde lo encontraste. Las

interacciones tctiles deberan comportarse de forma similar, deberan ser
reversibles. Ofrece informacin visual para indicar qu suceder cuando el
usuario levante el dedo. De esta manera, la aplicacin se podr explorar de
forma segura mediante gestos tctiles.
7. Permite cualquier cantidad de dedos.
Las personas a menudo tocan con ms de un dedo y ni siquiera se dan cuenta.

Por eso, las interacciones tctiles no deberan ser muy diferentes segn el
nmero de dedos que toquen la pantalla. Al igual que en el mundo real, deslizar
algo con uno o tres dedos no debera suponer ninguna diferencia.
8. No limites el tiempo de las interacciones.
Las interacciones que requieren gestos compuestos, como la doble pulsacin o

mantener presionado, deben realizarse dentro de un plazo de tiempo
determinado. Evita las interacciones con tiempo como estas porque suelen
activarse accidentalmente y son difciles de temporizar correctamente.
Lenguaje tctil de Windows 8

Esta lista describe los trminos estndares relacionados con los elementos tctiles que se
usan en Windows 8.
Importante Para evitar que los usuarios se confundan, no crees interacciones
personalizadas que dupliquen o redefinan las interacciones estndares existentes.
Esta interaccin tctil hace que se

muestre informacin detallada o
elementos visuales didcticos (por
ejemplo, informacin sobre
Mantener
herramientas o un men
presionado para contextual) sin una confirmacin
aprender
de una accin. Todo lo que se
muestre de esta manera no debe
impedir que los usuarios realicen
movimientos panormicos si
comienzan a deslizar el dedo.
Al pulsar sobre un elemento se
Pulsar para
invoca la accin principal, por
accin principal ejemplo, se inicia una aplicacin o
se ejecuta un comando.
El deslizamiento se utiliza
principalmente para interacciones
panormicas, pero tambin se
puede usar para mover, dibujar o
Deslizar para
escribir. El deslizamiento tambin
movimiento
puede usarse para dirigirse a
panormico
elementos pequeos y muy
prximos entre s mediante
arrastre (deslizar el dedo sobre los
objetos relacionados, por ejemplo,
botones de radio).
Cuando se desliza el dedo una
Deslizar los
distancia pequea, perpendicular a
dedos
la direccin de panormica, se
rpidamente
selecciona el objeto en una lista o
para
cuadrcula (controles ListView y
seleccionar,
GridLayout). Muestra la AppBar
ordenar y mover con los comandos relevantes
cuando se seleccionan objetos.
Aunque los gestos de reducir y
ampliar se suelen utilizar para
cambiar de tamao, tambin
Zoom con
permiten ir al principio, al final o a
gestos de
cualquier parte del contenido con
reducir y
zoom semntico. Un control
ampliar
SemanticZoom proporciona una
vista alejada para mostrar grupos
de elementos y formas rpidas de
moverse en ellos.
Voltear para
girar
Al girar con uno o ms dedos, el

objeto gira. Al girar el dispositivo,
gira toda la pantalla.
Deslizar los
dedos
rpidamente
desde el borde
para los
comandos de la
aplicacin
Los comandos de la aplicacin

aparecen al deslizar el dedo
rpidamente desde el borde
inferior o superior de la pantalla.
Usa la AppBar para mostrar los
comandos de la aplicacin.
Al deslizar rpidamente desde el
lado derecho de la pantalla,
aparecen los botones de acceso
que exponen los comandos del
sistema.
Deslizar los
dedos
rpidamente
desde el borde
para los
comandos del
sistema
Al deslizar rpidamente desde la

izquierda, se recorren las
aplicaciones en ejecucin
actualmente.
borde superior al borde inferior de
la pantalla, se cierra la aplicacin
actual.
borde superior hacia abajo y hacia
el borde izquierdo o derecho, se
acopla la aplicacin actual a ese
lado de la pantalla.
Nota Los usuarios pueden realizar manipulaciones directas como las interacciones
deslizar para arrastrar, reducir para acercar y voltear para girar simultneamente y con
cualquier cantidad de puntos tctiles.
Postura tctil de Windows 8

El diseo tctil es mucho ms que disear lo que aparece en pantalla. Requiere disear
en funcin de cmo se sostenga el dispositivo (sujecin).
Normalmente, los usuarios tienen varias maneras de sostener una tableta.
La tarea actual y cmo se presente suele determinar qu sujecin se usa. Sin embargo, el
entorno inmediato y la comodidad fsica tambin afectan el tiempo que se usa una
sujecin y con cunta frecuencia se cambia.
Intenta optimizar tu aplicacin para diferentes sujeciones. Pero, si una interaccin tiende
de forma natural a una forma de sostener especfica, optimzala para dicha forma.
reas de interaccin: ya que las pizarras suelen sostenerse a un lado, las esquinas
inferiores y los lados son ubicaciones ideales para los elementos interactivos.
reas de lectura: el contenido situado en la mitad superior de la pantalla es ms fcil

de ver que el contenido de la mitad inferior, que suele ignorarse o quedar tapado por las
manos.
Cuatro sujeciones de uso comn: si bien existen muchas formas de sostener una
tableta, estas cuatro sujeciones son las ms utilizadas.
Sujecin
Sujecin e interaccin
Sujecin con una mano

con interaccin ligera a
media con una mano
Consideraciones de diseo
Los bordes derecho o
inferior ofrecen una
interaccin rpida.
La mano y la mueca
podran tapar la esquina
inferior derecha.
El alcance limitado hace
que el tacto sea ms
preciso.
Lectura, exploracin,
correo electrnico y
escritura ligera.
Sujecin con dos manos

con interaccin ligera a
media con los pulgares
El dispositivo descansa
sobre la mesa o sobre las
piernas con interaccin
ligera a media con ambas
manos
Las esquinas inferiores

izquierda y derecha
ofrecen interaccin
rpida.
Los pulgares anclados
aumentan la precisin del
tacto.
Es difcil llegar a lo que
est en el centro de la
pantalla.
Para tocar el centro de la
pantalla es necesario
cambiar de postura.
escritura ligera, juegos.
La parte inferior de la
pantalla ofrece
interaccin rpida.
Las manos y las muecas
podran tapar las esquinas
inferiores.
La menor necesidad de
alcance hace que el tacto
sea ms preciso.
correo electrnico y
escritura intensa.
El dispositivo descansa
sobre la mesa o
plataforma con o sin
interaccin
La parte inferior de la
pantalla ofrece
interaccin rpida.
Si se toca la parte superior
de la pantalla se tapa el
contenido.
Al tocar la parte superior
de la pantalla podra
golpear un dispositivo
acoplado y
desestabilizarlo.
La interaccin a cierta
distancia disminuye la
capacidad de lectura y la
precisin.
Aumenta el tamao del
objetivo para mejorar la
capacidad de lectura y la
precisin.
Ver una pelcula,
escuchar msica.
Objetivos tctiles de Windows 8

Tamao frente a eficiencia: el tamao del objetivo influye en la tasa de errores
No hay un tamao perfecto para los objetivos tctiles. Los diferentes tamaos sirven
para diferentes situaciones. Las acciones con consecuencias graves (eliminar o cerrar) o
las acciones de uso frecuente deben utilizar objetivos tctiles grandes. Las acciones de
poco uso con consecuencias leves pueden usar objetivos pequeos.
Dedos grandes?
A menudo, las personas se culpan por tener dedos

grandes. Pero hasta los dedos de un beb son ms
anchos que la mayora de los objetivos tctiles.
La imagen de la izquierda muestra que el ancho
del adulto promedio es aproximadamente 11 mm,
mientras que el de un beb es de 8 mm y el de un
jugador de baloncesto es de 19 mm.
Directrices para el tamao de objetivo: estas son algunas directrices para decidir el
tamao de tus objetivos tctiles.
7x7 mm: tamao mnimo recomendado
7x7 mm es un buen tamao mnimo si el toque
de un objetivo equivocado se puede corregir en
uno o dos gestos, o en cinco segundos. El
espaciado entre los objetivos es tan importante
como el tamao del objetivo.
Cuando la precisin importa
Cerrar, eliminar y otras acciones con
consecuencias graves no pueden permitirse
pulsaciones accidentales. Usa objetivos de 9x9
si corregir el toque de un objetivo equivocado
requiere ms de dos gestos, cinco segundos o un
cambio de contexto importante.
Cuando no cabe
Si te ves amontonando las cosas para que
quepan, puedes usar objetivos de 5x5 mm
siempre que el toque de un objetivo equivocado
se pueda corregir con un gesto. En este caso es
muy importante usar un espaciado de 2 mm
entre los objetivos.
La mayora de las personas son diestras

La mayora de las personas sostienen una pizarra con la mano izquierda y la tocan con
la derecha. En general, los elementos situados en el lado derecho son ms fciles de
tocar, y colocarlos en el lado derecho evita obstruir el rea principal de la pantalla.
Accesibilidad e interacciones tctiles

Cuando planees la interfaz de usuario y las interacciones admitidas por la aplicacin, ten
en cuenta la amplia gama de capacidades, limitaciones y preferencias de los usuarios.
Seguir los principios de un diseo accesible desde el comienzo ayuda a que la
aplicacin sea accesible para el pblico ms amplio posible. Para obtener ms
informacin sobre cmo planear un diseo que ofrezca accesibilidad, consulta el tema
sobre diseo de accesibilidad.
Temas relacionados
Patrones de diseo de la experiencia del usuario
Responder a la interaccin del usuario
Directrices de publicidad (Windows)

Windows
La publicidad es una opcin clave de rentabilidad para los desarrolladores de
aplicaciones, y con el alcance sin precedentes de Windows 8, es una oportunidad sin
igual para los anunciantes. Para obtener ms informacin acerca de la publicidad en
general, descarga el documento de informacin bsica sobre anuncios.
Diseo de una buena experiencia de usuario de publicidad

Sigue estas directrices cuando definas el diseo de tu aplicacin para los anuncios.
Integra anuncios en el diseo Crea una experiencia consistente mediante la

integracin de publicidad en el diseo original y la distribucin del contenido en
toda la aplicacin. Ten en cuenta el espacio que debers asignar en el nivel
superior en comparacin con los niveles hoja.
Elige formatos de anuncios complementarios Elige formatos de anuncios que
tengan sentido en la aplicacin. Hay muchos formatos de anuncios disponibles,
pero no todos ellos llamarn la atencin del usuario ni proporcionarn una
experiencia perfecta.
Elige una una ubicacin y un tamao del anuncio que sean
complementarios Selecciona ubicaciones y tamaos del anuncio que
correspondan con el diseo de la aplicacin, se adhieran a los estndares del
sector y que estn muy solicitados por los posibles anunciantes. Por ejemplo, si
vas a usar el diseo de cuadrcula, considera el uso de un tamao de anuncio de
250x250 para que los anuncios quepan en la cuadrcula. Si los anuncios no
caben, podras crear un clster aparte.
Define el diseo para todos los estados de visualizacin Considera cmo debe
cambiar el estado real del anuncio de acuerdo con el estado de visualizacin
(horizontal, vertical y vista acoplada).
Considera los anuncios locales Decide si quieres ofrecer anuncios dirigidos a
un sitio (locales).
Incluye palabras clave Incluye palabras clave que ayuden a categorizar la
aplicacin para los posibles anunciantes interesados en un pblico especfico.
Usa mtricas bien establecidas Considera las dos mtricas principales para el
rendimiento, CPM (costo por mil impresiones) y tasa de relleno (cuntas
impresiones produce un anuncio) cuando habilites la publicidad. Mucha gente
piensa que la mejor solucin de rendimiento consiste en la frmula CPM * tasa

de relleno.
A continuacin indicamos un par de ejemplos de colocacin de publicidad diseados
para una distribucin y un estado de visualizacin especficos de la aplicacin.
Diseo de
cuadrcula de
pantalla completa
Vista acoplada
Uso no apropiado de la publicidad

Hay ciertos requisitos sobre el uso inapropiado de la publicidad que se describen en los
Requisitos de certificacin para una aplicacin de Windows 8. El cumplimiento de estos
requisitos te ayuda a incorporar anuncios en tu aplicacin si daar la experiencia del
usuario.
La aplicacin no debe mostrar solo anuncios. Si la aplicacin incluye o muestra

anuncios, debe proporcionar funcionalidades adicionales ms all de los
anuncios.
Los anuncios en las aplicaciones deben cumplir con nuestras directivas de

contenidos. Nuestras directivas de contenidos se describen en la seccin 5 de los
Requisitos de certificacin para una aplicacin de Windows 8. Las aplicaciones
de la Tienda Windows son apropiadas para un pblico global.
La aplicacin no debe usar sus iconos, notificaciones, barra de la aplicacin ni la
interaccin de hacer pasar desde el borde para mostrar anuncios.
La aplicacin debe permitir que los usuarios completen las tareas primarias en la
aplicacin sin redirigirlos a un sitio web u otra aplicacin. Las aplicaciones
deben hacer ms que abrir un sitio web o imitar el comportamiento de un sitio
web.
Los anuncios no deben ejecutar un cdigo de programa que no provenga del
proveedor del anuncio.
Eleccin de un proveedor de anuncios

Hazte estas preguntas bsicas que te ayudarn a encontrar el mejor proveedor de
anuncios para tu aplicacin:
El proveedor de anuncios cumple con los requisitos de certificacin de la

Tienda Windows?
El proveedor de anuncios ofrece una calidad de anuncios acorde con la calidad
de la aplicacin?
El proveedor de anuncios admite comportamientos adecuados para Windows 8?
Personalizacin de marca de las

(Windows)
Windows

En este artculo
Por qu es importante infundir tu marca en las aplicaciones de la Tienda Windows

Cmo incorporar tu marca en aplicaciones de la Tienda Windows
Ejemplos que evocan a marcas exclusivas
Temas relacionados
En este tema veremos algunas de las muchas posibilidades creativas que los diseadores
y desarrolladores de aplicaciones pueden usar para incorporar la personalizacin de
marca a las aplicaciones de la Tienda Windows.
Por qu es importante infundir tu marca en las aplicaciones de la Tienda

Windows
Una marca define las cualidades por las que un negocio quiere que se lo reconozca.
Cuando se disean las aplicaciones de la Tienda Windows, se necesita tomar decisiones
minuciosas para garantizar que tus aplicaciones incorporen la esencia de tu marca. Al
igual que una marca define un negocio, la expresin de la marca en tu aplicacin de la
Tienda Windows la diferencia de todas las dems aplicaciones. Analicemos un ejemplo.
Aqu tenemos un ejemplo de una aplicacin de la Tienda Windows antes de la
personalizacin de marca:
El ejemplo de Contoso Bakery ilustra la posible apariencia de una aplicacin para una
panadera si siguiera los principios del diseo Microsoft. Este es un buen ejemplo de destaque
del contenido.
Esta es la misma aplicacin de ejemplo despus de la personalizacin de marca:
En esta versin de la aplicacin de Contoso Bakery, algunos cambios evidentes hacen que esta
aplicacin sea ms atractiva. Al incorporar ms de la marca de la panadera, el contenido de la
aplicacin se presenta de una manera ms persuasiva, y la sensacin general de la aplicacin
evoca la esencia de una panadera.
Cmo incorporar tu marca en aplicaciones de la Tienda Windows

La expresin de tu marca se logra a travs de un conjunto de elementos visuales. Por
ejemplo, un estilo fotogrfico, un diseo, grficos y una paleta de colores personales, en
conjunto permiten crear una marca reconocible y recurrente, a travs de una variedad de
medios, como difusin, prensa, Internet y aplicaciones de la Tienda Windows.
Considera a estos elementos visuales como si fueran las perillas y discos que mueves a
travs de cdigo para crear una apariencia nica en tu aplicacin de la Tienda Windows.
Elemento
visual
Descripcin
El color es uno de los atributos clave de cualquier marca. Aplica el color

primario asociado con tu marca de forma que permita que los clientes
recuerden que esta aplicacin proviene de tu negocio.
Puedes usar grficos para reforzar tu marca agregando carcter a la
presentacin del contenido en tu aplicacin. Los grficos deben usarse con
Grficos
moderacin en el diseo de tu aplicacin. Un uso excesivo de los elementos
grficos corre el riesgo de interferir con el contenido y percibirse como nada
ms que una decoracin.
El uso de ilustraciones y fotografas en la aplicacin de la Tienda Windows
Imgenes debe reflejar tu marca. Dado que la mayora de las marcas establecidas
tienen una paleta de colores y un tipo de letra definidos, tambin usan un
estilo especfico de imgenes.
El sistema de cuadrcula de las aplicacin de la Tienda Windows permite
Cuadrcula lograr una unidad visual a travs de tu implementacin de elementos
visuales. La cuadrcula alinea la experiencia de usuario de tu aplicacin con
personalizacin de marca para que funcione en el resto de Windows.
Un diseo es la composicin que se origina en la disposicin de los
elementos visuales en una pgina. El diseo de cada una de las pginas de
Diseo
las aplicaciones tiene que ser relevante para tu marca, mientras que, al
mismo tiempo, tiene que ser coherente en el modo en que se usan todos los
elementos visuales para presentar el contenido.
Usa un logotipo en la aplicacin de la Tienda Windows para facilitar la
Logo
identificacin rpida de tu aplicacin, as como el reconocimiento pblico de
tu marca.
El uso de tipos de letra correctamente diseados constituye una parte clave
Tipografa de las aplicaciones de la Tienda Windows. Su eleccin correcta puede tener
el mismo impacto sobre tu marca que el color, el logotipo y el diseo.
Colores
Ejemplos que evocan a marcas exclusivas

Aqu tenemos algunos ejemplos que muestran cmo cada elemento visual ayuda a
evocar diferentes emociones y sentimientos. Las descripciones de cada elemento visual
proporcionan detalles especficos sobre cmo se ha creado el diseo.
Contoso Downtown Caf
Contoso Downtown Caf es una marca conocida por ser autntica. Ostenta platos de cocina
cacera y bebidas artesanales. En este ejemplo, el color, la cuadrcula, el diseo y la tipografa
son los elementos visuales usados principalmente para evocar la marca.
Colores La fotografa a todo color agrega una matriz de colores a la

aplicacin. Para evitar competencia entre la paleta de colores y la
fotografa, se usan el negro y el amarillo como colores de nfasis. Desde
la perspectiva de la personalidad, el negro y el amarillo tambin son
colores que se encuentran en entornos urbanos, como los letreros de las
calles y las indicaciones en la calzada.
Cuadrcula En este ejemplo, el contenido intencionalmente rompe con

la cuadrcula. El contenido de la carta es clave para esta marca. Por ello,
el margen superior se reduce para proporcionar ms espacio al men. El
margen izquierdo se ajusta para que el nombre de la compaa, el texto
introductorio y la informacin de ubicacin queden ms centrados, lo
que le da espacio y amplitud al contenido. Todas estas desviaciones se
aplicaron coherentemente y se trasladan a todas las otras pginas de
esta aplicacin.
Diseo El diseo est destinado a dar la apariencia de una carta porque
es lo que la conforma lo que trae al pblico nuevamente a este caf.
Como sus sndwiches y dems artculos de la carta, el diseo debe tener
una apariencia ms artesanal. El color de fondo hueso recuerda al papel,
el tono es atractivo y el contenido est ordenado, con reglas separadoras
verticales y una fuerte alineacin de texto a la izquierda.
Tipografa Copperplate Gothic Bold es el tipo de letra primaria usado en
este diseo, que le da al nombre de la compaa su apariencia exclusiva,
similar a la de un signo tallado en madera. Script MT Bold y Segoe UI son
los tipos de letra que se usan para acompaar. La fuente de escritura se
usa en contadas ocasiones en el encabezado de la carta y evoca un estilo
de escritura a mano. Segoe UI se usa en el texto del cuerpo para
aumentar la legibilidad de las opciones de la carta.
Marca Contoso French Bakery
Contoso French Bakery es una marca conocida por generar placer. Para muchos de sus clientes,
es el destino ideal para satisfacer su gula y deleitarse con placeres inconfesables. En este
ejemplo, el color, el diseo y la fotografa son los elementos visuales que se usan para evocar la
marca.
Colores Una paleta de colores de tan solo dos, marrn y rosa, es

suficiente para que los clientes piensen en una panadera. Marrn es el
color primario, que conjura imgenes de chocolate, y el rosa es un color
de nfasis, que evoca pasteles y galletas glaseadas. Adems de los
sabores asociados con ambos colores, tienen un objetivo para la marca.
El marrn es lo suficientemente neutro para proporcionar un fondo rico
para que se destaque una fotografa a todo color, y el rosa es lo
suficientemente brillante para destacar partes especficas del contenido.
Imgenes La fotografa es el foco de este diseo. Est claro que se
destin tiempo y experiencia a garantizar que cada imagen se vea lo
suficientemente atractiva que incite a comerla. Como resultado, las
imgenes de los artculos de panadera aclaran de qu se trata esta
marca. Adems, se usan para definir las categoras de contenido.
Diseo Si se compara con los diseos de aplicacin de la Tienda

Windows estndar, este ejemplo tiene una apariencia diferente. La
diferencia ms clara es la ausencia de iconos cuadrados. Los iconos y
cuadrcula todava existen, pero se ha aplicado estilo a las imgenes para
imitar los artculos que probablemente se encuentren en una panadera
como, por ejemplo, las formas circulares y de crestas de un molde para
magdalenas.
Marca Contoso Sandwich Truck
Contoso Sandwich Truck es una marca conocida por ser urbana, social y con reconocimiento de
ubicacin. Esta marca tiene el respaldo de un equipo de excelentes chefs y una flota de
camiones, todos destinados al pblico que se encuentra en constante movimiento. En este
ejemplo, los grficos, la cuadrcula y el logotipo son elementos visuales que se usan para
evocar la marca.
Grficos Las opciones del men siguen siendo el foco y no estn

abarrotadas por un uso excesivo de grficos. No obstante, los grficos s
juegan un papel en el establecimiento de esta marca. Por ejemplo, las
"estrellas" implican un sistema de calificacin de los clientes, el color y
las formas nos traen a la memoria los letreros de las calles y la
informacin basada en ubicacin se encuentra sobre un cuadro oscuro
que incluye un grfico de una calle asfaltada.
Cuadrcula La cuadrcula estndar ancla todos los aspectos de este
diseo e imita una estructura similar a lo que vera en una vista area de
un mapa de las calles de la ciudad. Para desafiar esta presentacin
ordenada, grficos de contenido superpuesto y sin bordes diferencian
este ejemplo. La presentacin general del contenido es llamativa y
directa como medio para atraer a personas que viven en constante
movimiento y necesitan tomar decisiones rpidas.
Logotipo No se usa un logotipo de compaa en este ejemplo. El
nombre de la compaa aparece en texto, y donde debera ir el logotipo
en este ejemplo, vemos por primera vez el nombre de la compaa
incrustado en la composicin general. El logotipo o el nombre no est
simplemente alineado en el borde superior izquierdo.
Colores Los colores clidos cobre, hueso, gris oscuro le dan a este
diseo un efecto exquisito. La paleta clida evoca algunos de los mismos
colores que encontraras en el pan, una sopa o postres caseros.
Temas relacionados
Creacin de aplicaciones de la Tienda Windows sobresalientes
Directrices sobre la experiencia del usuario
Diseo de navegacin
Descripcin de la silueta de Windows 8
Directrices para diseos
Directrices para texto y tipografa
ndice de las directrices sobre la

experiencia del usuario para aplicaciones
Windows

En este artculo
Diseo de Microsoft
Interaccin tctil
Ajuste y escalado
Contratos, accesos y funcionalidades
Iconos y notificaciones
Controles
Perfiles mviles en la nube
Conceptos bsicos
Usa este ndice para encontrar rpidamente las directrices sobre la experiencia del
usuario que pueden ayudarte a crear una gran aplicacin de la Tienda Windows. Si an
no lo has hecho, deberas empezar por leer Creacin de aplicaciones de la Tienda
Windows sobresalientes y Planear aplicaciones de la Tienda Windows.
Diseo de Microsoft
Las aplicaciones de la Tienda Windows son el
ncleo de la experiencia del usuario en Windows 8, y
las mejores aplicaciones de la Tienda Windows
comparten un conjunto de rasgos que conforman una
experiencia del usuario coherente, elegante y
atractiva.
Diseo y navegacin: piensa cmo afecta el diseo de la interfaz de usuario a la

manera en que los usuarios navegan por la aplicacin. Consulta Patrones de diseo de
navegacin.
Diseo y comandos: coloca los comandos de forma coherente para infundir confianza
y facilitar la interaccin del usuario. Consulta los temas sobre los patrones de diseo de
comandos y sobre cmo disear tu interfaz de usuario.
Distribucin y diseo de pgina: Usa la cuadrcula como ayuda para disear las
pginas de la aplicacin a fin de que se adhieran a la silueta de Windows 8.
o Disear una pgina de la aplicacin
o Eleccin de un diseo para aplicaciones JavaScript
Animaciones: Unas animaciones intencionadas y bien diseadas dan vida a las
aplicaciones y ofrecen una experiencia que se percibe elaborada y elegante. Ayuda a
los usuarios a comprender los cambios contextuales y relaciona las experiencias con
transiciones visuales. Para obtener ms informacin, consulta nuestras instrucciones
sobre estas animaciones:
o Arrastrar y colocar
o Animaciones en el borde
o Animaciones de listas
o Animaciones de transicin
o Animaciones de interfaz de usuario transitorias
o Animaciones de interfaz de usuario
Tipografa: consulta las directrices para texto y tipografa.
Interaccin tctil
Usa las interacciones tctiles para que el usuario se
mantenga al mando y confiado, y saca provecho del
borde de la pantalla o del dispositivo para que el
usuario pueda encontrar los comandos con
seguridad. Consulta el tema sobre el diseo de la
interaccin tctil.
Gua general de interaccin del usuario: Incorpora un conjunto coherente y eficaz de

interacciones de usuario. Consulta las directrices para interaccin del usuario.
Seleccin tctil del destino: decide el tamao y la ubicacin de tus objetivos
tctiles. Consulta las directrices para la seleccin tctil del destino.
Informacin visual: ofrece informacin visual clara sobre las acciones del
usuario. Consulta las directrices para informacin visual.
Zoom semntico: acerca o aleja el contenido para mostrar su aspecto y ayudar al
usuario a navegar por grandes cantidades de contenido. Consulta las directrices para
zoom semntico para la interaccin del usuario y consulta ms adelante nuestro
control SemanticZoom.
Deslizar rpidamente desde el borde y deslizar transversalmente: usa esta interaccin
estndar para seleccionar elementos de una lista o cuadrcula. Consulta las directrices
para deslizamiento transversal.
Zoom ptico y cambio de tamao: deja que los usuarios acerquen o alejen el
contenido para verlo mejor. Consulta las directrices para zoom ptico y cambio de
tamao.
Movimiento panormico: ayuda a los usuarios a navegar por la aplicacin con
movimiento panormico. Consulta las directrices para movimiento panormico.
Rotacin: Proporciona informacin sobre la respuesta cuando los usuarios utilicen
gestos tctiles para girar el contenido mvil de la pantalla. Consulta las directrices para
rotacin.
Seleccionar texto e imgenes: haz que los usuarios se sientan seguros cuando
seleccionan texto e imgenes. Consulta las directrices para seleccionar texto e
imgenes.
Interacciones de mouse: Crea una gran experiencia de mouse para los usuarios sin
pantallas tctiles. Consulta Directrices para interacciones de mouse.
Interacciones de teclado: Proporciona una completa experiencia de interaccin para
los usuarios que prefieren usar un teclado o que tienen discapacidades que requieren
el uso del teclado. Consulta Responder a las interacciones del teclado.
Interacciones de lpiz o pluma: Da soporte a una gran experiencia de entrada de lpiz
para los usuarios con dispositivos de lpiz o pluma. Consulta Responder a la entrada de
pluma y lpiz.
Ajuste y escalado
Estas caractersticas te ayudan a crear fantsticas

experiencias para cada factor de forma y cada opcin
de visualizacin que los usuarios tengan.
Diseos flexibles: Disea para diferentes factores de forma y deja que los usuarios
manipulen el contenido segn sus necesidades y preferencias. Piensa primero en la
vista horizontal para que tu aplicacin funcione en todos los factores de forma, pero
recuerda que algunas pantallas giran y optimiza el diseo del contenido para una vista
ms alta que ancha, conservando la funcionalidad. Consulta el tema sobre las
directrices para diseos.
Vista acoplada y rellena: disea para las necesidades multitarea de los usuarios. Los
usuarios quieren usar la aplicacin mientras conversan, navegan por Internet o miran
una pelcula. Por lo tanto, haz que la vista acoplada resulte til y mantn el contexto
mientras alternas entre vistas acopladas y desacopladas. Consulta las directrices para
vistas acopladas y rellenas.
Escalado a pantallas: disea una interfaz de usuario que tenga un gran aspecto en
dispositivos de diferentes tamaosdesde una tableta pequea a una pantalla media
de porttil, pasando por los equipos de escritorio grandes o las pantallas de los todo en
uno. Consulta las directrices para escalado a pantallas.
Escalado a la densidad de pxeles: asegrate de que las imgenes de tu aplicacin se
vean bien cuando se ajusta la escala. Windows escala la aplicacin para garantizar un
tamao fsico coherente sin importar la densidad de pxeles del dispositivo. Consulta
las directrices para escalado a la densidad de pxeles.
Cambio de tamao: Asegrate de que la aplicacin se vea fantstica cuando sea
necesario que Windows cambie su tamao. Windows cambia automticamente el
tamao de tu aplicacin cuando el usuario cambia el estado de visualizacin o inicia el
teclado virtual. Consulta el tema sobre las directrices para cambio de tamao.
Contratos, accesos y funcionalidades

Los contratos son el lazo de unin que une las
aplicaciones de la Tienda Windows entre s y con la
interfaz de usuario del sistema. Dos aplicaciones que
han implementado el mismo contrato pueden trabajar
juntas para completar un escenario amplio o
complejo. Algunos contratos estn representados por
accesos. Consulta la lista completa de los contratos
entre aplicaciones.
Las funcionalidades identifican las caractersticas del
dispositivo que la aplicacin utiliza.
Buscar: permite que los usuarios busquen rpidamente en el contenido de la

aplicacin desde cualquier parte del sistema. Consulta las directrices para buscar.
Compartir e intercambiar datos: permite que los usuarios compartan el contenido de
la aplicacin con otras personas que conozcan, reciban contenido compartido de otras
aplicaciones y lo muestren a los usuarios. Consulta las directrices para compartir
contenido, las directrices para comandos del Portapapeles y las directrices para crear
formatos de datos personalizados.
Selectores de archivos: Permite que los usuarios carguen sus archivos desde los
dispositivos de almacenamiento conectados al equipo local, el Grupo Hogar y otras
aplicaciones, hacia tu aplicacin, y viceversea. Tambin puedes proporcionar una
extensin de selector de archivos para que otras aplicaciones puedan cargar el
contenido de la aplicacin. Consulta el tema sobre las directrices para selectores de
archivos y las directrices para contratos de selectores de archivos.
Reconocimiento de la ubicacin: garantiza una experiencia de geolocalizacin limpia,
que no cause problemas y que sea respetuosa con la privacidad. Consulta las
directrices para aplicaciones con reconocimiento de la ubicacin.
Reconocimiento de dispositivos: los micrfonos, las cmaras, los proveedores de
servicios de localizacin y los servicios de mensajera de texto pueden acceder a los
datos personales del usuario o cobrarles dinero. Las aplicaciones de la Tienda Windows
tienen caractersticas que garantizan que el usuario tiene el control de estos delicados
dispositivos. Si tu aplicacin accede a dispositivos con informacin confidencial,
incorpora la posibilidad de que el usuario habilite o deshabilite el acceso al dispositivo.
Consulta las directrices para usar dispositivos con informacin confidencial y las
directrices para crear un selector de dispositivo.
Cuadro de dilogo de impresin: crea una interfaz de usuario personalizada cuando
los usuarios impriman contenido desde tu aplicacin. Consulta las directrices para una
interfaz de usuario de impresin personalizada.
Gestos de proximidad: permiten que los usuarios conecten dos o ms dispositivos
entre s con una pulsacin. Este gesto mejora las experiencias en las que esperas que
haya varios usuarios fsicamente prximos, como en los juegos multijugador. Consulta
las directrices para pulsar.
Multimedia: asegrate de que tu aplicacin funciona bien con multimedia. Consulta
las directrices para desarrollar aplicaciones con reconocimiento de audio y las
directrices para la interfaz de usuario de cmara.
Un icono es la puerta de entrada a una aplicacin.
Alojado en la pantalla Inicio, es una extensin de la
aplicacin y puede proporcionar informacin mucho
ms personal y atractiva que un icono tradicional.
Invierte en el diseo de un icono excepcional para
atraer al usuario a tu aplicacin.
Ofrece contenido actualizado a travs de
notificaciones e iconos dinmicos para que los
usuarios se sientan conectados a tu aplicacin.
Ayuda a que los usuarios se conecten con las
personas y los dispositivos que les importan.
Iconos de aplicaciones e iconos secundarios: Usa el icono de la aplicacin para atraer a

los usuarios, animarlos a que la usen y hacer que la aplicacin se mantenga actualizada
y pertinente. Promueven contenido interesante y vnculos profundos de la aplicacin
en la pantalla Inicio y permiten a los usuarios iniciar directamente una experiencia
determinada dentro de la aplicacin. Consulta el tema sobre las directrices para iconos
y notificaciones y las directrices para iconos secundarios.
Notificaciones: ayuda a los usuarios a estar al tanto de contenido urgente o
personalmente relevante a travs de notificaciones del sistema y vuelve a invitarlos a la
aplicacin aunque no est en primer plano. Consulta las directrices para notificaciones
del sistema, las directrices para notificaciones de insercin, las directrices para
notificaciones peridicas, las directrices para notificaciones programadas.
Controles
Disea la interfaz de usuario de tus aplicaciones para
que presente el contenido. Deja en la pantalla
nicamente los elementos ms relevantes para
reducir las distracciones y ayudar al usuario a
concentrarse en el contenido. Seguir estas directrices
te ayudar a ofrecer una experiencia del usuario
coherente, elegante y atractiva.
Comandos
Navegacin
UI
Barras de la aplicacin: Consulta las directrices para barras de la

aplicacin.
Botones: consulta las directrices para botones.
Casillas: consulta las directrices para casillas.
Botones de radio: consulta las directrices para botones de radio.
Modificadores para alternar: consulta las directrices para modificadores
para alternar.
Controles deslizantes: consulta las directrices para controles deslizantes.
Controles de clasificacin: consulta las directrices para controles de
clasificacin.
Control de seleccin: consulta las directrices para el control de seleccin.
Selectores de hora: consulta las directrices para selectores de hora.
Selectores de fecha: consulta las directrices para selectores de fecha.
Controles de inicio de sesin: Consulta el tema sobre las directrices para
controles de inicio de sesin.
SemanticZoom: consulta las directrices para controles SemanticZoom.

FlipView: consulta las directrices para controles FlipView.
ListView: Consulta el tema sobre las directrices para controles ListView y
sobre cmo aplicar estilo a los controles ListView.
Vnculos: Consulta el tema sobre las directrices para vnculos.
Controles flotantes: consulta las directrices para controles flotantes.

Cuadros de dilogo de mensajes: consulta las directrices para cuadros de
transitoria
Imgenes
Texto y
entrada
dilogo de mensajes.
Mens contextuales: consulta las directrices para mens contextuales.
Informacin sobre herramientas: consulta las directrices para
informacin sobre herramientas.
Controles de progreso: consulta las directrices para controles de
progreso.
Miniaturas: consulta las directrices para miniaturas.
Fuentes: Consulta el tema sobre las directrices para fuentes.

Cuadros de texto: consulta las directrices para entrada de texto.
Controles de inicio de sesin: consulta las directrices para controles de
inicio de sesin.
Revisin ortogrfica: consulta las directrices para revisin ortogrfica.
Teclado tctil en pantalla: Aprende a mostrar y ocultar el teclado tctil
en pantalla cuando los usuarios no tienen acceso a un teclado de
hardware u otros dispositivos de teclado perifricos. Consulta Directrices
para teclado tctil.

Crea una experiencia continua de un dispositivo a
otro con la movilidad de datos y configuracin, que
permite al usuario retomar una tarea exactamente
donde la dej y preserva la experiencia del usuario
que ms les interesa, independientemente del
dispositivo que estn usando.
Movilidad: mantn la configuracin y los estados con movilidad para que los usuarios
puedan usar la aplicacin en todas partes, en el equipo familiar de la cocina, en el del
trabajo o en una tableta personal. Podrs encontrar informacin adicional sobre la
movilidad en Administrar datos de la aplicacin y en las directrices para usar un perfil
mvil con datos de aplicacin.
Configuracin: consolida toda la configuracin de la aplicacin en una sola superficie
de interfaz de usuario y permite que los usuarios configuren la aplicacin con un
mecanismo con el que ya estn familiarizados. Consulta las directrices para
configuracin de la aplicacin.
Inicio de sesin nico: Asegrate de que los usuarios puedan iniciar sesin con su
cuenta Microsoft y de que disfruten de la misma experiencia en todos los dispositivos
de Windows 8 que usen. Consulta el tema sobre las directrices para inicio de sesin
nico y cuentas conectadas.
Conceptos bsicos
Todas las aplicaciones deben tener una base slida

para llegar al mayor nmero de personas posible.
Pantalla de presentacin: usa la pantalla de presentacin para suavizar la transicin

entre el momento en que el usuario inicia la aplicacin y el momento en que est lista
para su uso. La pantalla de presentacin debe reforzar sutilmente la marca a los
usuarios, no distraerles ni mostrarles publicidad. Consulta las directrices para pantallas
de presentacin.
Suspender y reanudar el estado de la aplicacin: los usuarios mostrarn y ocultarn la
aplicacin en la pantalla y Windows la terminar en segundo plano cuando no se
utilice. Debes guardar y reanudar el estado de la aplicacin cuando sea posible para
mantener el contexto. Consulta las directrices para suspender y reanudar una
aplicacin.
Inicio automtico y "Abrir con": inicia la aplicacin predeterminada para un protocolo
o tipo de archivo desde tu aplicacin. Consulta las directrices para protocolos y tipos
de archivo.
Globalizacin, localizacin y recursos de la aplicacin: Dado que Windows se usa en
todo el mundo, necesitas disear la aplicacin de modo que los recursos, por ejemplo,
las cadenas e imgenes, estn separados del cdigo para facilitar la localizacin.
Consulta el tema sobre las directrices para globalizar tu aplicacin y las directrices para
recursos de la aplicacin.
Accesibilidad: haz que la aplicacin est disponible para todos los usuarios, sin
importar cules sean sus capacidades, discapacidades o preferencias. Si usas los
controles integrados de la interfaz de usuario, tendrs accesibilidad gratuita. Si
necesitas crear controles personalizados, consulta el tema sobre diseo de
accesibilidad.
Ayuda de la aplicacin: proporciona a los usuarios ayuda o sugerencias para la
solucin de problemas. Consulta las directrices para ayuda de la aplicacin.
Categoras de la Tienda: obtn informacin sobre cmo crear excelentes aplicaciones
para categoras especficas de la Tienda Windows, como juegos o entretenimiento.
Consulta las instrucciones sobre categoras.
Inspiracin para el diseo (aplicaciones

de la Tienda Windows) (Windows)
Diseo de juegos espectaculares para Windows
Diseo de aplicaciones de entretenimiento excelentes para Windows
Diseo de aplicaciones de noticias espectaculares para Windows
Disear impresionantes aplicaciones de productividad para Windows
Aplicaciones de deportes
Aplicaciones de compras
Aplicaciones de viajes
Aplicaciones educativas
Juegos
Aprende cmo un juego puede adoptar los principios
de diseo de interfaz de usuario para las aplicaciones
de la Tienda Windows y, al mismo tiempo, mejorar
la experiencia de sus usuarios.
Aplicaciones de entretenimiento
Aprende cmo crear fantsticas aplicaciones de
entretenimiento para Windows 8.
Aplicaciones de noticias
noticias para Windows 8.
Aplicaciones de productividad
productividad para Windows 8.
Aprende a crear fantsticas aplicaciones de deportes
para Windows 8.
Aprende a crear fantsticas aplicaciones de compras
para Windows 8.
Aprende a crear fantsticas aplicaciones de viajes
para Windows 8.
Aprende a crear fantsticas aplicaciones educativas
para Windows 8.
Temas relacionados
Diseo de la interaccin tctil
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
Diseo de juegos espectaculares para

Windows (Windows)

En este artculo
Frase "Lo mejor para"

Iconos dinmicos, iconos secundarios y notificaciones
Pantallas de presentacin y controles de progreso
Diseo y navegacin
Patrn jerrquico
El patrn plano
Interacciones durante el juego
Sensores
Contratos
Configuracin y opciones
Cuentas de jugador
Pausa del juego
Cambios de orientacin y tamao de ventana
Administracin de estados y guardado
Accesibilidad
En resumen
Agradecimientos
Temas relacionados
Windows 8 se ofrece en una variedad incomparable de dispositivos, desde tabletas

centradas en el lpiz y la funcionalidad tctil con sensores modernos, hasta porttiles y
equipos de escritorio de alta resolucin. Este alcance ofrece una oportunidad nica para
que los publicadores de juegos puedan desarrollar experiencias para toda una variedad
de escenarios. En este artculo vers cmo tu juego pueden adoptar los principios de
Windows y las directrices de experiencia de usuario, a la vez que mejora esta
experiencia.
Varias de las funcionalidades nuevas en Windows 8 tienen una importancia particular
para los juegos:
Iconos dinmicos: los juegos pueden atraer a los jugadores desde la pantalla Inicio con
la actividad de iconos que indican puntuaciones, logros, retos e invitaciones de otros
jugadores.
Contratos para contenido compartido y contratos para dispositivos: los acuerdos
entre aplicaciones permiten que tu juego se conecte con otras aplicaciones ya
instaladas en el sistema, la Web, o dispositivos, lo que lo convierten en una experiencia
ms social para los usuarios.
Compatibilidad con una variedad de interacciones de usuario: Windows 8
proporciona compatibilidad con funcionalidad tctil, lpiz, teclado, mouse y
dispositivos de juego externos.
Sensores: Windows 8 admite los sensores modernos, por ejemplo, de luz, giroscopio,
acelermetro y de ubicacin.
Compatibilidad con una variedad de factores de forma y vistas: los juegos se pueden
jugar en varios factores de forma, desde grandes pantallas hasta tabletas. Los controles
del juego se pueden mostrar con diferentes diseos en funcin de los tamaos de
pantalla para obtener una experiencia de juego ptima. Adems, los usuarios pueden
jugar a juegos envolventes con la pantalla completa o mientras realizan otras
actividades en una parte de la pantalla.
Tienda Windows: la Tienda Windows ofrece nuevas oportunidades para que los
desarrolladores de aplicaciones puedan distribuir, promocionar y vender sus juegos y
caractersticas de juegos. La Tienda Windows permite ofrecer fcilmente una versin
de prueba con lmite de tiempo sin necesidad de escribir ningn cdigo. Los
desarrolladores tambin pueden generar una versin de prueba con caractersticas
limitadas, si as lo desean. Las versiones de prueba son la manera ms sencilla de
aumentar las tasas de conversin.
Con este artculo aprenders cmo afectan estas funcionalidades al diseo y el

desarrollo de los juegos para Windows 8. Demostraremos estos principios con los
siguientes juegos: Cut the Rope, Tankster, PuzzleTouch y Cannon Ball.
Frase "Lo mejor para"

Antes de disear el juego, dedicar un rato a escribir una frase "Lo mejor para" que
describa las experiencias que quieres proporcionar a los usuarios. En qu escenario
sobresale tu juego y qu es lo que hace que sea mejor que otros juegos que cumplen el
mismo escenario? Usa tu frase "Lo mejor para" para que te gue en el proceso de diseo
y en la toma de decisiones sobre qu escenarios y caractersticas incluirs y no incluirs.
La frase "Lo mejor para" de Cannon Ball sera proporcionar a los usuarios un simple
pero excitante juego que permite crear msica mientras se dirige una bola por una serie
de de plataformas y se recogen monedas. Durante la planificacin del juego, esta frase
gui las decisiones sobre que escenarios seran compatibles. Para dirigir la bola para que
recogiera las monedas, el usuario tendra que poder cambiar el ngulo de las
plataformas. Para permitir este escenario, se implement el control de entrada con
funcionalidad tctil, teclado y mouse. Esta frase tambin se us para decidir qu
escenarios no seran compatibles. Por ejemplo, se decidi que la aplicacin no admitira
el escenario de guardar la msica creada durante el juego. La posibilidad de guardar la
msica no agregaba nada al juego, por lo que no se implement.
Iconos dinmicos, iconos secundarios y notificaciones

Los juegos pueden usar iconos dinmicos para atraer a los usuarios al juego desde la
pantalla Inicio. Usa un icono dinmico para mostrar informacin sobre las puntuaciones
y los logros ms recientes del jugador, as como su estado de juego actual. Si el juego se
actualiza con nuevo contenido (por ejemplo, los niveles o los objetos del juego), podras
mostrar esta informacin en el icono dinmico con la finalidad atraer a los usuarios al
juego to para que jueguen con el nuevo contenido.
Si el juego supone que haya varios juegos en curso, como los basados en turnos que se
juegan con amigos, considera la posibilidad de que los usuarios puedan anclar ciertos
juegos en Inicio como iconos secundarios. De esta forma, el usuario podr saltar
directamente a un juego particular que le interese. Para obtener ms informacin sobre
los iconos dinmicos, consulta Directrices y lista de comprobacin para iconos y
notificaciones.
Una forma adicional de atraer a los usuarios al juego mientras hacen otras cosas es el
uso de notificaciones del sistema que le informen de cundo es su turno en un juego
basado en turnos o si un amigo ha superado su puntuacin mxima. Sigue estas
directrices de Directrices y lista de comprobacin para notificaciones del sistema
cuando implementes las notificaciones del sistema.
Figura 1: El icono dinmico de Cannon Ball usa la plantilla de imagen

TileWideImageAndText02. Esta plantilla de icono permite que el desarrollador muestre
una imagen colorida del juego que proporcione informacin actualizada sobre la
puntuacin mxima del usuario y la cantidad de tesoros recogidos. Para obtener
informacin detallada sobre otros formatos de iconos, consulta Catlogo de plantillas de
icono.
Pantallas de presentacin y controles de progreso

Despus de abrir el juego, la pantalla de presentacin es lo primero que ver el pblico.
Es una suave transicin desde que el usuario inicia el juego hasta que ya est listo para
jugar. Muchos juegos pueden tardar ms que el mximo de tres segundos en cargar
debido a la gran cantidad de de activos que contienen. Si ocurre esto con tu juego,
asegrate de proporcionar una pantalla de presentacin extendida con un crculo de
progreso que indique al usuario que el juego se est cargando. Para obtener ms
informacin sobre las pantallas de presentacin, consulta Directrices y lista de
comprobacin para pantallas de presentacin.
Algunas veces, este enfoque tambin resulta til durante el juego cuando los recursos
deben capturarse, como al cargarse un nuevo nivel o al prepararse la reproduccin de
una secuencia cinemtica enriquecida. Si alguna vez parece que la aplicacin deja de
responder durante ms de medio segundo, debera mostrarse un control de progreso para
que el usuario sepa que la aplicacin se sigue procesando y que no se ha colgado.
Para agregar ms inters visual mientras se carga la aplicacin, puede incluir una
animacin simultnea que admita la personalizacin de marca.
Diseo y navegacin
Por lo que respecta a la navegacin y los comandos, los juegos pueden suponer
estrategias enriquecidas y complejas que necesiten mens por niveles que incluyan toda
una variedad de opciones o que sean tan simples como los ligeros juegos de
rompecabezas, que podran no incluir ningn men ni opciones. Algunos juegos
incluyen pantallas de logros, tableros de puntuaciones mximas, salones de
multijugadores y mucho ms, mientras que otros se le ofrecen al usuario una sola
experiencia: el propio juego. Un gran juego de Windows 8 se asegurar de que la
navegacin entre varias experiencias sea rpida y fluida, y el patrn de navegacin que
uses debera estar basado en el tipo de experiencia que proporcione tu juego. Antes de
continuar, tendrs que revisar y comprender los dos patrones (jerrquico y plano) que se
tratn aqu. Selecciona el patrn apropiado que ayude a los usuarios a encontrar el
contenido que desean. Con frecuencia, no es el propio juego sino el resto del contenido
lo que ayuda a determinar qu modelo necesitas.
Si incluyes varias experiencias enriquecidas en tu juego, ms all del juego en s, usa el
patrn jerrquico para reunir todo el contenido en el nivel superior, en lugar de ocultarlo
en mens. Cada vez que se juega a tu juego, todas las experiencias cuidadosamente
creadas se colocan delante del jugador. Sin embargo, si la nica experiencia es el juego,
considera la posibilidad de un patrn plano que permita a los usuarios navegar
rpidamente entre las varias sesiones del juego (por ejemplo, juegos con varias partidas
de uno a uno con amigos). Consulta Diseo de navegacin para aplicaciones de la
Tienda Windows para obtener ms informacin sobre los modelos de navegacin.
Patrn jerrquico
Con el patrn jerrquico, puedes poner todo el contenido delante del usuario para
entretenerle y hacer que su primera experiencia sea completa. En el concentrador del
juego puedes mostrar los puntos de entrada al juego, como seleccionar nivel, nuevo
juego o continuar juego, as como los logros recientes, las listas de amigos y otras reas
de contenido, todo en la misma superficie que se puede mover panormicamente. De
este modo puedes mostrar a los jugadores un contenido reciente y actualizado cada vez
que vean el concentrador, animndolo con actividad incluso cuando el usuario no est
jugando al propio juego. Cada rea puede presentar contenido con el que los jugadores
puedan interactuar directamente. Usa los encabezados de seccin como puntos de
navegacin para llegar a una vista ms profunda del contenido de esa categora.
Tambin puedes usar el concentrador para transmitir la personalidad y la
personalizacin de marca del juego. Por ejemplo, si un usuario selecciona un nivel
particular, el fondo de la pgina de la seccin podra reflejar el nivel que est viendo el
usuario.
El concentrador del juego tambin proporciona una forma de mostrar contenido
actualizado y reciente a los usuarios cada vez que lo ven, animndolo con actividad
incluso cuando los usuarios no estn jugando al propio juego. Por ejemplo, considera la
posibilidad de la experiencia de logros modelada en la Figura 1. Divide los logros en
categoras y proporciona informacin acerca de cada uno de ellos, todo al mismo tiempo,
indicando a los usuarios de qu se trata y cunto les falta para desbloquearlo.
Figura 2: Microsoft Solitaire Collection usa un patrn jerrquico para que el usuario
pueda navegar por muchas experiencias de juego diferentes.
Dentro el juego siempre debers incluir una forma de regresar al concentrador. Con
frecuencia esto se hace mediante un botn Atrs en la barra de la aplicacin superior,
que es la ubicacin adecuada para cualquier comando de navegacin. La clave est en
que los usuarios deberan sentirse como si navegaran naturalmente por el contenido del
juego para obtener lo que desean, en vez de buscar por los mens. Considera la
posibilidad de dejar que los usuarios utilicen el zoom semntico para moverse
jerrquicamente entre las secciones del men. Si un usuario se encuentra en una seccin
particular del concentrador principal, pueden acercar los dedos para alejarse con zoom
semntico y volver rpidamente a otras secciones del men.
Figura 3: Microsoft Solitaire Collection usa el zoom semntico para que los usuarios
puedan moverse rpidamente entre secciones del concentrador.
El patrn jerrquico debera permitir a los usuarios moverse sin problemas de una
experiencia a otra y permanecer inmersos en todo momento en el contenido del juego.
Esta es una gran eleccin para los juegos con muchas opciones distintas de juego o para
los que tienen muchas experiencias secundarias.
El patrn plano
El patrn plano mantiene la experiencia del juego en el centro. Es un gran diseo para
los juegos que no tienen otras experiencias independientes. Con el patrn plano, en vez
de llevar al usuario a un concentrador poco denso, puedes usar la barra de la aplicacin
superior como base para la navegacin. Presenta all las diferentes sesiones del usuario
y djale que se mueva fcilmente entre ellas. Si hay un estado previo al inicio del juego
o si has puesto el juego en pausa, considera la posibilidad de presentar una pantalla que
muestre al usuario la personalizacin de marca de tu juego y que proporcione tambin
un lugar que se identifique como el inicio en el juego. No es necesario mostrar la
barra de la aplicacin superior cuando se inicie el juego. Por ejemplo, la aplicacin
Internet Explorer lleva a los usuarios a la ltima pgina web que visitaron y depende de
ellos para invocar la barra de la aplicacin para navegar por las pestaas.
La figura 4 muestra un juego que no ofrece ninguna otra experiencia aparte de las
sesiones del juego y los medios para navegar por ellas. En lugar de intentar mover una
pequea funcionalidad a un concentrador, usa el patrn plano para poner todo el
contenido del juego delante de los usuarios y dejar que naveguen de forma rpida y
segura por l.
Figura 4: En Tankster, los usuarios interactan directamente con el juego, no a travs

de un concentrador.
Consideraciones de diseo adicionales: las aplicaciones deberan mantener siempre
una sola direccin de desplazamiento. Si tienes una pgina de concentrador con
movimiento panormico horizontal, todos los campos de la aplicacin deberan
desplazarse horizontalmente. No debera haber instancias de movimiento panormico
vertical. Por ejemplo, si tiene un largo panel de puntuaciones que normalmente se vera
en sentido vertical, ajusta su contenido de modo que se muestre en un diseo de
columna. Si te preocupa una larga lista de informacin, considera la posibilidad de dejar
que el usuario use el zoom semntico para saltar de un final de una larga lista a otro
final.
Interacciones durante el juego

Interacciones tctiles: se recomienda la manipulacin directa como medio para
controlar un juego. Windows 8 admite una serie de potentes interacciones multitoque
(hasta 5 entradas), que permiten que los usuarios realicen tareas como el movimiento
panormico/zoom y ejecutar un comando al mismo tiempo, o mover el jugador o la
cmara del juego y disparar simultneamente. Asegrate de disear las interacciones de
forma que cualquier usuario, incluso los usuarios que usen dispositivos sin sensores ni
funcionalidad tctil, puedan jugar al juego con el mouse y el teclado.
El uso de controles virtuales (por ejemplo, un pad direccional invisible para controlar el
movimiento de un personaje, o deslizar un dedo hacia la izquierda o la derecha para
guiar un vehculo) te permite evitar el abarrotar el Canvas con botones y controles y
deja mucho espacio para que los usuarios interacten con el juego. Si vas a usar
controles de joystick o de botn virtuales en el Canvas, deja que los usuarios
personalicen el tamao y la posicin de los controles, o haz que sean relativos para que
aparezcan donde el usuario ponga los dedos o los pulgares. No hay un solo lugar que
satisfaga ergonmicamente a todos los usuarios. Para la colocacin predeterminada de
un control de joystick virtual, ten en cuenta dnde estar el pulgar cuando el usuario
sostenga la tableta tctil.
Considera si las interacciones tctiles del usuario podra invocar accidentalmente a un
comportamiento de borde, como sacar otra aplicacin activa desde el lado izquierdo de
la pantalla o sacar la barra de accesos. Los comandos en el juego y las interacciones
asociadas a ellos siempre deben estar al menos a 20 pxeles de los bordes de la pantalla
para que no interfieran con los elementos de la interfaz de usuario, como los accesos y
las barras de la aplicacin. Considera la posibilidad de agregar algn tipo de "barrera"
visual que recuerde al usuario que no debe deslizar el dedo rpidamente cerca de los
bordes, o modifica los controles para evitar deslizamientos desde los bordes
accidentales. Tambin es importante que no tengas comandos de juegos que requieran
que el usuario mueva el mouse a las esquinas de la pantalla, ya que el sistema usa las
esquinas para abrir accesos y extraer otras aplicaciones activas cuando el usuario use el
mouse.
Modos de entrada mltiples: los juegos deberan ser compatibles con la funcionalidad
tctil, adems del teclado, el mouse o el lpiz. Para lograr una gran experiencia en todos
los factores de forma, los juegos deberan admitir todos los modos de entrada siempre
que sea posible, y el esquema de controles debera ser tan fluido y coherente como sea
posible independientemente del modo de entrada. El cambio del mtodo de entrada
debera administrarse dinmicamente en tiempo real. Por ejemplo, si se detecta un
evento tctil, resalta los controles correspondientes a la funcionalidad tctil; si se detecta
un clic de mouse, atena los controles correspondientes al mtodo tctil. Gestiona el
cambio del mtodo de entrada del modo ms dinmico posible. No incluyas
configuraciones que permitan a los usuarios activar o desactivar los controles tctiles o
elegir el uso del mouse. No le preguntes al usuario qu mtodo de entrada desean usar
para jugar al juego. Lo ideal sera que el juego admitiera todos los modos de control a la
perfeccin y por igual sin necesidad de tener que cambiar de modo.
Comandos de la barra de la aplicacin: cuando se a posible, disea el juego de modo

que el usuario pueda jugarlo manipulando directamente el contenido en el Canvas, en
vez de usar comandos que acten en el contenido. Si se requieren comandos adicionales
o controles de navegacin, los usuarios esperarn encontrarlos en la barra de la
aplicacin. Los comandos de navegacin estn situados en la barra de la aplicacin
superior, mientras que los dems comandos estn en la inferior. Los comandos que
siempre estn disponibles, como el de iniciar un juego nuevo, deberan ir a la derecha de
la barra de la aplicacin inferior. En el lado izquierdo, agrega los comandos
contextuales; es decir, los que dependen de la ubicacin del usuario en el concentrador o
dependen de lo que se ha seleccionado en el concentrador. Por ejemplo, si tienes una
lista de juegos guardados en el concentrador para un juego de rol, puedes esperar que el
usuario seleccione un juego guardado e invoque la barra de la aplicacin inferior,
anticipando que aparecer un comando Eliminar en el lado izquierdo de la barra de la
aplicacin.
Hazte un par de preguntas que te ayudarn a determinar si un control debera
encontrarse en el Canvas o en la barra de la aplicacin inferior:
Este control se usar con frecuencia?

Este control es fundamental para jugar el juego?
Si respondes "s" a las dos preguntas, sera buena idea poner el control en el Canvas.
Esto garantiza que los usuarios no se frustren al tener que sacar constantemente la barra
de la aplicacin para avanzar en el juego.
En la figura 5, no se ven controles en el Canvas. Los usuarios juegan mediante
manipulacin directa. Sin embargo, cuando deslizan rpidamente el dedo desde abajo o
hacen clic con el botn secundario del mouse, aparece una barra de la aplicacin que les
permite poner el juego en pausa o cambiar el arma equipada.
Figura 5: Cannon Ball se puede jugar con manipulacin directa. El usuario gira las
plataformas con la funcin tctil o con el mouse para guiar la bola por el camino de
monedas. Si el usuario necesita reiniciar un nivel, puede sacar la barra de la aplicacin
para hacerlo.
Figura 6: En Cut the Rope, el botn Deshacer es muy importante, por lo tanto ocupa su
espacio en el Canvas. Est disponible en la esquina superior derecha porque es una
accin frecuente en este juego.
Puedes aplicar un estilo fcilmente a las barras de la aplicacin para que reflejen la
personalizacin de marca o la personalidad del juego. Tambin se puede aplicar estilo a
los botones y las barras de progreso. En la figura 4 se muestra una barra de la aplicacin
con estilo personalizado. La barra de la aplicacin puede tener cualquier forma, color y
tamao que desees.
Para planear cmo distribuir los controles en una barra de la aplicacin, consulta las
instrucciones de la barra de la aplicacin. Para obtener ms informacin sobre los
controles, consulta Diseo de comandos para aplicaciones de la Tienda Windows.
Sensores
La integracin de sensores en Windows 8 representa una nueva clase de oportunidades
de interaccin para los juegos y las experiencias de entretenimiento interactivas. Con el
acceso al acelermetro, la brjula, el girmetro, los sensores de luz y otros, el juego
puede ser tan dinmico y envolvente como desee el diseador. Windows 8 tambin
ofrece Sensor Fusion, que permite realizar un ajuste preciso de la orientacin y la
ubicacin de datos que pueden aprovechar los juegos.
Al desarrollar un juego habilitado para sensores, considera la gama de posibilidades y
determina qu es lo que admiten tus escenarios bsicos. Asegrate de elegir el sensor
adecuado para la tarea.
Puedes usar el acelermetro para manejar el volante de un coche o para elementos de

los juegos que se pueden inclinar.
Puedes detectar el movimiento del dispositivo para girar un personaje o un punto de
vista de la cmara.
Agitar el dispositivo puede resultar una excitante manera de defenderse de los
enemigos o de restablecer un tablero de juego en un rompecabezas.
Puedes usar un sensor de luz para cambiar el ambiente o la iluminacin de la
representacin de un juego para mejorar la interactividad envolvente.
Puedes usar un micrfono o una cmara para integrar elementos de entorno realistas
en el juego.
Puedes lograr la realidad aumentada con la integracin de la cmara, Sensor Fusion y
elementos "secretos" de presentacin en un juego con objetos ocultos.
Las posibilidades son inmensas y, aunque no todos los sensores tengan sentido en todos
los juegos, con un poco de creatividad un sencillo gesto o movimiento puede
reemplazar a muchos mens o comandos. Para obtener ms informacin acerca de cmo
se pueden usar los sensores, consulta el artculo Anima tu aplicacin con la ubicacin y
los sensores.
Contratos
Usa los contratos de Windows 8 para enriquecer la experiencia del juego y conectarlo
con el resto de la experiencia de Windows 8. Para obtener ms informacin sobre
contratos, consulta Extensiones y contratos entre aplicaciones. A continuacin se
muestran algunos ejemplos de contratos tiles que se pueden implementar.
Buscar: los juegos pueden ofrecer algunos escenarios de bsqueda interesantes. Piensa
en qu es lo que le gustara poder buscar al usuario desde cualquier lugar del juego o
desde otra aplicacin. Por ejemplo, podras habilitar Buscar para hacer bsquedas de las
situacin o las estadsticas de un amigo, para buscar a un amigo con el que jugar o para
encontrar un elemento particular del juego que has adquirido. En estos casos, sigue las
directrices de bsqueda existentes y evita usar controles de bsqueda en el Canvas. Los
usuarios estarn familiarizados con el acceso a Buscar para descubrir cosas adicionales
en el juego. Para obtener ms informacin sobre la bsqueda, consulta Directrices y
listas de comprobacin para bsqueda.
Compartir: El contrato para contenido compartido te permite conectar a un jugador con
otros jugadores, lugares de medios sociales o amigos, permitindoles compartir un logro
o un estado particular, o incluso capturas de pantalla y clips de vdeo del juego.
Tambin puedes usar este contrato para compartir datos entre juegos. Por ejemplo,
puedes enviar a un amigo un elemento determinado creado para un juego de rol para
que lo use en su juego, o enviar un rompecabezas personalizado para que lo resuelva un
amigo.
Al elegir lo que se comparte, considera cmo deseas transmitir tu marca para aplicar un
estilo a la informacin compartida. Es posible compartir toda una variedad de formatos
distintos (mediante direcciones URL, correo electrnico, aplicaciones sociales y
servicios de nube) y los usuarios podrn compartir con los amigos que tal vez no tengan
el juego o incluso que usen otras plataformas. La forma de comunicar tu marca de
manera eficaz en cualquier informacin podra hacer, por lo tanto, que la aplicacin
llame la atencin a ms usuarios.
Si tu juego puede usar datos de otras aplicaciones y transformarlos de manera
interesante, deberas considerar la posibilidad de definir la aplicacin como un destino
de contenido compartido. Por ejemplo, el juego PuzzleTouch recibe una foto de la
aplicacin de fotos y la transforma en un rompecabezas segn las preferencias del
usuario. Para obtener ms informacin sobre Compartir, consulta Directrices y lista de
comprobacin de uso compartido de contenido.
Figure 7: PuzzleTouch es un destino de contenido compartido. Permite a los usuarios

crear rompecabezas con sus propias fotos.
Dispositivos: La implementacin de dispositivos es una gran manera para que los
usuarios conecten mandos y otros perifricos a sus equipos para preparar una partida, y
para que muestren el contenido del juego en una pantalla mayor. Los usuarios tambin
pueden imprimir desde el acceso a Dispositivos.
Configuracin y opciones
Todo el contenido de configuracin, opciones, directiva de privacidad, Acerca de,
Crditos y Ayuda del juego debera estar accesible a travs del acceso a Configuracin.
El acceso a Configuracin es el lugar donde todas las aplicaciones de Windows 8 alojan
su configuracin y sus opciones, y es el lugar donde normalmente los usuarios miran
cuando quieren ajustar los efectos de sonido del juego o cambiar un aspecto del juego.
La modificacin de la configuracin no debera hacerse en la superficie del juego ni en
la barra de la aplicacin, a no ser que sea una actividad frecuente del juego. Los
usuarios ya sabrn que deben acudir al acceso a Configuracin para ver la configuracin,
de modo que no debe haber ningn men que duplique la funcionalidad de este acceso
ni ningn elemento de la interfaz de usuario que sirva solo para abrir el panel de
configuracin.
Windows 8 proporciona un control de volumen global, pero muchos juegos podran
tener su propia configuracin de audio ms compleja (como controles deslizantes de
volumen individuales para la msica, los efectos de sonido y las voces, que los usuarios
pueden ajustar independientemente). Incluye una etiqueta que indique claramente que la
configuracin de audio es especfica de tu juego. Los botones y los controles deslizantes
de configuracin proporcionan una reaccin en tiempo real, en vez de requerir una
accin secundaria de un botn Aceptar para confirmar los cambios.
Si el juego incluye ayuda o un aprendizaje inicial del juego, como los tutoriales, pon
esta informacin en el acceso a Configuracin. Otra opcin sera que los tutoriales estn
disponibles como parte del propio juego. Un ejemplo de esto se ve en la figura 8, en la
que la aplicacin hace que el tutorial forme parte de la experiencia inicial del juego.
Figure 8: En Cut the Rope, el tutorial del juego forma parte de la experiencia inicial del
juego.
Cuentas de jugador
Las cuentas de jugador resultan tiles para realizar el seguimiento del progreso de un
jugador a travs del juego, vincular el jugador a las redes sociales y habilitar modelos de
ingresos. Gracias a la compatibilidad con cuentas de jugador, puedes crear una
experiencia ms atractiva que haga que los usuarios regresen y que les permitir jugar
con sus amigos.
Inicio de sesin del usuario: si resulta fundamental para la experiencia de juego que el
usuario inicie sesin, como un juego de redes sociales que requiere el acceso a los datos
y las conexiones sociales del usuario, dedica la "experiencia de aterrizaje" del juego al
inicio de sesin en lugar de presentar al jugador un juego que no puede jugar. Siempre
que sea posible, intenta obtener la informacin de inicio de sesin de la cuenta
Microsoft de un usuario o de la informacin de inicio de sesin almacenada en cach de
las sesiones anteriores del juego.
Si el juego se puede usar sin iniciar sesin pero es muy recomendable que se inicie (por
ejemplo, si el modelo de ingresos del juego depende de que el usuario inicie sesin para
notificarle contenido descargable que quizs an no tenga), el juego puede dedicar un
espacio de su concentrador al inicio de sesin o dedicarle su experiencia de aterrizaje. Si
ocupa espacio en el concentrador, el juego debera comunicar claramente a los usuarios
que no han iniciado sesin. Despus de que el usuario haya iniciado sesin, quita por
completo la seccin de inicio de sesin o reemplzala por un contenido que sea
exclusivo para el usuario. Si el juego ha dedicado la experiencia de aterrizaje para
iniciar sesin, debe dar al usuario la opcin de omitir el inicio de sesin y, si el usuario
elige no iniciar sesin, debe respetar su decisin y no llevarle de regreso a dicha pgina
en posteriores sesiones del juego. En estos casos, puedes usar espacio en el
concentrador para controlar el inicio de sesin.
En los casos en los que iniciar sesin sea opcional, la experiencia de inicio de sesin
debera situarse en el acceso a Configuracin. El panel Configuracin podra abrirse
cuando se inicia la aplicacin para ayudar al usuario a encontrar la experiencia de inicio
de sesin.
En todos los casos, el inicio de sesin tambin debera estar disponible en el panel
Administracin de cuentas de Configuracin.
Administracin de cuentas y cierre de sesin: los escenarios de administracin de
cuentas (como actualizar la direccin de correo electrnico del usuario o cambiar la
contrasea) se llevan a cabo en panel Configuracin. De forma similar, las experiencias
de cierre de sesin deben hospedarse en Configuracin junto con las dems opciones.
Pausa del juego

No todos los juegos necesitan admitir la pausa. En los juegos basados en turnos, por
ejemplo, por lo general no debera existir el concepto de la pausa. Adems, los juegos
controlados totalmente por un usuario, sin ningn otro factor externo, como un
temporizador o un reloj, no obtienen ningn beneficio con la pausa. En estos casos, la
pausa no es necesaria cuando los usuarios salen del juego. Al regresar al juego, este
debera presentarles la misma experiencia que tenan antes de salir. Si no es posible (por
ejemplo, si se ha terminado una sesin de juego multijugador), el juego debera
comunicar claramente a los usuarios en qu estado se encuentran.
Para los juegos que tienen escenarios de pausa significativos, haz que se registre la
prdida de foco y que el juego entre en pausa cuando el usuario deslice rpidamente el
dedo de izquierda a derecha por el borde de la pantalla, o cuando aparezca un cuadro de
dilogo del sistema. Si tienes un juego muy rpido o basado en el tiempo, este debera
ponerse en pausa cuando cambie la vista o la distribucin. El usuario debera poder
cancelar la pausa y seguir jugando en la nueva distribucin si es compatible. Un juego
no debera basarse en la prdida del foco para determinar que debe pausarse. Considera
la posibilidad de incluir adems un botn de pausa en el juego. Determina la ubicacin
del comando de pausa en funcin de las mismas consideraciones de colocacin de
comandos tratadas en la seccin "Interacciones durante el juego" de este tema.
Comunicacin del estado en pausa: Notifica a los usuarios que el juego est en estado
de pausa. Puedes presentar una imagen superpuesta o una pantalla de pausa. Para los
juegos de rompecabezas, estrategia o temporizados, oculta el Canvas del juego mientras
este est en pausa para que los usuarios no se aprovechen injustamente de la pausa para
estudiar el tablero.
Haz que reanudar el juego sea tan fcil como ponerlo en pausa. Tanto la imagen
superpuesta como la pantalla de pausa deberan contener alguna forma de quitar la
pausa del juego. Si el usuario navega por la pgina del concentrador, asegrate de poner
el juego en pausa. Cuando el usuario regrese al juego o cancele la pausa, el juego
debera continuar desde el mismo estado en el que se encontraba.
Cuando los usuarios reanudan el juego, considera la posibilidad de darles un momento
para que se orienten antes de retomar la accin. Una buena manera es utilizar una cuenta
atrs.
Los juegos que presentan controles de flujo de tiempo (por ejemplo, los juegos de
construccin de ciudades) pueden "pausar" el flujo de tiempo, pero esto no es lo mismo
que pausar el juego. Pausar es cesar por completo la interaccin del usuario con el juego,
aunque puede haber alguna representacin de fondo para que las animaciones sigan
reproducindose.
Cambios de orientacin y tamao de ventana

Una aplicacin puede tener uno de cuatro estados visuales: horizontal a pantalla
completa, vertical a pantalla completa, acoplada y rellena. Tu juego debera admitir las
vistas a pantalla completa, rellena y acoplada, y opcionalmente la vertical. Asegrate de
mantener el estado al cambiar entre vistas. Pasar de pantalla completa a vista vertical no
debera llevar al usuario a la pantalla de inicio, sino que debera mostrarle una versin
modificada de la pgina en la que se encontraba.
Cuando el juego est en estado relleno, debe poder jugarse y solo tiene que ajustar su
presentacin al espacio proporcionado. Esto se puede lograr fcilmente cambiando la
pantalla del juego al formato de pantalla ancha, sin embargo tambin podras rellenar
toda la vista rellena reorganizando levemente los elementos del juego o usando el zoom
y recortando hasta que quepa bien. Si el foco se mueve desde el juego a la aplicacin
acoplada, el juego deber ajustarse (o entrar en pausa) como corresponda.
Hacer que tu juego se pueda jugar mientras est en vista acoplada habilita la multitarea
y permite que los usuarios sigan jugando mientras hacen otras cosas en su sistema, de
modo que puedan estar entretenidos con el juego durante ms tiempo. Este enfoque
resulta especialmente adecuado para juegos ligeros e informales que pueden ocupar la
atencin del usuario sin ocupar necesariamente toda la pantalla. Por ejemplo, un usuario
podra continuar resolviendo un rompecabezas o jugando un juego de mesa que est en
la vista acoplada. Si el juego tiene una actividad secundaria (como un chat con los
amigos o explorar un mapa), esa actividad tambin tendra que funcionar en la vista
acoplada.
Figura 9: Cannon Ball se puede jugar en vista acoplada. Los elementos del juego
cambian de tamao para que quepan en un tamao de pantalla ms pequeo y la pgina
se escala para que el usuario pueda ver ms en el nivel.
Considera cmo sern las interacciones tctiles en la vista acoplada. Con un tamao de
pantalla menor, los usuarios podran invocar accidentalmente acciones del borde de la
pantalla. Piensa cmo puedes modificar los controles para evitar deslizamientos rpidos
accidentales por el borde. Tambin es importante que consideres la colocacin de los
comandos en la vista acoplada. Es posible que no todos los comandos quepan en una
barra de la aplicacin en vista acoplada. Si este es el caso, considera la posibilidad de
agrupar los comandos o proporcionar una experiencia ms enfocada que requiera menos
comandos. Recuerda que las etiquetas de los iconos se ocultan de manera
predeterminada en la vista acoplada, as que ten cuidado y elige iconos que se puedan
identificar fcilmente.
Si el juego no se puede jugar en la vista acoplada o si alcanza un estado en el que para

progresar necesita ms espacio en pantalla, debe ponerse en pausa y explicar al usuario
que no se puede continuar hasta que la aplicacin salga de la vista acoplada. Puedes
incluir un botn para cancelar la pausa, que desacopla el juego y lo reanuda, pero el
juego no debera desacoplarse por s solo mediante programacin sin la accin del
usuario. Intenta no sorprender al usuario sacando el juego de la vista acoplada cuando
no se lo espere. No debera haber un elemento de interfaz de usuario solo para acoplar y
desacoplar el juego. Para obtener ms informacin acerca de la vista acoplada, consulta
Directrices para vistas acopladas y rellenas.
Figura 10: Cut the Rope no se puede jugar en vista acoplada. Muestra una pantalla de
pausa y permite que el usuario seleccione "Continuar" si quieren desacoplar el juego y
reanudarlo.
Es fundamental considerar cmo se escalar el juego en diferentes resoluciones de
pantalla. Estirar o comprimir el juego no har que tenga un mejor aspecto, ya que las
distintas pantallas tienen diferentes relaciones de aspecto. En vez de escalar
directamente, podras tener un diseo adaptable que ajuste lo que es visible en funcin
de la resolucin. Por ejemplo, en una pantalla ms grande puedes mostrar ms
contenido, como incluir ms espacio del nivel, en vez de estirar la vista. Y si eliges no
tener un diseo adaptable, Windows 8 proporciona regiones de letterbox habilitados
para temas para las aplicaciones que usan XAML o HTML, de modo que puedes
mantener fcilmente una experiencia envolvente con la relacin de aspecto adecuada en
cualquier pantalla. Para obtener ms informacin acerca del escalado de pantallas,
consulta Directrices para el escalado en pantallas.
Administracin de estados y guardado

Tu juego debe seguir el modelo de estado de otras aplicaciones de la Tienda Windows.
Deber recordar su ltimo estado y llevar al usuario a dicho estado cuando se active el
juego.
Los juegos que se suspendan tambin deben ponerse en pausa, a menos que sea un
juego que no tiene un modo de pausa significativo. Si una aplicacin no tiene un modo
de pausa, cuando el usuario vuelva a entrar en el juego debera ir directamente a la
experiencia de juego.
En un juego multijugador permanente, si ya ha terminado la sesin que el usuario haba
iniciado, debe mostrarse una pantalla posterior a la partida o informarle al usuario de
alguna manera que el juego ha terminado.
Estas instrucciones relativas a la administracin de estados son independientes del
concepto de "puntos de control" o "archivos de juegos guardado" o de varias partidas
guardadas en un juego. Pertenecen exclusivamente al ciclo de vida del proceso de
Windows 8. Para obtener ms informacin sobre la administracin de estados, consulta
Directrices para suspender y reanudar una aplicacin.

Crea una experiencia continua de un dispositivo a otro con la movilidad de
configuracin y estado del juego, para que un usuario pueda retomar un juego
exactamente donde lo dej, independientemente del dispositivo que est usando.
Mantn la configuracin y los estados con movilidad para que los usuarios puedan usar
la aplicacin en cualquier parte, ya sea en el equipo familiar de la cocina, en el del
trabajo o en una tableta personal. Para obtener ms informacin, consulta Directrices
para perfiles mviles de datos de la aplicacin.
Accesibilidad
Los usuarios de Windows pueden tener una amplia variedad de capacidades y
discapacidades. Si piensas que tu juego se podra reimaginar para hacer que puedan
jugar las personas con discapacidades, asegrate de acomodarlo a estos usuarios. Las
personas con discapacidades pueden usar la funcionalidad de bsqueda de aplicaciones
accesibles para encontrar tu juego si lo marcas como accesible al enviarlo a la Tienda
Windows. La incorporacin de los principios de accesibilidad en la aplicacin garantiza
que tu juego pueda ser usado por una pblico ms amplio y ayuda a atraer ms clientes
al juego. Las caractersticas de accesibilidad son fciles de incluir en las aplicaciones de
la Tienda Windows, en particular si se tuvieron en cuenta en las fases iniciales del
proceso de diseo. Al agregar las caractersticas de accesibilidad, los juegos podrn ser
mejores para todos los usuarios. Por ejemplo, permitir que se puedan reasignar o situar
los controles en funcin de cmo ponga las manos el usuario, har que tanto los
jugadores diestros como los zurdos puedan jugar de la forma ms cmoda posible.
Hay varios escenarios importantes que debes tener en cuenta al disear para la
accesibilidad.
Diseo para impedimentos visuales: los usuarios ciegos o con impedimentos visuales
usan lectores de pantalla para desarrollar un modelo mental de la interfaz de usuario del
juego. Para que un lector de pantalla funcione, todos los elementos de interfaz de
usuario del juego deben estar etiquetados adecuadamente con un nombre, un rol, una
descripcin, un estado, una posicin y cualquier otra informacin relevante. Es
importante tener en cuenta qu aspecto tendr la interfaz de usuario cuando se habiliten
las opciones de accesibilidad en todo el sistema (configuracin de Accesibilidad), como
"Aumentar el tamao de los objetos en la pantalla" o el modo de contraste alto. Es
posible que necesite crear activos alternativos para el modo de contraste alto o agregar
cdigo adicional para ajustar los elementos visuales del juego cuando el usuario habilite
el modo de contraste alto en todo el sistema. Asegrate de usar un esquema de colores
preparado para daltnicos, y si hay partes del juego en las que se usa el color para
transmitir informacin, asegrate de que esta informacin se pueda transmitir tambin
de otra manera, como con texto, formas o iconos.
Figura 11: Cannon Ball se puede jugar en modo de contraste alto. Para habilitarlo, los
desarrolladores crearon un conjunto de activos alternativos que se activan cuando el
sistema entra en modo de contraste alto.
Diseo para accesibilidad de teclado y mtodos de entrada alternativos: el teclado

es fundamental para usar un lector de pantalla y para los usuarios que usan mecanismos
de entrada alternativos, como controladores de interruptores o equipos de seguimiento
de ojos. Asegrate de que se pueda navegar por todos los elementos de interfaz de
usuario con las teclas de flecha y de tabulacin. Los elementos de interfaz de usuario
deberan poder activarse con la barra espaciadora y la teclas Entrar. Los comandos y
controles deberan ser accesibles con mtodos abreviados de teclado. Piensa cmo
puedes hacer que tu juego se pueda jugar con solo el teclado. Por ejemplo, en Cannon
Ball, las plataformas se pueden girar con las teclas de flecha, haciendo que el juego se
pueda jugar completamente con entradas de teclado.
Diseo para impedimentos auditivos: si el juego usa indicaciones de audio o voz para
transmitir informacin, debera haber subttulos disponibles para los usuarios sordos o
con dificultades auditivas. Debera haber substitutos visuales para todos los elementos
de audio y el ambiente y el significado del juego debera poder transmitirse incluso sin
sonido. Si tienes varios sonidos diferentes a la vez, como efectos sonoros y dilogo,
proporciona controles de volumen independientes para cada uno para as ayudar a la
comprensin.
Diseo para impedimentos cognitivos: el juego debera permitir una amplia gama de
niveles de dificultad y velocidades de juego, siempre que sea posible. Considera cmo
podran jugar al juego los usuarios con impedimentos cognitivos o de aprendizaje.
Podra jugar al juego alguien que est aprendiendo a leer? Si es posible, ofrece un
modo de espacio aislado o de juego libre sin limitaciones de tiempo para los usuarios
que puedan tener movilidad limitada o una discapacidad de aprendizaje.
En resumen
Los juegos proporcionan mucho contenido enriquecido con el que pueden interactuar
los usuario, y un gran juego de Windows 8 pone ese contenido delante del usuario, en
un lugar visible, eliminando las partes innecesarias de la interfaz de usuario que se
interponen en su camino. Al seguir los consejos y las directrices desarrolladas en este
tema, podrs disear cada componente del juego para lograr la mejor experiencia de
juego posible.
Agradecimientos
Muchas gracias a Andy Atkinson, Jessica Noglows, Todd Landstad, Keith Rowe, Nazia
Zaman, Dan Keller, Brian LaVee, Bonny Lau, Shai Hinitz, Lora Heiny, Phil Napieralski,
Kevin Lambert, Chantal Leonard, Sara Summers, Mark Hopkins, and Clemens Lutsch
por su apoyo y sus indicaciones para poder escribir este artculo.
Temas relacionados
Diseo de aplicaciones de
entretenimiento excelentes para
Windows (Windows)

En este artculo
Introduccin
Diseo y navegacin en aplicaciones multimedia
Pulsar elementos en la vista de concentrador
Experiencia de reproduccin en curso
Navegacin entre videoclips o episodios anterior y siguiente
Comandos
Clasificacin y revisin
Tipografa en aplicaciones multimedia
Contratos
Conectado y activo
Orientacin y vistas
Procedimientos recomendados de msica y vdeo
Temas relacionados
Aqu veras ideas de diseo que te ayudarn a crear aplicaciones multimedia de gran
eficacia y popularidad.
Introduccin
tctiles a porttiles y equipos de escritorio de alta resolucin. Muchas de las nuevas
caractersticas de Windows 8 son especialmente adecuadas para experiencias de
entretenimiento y multimedia, y otorgan a los publicadores de contenido nuevas formas
de conectar, atraer y acercarse a su pblico.
La nueva Tienda Windows tambin ofrece grandes oportunidades a los publicadores de
contenido de distribuir, promover y vender su contenido. El acuerdo comercial en la
Tienda Windows te permite usar el motor de comercio que ofrece Microsoft. O, si lo
prefieres, puedes usar tu propio motor de comercio, lo que te permitir llevar tu negocio
a tu aire y maximizar la flexibilidad y los ingresos.
Este documento resalta las nuevas funciones de Windows 8 que son de especial
importancia para los publicadores de entretenimiento y multimedia. Esto incluye:
Aplicaciones de la Tienda WindowsUn nuevo lenguaje de diseo para aplicaciones,

donde el contenido adquiere el rol ms importante.
Iconos dinmicos y notificaciones del sistemaHaz que el usuario vuelva a tu
aplicacin con una promocin eficaz del contenido y notificaciones relevantes, incluso
cuando tu aplicacin no se est ejecutando.
Contratos de Buscar y contratos para contenido compartidoBuscar y compartir
contenido multimedia son ahora funciones de nivel superior del sistema operativo, que
crea una experiencia del usuario ms coherente y facilita las tareas de buscar y
compartir contenido en tus aplicaciones.
Contratos de dispositivoLos usuarios pueden enviar contenido desde sus equipos a
dispositivos en red como televisores y receptores de audio y vdeo, lo que permite una
participacin y visualizacin de grupos.
Diseo y navegacin en aplicaciones multimedia

Las aplicaciones de entretenimiento suelen tener muchas categoras distintas para
diferentes tipos de medios. Por ejemplo, una aplicacin de pelculas te puede permitir
buscar pelculas por gnero, por un director o actor especfico, por tus preferencias de
cine anteriores o por contenido destacado. De forma similar, en el caso de aplicaciones
de msica, los usuarios pueden buscar contenido por intrprete, lbum, gnero y
contenido destacado. Para una experiencia ptima del usuario final con una aplicacin
multimedia, es crucial organizar el contenido de forma significativa para que los
usuarios puedan encontrar lo que quieren de forma rpida y fiable. El uso de patrones de
navegacin jerrquicos y de otros tipos en las aplicaciones de la Tienda Windows
convierte a tu aplicacin en rpida, fluida y fcil de usar, y permite a los usuarios
encontrar lo que quieren rpidamente.
El artculo Diseo de navegacin para aplicaciones de la Tienda Windows contiene ms
informacin sobre la jerarqua de navegacin de las aplicaciones.
Modelo jerrquico
Las aplicaciones multimedia y de entretenimiento suelen tener un montn de historias e

imgenes para que el usuario descubra. Si usas los patrones de interaccin y navegacin
recomendados en Windows 8, estars llevando el contenido a la superficie, permitiendo
as que las historias y las imgenes sean el foco de la experiencia. La presentacin de la
informacin de lo ms general a lo ms especfico permite a los usuarios encontrar
rpidamente lo que buscan.
La pgina de concentrador de tu aplicacin
Para permitir una experiencia rica y diversa en tu aplicacin, usa el modelo jerrquico
para aplicaciones de la Tienda Windows. La pgina de aterrizaje de tu aplicacin o el
hub pueden mostrar contenido destacado, contenido recomendado para el usuario segn
sus intereses previos, contenido que se est reproduciendo actualmente, colas guardadas,
gneros y categoras en una superficie por la que puedes desplazarte lateralmente de
forma sencilla. Puedes resaltar cada grupo de categoras y, pulsando en el encabezado,
revelars ms contenido, tal como se muestra en la imagen siguiente. Para hacer saber al
usuario que hay ms contenido en la categora, agrega una nota "Ver 10 ms" para
indicar que hay ms contenido disponible.
Muestra las categoras del contenido en la pgina de concentrador de la aplicacin y el

contenido multimedia pertinente en cada categora para llevar a los usuarios a esas
categoras. Para hacer saber al usuario que hay ms contenido en la categora, agrega
una nota View 10 more para indicar que hay ms contenido disponible.
Marcadores, favoritos y listas de reproduccin
Los usuarios suelen guardar listas de reproduccin para agregar elementos multimedia a
colas a las que accedern ms tarde. Si tu aplicacin admite esto de forma sencilla y
accesible, los usuarios que quieran una experiencia sin problemas para acceder a sus
elementos multimedia favoritos usarn tu aplicacin de forma repetida.
Agrega una seccin en tu pgina de destino llamada Marcadores/Favoritos, que ser una
recopilacin de todo el contenido multimedia guardado del usuario. Permite a los
usuarios seleccionar estos elementos marcados y administrarlos movindolos a la parte
superior de la cola, quitndolos de la cola u ordenndolos dentro de la cola. El ejemplo
siguiente muestra contenido recopilado en una cola de "guardados para despus".
Si pulsas el encabezado de la seccin, se revelarn ms opciones en la categora, tal

como se muestra en esta imagen.
Encabezado de seccin desplegable
El uso del encabezado de seccin permite a los usuarios saltar lateralmente entre ttulos
de seccin de forma rpida. Por ejemplo, considera un usuario que navega por los
iconos de pelculas en la categora de comedias y quiere navegar a la categora de
dramas. Para ello, podr usar fcilmente el desplegable del encabezado de seccin. La
imagen siguiente muestra el desplegable del encabezado de seccin.
Zoom semntico
Tanto en la pgina de destino como en las pginas de categoras, los usuarios pueden
usar el zoom semntico para ver fcilmente toda la superficie y acceder rpidamente a
los elementos en los que estn interesados.
La pgina Diseo de interaccin tctil tiene ms informacin sobre cmo puede admitir
tu aplicacin el movimiento panormico. La imagen siguiente muestra una vista de
grupo para el zoom semntico.
Al usar el zoom semntico, el usuario podr reorganizar la colocacin de categoras en

la pgina principal. Para ello, seleccionar el grupo y lo mover donde quiera. Tus
usuarios ahora pueden personalizar la pgina de destino de la aplicacin, lo que les da
otro motivo para usar tu aplicacin. Esta imagen muestra la reorganizacin de
categoras de contenido.
Tambin puedes usar el zoom semntico en una pgina de una categora especfica para
navegar entre diferentes pelculas o canciones en esa categora. Los usuarios usarn el
zoom semntico para saltar rpidamente entre diferentes canciones y vdeos.
Pulsar elementos en la vista de concentrador

Caso 1: reproduccin instantnea
Cuando un usuario pulsa elementos multimedia en la pgina de destino o en las pginas

de seccin, estos se reproducen. Como los usuarios esperan esto, es mejor que esta sea
la respuesta predeterminada a la pulsacin. Esta imagen muestra interacciones para la
reproduccin instantnea.
Probablemente, los usuarios querrn ms informacin sobre los elementos multimedia

que reproducen, as que es buena idea ofrecer un botn en la barra de la aplicacin que
les permita abandonar la vista de pantalla completa e ir a una vista del elemento
detallada. La imagen siguiente muestra una simulacin de esto.
Los elementos multimedia deben seguir reproducindose incluso cuando ya no se est

en la vista de pantalla completa. Sigue mostrando controles multimedia incluso si el
recurso multimedia no est en pantalla completa. De esta forma, el usuario tendr la
misma experiencia al abrir los controles multimedia, sin tener en cuenta si la aplicacin
est o no acoplada.
Las acciones de tocar el botn de alternancia para pantalla completa o tocar el vdeo o la
msica presentados en la interfaz de usuario deberan reanudar el modo de reproduccin
en pantalla completa.
O bien, si la aplicacin no ofrece una experiencia de informacin detallada para los
elementos multimedia, un botn en la barra de la aplicacin puede alternar la activacin
o desactivacin de informacin adicional en lugar de cambiar a una vista detallada
desde la barra de la aplicacin. Puedes ver esto en la siguiente imagen.
Caso 2: vista de elemento detallada
Hay situaciones en las que tiene ms sentido que la accin de pulsar dirija al usuario a
una pgina de elemento detallada en lugar de reproducir elementos multimedia
inmediatamente. Por ejemplo, si hay varios episodios de un programa de televisin,
puedes dar al usuario una lista de opciones antes de que empiece el elemento
multimedia. Y si el elemento multimedia solo est disponible con la opcin de pague
por ver, el usuario debe pagar primero antes de que comience, por lo que querrs
mostrar informacin de pago antes.
La imagen siguiente muestra el proceso de elegir elementos multimedia especficos del

contenido agregado en una pgina promocional de un programa de televisin. El usuario
pulsa una imagen de un episodio especfico, puede leer sobre ese episodio y leer crticas
antes de volver a pulsar para mostrar las opciones de reproduccin del episodio.
Para volver a la pgina de informacin detallada de ese episodio, toca el botn Atrs en
el encabezado de navegacin de la barra de la aplicacin superior o toca el botn Vista
completa para alternar con la otra vista.
Experiencia de reproduccin en curso

Cuando los recursos multimedia se estn reproduciendo, tu aplicacin puede marcar la
diferencia ofreciendo una experiencia que muestre el contenido del usuario. Disea la
experiencia de reproduccin de elementos multimedia para ser completamente
envolvente, sin ningn tipo de cromo. Los controles multimedia se pueden mostrar en el
recurso multimedia cuando el usuario lo quiera mediante un toque. Esta imagen muestra
la experiencia de reproduccin de un vdeo que es completamente envolvente.
Para aplicaciones de msica y vdeo que incluyen el concepto de listas de reproduccin,

la experiencia de reproduccin en curso permite a los usuarios administrar la lista de
reproduccin y navegar por ella fcilmente. Considera la opcin de poner un botn de
lista de reproduccin en el Canvas o en la barra de la aplicacin superior, que muestre
un control flotante desplazable con la lista de reproduccin dentro. Los usuarios pueden
seleccionar elementos y administrarlos. Podrn moverlos arriba o abajo o quitarlos de la
lista completamente. La imagen siguiente muestra una lista de reproduccin en curso.
Otra alternativa es que quieras mostrar siempre la lista de reproduccin en la pantalla

Reproduccin en curso. Para ello, puedes usar un patrn de vista de lista y el
desplazamiento vertical para permitir que los usuarios naveguen por la lista de
reproduccin fcilmente. Asegrate de que el resto de la pgina tiene un diseo fijo,
para que no se desplace en dos direcciones y cause confusin a los usuarios. Muestra
otra informacin en una seccin de ancho fijo junto a la lista de reproduccin, tal como
se muestra en la imagen siguiente.
Tambin puedes permitir que los usuarios deslicen transversalmente para seleccionar
elementos y administrar la lista de reproduccin tal como se muestra aqu.
Navegacin entre videoclips o episodios anterior y siguiente

A menudo los usuarios miran varios clips o episodios relacionados seguidos. Si
proporcionas botones Anterior y Siguiente, permites que los usuarios puedan navegar
rpidamente al siguiente clip o episodio. Esta imagen muestra botones Anterior y
Siguiente en una experiencia de lista de reproduccin.
En el caso de aplicaciones de msica, donde las interacciones de anterior y siguiente son

ms comunes, estos comandos se presentan mejor en el Canvas tal como se describe en
la seccin de Comandos a continuacin.
Comandos
Controles multimedia
Para aplicaciones multimedia que tienen listas de reproduccin de msica y vdeo, la

colocacin de controles de reproduccin en una ubicacin coherente ayuda a los
usuarios a interactuar con los recursos sin problemas. Si quieres ms informacin sobre
los comandos, lee Diseo de comandos para aplicaciones de la Tienda Windows.
El botn Reproducir/Pausa y el control deslizante de transporte son controles

habitualmente cruciales para la reproduccin de multimedia, por lo que se pueden
colocar en el Canvas y mostrarse en cuanto el usuario toque la pantalla o deslice
rpidamente el dedo. Reproducir/Pausa debe ser un botn que refleje la accin que
ocurre cuando se toca. Por ejemplo, cuando se reproduce msica, el botn debe mostrar
"Pausa" como la accin, y viceversa. Esta imagen muestra controles en una aplicacin
multimedia.
Si tu aplicacin usa un control deslizante de transporte, los botones Rebobinar y

Avanzar duplican funciones porque el usuario puede usar el control deslizante para
rebobinar y para avanzar la pelcula o cancin. Para evitar esta duplicacin, no uses a la
vez el control de transporte y los controles de rebobinar/avanzar.
Otros controles multimedia como Anterior y Siguiente (cancin o episodio) dependen
realmente de los escenarios de tu aplicacin. Por ejemplo, en el caso de una pelcula que
se est reproduciendo, Anterior y Siguiente no tienen mucho sentido, pero en el caso
de una lista de reproduccin de msica o programas o series de televisin con episodios,
son muy tiles. Si usas los controles Anterior y Siguiente en tu aplicacin, colcalos
con Reproducir/Pausa y el control deslizante de transporte, para que, cuando el
usuario toque o deslice rpidamente el dedo, pueda ver todos los controles disponibles a
la vez.
No muestres controles que no tienen sentido en un contexto determinado. Por ejemplo,
al comenzar una nueva lista de reproduccin de msica, el botn Anterior no ser
vlido hasta que la reproduccin empiece (porque el usuario est al principio de la lista
de reproduccin y no hay ninguna pista anterior).
Los controles multimedia aparecen al tocar y deslizar rpidamente. La barra de la
aplicacin aparece al deslizar rpidamente desde el borde. Siempre que el usuario
desliza rpidamente el dedo para mostrar la barra de la aplicacin, muestra tambin los
controles de transporte de recursos multimedia en el Canvas, para que el usuario pueda
interactuar con los elementos multimedia mientras usa los comandos de la barra de la
aplicacin si as lo quiere.
Adems de controles multimedia de la interfaz de usuario, puedes dar a los usuarios ms

control sobre su experiencia de reproduccin de multimedia si les permites controlar tu
aplicacin con botones multimedia de teclado o botones multimedia remotos como:
Reproducir
Pausa
Avance rpido
Un control deslizante de control de volumen y un botn de silencio estn disponibles en

los botones de hardware y no hace falta duplicarlos en tu aplicacin.
Otros comandos que no son tan cruciales para la reproduccin de multimedia pueden ir
en la barra de la aplicacin: como la alternancia entre modo de pantalla completa,
subttulos opcionales y metadatos Lee Directrices y lista de comprobacin de barras de
aplicacin si quieres ms informacin sobre el uso de la barra de la aplicacin.
Para administrar listas de reproduccin, considera la posibilidad de colocar tambin
botones para "quitar de la lista de reproduccin", "borrar cola", "guardar cola", "subir en
la cola" y "bajar en la cola" en la barra de la aplicacin.
Estado acoplado
Para el estado de aplicacin acoplada, la interaccin para los controles multimedia debe
ser la misma: tocar el Canvas para mostrar los controles de reproduccin de multimedia.
Reproducir/Pausa es crucial para mantener en estado acoplado; otros controles como
el control deslizante de transporte y Anterior y Siguiente se pueden colocar en estado
acoplado. Esta imagen muestra un botn Reproducir/Pausa en una aplicacin
multimedia acoplada.
Reproduccin en primer plano y en segundo plano
Si tu aplicacin multimedia reproduce msica y el usuario cambia a otra aplicacin, tu

aplicacin puede permitir que el usuario siga escuchando msica en segundo plano.
Algunos buenos ejemplos de escenarios multimedia que funcionan bien en segundo
plano son msica, radio de transmisin en secuencias, podcasts y vdeos musicales. Pero
si se reproduce contenido visual como programas de televisin y pelculas, tu aplicacin
debera pausar automticamente cuando el usuario cambie a otra aplicacin. De esta
forma, los usuarios pueden volver al momento en que lo dejaron cuando vuelvan a la
aplicacin, sin perderse ningn contenido.
Para ver ms informacin sobre la reproduccin de multimedia en segundo plano, lee el
MediaControl.Soundlevel | soundLevel property y el documento Reproduccin de
audio en una aplicacin de la Tienda Windows.
Controles de transporte del sistema
Para las aplicaciones que reproducen multimedia en segundo plano, los controles de
transporte del sistema permiten a los usuarios ver lo que est reproduciendo la
aplicacin y controlar la reproduccin sin tener que volver a la aplicacin. Los usuarios
pueden presionar un botn de volumen del hardware en su dispositivo para acceder a
controles multimedia y metadatos de una forma rpida y fluida desde fuera de la
aplicacin. Ofrece informacin sobre la pista y el nombre del intrprete para que los
usuarios sepan lo que se est reproduciendo. Si tu aplicacin est cargando o
descargando contenido, puedes ofrecer informacin del estado al usuario para que sepan
el estado de su reproduccin de archivos multimedia. La imagen siguiente muestra
controles de transporte del sistema.
Volver a la experiencia de reproduccin de multimedia
Si un usuario usa tu aplicacin, navega para agregar ms canciones a la lista de

reproduccin o compra msica nueva, es importante contar con un lugar coherente al
que navegar para la Reproduccin en curso de msica y vdeo. Esto permite a los
usuarios volver rpidamente a la experiencia de Reproduccin en curso.
La imagen siguiente muestra lo fcilmente accesible que es la barra de navegacin
cuando los usuarios realizan otras tareas relacionadas con multimedia. Los usuarios
pueden navegar rpidamente a la seccin de Reproduccin en curso de la aplicacin
cuando as lo quieran.
Clasificacin y revisin
La clasificacin y revisin de contenido multimedia es un escenario importante para la
mayora de aplicaciones multimedia. Considera la posibilidad de colocar estrellas en la
parte superior de una seccin de tu aplicacin que muestre revisiones para que los
usuarios puedan revisar rpidamente el contenido multimedia. Para que los usuarios
escriban revisiones, puedes mostrar un cuadro de texto en la parte superior que deje
espacio para que aparezca el teclado tctil. Al presionar Entrar se enviar la revisin.
El cuadro de texto puede crecer si es necesario en el caso de una revisin ms larga.
Los usuarios pueden ver ms revisiones si tocan el encabezado, tal como se muestra
aqu.
Tipografa en aplicaciones multimedia

Sigue las instrucciones de la tabla de tipos para crear una sensacin de ritmo y
estructura del contenido. Para alinear la tipografa de tu aplicacin multimedia con la de
Windows 8, usa Segoe Semilight de 11 puntos como el tamao principal para el
contenido, y Segoe UI Light de 20 puntos para ttulos y subencabezados. Si necesitas un
tamao inferior, usa Segoe UI Regular de 9 puntos para ttulos cortos y crditos. No
especifiques tipos por debajo de los 9 puntos.
Usa Segoe UI Light de 42 puntos con moderacin para titulares y ttulos. Evita
configurar encabezados, como Msica o Pelculas de 42 puntos. Reserva el tamao
de tipografa ms grande para el nombre de la pelcula, del lbum o de la pista musical.
Cuando uses el tamao de tipografa ms grande, es importantsimo que apliques
interletraje y puntuacin correcta. Usa comillas curvas y apstrofos en lugar de comillas
rectas. El ejemplo siguiente muestra el uso correcto e incorrecto de la puntuacin.
Aunque la personalidad de Windows 8 requiere el uso de maysculas tipo oracin,

puedes decidir que para tu contenido es ms apropiado el uso de todo maysculas, todo
minsculas o tipo ttulo. Ten en cuenta que estos tratamientos tipogrficos no se
transmiten a muchos idiomas traducidos. Asegrate de usar estilos de uso de
maysculas y minsculas coherentemente y de diferenciar partes distintas del contenido;
no solo se trata de agregar inters visual a la tipografa de la aplicacin.
Si decides salirte de esta recomendacin, trata de usar un mximo de cuatro tamaos y
estilos diferentes de fuente. Usa el color y el tamao de fuente para diferenciar el
contenido que se muestra en el mismo tipo de fuente.
El documento Directrices y lista de comprobacin de texto y tipografa contiene ms
informacin sobre las prcticas recomendadas para las fuentes, como el color, el tamao
y el estilo.
Contratos
Contenido compartido
El contrato para contenido compartido proporciona a los usuarios una manera natural y
conocida de compartir contenido entre dos aplicaciones. Hay muchos escenarios para
compartir contenido en tu aplicacin, o desde ella, que pueden diferenciarla del resto. Si
deseas permitir que los usuarios compartan contenido de la aplicacin, la aplicacin
debe ser un origen de contenido compartido. Si deseas permitir que los usuarios usen
datos de otras aplicaciones, la aplicacin debe ser un destino de contenido compartido.
Tambin puedes admitir las dos formas de uso compartido, segn las necesidades
especficas de la aplicacin.
Compartir contenido procedente de tu aplicacin de entretenimiento
El uso compartido de contenido multimedia es un escenario esencial en las aplicaciones

de entretenimiento. Mediante el uso del contrato para contenido compartido, permites
que tus usuarios compartan vdeos que encuentran interesantes o canciones que estn
escuchando con cualquier aplicacin que admita este formato. Esto permite muchos
escenarios atractivos, como compartir vdeos graciosos en redes sociales o enviar por
correo electrnico recomendaciones de pelculas o canciones a los amigos. Tambin
permite transformar msica, fotos o vdeo de tu aplicacin multimedia de una manera
interesante mediante otras aplicaciones de Windows, como aplicaciones de filtro de
cmara y aplicaciones de autosintonizacin, etc.
Compartir contenido en tu aplicacin de entretenimiento
Si tu aplicacin admite el almacenamiento de fotos, msica o vdeos para compartir con

amigos, familiares o todo el pblico, debes registrarla para el Contrato para aceptar
contenido compartido. De esta forma, los usuarios podrn aprovechar fcilmente la
aplicacin para organizar sus elementos multimedia de otras aplicaciones y llegar a un
pblico ms amplio.
Si tu aplicacin multimedia puede transformar el contenido de otras aplicaciones de
forma interesante (ya sea mediante la aplicacin de filtros especiales en fotografas,
grabaciones de msica con autosintonizacin o la composicin de panormicas, etc.),
debes registrarla para el Contrato para aceptar contenido compartido. De esta forma, los
usuarios podrn aprovechar fcilmente la aplicacin para descubrir su valor con
contenido de otras aplicaciones.
Buscar
La bsqueda es un escenario importante en aplicaciones multimedia. A menudo, las

aplicaciones multimedia muestran resultados de bsquedas desde varias categoras. El
uso del acceso a Buscar de Windows 8 ofrece una experiencia centralizada para todas
las necesidades de bsqueda del usuario, mientras lo ayuda a analizar diferentes
categoras de resultados.
Si quieres ms informacin sobre la bsqueda, lee Directrices y listas de comprobacin
para bsqueda. La imagen siguiente muestra una experiencia tpica de bsqueda.
Si tu aplicacin tiene ms escenarios de bsqueda avanzada que incluyen filtrado y

mbitos de bsqueda, puedes ofrecerlos en el Canvas de la aplicacin cuando sea
apropiado.
Adems, el uso de sugerencias de consulta ayuda a completar automticamente
consultas de bsqueda del usuario y agiliza sus bsquedas al evitar la necesidad de
escribir toda la cadena.
Configuracin
Todas las opciones de configuracin aplicables para aplicaciones multimedia, como

informacin de cuenta de usuario, informacin de suscripcin, configuracin de
privacidad y configuracin de notificaciones, deben estar activas en el acceso a
Configuracin. Ofrece un lugar nico para que los usuarios puedan retocar su
configuracin. Y adems evita que la interfaz de usuario de tu aplicacin se llene con
configuraciones diferentes. Esta imagen muestra configuraciones en una aplicacin
multimedia.
Dispositivos
El contrato de dispositivos ofrece una buena opcin de conexin para tu aplicacin. Tus
usuarios pueden querer ver pelculas o vdeos en televisin y reproducir msica en
dispositivos de audio. La integracin con el contrato de dispositivos permite que tus
usuarios hagan esto con un solo gesto. La imagen siguiente muestra contenido
reproducido en un dispositivo.
Conectado y activo
Existen muchos escenarios atractivos para el uso de iconos dinmicos en aplicaciones

multimedia. Iconos para aplicaciones de pelculas que muestran la ltima pelcula
recomendada para el usuario, nuevas entregas disponibles en DVD, vdeos muy
populares todo esto ayuda a captar de nuevo al usuario. De forma parecida, en las
aplicaciones de msica: iconos que muestran lbumes nuevos de un intrprete favorito,
msica que est en reproduccin o un intrprete recomendado segn los intereses del
usuario siguen llevando al usuario a tu aplicacin cuando descubren contenido nuevo
inesperado en tu icono. Estas imgenes muestran iconos dinmicos que presentan
informacin.
Al permitir a los usuarios anclar diferentes gneros de cine, canales de televisin,

intrpretes y listas de reproduccin a Inicio, les ests permitiendo ver notificaciones
adaptadas sobre el contenido en el que estn ms interesados y acceder rpidamente al
contenido que ms les preocupa. Este es otro motivo para hacer que los usuarios
vuelvan a tu aplicacin. Las imgenes siguientes muestran iconos anclados para
aplicaciones multimedia.
Si permites que los usuarios puedan ver noticias de ltima hora mediante notificaciones
del sistema incluso cuando la aplicacin no se est ejecutando, mantendrs al usuario
actualizado con las ltimas noticias, lo que har que vuelva a tu aplicacin. Pero
asegrate de que las notificaciones del sistema son opciones que el usuario pueda
habilitar en la configuracin de la aplicacin a travs del acceso a Configuracin,
porque pueden ser bastante intrusivas para algunos usuarios.
Activacin de roamina
Activar roaming es mover la configuracin y las preferencias de un dispositivo a otro.

La mayora de la gente tiene ms de un equipo con Windows. Si creas una aplicacin
que ofrezca una experiencia de usuario coherente en todos sus equipos con Windows 8,
estars dando a los usuarios lo que esperan. Siempre que sea posible, activa roaming de
las opciones de configuracin de la aplicacin, contenido multimedia guardado,
favoritos, historial de lo ltimo visto y el momento en que dejaron de ver cierto recurso
multimedia. Pueden encontrarse directrices adicionales sobre la activacin de roaming
en Directrices para la configuracin de una aplicacin y Administrar datos de la
aplicacin.
Orientacin y vistas
Vertical y horizontal
Cuando disees tu aplicacin multimedia para Windows 8, considera todas las vistas
que pueda ofrecer, como diferentes resoluciones de pantalla y tamaos de dispositivo.
Windows 8 facilita escalar el diseo de pantallas de alta resolucin y de diseo vertical,
lo que incluir ms contenido en tu aplicacin con dispositivos ms grandes. Muestra tu
aplicacin en vista horizontal y vertical. Para ciertas vistas en tu aplicacin, como ver
una pelcula, puede tener sentido bloquear la vista en horizontal.
Vista acoplada
Windows 8 permite a los usuarios realizar mltiples tareas "acoplando" una aplicacin
junto a otra. La vista acoplada es una excelente forma de aumentar el tiempo de la
aplicacin en pantalla y atraer a los usuarios por periodos ms largos. Tener un estado
acoplado para cada vista de tu aplicacin permite a los usuarios realizar varias tareas
mientras usan la aplicacin y los resultados que ofrece y mantenerla en la pantalla por
ms tiempo, incluso cuando estn haciendo otras cosas.
Existen escenarios atractivos en los que el usuario querr poder realizar varias tareas
con una aplicacin multimedia. Un usuario puede querer ver una competencia deportiva
transmitida en vivo mientras navega en la Web, o escuchar su lista de reproduccin de
Spotify mientras lee las noticias. Es importante adaptar las experiencias bsicas de
reproduccin para que la vista acoplada admita estos escenarios comunes. Es muy
recomendable que las otras experiencias de la aplicacin tengan vistas acopladas
adaptadas para que se mantenga el contexto cuando se cambie el tamao de la
aplicacin.
Esta imagen muestra ejemplos de aplicaciones de entretenimiento en un estado acoplado.
Observa que hay una vista til y adaptada de cada pgina, lo que permite al usuario
mantener el contexto cuando la aplicacin cambia de tamao.
Asimismo, considera la experiencia cuando la aplicacin est en modo de relleno y

cuando se usa junto con una aplicacin acoplada. Es posible que se muestre a una
relacin de aspecto que no sea 16:9, de modo que debes mostrar los vdeos y otro
contenido multimedia segn corresponda. Si la relacin de aspecto de la ventana no
coincide con el contenido multimedia, debes mostrar el contenido multimedia en un
formato letterbox para que no se vea estirado.
Pantalla de presentacin
A menudo las aplicaciones multimedia tienen que descargar contenido actualizado de la

Web. Para hacer que tu aplicacin muestre una respuesta rpida, no esperes a que se
descarguen todas las imgenes de cada categora para mostrar la pantalla de destino.
Esto puede impacientar a los usuarios. Muestra al usuario la pgina de destino de la
aplicacin despus de descargar los iconos de contenido y de cargar imgenes y otros
datos de forma asincrnica. Esta imagen muestra una pantalla de presentacin de
ejemplo.
Procedimientos recomendados de msica y vdeo

Aplicaciones de msica
Recomendacin
Registra tu aplicacin
como elementos
multimedia en segundo
plano
Responde a todos los

botones multimedia del
hardware
Descripcin
Si la aplicacin puede reproducir listas de reproduccin de

msica, puedes hacer que la reproduccin contine en
segundo plano aunque el usuario cambie a otra tarea. Para
obtener ms informacin, consulta Cmo reproducir audio
en segundo plano.
Registra y responde a los eventos de Reproduccin,
Pausar, Reproducir-Pausa, Pista siguiente, Pista anterior y
otros botones multimedia para que los usuarios puedan
controlar la aplicacin desde controladores remotos o
botones de teclados multimedia. Para obtener ms
informacin, consulta Cmo configurar teclas para
controles multimedia.
Las aplicaciones que pueden reproducir en segundo plano

deberan proporcionar informacin de la pista, nombre del
intrprete y la cartula del lbum en los controles de
transporte del sistema para que los usuarios tengan amplia
Proporciona informacin
informacin sobre lo que se est reproduciendo, aunque no
de "Reproduccin en
estn en la aplicacin. Si la aplicacin tiene un retraso
curso" en los controles de
cuando el usuario cambia de pista, rellena el campo de
transporte del sistema
nombre de pista con "Cargando pista siguiente" para que
no d la sensacin de que la aplicacin ha dejado de
funcionar. Para obtener ms informacin, consulta Gua
para desarrolladores de controles de transporte del sistema.
Aplicaciones de vdeo
Recomendacin
Descripcin
En la mayor parte de los casos, registra la aplicacin como de
elementos multimedia solo en primer plano
Elige el tipo correcto

de transmisin por
secuencias para la
aplicacin
Si los usuarios tiene n msica reproducindose en

segundo plano cuando se inicia el vdeo, la secuencia
har que se pause automticamente toda la msica en
segundo plano para que los usuarios puedan escuchar el
sonido proveniente del vdeo. Cuando los usuarios
abandonen la aplicacin, pon el vdeo en pausa
automticamente para que los usuarios puedan continuar
ms tarde exactamente desde donde lo dejaron sin que se
pierda ninguna parte del vdeo. Para ms informacin,
consulta Reproduccin de audio en una aplicacin de la
Tienda Windows.
Si el usuario reproduce vdeos de msica o crea una lista de
reproduccin de vdeo, registra la aplicacin como elementos
multimedia en segundo plano
Cuando los usuarios usan la aplicacin como un

reproductor de msica o para crear una cola de vdeos,
esperan poder or la reproduccin incluso cuando
abandonen la aplicacin. Para obtener ms informacin,
consulta Cmo reproducir audio en segundo plano.
Registra y responde a los eventos de Reproduccin, Pausar,
Reproducir-Pausa, Pista siguiente, Pista anterior y otros botones
Responde a todos los
multimedia para que los usuarios puedan controlar la aplicacin
botones multimedia
desde controladores remotos o botones de teclados multimedia.
del hardware
Para obtener ms informacin, consulta Cmo configurar teclas
para controles multimedia.
Temas relacionados
Patrones de diseo de experiencia del usuario para aplicaciones de la Tienda Windows
Diseo de aplicaciones de noticias

espectaculares para Windows (Windows)

En este artculo
Introduccin
Diseo y navegacin en aplicaciones de noticias
Comandos
Contratos
Tipografa en las aplicaciones de noticias
Actualidad del contenido
Conectados y en directo
Orientacin y vistas
Temas relacionados
En este tema se describe cmo crear fantsticas aplicaciones de noticias para

Windows 8.
Introduccin
tctiles a porttiles y equipos de escritorio de alta resolucin. Estos diferentes factores
de forma representan una oportunidad nica para que los editores de noticias ofrezcan
fantsticas experiencias en distintos casos y escenarios de uso y lleguen a un pblico
mayor con una aplicacin.
La nueva Tienda Windows ofrece a las aplicaciones nuevas la oportunidad de distribuir,
promocionar y rentabilizar el contenido, al tiempo que proporcionan flexibilidad en caso
de que quieras ejecutar tu propio motor de comercio para suscripciones.
En este documento se resaltan las nuevas funcionalidades de Windows 8 que son
especialmente importantes para las aplicaciones de noticias, entre ellas:
Contenido frente a contenedor visualEn Windows 8, el contenido es el rey y el

sistema operativo queda en un segundo plano. Los lectores sern ms atractivos y
distraern menos que antes.
Deja que tu marca brilleWindows 8 te permite incluir el prestigio y el
reconocimiento de tu marca en una aplicacin con iconos dinmicos, una pantalla de
presentacin y tu logotipo, entre otras cosas.
Contratos para contenido compartido y contratos para dispositivosLa nueva
funcionalidad de nivel superior del sistema operativo hace que el contenido se pueda
compartir mejor y que la aplicacin pueda usar los dispositivos que estn prximos.
NotificacionesUsa los iconos dinmicos y las notificaciones del sistema para alertar
al usuario de nuevo contenido, aumentando as la atraccin y la repeticin de uso.
Diseo y navegacin en aplicaciones de noticias

Las aplicaciones de noticias suelen presentar las noticias en numerosas categoras
distintas. Con el patrn de navegacin jerrquico para aplicaciones de la Tienda
Windows, puedes hacer que el uso de tu aplicacin sea realmente rpido y dinmico, al
tiempo que proporciona el contenido que interesa a los usuarios.
Modelo jerrquico
En una aplicacin de noticias suele haber gran cantidad de contenido que el usuario
puede descubrir y consumir. Adems, para administrar la informacin, las aplicaciones
y los sitios web de noticias tienden a usar numerosas categoras distintas. Por ejemplo,
est la tpica seccin "ltima hora" o "principales historias", que se suele destacar en
primera pgina. Tambin es probable que haya otras categoras, tales como poltica,
internacional, tecnologa, deportes, economa y ocio, con una seleccin de artculos
mostrados en el nivel superior de la aplicacin. Usar el modelo jerrquico de
Windows 8 para diseo e interaccin permite a tu aplicacin propagar contenido
interesante al usuario en el nivel superior, en lugar de ocultarlo en pestaas o mens. La
pgina de aterrizaje de nivel superior, o concentrador, puede ofrecer una amplia
variedad visual, atraer a los usuarios y llevarlos a distintas partes de la aplicacin.
Cuando planees el diseo de la aplicacin, asigna la prioridad de los escenarios y las

categoras en funcin de su importancia relativa y de la atraccin que provocan en el
mayor nmero de usuarios. Por ejemplo, las categoras de noticias de ltima hora o
principales noticias suelen ser importantes para la mayora de los usuarios de
aplicaciones de noticias, por lo que deben ocupar un lugar destacado en la pgina del
concentrador.
Este diagrama ilustra un modelo jerrquico de ejemplo para una aplicacin de noticias
de ejemplo.
Pgina del concentrador de tu aplicacin
El concentrador de tu aplicacin puede mostrar las principales noticias, la ltima hora,

contenido recomendado para el usuario y los artculos destacados de todas las categoras
en una superficie que se puede mover panormicamente de forma sencilla. Cada grupo
de categoras puede propagar contenido atractivo al concentrador. Cuando un usuario
pulsa el encabezado de un grupo, puede explorar una seccin determinada y ver ms
contenido.
Categoras de noticias
Distribuye uniformemente las categoras de la aplicacin en la pgina del concentrador

de la aplicacin y muestra unos pocos artculos de cada categora para atraer al usuario a
esa categora. Puedes indicar que hay ms artculos en una categora mostrando un
contador junto al encabezado de grupo, tal y como se muestra aqu.
Noticias de ltima hora
Las noticias de ltima hora son un escenario clave para las aplicaciones de noticias
porque los usuarios suelen interesarse por las noticias ms recientes y ms importantes.
Puedes resaltar las noticias de ltima hora y las historias en curso en un primer plano de
la pgina del concentrador, hacindolas ms grandes que otro contenido del
concentrador y usando variaciones de color y espesor en funcin de la prioridad de la
noticia.
En el ejemplo siguiente, los eventos en directo se distinguen mediante la colocacin y el
tamao del contenido, y mediante el texto "En directo" en rojo antes del titular para
captar la atencin del usuario a dicho contenido.
Marcadores/guardar para ms tarde
Los usuarios guardan y marcan los artculos para continuar leyndolos ms adelante. Si
tu aplicacin permite hacer esto de forma rpida y dinmica, los usuarios continuarn
usndola porque volver a los artculos que han guardado les resulta sencillo. Agrega una
seccin a tu pgina del concentrador llamada "Marcadores" o "Favoritos" donde
almacenar todos los artculos guardados del usuario. Observa el siguiente ejemplo.
Los usuarios pueden agregar artculos a la seccin "Marcadores" o "Favoritos" y

quitarlos cuando hayan terminado de leer.
Encabezado desplegable
El encabezado tambin permite a los usuarios saltar lateralmente de una categora a otra.
Por ejemplo, piensa en un usuario que est leyendo un artculo de deportes y quiere ir a
la seccin de ocio de la aplicacin de noticias. El usuario puede hacerlo fcilmente con
el encabezado desplegable, tal y como se muestra aqu.
Zoom semntico
El zoom semntico permite a un usuario navegar rpidamente en una sola vista. Por
ejemplo, el usuario puede hacer un gesto de reducir y moverse panormicamente para ir
desde una de las noticias principales del concentrador a la ltima categora de noticias
de la pgina del concentrador. El ejemplo siguiente muestra cmo los usuarios pueden
usar el zoom semntico para desplazarse rpidamente por las diferentes categoras de
noticias.
Estos son algunos ejemplos ms de zoom semntico en accin en una aplicacin de

noticias.
Cuando uses el zoom semntico, permite que el usuario pueda reorganizar las categoras
de la pgina del concentrador seleccionando un grupo y cambindolo de lugar. De esta
manera, pueden personalizar la pgina del concentrador para que les guste an ms tu
aplicacin. Por ejemplo, quizs un usuario prefiera la categora "Tecnologa" de la
aplicacin y quiera colocarla antes que la categora "Poltica". Al proporcionar esta
capacidad a los usuarios, ests ajustando la apariencia de la aplicacin a sus preferencias.
El zoom semntico tambin se puede usar en la pgina especfica de una categora para
navegar por los diferentes artculos de dicha categora. El zoom semntico permite que
los usuarios salten rpidamente de un artculo a otro.
Vista de artculo de tu aplicacin
La vista de artculo de tu aplicacin es el lugar donde se muestra el contenido. Permitir

que los usuarios disfruten de su experiencia en esta vista hace que tu aplicacin
destaque porque aqu es donde pasan la mayor parte del tiempo en la aplicacin. Es
importante que muestres el contenido de forma intuitiva y que esta vista sea visualmente
agradable. Tambin es importante garantizar que la navegacin en esta vista sea eficaz.
En una aplicacin de noticias, la vista de artculo debe moverse panormicamente en
horizontal para que los usuarios puedan usar los pulgares para moverse por el contenido
de forma sencilla y ergonmica. Adems, considera la posibilidad de dividir los
artculos en pginas. En un artculo, los saltos de pgina dan a los usuarios una idea de
cunto han ledo y les permiten ir fcilmente donde quieran.
Sin embargo, para lograr un diseo y una experiencia del usuario realmente magnfica, a
la hora de crear la noticia piensa que los usuarios la vern:
En una tableta
En un porttil
En un equipo de escritorio
Cada uno de estos escenarios saca partido de los diferentes diseos que tienen en cuenta
los patrones de uso de los usuarios. Por ejemplo, cuando los usuarios leen noticias en
una tableta, usan tanto la vista vertical como horizontal, mientras que en un porttil o en
un equipo de sobremesa es ms probable que las lean en una vista horizontal. Por lo
tanto, disea las vistas de artculo con ambas orientaciones en mente. Adems, el diseo
pensado para una tableta tambin debe optimizarse para la navegacin tctil. Como se
sugiri anteriormente, es buena idea dividir el contenido en pginas. Una manera de
agregar pginas, centrada en los gestos tctiles, es usar puntos de acople en el artculo
para crear "badenes". Estos indican al usuario en qu lugar del artculo se encuentran
mientras se mueven panormicamente a toda velocidad por el artculo.
Como la orientacin horizontal es ms habitual para los usuarios de porttiles y equipos
de escritorio, piensa cmo distribuir el artculo para evitar un aburrido conjunto de
columnas. Una tcnica de diseo es el uso de bajorrelieves de contenido, imgenes u
otros elementos multimedia que abarcan varias columnas. Puedes agregar citas o incluir
ttulos que abarquen toda la pgina para aportar variedad al diseo. Adems, en los
escenarios de porttiles y equipos de escritorio, los usuarios usarn principalmente el
teclado y el mouse para navegar. Por lo tanto, es importante asegurarse de que el diseo
responde tanto a la entrada del teclado como del mouse.
Adems, recomendamos usar la cuadrcula y la tabla de tamaos de tipografa en las

aplicaciones de noticias e informacin meteorolgica. De esta manera se crea una
jerarqua visual que permite a los usuarios explorar y consumir gran cantidad de
informacin de forma rpida y sencilla. Aunque la fuente recomendada para los
escenarios de lectura envolvente en Windows 8 es Cambria o Serif, las aplicaciones de
noticias pueden usar sus fuentes preferidas como sea de identidad al tiempo que siguen
las directrices para tablas de tipos. Aunque el uso de la fuente para interfaz de usuario
Segoe especificada en la tabla de tipos es apropiada para contenido de noticias e
informacin del tiempo, podras considerar la posibilidad de usar Calibri, nuestra fuente
recomendada para "documentos modernos", o Cambria, nuestra fuente recomendada
para "documentos tradicionales". La fuente Georgia es una opcin popular para los
sitios de noticias en Internet y tambin puede ser una opcin familiar. Si decides
especificar fuentes del sistema alternativas, asegrate de confirmar que se instalan con
Windows 8 y que no requieren la instalacin de una aplicacin diferente como
Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia, asegrate de
tener los derechos legales suficientes para incluirlas con tu aplicacin.
Independientemente de las fuentes que uses, la tabla de tipos de Windows 8 ofrece
buenas indicaciones sobre el nmero mximo de tamaos y estilos que debes usar.
Para obtener ms informacin acerca de los procedimientos recomendados para fuentes,
como tamao, color y espesor, consulta Directrices y lista de comprobacin de texto y
tipografa.
Usar un conjunto pequeo de tamaos de fuente en toda la aplicacin, tal y como se
recomienda en las indicaciones de la tabla de tipos, crea una sensacin de estructura y
ritmo en el contenido. Si varios elementos usan el mismo tamao de fuente de la tabla
de tipos pero transmiten diferentes tipos de informacin, por ejemplo, el nombre de
usuario y comentario en la seccin de conversaciones siguiente, o el texto del cuerpo del
artculo y el encabezado de artculos relacionados, considera la posibilidad de usar
colores, espesores y estilos de fuente para establecer una jerarqua de la informacin.
Puedes mostrar los artculos relacionados y los comentarios en la vista de artculo para
conseguir que los usuarios sigan disfrutando de su experiencia de lectura y permanezcan
ms tiempo en tu aplicacin. Esta es una posible apariencia.
Navegar entre artculos
Los usuarios suelen estar interesados en un tema determinado o en una categora de

noticias y pueden consumir varios artculos relacionados. Si el contenido de tu
aplicacin suele ser corto, deja que el usuario se mueva panormicamente a la derecha
despus del final del artculo para ir al siguiente artculo, y hacia la izquierda antes del
principio del artculo para ir al artculo anterior. Tambin puedes ofrecer zoom
semntico en esta vista para que los usuarios puedan cambiar a diferentes artculos
rpidamente.
Si el contenido de cada publicacin o artculo suele ser largo, considera la posibilidad

de colocar los botones "artculo anterior" y "artculo siguiente" en la barra de la
aplicacin superior para que el usuario pueda cambiar fcilmente a otros artculos.
Puedes ofrecer estos botones adems de permitir que los usuarios pasen atrs y adelante
de un artculo a otro. Puedes probar diferentes estilos para estos botones; por ejemplo,
mostrar miniaturas de los artculos anterior y siguiente ofrece una bonita vista previa del
contenido al que cambiarn. Otra alternativa es usar los glifos estndar "anterior" y
"siguiente" y probar a hacer que la barra de la aplicacin superior sea translcida o
transparente para que no distraiga del contenido. Este es un ejemplo de estos botones en
la barra de la aplicacin superior.
Comandos
Los comandos para tareas comunes, como "agregar a marcadores", "agregar nuevas
fuentes" y "anclar icono a Inicio" deben situarse todos en la barra de la aplicacin
inferior porque rene todos estos comandos en un solo lugar donde los usuarios pueden
encontrarlos.
Para obtener ms informacin sobre los comandos, consulta Diseo de comandos para
aplicaciones de la Tienda Windows.
Marcadores de posicin
Normalmente, los usuarios marcan los artculos desde la pgina del concentrador
cuando guardan los artculos para leerlos ms adelante, o cuando estn leyendo un
artculo y no pueden terminarlo por el momento. Una aplicacin de noticias atractiva
debe admitir ambas situaciones para que los usuarios puedan marcar los artculos
seleccionados con la barra de la aplicacin inferior desde la pgina del concentrador y
de categoras, y mientras estn leyendo un artculo. El botn de marcador debe ser un
botn de alternancia, es decir, un nico botn que agrega o quita un marcador.
Incluye siempre los marcadores en el perfil mvil para que los usuarios puedan
continuar leyendo sus artculos marcados independientemente del dispositivo que estn
usando. Por motivos de coherencia, asegrate de que el botn permanece en el lado
izquierdo de la barra de la aplicacin, como en el ejemplo siguiente, aunque la funcin
del botn sea contextual en la pgina del concentrador pero global en la vista de artculo.
Consulta Diseo de navegacin para aplicaciones de la Tienda Windows para obtener

ms informacin sobre la jerarqua de navegacin de una aplicacin.
Seleccin de texto
Permite la seleccin de contenido en tu aplicacin, especialmente de texto en la vista de

artculo, porque los usuarios tienden a seleccionar extractos de los artculos. El sistema
muestra automticamente el men contextual para copiar el contenido seleccionado.
Contratos
Siempre que sea razonable, tu aplicacin de noticias debe usar los contratos de
Windows 8 para enriquecer las experiencias del usuario y ayudar a conectar la
aplicacin con el resto de su experiencia con Windows 8. Para obtener ms informacin
sobre contratos, consulta Contratos y extensiones de aplicaciones.
El contrato para contenido compartido
El contrato para contenido compartido proporciona a los usuarios una manera natural y
conocida de compartir contenido entre dos aplicaciones. Hay muchos escenarios para
compartir contenido desde tu aplicacin de noticias, y hacia ella, que pueden
diferenciarla de otras de una manera clara y positiva. Con el contrato para contenido
compartido en Windows 8, tendrs todos estos escenarios sin tener que agregar cdigo
para la integracin adicional en tu aplicacin. Si deseas permitir que los usuarios
compartan contenido desde la aplicacin, la aplicacin debe ser un origen de contenido
compartido. Si deseas permitir que la aplicacin use datos de otras aplicaciones, la
aplicacin debe ser un destino de contenido compartido.
Compartir contenido procedente de tu aplicacin de noticias
Una mayora de las aplicaciones de la categora de noticias son sobre el consumo de

contenido de noticias. El uso compartido de artculos e historias interesantes es hoy en
da una caracterstica clave de las aplicaciones de noticias, de modo que pensamos que
cada una de estas aplicaciones deberan ser un origen del contrato para contenido
compartido.
Que la aplicacin sea un origen de contenido compartido significa permitir que su
contenido, ya sean direcciones URI, mapas de bits, cdigo HTML, texto, elementos de
almacenamiento o tipos de datos personalizados, est disponible para que otras
aplicaciones puedan usarlo. Esta funcionalidad hace que muchos escenarios atractivos
sean posibles. Es fcil imaginar el paisaje de uso compartido social con un contrato de
este tipo. Puedes hacer que tu aplicacin pueda compartir al instante en redes sociales,
aplicaciones de blogs y aplicaciones de correo electrnico.
Ms all del uso compartido social, el contrato permite que los usuarios puedan
completar tareas de investigacin, planificacin archivado mediante el uso compartido
de historias de noticias con aplicaciones para tomar notas, agregadores de noticias y
otros destinos de contenido compartido. A modo de ejemplo, si deseo guardar un
fragmento seleccionado de una noticia en mi equipo porttil ligero junto con un vnculo
al artculo para consultarlo en el futuro, puedo hacerlo si el origen de contenido
compartido proporciona los tipos de datos correctos que representan esa informacin.
Si admites el Contrato para ofrecer contenido compartido, tambin permites que la
aplicacin comparta contenido de forma directa con los dispositivos cercanos de la
misma manera que Tocar y enviar.
Como aplicacin de origen, es importante que admita todos los tipos de datos
significativos para el contenido que quieres que compartan los usuarios. Esto permite
que los usuarios puedan compartir contenido de la aplicacin con un amplio conjunto de
aplicaciones de destino de contenido compartido. En el siguiente ejemplo, Contoso
News es la aplicacin de origen. Consiste en compartir texto, una miniatura y un
vnculo del artculo que est resaltado. El panel Compartir tiene una lista de vnculos
rpidos y aplicaciones de destino de contenido compartido que admite el recurso
compartido de estos tipos de contenido.
Compartir contenido en tu aplicacin de noticias
Algunas aplicaciones de noticias sern excelentes para agregar artculos desde otras
aplicaciones, proporcionando un mtodo para que el usuario organice y consuma
informacin de un gran conjunto de orgenes de manera familiar y mantenido
automticamente. Estas aplicaciones deberan invertir en admitir el Contrato para
aceptar contenido compartido.
Aceptar contenido compartido significa que se permite que la aplicacin consuma los
datos proporcionados por las aplicaciones que ofrecen contenido compartido de un
modo interesante y significativo. En el siguiente ejemplo, puedes compartir un artculo
de una aplicacin de noticias al agregador de noticias para leerlo ms tarde.
Para obtener ms informacin sobre el contrato para contenido compartido, consulta

Uso compartido y recepcin de contenido.
Comentarios e integracin con otras aplicaciones sociales
Las aplicaciones de noticias aportan valor porque permiten a sus usuarios publicar
comentarios o discutir artculos, as como etiquetarlos mediante aplicaciones integradas
con el acceso a Compartir. El uso de aplicaciones que se integran con el acceso a
Compartir te permite personalizar tu experiencia de uso compartido de acuerdo con las
aplicaciones que tus usuarios ya usan para compartir, y les ayuda a reunir todo el uso
compartido en una experiencia consolidada. Adems, no necesitas invertir tiempo en
codificar para redes sociales especficas porque cuando se lanzan nuevas redes sociales,
la aplicacin se integra con ellas automticamente.
Tipografa en las aplicaciones de noticias

Usa la cuadrcula y la tabla de tamaos de tipografa en las aplicaciones de noticias para
crear una jerarqua visual que permita a los usuarios explorar y consumir gran cantidad
de informacin de forma rpida y sencilla. Aunque el uso de la fuente Segoe UI
especificada en la tabla de tipos es apropiada para contenido de noticias, podras
considerar la posibilidad de usar Calibri, nuestra fuente recomendada para documentos
en las aplicaciones de la Tienda Windows, o Cambria, nuestra fuente recomendada para
"documentos tradicionales". La fuente Georgia es una opcin popular para los sitios de
noticias en Internet y tambin puede ser una opcin familiar para tu aplicacin de
noticias.
Si decides especificar fuentes del sistema alternativas, asegrate de confirmar que se

instalan con Windows 8 y que no requieren la instalacin de una aplicacin diferente
como Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia,
asegrate de tener los derechos legales suficientes para incluirlas con tu aplicacin.
Independientemente de las fuentes que uses, la tabla de tipos de Windows 8 ofrece
buenas indicaciones sobre el nmero mximo de tamaos y estilos que debes usar.
Usar un conjunto pequeo de tamaos de fuente en toda la aplicacin, tal y como se
recomienda en las indicaciones de la tabla de tipos, crea una sensacin de estructura y
ritmo en el contenido. Si varios elementos usan el mismo tamao de fuente de la tabla
de tipos pero transmiten diferentes tipos de informacin, considera la posibilidad de
usar colores, espesores y estilos de fuente para establecer una jerarqua de la
informacin. El ejemplo siguiente muestra cmo usar tamao de fuente, color y espesor
para crear esta jerarqua.
Consulta Directrices y lista de comprobacin de texto y tipografa para obtener ms

informacin sobre los procedimientos recomendados para las fuentes, como tamao,
color y espesor.
Actualidad del contenido

En los escenarios de noticias, es esencial que el contenido de la aplicacin est
actualizado y al da. Veamos los elementos que indican la actualidad a los usuarios.
La hora en que se actualiz el contenido por ltima vez
Mostrar la informacin de la "ltima actualizacin" al usuario fomenta la confianza en

la fiabilidad de tu aplicacin de noticias. Muestra en el Canvas informacin acerca de la
ltima actualizacin de forma que no moleste. Esta informacin debera aparecer con el
estilo de informacin terciaria (9 puntos) de la tabla de tipos. Observa el siguiente
ejemplo.
Hora de publicacin del artculo
Mostrar cundo se public el artculo es otra manera habitual de mantener a los usuarios
informados de la actualidad del contenido que estn leyendo. Para estas marcas de hora,
usa el estilo de informacin terciaria de la tabla de tipos, color y espesor para
distinguirla de otro contenido del diseo que pudiera usar la misma tabla de tipos.
Actualizacin del contenido
Las aplicaciones de noticias deben mostrar siempre el contenido ms actualizado. Para

asegurarte de que el contenido de tu aplicacin est al da, descarga los datos cuando se
presente la oportunidad. Por ejemplo, mientras el usuario est leyendo un artculo,
descarga contenido nuevo para la pgina del concentrador de manera que, cuando el
usuario vuelva a esa pgina, se haya actualizado. Sin embargo, no descargues datos en
segundo plano mientras el usuario est usando una conexin mvil inalmbrica, porque
las aplicaciones deben minimizar el uso de datos en segundo plano cuando estn usando
movilidad o banda ancha mvil.
Adems, asegrate de que tu aplicacin puede administrar escenarios sin conexin y
notificar a los usuarios cuando el contenido no est disponible sin conexin.
En Mantenimiento de la conectividad de red, consulta los procedimientos recomendados
para los escenarios sin conexin y de uso medido.
Si tu aplicacin necesita actualizar el contenido de una pgina en la que se encuentra el
usuario en ese momento, indica el progreso de la actualizacin en la parte superior del
rea del Canvas, tal y como se describe en Directrices y lista de comprobacin de
controles de progreso. Asimismo, usa animaciones para insertar contenido nuevo y
retirar el contenido antiguo del Canvas, tal y como se describe en Directrices y lista de
comprobacin de animaciones de listas. La imagen siguiente muestra un ejemplo con la
barra de progreso en la parte superior de la imagen.
Si hace un tiempo que tu aplicacin de noticias no actualiza su contenido y el usuario

cambia a ella, considera la posibilidad de ocultar el contenido antiguo y mostrar el
progreso en el Canvas para indicar que se est actualizando gran cantidad de contenido.
Asegrate de que la aplicacin tiene capacidad de respuesta incluso aunque se est
actualizando el contenido. Adems, si la conexin es dbil, asegrate de establecer un
valor de tiempo de espera y mostrar la interfaz de usuario sin conexin de tu aplicacin.
La imagen siguiente muestra el contenido de la pgina del concentrador oculta durante
una actualizacin.
Conectados y en directo
Los iconos dinmicos y las notificaciones permiten mostrar contenido actualizado
cuando los usuarios estn en la pantalla Inicio. Con estas caractersticas, puedes crear
una conexin con el usuario y llenar de actividad tu aplicacin.
Mostrar en iconos las historias ms recientes y las ltimas noticias vuelve a captar la
atencin del usuario y les atrae de nuevo a tu aplicacin cuando descubren nuevas
historias interesantes en el icono de la aplicacin. Este es un ejemplo de un icono de la
aplicacin que muestra el titular de una noticia.
Permite que los usuarios anclen a Inicio los distintos iconos de categoras de noticias
para que puedan ver las notificaciones personalizadas segn esas categoras y acceder
rpidamente al conjunto de noticias particular de su inters. Esta es otra manera de
atraer al usuario a tu aplicacin.
Si permites que los usuarios elijan si desean recibir notificaciones del sistema sobre
noticias de ltima hora, que se mostrarn aunque la aplicacin no se est ejecutando, la
aplicacin mantendr a los usuarios que as lo deseen al da de las ltimas noticias y les
atraer a ella. Esta debe ser una opcin elegible que el usuario pueda habilitar en la
configuracin de la aplicacin, mediante el acceso a Configuracin, porque las
notificaciones no solicitadas podran molestar a los usuarios que no expresen
explcitamente un inters en ver las notificaciones del sistema de las ltimas noticias.
Este es un ejemplo de una notificacin del sistema.
Movilidad
Como la mayora de las personas tienen ms de un equipo con Windows, tu aplicacin

de noticias puede ofrecer a los usuarios la experiencia que esperan gracias a una
experiencia del usuario coherente en todos sus equipos con Windows. Puedes crear
perfiles mviles para configuraciones, marcadores de artculos, categoras de noticias
favoritas, preferencias de lectura y otros datos de la aplicacin que resulten tiles en
todos los equipos del usuario. Consulta las Directrices para perfiles mviles de datos de
la aplicacin para obtener los procedimientos recomendados para los perfiles mviles de
los datos de la aplicacin.
Orientacin y vistas
Cuando disees tu aplicacin de noticias para Windows 8, ten en cuenta todas las vistas
para tu aplicacin, como las diferentes resoluciones de pantalla y tamaos de dispositivo.
Vistas vertical y horizontal
Windows 8 permite ajustar fcilmente el diseo a pantallas con diseo vertical y de alta
resolucin, e incluye ms contenido en la aplicacin en el caso de los dispositivos de
mayor tamao. Como se muestra en el ejemplo siguiente, que muestra una aplicacin en
la vista horizontal y en la vista vertical, la aplicacin debe continuar movindose
panormicamente en horizontal en la vista vertical.
La vista vertical es ideal para leer y consumir gran cantidad de contenido. Ofrece una
vista vertical para toda la aplicacin, pero especialmente para la vista de artculo porque
es una orientacin habitual para leer contenido.
El tema sobre diseo de interaccin tctil contiene ms informacin sobre cmo se debe
admitir el movimiento panormico en la aplicacin. El tema sobre las directrices para
diseos contiene ms informacin sobre los estados de visualizacin, las interacciones
del usuario y las orientaciones de pantalla.
Vista acoplada
aplicacin en pantalla y atraer a los usuarios por perodos ms largos. Tener un estado
acoplado para cada vista de tu aplicacin permite a los usuarios trabajar en varias tareas
mientras usan tu aplicacin porque la mantienen en pantalla aunque estn haciendo otras
cosas.
El usuario puede acoplar la aplicacin por diversos motivos. El posible que haya
vnculos en un artculo y el usuario quiera abrir un nuevo vnculo en el explorador sin
salir del artculo. Primero, acoplar la aplicacin de noticias y luego abrir el vnculo.
Quizs el usuario solo quiera aumentar el tamao de otra aplicacin en ejecucin.
Independientemente del motivo por el cual el usuario acopla la aplicacin, es importante
que dicha accin no inicie una navegacin que provoque la prdida del artculo que el
usuario estaba leyendo.
Cuando la aplicacin est acoplada, debes ajustar el flujo de las pginas del artculo
para que se desplacen verticalmente. Los ttulos de las noticias del artculo acoplado
deben tener una fuente ms pequea, por lo general, del tamao del texto del
"subencabezado de pgina". Para obtener ms informacin sobre los tamaos de fuente
recomendados, consulta el tema sobre las Directrices y lista de comprobacin de texto y
tipografa. Si el ttulo es largo, se puede ajustar a varias lneas. Las imgenes grandes
del artculo deben escalarse para que se ajusten al ancho de 320 pxeles. Es posible
apilar verticalmente varias imgenes segn corresponda.
Tambin es muy recomendable redistribuir verticalmente el contenido de las pginas de
categoras y del concentrador, de modo que se mantenga el contexto para el usuario,
incluso cuando se cambia el tamao de la aplicacin.
Pantalla de presentacin
Como se indic anteriormente, las aplicaciones de noticias deben descargar con

frecuencia contenido actualizado de Internet. Para que tu aplicacin sea ms rpida y
con ms capacidad de respuesta, no esperes a que se hayan descargado todas las
imgenes de cada categora antes de mostrar la pgina de aterrizaje; la espera podra
impacientar a los usuarios. Muestra al usuario la pgina del concentrador de la
aplicacin tan pronto se hayan descargado los titulares de la noticias y despus carga
asincrnicamente las imgenes y otros datos.
Durante el corto tiempo de espera hasta que aparezca la pgina del concentrador,
muestra la pantalla de presentacin con un mensaje que informe al usuario de que la
aplicacin est descargando contenido. Observa el siguiente ejemplo.
Temas relacionados
Diseo de la interaccin tctil
Disear impresionantes aplicaciones de

productividad para Windows (Windows)

En este artculo
Introduccin
Pantalla completa
Diseo y navegacin en las aplicaciones de productividad
Comandos
Entrada de datos en aplicaciones de productividad
Seleccin de texto
Tipografa en las aplicaciones de productividad
Contratos
Sentirse conectado y vivo
Orientacin y vistas
Temas relacionados
Windows 8 es una plataforma excelente para aplicaciones de productividad. Adems del

entorno de escritorio tradicional, que permite que las aplicaciones de productividad
existentes funcionen correctamente, el nuevo entorno para aplicaciones de la Tienda
Windows permite crear nuevos y modernos tipos de aplicaciones de productividad.
Aqu te mostramos los diferentes modos de mejorar las aplicaciones de productividad
aprovechando el estilo de diseo Microsoft y las funcionalidades de Windows 8.
Introduccin
Windows 8 proporciona un alcance sin precedente en una gran variedad de dispositivos,
desde tabletas tctiles y centradas en lpiz hasta equipos porttiles y de escritorio de alta
resolucin. En el caso de las aplicaciones de productividad, esto implica una
oportunidad nica de usar diferentes modos de entrada a fin de permitir que los usuarios
sean productivos en una variedad de escenarios y casos de uso.
La nueva Tienda Windows te ofrece nuevas oportunidades para distribuir, promover y
vender tus aplicaciones. Se admiten escenarios, como versiones de evaluacin y
compras desde la aplicacin, con un uso mnimo de codificacin, para que puedas
empezar a ganar dinero rpidamente.
En este tema se destacan las nuevas funciones de Windows 8 que son de particular
importancia para las aplicaciones de productividad, por ejemplo:
Aplicaciones de la Tienda Windows: un nuevo lenguaje de diseo para las aplicaciones

que resalta la creacin de contenido de pantalla completa y escenarios de
productividad envolventes. Windows se quita de en medio para que el contenido sea lo
ms importante.
Iconos dinmicos: maximiza la participacin y permite a los usuarios volver a la
aplicacin fcilmente con iconos dinmicos que muestran el contenido reciente en el
que ha estado trabajando el usuario. Los iconos secundarios tambin facilitan la
vinculacin profunda de contenido y permiten a los usuarios anclar el contenido que
usan con mayor frecuencia dentro de la aplicacin.
Contrato de Buscar: una nueva funcin del sistema operativo de nivel superior que
ayuda a los usuarios a buscar y organizar su contenido con mayor facilidad que nunca.
Tu aplicacin se incluye en los resultados de la bsqueda para que los usuarios la
reconozcan cuando buscan contenido.
Contrato para contenido compartido: Windows 8 facilita la colaboracin y el uso
compartido entre aplicaciones, a fin de que tu aplicacin pueda usarse junto con otras
para ayudar a los usuarios a hacer todo lo que necesitan para ser productivos.
Selector de archivos: el selector de archivos permite a los usuarios de tus aplicaciones
de productividad usar archivos, documentos y fotografas del sistema de archivos y de
otras aplicaciones y servicios que participan de los contratos de Selector de archivos.
Zoom semntico: esta caracterstica nativa de Windows 8 permite a los usuarios
reducir y alejar una aplicacin para obtener una vista panormica del contenido y los
elementos en los que estn trabajando. Prubalo en la pantalla Inicio para verlo en
accin.
Vista acoplada: los estados de visualizacin, incluida la vista acoplada, permiten que
dos aplicaciones se ejecuten simultneamente una al lado de la otra para que los
usuarios puedan realizar mltiples tareas y mantenerse productivos con la aplicacin
en todo momento.
Pantalla completa
Una de las ventajas ms evidentes de las aplicaciones de la Tienda Windows para
productividad es que no deben competir por espacio con otras aplicaciones ni con la
interfaz de usuario de Windows. Una aplicacin puede usar todos los pxeles visibles en
la pantalla para presentar su contenido. Todos los elementos de la interfaz de usuario
que no son esenciales o distraen a los usuarios pueden ocultarse y mostrarse con un
gesto simple para que la aplicacin siempre tenga un espacio amplio para mostrar la
informacin ms importante para la tarea que se est realizando. La filosofa de diseo
de "anteponer el contenido al contenedor visual", que resulta tan estimulante y divertida
en las aplicaciones de vdeo o revista, tambin se aplica a las aplicaciones de
productividad. Cuando se quitan las distracciones, es fcil concentrarse en el contenido
que presenta la aplicacin.
Al disear una aplicacin de productividad, primero identifica la tarea principal del
usuario. Luego usa cada pxel de la pantalla para que tu aplicacin realice esa tarea de
manera excelente. Piensa en cmo hacer la tarea ms fcil, rpida o divertida gracias a
esta mayor cantidad de espacio. Piensa en una visualizacin enriquecida de la
informacin interesante y prctica, en lugar de una representacin esttica de los datos.
Piensa en cmo la aplicacin puede usar el espacio y su ubicacin para transmitir la
informacin. Muchas de las convenciones y los controles que se usan actualmente se
desarrollaron cuando las pantallas de los equipos de escritorio tenan una resolucin
ms baja de la que tienen los smartphones actuales. Las aplicaciones de la Tienda
Windows proporcionan la posibilidad de redefinir el modo en que los usuarios
interactan con la informacin, la analizan y la manipulan para llevar a cabo su trabajo.
Las aplicaciones de productividad por lo general implican una combinacin de
escenarios de creacin y consumo de contenido. Por ejemplo, pueden usarse tanto para
crear y leer documentos como para crear y administrar listas de tareas pendientes. Las
aplicaciones de productividad tambin varan ampliamente en la complejidad con que
controlan la navegacin y la exposicin de comandos y experiencias; desde aplicaciones
simples y ligeras para tareas pendientes hasta aplicaciones de creacin de contenido
enriquecidas y complejas con mens por niveles que incluyen un sinnmero de
opciones. Una aplicacin de productividad de Windows 8 es fabulosa si permite
navegar entre estas experiencias de un modo rpido, fluido y grandioso.
Diseo y navegacin en las aplicaciones de productividad

El diseo de navegacin que elijas depender de los tipos de escenarios que admita la
aplicacin. Si en la aplicacin tienes diversas experiencias enriquecidas (por ejemplo, si
presentas varios documentos), con cierta estructura y organizacin entre ellas, un diseo
jerrquico puede ayudarte a incorporar todo el contenido en el nivel superior en lugar de
esconderlo tras mens o pestaas. Por otro lado, si tu aplicacin no tiene una gran
densidad de informacin o escenarios que requieran de una estructura o jerarqua, elige
un diseo plano que permita a los usuarios navegar rpidamente por las experiencias de
la aplicacin. Las aplicaciones con vistas "maestro y detalles" (por ejemplo, las
aplicaciones de correo electrnico y mensajera) pueden usar una vista de lista para
exhibir mejor el contenido.
En el caso de algunas aplicaciones de productividad, ciertos escenarios pueden necesitar

de diferentes tipos de entrada de datos, como formularios, por lo que pueden aprovechar
el diseo de formulario que se sugiere ms adelante en este artculo. Elige el diseo que
mejor ayude a los usuarios a encontrar el contenido que les interesa con rapidez y
confianza.
Diseo jerrquico
Las aplicaciones de productividad que tienen una estructura jerrquica y un conjunto de

datos de gran tamao, como una aplicacin de notas con una gran cantidad de notas y
blocs de notas, pueden usar un diseo jerrquico que presente todo el contenido del
usuario en el nivel superior. Este modelo les fascina a los usuarios, ya que presenta todo
el contenido frente a sus ojos.
La pgina de concentrador de tu aplicacin
La pgina de concentrador consta de varias secciones, cada una de las cuales se asigna a
diferentes secciones de la aplicacin. Cada seccin puede exponer contenido o
funciones. El concentrador debe ofrecer una amplia variedad visual para atraer a los
usuarios a distintas partes de la aplicacin. Por ejemplo, la siguiente aplicacin de notas
muestra algunas de las notas ms recientes de cada bloc de notas en el nivel superior. La
siguiente imagen muestra una pgina de concentrador de ejemplo.
Al pulsar cada una de las notas, el usuario se dirige directamente a esa nota. Al pulsar el
encabezado (por ejemplo, "Travel - NYC"), se muestra la pgina de seccin de ese bloc
de notas, si hay ms contenido asociado al bloc de notas del que se muestra en la pgina
principal.
Considera la posibilidad de permitir que los usuarios decidan cmo ordenar su

contenido. Por ejemplo, pueden elegir ordenarlo alfabticamente, por fecha, por tipo de
contenido o en funcin de si se comparte o no. El modo correcto de ordenarlo depende
del contenido que presenta la aplicacin y del diseo de uso tpico de los usuarios. La
siguiente imagen muestra un ejemplo del orden de las notas.
Encabezado desplegable
Tambin puedes usar el encabezado para permitir a los usuarios saltar rpidamente entre
las secciones de la aplicacin en sentido lateral. Por ejemplo, un usuario que lee una
nota de un bloc de notas puede moverse rpida y fcilmente a una nota de otro bloc de
notas mediante el encabezado desplegable. La siguiente imagen muestra un encabezado
desplegable en una aplicacin de notas.

Zoom semntico
El zoom semntico acerca o aleja el contenido para mostrar su aspecto y permite a los
usuarios navegar rpidamente dentro de una sola vista. (Para ms informacin acerca de
cmo interacta el usuario en el zoom semntico, consulta las directrices para zoom
semntico). Por ejemplo, en una aplicacin de notas, los usuarios pueden alejar y
ampliar rpidamente para pasar de un bloc de notas a otro. Como alternativa, si los
usuarios eligen mostrar sus notas por fecha, pueden pasar rpidamente de las notas ms
recientes a las ms antiguas.
Esta imagen muestra la agrupacin del contenido cuando se aleja.
El zoom semntico tambin se puede usar en una pgina de seccin especfica para
navegar por el contenido de esa seccin o categora. Por ejemplo, en la aplicacin de
notas, los usuarios pueden usar el zoom semntico para saltar rpidamente entre
diferentes notas del mismo bloc de notas.
Diseo plano
Si la aplicacin tiene la mayor parte del contenido en el mismo nivel, sin una gran
cantidad de jerarqua, considera usar un sistema de navegacin plano. Este diseo
permite a los usuarios moverse entre documentos, pginas, pestaas o modos que
residen en el mismo nivel jerrquico de un modo rpido y fluido. Lee Diseo de
navegacin para aplicaciones de la Tienda Windows para obtener ms informacin
sobre el diseo plano.
Adems, si los escenarios de tu aplicacin pueden beneficiarse de una interfaz de varios
documentos, el diseo plano te resultar muy til. La barra de navegacin es perfecta
para alternar entre varios contextos. Por ejemplo, en una aplicacin de creacin de hojas
de clculo, el diseo plano permite alternar rpidamente entre las diferentes hojas de
clculo en las que se encuentra trabajando un usuario.
Algunas aplicaciones pueden elegir incluir otras funciones dentro de la barra de
navegacin, como agregar un botn de signo ms ("+") para crear una nueva hoja de
clculo en la propia barra de navegacin. En el explorador (una aplicacin de la Tienda
Windows) que se muestra a continuacin puedes ver un ejemplo.
Diseo de lista
Si tu aplicacin de productividad tiene escenarios que involucran la nocin de una vista

"maestro y detalles", donde la seleccin de un elemento determina lo que se muestra en
un panel de detalles, considera usar un diseo de lista para el panel maestro. Por
ejemplo, una aplicacin de administracin de proyectos puede mostrar hitos y fechas
lmite en un panel maestro y, cuando se selecciona un elemento del panel, puede
mostrar los detalles relevantes en la seccin de detalles. Una aplicacin de correo
electrnico puede colocar la Bandeja de entrada del lado izquierdo de la pantalla y el
panel de lectura del lado derecho, como se muestra a continuacin.
Diseos de formulario
Los escenarios de las aplicaciones de productividad por lo general necesitan un diseo

de formulario, en el que los usuarios tienen que especificar determinada informacin
sobre algo en particular. Por ejemplo, al crear una invitacin a una reunin en una
aplicacin de calendario, los usuarios deben especificar la ubicacin, la hora de inicio,
la hora de fin, la fecha, los asistentes y otra informacin similar. Este tipo de diseo
suele usar una combinacin de distintos tipos de controles y funciona mejor con un
diseo basado en columnas.
A la hora de decidir qu diseo de formulario usar, considera el flujo de la tarea que
quieres que complete el usuario y dnde ser necesario el desplazamiento en ese flujo.
El desplazamiento aumentar considerablemente cuando aparezca visible el teclado
tctil, ya que este ocupa casi la mitad del espacio disponible en pantalla en orientacin
horizontal. Las notificaciones de error en lnea, cuando aparecen, tambin incrementan
la extensin del contenido y la necesidad de usar el desplazamiento.
En lugar de tratar de ajustar todos los controles en un formulario muy extenso,
considera dividir la tarea en una secuencia de varios formularios.
Un diseo de una sola columna puede funcionar para formularios de desplazamiento
vertical cortos o extensos. En el siguiente ejemplo de un diseo de una sola columna, la
lectura y las pestaas se ordenan desde arriba hacia abajo y de izquierda a derecha.
Un diseo de formulario de dos columnas aprovecha al mximo el espacio horizontal

visible en orientacin horizontal. Para minimizar la necesidad de desplazamiento del
usuario, ordena la lectura y las pestaas de izquierda a derecha y desde arriba hacia
abajo.
La siguiente imagen muestra un diseo de dos columnas.
No ordenes la lectura y las pestaas desde arriba hacia abajo y de izquierda a derecha en
un diseo de dos columnas extenso y con desplazamiento. Esto resulta muy incmodo
porque el usuario tiene que desplazarse hasta el final de la primera columna, volver a
subir hasta el principio de la segunda columna y despus desplazarse de nuevo hacia
abajo para terminar de rellenar el formulario. Adems, un diseo de dos columnas no
resulta til en orientacin vertical porque exige que las columnas sean demasiado
angostas.
Los siguientes ejemplos muestran qu se debe evitar en un diseo de dos columnas
extenso y con desplazamiento.
Navegar por el contenido de la aplicacin de productividad
Las aplicaciones de productividad suelen incluir varias tareas, en las que los usuarios
van y vienen entre diferentes tipos de contenido dentro de la aplicacin. Por ejemplo, un
usuario puede alternar entre varios documentos, como artculos de investigacin y
deberes anteriores, al realizar un trabajo. Al permitir que los usuarios accedan a todo
este contenido de forma rpida y fluida, maximizan su productividad con tu aplicacin.
Considera el uso de la barra de navegacin descrita en Diseo de navegacin para
aplicaciones de la Tienda Windows para los documentos usados ms recientemente, los
documentos abiertos actualmente y cualquier tipo de contenido en la aplicacin que sea
relevante al espacio de trabajo actual del usuario.
Comandos
Las aplicaciones de productividad suelen tener ms comandos que los dems tipos de
aplicaciones. Este hecho plantea cuestiones acerca de cul es el mejor modo de
presentar los comandos de forma que puedan detectarse fcilmente, pero que an as el
contenido del usuario tenga prioridad. Los usuarios deben poder completar los
escenarios principales de la aplicacin (aquellos escenarios que facilitan el enunciado de
puntos fuertes de tu aplicacin) usando nicamente el Canvas de la aplicacin. Siempre
que sea posible, permite que los usuarios manipulen directamente el contenido en el
Canvas, en lugar de agregar comandos que acten sobre el contenido. Por ejemplo,
cuando los usuarios leen un documento, deja que alejen la vista para ampliar el tamao
de fuente de la visualizacin, en lugar de tener que usar un control. Para obtener ms
informacin sobre los comandos, consulta Diseo de comandos para aplicaciones de la
Tienda Windows.
Algunos comandos y botones son tan integrales de la aplicacin que sera ridculo que
no se mostraran en pantalla todo el tiempo. El botn Reproducir en una aplicacin de
vdeo en pausa, por ejemplo, probablemente nunca estar oculto. Pero la mayora de los
comandos no necesitan aparecer en pantalla constantemente. Para ayudar a los usuarios
a concentrarse para ser productivos con su contenido, muchos comandos que los
distraen se pueden quitar de la pantalla y volver a mostrarlos cuando sean necesarios
mediante un gesto simple y comn de Windows 8.
La barra de la aplicacin es la barra de herramientas comn que puede aparecer en el
borde inferior de la aplicacin. Por lo general, no se ve en la pantalla, pero se puede
mostrar al deslizar el dedo rpidamente desde los bordes superior o inferior, al hacer
clic con el botn secundario del mouse o al presionar la tecla del logotipo de
Windows+Z en el teclado. Adems, la barra de la aplicacin aparece automticamente
cuando se realiza una seleccin en el contenido de una aplicacin. Las herramientas que
se presentan en la barra de la aplicacin son contextuales, para que solo se muestren los
comandos relevantes en cualquier momento. Por ejemplo, cuando se selecciona una
palabra, la barra de la aplicacin aparece automticamente y muestra los comandos de
formato de texto. Si, en cambio, se selecciona una imagen, la barra de la aplicacin
muestra los comandos de edicin de imgenes. El carcter contextual de la barra de la
aplicacin impide que el usuario se distraiga con comandos irrelevantes. Como
resultado, las herramientas que quieras usar siempre estarn a tu disposicin, pero no te
distraern hasta que las necesites.
La barra de navegacin tambin puede aparecer al invocar manualmente la barra de la
aplicacin. Se encuentra en la parte superior de la pantalla y permite al usuario saltar a
distintas ubicaciones dentro de una aplicacin. Por ejemplo, un explorador puede usar
esta barra para mostrar miniaturas de las pestaas abiertas actualmente. Una aplicacin
de procesamiento de texto puede usar esta barra para saltar entre distintos documentos
abiertos. Una aplicacin de compras puede usar este espacio para saltar entre diferentes
departamentos de la tienda.
Tanto la barra de la aplicacin como la barra de navegacin pueden hospedar botones y
mens. Si tienes varios comandos relacionados que son contextualmente relevantes al
mismo tiempo, tiene sentido colocarlos en un men que se abra desde la barra.
Barra de la aplicacin
Es importante organizar y presentar los comandos de un modo coherente y organizado

para que los usuarios no se sientan abrumados por la gran cantidad de comandos. Por
ejemplo, en una aplicacin de notas, los usuarios pueden querer crear notas o blocs de
notas nuevos, ordenar los blocs de notas alfabticamente o por fecha, cambiar las
opciones de formato del texto de la nota, insertar notas de audio, especificar una
ubicacin y agregar etiquetas e imgenes. La barra de la aplicacin te ayuda a colocar
todos los comandos de la aplicacin sobre una superficie coherente que los usuarios
encuentren predecible, a fin de que puedan encontrar todos los comandos bajo el mismo
techo.
Para tu aplicacin, completa un inventario de todos los comandos de la aplicacin y
analiza detenidamente sus escenarios de uso. Un modo de reducir los comandos que
aparecen en la barra de la aplicacin consiste en organizarlos en dos categoras:
comandos globales de la aplicacin y comandos que solo son tiles si se seleccionan. En
el segundo caso, no muestres siempre los comandos contextuales en la barra de la
aplicacin. En su lugar, mustralos nicamente cuando el usuario ha realizado una
seleccin o en el contexto de la aplicacin para el que son relevantes.
Coloca los comandos globales que aparecen en toda la aplicacin, como las operaciones
de sincronizacin y de "crear nuevo", en el lado derecho de la barra de la aplicacin. En
especial, coloca el comando Nuevo (el comando que crea nuevo contenido, como una
nota o un bloc de notas nuevo) en el extremo derecho de la barra. As, todos los
comandos Nuevo tendrn una seleccin de ubicacin coherente y sern fcilmente
accesibles con los pulgares, independientemente de la aplicacin o contexto especficos.
Usa los comandos Eliminar y Nuevo si tu aplicacin administra entidades individuales
que podran persistir fuera de tu aplicacin; por ejemplo, una aplicacin de correo
electrnico. Eliminar y Nuevo siempre deben aparecer en este orden.
Usa los comandos Quitar y Agregar si tu aplicacin administra una lista, por ejemplo,
una lista de tareas pendientes. Quitar y Agregar siempre deben aparecer en este orden.
Existen otros comandos que afectan a las selecciones. Estos siempre deben aparecer en
el extremo izquierdo, independientemente de si son comandos contextuales que
aparecen cuando se realiza una seleccin o comandos que afectan a una seleccin
existente, como las opciones de formato, "Seleccionar todo" y "Borrar seleccin".
Considera qu comandos se relacionan funcionalmente y deben colocarse cerca.

Asegrate de que colocas los comandos de manera coherente siempre que sea posible.
Adems, crea conjuntos de comandos para administrar el nmero de comandos que
aparecen en la barra de la aplicacin y considera crear mens de comandos y conjuntos
de comandos siempre que sea posible. Por ejemplo, en una aplicacin de notas, si usas
un men de comandos, puedes ordenar las notas alfabticamente o por fecha mediante
un solo comando. Los mens de comandos ayudan a organizar y reducir enormemente
la cantidad de comandos de la barra de la aplicacin, como se muestra a continuacin.
Asegrate de que la configuracin aparezca en el contrato de Configuracin y no en la

barra de la aplicacin. De este modo, los usuarios podrn configurar la aplicacin con
los mecanismos comunes con los que ya estn familiarizados.
Ampliar la barra de la aplicacin y la barra de navegacin
Tanto la barra de la aplicacin como la barra de navegacin pueden hospedar botones y

mens. Si tienes varios comandos relacionados que son contextualmente relevantes al
mismo tiempo, tiene sentido colocarlos en un men que se abra desde la barra. La barra
de la aplicacin y la barra de navegacin no se limitan a botones y mens, sino que
ambas te permiten crear tus propios controles nicos. Si lo haces, piensa en la mejor
manera en que los usuarios de la pantalla tctil, el mouse y el teclado pueden interactuar
con los nuevos controles que crees.
Las aplicaciones con un alto volumen de comandos pueden considerar ampliar la barra
de la aplicacin de varias maneras. Para mantener la mayor coherencia posible con el
resto del sistema, trata de seguir estas instrucciones:
Mantn el foco del usuario en el contenido: da por hecho que la mayora de las
interacciones comienzan con una manipulacin directa del Canvas. Se espera que la
mayora de los comandos (si no todos) por lo general se encuentren fuera de la
pantalla, sin funciones visibles para mostrarlos. Usa todos los gestos que te ofrece el
sistema para mostrar y ocultar la barra de la aplicacin a fin de mostrar y ocultar tu
interfaz de usuario. Al agregar tu propia interfaz de usuario oculta alternativa con
diferentes mtodos de invocacin, puedes incluir ms botones, widgets y flechas en la
pantalla para proporcionar indicaciones al usuario. Al basarte en los gestos del sistema,
evitas agregar distracciones en la pantalla que quiten el protagonismo al contenido del
usuario.
Coloca los comandos en el borde inferior: en las aplicaciones de la Tienda Windows, la
ubicacin natural y esperada de los comandos es en el borde inferior de la aplicacin (o
justo sobre el teclado tctil). Esta ubicacin permite a los usuarios del teclado tctil
interactuar con los comandos sin bloquear la vista del contenido. La ubicacin tambin
se relaciona con el gesto de toque usado para mostrar los comandos manualmente. Si
colocas los comandos en otra ubicacin, esta ser menos predecible para los usuarios y
podra interferir con el contenido que el usuario quiere ver o con el que pretende
interactuar.
Coloca las barras de navegacin en el borde superior de la pantalla: en las
aplicaciones de la Tienda Windows, la ubicacin natural y esperada de la barra de
navegacin es en el borde superior de la pantalla. Como esta barra sirve para salir del
contenido que se visualiza actualmente, no importa que la mano del usuario bloquee
la vista de la pantalla al usarla. La barra de navegacin por lo general muestra
miniaturas, en lugar de botones, para diferenciarse de la barra de la aplicacin que se
encuentra en el borde inferior de la pantalla.
Mantn todos los comandos ocultos en la barra de la aplicacin: todos los comandos
que se ocultan en la pantalla deben encontrarse en el mismo lugar. El gesto del sistema
proporciona un modo simple y estandarizado para mostrar los comandos ocultos en la
pantalla. Si los comandos se ocultan en varias ubicaciones, necesitars varios modos de
invocar esas superficies ocultas. Esto hace que los usuarios deban buscar tus comandos
en demasiados lugares diferentes. Lo que es an peor, cada superficie podra estar
oculta tras otro gesto secreto o truco de la interfaz de usuario, lo que dar a los
usuarios mucho trabajo encontrarlos, si es que lo logran.
Mens contextuales
Los comandos del Portapapeles, como Cortar, Copiar y Pegar para el texto
seleccionado, y los comandos para copiar y abrir vnculos de direcciones URL pueden
sacar provecho de los mens contextuales, que el sistema proporciona de manera
predeterminada. Estos son ejemplos de comandos del Portapapeles en un men
contextual.
Entrada de datos en aplicaciones de productividad

Las aplicaciones de productividad pueden involucrar una gran cantidad de escenarios de
entrada de datos. Por ejemplo, la creacin de una lista de tareas pendientes u otro
documento nuevo, la edicin de una hoja de clculo existente y la creacin de una
invitacin en el calendario requieren la entrada de datos. Al hacer que la entrada de
datos sea lo ms rpida y fluida posible, ayudas a los usuarios a realizar su trabajo con
rapidez y eficacia. Para ello, existen muchas estrategias, por ejemplo:
Analiza bien los escenarios y, siempre que sea posible, reduce la cantidad de texto que
los usuarios debern especificar en el sistema. Estrategias para lograrlo:
Controles comunes: para entradas que usan un formato preestablecido o requieren

validacin (como fecha, hora o ubicacin), usa controles comunes, como el control de
seleccin, cuadros de lista desplegables, botones de radio y casillas.
Autocompletar: usa Autocompletar siempre que sea posible para proporcionar a los
usuarios satisfaccin inmediata. Esto ayuda a que los usuarios sean ms eficaces al
escribir datos.
La siguiente imagen muestra las sugerencias de un selector de contactos.
Teclado tctil
Disea tu aplicacin de modo que funcione bien con teclados. Para ello, sigue las
siguientes instrucciones del tema sobre cmo responder a la entrada de teclado. Disea
tu aplicacin de modo que funcione bien con el teclado tctil. Para ello, sigue las
siguientes instrucciones:
Coloca los controles de entrada de texto en la parte superior del Canvas de la

aplicacin, si es posible, de modo que el contexto o la regin visible del usuario no
cambie cuando aparezca el teclado tctil.
Si el tipo de la entrada de texto no permite que esta se coloque entera en la parte

superior del Canvas, cuando el usuario pulsa o tabula en el control de entrada de texto,
la aplicacin se desplaza hacia arriba automticamente hasta donde aparece el control
para que el usuario pueda ver el texto que escribe. La ventana debe desplazarse de
modo que quede un mnimo de 30 pxeles entre el control que se est utilizando y el
borde de la pantalla y la parte superior del teclado tctil, a fin de dejar espacio
suficiente para diversos gestos, elementos de la interfaz de usuario y la barra de
redimensionamiento de seleccin de texto que se encuentran en los bordes. Para ms
informacin acerca de la seleccin de texto, lee el tema sobre las directrices para
seleccionar texto e imgenes.
No dejes el teclado en la pantalla porque s. Si no se espera que se escriba ningn
texto, establece el campo de entrada en solo lectura o mueve el foco para que se
oculte el teclado.
As se ve el teclado tctil.
Si la pantalla de tu aplicacin parece un formulario, donde suele haber una combinacin

de controles de edicin (cuadros de texto) con otros controles (como botones de radio y
casillas), la experiencia del usuario no sera buena si el teclado aparece y desaparece.
Para abordar este problema, Windows 8 impide que el teclado tctil desaparezca cuando
un usuario se encuentra en un formulario y navega entre ciertos controles comunes,
como botones de radio, cuadros de texto, controles de seleccin y la barra de la
aplicacin. Puedes usar controles estndar para dar a tu aplicacin una experiencia
fluida sin ningn costo. En la siguiente imagen puedes ver cmo el teclado tctil
permanece visible mientras el usuario se mueve de un control a otro.
Revisin ortogrfica
Habilita la revisin ortogrfica en tu aplicacin. Ayuda a los usuarios a escribir el texto

rpidamente y con confianza. (La revisin ortogrfica se puede habilitar con el control
RichEdit). Cuando el usuario escribe una palabra que no est en el diccionario y
presiona la barra espaciadora, la palabra aparecer subrayada con una lnea ondulada
roja. Al pulsar la palabra mal escrita, se invoca el men de revisin ortogrfica en el que
el usuario puede corregir la palabra u omitirla, como se muestra a continuacin.
Reconocimiento de entrada manuscrita
Puesto que los usuarios suelen usar varios modos de entrada de texto en las aplicaciones
de productividad, considera la posibilidad de admitir modos alternativos de entrada de
texto, como la entrada manuscrita. Si permites a los usuarios escribir el texto con lpiz y
dibujar garabatos en sus notas y documentos, se sentirn fascinados de poder escribir el
texto rpida y naturalmente con un lpiz. Consulta el tema sobre el mouse, el lpiz, el
teclado y el mundo tctil para ms informacin sobre los diferentes mtodos de entrada.
Seleccin de texto
En muchos escenarios de productividad, incluidos el consumo y la creacin de
documentos, los usuarios necesitan seleccionar texto. Habilita la seleccin del texto
escrito por los usuarios para que puedan modificarlo. El texto que proviene de otros
usuarios incluye texto del cuerpo de un correo electrnico u otros tipos de texto que
probablemente se copie. As se ve la experiencia de seleccin de texto.
Si habilitas la seleccin de texto, deja un margen de la mitad del ancho de la barra de

redimensionamiento (4 milmetros) a los costados del texto y de la altura total de la
barra de redimensionamiento (8 milmetros) en la parte inferior del rea, si el texto no se
puede desplazar. Esto garantiza que las barras de redimensionamiento puedan tocarse en
todos los casos y no interfieran con la experiencia del usuario en el borde de la pantalla.
La siguiente imagen muestra los mrgenes correctos que deben dejarse cuando se
habilita la seleccin de texto.
Tipografa en las aplicaciones de productividad

Al usar la tabla de tamaos y cuadrculas de tipografa en las aplicaciones de
productividad, creas una jerarqua visual que permite a los usuarios analizar y consumir
gran cantidad de informacin rpida y fcilmente. Si bien el uso de la fuente Segoe UI
especificada en la tabla de tipos es adecuado para el contenido de las aplicaciones de
productividad, tambin puedes considerar usar Calibri, la fuente para "documentos
modernos" recomendada, o Cambria, la fuente para "documentos tradicionales"
recomendada. Calibri es la fuente sans-serif predeterminada en Microsoft Office y
Cambria es la fuente serif predeterminada, por lo que ambas se relacionan
estrechamente con las aplicaciones de productividad. Para ms informacin sobre la
tipografa, consulta el tema sobre Directrices y lista de comprobacin de texto y
tipografa.
Si decides especificar fuentes del sistema alternativas, asegrate de confirmar que se
instalen con Windows 8 y no requieran la instalacin de una aplicacin independiente,
como Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia,
asegrate de contar con los derechos legales suficientes para incluirlas en tu aplicacin.
Independientemente de las fuentes que elijas, la tabla de tipos de Windows 8
proporciona una buena orientacin sobre el nmero mximo de tamaos y estilos que
debes usar.
La personalidad de la interfaz de usuario de Windows 8 requiere que el uso de
maysculas en los encabezados sea del estilo de oracin, lo que tambin recomendamos
para las aplicaciones de productividad. Pero el estilo de ttulo tambin puede ser
apropiado en algunos casos. El texto en todas minsculas puede ser demasiado informal
para una aplicacin de productividad y el texto en todas maysculas podra hacer
acordar al usuario de ciertos mensajes de correo electrnicos no muy amigables. Ten en
cuenta que estos ltimos tratamientos de topografa no se transfieren a varios idiomas
localizados. Adems, asegrate de usar los estilos de uso de maysculas coherentemente.
salos para diferenciar las distintas partes del contenido y no solo para aadir un inters
visual a la tipografa de tu aplicacin.
El uso de un conjunto reducido de tamaos de fuente, como se recomienda en la
orientacin de la tabla de tipos, crea una sensacin de estructura y ritmo en el contenido.
Si distintos elementos de la aplicacin usan el mismo tamao de fuente de la tabla de
tipos, pero transmiten diferentes tipos de informacin, considera usar color y espesor de
la fuente para establecer una jerarqua en la informacin.
Contratos
Los contratos son el lazo de unin que une las aplicaciones de la Tienda Windows entre
s y con la interfaz de usuario del sistema. Dos aplicaciones que han implementado el
mismo contrato pueden trabajar juntas para completar un escenario amplio o complejo.
Para obtener una lista completa de los contratos entre aplicaciones, consulta el tema
sobre Extensiones y contratos entre aplicaciones.
Uso compartido
La posibilidad de compartir contenido es un componente clave de las aplicaciones de

productividad hoy en da, y existen muchos escenarios atractivos que permiten el uso
compartido entre aplicaciones de productividad. Si deseas permitir que los usuarios
compartan contenido de la aplicacin, la aplicacin debe ser un origen de contenido
compartido. Si deseas permitir que la aplicacin use datos de otras aplicaciones, la
aplicacin debe ser un destino de contenido compartido.
Compartir contenido de la aplicacin
Como la productividad suele basarse en la creacin de contenido, los usuarios por lo

general comparten contenido con otras personas y Windows 8 ofrece una experiencia
fluida de uso compartido entre aplicaciones. A medida que el usuario va obteniendo
cada vez ms aplicaciones, la interoperabilidad aumenta el alcance del contenido de tus
aplicaciones en una gran variedad de posibilidades.
Por ejemplo, es posible que los usuarios quieran compartir listas de tareas pendientes y
listas de compras con sus familiares mediante una aplicacin de contactos, compartir
documentos con sus compaeros de trabajo mediante una aplicacin de colaboracin o
compartir sus creaciones en blogs mediante una aplicacin de creacin de blogs, por
nombrar solo algunos escenarios de uso compartido. Estas capturas de pantalla
muestran las maneras en que puedes compartir en las aplicaciones de productividad.
Que la aplicacin sea un origen de contenido compartido significa permitir que su

contenido, ya sean direcciones URI, mapas de bits, cdigo HTML, texto, elementos de
almacenamiento o tipos de datos personalizados, est disponible para que otras
aplicaciones puedan usarlo. Como aplicacin de origen, es importante que admita todos
los tipos de datos significativos para el contenido que quieres que compartan los
usuarios. Esto permite que los usuarios puedan compartir contenido de la aplicacin con
un amplio conjunto de aplicaciones de destino de contenido compartido.
Si admites el Contrato para ofrecer contenido compartido, tambin permites que la
aplicacin comparta contenido de forma directa con los dispositivos cercanos de la
misma manera que Tocar y enviar.
Compartir contenido en tu aplicacin
Las aplicaciones de productividad tambin son buenas destinatarias del contenido

compartido procedente de otras aplicaciones, porque la creacin del contenido por lo
general comienza con su consumo. Si tu aplicacin es un destino de contenido
compartido, los usuarios podrn importar contenido en ella sin problemas y sin tener
que cambiar el contexto de la actividad que estn realizando. Existen muchos escenarios
atractivos que permiten el uso de las aplicaciones de productividad como destinos de
contenido compartido. Por ejemplo, direcciones URL, fragmentos de texto, fotos del
explorador y contenido de un libro pueden enviarse como contenido compartido a una
aplicacin de creacin de contenido para usarlos como fuentes de referencia de un
trabajo para el colegio. Por poner otro ejemplo, los usuarios pueden compartir cupones
de una aplicacin de cupones con la lista de compras de tu aplicacin de tareas
pendientes. Estas capturas de pantalla muestran ejemplos de una aplicacin como
destino de contenido compartido. Tambin puedes esperar una mayor interoperabilidad
entre un conjunto de aplicaciones de productividad que comparten datos entre s
mediante el contrato para contenido compartido.
Buscar
La bsqueda es un escenario importante de las aplicaciones de productividad y es

posible que tu aplicacin deba mostrar una gran cantidad de datos en los resultados de la
bsqueda. Puedes usar el acceso a Buscar de Windows 8 para proporcionar una
experiencia centralizada para todas las necesidades de bsqueda del usuario y para
ayudarle a analizar los distintos tipos de resultados.
Al disear la experiencia de bsqueda de tu aplicacin, ten en cuenta lo siguiente:
Proporciona filtros de bsqueda en la vista de resultados.

Muestra la consulta de bsqueda en la vista de resultados.
Muestra el nmero total de resultados encontrados.
Conserva el estado de la aplicacin para que los usuarios puedan volver a lo que
estaban haciendo antes de realizar la bsqueda.
Indica por qu un resultado coincidi con la bsqueda.
Esta captura de pantalla muestra el uso de la bsqueda en una aplicacin de notas.
Proporciona sugerencias de consultas para ayudar a los usuarios a completar

automticamente sus consultas de bsqueda para que puedan buscar ms rpidamente
sin necesidad de escribir la cadena de bsqueda completa.
Tambin considera mostrar sugerencias de resultados para ayudar a los usuarios a

encontrar los ms relevantes con rapidez. Al seleccionar una sugerencia de resultado, se
redirigir a los usuarios a los detalles del resultado. Limita a cinco el nmero de
sugerencias. Cuanto ms corta sea la lista, con mayor facilidad podrn analizarla los
usuarios.
Buscar en la pgina
Junto con la bsqueda, "Buscar en la pgina" es un escenario comn en las aplicaciones

de productividad. Por ejemplo, considera lo que implica buscar todas las instancias de
una palabra en un documento determinado. No uses el acceso a Buscar para
implementar en tu aplicacin la funcin de Buscar en la pgina. En su lugar,
implemntala dentro de la barra de comandos de la aplicacin y no en el panel de
bsqueda. Buscar en la pgina ayuda al usuario a encontrar todas las instancias en la
vista actual. Resalta los resultados de la bsqueda en el documento y muestra los
botones "Siguiente" y "Anterior" en la aplicacin para permitir al usuario saltar
rpidamente entre las distintas instancias de la palabra o frase encontrada. En las
aplicaciones de productividad, principalmente se usa Buscar para complementar la
experiencia de Reemplazar. Buscar siempre se encuentra en el mbito de la vista actual,
como se muestra a continuacin.
Configuracin
Toda la configuracin correspondiente a las aplicaciones de productividad (como la

configuracin de privacidad, la configuracin de notificacin y las preferencias de
visualizacin) debe encontrarse en el acceso a Configuracin. El acceso a Configuracin
proporciona un nico lugar para que los usuarios ajusten su configuracin y, adems,
impide que la interfaz de usuario de tu aplicacin aparezca desordenada con diferentes
configuraciones. Para ms informacin acerca de la configuracin, consulta el tema
sobre las directrices para la configuracin de una aplicacin.
Dispositivos
La impresin de documentos y notas es un escenario comn en las aplicaciones de

productividad. Proporciona a los usuarios funcionalidad de impresin con los accesos a
Dispositivos para que tengan una experiencia de impresin sin problemas. As se ve la
experiencia de dispositivos para impresin.
Los dispositivos pueden ser un contrato interesante para conectar a tu aplicacin de

productividad. Si la aplicacin tiene muchos escenarios de multimedia y posibles
presentaciones, es posible que los usuarios quieran ver el contenido en un televisor en
experiencias de medios compartidos. La integracin con el contrato de Dispositivos
permite a los usuarios hacer justamente eso.
Selector de archivos
Las aplicaciones de productividad pueden involucrar una gran cantidad de escenarios

interesantes para usar contenido de otras aplicaciones. El selector de archivos permite a
la aplicacin obtener acceso a los archivos y carpetas de un usuario almacenados en el
equipo local, en dispositivos de almacenamiento conectados, en el Grupo Hogar y en
otras aplicaciones que implementan un contrato de Selector de archivos. Esto permite a
los usuarios insertar contenido de otras aplicaciones en tu aplicacin, lo que enriquece
su experiencia. Por ejemplo, en una aplicacin de notas, es posible que el usuario quiera
insertar una foto de una aplicacin de fotos o notas de audio de una aplicacin
grabadora de sonidos.
Tu aplicacin tambin puede personalizar diversos aspectos del selector de archivos.
Concretamente:
Modo del selector de archivos: puedes establecer el modo del selector de archivos
para que coincida con tu tarea. En el selector de archivos, se puede seleccionar un
archivo, guardar un archivo y seleccionar una carpeta. Si se permite al usuario
seleccionar una carpeta, por ejemplo, este podr seleccionar una carpeta completa
para cargarla en una ubicacin de almacenamiento en nube.
Modo de vista: cuando permites que el usuario seleccione una foto o un vdeo, puedes
personalizar el selector de archivos para que muestre los archivos en el modo de vista
de miniaturas. Para todos los dems tipos de archivo, usa el modo de vista de icono.
Asimismo, el contenido de tu aplicacin de productividad puede ser importante para los

usuarios en otros contextos, por lo que puede resultarles muy til poder acceder a este
contenido desde otras aplicaciones. El uso de los contratos de Selector de archivos
proporciona una oportunidad para poner el contenido de tu aplicacin a disposicin de
otras aplicaciones de Windows 8. Esto permite a los usuarios obtener el contenido de tu
aplicacin sin tener que llevar a cabo un proceso intermedio, como guardar primero esos
archivos en el equipo local. Cuando las aplicaciones permiten esta experiencia, los
usuarios pueden seleccionarla de la lista de ubicaciones en el selector de archivos. Al
seleccionarla, los usuarios pueden acceder al contenido de tu aplicacin a travs de una
vista del selector de archivos que es especfica de tu aplicacin y que t controlas.
La funcionalidad del selector de archivos da lugar a algunos escenarios atractivos. Por
ejemplo, si un usuario quiere enviar por correo electrnico una nota creada en tu
aplicacin de notas a algunos amigos, puede adjuntar el contenido de la aplicacin de
notas directamente en lugar de tener que guardarlo previamente en el equipo local.
Adems, el selector de archivos permite guardar directamente en la aplicacin. Esto
tambin da lugar a escenarios realmente interesantes. Por ejemplo, un usuario puede
guardar un mensaje de correo electrnico o un garabato creado en otra aplicacin
directamente en tu aplicacin como una nota. Aqu puedes ver cmo se puede
personalizar el selector de archivos.
Sentirse conectado y vivo

Las aplicaciones que se ejecutan en Windows 8 deben integrar experiencias y una
personalidad que las haga resaltar. Si usas iconos, notificaciones, el perfil mvil y
contratos, tu aplicacin encajar perfectamente en el ecosistema de Windows 8.
Mostrar contenido actualizado y personalizado en el icono de la aplicacin es una forma

de atraer a los usuarios, ya que les llamar la atencin el contenido interesante del icono
y entrarn a tu aplicacin. Esta funcionalidad da lugar a escenarios atractivos, por
ejemplo, se pueden mostrar notificaciones de icono cuando alguien actualiz un
documento compartido, comparti una nueva nota con el usuario o modific una lista de
compras tachando elementos o agregando artculos nuevos. Una notificacin tambin
puede mostrar la posicin de un punto de inters, como en este ejemplo.
Si permites a los usuarios anclar iconos secundarios para un acceso rpido a sus notas y
contenido favoritos, podrn ver las notificaciones adaptadas sobre ese contenido, lo que
les llamar la atencin y los atraer a tu aplicacin.
En el caso de las aplicaciones de productividad con escenarios de avisos de limitaciones
temporales (por ejemplo, un elemento de una lista de tareas pendientes que indica que
se debe pagar una factura al final del mes), es posible que los usuarios quieran asociar
los avisos y las fechas de finalizacin con las tareas. Considera la posibilidad de mostrar
al usuario las notificaciones del sistema programadas para la hora en que quiere que se
le enve el aviso. Una buena prctica para las notificaciones del sistema pasadas por alto
consiste en mostrar tambin el aviso en el icono, como se muestra a continuacin.
El tema sobre las directrices y la lista de comprobacin para notificaciones del sistema
contiene ms informacin sobre los procedimientos recomendados para las
notificaciones del sistema. El tema sobre las directrices y la lista de comprobacin para
iconos contiene ms informacin sobre los procedimientos recomendados para los
iconos.
Perfil mvil
La mayora de las personas tienen ms de un equipo de Microsoft Windows. Si tu

aplicacin proporciona una experiencia del usuario coherente en todos los equipos de
Windows 8 de un usuario, este obtendr la experiencia que espera. Puedes usar el perfil
mvil para mover la configuracin de tu aplicacin, informacin sobre la ltima accin
del usuario en tu aplicacin y otras preferencias de la aplicacin que sean tiles para los
usuarios en todos sus equipos. En el tema sobre las Directrices para perfiles mviles de
datos de la aplicacin encontrars ms informacin sobre los procedimientos
recomendados del perfil mvil.
Orientacin y vistas
Puesto que Windows 8 se ejecuta en diversos tipos de dispositivos y cuenta con un
nuevo modelo multitarea, debes asegurarte de que tu aplicacin admita varios estados
de visualizacin, como acopada, pantalla completa, vertical y horizontal.
Vistas vertical y horizontal
Al disear tu aplicacin de productividad para Windows 8, considera todas las vistas de

la aplicacin, como las diferentes resoluciones de pantalla y los distintos tamaos de
dispositivo. Windows 8 te permite escalar el diseo de la distribucin vertical y de
pantallas de alta resolucin mediante la incorporacin de una mayor cantidad de
contenido en la aplicacin para dispositivos ms grandes. Exhibe la aplicacin en vista
horizontal o vertical. Este es un ejemplo de la vista vertical en una aplicacin de notas.
Adems, la vista vertical es excelente para leer y consumir grandes cantidades de

contenido. Si la aplicacin se visualiza en orientacin vertical, reorganiza el contenido
para que se ajuste a esa vista. Debes hacer esto porque la orientacin vertical es la ms
comn para leer, especialmente en documentos, hojas de clculo y otro contenido
similar.
Vista acoplada
Si quieres ver ms de una aplicacin a la vez, la vista acoplada te facilita la tarea sin
necesidad de tener que interactuar de forma manual, como suele suceder en el entorno
de escritorio tradicional. Cuando dos aplicaciones estn visibles, siempre hay una
aplicacin que es ms grande y otra que es ms pequea, y puedes intercambiarlas
fcilmente. En la aplicacin principal, siempre se garantiza la resolucin mnima de
1024 768; de esta forma, la aplicacin no tiene que realizar ninguna accin especial
para admitir ese estado. La aplicacin ms pequea, la cual denominaremos aplicacin
acoplada, siempre tiene un ancho fijo en cualquier pantalla; de esta forma, puedes fijar
el ancho y crear un estado acoplado adaptado para tu aplicacin.
Por lo general, debes considerar la vista acoplada como la misma aplicacin, pero ms
pequea. Cambiar el tamao de la aplicacin de un tamao grande a uno pequeo (y
viceversa) no debe modificar el contexto y el estado del usuario. Esto es particularmente
importante en las aplicaciones de productividad donde los usuarios pueden haber
dedicado mucho esfuerzo a la creacin de contenido. Conserva la entrada de texto, la
posicin de desplazamiento y cualquier seleccin que haya establecido el usuario
cuando el usuario cambia el tamao de la aplicacin.
Te recomendamos que la vista acoplada tenga paridad con las vistas ms grandes de la
aplicacin. Si la seleccin de texto invoca la barra de la aplicacin con un comando para
dar formato al texto seleccionado, este comportamiento debera mantenerse igual en la
vista acoplada. Evita que los usuarios se pregunten por qu de pronto no pueden aplicar
negrita al texto seleccionado.
Nota sobre la barra de la aplicacin: como la vista acoplada es ms estrecha, el control
de la barra de la aplicacin quita automticamente las etiquetas y reduce el espaciado
entre los comandos. Si hay muchos comandos, es posible tener dos filas de comandos
en la barra de la aplicacin, en la vista acoplada. Para obtener ms informacin,
consulta el tema sobre las directrices para barras de la aplicacin.
Adems, piensa en cmo la aplicacin agrega valor y haz que esos escenarios sean
excelentes. Muestra a los usuarios por qu tu aplicacin funciona a la perfeccin con
otras aplicaciones. Por ejemplo, es fcil imaginar una aplicacin para tomar notas o para
crear listas que trabaje junto a otra aplicacin. Al investigar o al crear contenido, es
normal tener una aplicacin de anlisis o de referencia acoplada junto a tu trabajo
principal. Las aplicaciones de lectura o creacin de contenido acopladas son muy tiles
para usarlas como referencia mientras realizas otro trabajo. Piensa en la cantidad de
veces que evitaras maximizar la aplicacin en el escritorio tradicional. Esos son los
escenarios que la aplicacin debe admitir cuando se encuentra acoplada.
La vista acoplada es una excelente forma de aumentar el tiempo de tu aplicacin en

pantalla y atraer a los usuarios por perodos ms largos. Con un estado acoplado para
cada vista de tu aplicacin, permites al usuario realizar estas mltiples tareas y
conservas su atencin por ms tiempo. Evita hacer que la vista acoplada sea de
"consumo o de solo lectura", porque los usuarios consideran las acciones de consumo y
creacin como un flujo continuo y no como una experiencia en que pueden usar unas
acciones y no las otras. Este es un ejemplo de la vista acoplada en una aplicacin de
notas.
Temas relacionados
Aplicaciones de deportes (Preliminary)

[Esta documentacin es preliminar y est sujeta a cambios.]

El libro de ideas de la aplicacin de deportes describe una aplicacin de deportes ficticia
para Windows 8. Puedes inspirarte en ella para el diseo de tu propia aplicacin de
deportes revisando los escenarios de este tema y viendo cmo se utiliza el lenguaje de
diseo Microsoft de Windows 8 en la aplicacin.
Escenarios de la aplicacin de deportes

La aplicacin de deportes que se describe en este tema usa las caractersticas de diseo
de Microsoft para crear una atrayente experiencia de deportes para los usuarios.
Atraer
Compartir
Atraer a otros
Llama la atencin a los usuarios hacia el contenido de tu aplicacin

Puedes usar el lenguaje de diseo Microsoft para crear una experiencia de exploracin
informal que sea divertida, fcil y potente. Tambin puedes usar iconos dinmicos para
llamar la atencin a los usuarios hacia la aplicacin. Sigue este escenario para ver cmo
puedes hacer que tu aplicacin de deportes sea atrayente.
Mientras ve las noticias en la televisin, John Rodman est usando su tableta Windows
8 como "segunda pantalla".
La aplicacin Contoso Sports atrae su atencin con un icono dinmico que indica los
titulares de deportes.
La vista est distribuida horizontalmente con todas las opciones en el mismo Canvas
panormico. John puede explorar sin navegar por una jerarqua de pginas.
John acerca los dedos para activar el zoom semntico, que le permite navegar
rpidamente hacia su deporte favorito.
Resumen del contenido de la aplicacin

En el primer escenario vemos que...
Tu contenido destaca sin necesidad de un contenedor visual ni varias jerarquas de

navegacin.
Puedes usar iconos dinmicos para llamar la atencin de los usuarios hacia la
aplicacin con informacin que les es relevante.
Para obtener informacin sobre los iconos dinmicos, el movimiento panormico y el

zoom semntico, consulta los siguientes temas:
Instrucciones de iconos dinmicos

Muestra de iconos dinmicos
Instrucciones de movimiento panormico
Muestra de movimiento panormico (HTML)
Muestra de movimiento panormico (XAML)
Instrucciones de zoom semntico
Muestra de zoom semntico (C#/VB/C++)
Muestra de zoom semntico (JavaScript)
Comparte localmente y a travs de las redes

Puedes usar Reproducir en para compartir la experiencia de tu PC en una televisin.
Puedes usar el contrato para contenido compartido para compartir el contenido con otras
aplicaciones.
John ve un artculo interesante y lo abre para verlo en una vista en pantalla completa.
John reproduce el vdeo destacado del artculo en su televisin habilitada para

Reproducir en.
John sabe que el jugador lesionado est en el equipo de favoritos de su amigo Ben
Martens. Desliza rpidamente el dedo para abrir el acceso a Compartir donde usa la
aplicacin Contoso Social para avisar a su amigo.
Resumen de Compartir
En el segundo escenario vemos que...
Puedes ampliar el contenido de la aplicacin a cualquier dispositivo habilitado para

Reproducir en.
Puedes convertir tu contenido en origen de contenido compartido y Windows 8 te
conecta con otras aplicaciones, correo electrnico y redes sociales.
Puedes hacer que tu aplicacin sea un destino de contenido compartido para recibir
contenido, vnculos u otros tipos de datos estructurados.
Para obtener informacin sobre Reproducir en y Compartir, consulta los siguientes

temas:
Instrucciones de Reproducir en
Muestra de Reproducir en
Instrucciones de Compartir
Muestra de origen de contenido compartido
Muestra de destino de contenido compartido
Atrae al usuario que no est en la aplicacin

Puedes volver a atraer a los usuarios a tu aplicacin con notificaciones del sistema
oportunas y el contrato de Buscar.
Ben Martens est trabajando con un informe. Ve la notificacin del sistema de la
aplicacin Contoso Social de John Rodman que dice que su jugador favorito est
lesionado.
Ben hace clic en la notificacin del sistema, que es un vnculo profundo a la aplicacin
de la red social Contoso. All ve que se ha publicado un vnculo a la pgina web de la
historia.
Ben necesita un nuevo extremo de campo para su equipo de favoritos. Usa el acceso a
Buscar por todo el sistema para buscar un nuevo jugador.
Ben busca en la aplicacin Contoso Sports y ve los extremos de campo relevantes.

Selecciona a Ben Smith, que parece que podra ser un buen sustituto.
Despus de seleccionar su nuevo extremo de campo, Ben saca la barra de la aplicacin

para agregar el nuevo jugador en su equipo de favoritos. La barra de la aplicacin es til
para la navegacin (mostrada como la barra de la aplicacin superior) y los comandos
(mostrados como la barra de la aplicacin inferior), haciendo que tu aplicacin destaque
aun ms.
Ben quiere llevar un seguimiento de su nuevo jugador, as que va al rastreador de

resultados.
Ben quiere supervisar el rastreador de resultados mientras sigue trabajando con su

informe, as que deja la aplicacin Contoso Sports en la vista acoplada.
Resumen de cmo atraer al usuario que no est en la aplicacin

En el tercer escenario vemos que...
Las notificaciones del sistema vinculan en profundidad dentro de la aplicacin y

proporcionan al usuario la oportunidad de volver a actuar con el contenido.
Una vista acoplada con todas las caractersticas permite a los usuarios aumentar su
actividad con la aplicacin.
La bsqueda coloca a la aplicacin en la lista de destinos posibles cuando el usuario
necesite informacin.
Para obtener informacin sobre las notificaciones del sistema, la vista acoplada, la
bsqueda y la barra de la aplicacin, consulta los siguientes temas:
Directrices y lista de comprobacin de notificaciones del sistema

Muestra de notificacin del sistema
Instrucciones de vista acoplada
Muestra de vista acoplada
Instrucciones de bsqueda
Muestra de Buscar
Instrucciones de la barra de la aplicacin
Muestra de la barra de la aplicacin (HTML)
Muestra de la barra de la aplicacin (XAML)
Explora las posibilidades

Windows 8 est repleto de nuevas caractersticas que pueden hacer que tu aplicacin
destaque aun ms. Para obtener ms informacin, consulta la gua de producto de
Windows 8 para desarrolladores.
Temas relacionados
Muestras e instrucciones
Muestra de Buscar
Instrucciones de Reproducir en
Muestra de Reproducir en
Aplicaciones de compras (Preliminary)


El libro de ideas de la aplicacin de compras describe una aplicacin de compras ficticia
para Windows 8. Puedes inspirarte en ella para el diseo de tu propia aplicacin de
compras revisando los escenarios de este tema y viendo cmo se utiliza el lenguaje de
Escenarios de la aplicacin de compras

La aplicacin de compras que se describe en este tema usa las caractersticas de diseo
de Microsoft para crear una atrayente experiencia de compras para los usuarios.
Iconos dinmicos y
exploracin
Buscar y acoplar
Compartir

Puedes usar el lenguaje de diseo Microsoft para crear una experiencia de exploracin
informal que sea divertida, fcil y potente. Tambin puedes usar iconos dinmicos para
llamar la atencin a los usuarios hacia la aplicacin. Sigue este escenario para ver cmo
puedes hacer que tu aplicacin de compras sea atrayente.
Toms Navarro est usando su tableta Windows 8 en el autobs de camino a casa

despus del trabajo.
Un icono dinmico que dice "Recin llegado:" avisa a Toms sobre la llegada de nuevos
artculos de la temporada de otoo. Esto le interesa a Toms, as que hace clic en el
icono para entrar en la aplicacin.
Toms necesita una chaqueta nueva, as que hace clic en la categora "Sobre los
hombros".
La vista de las categoras est distribuida horizontalmente, con una vista detallada de
todas las opciones que se muestran en el mismo Canvas. Toms puede explorar sin tener
que navegar por ninguna jerarqua de contenido.
Toms acerca los dedos para activar el zoom semntico, que le permite visualizar y
navegar rpidamente por la lista de elementos.
Despus de hacer clic en la seccin de "Chaquetas", Toms selecciona una chaqueta

para verla en la vista de elementos y la agrega al carro de la compra.
Toms completa su compra adquiriendo la chaqueta y una camisa que ya haba

agregado al carro antes.
Resumen de iconos dinmicos y exploracin

Los iconos dinmicos llaman la atencin al usuario hacia la aplicacin mostrando

informacin que es relevante para el usuario.
El contenido destaca en la aplicacin sin ningn contenedor visual y permite que los
usuarios se sumerjan en la experiencia que les interesa.
Para obtener informacin sobre los iconos dinmicos y el zoom semntico, consulta los
siguientes temas:
Directrices de iconos dinmicos

Directrices de zoom semntico
Dirige la participacin de los usuarios

Puedes usar el lenguaje de diseo Microsoft para atraer a los usuarios cuando estn
listos para comprar mediante la implementacin del contrato de Buscar y habilitando la
multitarea del usuario mediante la vista acoplada.
Antonio Bermejo est usando su tableta Windows 8 para leer un blog de estilo.
Desde Internet Explorer, o cualquier otra aplicacin, Antonio puede sacar el acceso a
Buscar en el lado derecho y buscar una chaqueta similar.
Antonio selecciona la aplicacin "Head to Toe", que muestra sus resultados de la

bsqueda del trmino "Chaqueta".
Antonio usa un filtro para reducir los resultados de la bsqueda segn el precio.
Despus selecciona un elemento.
Antonio acopla la aplicacin a la izquierda para poder comparar el elemento con la

chaqueta del blog. Satisfecho con su eleccin, Antonio agrega la chaqueta a su carro de
la compra.
Mientras est an en la vista acoplada, Antonio decide completar la compra.
Resumen de cmo dirigir la participacin de los usuarios

El contrato de Buscar pone la aplicacin en la lista de destinos posibles cuando el

cliente pretende realizar una compra.
Un vista acoplada con todas las caractersticas permite que los clientes puedan
explorar y comparar tu contenido con otras aplicaciones y sitios web.
Para obtener informacin sobre la bsqueda y la vista acoplada, consulta los siguientes
temas:
Muestra de Buscar
Conectar con Compartir

Puedes usar el lenguaje de diseo Microsoft para conectar a los usuarios con cualquier
otra aplicacin, contacto o red social.
Diego Arteaga acaba de comprar una chaqueta. Despus de realizar el pedido, se le dice
que puede compartir la noticia.
Diego usa el contrato para contenido compartido para compartir el cdigo promocional
con sus amigos.
Resumen de conectar a los usuarios con Compartir


Puedes hacer que tu aplicacin sea un destino de contenido compartido para recibir
contenido, vnculos u otros tipos de datos estructurados.
Para obtener informacin sobre el contenido compartido, consulta los siguientes temas:

Temas relacionados
Muestra de Buscar
Aplicaciones de viajes (Preliminary)


El libro de ideas de la aplicacin de viajes describe una aplicacin de viajes ficticia para
Windows 8. Puedes inspirarte en ella para el diseo de tu propia aplicacin de viajes
revisando los escenarios de este tema y viendo cmo se utiliza el lenguaje de diseo
Microsoft de Windows 8 en la aplicacin.
Escenarios de la aplicacin de viajes

La aplicacin de viajes que se describe en este tema usa las caractersticas de diseo de
Microsoft para crear una atrayente experiencia de viajes para los usuarios.
Inspirar
Reservar
Facturar
Inspira a los usuarios y atrelos

Puedes usar iconos dinmicos para llamar la atencin de los usuarios hacia tu aplicacin,
y el contrato para contenido compartido facilita la expansin de su contenido a otras.
Sigue este escenario para ver cmo puedes hacer que tu aplicacin de viajes sea
atrayente.
Ben ha abierto el icono dinmico de la aplicacin Wigtip Destinations y la oferta de

unas vacaciones en la playa le llama la atencin.
Despus de iniciar la aplicacin, Ben hace clic en la oferta de destinos de playa.
Ben selecciona la oferta de Contoso Beaches para echarle un vistazo.
A Ben le gusta el aspecto de la oferta, as que decide compartirla con su amigo.
Resumen de iconos dinmicos y Compartir

Los iconos dinmicos llaman la atencin al usuario hacia la aplicacin mostrando

informacin que es relevante para el usuario.
Para obtener informacin sobre iconos dinmicos y Compartir, consulta los siguientes
temas:

Reserva del viaje

Puedes usar la la barra de la aplicacin y el zoom semntico para hacer que tu contenido
destaque mientras proporcionas a los usuarios una forma coherente de navegar por la
aplicacin.
Ben inicia la aplicacin Wingtip Destinations y escribe la ciudad a la que va a viajar. La

aplicacin ya conoce su ubicacin actual.
El calendario es fcil de usar con la funcionalidad tctil y un mouse.
La barra de la aplicacin le ofrece a Ben varias formas de ver, filtrar y ordenar sus
opciones de vuelos.
A Ben le preocupa el precio, as que decide ver los resultados por precios.
Ben usa el zoom semntico para obtener una vista diferente de los datos.
Ben ve su itinerario, introduce la informacin de los pasajeros, elige los asientos e

introduce los detalles del pago en un solo paso. A partir de aqu, puede guardar este
viaje hasta ms tarde o reservar su billete.
Ben decide reservar el viaje y completa la compra.
Resumen de la reserva del viaje

Tu contenido queda en primer plano al poner los comandos y la navegacin en la barra

de la aplicacin.
El zoom semntico permite a los usuarios ver datos de diferentes formas.
Puedes hacer que la aplicacin reconozca la ubicacin mediante la ubicacin
geogrfica.
Para obtener informacin sobre la barra de la aplicacin, el zoom semntico y las

aplicaciones con reconocimiento de ubicacin, consulta los siguientes temas:

Directrices para aplicaciones con reconocimiento de ubicacin
Muestra de ubicacin geogrfica
Notificaciones e impresin
Puedes usar el ecosistema de Windows 8 para comunicarte con los usuarios.
Ben est trabajando, cuando una notificacin del sistema de Wingtip Destinations le
informa de que es hora de realizar la facturacin.
Ben hace clic en la notificacin del sistema, que es un vnculo profundo a la pgina de
facturacin. Realiza la facturacin e imprime su tarjeta de embarque.
Resumen de notificaciones e impresin


Puedes aprovechar todo el ecosistema de Windows en tu aplicacin, incluidos los
dispositivos como las impresoras.
Para obtener informacin sobre las notificaciones del sistema y la impresin, consulta
los siguientes temas:

Instrucciones de impresin
Muestra de impresin

Por ejemplo, agregar el contrato de Buscar en tu aplicacin te permite buscar en la
aplicacin desde cualquier otra aplicacin. Para obtener ms informacin, consulta
Muestra de Buscar e Instrucciones de bsqueda.
Temas relacionados
Instrucciones de impresin
Muestra de impresin
Directrices para aplicaciones con reconocimiento de ubicacin
Muestra de ubicacin geogrfica
Muestra de Buscar
Aplicaciones educativas (Preliminary)


El libro de ideas de la aplicacin educativa describe una aplicacin educativa ficticia
para Windows 8. Puedes inspirarte en ella para el diseo de tu propia aplicacin
educativa revisando los escenarios de este tema y viendo cmo se utiliza el lenguaje de
Escenarios de la aplicacin educativa

La aplicacin educativa que se describe en este tema usa las caractersticas de diseo de
Microsoft para crear una atrayente experiencia educativa para profesores y estudiantes.
Profesora
Estudiante

Puedes usar el lenguaje de diseo Microsoft para acceder fcilmente a los elemento
multimedia del sistema de archivos. Tambin puedes usar iconos dinmicos para llamar
la atencin a los usuarios hacia la aplicacin. Sigue este escenario para ver cmo puedes
mostrar contenido en tu aplicacin educativa que sea relevante para el usuario.
La vista de Profesor ofrece una visin general del da del profesor, organizado por
clases. La seleccin de otra clase revela instantneamente el contenido relevante.
La profesora ve todas las tareas actuales en la visin general de deberes y selecciona el

botn Agregar de la barra de la aplicacin para agregar una nueva tarea de deberes.
Desde la vista panormica de deberes, puede agregar detalles de los deberes, agregar
estudiantes y grupos, incluir informacin de las notas y asociar recursos para los
deberes.
La profesora usa el selector de archivos para agregar archivos de vdeo a unos deberes.
Una vez que ha terminado de crear los deberes, la profesora publica los deberes a los
estudiantes.
El icono dinmico de la aplicacin Lucern LBS recibe una insercin de actualizacin y

avisa a los estudiantes acerca de los nuevos deberes.
Resumen del contenido de la aplicacin

Puedes colocar grandes cantidades de contenido en un Canvas panormico.

Puedes acceder fcilmente a los archivos y los elementos multimedia del sistema de
archivos.
Puedes usar iconos dinmicos para llamar la atencin de los usuarios hacia la
aplicacin con informacin que les es relevante.
Para obtener informacin sobre los iconos dinmicos, el movimiento panormico y la

barra de la aplicacin, consulta los siguientes temas:

Atrae a los usuarios continuamente

Puedes usar el lenguaje de diseo Microsoft para atraer a los usuarios mediante
notificaciones del sistema y manteniendo la aplicacin disponible en vista acoplada.
Puedes compartir informacin fcilmente desde tu aplicacin con otras aplicaciones.
Steve est trabajando en su presentacin de Microsoft PowerPoint cuando recibe una
notificacin del sistema acerca de nuevos deberes.
Steve selecciona la notificacin del sistema y se inicia la aplicacin Lucerne LBS, que
navega hasta la pgina de deberes para ver los deberes de Steve. La pgina de deberes
enumera los captulos de un libro de texto y un artculo web, junto con los miembros de
su grupo.
Steve ve la tarea de los deberes con la vista acoplada y hace clic en los vnculos web
proporcionados.
Steve ve el sitio web mientras toma notas en la aplicacin Lucerne LBS en la vista
acoplada.
Despus de revisar las notas en la vista de pantalla completa, Steve deslizar rpidamente
el dedo en el acceso a Compartir y enva las notas a los miembros de su grupo.
Resumen de cmo dirigir la participacin de los usuarios


Una vista acoplada con todas las caractersticas permite a los usuarios aumentar su
actividad con la aplicacin.
Puedes hacer que tu aplicacin ofrezca contenido compartido y enve contenido,
vnculos u otros tipos de datos estructurados.
Para obtener informacin sobre las notificaciones del sistema, la vista acoplada y
Compartir, consulta los siguientes temas:


Temas relacionados
Casos prcticos (aplicaciones de la

Tienda Windows) (Windows)
Caso prctico de diseo: de sitio web a aplicacin de la Tienda Windows
Caso prctico de diseo: de iPad a aplicacin de la Tienda Windows
Caso prctico de diseo: aplicacin de la Tienda Windows de la lnea de negocio empresarial
De sitio web a aplicacin de la Tienda Windows

Aprende a usar las tecnologas web con las que ests
familiarizado para crear aplicaciones de la Tienda
Windows.
De iPad a aplicacin de la Tienda Windows

Aprende a reconvertir tus aplicaciones para iOS para
que sigan los principios del diseo Microsoft y
saquen partido de la plataforma Windows.
Aplicacin de la Tienda Windows de la lnea de

negocio empresarial
Aprende a disear aplicaciones de la Tienda
Windows de lnea de negocio (LOB) para usuarios
de la empresa.
Para ms informacin acerca de la oportunidad comercial de Windows 8, consulta

Venta de aplicaciones. Para obtener ms informacin acerca de las caractersticas
usadas para crear aplicaciones de la Tienda Windows, lee la gua de producto de
Caso prctico de diseo: de sitio web a

aplicacin de la Tienda Windows
(Windows)

En este artculo
Aplicacin y sitio web de camiones de venta de alimentos

Diseo y navegacin
Comandos y acciones
Contratos
Funcionalidad tctil
Escalado y vistas
Notificaciones
Conclusin
Acerca de los autores
El diseo de sitios web ha sido una prctica comn durante dcadas. Con Windows 8,
los diseadores y desarrolladores pueden usar las tecnologas web con las que estn
familiarizados, como HTML5, hojas de estilos en cascada, nivel 3 (CSS3) y JavaScript,
para crear aplicaciones de la Tienda Windows. Aqu exploraremos cmo exponer las
funcionalidades de un sitio web para hacer que sea una excelente aplicacin de la
Tienda Windows y mostramos maneras de proporcionar valor adicional, personalizacin
y experiencias enriquecidas mediante el uso de las caractersticas de la plataforma de
Windows 8.
Nuestro objetivo es ayudar a los diseadores y desarrolladores a redisear sus sitios web
como aplicaciones de la Tienda Windows.

Venta de aplicaciones. Para ms informacin acerca de las caractersticas usadas para
crear aplicaciones de la Tienda Windows, consulta la gua de producto de Windows 8
para desarrolladores.
Descarga este artculo: para ello, consulta la versin sin conexin de este artculo.
Aplicacin y sitio web de camiones de venta de alimentos

Este artculo se basa en el sitio web de camiones de venta de alimentos que permite que
los usuarios busquen camiones de venta de alimentos en su rea, estn actualizados con
las ltimas noticias y ofrezcan crticas de usuario de dichos camiones. En el caso
prctico orientado al diseo que se encuentra a continuacin, exploramos diversas
maneras de redisear la funcionalidad clave del sitio y extenderla como aplicacin de la
Tienda Windows.
Nuestro objetivo al migrar a una aplicacin de la Tienda Windows fue resaltar las
mejores caractersticas del sitio web al tiempo que se mantiene paridad con la
funcionalidad clave del sitio. Determinamos que la aplicacin de la Tienda Windows es
la mejor para permitir que los usuarios exploren y encuentren los camiones cercanos. En
la siguiente imagen se muestra la anatoma de la interfaz de usuario del sitio web de
camiones de venta de alimentos. Aqu te mostramos cmo trasladar cada uno de estos
componentes de la interfaz de usuario a un estilo de diseo Microsoft.
1.
2.
3.
4.
5.
6.
Diseo y navegacin
Comandos y acciones
Contratos: buscar, contenido compartido y configuracin
Funcionalidad tctil
Escalado y vistas
Notificaciones
Diseo y navegacin
Centrarse en el contenido, no en el contenedor visual
La mayora de los sitios web usan modelos de diseo bien establecidos. El diseo de la
pgina principal tiene una interfaz de usuario que admite la navegacin (tanto de
encabezado como de pie de pgina), los componentes de utilidad (inicio de sesin,
bsqueda) y el acceso a otro contenido (blogs y noticias). Estos son elementos comunes
en los sitios web, pero generan una distraccin en los usuarios y evitan que se centren
en lo ms importante: encontrar un camin de venta de alimentos cercano. Al disear la
aplicacin de la Tienda Windows, quitamos gran parte de esta interfaz de usuario y del
contenido porque no estaban relacionados directamente con la caracterstica principal de
la aplicacin.
Sitio web:
El sitio web tiene un modelo de diseo de dos columnas comn: contenido principal a
la izquierda y el resto, a la derecha.
El punto focal del sitio, los camiones de venta de alimentos, ocupa solamente
alrededor de un tercio de la pantalla.
Aplicacin de la Tienda Windows:

Todo el espacio en la pgina de destino est dedicado a aquello para lo que sirve esta
aplicacin: encontrar un camin de venta de alimentos cercano.
Ejemplo: resaltar contenido en la pgina principal del sitio web y en la Pantalla
principal de la aplicacin de la Tienda Windows.
Tanto el sitio web como la aplicacin de la Tienda Windows muestran las categoras y
los camiones de venta de alimentos destacados en sus pginas principales. Debido a la
limitacin de espacio en el sitio web, cada categora de camin de venta de alimentos
est representada por una nica imagen. Cuando se dise la Pantalla principal de la
aplicacin de la Tienda Windows, elegimos poner ms informacin sobre los camiones
de venta de alimentos en el nivel superior y, de este modo, proporcionar ms contexto a
los usuarios y crear una interfaz ms atractiva.
Sitio web:
Cada categora de camiones de venta de

alimentos est representada por una nica
imagen. Los usuarios deben ir a otra
pgina para ver ms camiones en dicha
categora y despus seleccionar un
camin para ver los detalles.
Cada categora est representada por un

grupo de imgenes, a fin de que los usuarios
puedan determinar con rapidez qu camiones
de una categora dada se encuentran cerca.
Los usuarios pueden ir directamente a un
camin desde la Pantalla principal.
Para obtener ms informacin acerca de cmo navegar en las aplicaciones de la Tienda

Windows, consulta el tema sobre el Diseo de navegacin para aplicaciones de la
Tienda Windows.
Seguir la silueta de la aplicacin de la Tienda Windows y alinear con la cuadrcula
La caracterstica ms reconocible de una silueta de aplicacin de la Tienda Windows

tpica es la regin de la pantalla destinada al contenido, con mrgenes grandes en los
bordes superior, inferior y derecho. Los mrgenes izquierdos y los elementos que
aparecen desde la derecha actan como indicaciones visuales de que el contenido se
desplaza lateralmente de derecha a izquierda. Los mrgenes superior e inferior actan
como riel visual para anclar el contenido. Los componentes de la pgina se alinean con
la cuadrcula para representar jerarqua.
Ejemplo: aplicacin para camiones de venta de alimentos diseada en la
cuadrcula y silueta de la aplicacin de la Tienda Windows.
Las guas rojas muestran cmo cada elemento de la pgina se alinea con la cuadrcula
(ten en cuenta que una unidad equivale a 20 px).
A. Los mrgenes superior e izquierdo son los mismos en toda la aplicacin.
B. Usamos un mismo margen para separar las diferentes categoras de camiones como
"Camiones destacados", "Cercanos" y "Asiticos".
C. Usamos un mismo margen para separar las imgenes dentro de una categora de
camiones. Este margen es ms pequeo que el de la categora de camiones de venta
de alimentos para representar jerarqua de diseo de pgina.
D. El ttulo de grupo de cada categora de camin de venta de alimentos tambin se
alinea con la cuadrcula.
Usar manipulacin directa para navegar
En el sitio web, los elementos de navegacin se repiten tanto en la barra de navegacin

superior como en el pie de pgina. Los elementos de navegacin son permanentes y
siempre estn a la vista. Hemos diseado los elementos de navegacin en la aplicacin
de la Tienda Windows para que se integren directamente con el contenido y
permanezcan ocultos hasta que el usuario los necesite.
Ejemplo: navegar hasta un camin en concreto en el sitio web y en la aplicacin de

la Tienda Windows.
Sitio web:
A. Los usuarios navegan a una pgina
de categoras separada en el sitio web
para ver todas las categoras de
camiones.

A. La Pantalla principal incluye una
pgina de concentrador que consta de
grupos de contenido: camiones
destacados, camiones cercanos y la
B. Despus eligen una categora (por

ejemplo, "camiones de venta de
barbacoa") y la especifican.
C. El usuario finalmente puede elegir
un camin en la categora
seleccionada.
vista de categoras.
B. Los usuarios pueden usar la
funcionalidad tctil para desplazarse
lateralmente en ambas direcciones
para ver las diferentes categoras de
camiones de venta de alimentos
directamente en la Pantalla principal.
C. Dado que cada concentrador resalta
varios camiones en la categora, los
usuarios pueden pulsar en uno para ir
directamente a su pgina, o pueden
pulsar en el texto del encabezado de
grupo de la categora (por ejemplo,
"Asiticos") para ir a la pgina de la
categora.
Comandos y acciones
Mantener las acciones y los comandos de la aplicacin en la barra de la aplicacin
Los sitios web frecuentemente usan comandos ad-hoc que aparecen como acciones de
usuario en lnea con el contexto. Por ejemplo, en nuestro sitio web, la pgina de cada
camin de venta de alimentos tiene un vnculo para que los usuarios carguen fotos de un
camin dado. Estas acciones contextuales se repiten en la pgina individual de cada
camin.
Siguiendo el enfoque de "anteponer el contenido al contenedor visual" del diseo de
aplicacin de la Tienda Windows, hemos puesto todas las acciones contextuales en la
barra de la aplicacin, un control comn del sistema. Adems, los comandos usados
frecuentemente se encuentran cerca de los bordes para que sea ms cmodo llegar a
ellos. Mediante la aplicacin de estos principios de diseo, la superficie de diseo de la
aplicacin no se encuentra abarrotada de controles, y sin importar dnde se encuentre un
usuario, puede deslizar rpidamente la barra de la aplicacin desde los bordes inferior o
superior de la pantalla para ver las acciones relevantes. Todas las aplicaciones de la
Tienda Windows pueden usar la barra de la aplicacin para sus comandos. Dado que los
usuarios estarn familiarizados con las interacciones de la barra de la aplicacin,
tambin aumenta la facilidad de uso de nuestra aplicacin y todo el sistema parece ms
coherente.
Ejemplo: cargar una foto de un camin de venta de alimentos en el sitio web y en

la aplicacin de la Tienda Windows.
Sitio web:
Comandos ad-hoc. Las acciones del

usuario estn en lnea con el
contenido.
De manera predeterminada, la barra

de la aplicacin se oculta para
proporcionar una experiencia
envolvente a los usuarios.
Un usuario puede deslizar

rpidamente desde la parte inferior o
superior de la pantalla para obtener
acceso a las acciones contextuales. Las
acciones cambian en funcin del lugar
donde se encuentre el usuario en la
aplicacin o del contenido que se
seleccione.
Contratos
El sitio web de camiones de venta de alimentos sigue convenciones de sitio web
comunes para las acciones globales, como bsqueda e inicio de sesin. Estas acciones
se fijan permanentemente a la esquina superior derecha del sitio. Cuando se dise la
aplicacin de la Tienda Windows, no incluimos nuestra propia interfaz de usuario para
estas acciones globales. En cambio, usamos funcionalidades integradas del sistema,
como el contrato de Buscar, el contrato para contenido compartido y el contrato de
Configuracin. Dado que estos componentes de la interfaz de usuario no estn siempre
en pantalla, el Canvas de la aplicacin est ms ordenado y proporciona ms espacio
para el contenido.
Usar el contrato de Buscar para centralizar la experiencia de bsqueda
Como la mayora de los sitios web, el sitio de camiones de venta de alimentos tiene un
cuadro de bsqueda en cada pgina y la bsqueda se realiza en el sitio solamente. Esto
significa que los usuarios primero tienen que ir al sitio web de camiones de venta de
alimentos para poder buscar.
Cuando se dise la experiencia de bsqueda en la aplicacin de la Tienda Windows,
usamos el contrato de Buscar. Como resultado, no hay un contenedor visual permanente
en pantalla para buscar. El acceso a Buscar proporciona acceso a la funcionalidad de
bsqueda, y un usuario puede invocarlo en cualquier parte de la aplicacin o desde
cualquier parte del sistema.
Ejemplo: buscar un camin de venta de alimentos con el sitio web y la aplicacin

de la Tienda Windows.
Sitio web:
El cuadro de bsqueda est siempre visible en el sitio.

Cuando se muestran los resultados de la bsqueda, todo el contenedor visual del sitio
web est presente an.
Los usuarios siempre tienen que ir primero al sitio web antes de realizar una bsqueda
de un camin de venta de alimentos.
Los usuarios pueden realizar una bsqueda en cualquier parte de la aplicacin

deslizando rpidamente desde el borde para que aparezcan los accesos y eligiendo
Buscar.
De manera predeterminada, est seleccionada la aplicacin de camiones de venta de
alimentos porque el usuario actualmente se encuentra dentro de ella. Cuando el
usuario comienza a escribir, la aplicacin proporciona sugerencias de bsqueda en el
panel de bsqueda. De este modo, puede ver rpidamente qu trminos generan
resultados. Despus de que el usuario enva su consulta (por ejemplo "camin de venta
de barbacoa"), la aplicacin muestra una vista de resultados de bsqueda.
La vista de resultados de bsqueda est ordenada y dedicada exclusivamente a los
resultados de la bsqueda sin contenedor visual innecesario.
Ejemplo: buscar un camin de venta de alimentos fuera de la aplicacin

(disponible solo en la aplicacin de la Tienda Windows).
Adems de buscar en la aplicacin, los usuarios pueden realizar una bsqueda desde
fuera de ella seleccionando los camiones de venta de alimentos como destino de la
bsqueda. En este ejemplo, un usuario est buscando un "camin de venta de barbacoa"
desde la pantalla Inicio. El usuario pulsa en la aplicacin de camiones de venta de
alimentos de la lista de aplicaciones que se encuentra en el panel de bsqueda, y as se
inicia la aplicacin y se completa la consulta de bsqueda. Debido a que el camin de
venta de alimentos est optimizado para encontrar camiones de venta de alimentos
cercanos, con una pulsacin el usuario puede realizar una bsqueda y encontrar los
camiones de venta de barbacoa de su rea.
Usar el contrato para contenido compartido para llegar a ms destinos y personas que te
interesen
En el sitio web de camiones de venta de alimentos, los usuarios pueden compartir

informacin acerca de un camin de venta de alimentos particular a travs del correo
electrnico, Facebook o Twitter. Las opciones de uso compartido generalmente estn
disponibles en muchos lugares del sitio web, cerca del contenido que puede compartirse.
Los escenarios de uso compartido realmente se destacan en nuestra aplicacin de la
Tienda Windows gracias al contrato para contenido compartido. El acceso a Compartir
integrado en el sistema elimina la necesidad de que aparezcan botones Compartir a lo
largo y ancho de la aplicacin. Los usuarios siempre pueden encontrar opciones de
contenido compartido en una ubicacin coherente, sin importar qu aplicacin estn
usando. El cambio simplifica el diseo y el desarrollo porque no hay necesidad de
conectarse con cada servicio que el usuario quiera utilizar. Despus de integrar nuestra
aplicacin con Compartir, se conecta con cada aplicacin de Windows que haya
implementado el contrato para contenido compartido. No hay necesidad de lidiar con
cambios de API a servicios web externos.
Ejemplo: compartir una foto de un camin de venta de alimentos.

Sitio web:
Cada servicio de uso compartido tiene

su propio botn.
Los botones de uso compartido
aparecen dispersados en todo el sitio
web.
Una ubicacin coherente en todas las

para todas las opciones de uso
compartido. Los usuarios pueden
invocar el uso compartido en cualquier
parte dentro de la aplicacin.
Cuando un usuario elige un servicio de
uso compartido, la aplicacin de
destino puede personalizar el panel de
la interfaz de usuario y la marca.
Ejemplo: anlisis detallado del panel Compartir.
Toda aplicacin implementada como destino de contenido compartido aparece en la

lista de aplicaciones en el panel Compartir. Por ejemplo, Socialite, Tweet@Rama o
Mail.
Los usuarios pueden compartir una variedad de tipos de contenido admitidos por una
aplicacin. Por ejemplo, los usuarios pueden compartir vnculos, fotos o guardar la
informacin en una aplicacin de toma de notas si lo desean.
Los destinos de contenido compartido frecuentes se muestran en la parte superior
para ayudar a los usuarios a completar el flujo de trabajo de uso compartido con
rapidez.
Usar el panel Configuracin
El sitio web de camiones de venta de alimentos tiene un conjunto de funciones de

utilidad, como Acerca de, Iniciar sesin, Informacin de contacto y Boletn. Estas
funciones se encuentran en reas especficas de la pantalla conforme con modelos de
diseo web comunes. Por ello, los usuarios pueden encontrarlas con facilidad. Pero se
expanden en diferentes reas del sitio. Las tareas de administracin y configuracin no
son los puntos focales de la aplicacin de la Tienda Windows. Mediante el uso del
contrato de Configuracin con su punto de entrada coherente, los usuarios no tienen que
memorizar dnde estn estas funciones de administracin de la aplicacin y pueden
invocarlas de forma confiable cuando sea necesario.
Ejemplo: configurar opciones en el sitio web y en la aplicacin de la Tienda

Windows.
Sitio web:
Las funciones de utilidad, como Iniciar sesin, Acerca de, Contacto y Boletn, residen en
diferentes reas del sitio.

A. Las opciones de configuracin se encuentran todas en un nico lugar en el panel
Configuracin.
B. Los usuarios pueden iniciar sesin en cualquier parte dentro de la aplicacin sin salir
de su contexto actual.
C. La configuracin de notificaciones permite que los usuarios especifiquen qu tipos
de notificaciones quieren recibir. Esto reemplaza el boletn del sitio y proporciona a los
usuarios informacin oportuna desde la aplicacin.
Usar el selector de archivos para obtener acceso a archivos desde diversas ubicaciones
El sitio de camiones de venta de alimentos insta a los usuarios a cargar fotos de

camiones que se encuentran en su rea. Esta funcionalidad puede replicarse con
facilidad en una aplicacin de la Tienda Windows mediante el uso del selector de
archivos. El selector de archivos es un cuadro de dilogo 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 otros equipos conectados a travs
de un Grupo Hogar. Tambin pueden obtener acceso a elementos de las aplicaciones
que participan en el contrato de Selector de archivos.
Ejemplo: cargar una foto del camin de venta de alimentos desde el sistema de
archivos local.
El usuario pulsa el botn Cargar en la barra de la aplicacin y la interfaz de usuario del

selector de archivos se abre. Esta es una interfaz de usuario coherente que el usuario
ve siempre que quiera obtener acceso a los archivos.
Si se pulsa en el encabezado Archivos, el usuario ve un control flotante de todas las
ubicaciones de archivo disponibles y navega a una carpeta de archivos.
El usuario selecciona mltiples fotos en la carpeta y aparece una lista de miniaturas en
el costado inferior izquierdo que muestra las fotos seleccionadas.
Funcionalidad tctil
Usar el desplazamiento lateral para el diseo horizontal
Tanto el sitio web de camiones de venta de alimentos como la aplicacin de la Tienda

Windows estn diseados sobre la base de la ergonoma y el mtodo de interaccin del
usuario. El sitio web est diseado principalmente para interaccin mediante el mouse.
Por lo tanto, el contenido en cada pgina est dispuesto verticalmente y los usuarios
pueden usar su mouse para desplazarse al contenido que deseen con facilidad y rapidez.
La aplicacin de la Tienda Windows est diseada para la funcionalidad tctil y usa la
orientacin horizontal, como la mayora de los equipos de escritorio y porttiles. El
diseo horizontal optimiza el uso del espacio en pantalla. Adems, es ms cmodo y
natural para los usuarios desplazarse horizontalmente con la funcionalidad tctil en un
dispositivo horizontal que desplazarse verticalmente.
Ejemplo: navegar por el contenido del sitio web en lugar de la pantalla principal
de la aplicacin de la Tienda Windows.
Deslizamiento transversal para seleccionar objetos
Una convencin comn en los sitios web es usar casillas junto a mltiples objetos para
indicar las selecciones mltiples. Con Windows 8, un usuario puede hacer un rpido
gesto de deslizar rpidamente sobre un objeto, perpendicularmente a la direccin del
desplazamiento lateral, para seleccionar un objeto de una lista o cuadrcula. Cuando se
seleccionan los objetos, la barra de la aplicacin puede revelarse automticamente para
mostrar los comandos relevantes para el elemento.
Ejemplo: seleccionar varios camiones de venta de alimentos en la pantalla
principal para anclarlos a la pantalla Inicio.
En la pgina de destino de la aplicacin, cuando los usuarios deslizan rpidamente para
seleccionar un camin, se revela una barra de la aplicacin con un comando Agregar a
favoritos que puede marcar los camiones seleccionados. Este gesto puede revertirse.
Esto hace que la seleccin sea mucho ms eficiente en las aplicaciones de la Tienda
Windows y da a los usuarios la confianza necesaria para explorar la aplicacin.
Alejar y ampliar en el zoom semntico
Los gestos de alejar y ampliar permiten a los usuarios recorrer con rapidez una larga
lista de contenido. La pgina de aterrizaje de la aplicacin de la Tienda Windows
muestra un nmero de grupos, como Destacados, Cercanos, Asiticos, Barbacoa y
Desayuno. Los usuarios pueden desplazarse lateralmente para ver ms contenido o,
mediante el uso del zoom semntico, pueden saltar rpidamente a una seccin especfica.
Mediante el uso del control de zoom semntico, el gesto de alejar permite dar un vistazo
a todas las secciones de la vista actual. Despus, los usuarios pueden pulsar rpidamente
para saltar al comienzo, al final o a una seccin especfica de la lista. Puede aplicarse
ms diseo a la vista alejada para mostrar contenido interesante dentro de cada seccin
o metainformacin acerca de una seccin (como el nmero de camiones en cada
categora). Puede usarse para la navegacin, en lugar de los elementos de navegacin
persistentes en el Canvas de la aplicacin.
Ejemplo: saltar a una categora de camiones en particular mediante el zoom
semntico.
Sitio web:
El usuario debe navegar a una pgina

separada para ver todas las categoras.
El usuario puede usar el zoom

semntico en la Pantalla principal para
ver todas las categoras con facilidad,
sin salir de la pantalla.
En la vista del zoom semntico, se
representa cada categora mediante
una nica imagen. Todas las categoras
estn disponibles a travs de la
Pantalla principal sin la necesidad de
desplazarse lateralmente para ver una
lista completa.
Escalado y vistas
Diseo adaptativo para tamaos de pantalla y orientacin
Diseamos el sitio web de camiones de venta de alimentos para que sea lo

suficientemente flexible para escalar a diferentes dispositivos, tamaos de pantalla,
resoluciones y orientaciones. Al igual que en un diseo de sitio web fluido, los equipos
de Windows 8 van desde tabletas tctiles pequeas a equipos de escritorio o porttiles
grandes. Disear nuestra aplicacin para que tenga una apariencia excelente en la gran
variedad de dispositivos que admiten aplicaciones de la Tienda Windows es crucial si
queremos que nuestra aplicacin llegue a ms clientes.
Puedes aplicar muchos principios de diseo de sitio web al desarrollo de aplicaciones de
la Tienda Windows. Los controles y las plantillas integrados facilitan el cambio de la
vista horizontal a la vista vertical, y viceversa. Cuando la orientacin cambia a vertical,
se muestran ms camiones en cada categora. Del mismo modo, la aplicacin tambin
muestra ms camiones en cada categora para aprovechar el espacio en pantalla
adicional de los monitores de alta resolucin.
Ejemplo: el sitio web del camin de venta de alimentos y la aplicacin de la Tienda
Windows en diferentes dispositivos.
Sitio web:
El sitio web de camiones de venta de alimentos ajusta el diseo y redistribuye el

contenido para diferentes tamaos de pantalla y factores de forma.
La aplicacin de la Tienda Windows en modo horizontal, modo vertical y en una

pantalla de alta resolucin. Usamos el espacio extra para mostrar ms contenido.
Usar la vista acoplada para atraer a tus usuarios
Windows 8 permite a los usuarios realizar mltiples tareas acoplando una aplicacin
aplicacin en pantalla y atraer a los usuarios por perodos ms largos. Es sencillo para
un usuario cambiar la aplicacin principal y la aplicacin acoplada manipulando el
separador entre ambas. Por ello, es importante mantener el contexto a travs de los
cambios de tamao. No queremos que los usuarios pierdan el estado de la aplicacin
como resultado del cambio de tamao de su aplicacin.
Para ms informacin sobre la vista acoplada, consulta las directrices para vistas
acopladas y rellenas.
Ejemplo: la pantalla principal de la aplicacin de la Tienda Windows en la vista
acoplada y en la vista rellena.
Izquierda: la aplicacin de camiones de venta de alimentos en la vista rellena. El

usuario puede usar una aplicacin de informacin meteorolgica y la aplicacin de
camiones de venta de alimentos a la vez.
Derecha: en la vista acoplada, un usuario se desplaza verticalmente para obtener ms
contenido porque es ms cmodo desplazarse por el borde largo. Esto se diferencia del
desplazamiento horizontal en la vista rellena, que tambin se optimiza para
desplazarse por el borde largo.
Notificaciones
Usar iconos para actualizaciones dinmicas y persistentes
Los usuarios del sitio web de camiones de venta de alimentos pueden ir al sitio para leer
noticias y blogs acerca de los nuevos camiones de venta de alimentos en su rea o los
que cambiaron de ubicacin. El sitio web tambin permite que los usuarios sigan los
anuncios de camiones de venta de alimentos en Facebook y Twitter. Para esto, deben ir
al sitio web para ver las novedades o registrarse para recibir actualizaciones. Los
usuarios probablemente no vean algunas actualizaciones hasta que ya hayan dejado de
ser relevantes.
Al trasladar esta capacidad a una aplicacin de la Tienda Windows, usamos iconos y

notificaciones del sistema para proporcionar a los usuarios la informacin ms
actualizada adaptada a sus necesidades. Los iconos mostrados en la pantalla Inicio
constituyen puertas de acceso a la aplicacin de la Tienda Windows. Estn diseados
para tener una apariencia activa y proporcionar contenido personalizado y actual
adaptado al usuario. Por ello, es ms probable que usen la aplicacin y aprovechen sus
beneficios. La aplicacin sigue mostrando este contenido incluso cuando no est
ejecutndose.
Sitio web:
La seccin ltimas noticias del sitio web muestra la ltima ubicacin de un camin.
El blog del sitio web enumera los camiones nuevos y proporciona claves acerca de
cundo los camiones de venta de alimentos estarn en un barrio dado.
El icono principal de la aplicacin de camiones de venta de alimentos muestra qu

camiones de venta de alimentos se encuentran cerca de un usuario y cunto tiempo se
quedarn en esa ubicacin. Los iconos pueden actualizarse incluso cuando la aplicacin
de camiones de venta de alimentos no est ejecutndose, para que los usuarios
puedan recibir actualizaciones en la pantalla Inicio.
Un usuario puede anclar sus camiones favoritos (por ejemplo, el camin de
hamburguesas con queso) como un icono en la pantalla Inicio para recibir las ltimas
noticias acerca de ese camin. Esto proporciona a los usuarios un alto grado de
personalizacin, adaptado a sus necesidades. Se encuentran disponibles muchas
plantillas de icono entre las que los diseadores pueden elegir para que la
implementacin sea sencilla.
Usar notificaciones del sistema para notificaciones importantes y temporarias
Adems de las notificaciones de icono, tambin pueden usarse notificaciones del

sistema para notificar a los usuarios de 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 interrumpirn 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 ejecucin de la aplicacin. Si corresponde,
muestra las notificaciones del sistema recientes en los iconos mientras todava sean
relevantes.
Ejemplo: el camin de venta de alimentos favorito de un usuario ha cambiado de

ubicacin.
El usuario opt por recibir una notificacin del sistema a travs del panel Configuracin
para que le informe cuando un camin de venta de alimentos favorito haya cambiado de
ubicacin.
Conclusin
Cuando crees una aplicacin de la Tienda Windows sobre la base de un sitio web
existente, siempre pregntate cul es la mejor caracterstica de tu aplicacin. Cuando
tengas una respuesta, optimiza tu aplicacin de la Tienda Windows para ese escenario.
Siempre recuerda dar nfasis al contenido ms que al contenedor visual: usa los
comandos integrados en el sistema, como Compartir, Buscar y Configuracin, para
proporcionar acceso a funcionalidad comn a travs de un mecanismo intuitivo y
familiar. Oculta los comandos fuera de la pantalla cuando no haya necesidad de usar la
barra de la aplicacin y los controles de zoom semntico. Y saca provecho de las
notificaciones y los iconos dinmicos para que los usuarios puedan seguir obteniendo
beneficios de tu aplicacin, incluso cuando no est ejecutndose. Si haces esto,
obtendrs una aplicacin de la Tienda Windows atractiva que deleitar a tus usuarios y
te ayudar a hacer crecer tu negocio.

Nicholas Huttema es un diseador visual y de interaccin en
Plain Concepts. Disfruta de trabajar con ideas nuevas e
interfaces de usuario ordenadas. Su educacin y carrera
comenzaron en Michigan como diseador de impresiones.
Desde aqul entonces, sum el diseo de experiencia del
usuario a sus conocimientos mediante el trabajo en diversas
empresas de las reas de Los ngeles y Seattle. Ha realizado
trabajos de diseo para Microsoft, Myspace, Amazon.com y
Herman Miller, entre otros. En su tiempo libre, realiza
actividades como excursionismo, acampada y prctica de
snowboard.
Qixing Zheng es gerente 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
diseadores a aprender ms acerca del estilo de diseo
Microsoft. Su gran pasin es ayudar a las personas a mejorar
su experiencia del usuario con la tecnologa de la que
dependen da a da. 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 diseo y empresas acerca de la
inversin de Microsoft en experiencia del usuario. Tambin ha
trabajado en la identificacin de creativos y la recoleccin de
historias sobre diseo obtenidas en la comunidad.
Caso prctico de diseo: de iPad a

aplicacin de la Tienda Windows
(Windows)

En este artculo
La aplicacin
Diseo y navegacin
Comandos y acciones
Contratos
Funcionalidad tctil
Orientacin y vistas
Notificaciones
iOS es una plataforma popular para crear aplicaciones con experiencia tctil, divertidas
y atractivas. Con la introduccin de Windows 8, los diseadores y desarrolladores
tienen una nueva plataforma para dejar correr su imaginacin.
En este caso prctico, queremos ayudar a los desarrolladores y diseadores que estn
familiarizados con iOS a redisear sus aplicaciones usando los principios de diseo de
las aplicaciones de la Tienda Windows. Te mostramos cmo trasladar diseos 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 creacin de la misma aplicacin para iPad y para Windows 8. Usamos escenarios
de desarrollo y diseo comunes para mostrar cmo sacar provecho de la plataforma de
Windows 8 e incorporar los principios de diseo de las aplicaciones de la Tienda
Windows.
Venta de aplicaciones. Para ms informacin acerca de las caractersticas usadas para
crear aplicaciones de la Tienda Windows, consulta la gua de producto de Windows 8
para desarrolladores.
Descarga este artculo: para ello, consulta la versin sin conexin de este artculo.
La aplicacin
La aplicacin que estamos desarrollando es un diario fotogrfico en el que los usuarios
pueden ver y administrar sus fotos y vdeos en Internet usando una vista de escala de
tiempo.
La aplicacin se cre primero para iPad. En la siguiente imagen se muestra la anatoma

de la aplicacin de iPad. Veamos ahora cmo cada componente se traslada al lenguaje
de diseo Microsoft.
1. Diseo y navegacin
2. Comandos y acciones
3. Contratos: buscar, contenido compartido y otros
4. Funcionalidad tctil
5. Orientacin y vistas
6. Notificaciones
Diseo y navegacin
Centrarse en el contenido, no en el contenedor visual
La aplicacin de diario fotogrfico tiene que ser excelente al mostrar las fotos del
usuario y las actividades sociales recientes de esas fotos. Cuando se cre la aplicacin
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
aplicacin. Por ejemplo, la barra de navegacin superior, los controles de paginacin y
la barra de control inferior pueden quitarse. En la siguiente seccin, hablaremos de
cmo los usuarios pueden llamar al contenedor visual cuando sea necesario mediante el
uso de la barra de la aplicacin.
Para obtener ms informacin acerca de cmo navegar en las aplicaciones de la Tienda
Windows, consulta el tema sobre el Diseo de navegacin para aplicaciones de la
Tienda Windows.
Aplicacin de iPad
A. Barra de navegacin superior
Aplicacin de la Tienda Windows
B. Contenido de la aplicacin
B. Logotipo y contenido de la aplicacin
C. Interfaz de usuario de paginacin
D. Barra de pestaas inferior
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 versin de iPad del diario
fotogrfico, la pgina se optimiza para mostrar los doce meses de un ao con una
metfora de fotografas apiladas usada para representar cada mes. Cuando se dise la
Pantalla principal de la aplicacin de la Tienda Windows, elegimos poner ms imgenes
y contenido social en el nivel superior, y as proporcionar ms contexto a los usuarios.
Quitamos los bordes de las imgenes y, en su lugar, usamos el espacio en blanco para
proporcionar ms enfoque visual a las fotografas, que son el punto focal de la
aplicacin.
iPad: cada mes se representa mediante

fotos apiladas con una nica foto visible.
Aplicacin de la Tienda Windows: cada

mes se representa mediante varias fotos,
sus ttulos y el nmero de comentarios
asociados a las fotos. Los usuarios pueden
ver ms contenido resaltado para un mes en
la Pantalla principal.
Reducir la jerarqua de navegacin
Hemos usado el diseo de navegacin jerrquica en el diseo de la aplicacin de la

Tienda Windows. Cuando rediseamos la aplicacin, redujimos la jerarqua de
navegacin para que pueda obtenerse acceso a ms contenido a travs de la pantalla del
concentrador de la aplicacin y, de este modo, eliminar la necesidad de navegar.
Ejemplo: quitar la barra de pestaas inferior
Aplicacin de iPad
A. Vista de fotos
B. Vista de comentarios
La barra de pestaas inferior con dos tablas dinmicas (fotos y comentarios) siempre
est en pantalla. Los usuarios pueden ver una vista o la otra.
Combinamos el comentario y las fotos en una vista para eliminar la necesidad de una
interfaz de usuario con pestaas.
El diseo de concentrador para la Pantalla principal revela el contenido ms
importante para cada seccin.
Para ver toda la lista de comentarios, los usuarios pueden pulsar sobre el encabezado
de grupo denominado Comentarios recientes.
Usar manipulacin directa para navegar
La manipulacin directa permite a los usuarios interactuar con contenido y navegar a

diferentes reas con naturalidad. Cuando se dise la aplicacin de la Tienda Windows,
usamos la manipulacin directa siempre que fue posible mediante controles integrados,
como el zoom semntico, que permite a los usuarios navegar con ms eficacia.

En la Pantalla principal, haz un gesto de
alejar con dos dedos para ampliar y ver
Aplicacin de iPad
todos los meses y aos. De esta manera, los
usuarios pueden saltar a cualquier mes de
En la Pantalla principal, pulsa en el botn cualquier ao con rapidez. Los usuarios
Aos en la barra de navegacin superior
tambin pueden obtener una visin general
para que aparezca una ventana emergente y de los meses que tienen fotos y los que no
selecciona un ao.
(fondo rojo atenuado). Los usuarios pueden
navegar completamente mediante la
manipulacin del contenido sin usar
contenedor visual ni navegar a una pgina
diferente.
Comandos y acciones
Mantener las acciones contextuales de la aplicacin en la barra de la aplicacin
Cuando se redisearon los comandos o las acciones contextuales en la aplicacin,

nuevamente seguimos el enfoque de "anteponer el contenido al contenedor visual" e
hicimos que todas las acciones contextuales estn disponibles a travs del control de la
barra de la aplicacin. Con frecuencia, los comandos usados se encuentran cerca de los
bordes derecho e izquierdo para que sean fciles de alcanzar con la mano. De este modo,
la superficie de diseo de la aplicacin no se encuentra abarrotada de controles y, sin
importar dnde se encuentre un usuario, pueda deslizar rpidamente en la barra de la
aplicacin 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
aplicacin para sus comandos. Dado que los usuarios estarn familiarizados con las
interacciones de la barra de la aplicacin, tambin aumenta la facilidad de uso de
nuestra aplicacin y todo el sistema parece coherente.
Ejemplo: eliminar fotos
Aplicacin de iPad
Los comandos de la aplicacin se

encuentran en la parte superior de la
pantalla cuando un usuario entra en el

A. De manera predeterminada, la barra
de la aplicacin est oculta para
modo de seleccin.
proporcionar a los usuarios una

experiencia envolvente. Un usuario
puede deslizar rpidamente desde la
parte inferior o superior de la pantalla
para abrir la barra de la aplicacin.
B. Cuando un usuario selecciona
objetos en la pgina, las acciones
contextuales para los elementos
seleccionados aparecen en la barra.
Las acciones cambian en funcin de si
hay objetos seleccionados y del lugar
donde se encuentra el usuario en la
aplicacin. Los comandos globales
generalmente se colocan en el costado
derecho de la barra de la aplicacin.
Los comandos que no son tan
importantes deben colocarse en el
costado izquierdo de la barra de la
aplicacin.
Contratos
Usar el contrato de Buscar para centralizar la experiencia de bsqueda
En lugar de crear una interfaz de entrada de bsqueda que forme parte del Canvas de la
aplicacin permanentemente, implementamos el contrato de Buscar. Los usuarios
pueden invocar de forma coherente la bsqueda a travs de los accesos, y los resultados
pueden presentarse en la aplicacin 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 aplicacin de diario fotogrfico
Aplicacin de iPad
La bsqueda est disponible dentro de

la aplicacin en la Pantalla principal.
Cuando un usuario escribe un trmino
de bsqueda, los resultados
comienzan a aparecer y el usuario
puede seleccionar uno.
El usuario abre la barra de accesos y

obtiene acceso a Buscar. De manera
predeterminada, est seleccionada la
aplicacin de diario fotogrfico porque
el usuario actualmente se encuentra
dentro de ella.
Cuando el usuario comienza a escribir,
la aplicacin proporciona sugerencias
de bsqueda en el panel. De este
modo los usuarios pueden ver
rpidamente qu trminos generarn
resultados de bsqueda. Una vez que
el usuario enva su consulta, aparece
una vista de resultados de la bsqueda
y podr seleccionar el que quiera.
Ejemplo: buscar una foto fuera de la aplicacin de diario fotogrfico (disponible

solo en aplicaciones de la Tienda Windows)
En este ejemplo se muestra cmo buscar un trmino en diferentes aplicaciones eligiendo
una nueva aplicacin en el panel de bsqueda. Esta funcin permite a los usuarios
buscar cualquier tipo de contenido, en cualquier aplicacin y en cualquier momento.

Un usuario busca el trmino "Barcelona" en la aplicacin de Tweet@Rama y quiere
mirar fotos de Barcelona mediante el diario fotogrfico. El diario fotogrfico es ahora el
proveedor de resultados de bsqueda. La aplicacin se inicia automticamente y
muestra los resultados de la bsqueda. El usuario no necesita iniciar la aplicacin de
diario fotogrfico y despus realizar la bsqueda.
Usar el contrato para contenido compartido para llegar a ms destinos y personas que te
interesen
La integracin de los medios sociales es un componente clave de la mayora de las

aplicaciones. Cuando se disean las aplicaciones de iPad, los diseadores y
desarrolladores generalmente eligen qu canales de medios sociales admite la aplicacin
(como Twitter o Facebook) y despus 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 cdigo para que dichos servicios continen funcionando.
Cuando se traslad la funcionalidad de uso compartido a la aplicacin de la Tienda
Windows, usamos el contrato para contenido compartido del sistema. Este contrato
simplifica el diseo y el desarrollo porque no hay necesidad de conectarse con cada
servicio que el usuario quiera utilizar. Adems de las redes sociales, los usuarios
tambin pueden guardar contenido en otros servicios, por ejemplo, en una aplicacin de
toma de notas como Notespace o EverNote. Mediante el uso de tan solo una pequea
cantidad de cdigo, nuestra aplicacin se conecta con cada aplicacin 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
ubicacin coherente; para ello, solo deben acceder a la barra de accesos y abrir el panel
Compartir.
Ejemplo: compartir una foto en el diario fotogrfico con otra aplicacin
iPad
Para compartir una foto desde la aplicacin de diario fotogrfico de iPad, un usuario
primero pulsa en el botn de accin de la barra de navegacin superior y despus elige
compartir en Facebook. El desarrollador necesita realizar trabajo adicional y agregar
ms botones Compartir si quiere integrarse con otros servicios de redes sociales ms
adelante.
Los usuarios siempre pueden encontrar opciones de uso compartido en una ubicacin
coherente, sin importar qu aplicacin estn usando.
Toda aplicacin 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 vnculos, fotos o guardar informacin en una aplicacin de toma de
notas.
Los destinos de contenido compartido usados con ms frecuencia se muestran en la
parte superior de la lista para ayudar a los usuarios a completar las tareas con rapidez.
Adems de ser un origen de contenido compartido, diseamos nuestra aplicacin de

diario fotogrfico para que sea tambin destino de contenido compartido. Los usuarios
pueden compartir con facilidad fotos desde otra aplicacin en sus secuencias de fotos
del diario fotogrfico. Esta conexin tambin se habilita mediante el contrato para
contenido compartido. Consulta el tema sobre las directrices y la lista de comprobacin
para uso compartido de contenido para ms informacin acerca de qu aplicaciones
constituyen excelentes destinos de contenido compartido.
Ejemplo: compartir fotos de otra aplicacin con el diario fotogrfico: destino de

contenido compartido (disponible solo en aplicaciones de la Tienda Windows)
En este ejemplo, un usuario de otra aplicacin de fotos mira imgenes de un viaje a
Mxico. Quiere compartirlas desde el lbum con su propia coleccin de la aplicacin de
diario fotogrfico para que sea ms fcil verlas en una vista de escala de tiempo.
Cuando abre el panel Compartir, ve que la aplicacin de diario fotogrfico se menciona
como uno de los destinos de contenido compartido, entonces invoca al flujo de trabajo
Compartir.
Usar el selector de archivos para obtener acceso a archivos desde diversas ubicaciones
El selector de archivos es un cuadro de dilogo 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. Tambin puede
obtener acceso a los elementos desde aplicaciones que participan en el contrato de
Selector de archivos.
Ejemplo: cargar una foto desde el sistema de archivos local
Aplicacin de iPad
La aplicacin de iPad admite el acceso a fotos en la biblioteca de fotos local y un par de
servicios de redes sociales.

A. El usuario pulsa el botn Cargar en la barra de la aplicacin y se abre la interfaz de
usuario del selector de archivos. Esta es una interfaz de usuario coherente que el
usuario ver 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 mltiples 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 fotogrfico en otra aplicacin (disponible solo
en aplicaciones de la Tienda Windows)
Tambin aprovechamos una caracterstica que es exclusiva de las aplicaciones de la
Tienda Windows y agregamos compatibilidad para la seleccin de contenido fotogrfico
desde el diario fotogrfico de otra aplicacin. Esto permite que los usuarios se ahorren
el paso de descargar las fotos primero desde el diario fotogrfico al sistema de archivos
local y que despus tengan que cargar las fotos en otra aplicacin. El diario fotogrfico
implementa el contrato de Selector de archivos para que el sistema lo reconozca como
ubicacin de almacenamiento de archivos.

Un usuario se encuentra en la pantalla Configuracin del equipo y pulsa en Examinar
para personalizar la foto de su cuenta. Dado que el diario fotogrfico implementa el
contrato de Selector de archivos, el usuario puede ver que la aplicacin est disponible
para acceder a ella en el directorio de archivos. Entonces, el usuario puede seleccionar
una foto almacenada en la coleccin de su diario fotogrfico.
Funcionalidad tctil
Deslizar rpidamente desde el borde para ver los comandos del sistema y de la aplicacin
En Windows 8, un usuario puede deslizar rpidamente desde los bordes para obtener
acceso a diferentes comandos y navegar entre aplicaciones.
Los comandos de la aplicacin aparecen al deslizar rpidamente desde el borde inferior

o superior de la pantalla. La barra de la aplicacin siempre debe usarse para mostrar
comandos de la aplicacin.
Al deslizar rpidamente desde el lado derecho de la pantalla, aparece la barra de
accesos que contiene los comandos del sistema.
Al deslizar rpidamente desde la izquierda, se cambia a las aplicaciones que ya se
usaron.
Al deslizar rpidamente desde el borde superior al borde inferior de la pantalla, se
pueden acoplar o cerrar las aplicaciones.
Ejemplo: acceder a la barra de la aplicacin y a la barra de botones de acceso en

una aplicacin de la Tienda Windows
Desliza rpidamente desde el borde

Desliza rpidamente desde el borde inferior derecho de la pantalla para revelar la barra
o superior de la pantalla para obtener
de accesos que contiene los comandos del
acceso a los comandos de la aplicacin.
sistema: Buscar, Compartir, Iniciar,
Dispositivos y Configuracin.
Deslizamiento transversal para seleccionar objetos
Con Windows 8, un usuario puede deslizar el dedo una distancia breve,

perpendicularmente a la direccin del movimiento panormico, para seleccionar un
objeto de una lista o cuadrcula. Cuando se seleccionan objetos, se revela la barra de la
aplicacin que muestra automticamente los comandos relevantes.
Ejemplo: seleccionar varias fotos para eliminar
Aplicacin de iPad
Los usuarios entran en un modo de

edicin especfico para realizar la
Los usuarios deslizan rpidamente

hacia abajo sobre el objeto para
accin de seleccin y otras acciones de

edicin. Esto se debe a que el gesto de
pulsar se reserva para las acciones
principales, como el inicio.
Los usuarios salen del modo de edicin
cuando han terminado.
seleccionar y la barra de la aplicacin

se muestra automticamente 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 seleccin sea mucho ms
eficiente en las aplicaciones de
Windows 8.
Alejar y ampliar en el zoom semntico
Si bien los gestos de alejar y ampliar generalmente se usan para cambiar el tamao tanto
en las aplicaciones de la Tienda Windows como en las de iPad, en Windows 8 tambin
permiten saltar al comienzo, al final o a cualquier parte del contenido mediante el zoom
semntico. El zoom semntico permite al usuario alejar para ver los datos de grupos
relacionados y proporciona un modo rpido de volver a reducir. En lugar de
proporcionar navegacin para revisar largas listas de contenido, usa el zoom semntico
cuando sea posible para este tipo de interaccin. 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 semntico en la pantalla principal y en una pgina de radio de

vista de mes

A. El zoom semntico en la Pantalla principal permite que los usuarios salten a un mes
particular de cualquier ao rpidamente.
B. El zoom semntico en una pgina de radio de vista de mes permite a los usuarios
saltar a un da particular y tambin proporciona un grfico de informacin que detalla
cuntas fotos estn disponibles de ese ao.
Orientacin y vistas
Diseo adaptativo para tamaos de pantalla y orientacin
Una aplicacin de iPad tiene una resolucin y un tamao de pantalla fijos con dos
orientaciones que los diseadores tienen que considerar. Windows 8 se ejecuta en
diversos factores de forma, desde tabletas porttiles a equipos de escritorio todo en uno.
Como resultado, puedes usar el espacio de pantalla adicional para mostrar ms
contenido a los usuarios. Cuando se redise la aplicacin de diario fotogrfico,
consideramos cmo se vera la aplicacin en dos orientaciones de dispositivo, teniendo
en cuenta los tamaos de los dispositivos y las resoluciones de pantalla. El diseo de
cuadrcula facilita la escalacin del diseo tanto para el diseo vertical como para las
pantallas de alta resolucin. Por ejemplo, incluimos ms fotos resaltadas en cada mes
donde hay ms espacio vertical disponible.
Ejemplo: diseo de pantalla principal con orientacin horizontal, orientacin
vertical y pantallas grandes (solo para aplicacin de la Tienda Windows)
Aplicacin de iPad
El mismo contenido se muestra tanto en el diseo horizontal como en el vertical. El
contenido se redistribuye en la orientacin vertical.

La aplicacin muestra ms contenido en cada seccin de la pgina de concentrador en el
diseo vertical y en pantallas ms grandes, lo que ocupa espacio adicional. De un modo
similar a la creacin de imgenes para una pantalla Retina de iOS, creamos varias
imgenes para diferentes porcentajes de escala de Windows: 100 %, 140 % y 180 %.
Estas imgenes se cargan automticamente en tabletas de alta definicin.
Usar la vista acoplada para atraer a tus usuarios
aplicacin en pantalla y atraer a los usuarios por perodos ms largos. Es sencillo para
un usuario cambiar la aplicacin principal y la aplicacin acoplada manipulando el
separador entre ambas. Por ello, es importante mantener el contexto a travs de los
cambios de tamao. No queremos que los usuarios pierdan el estado de la aplicacin
como resultado del cambio de tamao de su aplicacin.
Ejemplo: vista acoplada de la pantalla principal
La vista acoplada de la Pantalla principal es simplemente una vista diferente de la

pgina principal donde un usuario todava puede obtener acceso al mismo contenido.
En esta vista, un usuario se desplaza verticalmente para obtener ms contenido porque
es ms cmodo desplazarse por el borde largo. Esto se diferencia del desplazamiento
horizontal en la vista completa, que tambin se optimiza para desplazarse por el borde
largo.
Notificaciones
Usar iconos para actualizaciones dinmicas y persistentes
iOS 5 introdujo un centro de notificaciones donde las notificaciones nuevas aparecen

rpidamente en la parte superior de la pantalla y los usuarios pueden deslizar
rpidamente desde la parte superior para ver todos los mensajes en el centro. Adems,
los iconos de aplicacin en Springboard de iOS pueden tener adheridas notificaciones
numricas para indicar que hay mensajes nuevos. Los iconos de la pantalla Inicio de
Windows 8 combinan la funcionalidad de las notificaciones numricas en los iconos de
aplicacin y del centro de notificaciones en un iPad. Los usuarios pueden iniciar
aplicaciones y leer las notificaciones desde un solo lugar. Adems, a diferencia de las
notificaciones en iOS que tienen un formato fijo, los iconos de las aplicacin de la
Tienda Windows tienen una gran coleccin de plantillas entre las que los diseadores
pueden elegir.
Ejemplo: notificaciones en la pantalla principal
iPad
A. Icono de la aplicacin con notificacin
numrica en Springboard de iPad.
B. Centro de notificaciones con
notificacin del diario fotogrfico.
Windows 8
C. Icono en la pantalla Inicio con
notificaciones y notificaciones numricas.
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 interrumpirn 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 ejecucin de la
aplicacin. Si corresponde, muestra las notificaciones del sistema recientes en los
iconos mientras todava 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 diseadores pueden elegir entre una coleccin de plantillas de
notificaciones del sistema para hacer que sus notificaciones sean ms relevantes.
Ejemplo: el diario fotogrfico notifica a los usuarios cuando reciben un comentario

de un familiar
El usuario est configurado para recibir notificaciones del sistema cuando un familiar
comenta fotos de la aplicacin.

Bart Claeys es el diseador principal de experiencia del
usuario de Ratio Interactive y se especializa en interfaz de
usuario y experiencia del usuario en aplicaciones mviles y
web. Anteriormente, trabajaba como director de arte
interactivo para Saatchi & Saatchi Brussels, donde cre
campaas interactivas para Toyota, Sony y muchas otras
marcas internacionales. Bart realiz una maestra en
Desarrollo de Productos y recibi instruccin adicional en
administracin de marcas. Es el fundador de Creativeskills.be,
el tabln de anuncios de trabajo creativo lder de Blgica. En
2006 Bart gan el premio "Jij Bent Flanders Future", creado
por el gobierno flamenco para promover el espritu
empresarial.
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
diseadores a aprender ms acerca del lenguaje de diseo
Microsoft. Su gran pasin es ayudar a las personas a mejorar
su experiencia del usuario con la tecnologa de la que
dependen da a da. 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 diseo y empresas acerca de la
inversin de Microsoft en experiencia del usuario. Tambin ha
trabajado en la identificacin de creativos y la recoleccin de
historias sobre diseo obtenidas en la comunidad.
Caso prctico de diseo: aplicacin de la

Tienda Windows de la lnea de negocio
empresarial (Windows)

Resumen
Aprende a disear aplicaciones de la Tienda Windows de lnea de negocio (LOB) para

clientes empresariales en Windows 8.
En este artculo
Diseo de aplicaciones de lnea de negocio para Windows 8

Descripcin de los casos de usos
Diseo de la experiencia del usuario
Soporte de dispositivos incorporado
Conectar con datos
Autenticacin y seguridad
Entorno de desarrollo
Pruebas
Implementacin
Administracin de las aplicaciones de la Tienda Windows
Acerca del autor
Windows 8 es una excelente plataforma para crear aplicaciones que aumentan la

productividad, facilitan la implementacin y permiten que tus empleados interacten
con sus equipos de una manera ms natural. Este artculo muestra cmo disear y
desarrollar aplicaciones de la Tienda Windows de lnea de negocio (LOB) empresariales
para Windows 8. Proporciona directrices y asesoramiento para los desarrolladores que
desean sacar provecho de las nuevas funcionalidades de Windows 8. Tambin
proporciona sugerencias para aprovechar nuevos factores de forma para crear
experiencias atrayentes para los usuarios empresariales.
Diseo de aplicaciones de lnea de negocio para Windows 8

Las aplicaciones de lnea de negocio (LOB) en la empresa crean un conjunto nico de
retos para los desarrolladores. Las aplicaciones destinadas al cliente general estn
orientadas comercialmente a todo el mundo mediante la Tienda Windows, pero las
aplicaciones de LOB por lo general solo las implementan usuarios que forman parte de
las operaciones empresariales de una empresa particular. Adems, las aplicaciones de
LOB suelen funcionar con almacenes de datos back-end, estn orientadas a procesos
empresariales especficos y deben cumplir directivas de seguridad restringidas. Para
garantizar la seguridad de los recursos de la compaa, las aplicaciones de LOB deben
tener un control frreo sobre las actualizaciones de las aplicaciones. Algunos ejemplos
de aplicaciones LOB seran las aplicaciones de punto de venta, catlogos de productos,
paneles informativos, aplicaciones de ventas, aplicaciones de administracin de flujos
de trabajo y aplicaciones de supervisin y respuesta.
Con Windows 8, Microsoft ha introducido las aplicaciones de la Tienda Windows
creadas por encima del nuevo Windows en tiempo de ejecucin. Las aplicaciones de la
Tienda Windows ofrecen una serie de ventajas para cubrir las necesidades crecientes de
los desarrolladores de aplicaciones de LOB: mejor movilidad, compatibilidad de
rendimiento mejorado para funciones tctiles, mejor seguridad y sencillez de
implementacin y actualizacin. Aunque Windows en tiempo de ejecucin es nuevo, los
desarrolladores pueden usar sus conocimientos y aptitudes actuales. Las aplicaciones de
la Tienda Windows se pueden escribir en HTML y JavaScript, adems de los lenguajes
de escritorio tradicionales como C# y C/C++. El resultado para las empresas es una
mayor productividad para los usuarios, los jefes de TI y los desarrolladores internos.
Para este caso prctico, hemos hablado con el equipo de desarrollo de Sonoma Partners
LLC, una empresa que usa soluciones de Microsoft para crear aplicaciones para clientes
empresariales. Aunque los clientes de Sonoma Partners ya tenan aplicaciones para los
usuarios que trabajan en la oficina, queran que Sonoma Partners les creara nuevas
experiencias para su personal laboral cada vez ms mvil. Un cliente necesitaba crear
una aplicacin para los representantes de clientes que trabajan en campo. Estos
representantes de campo necesitaban una solucin porttil que les permitiera trabajar
remotamente en las oficinas de los clientes, en sus coches, en una cafetera, etc. El
smartphone resultaba demasiado pequeo para las necesidades de los representantes,
pero los equipos porttiles eran muy grandes. En este caso, una tableta sera el
dispositivo perfecto.
En este artculo veremos los requisitos que se indicaron a Sonoma Partners para esta
aplicacin de LOB determinada, hablaremos sobre cmo Windows 8 y el diseo de la
aplicacin de la Tienda Windows ayudaron a crear una solucin y veremos cmo se
pueden usar las aplicaciones de la Tienda Windows para crear unas experiencias de
usuario excepcionales para tu propia organizacin. Para proteger la propiedad
intelectual de Sonoma Partners y su cliente, en este caso prctico mostraremos una
aplicacin genrica de Fabrikam basada en el diseo de Sonoma Partners.
Para este caso prctico, Fabrikam es un fabricante de widgets que necesita una
aplicacin para sus representantes de campo en las empresas.
Arriba
Descripcin de los casos de usos

Windows 8 est diseado para ejecutarse en dispositivos que van desde tabletas de
mano hasta grandes equipos compactos todo en uno. Estos dispositivos pueden usar la
funcionalidad tctil, el lpiz o el mouse y el teclado como sus mtodos de entrada
principales. Windows y las aplicaciones funcionan bien con todos estos mtodos de
entrada.
Antes de disear la aplicacin, Sonoma pas una temporada con el cliente. Se fijaron en
los casos de uso particulares de la aplicacin y estudiaron a sus usuarios. Al limitarse a
unos pocos casos de uso bsicos, pudieron centrar la funcionalidad de la aplicacin. Una
til manera de capturar esto sera el enunciado de puntos fuertes; por ejemplo, esta
aplicacin en particular es "genial para que los representantes de campo puedan estar al
tanto de sus cuentas de clientes a diario mientras estn trabajando fuera de la oficina".
Este enunciado puede servir como punto de enfoque. Se centra en los escenarios
principales y en los factores de forma para la aplicacin.
Como los representantes de campo pasan la mayor parte del tiempo en la carretera, lo
ms probable es que lleven equipos ultraporttiles. Las tabletas, los equipos convertibles
y los porttiles tctiles de prxima generacin compatibles con Windows 8 son ideales
para estos escenarios. Estos nuevos dispositivos son mucho ms porttiles que los
porttiles tradicionales, a la vez que permiten una mayor productividad en comparacin
con los smartphones. Son ligeros, la duracin de la batera es mucho las larga, ocupan
poco espacio en la bolsa o en la mesa y se pueden pasar fcilmente de una persona a
otra para ver el contenido.
Estas nuevas categoras de PC tambin vienen con funcionalidades de ubicacin
geogrfica y cmaras. Gracias a estas funcionalidades, Sonoma Partners pudo agregar
fcilmente funcionalidades de mapas, foto y vdeo a su aplicacin. De este modo, los
representantes podran obtener direcciones para sus siguientes citas, o capturar una
imagen o un vdeo mientras trabajaban fuera de la oficina. Las aplicaciones de la Tienda
Windows tambin funcionan en equipos compactos todo en uno y con mouse y teclado
en la oficina, de forma que nunca estn limitadas a un factor de forma particular.
Arriba
Diseo de la experiencia del usuario

Las aplicaciones de la Tienda Windows estn desarrolladas alrededor de la nueva
interfaz de usuario de Windows, que pone el nfasis en el contenido. Todos los
elementos no fundamentales pasan a segundo plano. Esto se consigue gracias a diseos
limpios y abiertos que incorporan una clara jerarqua de informacin, animaciones
adecuadas e interacciones directas bsicamente tctiles.
Con estos principios en mente, Sonoma Partners desarroll el enunciado de puntos
fuertes en una lista concreta de escenarios. Estos escenarios ayudaron a hacer un esbozo
del flujo de la aplicacin: qu es lo primero que hara un usuario y qu hara despus?
Para esta aplicacin particular, era evidente que los escenarios como la programacin de
citas con los clientes, la gestin de pedidos y la revisin de los datos de ventas tenan
una gran importancia.
Arriba
Navegar por la aplicacin
Basndose en los anteriores anlisis, es claro que esta aplicacin LOB incorporaba un
flujo constante de datos. Un cuidado especial con la administracin visual y
organizativa de estos datos fue fundamental para hacer que la aplicacin se pudiera
utilizar a la vez que se cumplan los requisitos de la nueva interfaz de usuario de
Windows.
Para Sonoma estaba claro que la cuentas de ventas y los pedidos formaban los
elementos centrales de esta aplicacin. Para un representante de campo, estos son la
parte vital de su trabajo, de modo que tiene sentido formar agrupaciones o jerarquas
alrededor de este contenido.
A diferencia de las aplicaciones de escritorio tradicionales, las aplicaciones de la Tienda
Windows no usan pestaas ni mens para la navegacin. En cambio, las aplicaciones de
la Tienda Windows usan patrones de navegacin planos o jerrquicos formados por
pginas o vistas a pantalla completa. El gran volumen de contenido de esta aplicacin,
as como su tipo, encajaban a la perfeccin en un patrn de navegacin jerrquico. En
este caso, los pedidos y los contactos estn vinculados a las cuentas y la citas estn
vinculadas a los contactos.
El ncleo de este patrn jerrquico es la pgina de concentrador, que es la pgina
principal de la aplicacin. La pgina de concentrador consta de varias secciones
visualmente distintas que corresponden a diferentes reas de la aplicacin. Estas
secciones exponen funcionalidades o contenido nicos directamente en la pgina. En el
caso de Sonoma Partners, estaba claro que la pgina de concentrador expondra
contenido acerca de las cuentas y los pedidos; las citas, las tareas pendientes, los
pedidos sin completar, los vnculos directos a cuentas principales y los datos de ventas
segn tendencias eran todos muy importantes para el representante mvil.
Como diseador o desarrollador de aplicaciones, podrs definir cada pgina de la
jerarqua por separado. Despus podrs usar las clases de navegacin para administrar el
flujo de la aplicacin. Puedes ver un ejemplo de flujo en el siguiente figura.
Al igual que en Internet, puedes definir la navegacin que ocurre cuando un usuario
hace clic en una parte determinada del contenido o de la seccin de la pgina. En las
aplicaciones de la Tienda Windows, la navegacin tambin se administra mediante un
botn Atrs permanente en cada pgina o con el estado real en la barra de la aplicacin
superior. Para ver ms informacin sobre las distintas opciones de navegacin para la
aplicacin de la Tienda Windows, consulta Diseo de navegacin para aplicaciones de
la Tienda Windows. Para ver un ejemplo de cmo usar la navegacin en la aplicacin de
la Tienda Windows, consulta Navegar entre pginas y Admitir navegacin.
Arriba
Reducir el desorden y resaltar el contenido moviendo los comandos a la barra de la aplicacin
El principio de dejar que el contenido destaque es fundamental en las aplicaciones de la

Tienda Windows. Todo lo que ayude a presentar o interactuar con el contenido (lo que
tambin se conoce como el contenedor visual) puede crear un desorden de elementos en
la experiencia y desmerece el propsito de la aplicacin. En las aplicaciones de la
Tienda Windows, los comandos rara vez se encuentran en la propia pgina (aunque s
podran estar si son especialmente importantes). En cambio, el contenido se debera
manipular directamente cuando sea posible, por ejemplo, acercando los dedos para usar
el zoom o mediante comandos en la barra de la aplicacin.
La barra de la aplicacin aparece en los bordes superior e inferior de la aplicacin. El

superior se suele usar para la navegacin. La barra de la aplicacin contiene comandos
que son contextuales a la pgina actual y el contenido seleccionado, como se muestra en
la siguiente figura.
La barra de la aplicacin por lo general no se ve en la pantalla, pero se puede mostrar al

deslizar el dedo rpidamente desde los bordes superior o inferior, al hacer clic con el
botn secundario del mouse o al presionar la tecla del logotipo de Windows+Z en el
teclado. Adems, la barra de la aplicacin aparece automticamente cuando se realiza
una seleccin en el contenido de una aplicacin. Como la barra de la aplicacin es un
gesto del sistema que se usa por todo Windows 8 y en las aplicaciones de la Tienda
Windows, resultar una experiencia familiar para los usuarios. Esto hace que la
aplicacin sea ms fcil de aprender.
Para obtener informacin detallada sobre el uso de la barra de la aplicacin en tu propia
aplicacin, lee los siguientes temas.
Inicio rpido: Agregar barras de la aplicacin

Inicio rpido: agregar una barra de la aplicacin con comandos
Inicio rpido: Agregar una barra de la aplicacin con contenido personalizado
Directrices y lista de comprobacin para barras de aplicacin
Directrices para barras de la aplicacin
Arriba
Uso del Zoom semntico para navegar y resumir contenido
Una aplicacin de LOB, como la que ha creado Sonoma Partners, suele tener mucho
contenido que administrar. Cmo se crea una experiencia tctil que use diseos limpios
y abiertos, a la vez que facilita al usuario la navegacin rpida por grandes cantidades
de contenido en una sola vista? Proporciona el zoom semntico.
El zoom semntico es un comportamiento de zoom que permite alejar una vista con
gesto tctil de reducir, o con un botn del mouse y el teclado. En el estado alejado, el
usuario ve una vista resumida del contenido que se puede usar para la navegacin o para
proporcionar un contexto ms significativo. Por ejemplo, al alejar una lista de contactos
se puede presentar una lista de letras con el nmero de contactos bajo cada letra: al
hacer clic en la letra "A" se pasara a la lista de contactos que comienzan con "A". En la
siguiente figura, el zoom semntico permite ver una sencilla imagen general de los datos
a la vez que se permite la navegacin de la larga vista de concentrador.
Como se muestra en la figura, el zoom semntico en parte consiste en agrupar datos

para facilitar la navegacin. En este caso, la navegacin se mueve desde un final de una
larga lista hasta el otro final, el equivalente del "zoom ptico". El zoom semntico
tambin permite usar la vista alejada para proporcionar cuentas y estadsticas que
describen los datos generales de manera resumida. Esto das a los usuarios un acceso
rpido y fcil a detalles importantes de la imagen global.
Como el control de zoom semntico se basa en las plantillas que proporciones, tienes la
libertad de incluir las vistas que consideres valiosas para tus usuarios y hacer que estn
disponibles con un sencillo gesto de reducir. Los usuarios prefieren que las fechas se
muestren con una lista o como un calendario? Quieren que los nombres aparezcan con
fotos o sin fotos? Con el zoom semntico, dispones de toda una variedad de excitantes
posibilidades de visualizacin de datos.
Para obtener informacin detallada sobre el uso de la barra del control de zoom
semntico en tu aplicacin, lee los siguientes temas.
Agregar controles SemanticZoom

Directrices para zoom semntico
Arriba
Compatibilidad con diferentes diseos
Windows 8 se ejecuta en una gran variedad de dispositivos nuevos y antiguos. Las

aplicaciones de la Tienda Windows se ejecutan en tabletas mientras se est fuera de la
oficina, en equipos compactos todo en uno en la oficina, en monitores profesionales
HDPI (alto nivel de puntos por pulgada) conectados a potentes escritorios, ms todo lo
que haya en medio. En vez de tener que crear varias pginas para admitir varios
tamaos de pgina, Sonoma Partners simplemente definieron varios diseos para la
misma pgina. Cada diseo especifica cmo se muestran los elementos de la interfaz de
usuario para una vista particular, as as como qu elementos de la interfaz de usuario se
muestran en funcin de cunto estado real de pantalla se encuentra disponible. La
interaccin del usuario, el enlace de datos y otros componentes de la aplicacin no
cambian. Solo cambia el rea de visualizacin.
Sonoma tuvo que hacer un trabajo similar para admitir distintas orientaciones y
multitareas con la vista acoplada, como se muestra en la siguiente figura.
Esta vista acoplada permiti a Sonoma disear la aplicacin de forma que cumpliera
con la variadas preferencias y necesidades ergonmicas de los usuarios. Los usuarios ya
no estaban restringidos a un diseo particular. La vista acoplada hace que la aplicacin
se ms cmoda para los usuarios, ya que permite que se pueda ver junto con otras
aplicaciones empresariales, como una aplicacin de correo electrnico.
Para obtener informacin detallada sobre cmo definir diferentes diseos en la

aplicacin, consulta Definicin de diseos y vistas.
Arriba
Los contratos proporcionan una experiencia coherente en Windows
Los contratos permiten que la aplicacin participe en interacciones comunes de

Windows. Al implementar contratos en la aplicacin, puedes proporcionar a los
usuarios una experiencia coherente con todo Windows.
Contrato de Buscar
La bsqueda es una experiencia bsica en Windows. Los usuarios pueden buscar

fcilmente en las aplicaciones, los archivos y las configuraciones deslizando el dedo
rpidamente desde la derecha (o moviendo el mouse a la esquina derecha) y haciendo
clic o pulsando en el acceso a Buscar. Las aplicaciones tambin pueden aprovechar esta
experiencia con la implementacin del contrato de Buscar, que permite que los usuarios
puedan buscar en la aplicacin. Sonoma Partners aprovech esto al mximo al
implementar la compatibilidad de la aplicacin para buscar una cuenta, un contacto o un
pedido particulares. Puedes verlo en el siguiente figura.
Al implementar el contrato de Buscar, se hace que se pueda buscar en la aplicacin

fuera de sus propios confines. De esta forma se mejora la productividad de los usuarios.
Por ejemplo, un empleado puede comenzar a buscar un contacto de ventas desde la
pantalla Inicio. Despus puede buscar mensajes recientes en la aplicacin de correo
electrnico y, a continuacin, pasa a la aplicacin de LOB para buscar pedidos. Como
desarrollador, tienes control absoluto sobre la experiencia de bsqueda y cualquier
indizacin que se deba implementar.
El contrato de Buscar es muy sencillo de configurar. Un contrato es, de hecho, un

acuerdo entre la aplicacin y el sistema operativo. El contrato describe los requisitos de
la aplicacin para usar esta nueva funcionalidad de Windows 8. Para el contrato de
Buscar, esto supone que debes agregar un controlador de eventos que est a la escucha
para cuando el usuario introduzca una consulta. Puedes incluso proporcionar
sugerencias cuando el usuario introduce un trmino de bsqueda. Cuando recibe una
consulta, la aplicacin de LOB busca sus datos en muestra los resultados relevantes.
En este tema puedes ver un ejemplo de cmo implementar el contrato de Buscar en tu
aplicacin: Inicio rpido: agregar bsqueda a una aplicacin. Este tema describe todos
los contratos disponibles en las aplicaciones de la Tienda Windows: Extensiones y
contratos entre aplicaciones.
Arriba
Contrato de Configuracin
Al igual que con el contrato de Buscar, puedes aprovechar el contrato de Configuracin

para crear una experiencia familiar para la configuracin especfica del usuario. Esta
configuracin puede incluir opciones de notificaciones del sistema, acceso a
dispositivos y configuracin de ubicacin. Puedes crear una experiencia familiar valores
globales a la aplicacin, pero que pueden cambiar, como nombres de servidores,
ubicaciones e informacin de inicio de sesin. Para las aplicaciones de la Tienda
Windows de LOB, el contrato de Configuracin tambin es ideal para la configuracin
de administracin de cuentas, como la identidad de usuarios y los permisos,
administracin de varias cuentas, cierre de sesin y detalles de cuentas. El acceso a
Configuracin simplifica la experiencia de los usuarios y reduce el desorden en la
aplicacin. Por ejemplo, no es necesario ocupar espacio con un botn de configuracin
dedicado. Se puede acceder fcilmente al acceso a Configuracin desde la barra de
accesos. Este acceso presenta una experiencia estandarizada en todo Windows 8 y en
todas las aplicaciones de la Tienda Windows.
Para obtener informacin sobre la implementacin del contrato de Configuracin en tu
aplicacin, consulta Agregar configuracin de la aplicacin.
Arriba
Iconos dinmicos para informacin actualizada, notificaciones del sistema para notificaciones,
iconos secundarios para accesos directos
Los representantes de campo viajan con mucha frecuencia. Mientras estn en la

carretera, habitualmente tienen que echar un vistazo rpido a lo prximo que tienen que
hacer. Al admitir los iconos dinmicos, el propio icono informa al representante acerca
de las prximas citas sin necesidad de ejecutar la aplicacin. Sonoma ampli su
aplicacin an ms al admitir el uso de iconos secundarios que se pueden anclar en la
pantalla Inicio. Los iconos secundarios se muestran en la figura siguiente.
Estos iconos secundarios permiten un fcil acceso a los clientes y las cuentas de ventas
importantes llevando a los usuarios directamente a la pgina de detalles relevante y
admitiendo las actualizaciones de iconos dinmicos para esa cuenta particular.
Mientras el usuario est usando otra aplicacin, una notificacin del sistema puede
notificar al usuario acerca de una informacin importante. Al pulsar o hacer clic en la
notificacin del sistema, se cambia instantneamente a la aplicacin. Sonoma ha usado
las notificaciones del sistema para notificar al representante de campo acerca de una cita
prxima, un cambio en el estado de un pedido y otra informacin importante, como se
muestra en la siguiente figura.
Para obtener informacin sobre cmo usar iconos dinmicos, notificaciones del sistema
e iconos secundarios en tu aplicacin, lee estos temas.
Creacin de iconos
Anclaje de iconos secundarios
Envo de notificaciones del sistema
Arriba
Soporte de dispositivos incorporado

Para mejorar la experiencia del usuario y simplificar el flujo de trabajo de los
representantes de campo, Sonoma ha querido aprovechar las nuevas funcionalidades
disponibles en equipos de nueva generacin con Windows 8. Una de estas
funcionalidades es la ubicacin geogrfica. Al combinar funcionalidades de ubicacin
geogrfica con los Mapas de Bing, Sonoma pudo mostrar la ubicacin actual del usuario
en una vista de mapa junto con las ubicaciones de reuniones y clientes. Esto es una
experiencia ms intuitiva que lo tradicionalmente posible.
Para obtener informacin sobre cmo usar las ubicacin geogrfica con los Mapas de
Bing en tus propias aplicaciones de la Tienda Windows, consulta estos temas.
Detectar la ubicacin geogrfica

Mapas de Bing para aplicaciones de la Tienda Windows
Adems de la compatibilidad de la ubicacin geogrfica, Sonoma Partners ha podido

usar la compatibilidad de cmara integrada y selector de archivos en Windows 8. Esto
simplifica en gran medida el proceso de agregar imgenes y vdeos a la aplicacin de
LOB. Con esta funcionalidad, el usuario puede agregar fcilmente una foto de un cliente
con la cmara incorporada, el disco local, la nube o incluso servicios de terceros. Para
obtener informacin sobre cmo se puede agregar compatibilidad con las
funcionalidades de selector de archivos y cmara en las aplicaciones de la Tienda
Windows, consulta Captura o representacin de audio, vdeo e imgenes y Obtener
acceso a datos y archivos.
Arriba
Conectar con datos

Sonoma Partners ha creado su aplicacin de la Tienda Windows como parte de una
solucin general para administrar las aplicaciones del cliente para datos y procesos
empresariales. Todas estas aplicaciones se basan en Microsoft Dynamics CRM como su
almacn de datos. Como la aplicacin de la Tienda Windows desarrollada por Sonoma
Partners se ha diseado para los representantes de campo, necesitaban conectarse con
los datos de la empresa en redes pblicas. Al usar servicios de web seguros, Sonoma
Partners pudo entregar los datos de Microsoft Dynamics CRM a la aplicacin de la
Tienda Windows sin exponer ninguno de los datos confidenciales del cliente. Los
servicios web proporcionan un marco comn para describir y compartir datos, y son una
gran manera de trabajar con datos en un entorno distribuido.
Para obtener informacin detallada sobre cmo conectarse con los servicios web desde
la aplicacin, consulta los siguientes temas.
Conexin a un servicio web

Inicio rpido: conexin mediante XML HTTP Request (IXHR2)
Inicio rpido: conexin a un servicio web con WinJS.xhr
Windows Communication Foundation Services y WCF Data Services en Microsoft Visual
Studio
Introduccin a los servicios mviles de Windows Azure
Las aplicaciones de la Tienda Windows tambin pueden almacenar datos locales en la

aplicacin para el acceso sin conexin y el uso por parte de la aplicacin. Esto puede ser
til para los escenarios con datos sin conexin que se sincronizan con el almacn de
datos central peridicamente, o cuando hay una conexin disponible. Para obtener ms
informacin, consulta Trabajar con datos y archivos.
Las aplicaciones de la Tienda Windows que necesitan acceso a datos sin conexin
requieren bases de datos relacionales para el almacenamiento de datos. Para estos
escenarios, las aplicaciones de la Tienda Windows pueden usar SQLite para Windows
en tiempo de ejecucin. Para obtener ms informacin, consulta SQLite para
aplicaciones para Windows 8.
Arriba
Enlazar a datos
Como con cualquier aplicacin, el enlace de datos es una potente herramientas que
simplifica tu cdigo. La aplicaciones de la Tienda Windows tienen una cantidad de
recursos y controles que puedes usar para el enlace de datos, incluidos el control
ListView o el control FlipView. Para ver detalles y ejemplos, consulta Enlace de datos.
Arriba
Autenticacin y seguridad
Como se mencion anteriormente, Sonoma Partners usa Microsoft Dynamics CRM
como almacn de datos de su aplicacin. Como resultado, la informacin de inicio de
sesin del usuario tambin est convenientemente administrada por Microsoft
Dynamics CRM. Al igual que con los datos, Sonoma Partners ha creado un servicio
web con Windows Communication Foundation (WCF) para gestionar los inicios de
sesin. De nuevo, esto se asegur con Capa de sockets seguros (SSL). Cuando se carga
la aplicacin, el usuario ve una pantalla de inicio de sesin despus de la pantalla de
presentacin, como se muestra en la siguiente figura.
Para crear una mejor experiencia del usuario, Sonoma Partners ha utilizado el almacn
de contraseas de Windows 8. Esto libera al usuario de tener que iniciar sesin
repetidamente en la aplicacin.
Tus aplicaciones de la Tienda Windows pueden admitir cualquier cantidad de
funcionalidades de autenticacin, incluidos el inicio de sesin en dominios, la
autenticacin multifactor mediante tarjetas inteligentes o con cuentas Microsoft.
Tambin puedes administrar todas las credenciales proporcionadas en la aplicacin
mediante almacenes de contraseas, para que la aplicacin no tenga que solicitar las
credenciales al usuario al mismo servicio durante cada acceso. Estas credenciales
deberan ser administradas por el usuario mediante el panel Configuracin de la
aplicacin. Para obtener informacin sobre el almacn de contraseas, consulta la
documentacin de referencia de PasswordVault.
Arriba
Entorno de desarrollo
Para desarrollar su solucin, Sonoma Partners acudi a Microsoft Visual Studio 2012
porque es un entorno de desarrollo potente y familiar para escribir el cdigo de su
aplicacin de la Tienda Windows. Para disear la interfaz de usuario, Sonoma Partners
us Microsoft Expression Blend junto con Visual Studio. Esto les permiti separar el
cdigo de fondo de los elementos de interfaz de usuario de la aplicacin de la Tienda
Windows. La separacin del cdigo de la interfaz de usuario liber a los diseadores
para crear una atractiva experiencia de usuario mientras los desarrolladores conectaban
la interfaz de usuario a los datos, los dispositivos y las funcionalidades de la aplicacin.
Puedes descargar Microsoft Visual Studio Express 2012 para Windows 8, que incluye
Expression Blend, en Descargas para desarrolladores para la programacin de
aplicaciones de la Tienda Windows. En las siguientes figuras se muestran
Expression Blend y Visual Studio en funcionamiento.
Arriba
Pruebas
Las aplicaciones se deben probar para asegurar que son de alta calidad y que no haya
sorpresas.
El Kit para la certificacin de aplicaciones en Windows, que est disponible en el Kit de
desarrollo de software de Windows (SDK) para Windows 8, valida el cumplimiento de
los requisitos tcnicos de las aplicaciones y garantiza que siguen los procedimientos
recomendados y las recomendaciones del diseo de aplicaciones de la Tienda Windows.
Para obtener ms informacin, consulta Probar la aplicacin con el Kit para la
certificacin de aplicaciones en Windows.
Visual Studio incluye una serie de herramientas para probar exhaustivamente las
aplicaciones en un equipo de desarrollo. Junto con la herramienta de depuracin de
Visual Studio, tambin se incluye un emulador de Windows 8 y el marco de pruebas de
Visual Studio. Para obtener ms informacin, consulta Depurar y probar aplicaciones de
la Tienda Windows y el vdeo de Channel 9, Prueba manual de aplicaciones de la
Tienda Windows de Windows 8.
Las aplicaciones siempre se debern probar en un equipo distinto del equipo de
desarrollo. Las aplicaciones tambin debern probarse en diferentes arquitecturas,
diferentes versiones del sistema operativo instalado y con distintos factores de forma.
Para obtener informacin sobre la ejecucin de aplicaciones en un equipo que no sea el
equipo de desarrollo, consulta el tema sobre la ejecucin de aplicaciones de la Tienda
Windows desde Visual Studio y Obtener una licencia de desarrollador.
Arriba
Implementacin
Aunque la Tienda Windows es una excelente manera de comercializar y distribuir las
aplicaciones, las aplicaciones de LOB por lo general debera distribuirlas directamente a
los usuarios finales la organizacin de TI de la compaa. Este proceso de instalacin de
aplicaciones en equipos con Windows 8 sin pasar por la Tienda Windows se denomina
instalacin de prueba. A continuacin se indican algunos procedimientos
recomendados para que los usuarios tengan una gran experiencia con la instalacin y la
ejecucin de estas aplicaciones de prueba la primera vez.
Usa el Kit para la certificacin de aplicaciones en Windows: como ya hemos

mencionado, antes de distribuir una aplicacin, ejecuta las pruebas de certificacin el
el Kit para la certificacin de aplicaciones en Windows para garantizar que cumple los
requisitos de una aplicacin de la Tienda Windows.
Firma la aplicacin: usa una entidad de certificacin (CA) de confianza para firmar la
aplicacin con un certificado de empresa. Esto forma parte del proceso de
implementacin, tanto si la aplicacin se distribuye mediante la Tienda Windows como
si no. El certificado debe ser de confianza en todos los equipos que ejecuten la
aplicacin y el nombre del publicador en el certificado debe coincidir con el nombre
del publicador de la aplicacin.
Establece la directiva de grupo: asegrate de que la directiva de grupo est establecida
para instalar todas las aplicaciones de confianza. Esto permite a los usuarios del grupo
instalar aplicaciones de prueba.
Implementa la aplicacin: hay varias opciones para distribuir aplicaciones a los
usuarios de una red. Estn disponibles las soluciones habituales de administracin de
aplicaciones, como Microsoft System Center, o los usuarios pueden instalar la
aplicacin mediante un script de Windows PowerShell.
Para obtener informacin detallada sobre las distintas formas en que se puede
implementar la aplicacin de LOB y administrar las actualizaciones de las aplicaciones,
consulta las entradas de los blogs Implementacin de aplicaciones de la Tienda
Windows para los negocios y Administracin de equipos "BYO" en la empresa
(incluido WOA).
Arriba
Administracin de las aplicaciones de la Tienda Windows

Como ocurra con versiones anteriores de Windows, los jefes de TI pueden seguir
usando herramientas como Windows Intune y Microsoft System Center Configuration
Manager para administrar el acceso a las aplicaciones de LOB de empresa. Con la
introduccin de la Tienda Windows, que est habilitada de manera predeterminada para
Windows 8, los jefes de TI querrn garantizar que el acceso de los usuarios a la Tienda
Windows siga las directivas de la compaa.
Para las aplicaciones de la Tienda Windows de Windows 8, los jefes de TI tienen varias
opciones para administrar aplicaciones, tanto distribuidas internamente como a travs de
la Tienda Windows.
Las herramientas de administracin disponibles desde System Center Configuration

Manager y Windows Intune pueden controlar qu aplicaciones se pueden distribuir a
la base de usuarios de la empresa.
La directiva de la compaa puede habilitar el acceso de los usuarios a la Tienda
Windows, pero solo para aplicaciones particulares. En este caso, los jefes de TI pueden
restringir a qu aplicaciones tienen acceso los usuarios de empresa en la Tienda
Windows mediante la herramienta AppLocker.
La directiva de la compaa puede restringir a todos los usuarios el acceso a la Tienda
Windows excepto a un conjunto seleccionado de usuarios o equipos. En este caso, los
jefes de TI pueden usar una directiva de grupo para deshabilitar el acceso a la Tienda
Windows a los usuarios o los equipos restringidos.
Para obtener ms informacin, consulta Administracin de acceso de clientes a la

Tienda Windows, Windows Intune y System Center Configuration Manager.
Arriba
Acerca del autor

Doug Rothaus es redactor programador del equipo de contenido de
desarrolladores de Windows. Lleva ms de diez aos escribiendo contenido
sobre desarrollo en Microsoft y tiene pasin por ofrecer a los desarrolladores
las herramientas y la informacin que necesitan para crear grandes
soluciones con software de Microsoft.
Nuestros agradecimientos a Jim Prothe y Brad Bosak de Sonoma Partners LLC por
ofrecermos una visin general del trabajo que realizan con Windows 8 y Microsoft
Dynamics CRM. Tambin queremos dar las gracias a Kraig Brockschmidt, Miron
Vranjes, Kushal Shah, Lora Heiny, Todd Landstad y Robert Green por contribuir con el
contenido de este artculo.
Activos de diseo para aplicaciones de la

Tienda Windows (Windows)
Descarga de activos de diseo para aplicaciones de la Tienda Windows
Diseo de animaciones (aplicaciones de la Tienda Windows)
Activos de diseo
Descarga activos de diseo que te
ayudarn a crear fantsticas
aplicaciones de la Tienda Windows.
Animaciones
Aprende a usar animaciones con
propsito para enlazar las
experiencias visuales y contar una
historia.
Descarga de activos de diseo para

(Windows)
Disear para Windows 8 no es muy diferente de disear para la Web. De hecho, es un

poco ms fcil porque tienes PSD para controles, diseos, componentes y plantillas de
proyecto que te ayudarn a disear tu interfaz de usuario.
Diseo de animaciones (aplicaciones de la

Tienda Windows) (Windows)

En este artculo
Iniciar tu aplicacin
Transicin entre pginas
Transicin entre contenidos
Tocar y hacer clic en los comentarios
Mostrar controles o UI transitorias
Actualizar
Mostrar contenido o controles adicionales en lnea
Agregar o eliminar elementos de una lista
Filtrar una lista mientras se realiza una bsqueda
Mostrar una barra de mensajes o comandos
Mostrar un panel de tareas
Mostrar una UI emergente
Arrastrar y colocar
Deslizar rpidamente/seleccionar un icono
Revelar capacidad para deslizar rpidamente
Actualizar un icono
Actualizar un distintivo
Cambiar la posicin
Temas relacionados
Son vdeos, ir a las urls.

Diseño de UX para Aplicaciones

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Diseño de UX para Aplicaciones

Diunggah oleh

Hak Cipta:

Format Tersedia

Diseo de UX para aplicaciones

Aprenda a crear aplicaciones para Tienda Windows

Personas que lo han encontrado til: 24 de 41 - Valorar este tema

iOS:> aplicaciones para la Tienda Windows

Planear aplicaciones de la Tienda

1. Determina los puntos fuertes de la aplicacin

Cuando planees tu aplicacin de la Tienda Windows, piensa menos en qu

1. Determina los puntos fuertes de la aplicacin

Conseguir mapas de todos los lugares de un itinerario y llevarlos contigo al viaje.

En qu se destaca tu aplicacin? Retrocede un paso y examina la lista de ideas para

Mi aplicacin para viajes es excelente para crear itinerarios de forma conjunta

Este es el enunciado de puntos fuertes de la aplicacin y puede orientar muchas

2. Decide qu actividades del usuario admitirs

Explicar el flujo: Qu es lo primero, qu sigue?

Prototipo: probar el flujo con un prototipo rpido.

Crear un viaje con informacin general.

3. Decide qu caractersticas incluirs

Investigacin sobre la plataforma: descubre qu caractersticas ofrece la

Contratos entre aplicaciones Tu aplicacin puede participar en contratos entre

Buscar Permite que los usuarios busquen rpidamente el contenido de la

Diferentes vistas y factores de forma Windows 8 pone a los usuarios al mando y a tu

Animaciones Usa nuestra biblioteca de animaciones para que tu aplicacin sea

Configuracin Permite guardar la configuracin de la aplicacin para que los

Movilidad Crea una experiencia continua de un dispositivo a otro con la

Capacidades del dispositivo Asegrate de que la aplicacin aprovecha al mximo la

Gestos de proximidad Permite que los usuarios conecten dispositivos haciendo

Compartir: los usuarios comparten sus prximos viajes e itinerarios en diferentes

Configuracin: los usuarios configuran la aplicacin segn su preferencia, por

4. Decide cmo rentabilizar la aplicacin

5. Disea la interfaz de usuario de la aplicacin

6. Causa una buena primera impresin

7. Crea un prototipo y valida tu diseo

Evaluacin de la Describe un marco que permite medir y mejorar el diseo de la

Planear para la rentabilidad

Versiones de prueba, de pago y mixtas

Elegir tu modelo comercial

Planear para calidad y certificacin

Este tema an no ha recibido ninguna valoracin - Valorar este tema

La calidad de las aplicaciones de la Tienda Windows se evala mediante varios

Caractersticas de seguridad de Windows

API de la plataforma compatible

Validacin de recursos del paquete de la aplicaci

Comprobacin de la versin de .NET

Diseo para diferentes factores de forma

Interacciones tctiles, de lpiz, de mouse y de teclado

Las aplicaciones de la Tienda Windows se encuentran en casa en equipos de escritorio,

Interacciones tctiles, de lpiz, de mouse y de teclado

Funcionalidades del dispositivo

Acelermetros y otros sensores Hoy en da, los dispositivos vienen con

Vistas mltiples y fluidas de la aplicacin

Horizontal Disea primero la vista horizontal para que tu aplicacin se vea

Escala grfica integrada

Diseo para un mercado global

Introduccin a la disponibilidad mundial

Directrices para el diseo de aplicaciones

Aumenta el espacio horizontal y vertical de etiquetas y texto.

Usa etiquetas y texto forma coherente.

Evita expresiones familiares y metforas.

No uses una jerga tcnica, abreviaturas o acrnimos.

Evita texto o imgenes especficos de una cultura.

Muestra valores numricos, nombres y direcciones correctamente para los

Ten presente cundo usar color para transmitir significado.

Diseo de accesibilidad (aplicaciones de