Diseño de UX Para Aplicaciones

Diseño de UX para aplicaciones

Aprenda a crear aplicaciones para Tienda Windows


Planear aplicaciones de la Tienda Windows

Directrices de diseño para aplicaciones de la Tienda Windows

Inspiración para el diseño (aplicaciones de la Tienda Windows)

Casos prácticos (aplicaciones de la Tienda Windows)

Activos de diseño para aplicaciones de la Tienda Windows

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

Planeación

Enfoque de la aplicación Escenarios de usuario Características de las aplicaciones Hacer dinero Diseño de la interfaz de usuario Primeras impresiones Validación

http://msdn.microsoft.com/es-es/library/windows/apps/br229519.aspx

http://msdn.microsoft.com/es-es/library/windows/apps/hh779072.aspx






http://msdn.microsoft.com/es-es/library/windows/apps/hh779072.aspx#feedback

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#have_a_vision

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#have_a_vision

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#decide_what_flows_or_tasks_you_want_to_enable_for_your_users

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#decide_what_flows_or_tasks_you_want_to_enable_for_your_users

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#decide_what_app_and_windows_features_you_can_use_enable_those_flows

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#decide_what_app_and_windows_features_you_can_use_enable_those_flows

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#determine_how_to_monetize

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#determine_how_to_monetize

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#decide_how_to_layout_your_app

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#decide_how_to_layout_your_app

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#make_first_impression

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#make_first_impression

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427#validate_your_design_against_guidelines_and_requirements

Guía de diseño

Navegación Comandos Tacto Publicidad Creación de marca Directrices para la experiencia de usuario

Inspiración

Juegos Entretenimiento Noticias Productividad Deportes Compras Viajes Educación








http://msdn.microsoft.com/es-es/library/windows/apps/jj649139






















Casos prácticos

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 certificación (aplicaciones de la Tienda Windows)

Diseño para diferentes factores de forma (aplicaciones de la Tienda Windows)

Diseño para un mercado global (aplicaciones de la Tienda Windows)

Diseño de accesibilidad (aplicaciones de la Tienda Windows)

Evaluar la facilidad de uso de las aplicaciones de la Tienda Windows


En este artículo

1. Determina los puntos fuertes de la aplicación

2. Decide qué actividades del usuario admitirás

3. Decide qué características incluirás

4. Decide cómo rentabilizar la aplicación

5. Diseña la interfaz de usuario de la aplicación

6. Causa una buena primera impresión

7. Crea un prototipo y valida tu diseño

Consulta también

Cuando planees tu aplicación de la Tienda Windows, piensa menos en qué

características quieres incluir y más acerca de qué experiencia quieres proporcionar a

tus usuarios. Si todavía no has leído Creación de aplicaciones de la Tienda Windows

sobresalientes, sería recomendable que lo hicieras ahora.

Te recomendamos que sigas estos pasos para planear tu aplicación de la Tienda

Windows.

1. Determina los puntos fuertes de la aplicación

La parte más importante del diseño de una aplicación de la Tienda Windows consiste en

determinar cuáles serán los puntos fuertes de la aplicación. Supongamos que quieres

crear una aplicación de fotos. Piensas en los motivos por los que los usuarios trabajan

con sus fotografías, las guardan y las comparten, y te das cuenta de que quieren revivir

recuerdos, conectarse con otras personas a través de las fotos y conservarlas en un lugar

seguro. Quieres que esos sean los puntos fuertes de la aplicación y usas esos objetivos

de experiencia del usuario para guiarte durante el resto del proceso de diseño.

¿En qué consiste la aplicación? Comienza con un concepto amplio y enumera todo lo

que quieres que los usuarios puedan hacer con la aplicación.

Imagina que quieres crear una aplicación que ayude a las personas a planear sus viajes.

Aquí te presentamos algunas ideas que bien podrías haber anotado en una servilleta:











http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#have_a_vision

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#decide_what_flows_or_tasks_you_want_to_enable_for_your_users

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#decide_what_app_and_windows_features_you_can_use_enable_those_flows

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#determine_how_to_monetize

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#decide_how_to_layout_your_app

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#make_first_impression

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#validate_your_design_against_guidelines_and_requirements

http://msdn.microsoft.com/es-es/library/windows/apps/hh465427.aspx#faux_see_also



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

Averiguar sobre eventos especiales que tengan lugar mientras estás en la ciudad.

Permitir que los compañeros de viaje creen listas con actividades y atracciones

indispensables por separado, pero que puedan compartirlas.

Permitir que los compañeros de viaje recopilen sus fotografías y las compartan

con familiares y amigos.

Obtener los destinos recomendados en función del precio de los vuelos.

Encontrar una lista consolidada de restaurantes, comercios y actividades dentro

del área de destino.

¿En qué se destaca tu aplicación? Retrocede un paso y examina la lista de ideas para

ver si algún escenario en particular te llama la atención. Acepta el reto de reducir la lista

a un solo escenario en el que quieras centrarte. En el proceso, podrías tachar muchas

ideas buenas, pero decirles "no" es fundamental para lograr un solo escenario

excepcional.

Después de elegir un solo escenario, decide cómo explicarías a una persona normal los

motivos por los que tu aplicación es excelente, y escríbelos en una sola frase. Por

ejemplo:

Mi aplicación para viajes es excelente para crear itinerarios de forma conjunta

para viajes en grupo.

Mi aplicación de gimnasia es excelente para permitir a los amigos realizar un

seguimiento de su progreso y compartir sus logros.

Mi aplicación 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 aplicación y puede orientar muchas

decisiones y disyuntivas de diseño que surgen mientras se crea la aplicación.

Concéntrate en los escenarios del usuario que quieres permitir y ten cuidado de no

convertirlo en una lista de características. Debe tratarse de lo que podrán hacer los

usuarios y no de lo que podrá hacer la aplicación.

Entre las técnicas habituales para ayudarte en este paso se encuentran los diagramas de

lluvia de ideas, de asociación y de ideas.

2. Decide qué actividades del usuario admitirás

Un flujo es un conjunto de interacciones relacionadas que los usuarios tienen con la

aplicación 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 aplicación excelente cuenta con flujos fáciles de

aprender que requieren interacciones mínimas.

Técnicas habituales para ayudarte con este paso:

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

Presentación gráfica del flujo: ¿Cómo deben desplazarse los usuarios por la

interfaz de usuario para completar el flujo?

Prototipo: probar el flujo con un prototipo rápido.

¿Qué deben poder hacer los usuarios? Por ejemplo, la aplicación 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 información 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é características incluirás

Cuando sepas qué es lo que buscan los usuarios y cómo puedes ayudarlos a encontrarlo,

puedes echar un vistazo a algunas herramientas de la caja de herramientas. Explora la

plataforma de Windows y asocia las características con las necesidades de la aplicación.

Asegúrate de seguir las directrices de experiencia del usuario para cada característica.

Técnicas comunes:

Investigación sobre la plataforma: descubre qué características ofrece la

plataforma y cómo puedes usarlas.

Diagramas de asociación: conecta los flujos con las características.

Prototipo: prueba las características para asegurarte de que hacen lo que

necesitas.

Contratos entre aplicaciones Tu aplicación puede participar en contratos entre

aplicaciones que habilitan amplios flujos de usuarios entre características y aplicaciones.

Buscar Permite que los usuarios busquen rápidamente el contenido de la

aplicación desde cualquier parte del sistema, incluso desde otras aplicaciones. Y

viceversa.

Compartir Permite a los usuarios compartir contenido desde la aplicación con

otras personas a través de otras aplicaciones. También permite recibir contenido

de otras personas y aplicaciones que se puede compartir.

Reproducir Permite que los usuarios disfruten de la transmisión de audio,

vídeo o imágenes desde tu aplicación a otros dispositivos de la red doméstica.

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. También puedes proporcionar una extensión de selector de

archivos para que otras aplicaciones puedan cargar el contenido de la aplicación.

Para más información, 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

aplicación en primer plano. Deseas que la interfaz de usuario de la aplicación destaque

en cualquier dispositivo, con cualquier modo de entrada, en cualquier orientación, en

cualquier circunstancia en la que el usuario decida usarla. Obtén más información sobre

la planeación de diferentes factores de forma.

Experiencia táctil Windows 8 ofrece una experiencia táctil única e incomparable, que

hace mucho más que simplemente emular la funcionalidad del mouse.

Por ejemplo, un zoom semántico es un modo optimizado para funcionalidad táctil que

permite navegar por un conjunto extenso de contenido. Los usuarios pueden desplazarse

de lado a lado o de arriba a abajo por las categorías del contenido y acercar la vista de

las categorías para ver más información y con más detalle. Puedes usarlo para presentar

el contenido de una manera más táctil, visual e informativa que con los modelos

tradicionales de navegación y diseño, como las pestañas.

Por supuesto, puedes utilizar diferentes interacciones táctiles, como girar, desplazar

lateralmente, deslizar transversalmente, etc. Obtén más información sobre la interacción

táctil.

Atractiva y original Asegúrate de que tu aplicación sea original y atraiga a los

usuarios con estas experiencias estándar:

Animaciones Usa nuestra biblioteca de animaciones para que tu aplicación sea

rápida y fluida. Ayuda a los usuarios a comprender cambios contextuales y

relaciona las experiencias entre sí con transiciones visuales. Obtén más

información sobre cómo animar la interfaz de usuario.

Notificaciones del sistema Informa a los usuarios sobre contenido

personalmente relevante o sujeto a limitación temporal a través de notificaciones

del sistema para atraerlos a la aplicación aunque esté cerrada. Obtén más

información sobre los iconos, las notificaciones y las notificaciones del sistema.

iconos secundarios Promueve contenido interesante y vínculos profundos de la

aplicación en la pantalla Inicio y permite a los usuarios iniciar la aplicación

directamente en una página o vista específicas. Obtén más información sobre los

iconos secundarios.

Iconos de la aplicación Ofrece actualizaciones nuevas y relevantes para que los

usuarios quieran volver a la aplicación. Podrás encontrar más información en la

siguiente sección. Obtén más información sobre los iconos de la aplicación.

Personalización

Configuración Permite guardar la configuración de la aplicación para que los

usuarios puedan crear la experiencia que quieran. Consolida toda la

configuración en su solo lugar. Los usuarios pueden configurar la aplicación con

un mecanismo común con el que ya están familiarizados. Obtén más

información sobre cómo agregar configuración de la aplicación.









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 más les interesa,

independientemente del dispositivo que estén usando. Mantén la configuración y

los estados con movilidad para que los usuarios puedan usar la aplicación en

todas partes, en el equipo familiar de la cocina, en el del trabajo o en una tableta

personal. Obtén más información acerca de cómo administrar datos de la

aplicación y consulta Directrices para perfiles móviles de datos de la aplicación.

Imágenes de usuario Haz que la aplicación sea más personal para los usuarios

mediante la carga su imagen de usuario o permite que establezcan contenido de

la aplicación como su icono personal en Windows.

Capacidades del dispositivo Asegúrate de que la aplicación aprovecha al máximo la

funcionalidad de los dispositivos actuales.

Gestos de proximidad Permite que los usuarios conecten dispositivos haciendo

que se toquen físicamente, para mejorar las experiencias en las que esperas que

haya varios usuarios situados cerca unos de otros (juegos multijugador). Obtén

más información sobre los gestos de proximidad y pulsación.

Cámaras y dispositivos de almacenamiento externos Conecta a los usuarios

con sus cámaras integradas o conectadas para conversar, realizar conferencias,

grabar vídeo blogs, tomar fotografías del perfil, documentar hechos del mundo

que los rodea o para cualquier otra actividad en la que se destaque tu aplicación.

Obtén más información sobre el acceso a contenido en almacenamiento extraíble.

Acelerómetros y otros sensores Hoy en día, los dispositivos vienen con

diversos sensores. La aplicación puede atenuar o iluminar la pantalla según la

luz ambiental, redistribuir la interfaz de usuario si el usuario gira la pantalla o

reaccionar ante un movimiento físico. Obtén más información sobre los sensores.

Ubicación geográfica Usa la información de ubicación geográfica de datos web

estándar o de sensores de ubicación geográfica para que los usuarios puedan

desplazarse, encontrar su posición en un mapa u obtener avisos sobre personas,

actividades o destinos cercanos. Obtén más información sobre la ubicación

geográfica.

Volvamos a tomar el ejemplo de la aplicación para viajes. Para ofrecer una excelente

ayuda a un grupo de amigos que quieren crear de forma conjunta los itinerarios de

viajes en grupo, podrías usar algunas de estas características, por mencionar algunas:

Compartir: los usuarios comparten sus próximos 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 aplicación 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 públicos de otras personas que pueden incluir en sus propios

viajes.

Notificaciones: los usuarios reciben una notificación cuando sus compañeros de

viaje actualizan los itinerarios.









Configuración: los usuarios configuran la aplicación según su preferencia, por

ejemplo, qué viaje debe generar notificaciones o qué grupos sociales tienen

permitido buscar los itinerarios de los usuarios.

Zoom semántico: los usuarios se desplazan por la escala de tiempo del itinerario

y acercan la vista para ver con más detalle la larga lista de actividades que

planearon.

Imágenes 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

deleitarán a los usuarios. Para obtener más ideas, consulta Desarrollo de aplicaciones de

la Tienda Windows.

4. Decide cómo rentabilizar la aplicación

Cuentas con muchas opciones para ganar dinero con tu aplicación. Si decides usar

publicidad o ventas en la aplicación, querrás diseñar una interfaz de usuario que lo

permita. Para más información, consulta el tema sobre la planeación para la rentabilidad.

5. Diseña la interfaz de usuario de la aplicación

Se trata de comprender correctamente los aspectos fundamentales. Ahora que sabes

cuáles son los puntos fuertes de tu aplicación y ya pensaste en los flujos que quieres

admitir, puedes comenzar a pensar en los aspectos fundamentales del diseño de la

interfaz de usuario.

¿Cómo deberías organizar el contenido de la interfaz de usuario? La mayor parte

del contenido de la aplicación se puede organizar en ciertos tipos de grupos o jerarquías.

Lo que elijas como grupo de nivel superior del contenido debe coincidir con el objetivo

del enunciado de puntos fuertes.

Por ejemplo, en la aplicación para viajes existen varias formas de agrupar los itinerarios.

Si el objetivo de la aplicación fuera descubrir destinos interesantes, entonces podrías

agruparlos según los intereses, como aventura, diversión bajo el sol o escapadas

románticas. Sin embargo, como el objetivo de la aplicación es planear viajes con amigos,

tiene más sentido organizar los itinerarios en función de círculos sociales, como familia,

amigos o trabajo.

Elegir cómo quieres agrupar el contenido te ayuda a decidir qué páginas o vistas

necesitas en la aplicación. Las plantillas de proyecto disponibles en Microsoft Visual

Studio Express 2012 for Windows 8 ofrecen los modelos de diseño de aplicación

comunes que se adaptan a la mayoría de las necesidades de contenido. Para más

información, consulta el tema sobre el diseño de navegación y las plantillas para

acelerar el desarrollo de tu aplicación.

¿Qué superficies y comandos de la interfaz de usuario necesitas? Revisa los flujos

que identificaste anteriormente. Para cada flujo, crea una descripción 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

podría requerir estos pasos:

1. El usuario abre la aplicación y ve una lista con los viajes que creó.

2. El usuario pulsa en el viaje que quiere compartir.

3. Los detalles del viaje aparecen en pantalla.

4. El usuario accede a una interfaz de usuario para empezar a compartir.

5. El usuario selecciona o escribe la dirección de correo electrónico 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 aplicación 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 electrónico

estándar reutilizable para los amigos que aún no utilizan la aplicación). También puedes

comenzar a eliminar pasos adicionales. Quizás, el usuario en realidad no necesite ver los

detalles del viaje antes de compartirlo, por ejemplo. Cuanto más claro sea el flujo, más

fácil será usarlo.

Para obtener información detallada sobre cómo usar superficies distintas, consulta

Diseño de comandos para aplicaciones de la Tienda Windows.

¿Cómo deberías organizar los comandos? Usa tu esquema sobre los pasos del flujo

para identificar posibles comandos que necesites diseñar. A continuación, piensa en la

ubicación que tendrán los comandos en la aplicación.

Trata siempre de usar el contenido. Siempre que sea posible, permite que los

usuarios manipulen directamente el contenido en el Canvas de la aplicación, en

lugar de agregar comandos que actúen sobre el contenido. Por ejemplo, en la

aplicación 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 aplicación: debes colocar la mayoría de los comandos

en la barra de la aplicación, que generalmente permanece oculta hasta

que el usuario decide mostrarla.

o En el Canvas de la aplicación propiamente dicho: si el usuario se

encuentra en una página o vista que tiene un solo propósito, puedes

ofrecer comandos para ese propósito directamente en el Canvas. Debería

haber muy pocos de estos comandos.

o En un menú contextual: puedes usar los menús 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 anotación en una ubicación sobre el mapa).


Decide cómo diseñar tu aplicación en cada vista. Windows 8 admite vistas verticales,

horizontales, acopladas y rellenas. Los usuarios pueden colocar la aplicación en

cualquiera de estas vistas en cualquier momento, y quieres lograr que la aplicación se

vea y funcione perfectamente en cada una de ellas. Esto significa que debes planear el

diseño de los elementos de interfaz de usuario para cada vista y asignar la

implementación del diseño a cada estado de visualización. Cuando lo haces, la interfaz

de usuario de la aplicación cambia de forma fluida para satisfacer las necesidades y

preferencias del usuario.

Para obtener más información, consulta los temas sobre las directrices para diseños, la

elección de un diseño y las directrices para vistas ajustadas y rellenas.

6. Causa una buena primera impresión

Piensa en lo que quieres que sientan, piensen o hagan los usuarios cuando inicien por

primera vez la aplicación. 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

aplicación, puedes transmitirles el mensaje con tu primera impresión. Aprovecha lo

siguiente:

Notificaciones & de icono El icono es la cara de tu aplicación. Entre todas las

aplicaciones que el usuario pueda tener en su pantalla Inicio, ¿qué es lo que hará que

quiera iniciar la tuya? Asegúrate de que el icono resalte la marca de tu aplicación y

muestre sus puntos fuertes. Recurre a las notificaciones de icono para que la aplicación

siempre tenga una apariencia renovada y relevante, lo que hará que el usuario vuelva a

ella una y otra vez.

Pantalla de presentación La pantalla de presentación debe cargarse lo más rápido

posible y permanecer en la pantalla solo el tiempo necesario para inicializar el estado de

la aplicación. Lo que muestres en la pantalla de presentación debe expresar la

personalidad de la aplicación.

Primer inicio ¿Qué verán los usuarios antes de suscribirse al servicio, iniciar sesión en

su cuenta o agregar su propio contenido? Intenta demostrar el valor de la aplicación

antes de solicitar información a los usuarios. Considera la posibilidad de ofrecerles una

muestra del contenido que puedan manipular para que comprendan el propósito de la

aplicación antes de pedirles que se comprometan.

Página principal La página principal es la página que verán los usuarios cada vez que

inicien la aplicación. El contenido debe tener un propósito claro y mostrar de inmediato

para qué sirve la aplicación. Haz que esta página sea excelente en algo en particular y

confía en que las personas explorarán el resto de la aplicación. Elimina las distracciones

de la página 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 diseño

Antes de ir demasiado lejos con el desarrollo real, debes validar el diseño o crear un

prototipo basado en instrucciones, impresiones del usuario y requisitos, para evitar tener

que trabajar sobre ello más tarde. Cada característica cuenta con un conjunto de

directrices de experiencia del usuario que te ayudan a pulir la aplicación y un conjunto

de requisitos comerciales que debes cumplir para vender la aplicación en la Tienda

Windows. Puedes usar el Kit para la certificación de aplicaciones en Windows para

comprobar si tu aplicación cumple técnicamente con los requisitos comerciales.

Usa las directrices detalladas de la experiencia de usuario para aplicaciones de la Tienda

Windows para mantenerte centrado en las características importantes.

Consulta también

Para más información sobre la planeación y el diseño de aplicaciones de la Tienda

Windows, consulta los siguientes temas.

Tema Descripción

Planeación para

la rentabilidad

Las aplicaciones de la Tienda Windows te ofrecen distintas maneras

de amortizar el duro trabajo que has invertido en desarrollar

aplicaciones excepcionales.

Planeación de

calidad y

certificación

La calidad de las aplicaciones de la Tienda Windows se evalúa

mediante varios procesos de prueba. En este tema se describe la

prueba que lleva a cabo el Kit para la certificación de aplicaciones en

Windows. Si diseñas la aplicación para que pase estas pruebas,

mejorarás la calidad y la confiabilidad. También conseguirás la

certificación de almacenamiento de manera más fácil.

Diseño para

diferentes

factores de forma

Las aplicaciones de la Tienda Windows se encuentran en casa en

equipos de escritorio, equipos portátiles y tabletas táctiles. Necesitas

diseñar 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 método de

entrada, cambiar la orientación de la pantalla o apagar y encender

todo, y la aplicación de la Tienda Windows deberá moverse, cambiar

y reaccionar con ellos.

Diseño para un

mercado global

Windows se usa en todo el mundo, en una variedad de diferentes

mercados con clientes que varían en cultura, región geográfica o

idioma. Sigue estas directrices cuando diseñes la aplicación y podrás

adaptarla más adelante para otras culturas, regiones, idiomas y el

mercado global.

Diseño de

accesibilidad

Mientras diseñas tu aplicación, recuerda siempre que los usuarios

tienen una amplia variedad de capacidades, discapacidades y

preferencias. Seguir los principios de un diseño accesible desde el

comienzo garantiza que la aplicación sea accesible para el público

más amplio posible y hace que más clientes se sientan atraídos por tu

aplicación en la Tienda Windows.















Evaluación de la

usabilidad

Describe un marco que permite medir y mejorar el diseño de la

experiencia de usuario para la aplicación de la Tienda Windows.

Planear para la rentabilidad

(aplicaciones de la Tienda Windows)

(Windows)










Este tema aún no ha recibido ninguna valoración - 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 aplicación

gratuitas. Admite períodos de prueba y ofertas en la aplicación, así que puedes usar

estas características de prueba en tu aplicación aunque sea gratuita. Hasta que no estés

registrado como un desarrollador de la Tienda Windows, solo podrás probar estas

características 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 aplicación de pago

con funcionalidad completa) o bien puedan probarla gratis durante un período (período

de prueba gratuito). Un usuario puede actualizar de una versión de prueba de tu

aplicación a una versión completa comprada desde la propia aplicación o desde la

Tienda Windows.

La License API proporciona la interfaz que te permite comprobar el estado de la

licencia de la aplicación y el estado de las compras realizadas a través de la aplicación.

También puedes usarla para comprobar las fechas de expiración de las compras dentro

de la aplicación, y permitir que los usuarios realicen otras compras desde la aplicación.

Para obtener más información sobre cómo planear y diseñar estos tipos de aplicaciones,

consulta:













http://msdn.microsoft.com/es-es/library/windows/apps/windows.applicationmodel.store.aspx

Elegir tu modelo comercial

Cómo ven tu aplicación los clientes en la Tienda Windows

Ventas en la aplicación

Las ventas en la aplicación te permiten vender contenido, otras aplicaciones o nuevas

funcionalidades de la aplicación, como el desbloqueo del nivel siguiente de un juego

desde la aplicación. Puedes incluir opciones de compra en cualquier parte de la

aplicación para que resulte más cómodo para los clientes.

Para obtener más información sobre cómo planear y diseñar ventas desde tu aplicación,

consulta La experiencia de compra desde la aplicación para un cliente.

Publicidad en la aplicación

Puedes vender e incluir anuncios en tu aplicación. Sé cuidadoso para designar el lugar

donde deseas ubicar la publicidad para que la experiencia del usuario no se vea afectada.

Asegúrate también de que los anuncios proporcionados por el servicio publicitario

cumplen con los Requisitos de certificación para una aplicación para Windows 8 antes

de incluirlos en la aplicación.

Para obtener más información acerca de cómo diseñar tu aplicación para que incluya

publicidad, consulta Directrices de publicidad.

Temas relacionados

Venta de aplicaciones

Planear para calidad y certificación


(Windows)










http://msdn.microsoft.com/es-es/library/windows/apps/jj193599.aspx
















La calidad de las aplicaciones de la Tienda Windows se evalúa mediante varios

procesos de prueba. En este tema se describe la prueba que lleva a cabo el Kit para la

certificación de aplicaciones en Windows. Si diseñas la aplicación para que pase estas

pruebas, mejorarás la calidad y la confiabilidad. También conseguirás la certificación de

almacenamiento de manera más fácil.

El Kit para la certificación de aplicaciones en Windows pone a prueba las categorías

siguientes. Después de probar la aplicación con el Kit para la certificación de

aplicaciones en Windows, obtendrás un informe detallado de la aplicación. Como sabes

de antemano qué prueba el Kit para la certificación de aplicaciones en Windows, puedes

diseñar tu aplicación teniendo en cuenta esos aspectos.

Errores de la aplicación

La aplicación debe bloquearse ni colgarse. Los errores de la aplicación, como bloqueos

o cuelgues interrumpen y frustran a los clientes. Eliminar dichos errores mejora la

estabilidad y la confiabilidad de la aplicación y en general, ofrece a los clientes una

mejor experiencia.

Manifiesto de la aplicación

El manifiesto de la aplicación debe contener todos los atributos necesarios.

Características de seguridad de Windows

La aplicación debe usar características de seguridad de Windows.

API de la plataforma compatible

La aplicación solo debe usar las API del Kit de desarrollo de software de Windows

(Windows SDK) para Windows 8.

Rendimiento de inicio

La aplicación debe contar con una experiencia de inicio rápida y al mismo tiempo

consumir una cantidad razonable de recursos del sistema (CPU, archivo, E/S, memoria,

etc.) para habilitar una conmutación rápida y multitarea entre aplicaciones que aún no se

abrieron.

Rendimiento de suspensión

La aplicación debe contar con una experiencia de suspensión rápida 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.


Validación de recursos del paquete de la aplicació

El manifiesto de la aplicación debe contar con recursos válidos que se definen en el

archivo resources.pri, como se explica en el esquema del manifiesto del paquete de la

aplicación.

Comprobación de la versión de .NET

La aplicación debe usar .NET 4.5 o una versión posterior.

Diseño para diferentes factores de forma


(Windows)











En este artículo

Interacciones táctiles, de lápiz, de mouse y de teclado

Funcionalidades del dispositivo

Vistas múltiples y fluidas de la aplicación

Escala gráfica integrada

Datos de movilidad

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

equipos portátiles y tabletas táctiles. Necesitas diseñar 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 método de entrada,

cambiar la orientación de la pantalla o apagar y encender todo, y la aplicación de la

Tienda Windows deberá moverse, cambiar y reaccionar con ellos.













http://msdn.microsoft.com/es-es/library/windows/apps/hh465400.aspx#touch_mouse_and_keyboard_input

http://msdn.microsoft.com/es-es/library/windows/apps/hh465400.aspx#device_capabilities

http://msdn.microsoft.com/es-es/library/windows/apps/hh465400.aspx#fluid_multiple_views_of_your_app

http://msdn.microsoft.com/es-es/library/windows/apps/hh465400.aspx#built_in_graphical_scaling

http://msdn.microsoft.com/es-es/library/windows/apps/hh465400.aspx#roaming_data

Interacciones táctiles, de lápiz, de mouse y de teclado

Si diseñas una aplicación para interacciones táctiles, obtienes soporte para interacciones

de lápiz, mouse y teclado de forma gratuita. Los usuarios pueden pasar de un método de

entrada a otro sin perder ni un ápice de la experiencia de la aplicación. ¿Deseas conectar

el teclado a una tableta? No hay ningún problema. La aplicación responde de manera

coherente y predecible a las elecciones de los usuarios.

Para obtener más información, consulta Diseño de interacción tácil y Responder a la

interacción del usuario.

Funcionalidades del dispositivo

Las grandes aplicaciones aprovechan al máximo los dispositivos en los que se ejecutan.

Windows 8 ofrece compatibilidad integrada para estas funcionalidades de dispositivos:

Acelerómetros y otros sensores Hoy en día, los dispositivos vienen con

diversos sensores. La aplicación puede atenuar o iluminar la pantalla según la

luz ambiental, cambiar la distribución de la interfaz de usuario si el usuario gira

la pantalla o reaccionar a un movimiento físico. Obtén más información sobre

los sensores.

Ubicación geográfica Usa la información sobre la ubicación geográfica de

datos web estándar o de sensores de ubicación geográfica para que los usuarios

puedan desplazarse, encontrar su posición en un mapa u obtener avisos sobre

personas, actividades o destinos cercanos. Obtén más información sobre la

ubicación geográfica.

Cámaras Conecta a los usuarios con sus cámaras integradas o conectadas para

conversar, realizar conferencias, grabar vídeo blogs, tomar fotografías del perfil,

documentar hechos del mundo que los rodea o cualquier otra actividad para la

que destaque la aplicación.

Gestos de proximidad Permite que los usuarios conecten dispositivos

tocándolos físicamente al mismo tiempo, para mejorar las experiencias en las

que esperas que haya varios usuarios físicamente próximos (juegos

multijugador). Obtén más información sobre los gestos de proximidad.

Cuando planees las características de tu aplicación, ten en cuenta los dispositivos en los

que podría ejecutarse. ¿Se necesita alguna funcionalidad del dispositivo para que la

aplicación funcione correctamente? ¿O puedes arreglártelas sin ellas? En el manifiesto

de la aplicación debes declarar qué funcionalidades admite tu aplicación, pero en la

aplicación misma puedes crear reservas para capacidades opcionales. Por ejemplo,

supongamos que una aplicación de mapas para viajes permite a los usuarios hacer un

seguimiento de sus viajes en el mapa, etiquetar sitios, incluir comentarios de bitácora,

enviarlos a los medios sociales y agregar fotografías o vídeos del viaje. La ubicación

geográfica sería una funcionalidad obligatoria, pero la compatibilidad con la cámara

podría ser opcional. Si el dispositivo no tiene cámara, los usuarios podrían cargar vídeos

o fotografías tomadas en otro dispositivo. Las grandes aplicaciones cubren todas las

opciones.







Vistas múltiples y fluidas de la aplicación

Con Windows 8, los usuarios están al mando. Deseas que la interfaz de usuario de la

aplicación destaque en cualquier dispositivo, con cualquier modo de entrada, en

cualquier orientación, en cualquier circunstancia en la que el usuario decida usarla.

Si diseñas la aplicación con vistas fluidas, la interfaz de usuario de la aplicación se

redistribuye naturalmente en respuesta a los cambios de la orientación del monitor del

usuario, su dispositivo móvil o el método de entrada. Windows administra estos

comportamientos por ti.

Horizontal Diseña primero la vista horizontal para que tu aplicación se vea

bien en todos los factores de forma.

Vertical ¡Pero recuerda que algunos dispositivos giran! Por lo tanto, optimiza

el diseño del contenido en vista vertical y conserva la funcionalidad siempre que

sea posible.

La clave para obtener una buena apariencia en estas vistas (y también en las vistas

acoplada, rellena, de pantalla completa, de teclado táctil y de panel de escritura a mano)

es definir diseños para la aplicación en cada vista. Si planeas con anticipación cada vista,

la interfaz de usuario de tu aplicación se redistribuye automáticamente al activarse una

vista diferente en el dispositivo.

Para obtener más información, consulta el tema sobre cómo elegir un diseño y sobre las

directrices para diseños.

Escala gráfica integrada

Si los usuarios puede acceder a la aplicación en varios factores de forma, ¿esto significa

que tienes que diseñar una UI diferente para cada posible tamaño de pantalla con el que

trabaje Windows? ¡Las posibilidades son muchísimas! La respuesta es: no

necesariamente. Escala integrada significa que la aplicación y el contenido siempre se

ven genial, ya sea en un dispositivo pequeño de 7" o en un monitor grande de 30".

Simplemente tienes que usar un diseño fluido y asegurarte de que los gráficos de la

aplicación se vean bien al ampliarse.

Para obtener más información, 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 táctil

de casa? Los archivos, el estado y las preferencias de la aplicación van con ellos.

Pueden retomar directamente desde donde los dejaron, en diferentes máquinas y

sesiones de usuario.

Obtén más información sobre movilidad y cómo administrar datos de la aplicación.





Diseño para un mercado global


(Windows)











Windows se usa en todo el mundo, en una variedad de diferentes mercados con clientes

que varían en cultura, región geográfica o idioma. Sigue estas directrices cuando diseñes

la aplicación y podrás adaptarla más adelante para otras culturas, regiones, idiomas y el

mercado global.

Introducción a la disponibilidad mundial

Muchos desarrolladores de aplicaciones crean sus aplicaciones teniendo en cuenta

únicamente su propio idioma y cultura. Si la aplicación comienza a expandirse a otros

idiomas y mercados, adaptar la aplicación puede resultar difícil. Se podrían especificar

recursos de texto e imagen directamente dentro del código, lo cual dificulta la tarea de

traducción y la preparación para otras culturas. Este proceso se puede simplificar

teniendo en cuenta ciertas cuestiones cuando se diseña la aplicación por primera vez.

Directrices para el diseño de aplicaciones

Éstas son directrices a tener en cuenta mientras diseñas la aplicación para un mercado

global.

Aumenta el espacio horizontal y vertical de etiquetas y texto.

Algunos idiomas requieren un diseño con espacio extra para texto más extenso

que el que se necesita para en español. 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 inglés (como Å o Ņ). Usa los tamaños de fuente y las alturas de línea estándar

para ofrecer espacio vertical adecuado. Ten en cuenta que es posible que para las

fuentes de otros idiomas se requieran tamaños de fuente mínimos más grandes

para que sean legibles.











http://msdn.microsoft.com/es-es/library/windows/apps/windows.globalization.fonts.aspx

http://msdn.microsoft.com/es-es/library/windows/apps/windows.globalization.fonts.aspx

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 aplicación, como una instrucción 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 presentación. Para obtener más

información sobre la creación de archivos de recursos, consulta el tema sobre

definición de recursos de la aplicación.

Evita expresiones familiares y metáforas.

Dichos conceptos habitualmente son específicos para un solo idioma y pueden

ser específicos para una demografía dentro de un idioma. Si adoptas una voz o

tono informal, asegúrate de ofrecerle una explicación a los traductores al

respecto. Para aprender cómo comentar las cadenas, consulta el tema sobre

definición de recursos de la aplicación.

No uses una jerga técnica, abreviaturas o acrónimos.

Son difíciles de traducir y no son útiles para las audiencias no técnicas.

Evita texto o imágenes específicos de una cultura.

Puede resultar difícil generar versiones traducidas de las imágenes que pueden

aumentar el tamaño de la aplicación y ralentizar las velocidades de descarga.

Evita texto e imágenes que deban traducirse y evita imágenes específicas de la

cultura como los buzones de correo, que no son iguales en todo el mundo. Evita

imágenes con contenido religioso, político o sexista. La visualización de carne,

partes del cuerpo o gestos con las manos también pueden ser un tema delicado.

Muestra valores numéricos, nombres y direcciones correctamente para los

mercados globales.

Elementos como las fechas, horarios, números, calendarios, monedas, números

telefónicos, unidades de medida y tamaños de papel se pueden mostrar de

diferente forma según la cultura. El orden en que se muestran los apellidos y los

nombres de pila, y el formato de las direcciones también pueden diferir. Usa

presentaciones estándar de fecha, hora y números. Usa controles de selector de

fecha y hora estándar. Usa información de dirección estándar.

Ten presente cuándo 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 información con otros medios que no sean el color, como

tamaño, forma, o una etiqueta para los lectores daltónicos.



http://msdn.microsoft.com/es-es/library/windows/apps/windows.globalization.datetimeformatting.aspx

http://msdn.microsoft.com/es-es/library/windows/apps/windows.globalization.numberformatting.aspx



http://msdn.microsoft.com/es-es/library/windows/apps/windows.globalization.aspx

Diseño de accesibilidad (aplicaciones de

la Tienda Windows) (Windows)











Mientras diseñas tu aplicación, recuerda siempre que los usuarios tienen una amplia

variedad de capacidades, discapacidades y preferencias. Seguir los principios de un

diseño accesible desde el comienzo garantiza que la aplicación sea accesible para el

público más amplio posible y hace que más clientes se sientan atraídos por tu aplicación

en la Tienda Windows.

Escenarios de accesibilidad

Diseñar la aplicación 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 aplicación. Oír información

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 aplicación debe ofrecer información

correcta y suficiente sobre los elementos de la interfaz de usuario, incluidos el

nombre, el rol, la descripción, el estado, la posición, etc. Obtén más información

sobre cómo exponer información sobre los elementos de la interfaz de usuario.

Accesibilidad de teclado: el teclado forma parte integral del uso del lector de

pantalla y también es importante para los usuarios que prefieren el teclado como

una forma más eficaz de interactuar con la aplicación. Una aplicación accesible

permite a los usuarios acceder a todos los elementos interactivos de la interfaz

de usuario únicamente a través del teclado, lo que les permite también:

o Navegar por la aplicación mediante las teclas de flecha y de tabulación.

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 físico o para los usuarios cuyos problemas de movilidad le impidan usar

los tradicionales dispositivos de entrada físicos.

Obtén más información sobre la implementación de accesibilidad de teclado.

Experiencia visual accesible: los usuarios con discapacidades visuales

necesitan que el texto se muestre con un contraste alto. También 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 tamaño de todo lo que ves en la

pantalla en el panel de control Accesibilidad. Si se usa color para transmitir

información, los usuarios daltónicos necesitan alternativas al color como texto,

forma e iconos. Obtén más información 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:

Creación: el código que se genera en Microsoft Visual Studio Express 2012

para las plantillas de aplicación para Windows 8 incluye información sobre

accesibilidad.

Codificación: la plataforma de desarrollo incluye la siguiente compatibilidad

para accesibilidad durante la fase de codificación.

o Microsoft IntelliSense en Visual Studio Express 2012 para Windows 8

incluye información sobre accesibilidad.

o Los controles incluidos en la plataforma Windows 8 tienen

compatibilidad integrada para accesibilidad.

o La documentación 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 más

información, consulta el tema sobre cómo probar la accesibilidad de una

aplicación.

Venta: puedes marcar tu aplicación como accesible cuando la publiques en la

Tienda Windows para que los usuarios puedan descubrir tu aplicación cuando

usen el filtro Accesibilidad mientras examinan la Tienda. Para obtener más

información, consulta cómo declarar tu aplicación como accesible en la Tienda

Windows.

Usa los controles de la plataforma

Las etiquetas HTML estándar, 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

clasificación es completamente accesible sin ningún 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 información básica 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 mayoría de los controles

y del contenido gráfico como imágenes, gráficos 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 implícito como texto estático, botones y

vínculos, el sistema utiliza automáticamente el texto implícito como un nombre

accesible. Obtén más información sobre los nombres accesibles.

También debes proporcionar información adicional sobre accesibilidad para los

elementos de la interfaz de usuario con contenido dinámico, como una región activa en

una aplicación de la Tienda Windows con JavaScript con HTML. La información de

accesibilidad adicional permite que los lectores de pantalla anuncien las modificaciones

que se realizan en el contenido. Para ofrecer información de accesibilidad para una

región activa, establece el atributo aria-live de los elementos que tienen contenido

dinámico. Obtén información sobre cómo hacer las regiones activas accesibles.

Para garantizar que la aplicación sea visualmente accesible, proporciona imágenes de

alto contraste y configura manualmente los colores para cumplir con los requisitos de

contraste y para personas daltónicas. Obtén más información sobre compatibilidad de

alto contraste.

Crea controles personalizados accesibles

Si usas un control personalizado, debes proporcionar toda la información de

accesibilidad básica del control, incluido el nombre accesible, el rol, el estado, el valor,

etc. También debes asegurarte de que se pueda acceder por completo al control a través

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, "botón”.

Establecer el atributo tabindex para que incluya el elemento en el orden de

tabulación.

Agregar controladores de eventos de teclado para admitir la activación por

teclado; es decir, el equivalente para teclado de un controlador del evento

onclick.

Para obtener más información acerca de la exposición de elementos de interfaz de

usuario personalizados para accesibilidad, consulta el tema sobre aplicaciones de

Internet enriquecidas accesibles (ARIA).


http://msdn.microsoft.com/es-es/library/windows/apps/hh700323.aspx#accessible_name




http://msdn.microsoft.com/es-es/library/windows/apps/ms753077.aspx#role

http://msdn.microsoft.com/es-es/library/windows/apps/hh700327.aspx#keyboard_navigation_among_UI_elements



Evitar usar Canvas

El elemento HTML5 canvas no es compatible con la accesibilidad. Debido a que no

ofrece ninguna forma de exponer la información de accesibilidad para su contenido,

evita usar canvas a menos que sea absolutamente necesario. Si usas canvas, trátalo

como un elemento de la UI personalizado.

Temas relacionados

Creación de una aplicación de la Tienda Windows con JavaScript accesible

Crear una aplicación 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 diseño de la experiencia de

usuario para la aplicación de la Tienda Windows.

En este artículo

Importancia de evaluar la experiencia del usuario para tu aplicación

Medir el éxito potencial del diseño

Etapa 1: Autoevaluación

Plantilla de evaluación de aplicaciones: autoevaluación

Etapa 2: Simulación en voz alta

Plantilla de evaluación de aplicaciones: simulación en voz alta

Evaluación del deseo y la conexión emocional

Evaluación de la marca

Panel de experiencia del usuario

Temas relacionados



http://go.microsoft.com/fwlink/p/?linkid=232778











http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#why_assessing_the_ux_of_your_app_is_important

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#measuring_your_designs_potential_success

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#stage_1_self_evaluation

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#app_evaluation_template_self_evaluation

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#stage_2_cognitive_walkthrough

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#app_evaluation_template_cognitive_walkthrough

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#assessing_desire_and_emotional_connection

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#assessing_on_brand

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#ux_dashboard

http://msdn.microsoft.com/es-es/library/windows/apps/hh700399.aspx#related_topics

Importancia de evaluar la experiencia del usuario para tu aplicación

Cuando mejoras el diseño de la experiencia del usuario de tu aplicación:

A la gente le resulta más fácil usar tu aplicación.

Más gente considerará que tu aplicación es valiosa.

A más gente le gustará tu aplicación y las características que ofrece.

Más gente descargará y usará la aplicación.

Obtendrás más ingresos de tu aplicación.

Evaluar el diseño de la aplicación te aporta la confianza de que el producto que vas a

enviar es el que te habías propuesto, que su experiencia de usuario es excelente y que

los usuarios la considerarán útil, fácil de usar y atractiva.

Medir el éxito potencial del diseño

Para comenzar, define los objetivos de la aplicación. Los objetivos te ayudan a

simplificar el proceso de creación de la aplicación, y pueden ayudarte a evaluar el éxito

de la aplicación. Para obtener más información sobre cómo fijar objetivos, consulta

Planear aplicaciones de la Tienda Windows.

Existen varias herramientas que puedes usar para evaluar el éxito de tu aplicación.

Cuántas de estas herramientas usarás depende de la cantidad de tiempo y de los recursos

que puedas dedicar al diseño de la experiencia del usuario de la aplicación. Puedes usar

tres etapas de evaluación, en función del tiempo y los recursos de los que dispongas.

Tiempo y recursos mínimos: simulación en voz alta

Más tiempo y recursos: estudio de usuarios

Después del envío: iteración, telemetría, evaluaciones de usuario y comentarios.

Etapa 1: Autoevaluación

Introducción

Este es el primer paso para evaluar la experiencia del usuario de la

aplicación y se basa en los objetivos que definiste anteriormente. Este

método de evaluación tiene por finalidad garantizar que el diseño está en

línea con lo que te propusiste hacer. Este paso se centra en la experiencia

del usuario general de la aplicación.

Tiempo 15-30 minutos. El tiempo depende de la aplicación y del número de

situaciones clave de la aplicación.

Cuándo

Puedes usar esta evaluación durante la fase conceptual del diseño de la

aplicación. También puedes usarla en cualquier momento del desarrollo

cuando desees comprobar cómo avanzan tus planes originales.

Quién Para esta evaluación se necesita a uno o varios de los diseñadores o

desarrolladores de la aplicación.

Cómo

Enumera las principales experiencias o tareas que deseas que la

aplicación ofrezca a los usuarios. Por ejemplo, en una aplicación

de sopa de letras, una tarea podría ser escribir una palabra y

enviarla.


Escribe esta lista empezando por las tareas más importantes y

terminando por las menos importantes.

Termina la lista de tareas por orden de prioridad para la

aplicación. A medida avanzas por las tareas, consulta la plantilla

de planeación que creaste cuando enumeraste los objetivos de la

experiencia de usuario de la aplicación. ¿Crees que la aplicación

cumple los objetivos que te propusiste en un principio?

Si no es así, ¿en qué estado se encuentra la aplicación? ¿Qué hace

falta para asegurarte de que se cumplan los objetivos de la

aplicación?

Usa esta plantilla de evaluación de aplicaciones para anotar los

resultados obtenidos en la autoevaluación.

Describe las valoraciones de la experiencia de este modo:

Supera las expectativas Esta valoración indica que la

experiencia del usuario supera tus objetivos.

Según lo previsto Usa esta valoración si todas las experiencias o

tareas están cumpliendo las expectativas del usuario y no hay

ningún problema.

No cumple las expectativas del usuario Usa esta valoración

cuando la experiencia del usuario presente uno o varios problemas

que, si no se resuelven, podrían afectar considerablemente a la

experiencia del usuario.

Problemas con la planeación del producto Usa esta valoración

cuando haya varios problemas de planeación o cuando sea

necesario realizar revisiones importantes al marco general del

diseño.

Plantilla de evaluación de aplicaciones: autoevaluación

La siguiente tabla es una plantilla de evaluación de aplicaciones que contiene resultados

de una autoevaluación de ejemplo.

Indicador de

éxito Objetivos

Estado

(Fecha) Comentarios Problema

¿Qué falta

para

cumplir los

objetivos?

Puntos fuertes:

¿Cuáles son los

puntos fuertes

de la aplicación?

¿Cuál debe ser

el foco de los

elementos

visuales?

La aplicación

consigue ofrecer

a los usuarios

una experiencia

entretenida y

divertida, y la

posibilidad de

competir con

amigos al

deletrear

palabras.

Según lo

previsto n/a n/a

Facilidad de

uso: ¿Qué

deberían saber,

conocer o

mejorar los

usuarios con la

aplicación?

Los usuarios

deberían saber

cómo desplazarse

por el juego,

escribir palabras

y enviarlas.

Problemas

con la

planeación

Los usuarios

no saben

pasar de un

amigo a otro

cuando

juegan a

deletrear.

Hay que

rediseñar la

interfaz de

usuario.

Utilidad: ¿Qué

quieres que los

usuarios valoren

de la aplicación?

¿Qué

comentarios te

gustaría recibir

y cuáles no?

Los usuarios

deberían valorar

esta aplicación

como divertida y

entretenida.

Según lo

previsto

Atractivos:

¿Qué partes de

la aplicación

diseñaste para

hacerla más

atractiva o

popular entre los

usuarios?

Cuando la gente

describa la

aplicación, nos

gustaría ver

palabras como:

útil, agradable,

me mantiene en

contacto con mis

amigos y mi

familia.

Según lo

previsto

Etapa 2: Simulación en voz alta

Introducción

El método de simulación en voz alta consiste en que los usuarios realicen

tareas definidas en la aplicación y las comenten al mismo tiempo. Este

método presenta una clara ventaja con respecto a la autoevaluación, ya

que los comentarios que se reciben provienen de usuarios reales de la

aplicación. El aspecto más importante de este método es que los usuarios

comentarán en voz alta mientras realizan las principales tareas que hayas

establecido.

Tiempo ~30-60 minutos. El tiempo depende de la aplicación y del número de

situaciones clave de la aplicación.

Cuándo

Puedes usar esta evaluación durante la fase conceptual del diseño de la

aplicación, mediante el uso de tramas. También puedes usarla en

cualquier momento del desarrollo, cuando desees comprobar cómo

avanzan tus planes originales.

Quién

Para esta evaluación se necesitan uno o varios usuarios de la aplicación

que hayas identificado como el público de destino. Para definir el público

de destino, hazte preguntas como:

¿Quién usará la aplicación?

¿Qué edad tiene el público?

¿Qué identificadores clave hacen que este público sea único?

Cómo

Enumera las principales experiencias o tareas que deseas que la

aplicación ofrezca a los usuarios. Por ejemplo, en una aplicación

de sopa de letras, una tarea podría ser escribir una palabra y

enviarla.

Escribe esta lista empezando por las tareas más importantes y

terminando por las menos importantes.

Haz que cada usuario complete la lista de tareas por orden de

prioridad en la aplicación. Recuerda a los usuarios hablar en voz

alta mientras completan cada tarea. Consulta los objetivos que

anotaste en la plantilla de planeación mientras los usuarios

evalúan la aplicación. Hazte preguntas como:

o ¿Crees que la aplicación 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 ¿Cómo es su experiencia al realizar las tareas comparada

con los objetivos para la aplicación que me propuse en un

principio?

o ¿En qué estado se encuentra la aplicación y qué hace falta

para asegurarme de que se cumplan los objetivos de la

aplicación?

Usa esta plantilla de evaluación de aplicaciones para anotar los

resultados obtenidos en la simulación en voz alta.

Describe las valoraciones de la experiencia de este modo:

Supera las expectativas Esta valoración indica que la

experiencia del usuario supera tus objetivos.

Según lo previsto Usa esta valoración si todas las experiencias o

tareas están cumpliendo las expectativas del usuario y no hay

ningún problema.

No cumple las expectativas del usuario Usa esta valoración

cuando la experiencia del usuario presente uno o varios problemas

que, si no se resuelven, podrían afectar considerablemente a la

experiencia del usuario.

Problemas con la planeación del producto Usa esta valoración

cuando haya varios problemas de planeación o cuando sea

necesario realizar revisiones importantes al marco general del

diseño.

Plantilla de evaluación de aplicaciones: simulación en voz alta

La siguiente tabla es una plantilla de evaluación de aplicaciones que contiene resultados

de ejemplo de una simulación en voz alta.

Indicador de

éxito Objetivos

Estado

(Fecha) Comentarios Problema

¿Qué es

necesario

para

alcanzar

los

objetivos?

Puntos fuertes:

¿Cuáles son

los puntos

fuertes de la

aplicación?

¿Cuál debería

ser el punto de

foco de los

elementos

visuales?

Mi aplicación

destaca a la hora

de proporcionar

a las personas

una experiencia

divertida y

entretenida

donde compiten

con sus amigos

deletreando

letras.

Según lo

previsto

Los dos

usuarios

evaluados

pudieron ver

claramente las

intenciones de

la aplicación.

n/a n/a

Facilidad de

uso: ¿Qué

deberían saber,

conocer o

mejorar los

usuarios con la

aplicación?

Los usuarios

deberían saber

cómo

desplazarse por

el juego, escribir

palabras y

enviarlas.

Problemas

con la

planeación

Los dos

usuarios

evaluados

tuvieron

problemas

para

desplazarse y

para escribir

palabras.

Hay que

rediseñar la

interfaz de

usuario.

Utilidad: ¿Qué

quieres que los

usuarios

valoren de la

aplicación?

¿Qué

comentarios te

gustaría recibir

y cuáles no?

Los usuarios

deberían valorar

esta aplicación

como divertida y

entretenida.

Según lo

previsto

Ambos se

divirtieron con

la aplicación.

Atractivos:

¿Qué partes de

la aplicación

diseñaste para

hacerla más

atractiva o

popular entre

los usuarios?

Cuando la gente

describa la

aplicación, nos

gustaría ver

palabras como:

útil, agradable,

me mantiene en

contacto con mis

amigos y mi

familia

Según lo

previsto

Ambos

escribieron

palabras que

coincidían

directamente

con nuestros

objetivos.

Evaluación del deseo y la conexión emocional

Windows 8 se diseñó mediante un kit de herramientas que permite conocer las

respuestas sobre las experiencias de los participantes de la investigación. Para ello se

emplean diferenciales semánticos 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 combinación con su

perspectiva personal, contribuyeron a formar estas respuestas.

Esta es una lista de posibles palabras que los participantes de una investigación pueden

usar para describir su experiencia. Elige tres términos que desearías que dijeran los

usuarios y úsalos como referencia para los términos que esperas escuchar cuando los

usuarios describan su experiencia con la aplicación.

Estoy encantado de usar esta aplicación

Estoy seguro de que puedo alcanzar todos mis objetivos con esta aplicación

Quiero incluir esta aplicación en actividades importantes o habituales

Esta aplicación me hace sentir más satisfecho o feliz

Estoy orgulloso de usar esta aplicación

Útil

Funcional

Rápida

Esencial

Agradable

Compatible

Me mantiene al día 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

Cómoda

Limpia

Natural

Interesante

No estoy ilusionado por usar esta aplicación

No estoy seguro de que pueda alcanzar todos mis objetivos con esta aplicación

No quiero incluir esta aplicación en actividades importantes ni habituales

Esta aplicación me hace sentir insatisfecho o frustrado

No estoy orgulloso de usar esta aplicación

No es útil

No funciona

Lenta

No es esencial

No es agradable

Incompatible

No me mantiene al día 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

Caótica

Poco natural

Poco interesante

Evaluación de la marca

Al evaluar la marca, Microsoft usa conjuntos de parejas de opuestos que conforman los

atributos de nuestra marca. Por ejemplo, según 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

específicos para obtener una puntuación alta en ellos. Otras veces nos centramos en una

experiencia que ofrece una puntuación alta en cuanto a deseo en los cuatro valores de

marca.

Si estás buscando métodos para saber si la experiencia de la aplicación es deseable o

está acorde con la marca, céntrate en qué comentarios te gustaría que hicieran los

usuarios novatos y experimentados durante una conversación con un buen amigo. Es

importante que des prioridad a los elementos más importantes. La experiencia completa

debería 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 atención a los aspectos más importantes para ti.

Panel de experiencia del usuario

Plantéate 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. Asegúrate de

que cada escenario que creas tiene unos objetivos claramente definidos. Asegúrate 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 más prioridad en

algunos escenarios. Por ejemplo, es posible que para algunos escenarios no sea

necesario comprender un modelo.

Tu confianza será la máxima cuando los indicadores de facilidad de uso estándar, como

éxito, detección y finalización de tareas, se correspondan con otros canales de datos,

como comentarios del campo, instrumentos, encuestas y grupos de noticias.

Temas relacionados



Directrices de diseño para aplicaciones

de la Tienda Windows (Windows)




Diseño de navegación para aplicaciones de la Tienda Windows

Diseño de comandos para aplicaciones de la Tienda Windows

Diseño de interacción tácil (aplicaciones de la Tienda Windows)

Directrices de publicidad

Personalización de marca de las aplicaciones de la Tienda Windows

Índice de las directrices sobre la experiencia del usuario para aplicaciones de la Tienda

Windows


Diseños de navegación

¿Cómo organizo el contenido de mi

aplicación para que los usuarios se muevan

fácilmente de una página a otra?

¿Qué comandos y otros elementos de interfaz

de usuario puedo usar para que los usuarios

sepan moverse?

Diseños de comandos

¿En qué lugar del Canvas de la aplicación

debo colocar los comandos comunes, como

copiar y pegar?

¿Qué comandos van en la barra de la

aplicación y cuáles en los accesos?

Diseños de interacción táctil

¿Qué gestos o interacciones táctiles debo

usar en mis aplicaciones de la Tienda

Windows?

¿De qué tamaño tienen que ser los objetivos

táctiles y dónde debo situarlos en la pantalla?

¿Qué directrices debo seguir para garantizar

una experiencia táctil del usuario

satisfactoria?















Patrones de publicidad

¿Cómo puedo incluir anuncios sin que afecte

a la experiencia del usuario?

¿Cuáles son los requisitos relacionados con

la publicidad?

¿Cómo puedo elegir un proveedor de

anuncios?

Patrones de personalización de marca

¿Por qué es importante infundir mi marca en

las aplicaciones de la Tienda Windows?

¿Cómo incorporo mi marca en mis

aplicaciones?

Directrices sobre la experiencia del usuario

¿Cómo puedo encontrar directrices de diseño

para cada control y característica de

Windows?

¿Qué directrices debo seguir para garantizar

una experiencia del usuario global

satisfactoria?

Temas relacionados

Escenarios de accesibilidad




http://msdn.microsoft.com/es-es/library/windows/apps/hh700407.aspx#accessibility_scenarios

Diseño de navegación para aplicaciones











Windows


En este artículo

Sistema jerárquico Sistema plano Anatomía de navegación Navegación deslizando rápidamente desde el borde Navegar con las etiquetas de la sección y los menús de encabezado Navegar con filtros, tablas dinámicas, ordenaciones y vistas

Aprende a organizar el contenido de tu aplicación de la Tienda Windows

para que los usuarios puedan navegar de manera fácil e intuitiva. Si usas

los diseños de navegación correctos, podrás limitar los controles que

aparecerán constantemente en la pantalla, como las pestañas. Esto

permite que los usuarios se concentren en el contenido actual.












http://msdn.microsoft.com/es-es/library/windows/apps/hh761500.aspx#hierarchical_system

http://msdn.microsoft.com/es-es/library/windows/apps/hh761500.aspx#flat_system

http://msdn.microsoft.com/es-es/library/windows/apps/hh761500.aspx#navigation_anatomy

http://msdn.microsoft.com/es-es/library/windows/apps/hh761500.aspx#navigating_with_the_edge_swipe

http://msdn.microsoft.com/es-es/library/windows/apps/hh761500.aspx#header_menu_and_section_labels

http://msdn.microsoft.com/es-es/library/windows/apps/hh761500.aspx#filters_pivots_and_sorts


Sistema jerárquico

La mayoría de las aplicaciones de la Tienda Windows

de Windows 8 usarán un sistema de navegación

jerárquico. Este patrón es común y resultará familiar

para los usuarios, pero incluso se ha mejorado mediante

el diseño de navegación de concentrador. Este patrón

permite que las aplicaciones de la Tienda Windows sean

rápidas y fluidas y, al mismo tiempo, fáciles de usar.

Este diseño está indicado para aplicaciones con grandes

colecciones de contenido o muchas secciones de

contenido diferentes que un usuario puede explorar.

Niveles de la jerarquía

La esencia del diseño de concentrador es la separación del contenido en distintas

secciones y niveles de detalle.

Páginas de concentrador

Las páginas de concentrador son el punto de acceso

del usuario a la aplicación. Aquí, el contenido se

muestra en una vista panorámica horizontal

enriquecida que ofrece a los usuarios una vista rápida

de lo que es nuevo y está disponible.

El concentrador consta de distintas categorías de

contenido, cada una de las cuales se asigna a las

páginas de sección de la aplicación. De cada sección

debe emerger contenido o funcionalidades. El

concentrador debe ofrecer una amplia variedad visual,

atraer a los usuarios y llevarlos a distintas partes de la

aplicación.

Páginas de sección

Las páginas de sección son el segundo nivel de una

aplicación. El contenido se puede mostrar de la

manera que mejor represente el escenario y el

contenido que incluye la sección.

La página de sección consta de elementos

individuales, cada uno de ellos con su propia página

de detalles. Las páginas de sección también pueden

aprovechar la agrupación y el diseño de estilo

panorámico.

Páginas de detalles

Las páginas de detalles son el tercer nivel de una

aplicación. Aquí se muestran los detalles de los

elementos individuales, cuyo formato puede variar

enormemente según el tipo de contenido en particular.

La página de detalles consta de detalles de elemento o

funcionalidades. Las páginas de detalles pueden

contener mucha información o un solo objeto, como

una imagen o un vídeo.

Sistema plano

Muchas aplicaciones de la Tienda Windows de

Windows 8 usan un sistema de navegación plano. Este

diseño suele verse en juegos, exploradores o

aplicaciones de creación de documentos, donde el

usuario se desplaza por las páginas, las pestañas o los

modos que residen en el mismo nivel jerárquico.

Este diseño está indicado cuando el escenario principal

implica cambios rápidos entre un pequeño número de

páginas o pestañas.

Páginas de contenido

La esencia del sistema plano es la separación del

contenido en diferentes páginas.

Barra de la aplicación superior

La barra de la aplicación superior es perfecta para

cambiar entre varios contextos. Entre los ejemplos, se

incluyen pestañas, documentos y sesiones de

mensajería 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 rápidamente

desde el borde superior o inferior. Aunque el formato

de los elementos de la barra puede variar, un

tratamiento típico es el uso de una miniatura simple.

Cambiar

A diferencia del sistema jerárquico, en el sistema

plano no suele haber un botón Atrás permanente ni

una pila de navegación, por lo que para moverse por

las páginas se usan vínculos directos dentro del

contenido o de la barra de la aplicación superior.

Puedes elegir incluir otras funcionalidades dentro de

la barra de la aplicación superior, como agregar un

botón ‘+’ para crear una nueva pestaña, una página o

una sesión.

Anatomía de navegación

A continuación se muestra la anatomía de la navegación entre las secciones de una

aplicación, entre los diferentes niveles de la jerarquía y dentro de una única página de la

aplicación.

1. Encabezado y botón Atrás

El encabezado etiqueta la página actual y resulta útil para que el usuario sepa

dónde se encuentra. El botón Atrás permite al usuario volver rápidamente a

donde estaba.

2. Página de concentrador

La página de concentrador obtiene información de distintas áreas de la

aplicación para mostrarla en una pantalla. Ofrece al usuario una vista

panorámica de todo lo que hay disponible en la aplicación.

3. Secciones de contenido o categorías

Se puede aplicar formato a las secciones de contenido para que muestren la

funcionalidad o los elementos que promueven.

4. Zoom semántico: navegar entre los niveles de una jerarquía

El zoom semántico permite examinar una vista y moverse por ella de manera

rápida y fluida, sobre todo si la vista es una larga lista panorámica.

5. Barra de la aplicación superior

La barra de la aplicación superior contiene un acceso transitorio a los controles

de navegación o a otras áreas de la aplicación.

6. Menú de encabezado

El menú de encabezado está disponible en cualquier parte de la aplicación y

permite a los usuarios saltar rápidamente de una sección de la aplicación a otra.

7. Vínculo de página principal

El vínculo de página principal se encuentra en la parte inferior del menú de

encabezado y es una forma rápida de volver a la raíz de la aplicación.

8. Barra de la aplicación inferior

La barra de la aplicación 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 específica. El mejor lugar donde pueden encontrarse es la barra de la

aplicación.

10. Borde

Al deslizar el dedo rápidamente desde el borde de la pantalla, se muestran las

barras de la aplicación y los accesos.

Navegación deslizando rápidamente desde el borde

Los usuarios pueden navegar dentro de las aplicaciones

y por todo el sistema deslizando rápidamente un dedo o

el pulgar desde uno de los bordes. Para usar las

aplicaciones de la Tienda Windows de manera eficaz,

los usuarios querrán aprender la función de cada uno de

los siguientes gestos de deslizamiento rápido desde el

borde.

Al deslizar rápidamente desde el borde inferior o superior de la pantalla, se muestran las barras de la aplicación de navegación y de comandos.

Al deslizar rápidamente desde el lado derecho de la pantalla, aparecen los accesos que exponen los comandos del sistema.

Al deslizar rápidamente desde la izquierda, se recorren las aplicaciones en ejecución actualmente.

Al deslizar rápidamente desde el borde superior al borde inferior de la pantalla, se cierra la aplicación actual.

Al deslizar rápidamente desde el borde superior hacia abajo y hacia el borde izquierdo o derecho, se acopla la aplicación actual a ese lado de la pantalla.

Navegar con las etiquetas de la sección y los menús de encabezado

Usaremos una aplicación de muestra llamada Comida con amigos para ilustrar un

diseño para usar las secciones de contenido, el menú de encabezado y el botón Atrás

para navegar por una aplicación de la Tienda Windows.

El menú de encabezado contiene un vínculo a cada

página de sección (nivel 2), así como un vínculo de

regreso al concentrador (nivel 1). Esto permite que

los usuarios se muevan por la aplicación

rápidamente. El menú aparece en cada nivel y en

cada página de la aplicación, 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 sección para rastrear la página

correspondiente de dicha sección.

Proporciona una indicación visual, como

Ver todos los (x), para indicar a los

usuarios que existen más elementos en

esta sección que los que se muestran en

el concentrador. Con este diseño, se evita

la necesidad de usar un espacio de icono

o colocar un vínculo dentro del

contenido.

Con este diseño, así se vería el diagrama de navegación para el ejemplo Comida con

amigos. Este es un diagrama simplificado que muestra solamente ejemplos canónicos de

elementos de navegación, usados como representativos de todo lo que es interactivo.

Navegar con filtros, tablas dinámicas, ordenaciones y vistas

Otra parte de la navegación en una aplicación consiste en determinar cuándo, dónde y

cómo proporcionar a los usuarios más control sobre el modo en que experimentan el

contenido. Tanto los filtros como las tablas dinámicas, las ordenaciones y los selectores

de visualización deben tenerse en cuenta en el diseño de la aplicación.

Periodo Definición Ejemplo

Filtro

Quitar u ocultar contenido

dentro de un conjunto de

datos, sobre la base de ciertos

criterios.

Cuando buscas un juego para jugar,

probablemente eliges ver solo aquellos juegos

dentro de la categoría "Aventura".

Tabla

dinámica

Reorganizar el contenido

dentro de un conjunto de

datos, sobre la base de ciertos

criterios.

Cuando examinas una colección musical,

probablemente quieres organizar las canciones

por intérprete, álbum o género.

Ordenación

Cambiar el orden en que se

muestra el contenido dentro

de un conjunto de datos.

Cuando buscas un artículo para leer en una

aplicación de noticias, probablemente quieres ver

enumerados en primer lugar los artículos más

recientes.

Vista Cambiar el estilo o método en

que se muestra el contenido.

Cuando buscas un lugar para comer en una

aplicación de búsqueda de restaurantes,

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 dinámicas u ordenar cuando la

búsqueda de un elemento es una tarea principal, como en una colección o página de

resultados de búsqueda.

Los controles deben ir dentro de la barra de la aplicación, si la aplicación se centra en la

búsqueda de contenido, como una aplicación de compras o revista.

Ordenaciones y filtros de página

Para filtrar y ordenar contenido dentro de una vista de colección, pueden colocarse

comandos de ordenación y filtro en una fila entre el encabezado y el contenido. En el

siguiente ejemplo, la vista se filtra para mostrar solamente episodios de televisión

ordenados y agrupados por serie.

En este ejemplo para una aplicación de mercado, controles de selección desplegables

filtran el contenido para la vista actual. A medida que se muestran los menús, el filtro

actualmente activo aparece seleccionado en la lista desplegable.

La barra de la aplicación superior

La barra de la aplicación superior se usa principalmente para navegar a secciones o

páginas de una aplicación que usan el diseño de navegación plano. Esta barra, que en

ocasiones se llama barra de la aplicación de navegación, también puede usarse junto con

el patrón jerárquico, en lugar del menú de encabezado, como medio para proporcionar

controles de navegación global. La barra de la aplicación superior debe mostrarse en

cada página y en todos los niveles de la aplicación para proporcionar a los usuarios un

modo conveniente y coherente de navegar.

En este ejemplo de aplicación de finanzas, el concentrador (L1) promueve secciones de

la aplicación (Titulares, Lista de seguimiento) al concentrador, y los encabezados de

sección se vinculan con ellos. En el nivel de sección (L2), cuando se invoca la barra de

la aplicación superior deslizando el dedo rápidamente desde el borde superior o inferior,

el usuario tiene acceso a la raíz y todas las demás secciones de la aplicación.

Cambio de vista de la barra de la aplicación

La barra de la aplicación se usa principalmente como una superficie de comandos, pero

también puede usarse para modificar el modo en que se ve el contenido. El cambio de

vista, la creación de tablas dinámicas, el filtrado y la ordenación pueden llevarse a cabo

con la barra de la aplicación. No uses la barra de la aplicación para navegar desde un

lugar de la aplicación a otro. Todos los elementos de la barra de la aplicación deben

actuar en el contenido que se encuentra actualmente en la vista.

En este ejemplo de aplicación de calendario, el valor predeterminado de la vista es una

vista de mes, para la que se optimizó esta aplicación. Los comandos para elegir otras

vistas de calendario se encuentran en la barra de la aplicación, y se obtiene acceso a

ellos deslizando rápidamente desde el borde superior o inferior. Otros comandos, como

realizar una cita nueva, pueden aparecer también en la barra.

En la página Todos los restaurantes del ejemplo Comida con amigos, están disponibles

las opciones para ver los elementos como una lista o un mapa, así como también para

filtrar y ordenar la vista sobre la base de ciertos criterios, como costo, ubicación y

clasificación. Aquí, las opciones de filtrado se exponen como controles en un menú de

control flotante.

Diseño de comandos para aplicaciones de

la Tienda Windows (Windows)










Windows


En este artículo

Usar el Canvas Usar los botones de acceso Usar la barra de la aplicación Usar menús contextuales Colocación de los comandos

Tienes a tu disposición varias superficies para colocar en ella comandos y controles en

la aplicación de la Tienda Windows, como la ventana de la aplicación, las ventanas

emergentes, los cuadros de diálogo y las barras. Elegir la superficie correcta en el

momento adecuado puede suponer la diferencia entre que una aplicación sea incómoda

o vaya como la seda.

Para obtener una versión que puedes descargar de este tema, ve aquí.

Usar el Canvas












http://msdn.microsoft.com/es-es/library/windows/apps/hh761499.aspx#window

http://msdn.microsoft.com/es-es/library/windows/apps/hh761499.aspx#usar_los_botones_de_acceso

http://msdn.microsoft.com/es-es/library/windows/apps/hh761499.aspx#appbar

http://msdn.microsoft.com/es-es/library/windows/apps/hh761499.aspx#contextmenu

http://msdn.microsoft.com/es-es/library/windows/apps/hh761499.aspx#colocaci_n_de_los_comandos


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 aplicación, en lugar de agregar comandos que actúen sobre el

contenido.

Por ejemplo, en una aplicación de búsqueda de restaurantes, la búsqueda y la

visualización de restaurantes debería realizarse sobre el Canvas al pulsar, realizar un

movimiento panorámico o seleccionar contenido.

Usar los botones de acceso

Aprovecha los contratos de botones de acceso y de aplicación para habilitar los

comandos de aplicación comunes. Evita duplicar la funcionalidad de contrato de

aplicación en el Canvas de la aplicación o en la barra de la aplicación.

Buscar: permite que los usuarios busquen rápidamente el contenido de la aplicación desde cualquier parte del sistema, incluso desde otras aplicaciones. Y viceversa.

Compartir: permite que los usuarios compartan contenido de la aplicación con otras personas o aplicaciones, y reciban contenido compartido.

Dispositivos: permite que los usuarios disfruten de la transmisión de audio, vídeo o imágenes desde la aplicación a otros dispositivos de la red doméstica.

Configuración: consolida toda la configuración en un solo lugar y permite que los usuarios configuren la aplicación mediante un mecanismo común con el que ya están familiarizados.

Usar la barra de la aplicación

La barra de la aplicación te permite mostrar comandos a los usuarios a petición. La

barra de la aplicación muestra comandos relevantes para el contexto del usuario,

normalmente la página actual o la selección actual.

La barra de la aplicación no está visible de manera predeterminada. Aparece cuando un

usuario desliza rápidamente un dedo desde la parte superior o inferior de la pantalla. La

barra de la aplicación también puede mostrarse mediante programación al seleccionar el

objeto o hacer clic en él.

La barra de la aplicación es transitoria y desaparece después de que el usuario pulse un

comando, pulse el Canvas de la aplicación o repita el gesto de deslizar el dedo

rápidamente desde el borde. Si es necesario, puedes mantener visible la barra de la

aplicación para facilitar los escenarios de selección múltiple.

Usar menús contextuales

Puedes usar los menús 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 página web).

El sistema ofrece aplicaciones con menús contextuales predeterminados para el texto y

los hipervínculos. Para el texto, el menú contextual predeterminado muestra los

comandos del Portapapeles. Para los hipervínculos, el menú predeterminado muestra

comandos para copiar el vínculo y para abrirlo.

Colocación de los comandos

Vamos a usar una aplicación ficticia de restaurantes para ilustrar el proceso de

organización de los comandos en la barra de la aplicación, centrándonos en un escenario

de exploración.

Organizar comandos

El primer paso es identificar todos los comandos de la aplicación y organizarlos por

escenario o por ubicación. Esta es la lista de los comandos que se usan con más

frecuencia cuando se examinan restaurantes.

¿Qué comandos deben aparecer en toda la aplicación? ¿Qué comandos deben mostrarse solo en ciertas páginas? ¿Qué comandos deben usar botones de acción o ir en la configuración?

Crear conjuntos de comandos

Ahora, agrupamos los comandos en conjuntos. La barra de la aplicación muestra

conjuntos de comandos como una unidad, con un divisor entre los conjuntos.

¿Qué comandos están relacionados según su funcionalidad? ¿Qué comandos alternan distintos tipos de vista? ¿Qué comandos deben aparecer cuando se realiza una selección?

Comandos de vista Comandos de filtrar Comandos de ordenar

Comandos de seleccionar Comandos de la vista de mapa Comandos de nuevo elemento

Crear menús

Después, piensa si los conjuntos de comandos estarían mejor en un menú de comandos.

¿La barra de la aplicación está demasiado abarrotada o hay demasiados comandos por incluir?

¿Hay algún conjunto que podría tener etiquetas más largas o controles interactivos?

Los menús te permiten presentar más opciones

en menos espacio e incluir controles

interactivos.

En este ejemplo, el menú Ordenar muestra una

lista simple que facilita la elección de las

opciones. El menú Filtrar muestra un conjunto

de controles que permite a los usuarios filtrar

los elementos por criterios más complejos.

Colocar comandos en la barra de la aplicación

Existen diferentes maneras de colocar los comandos en la barra de la aplicación y puede

haber variaciones en determinadas circunstancias. Estas son las reglas de colocación de

comandos que debes seguir siempre que sea posible.

Previsibilidad En la medida de lo posible, usa una selección de ubicación coherente de

los comandos y las interacciones en todas las vistas de tu aplicación.

Ergonomía Valora cómo la selección de ubicación de comandos específicos puede

mejorar la velocidad o facilidad con la que se puede actuar en un comando.

Estética Limita el número de comandos para evitar que la barra de la aplicación parezca

complicada. Elige iconos que sean fáciles 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 aplicación. Si hay pocos comandos, la barra de la aplicación podría

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 aplicación y hacer que los comandos sean

ergonómicamente más 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 selección

Los comandos que aparecen cuando el usuario realiza una selección se sitúan en

el extremo izquierdo, desplazando los comandos que pudiera haber ahí. Esto

hace que los comandos de selección sean más notorios y fáciles de acceder.

Aquí, el conjunto de comandos de vista desplaza el resto a la derecha para

hacerse sitio.

Usar una colocación estándar para los controles comunes

Algunos comandos son comunes y aparecen en muchas aplicaciones. Para crear

coherencia e infundir confianza, siga estas directrices para decidir dónde colocar los

comandos en la barra de la aplicación.

Comandos de selección Los comandos relacionados con la selección siempre se

muestran en el extremo izquierdo, ya sean comandos contextuales que aparecen al

seleccionar o comandos que afectan a la selección.

En este ejemplo, antes de que los usuarios seleccione algo, se muestra un comando

"Seleccionar todo" a la izquierda. Después de que los usuarios seleccionen algo, se

muestran los demás comandos de selección a la izquierda.

Comando de nuevo elemento Si tu aplicación 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" tendrán una selección de

ubicación coherente y serán fácilmente accesible con los pulgares independientemente

de la aplicación o contexto específico.

En este ejemplo, el comando "Nueva crítica" permite al usuario crear una nueva crítica

de un restaurante. Otros comandos relacionados con "Nueva crítica" se colocan junto a

él a la izquierda.

El glifo + solo debe usarse para representar el comando "Nuevo" y no debe aparecer en

ningún otro lugar de la barra de la aplicación.

Comandos de eliminar Usa Eliminar/Nuevo si tu aplicación

administra entidades individuales que podrían persistir fuera de

tu aplicación, por ejemplo, una aplicación de correo o de cámara.

Eliminar/Nuevo deben aparecer siempre en este orden.

Comandos de quitar Usa Quitar/Agregar si tu aplicación

administra una lista, por ejemplo, lista de tareas pendientes, lista

de ciudades en una aplicación de información meteorológica 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 acción

destructiva en todos los elementos posibles. Usa la etiqueta del

comando y sé explícito acerca de la acción que realizará el

comando, por ejemplo, "Borrar selección".

Diseño de interacción tácil (aplicaciones

de la Tienda Windows) (Windows)










Windows


En este artículo

Guía táctil

Lenguaje táctil de Windows 8

Postura táctil de Windows 8

Objetivos táctiles de Windows 8

Accesibilidad e interacciones táctiles

Temas relacionados

En este tema se describen las interacciones táctiles para Windows 8 y se ofrecen

directrices para diseñar interacciones táctiles adecuadas. Para obtener una versión

descargable de este tema, ve aquí.

Guía táctil

1. Usa el lenguaje táctil de Windows 8.

Windows 8 proporciona un escueto conjunto de interacciones táctiles que se usa

de forma coherente en todo el sistema. Aplicar este lenguaje de forma coherente

hace que la aplicación resulte familiar a los usuarios. Al hacer que la aplicación

sea más fácil de aprender y de usar, aumenta la confianza del usuario.












http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx#touch_guidance

http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx#touch_language

http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx#touch_posture

http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx#touch_targets

http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx#accesibilidad_e_interacciones_t_ctiles



http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx#touch_language

2. Usa los dedos para lo que valen.

Un mouse y un lápiz son precisos, pero los dedos no, y los objetivos pequeños

requieren precisión. Usa objetivos grandes que permitan la manipulación directa

y ofrezcan datos de interacción táctil enriquecidos. Deslizar el dedo rápidamente

hacia abajo en un elemento grande es fácil y rápido porque todo el elemento es

un objetivo de selección.

3. Examina el contenido mediante gestos táctiles.

El zoom semántico y el movimiento panorámico hacen que la navegación sea

rápida y fluida. En lugar de colocar contenido en varias pestaña o páginas, usa

Canvass amplios que permitan realizar movimientos panorámicos y usar el

zoom semántico.

4. Proporciona respuesta.

Aumenta la confianza del usuario ofreciendo información visual inmediata

siempre que se toque la pantalla. Todos los elementos interactivos deben

reaccionar cambiando de color, de tamaño o desplazándose. Los elementos que

no son interactivos deben mostrar elementos visuales táctiles 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 táctiles deberían comportarse de forma similar, deberían ser

reversibles. Ofrece información visual para indicar qué sucederá cuando el

usuario levante el dedo. De esta manera, la aplicación se podrá explorar de

forma segura mediante gestos táctiles.

7. Permite cualquier cantidad de dedos.

Las personas a menudo tocan con más de un dedo y ni siquiera se dan cuenta.

Por eso, las interacciones táctiles no deberían ser muy diferentes según el

número de dedos que toquen la pantalla. Al igual que en el mundo real, deslizar

algo con uno o tres dedos no debería suponer ninguna diferencia.

8. No limites el tiempo de las interacciones.

Las interacciones que requieren gestos compuestos, como la doble pulsación 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 difíciles de temporizar correctamente.

Lenguaje táctil de Windows 8

Esta lista describe los términos estándares relacionados con los elementos táctiles que se

usan en Windows 8.

Importante Para evitar que los usuarios se confundan, no crees interacciones

personalizadas que dupliquen o redefinan las interacciones estándares existentes.

Mantener

presionado para

aprender

Esta interacción táctil hace que se

muestre información detallada o

elementos visuales didácticos (por

ejemplo, información sobre

herramientas o un menú

contextual) sin una confirmación

de una acción. Todo lo que se

muestre de esta manera no debe

impedir que los usuarios realicen

movimientos panorámicos si

comienzan a deslizar el dedo.

Pulsar para

acción principal

Al pulsar sobre un elemento se

invoca la acción principal, por

ejemplo, se inicia una aplicación o

se ejecuta un comando.

Deslizar para

movimiento

panorámico

El deslizamiento se utiliza

principalmente para interacciones

panorámicas, pero también se

puede usar para mover, dibujar o

escribir. El deslizamiento también

puede usarse para dirigirse a

elementos pequeños y muy

próximos entre sí mediante

arrastre (deslizar el dedo sobre los

objetos relacionados, por ejemplo,

botones de radio).

Deslizar los

dedos

rápidamente

para

seleccionar,

ordenar y mover

Cuando se desliza el dedo una

distancia pequeña, perpendicular a

la dirección de panorámica, se

selecciona el objeto en una lista o

cuadrícula (controles ListView y

GridLayout). Muestra la AppBar

con los comandos relevantes

cuando se seleccionan objetos.

Zoom con

gestos de

reducir y

ampliar

Aunque los gestos de reducir y

ampliar se suelen utilizar para

cambiar de tamaño, también

permiten ir al principio, al final o a

cualquier parte del contenido con

zoom semántico. Un control

SemanticZoom proporciona una

vista alejada para mostrar grupos

de elementos y formas rápidas de

moverse en ellos.





Voltear para

girar

Al girar con uno o más dedos, el

objeto gira. Al girar el dispositivo,

gira toda la pantalla.

Deslizar los

dedos

rápidamente

desde el borde

para los

comandos de la

aplicación

Los comandos de la aplicación

aparecen al deslizar el dedo

rápidamente desde el borde

inferior o superior de la pantalla.

Usa la AppBar para mostrar los

comandos de la aplicación.

Deslizar los

dedos

rápidamente

desde el borde

para los

comandos del

sistema

Al deslizar rápidamente desde el

lado derecho de la pantalla,

aparecen los botones de acceso

que exponen los comandos del

sistema.

Al deslizar rápidamente desde la

izquierda, se recorren las

aplicaciones en ejecución

actualmente.


borde superior al borde inferior de

la pantalla, se cierra la aplicación

actual.


borde superior hacia abajo y hacia

el borde izquierdo o derecho, se

acopla la aplicación 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 simultáneamente y con

cualquier cantidad de puntos táctiles.




Postura táctil de Windows 8

El diseño táctil es mucho más que diseñar lo que aparece en pantalla. Requiere diseñar

en función de cómo se sostenga el dispositivo (sujeción).

Normalmente, los usuarios tienen varias maneras de sostener una tableta.

La tarea actual y cómo se presente suele determinar qué sujeción se usa. Sin embargo, el

entorno inmediato y la comodidad física también afectan el tiempo que se usa una

sujeción y con cuánta frecuencia se cambia.

Intenta optimizar tu aplicación para diferentes sujeciones. Pero, si una interacción tiende

de forma natural a una forma de sostener específica, optimízala para dicha forma.

Áreas de interacción: 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 más fácil

de ver que el contenido de la mitad inferior, que suele ignorarse o quedar tapado por las

manos.

Cuatro sujeciones de uso común: si bien existen muchas formas de sostener una

tableta, estas cuatro sujeciones son las más utilizadas.

Sujeción Sujeción e interacción Consideraciones de diseño

Sujeción con una mano

con interacción ligera a

media con una mano

Los bordes derecho o

inferior ofrecen una

interacción rápida.

La mano y la muñeca

podrían tapar la esquina

inferior derecha.

El alcance limitado hace

que el tacto sea más

preciso.

Lectura, exploración,

correo electrónico y

escritura ligera.

Sujeción con dos manos

con interacción ligera a

media con los pulgares

Las esquinas inferiores

izquierda y derecha

ofrecen interacción

rápida.

Los pulgares anclados

aumentan la precisión del

tacto.

Es difícil 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.

El dispositivo descansa

sobre la mesa o sobre las

piernas con interacción

ligera a media con ambas

manos

La parte inferior de la

pantalla ofrece


Las manos y las muñecas

podrían tapar las esquinas

inferiores.

La menor necesidad de

alcance hace que el tacto

sea más preciso.


correo electrónico y

escritura intensa.

El dispositivo descansa

sobre la mesa o

plataforma con o sin

interacción

La parte inferior de la

pantalla ofrece


Si se toca la parte superior

de la pantalla se tapa el

contenido.

Al tocar la parte superior

de la pantalla podría

golpear un dispositivo

acoplado y

desestabilizarlo.

La interacción a cierta

distancia disminuye la

capacidad de lectura y la

precisión.

Aumenta el tamaño del

objetivo para mejorar la

capacidad de lectura y la

precisión.

Ver una película,

escuchar música.

Objetivos táctiles de Windows 8

Tamaño frente a eficiencia: el tamaño del objetivo influye en la tasa de errores

No hay un tamaño perfecto para los objetivos táctiles. Los diferentes tamaños sirven

para diferentes situaciones. Las acciones con consecuencias graves (eliminar o cerrar) o

las acciones de uso frecuente deben utilizar objetivos táctiles grandes. Las acciones de

poco uso con consecuencias leves pueden usar objetivos pequeños.

¿Dedos grandes?

A menudo, las personas se culpan por tener dedos

grandes. Pero hasta los dedos de un bebé son más

anchos que la mayoría de los objetivos táctiles.

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 tamaño de objetivo: estas son algunas directrices para decidir el

tamaño de tus objetivos táctiles.

7x7 mm: tamaño mínimo recomendado

7x7 mm es un buen tamaño mínimo 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 tamaño del objetivo.

Cuando la precisión 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 más 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 mayoría de las personas son diestras

La mayoría 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 más fáciles de

tocar, y colocarlos en el lado derecho evita obstruir el área principal de la pantalla.

Accesibilidad e interacciones táctiles

Cuando planees la interfaz de usuario y las interacciones admitidas por la aplicación, ten

en cuenta la amplia gama de capacidades, limitaciones y preferencias de los usuarios.

Seguir los principios de un diseño accesible desde el comienzo ayuda a que la

aplicación sea accesible para el público más amplio posible. Para obtener más

información sobre cómo planear un diseño que ofrezca accesibilidad, consulta el tema

sobre diseño de accesibilidad.

Temas relacionados

Patrones de diseño de la experiencia del usuario

Responder a la interacción del usuario




Directrices de publicidad (Windows)










Windows


La publicidad es una opción 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 más información acerca de la publicidad en

general, descarga el documento de información básica sobre anuncios.

Diseño de una buena experiencia de usuario de publicidad

Sigue estas directrices cuando definas el diseño de tu aplicación para los anuncios.

Integra anuncios en el diseño Crea una experiencia consistente mediante la

integración de publicidad en el diseño original y la distribución del contenido en

toda la aplicación. Ten en cuenta el espacio que deberás asignar en el nivel

superior en comparación con los niveles hoja.

Elige formatos de anuncios complementarios Elige formatos de anuncios que

tengan sentido en la aplicación. Hay muchos formatos de anuncios disponibles,

pero no todos ellos llamarán la atención del usuario ni proporcionarán una

experiencia perfecta.

Elige una una ubicación y un tamaño del anuncio que sean

complementarios Selecciona ubicaciones y tamaños del anuncio que

correspondan con el diseño de la aplicación, se adhieran a los estándares del

sector y que estén muy solicitados por los posibles anunciantes. Por ejemplo, si

vas a usar el diseño de cuadrícula, considera el uso de un tamaño de anuncio de

250x250 para que los anuncios quepan en la cuadrícula. Si los anuncios no

caben, podrías crear un clúster aparte.

Define el diseño para todos los estados de visualización Considera cómo debe

cambiar el estado real del anuncio de acuerdo con el estado de visualización

(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

aplicación para los posibles anunciantes interesados en un público específico.

Usa métricas bien establecidas Considera las dos métricas principales para el

rendimiento, CPM (costo por mil impresiones) y tasa de relleno (cuántas

impresiones produce un anuncio) cuando habilites la publicidad. Mucha gente











http://msdn.microsoft.com/es-es/library/windows/apps/jj649139.aspx#feedback

http://advertising.microsoft.com/WWDocs/User/en-us/ForAdvertisers/Ads-in-Apps-101.pdf

http://www.iab.net/

http://www.iab.net/

piensa que la mejor solución de rendimiento consiste en la fórmula CPM * tasa

de relleno.

A continuación indicamos un par de ejemplos de colocación de publicidad diseñados

para una distribución y un estado de visualización específicos de la aplicación.

Diseño de

cuadrícula 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 certificación para una aplicación de Windows 8. El cumplimiento de estos

requisitos te ayuda a incorporar anuncios en tu aplicación si dañar la experiencia del

usuario.

La aplicación no debe mostrar solo anuncios. Si la aplicación incluye o muestra

anuncios, debe proporcionar funcionalidades adicionales más allá de los

anuncios.


Los anuncios en las aplicaciones deben cumplir con nuestras directivas de

contenidos. Nuestras directivas de contenidos se describen en la sección 5 de los

Requisitos de certificación para una aplicación de Windows 8. Las aplicaciones

de la Tienda Windows son apropiadas para un público global.

La aplicación no debe usar sus iconos, notificaciones, barra de la aplicación ni la

interacción de hacer pasar desde el borde para mostrar anuncios.

La aplicación debe permitir que los usuarios completen las tareas primarias en la

aplicación sin redirigirlos a un sitio web u otra aplicación. Las aplicaciones

deben hacer más que abrir un sitio web o imitar el comportamiento de un sitio

web.

Los anuncios no deben ejecutar un código de programa que no provenga del

proveedor del anuncio.

Elección de un proveedor de anuncios

Hazte estas preguntas básicas que te ayudarán a encontrar el mejor proveedor de

anuncios para tu aplicación:

¿El proveedor de anuncios cumple con los requisitos de certificación de la

Tienda Windows?

¿El proveedor de anuncios ofrece una calidad de anuncios acorde con la calidad

de la aplicación?

¿El proveedor de anuncios admite comportamientos adecuados para Windows 8?




Personalización de marca de las


(Windows)










Windows


En este artículo

Por qué es importante infundir tu marca en las aplicaciones de la Tienda Windows Cómo 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 diseñadores

y desarrolladores de aplicaciones pueden usar para incorporar la personalización 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 diseñan 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 expresión de la marca en tu aplicación de la

Tienda Windows la diferencia de todas las demás aplicaciones. Analicemos un ejemplo.

Aquí tenemos un ejemplo de una aplicación de la Tienda Windows antes de la

personalización de marca:












http://msdn.microsoft.com/es-es/library/windows/apps/hh465418.aspx#communicating_your_brand

http://msdn.microsoft.com/es-es/library/windows/apps/hh465418.aspx#how_to_incorporate_your_brand

http://msdn.microsoft.com/es-es/library/windows/apps/hh465418.aspx#examples_that_evoke_unique_brands


El ejemplo de Contoso Bakery ilustra la posible apariencia de una aplicación para una

panadería si siguiera los principios del diseño Microsoft. Este es un buen ejemplo de destaque

del contenido.

Esta es la misma aplicación de ejemplo después de la personalización de marca:

En esta versión de la aplicación de Contoso Bakery, algunos cambios evidentes hacen que esta

aplicación sea más atractiva. Al incorporar más de la marca de la panadería, el contenido de la

aplicación se presenta de una manera más persuasiva, y la sensación general de la aplicación

evoca la esencia de una panadería.

Cómo incorporar tu marca en aplicaciones de la Tienda Windows

La expresión de tu marca se logra a través de un conjunto de elementos visuales. Por

ejemplo, un estilo fotográfico, un diseño, gráficos y una paleta de colores personales, en

conjunto permiten crear una marca reconocible y recurrente, a través de una variedad de

medios, como difusión, prensa, Internet y aplicaciones de la Tienda Windows.

Considera a estos elementos visuales como si fueran las perillas y discos que mueves a

través de código para crear una apariencia única en tu aplicación de la Tienda Windows.

Elemento

visual Descripción

Colores 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 aplicación proviene de tu negocio.

Gráficos

Puedes usar gráficos para reforzar tu marca agregando carácter a la

presentación del contenido en tu aplicación. Los gráficos deben usarse con

moderación en el diseño de tu aplicación. Un uso excesivo de los elementos

gráficos corre el riesgo de interferir con el contenido y percibirse como nada

más que una decoración.

Imágenes

El uso de ilustraciones y fotografías en la aplicación de la Tienda Windows

debe reflejar tu marca. Dado que la mayoría de las marcas establecidas

tienen una paleta de colores y un tipo de letra definidos, también usan un

estilo específico de imágenes.

Cuadrícula

El sistema de cuadrícula de las aplicación de la Tienda Windows permite

lograr una unidad visual a través de tu implementación de elementos

visuales. La cuadrícula alinea la experiencia de usuario de tu aplicación con

personalización de marca para que funcione en el resto de Windows.

Diseño

Un diseño es la composición que se origina en la disposición de los

elementos visuales en una página. El diseño de cada una de las páginas de

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.

Logo Usa un logotipo en la aplicación de la Tienda Windows para facilitar la

identificación rápida de tu aplicación, así como el reconocimiento público de

tu marca.

Tipografía El uso de tipos de letra correctamente diseñados constituye una parte clave

de las aplicaciones de la Tienda Windows. Su elección correcta puede tener

el mismo impacto sobre tu marca que el color, el logotipo y el diseño.

Ejemplos que evocan a marcas exclusivas

Aquí tenemos algunos ejemplos que muestran cómo cada elemento visual ayuda a

evocar diferentes emociones y sentimientos. Las descripciones de cada elemento visual

proporcionan detalles específicos sobre cómo se ha creado el diseño.

Contoso Downtown Café

Contoso Downtown Café es una marca conocida por ser auténtica. Ostenta platos de cocina

cacera y bebidas artesanales. En este ejemplo, el color, la cuadrícula, el diseño y la tipografía

son los elementos visuales usados principalmente para evocar la marca.

Colores La fotografía a todo color agrega una matriz de colores a la

aplicación. Para evitar competencia entre la paleta de colores y la

fotografía, se usan el negro y el amarillo como colores de énfasis. Desde

la perspectiva de la personalidad, el negro y el amarillo también son

colores que se encuentran en entornos urbanos, como los letreros de las

calles y las indicaciones en la calzada.

Cuadrícula En este ejemplo, el contenido intencionalmente rompe con

la cuadrícula. El contenido de la carta es clave para esta marca. Por ello,

el margen superior se reduce para proporcionar más espacio al menú. El

margen izquierdo se ajusta para que el nombre de la compañía, el texto

introductorio y la información de ubicación queden más centrados, lo

que le da espacio y amplitud al contenido. Todas estas desviaciones se

aplicaron coherentemente y se trasladan a todas las otras páginas de

esta aplicación.

Diseño El diseño está destinado a dar la apariencia de una carta porque

es lo que la conforma lo que trae al público nuevamente a este café.

Como sus sándwiches y demás artículos de la carta, el diseño debe tener

una apariencia más 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 alineación de texto a la izquierda.

Tipografía Copperplate Gothic Bold es el tipo de letra primaria usado en

este diseño, que le da al nombre de la compañía 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 acompañar. 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 diseño y la fotografía son los elementos visuales que se usan para evocar la

marca.

Colores Una paleta de colores de tan solo dos, marrón y rosa, es

suficiente para que los clientes piensen en una panadería. Marrón es el

color primario, que conjura imágenes de chocolate, y el rosa es un color

de énfasis, que evoca pasteles y galletas glaseadas. Además de los

sabores asociados con ambos colores, tienen un objetivo para la marca.

El marrón es lo suficientemente neutro para proporcionar un fondo rico

para que se destaque una fotografía a todo color, y el rosa es lo

suficientemente brillante para destacar partes específicas del contenido.

Imágenes La fotografía es el foco de este diseño. 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

imágenes de los artículos de panadería aclaran de qué se trata esta

marca. Además, se usan para definir las categorías de contenido.

Diseño Si se compara con los diseños de aplicación de la Tienda

Windows estándar, este ejemplo tiene una apariencia diferente. La

diferencia más clara es la ausencia de iconos cuadrados. Los iconos y

cuadrícula todavía existen, pero se ha aplicado estilo a las imágenes para

imitar los artículos que probablemente se encuentren en una panadería

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

ubicación. Esta marca tiene el respaldo de un equipo de excelentes chefs y una flota de

camiones, todos destinados al público que se encuentra en constante movimiento. En este

ejemplo, los gráficos, la cuadrícula y el logotipo son elementos visuales que se usan para

evocar la marca.

Gráficos Las opciones del menú siguen siendo el foco y no están

abarrotadas por un uso excesivo de gráficos. No obstante, los gráficos sí

juegan un papel en el establecimiento de esta marca. Por ejemplo, las

"estrellas" implican un sistema de calificación de los clientes, el color y

las formas nos traen a la memoria los letreros de las calles y la

información basada en ubicación se encuentra sobre un cuadro oscuro

que incluye un gráfico de una calle asfaltada.

Cuadrícula La cuadrícula estándar ancla todos los aspectos de este

diseño e imita una estructura similar a lo que vería en una vista aérea de

un mapa de las calles de la ciudad. Para desafiar esta presentación

ordenada, gráficos de contenido superpuesto y sin bordes diferencian

este ejemplo. La presentación general del contenido es llamativa y

directa como medio para atraer a personas que viven en constante

movimiento y necesitan tomar decisiones rápidas.

Logotipo No se usa un logotipo de compañía en este ejemplo. El

nombre de la compañía aparece en texto, y donde debería ir el logotipo

en este ejemplo, vemos por primera vez el nombre de la compañía

incrustado en la composición general. El logotipo o el nombre no está

simplemente alineado en el borde superior izquierdo.

Colores Los colores cálidos cobre, hueso, gris oscuro le dan a este

diseño un efecto exquisito. La paleta cálida evoca algunos de los mismos

colores que encontrarías en el pan, una sopa o postres caseros.

Temas relacionados

Creación de aplicaciones de la Tienda Windows sobresalientes

Directrices sobre la experiencia del usuario


Diseño de navegación

Descripción de la silueta de Windows 8

Directrices para diseños

Directrices para texto y tipografía








Índice de las directrices sobre la

experiencia del usuario para aplicaciones











Windows


En este artículo

Diseño de Microsoft Interacción táctil Ajuste y escalado Contratos, accesos y funcionalidades Iconos y notificaciones Controles Perfiles móviles en la nube Conceptos básicos












http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#_dise_o_de_microsoft_

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#interacci_n_t_ctil

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#ajuste_y_escalado

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#contratos__accesos_y_funcionalidades

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#iconos_y_notificaciones

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#ui_controls

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#perfiles_m_viles_en_la_nube

http://msdn.microsoft.com/es-es/library/windows/apps/hh465424.aspx#make_your_app_great

Usa este índice para encontrar rápidamente las directrices sobre la experiencia del

usuario que pueden ayudarte a crear una gran aplicación de la Tienda Windows. Si aún

no lo has hecho, deberías empezar por leer Creación de aplicaciones de la Tienda

Windows sobresalientes y Planear aplicaciones de la Tienda Windows.

Diseño de Microsoft

Las aplicaciones de la Tienda Windows son el

núcleo 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.

Diseño y navegación: piensa cómo afecta el diseño de la interfaz de usuario a la manera en que los usuarios navegan por la aplicación. Consulta Patrones de diseño de navegación.

Diseño y comandos: coloca los comandos de forma coherente para infundir confianza y facilitar la interacción del usuario. Consulta los temas sobre los patrones de diseño de comandos y sobre cómo diseñar tu interfaz de usuario.

Distribución y diseño de página: Usa la cuadrícula como ayuda para diseñar las páginas de la aplicación a fin de que se adhieran a la silueta de Windows 8.

o Diseñar una página de la aplicación o Elección de un diseño para aplicaciones JavaScript

Animaciones: Unas animaciones intencionadas y bien diseñadas 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 más información, consulta nuestras instrucciones sobre estas animaciones:

o Arrastrar y colocar o Animaciones en el borde o Animaciones de listas o Animaciones de transición o Animaciones de interfaz de usuario transitorias o Animaciones de interfaz de usuario

Tipografía: consulta las directrices para texto y tipografía.



















Interacción táctil

Usa las interacciones táctiles 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 diseño de la

interacción táctil.

Guía general de interacción del usuario: Incorpora un conjunto coherente y eficaz de interacciones de usuario. Consulta las directrices para interacción del usuario.

Selección táctil del destino: decide el tamaño y la ubicación de tus objetivos táctiles. Consulta las directrices para la selección táctil del destino.

Información visual: ofrece información visual clara sobre las acciones del usuario. Consulta las directrices para información visual.

Zoom semántico: 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 semántico para la interacción del usuario y consulta más adelante nuestro control SemanticZoom.

Deslizar rápidamente desde el borde y deslizar transversalmente: usa esta interacción estándar para seleccionar elementos de una lista o cuadrícula. Consulta las directrices para deslizamiento transversal.

Zoom óptico y cambio de tamaño: deja que los usuarios acerquen o alejen el contenido para verlo mejor. Consulta las directrices para zoom óptico y cambio de tamaño.

Movimiento panorámico: ayuda a los usuarios a navegar por la aplicación con movimiento panorámico. Consulta las directrices para movimiento panorámico.

Rotación: Proporciona información sobre la respuesta cuando los usuarios utilicen gestos táctiles para girar el contenido móvil de la pantalla. Consulta las directrices para rotación.

Seleccionar texto e imágenes: haz que los usuarios se sientan seguros cuando seleccionan texto e imágenes. Consulta las directrices para seleccionar texto e imágenes.

Interacciones de mouse: Crea una gran experiencia de mouse para los usuarios sin pantallas táctiles. Consulta Directrices para interacciones de mouse.

Interacciones de teclado: Proporciona una completa experiencia de interacción 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 lápiz o pluma: Da soporte a una gran experiencia de entrada de lápiz para los usuarios con dispositivos de lápiz o pluma. Consulta Responder a la entrada de pluma y lápiz.





















Ajuste y escalado

Estas características te ayudan a crear fantásticas

experiencias para cada factor de forma y cada opción

de visualización que los usuarios tengan.

Diseños flexibles: Diseña para diferentes factores de forma y deja que los usuarios manipulen el contenido según sus necesidades y preferencias. Piensa primero en la vista horizontal para que tu aplicación funcione en todos los factores de forma, pero recuerda que algunas pantallas giran y optimiza el diseño del contenido para una vista más alta que ancha, conservando la funcionalidad. Consulta el tema sobre las directrices para diseños.

Vista acoplada y rellena: diseña para las necesidades multitarea de los usuarios. Los usuarios quieren usar la aplicación mientras conversan, navegan por Internet o miran una película. Por lo tanto, haz que la vista acoplada resulte útil y mantén el contexto mientras alternas entre vistas acopladas y desacopladas. Consulta las directrices para vistas acopladas y rellenas.

Escalado a pantallas: diseña una interfaz de usuario que tenga un gran aspecto en dispositivos de diferentes tamaños—desde una tableta pequeña a una pantalla media de portátil, 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 píxeles: asegúrate de que las imágenes de tu aplicación se vean bien cuando se ajusta la escala. Windows escala la aplicación para garantizar un tamaño físico coherente sin importar la densidad de píxeles del dispositivo. Consulta las directrices para escalado a la densidad de píxeles.

Cambio de tamaño: Asegúrate de que la aplicación se vea fantástica cuando sea necesario que Windows cambie su tamaño. Windows cambia automáticamente el tamaño de tu aplicación cuando el usuario cambia el estado de visualización o inicia el teclado virtual. Consulta el tema sobre las directrices para cambio de tamaño.

Contratos, accesos y funcionalidades

Los contratos son el lazo de unión 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 están representados por

accesos. Consulta la lista completa de los contratos

entre aplicaciones.

Las funcionalidades identifican las características del

dispositivo que la aplicación utiliza.









Buscar: permite que los usuarios busquen rápidamente en el contenido de la aplicación desde cualquier parte del sistema. Consulta las directrices para buscar.

Compartir e intercambiar datos: permite que los usuarios compartan el contenido de la aplicación 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 aplicación, y viceversea. También puedes proporcionar una extensión de selector de archivos para que otras aplicaciones puedan cargar el contenido de la aplicación. Consulta el tema sobre las directrices para selectores de archivos y las directrices para contratos de selectores de archivos.

Reconocimiento de la ubicación: garantiza una experiencia de geolocalización limpia, que no cause problemas y que sea respetuosa con la privacidad. Consulta las directrices para aplicaciones con reconocimiento de la ubicación.

Reconocimiento de dispositivos: los micrófonos, las cámaras, los proveedores de servicios de localización y los servicios de mensajería de texto pueden acceder a los datos personales del usuario o cobrarles dinero. Las aplicaciones de la Tienda Windows tienen características que garantizan que el usuario tiene el control de estos delicados dispositivos. Si tu aplicación accede a dispositivos con información confidencial, incorpora la posibilidad de que el usuario habilite o deshabilite el acceso al dispositivo. Consulta las directrices para usar dispositivos con información confidencial y las directrices para crear un selector de dispositivo.

Cuadro de diálogo de impresión: crea una interfaz de usuario personalizada cuando los usuarios impriman contenido desde tu aplicación. Consulta las directrices para una interfaz de usuario de impresión personalizada.

Gestos de proximidad: permiten que los usuarios conecten dos o más dispositivos entre sí con una pulsación. Este gesto mejora las experiencias en las que esperas que haya varios usuarios físicamente próximos, como en los juegos multijugador. Consulta las directrices para pulsar.

Multimedia: asegúrate de que tu aplicación funciona bien con multimedia. Consulta las directrices para desarrollar aplicaciones con reconocimiento de audio y las directrices para la interfaz de usuario de cámara.

Iconos y notificaciones

Un icono es la puerta de entrada a una aplicación.

Alojado en la pantalla Inicio, es una extensión de la

aplicación y puede proporcionar información mucho

más personal y atractiva que un icono tradicional.

Invierte en el diseño de un icono excepcional para

atraer al usuario a tu aplicación.

Ofrece contenido actualizado a través de

notificaciones e iconos dinámicos para que los

usuarios se sientan conectados a tu aplicación.

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 aplicación para atraer a los usuarios, animarlos a que la usen y hacer que la aplicación se mantenga actualizada y pertinente. Promueven contenido interesante y vínculos profundos de la aplicación en la pantalla Inicio y permiten a los usuarios iniciar directamente una experiencia determinada dentro de la aplicación. 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 través de notificaciones del sistema y vuelve a invitarlos a la aplicación aunque no esté en primer plano. Consulta las directrices para notificaciones del sistema, las directrices para notificaciones de inserción, las directrices para notificaciones periódicas, las directrices para notificaciones programadas.

Controles

Diseña la interfaz de usuario de tus aplicaciones para

que presente el contenido. Deja en la pantalla

únicamente los elementos más 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

Barras de la aplicación: Consulta las directrices para barras de la aplicación.

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 clasificación: consulta las directrices para controles de

clasificación. Control de selección: consulta las directrices para el control de selección. Selectores de hora: consulta las directrices para selectores de hora. Selectores de fecha: consulta las directrices para selectores de fecha. Controles de inicio de sesión: Consulta el tema sobre las directrices para

controles de inicio de sesión.

Navegación

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 cómo aplicar estilo a los controles ListView. Vínculos: Consulta el tema sobre las directrices para vínculos.

UI Controles flotantes: consulta las directrices para controles flotantes. Cuadros de diálogo de mensajes: consulta las directrices para cuadros de
































transitoria diálogo de mensajes. Menús contextuales: consulta las directrices para menús contextuales. Información sobre herramientas: consulta las directrices para

información sobre herramientas. Controles de progreso: consulta las directrices para controles de

progreso.

Imágenes Miniaturas: consulta las directrices para miniaturas.

Texto y

entrada

Fuentes: Consulta el tema sobre las directrices para fuentes. Cuadros de texto: consulta las directrices para entrada de texto. Controles de inicio de sesión: consulta las directrices para controles de

inicio de sesión. Revisión ortográfica: consulta las directrices para revisión ortográfica. Teclado táctil en pantalla: Aprende a mostrar y ocultar el teclado táctil

en pantalla cuando los usuarios no tienen acceso a un teclado de hardware u otros dispositivos de teclado periféricos. Consulta Directrices para teclado táctil.

Perfiles móviles en la nube

Crea una experiencia continua de un dispositivo a

otro con la movilidad de datos y configuración, que

permite al usuario retomar una tarea exactamente

donde la dejó y preserva la experiencia del usuario

que más les interesa, independientemente del

dispositivo que estén usando.

Movilidad: mantén la configuración y los estados con movilidad para que los usuarios puedan usar la aplicación en todas partes, en el equipo familiar de la cocina, en el del trabajo o en una tableta personal. Podrás encontrar información adicional sobre la movilidad en Administrar datos de la aplicación y en las directrices para usar un perfil móvil con datos de aplicación.

Configuración: consolida toda la configuración de la aplicación en una sola superficie de interfaz de usuario y permite que los usuarios configuren la aplicación con un mecanismo con el que ya están familiarizados. Consulta las directrices para configuración de la aplicación.

Inicio de sesión único: Asegúrate de que los usuarios puedan iniciar sesión 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 sesión único y cuentas conectadas.






















Conceptos básicos

Todas las aplicaciones deben tener una base sólida

para llegar al mayor número de personas posible.

Pantalla de presentación: usa la pantalla de presentación para suavizar la transición entre el momento en que el usuario inicia la aplicación y el momento en que está lista para su uso. La pantalla de presentación debe reforzar sutilmente la marca a los usuarios, no distraerles ni mostrarles publicidad. Consulta las directrices para pantallas de presentación.

Suspender y reanudar el estado de la aplicación: los usuarios mostrarán y ocultarán la aplicación en la pantalla y Windows la terminará en segundo plano cuando no se utilice. Debes guardar y reanudar el estado de la aplicación cuando sea posible para mantener el contexto. Consulta las directrices para suspender y reanudar una aplicación.

Inicio automático y "Abrir con": inicia la aplicación predeterminada para un protocolo o tipo de archivo desde tu aplicación. Consulta las directrices para protocolos y tipos de archivo.

Globalización, localización y recursos de la aplicación: Dado que Windows se usa en todo el mundo, necesitas diseñar la aplicación de modo que los recursos, por ejemplo, las cadenas e imágenes, estén separados del código para facilitar la localización. Consulta el tema sobre las directrices para globalizar tu aplicación y las directrices para recursos de la aplicación.

Accesibilidad: haz que la aplicación esté disponible para todos los usuarios, sin importar cuáles sean sus capacidades, discapacidades o preferencias. Si usas los controles integrados de la interfaz de usuario, tendrás accesibilidad gratuita. Si necesitas crear controles personalizados, consulta el tema sobre diseño de accesibilidad.

Ayuda de la aplicación: proporciona a los usuarios ayuda o sugerencias para la solución de problemas. Consulta las directrices para ayuda de la aplicación.

Categorías de la Tienda: obtén información sobre cómo crear excelentes aplicaciones para categorías específicas de la Tienda Windows, como juegos o entretenimiento. Consulta las instrucciones sobre categorías.














Inspiración para el diseño (aplicaciones

de la Tienda Windows) (Windows)




Diseño de juegos espectaculares para Windows

Diseño de aplicaciones de entretenimiento excelentes para Windows

Diseño de aplicaciones de noticias espectaculares para Windows

Diseñar impresionantes aplicaciones de productividad para Windows

Aplicaciones de deportes

Aplicaciones de compras

Aplicaciones de viajes

Aplicaciones educativas


Juegos

Aprende cómo un juego puede adoptar los principios

de diseño 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 cómo crear fantásticas aplicaciones de

entretenimiento para Windows 8.

Aplicaciones de noticias


noticias para Windows 8.

Aplicaciones de productividad


productividad para Windows 8.


















Aprende a crear fantásticas aplicaciones de deportes

para Windows 8.


Aprende a crear fantásticas aplicaciones de compras

para Windows 8.


Aprende a crear fantásticas aplicaciones de viajes

para Windows 8.


Aprende a crear fantásticas aplicaciones educativas

para Windows 8.

Temas relacionados




Diseño de la interacción táctil

Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows










Diseño de juegos espectaculares para

Windows (Windows)













En este artículo

Frase "Lo mejor para" Iconos dinámicos, iconos secundarios y notificaciones Pantallas de presentación y controles de progreso Diseño y navegación Patrón jerárquico El patrón plano Interacciones durante el juego Sensores Contratos Configuración y opciones Cuentas de jugador Pausa del juego Cambios de orientación y tamaño de ventana Administración de estados y guardado Perfiles móviles en la nube Accesibilidad En resumen Agradecimientos Temas relacionados













http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#best_at_statement

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#live_tiles_and_notifications

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#splash_screens_and_progress_controls

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#layout_and_navigation

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#hierarchical_patterns

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#the_flat_pattern

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#gameplay_interactions

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#sensors

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#contracts

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#settings

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#accounts

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#pausing

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#change_layout

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#saving

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#roaming

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#accessibility

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#wrapping_up

http://msdn.microsoft.com/es-es/library/windows/apps/hh868271.aspx#thank_you


Windows 8 se ofrece en una variedad incomparable de dispositivos, desde tabletas

centradas en el lápiz y la funcionalidad táctil con sensores modernos, hasta portátiles y

equipos de escritorio de alta resolución. Este alcance ofrece una oportunidad única para

que los publicadores de juegos puedan desarrollar experiencias para toda una variedad

de escenarios. En este artículo verás cómo 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 dinámicos: 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 más social para los usuarios.

Compatibilidad con una variedad de interacciones de usuario: Windows 8 proporciona compatibilidad con funcionalidad táctil, lápiz, teclado, mouse y dispositivos de juego externos.

Sensores: Windows 8 admite los sensores modernos, por ejemplo, de luz, giroscopio, acelerómetro y de ubicación.

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 diseños en función de los tamaños de pantalla para obtener una experiencia de juego óptima. Además, 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 características de juegos. La Tienda Windows permite ofrecer fácilmente una versión de prueba con límite de tiempo sin necesidad de escribir ningún código. Los desarrolladores también pueden generar una versión de prueba con características limitadas, si así lo desean. Las versiones de prueba son la manera más sencilla de aumentar las tasas de conversión.

Con este artículo aprenderás cómo afectan estas funcionalidades al diseño 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 diseñar 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 guíe en el proceso de diseño

y en la toma de decisiones sobre qué escenarios y características incluirás y no incluirás.


La frase "Lo mejor para" de Cannon Ball sería proporcionar a los usuarios un simple

pero excitante juego que permite crear música mientras se dirige una bola por una serie

de de plataformas y se recogen monedas. Durante la planificación del juego, esta frase

guió las decisiones sobre que escenarios serían compatibles. Para dirigir la bola para que

recogiera las monedas, el usuario tendría que poder cambiar el ángulo de las

plataformas. Para permitir este escenario, se implementó el control de entrada con

funcionalidad táctil, teclado y mouse. Esta frase también se usó para decidir qué

escenarios no serían compatibles. Por ejemplo, se decidió que la aplicación no admitiría

el escenario de guardar la música creada durante el juego. La posibilidad de guardar la

música no agregaba nada al juego, por lo que no se implementó.

Iconos dinámicos, iconos secundarios y notificaciones

Los juegos pueden usar iconos dinámicos para atraer a los usuarios al juego desde la

pantalla Inicio. Usa un icono dinámico para mostrar información sobre las puntuaciones

y los logros más 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), podrías

mostrar esta información en el icono dinámico 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 más información sobre

los iconos dinámicos, consulta Directrices y lista de comprobación 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 cuándo es su turno en un juego

basado en turnos o si un amigo ha superado su puntuación máxima. Sigue estas

directrices de Directrices y lista de comprobación para notificaciones del sistema

cuando implementes las notificaciones del sistema.




Figura 1: El icono dinámico 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 información actualizada sobre la

puntuación máxima del usuario y la cantidad de tesoros recogidos. Para obtener

información detallada sobre otros formatos de iconos, consulta Catálogo de plantillas de

icono.

Pantallas de presentación y controles de progreso

Después de abrir el juego, la pantalla de presentación es lo primero que verá el público.

Es una suave transición desde que el usuario inicia el juego hasta que ya está listo para

jugar. Muchos juegos pueden tardar más que el máximo de tres segundos en cargar

debido a la gran cantidad de de activos que contienen. Si ocurre esto con tu juego,

asegúrate de proporcionar una pantalla de presentación extendida con un círculo de

progreso que indique al usuario que el juego se está cargando. Para obtener más

información sobre las pantallas de presentación, consulta Directrices y lista de

comprobación para pantallas de presentación.

Algunas veces, este enfoque también resulta útil durante el juego cuando los recursos

deben capturarse, como al cargarse un nuevo nivel o al prepararse la reproducción de

una secuencia cinemática enriquecida. Si alguna vez parece que la aplicación deja de

responder durante más de medio segundo, debería mostrarse un control de progreso para

que el usuario sepa que la aplicación se sigue procesando y que no se ha colgado.

Para agregar más interés visual mientras se carga la aplicación, puede incluir una

animación simultánea que admita la personalización de marca.





Diseño y navegación

Por lo que respecta a la navegación y los comandos, los juegos pueden suponer

estrategias enriquecidas y complejas que necesiten menús por niveles que incluyan toda

una variedad de opciones o que sean tan simples como los ligeros juegos de

rompecabezas, que podrían no incluir ningún menú ni opciones. Algunos juegos

incluyen pantallas de logros, tableros de puntuaciones máximas, salones de

multijugadores y mucho más, 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

navegación entre varias experiencias sea rápida y fluida, y el patrón de navegación que

uses debería estar basado en el tipo de experiencia que proporcione tu juego. Antes de

continuar, tendrás que revisar y comprender los dos patrones (jerárquico y plano) que se

tratán aquí. Selecciona el patrón 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, más allá del juego en sí, usa el

patrón jerárquico para reunir todo el contenido en el nivel superior, en lugar de ocultarlo

en menús. 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 patrón plano que permita a los usuarios navegar

rápidamente entre las varias sesiones del juego (por ejemplo, juegos con varias partidas

de uno a uno con amigos). Consulta Diseño de navegación para aplicaciones de la

Tienda Windows para obtener más información sobre los modelos de navegación.

Patrón jerárquico

Con el patrón jerárquico, 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 panorámicamente. De

este modo puedes mostrar a los jugadores un contenido reciente y actualizado cada vez

que vean el concentrador, animándolo 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 sección como puntos de

navegación para llegar a una vista más profunda del contenido de esa categoría.

También puedes usar el concentrador para transmitir la personalidad y la

personalización de marca del juego. Por ejemplo, si un usuario selecciona un nivel

particular, el fondo de la página de la sección podría reflejar el nivel que está viendo el

usuario.

El concentrador del juego también proporciona una forma de mostrar contenido

actualizado y reciente a los usuarios cada vez que lo ven, animándolo con actividad

incluso cuando los usuarios no están jugando al propio juego. Por ejemplo, considera la

posibilidad de la experiencia de logros modelada en la Figura 1. Divide los logros en

categorías y proporciona información acerca de cada uno de ellos, todo al mismo tiempo,

indicando a los usuarios de qué se trata y cuánto les falta para desbloquearlo.



Figura 2: Microsoft Solitaire Collection usa un patrón jerárquico para que el usuario

pueda navegar por muchas experiencias de juego diferentes.

Dentro el juego siempre deberás incluir una forma de regresar al concentrador. Con

frecuencia esto se hace mediante un botón Atrás en la barra de la aplicación superior,

que es la ubicación adecuada para cualquier comando de navegación. La clave está en

que los usuarios deberían sentirse como si navegaran naturalmente por el contenido del

juego para obtener lo que desean, en vez de buscar por los menús. Considera la

posibilidad de dejar que los usuarios utilicen el zoom semántico para moverse

jerárquicamente entre las secciones del menú. Si un usuario se encuentra en una sección

particular del concentrador principal, pueden acercar los dedos para alejarse con zoom

semántico y volver rápidamente a otras secciones del menú.


Figura 3: Microsoft Solitaire Collection usa el zoom semántico para que los usuarios

puedan moverse rápidamente entre secciones del concentrador.

El patrón jerárquico debería 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 elección para los juegos con muchas opciones distintas de juego o para

los que tienen muchas experiencias secundarias.

El patrón plano

El patrón plano mantiene la experiencia del juego en el centro. Es un gran diseño para

los juegos que no tienen otras experiencias independientes. Con el patrón plano, en vez

de llevar al usuario a un concentrador poco denso, puedes usar la barra de la aplicación

superior como base para la navegación. Presenta allí las diferentes sesiones del usuario

y déjale que se mueva fácilmente 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 personalización de marca de tu juego y que proporcione también

un lugar que se identifique como el “inicio” en el juego. No es necesario mostrar la

barra de la aplicación superior cuando se inicie el juego. Por ejemplo, la aplicación

Internet Explorer lleva a los usuarios a la última página web que visitaron y depende de

ellos para invocar la barra de la aplicación para navegar por las pestañas.

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

pequeña funcionalidad a un concentrador, usa el patrón plano para poner todo el

contenido del juego delante de los usuarios y dejar que naveguen de forma rápida y

segura por él.

Figura 4: En Tankster, los usuarios interactúan directamente con el juego, no a través

de un concentrador.

Consideraciones de diseño adicionales: las aplicaciones deberían mantener siempre

una sola dirección de desplazamiento. Si tienes una página de concentrador con

movimiento panorámico horizontal, todos los campos de la aplicación deberían

desplazarse horizontalmente. No debería haber instancias de movimiento panorámico

vertical. Por ejemplo, si tiene un largo panel de puntuaciones que normalmente se vería

en sentido vertical, ajusta su contenido de modo que se muestre en un diseño de

columna. Si te preocupa una larga lista de información, considera la posibilidad de dejar

que el usuario use el zoom semántico para saltar de un final de una larga lista a otro

final.

Interacciones durante el juego

Interacciones táctiles: se recomienda la manipulación 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

panorámico/zoom y ejecutar un comando al mismo tiempo, o mover el jugador o la

cámara del juego y disparar simultáneamente. Asegúrate de diseñar las interacciones de

forma que cualquier usuario, incluso los usuarios que usen dispositivos sin sensores ni

funcionalidad táctil, 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 vehículo) te permite evitar el abarrotar el Canvas con botones y controles y

deja mucho espacio para que los usuarios interactúen con el juego. Si vas a usar

controles de joystick o de botón virtuales en el Canvas, deja que los usuarios

personalicen el tamaño y la posición 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 ergonómicamente a todos los usuarios. Para la colocación predeterminada de

un control de joystick virtual, ten en cuenta dónde estará el pulgar cuando el usuario

sostenga la tableta táctil.

Considera si las interacciones táctiles del usuario podría invocar accidentalmente a un

comportamiento de borde, como sacar otra aplicación 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 píxeles 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 aplicación. Considera la posibilidad de agregar algún tipo de "barrera"

visual que recuerde al usuario que no debe deslizar el dedo rápidamente cerca de los

bordes, o modifica los controles para evitar deslizamientos desde los bordes

accidentales. También 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 múltiples: los juegos deberían ser compatibles con la funcionalidad

táctil, además del teclado, el mouse o el lápiz. Para lograr una gran experiencia en todos

los factores de forma, los juegos deberían admitir todos los modos de entrada siempre

que sea posible, y el esquema de controles debería ser tan fluido y coherente como sea

posible independientemente del modo de entrada. El cambio del método de entrada

debería administrarse dinámicamente en tiempo real. Por ejemplo, si se detecta un

evento táctil, resalta los controles correspondientes a la funcionalidad táctil; si se detecta

un clic de mouse, atenúa los controles correspondientes al método táctil. Gestiona el

cambio del método de entrada del modo más dinámico posible. No incluyas

configuraciones que permitan a los usuarios activar o desactivar los controles táctiles o

elegir el uso del mouse. No le preguntes al usuario qué método de entrada desean usar

para jugar al juego. Lo ideal sería que el juego admitiera todos los modos de control a la

perfección y por igual sin necesidad de tener que cambiar de modo.

Comandos de la barra de la aplicación: cuando se a posible, diseña el juego de modo

que el usuario pueda jugarlo manipulando directamente el contenido en el Canvas, en

vez de usar comandos que actúen en el contenido. Si se requieren comandos adicionales

o controles de navegación, los usuarios esperarán encontrarlos en la barra de la

aplicación. Los comandos de navegación están situados en la barra de la aplicación

superior, mientras que los demás comandos están en la inferior. Los comandos que

siempre están disponibles, como el de iniciar un juego nuevo, deberían ir a la derecha de

la barra de la aplicación inferior. En el lado izquierdo, agrega los comandos

contextuales; es decir, los que dependen de la ubicación 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 aplicación inferior,

anticipando que aparecerá un comando Eliminar en el lado izquierdo de la barra de la

aplicación.

Hazte un par de preguntas que te ayudarán a determinar si un control debería

encontrarse en el Canvas o en la barra de la aplicación inferior:

¿Este control se usará con frecuencia? ¿Este control es fundamental para jugar el juego?

Si respondes "sí" a las dos preguntas, sería 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 aplicación para avanzar en el juego.

En la figura 5, no se ven controles en el Canvas. Los usuarios juegan mediante

manipulación directa. Sin embargo, cuando deslizan rápidamente el dedo desde abajo o

hacen clic con el botón secundario del mouse, aparece una barra de la aplicación que les

permite poner el juego en pausa o cambiar el arma equipada.

Figura 5: Cannon Ball se puede jugar con manipulación directa. El usuario gira las

plataformas con la función táctil 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 aplicación

para hacerlo.

Figura 6: En Cut the Rope, el botón Deshacer es muy importante, por lo tanto ocupa su

espacio en el Canvas. Está disponible en la esquina superior derecha porque es una

acción frecuente en este juego.

Puedes aplicar un estilo fácilmente a las barras de la aplicación para que reflejen la

personalización de marca o la personalidad del juego. También se puede aplicar estilo a

los botones y las barras de progreso. En la figura 4 se muestra una barra de la aplicación

con estilo personalizado. La barra de la aplicación puede tener cualquier forma, color y

tamaño que desees.

Para planear cómo distribuir los controles en una barra de la aplicación, consulta las

instrucciones de la barra de la aplicación. Para obtener más información sobre los

controles, consulta Diseño de comandos para aplicaciones de la Tienda Windows.

Sensores

La integración de sensores en Windows 8 representa una nueva clase de oportunidades

de interacción para los juegos y las experiencias de entretenimiento interactivas. Con el

acceso al acelerómetro, la brújula, el girómetro, los sensores de luz y otros, el juego

puede ser tan dinámico y envolvente como desee el diseñador. Windows 8 también

ofrece Sensor Fusion, que permite realizar un ajuste preciso de la orientación y la

ubicación 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 básicos. Asegúrate de elegir el sensor

adecuado para la tarea.


Puedes usar el acelerómetro 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 cámara.

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 iluminación de la representación de un juego para mejorar la interactividad envolvente.

Puedes usar un micrófono o una cámara para integrar elementos de entorno realistas en el juego.

Puedes lograr la realidad aumentada con la integración de la cámara, Sensor Fusion y elementos "secretos" de presentación 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 menús o comandos. Para obtener más información acerca de cómo

se pueden usar los sensores, consulta el artículo Anima tu aplicación con la ubicación 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 más información sobre

contratos, consulta Extensiones y contratos entre aplicaciones. A continuación se

muestran algunos ejemplos de contratos útiles que se pueden implementar.

Buscar: los juegos pueden ofrecer algunos escenarios de búsqueda interesantes. Piensa

en qué es lo que le gustaría poder buscar al usuario desde cualquier lugar del juego o

desde otra aplicación. Por ejemplo, podrías habilitar Buscar para hacer búsquedas de las

situación o las estadísticas 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 búsqueda existentes y evita usar controles de búsqueda en el Canvas. Los

usuarios estarán familiarizados con el acceso a Buscar para descubrir cosas adicionales

en el juego. Para obtener más información sobre la búsqueda, consulta Directrices y

listas de comprobación para búsqueda.

Compartir: El contrato para contenido compartido te permite conectar a un jugador con

otros jugadores, lugares de medios sociales o amigos, permitiéndoles compartir un logro

o un estado particular, o incluso capturas de pantalla y clips de vídeo del juego.

También 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.

http://blogs.msdn.com/b/windowsappdev/archive/2012/08/09/liven-up-your-app-with-location-and-sensors.aspx

http://blogs.msdn.com/b/windowsappdev/archive/2012/08/09/liven-up-your-app-with-location-and-sensors.aspx




Al elegir lo que se comparte, considera cómo deseas transmitir tu marca para aplicar un

estilo a la información compartida. Es posible compartir toda una variedad de formatos

distintos (mediante direcciones URL, correo electrónico, aplicaciones sociales y

servicios de nube) y los usuarios podrán 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 información podría hacer, por lo tanto, que la aplicación

llame la atención a más usuarios.

Si tu juego puede usar datos de otras aplicaciones y transformarlos de manera

interesante, deberías considerar la posibilidad de definir la aplicación como un destino

de contenido compartido. Por ejemplo, el juego PuzzleTouch recibe una foto de la

aplicación de fotos y la transforma en un rompecabezas según las preferencias del

usuario. Para obtener más información sobre Compartir, consulta Directrices y lista de

comprobación 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 implementación de dispositivos es una gran manera para que los

usuarios conecten mandos y otros periféricos a sus equipos para preparar una partida, y

para que muestren el contenido del juego en una pantalla mayor. Los usuarios también

pueden imprimir desde el acceso a Dispositivos.



Configuración y opciones

Todo el contenido de configuración, opciones, directiva de privacidad, Acerca de,

Créditos y Ayuda del juego debería estar accesible a través del acceso a Configuración.

El acceso a Configuración es el lugar donde todas las aplicaciones de Windows 8 alojan

su configuración 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 modificación de la configuración no debería hacerse en la superficie del juego ni en

la barra de la aplicación, a no ser que sea una actividad frecuente del juego. Los

usuarios ya sabrán que deben acudir al acceso a Configuración para ver la configuración,

de modo que no debe haber ningún menú que duplique la funcionalidad de este acceso

ni ningún elemento de la interfaz de usuario que sirva solo para abrir el panel de

configuración.

Windows 8 proporciona un control de volumen global, pero muchos juegos podrían

tener su propia configuración de audio más compleja (como controles deslizantes de

volumen individuales para la música, los efectos de sonido y las voces, que los usuarios

pueden ajustar independientemente). Incluye una etiqueta que indique claramente que la

configuración de audio es específica de tu juego. Los botones y los controles deslizantes

de configuración proporcionan una reacción en tiempo real, en vez de requerir una

acción secundaria de un botón Aceptar para confirmar los cambios.

Si el juego incluye ayuda o un aprendizaje inicial del juego, como los tutoriales, pon

esta información en el acceso a Configuración. Otra opción sería que los tutoriales estén

disponibles como parte del propio juego. Un ejemplo de esto se ve en la figura 8, en la

que la aplicación 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 través 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 más atractiva que haga que los usuarios regresen y que les permitirá jugar

con sus amigos.

Inicio de sesión del usuario: si resulta fundamental para la experiencia de juego que el

usuario inicie sesión, 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 sesión en lugar de presentar al jugador un juego que no puede jugar. Siempre

que sea posible, intenta obtener la información de inicio de sesión de la cuenta

Microsoft de un usuario o de la información de inicio de sesión almacenada en caché de

las sesiones anteriores del juego.

Si el juego se puede usar sin iniciar sesión pero es muy recomendable que se inicie (por

ejemplo, si el modelo de ingresos del juego depende de que el usuario inicie sesión para

notificarle contenido descargable que quizás aún no tenga), el juego puede dedicar un

espacio de su concentrador al inicio de sesión o dedicarle su experiencia de aterrizaje. Si

ocupa espacio en el concentrador, el juego debería comunicar claramente a los usuarios

que no han iniciado sesión. Después de que el usuario haya iniciado sesión, quita por

completo la sección de inicio de sesión o reemplázala por un contenido que sea

exclusivo para el usuario. Si el juego ha dedicado la experiencia de aterrizaje para

iniciar sesión, debe dar al usuario la opción de omitir el inicio de sesión y, si el usuario

elige no iniciar sesión, debe respetar su decisión y no llevarle de regreso a dicha página

en posteriores sesiones del juego. En estos casos, puedes usar espacio en el

concentrador para controlar el inicio de sesión.

En los casos en los que iniciar sesión sea opcional, la experiencia de inicio de sesión

debería situarse en el acceso a Configuración. El panel Configuración podría abrirse

cuando se inicia la aplicación para ayudar al usuario a encontrar la experiencia de inicio

de sesión.

En todos los casos, el inicio de sesión también debería estar disponible en el panel

Administración de cuentas de Configuración.

Administración de cuentas y cierre de sesión: los escenarios de administración de

cuentas (como actualizar la dirección de correo electrónico del usuario o cambiar la

contraseña) se llevan a cabo en panel Configuración. De forma similar, las experiencias

de cierre de sesión deben hospedarse en Configuración junto con las demás opciones.

Pausa del juego

No todos los juegos necesitan admitir la pausa. En los juegos basados en turnos, por

ejemplo, por lo general no debería existir el concepto de la pausa. Además, los juegos

controlados totalmente por un usuario, sin ningún otro factor externo, como un

temporizador o un reloj, no obtienen ningún beneficio con la pausa. En estos casos, la

pausa no es necesaria cuando los usuarios salen del juego. Al regresar al juego, este

debería presentarles la misma experiencia que tenían antes de salir. Si no es posible (por

ejemplo, si se ha terminado una sesión de juego multijugador), el juego debería

comunicar claramente a los usuarios en qué estado se encuentran.

Para los juegos que tienen escenarios de pausa significativos, haz que se registre la

pérdida de foco y que el juego entre en pausa cuando el usuario deslice rápidamente el

dedo de izquierda a derecha por el borde de la pantalla, o cuando aparezca un cuadro de

diálogo del sistema. Si tienes un juego muy rápido o basado en el tiempo, este debería

ponerse en pausa cuando cambie la vista o la distribución. El usuario debería poder

cancelar la pausa y seguir jugando en la nueva distribución si es compatible. Un juego

no debería basarse en la pérdida del foco para determinar que debe pausarse. Considera

la posibilidad de incluir además un botón de pausa en el juego. Determina la ubicación

del comando de pausa en función de las mismas consideraciones de colocación de

comandos tratadas en la sección "Interacciones durante el juego" de este tema.

Comunicación 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 fácil como ponerlo en pausa. Tanto la imagen

superpuesta como la pantalla de pausa deberían contener alguna forma de quitar la

pausa del juego. Si el usuario navega por la página del concentrador, asegúrate de poner

el juego en pausa. Cuando el usuario regrese al juego o cancele la pausa, el juego

debería 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 acción. Una buena manera es utilizar una cuenta

atrás.

Los juegos que presentan controles de flujo de tiempo (por ejemplo, los juegos de

construcción de ciudades) pueden "pausar" el flujo de tiempo, pero esto no es lo mismo

que pausar el juego. Pausar es cesar por completo la interacción del usuario con el juego,

aunque puede haber alguna representación de fondo para que las animaciones sigan

reproduciéndose.

Cambios de orientación y tamaño de ventana

Una aplicación puede tener uno de cuatro estados visuales: horizontal a pantalla

completa, vertical a pantalla completa, acoplada y rellena. Tu juego debería admitir las

vistas a pantalla completa, rellena y acoplada, y opcionalmente la vertical. Asegúrate de

mantener el estado al cambiar entre vistas. Pasar de pantalla completa a vista vertical no

debería llevar al usuario a la pantalla de inicio, sino que debería mostrarle una versión

modificada de la página en la que se encontraba.

Cuando el juego está en estado relleno, debe poder jugarse y solo tiene que ajustar su

presentación al espacio proporcionado. Esto se puede lograr fácilmente cambiando la

pantalla del juego al formato de pantalla ancha, sin embargo también podrías 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 aplicación

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 más tiempo. Este enfoque

resulta especialmente adecuado para juegos ligeros e informales que pueden ocupar la

atención del usuario sin ocupar necesariamente toda la pantalla. Por ejemplo, un usuario

podría 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 también tendría que funcionar en la vista

acoplada.

Figura 9: Cannon Ball se puede jugar en vista acoplada. Los elementos del juego

cambian de tamaño para que quepan en un tamaño de pantalla más pequeño y la página

se escala para que el usuario pueda ver más en el nivel.

Considera cómo serán las interacciones táctiles en la vista acoplada. Con un tamaño de

pantalla menor, los usuarios podrían invocar accidentalmente acciones del borde de la

pantalla. Piensa cómo puedes modificar los controles para evitar deslizamientos rápidos

accidentales por el borde. También es importante que consideres la colocación de los

comandos en la vista acoplada. Es posible que no todos los comandos quepan en una

barra de la aplicación en vista acoplada. Si este es el caso, considera la posibilidad de

agrupar los comandos o proporcionar una experiencia más 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 fácilmente.

Si el juego no se puede jugar en la vista acoplada o si alcanza un estado en el que para

progresar necesita más espacio en pantalla, debe ponerse en pausa y explicar al usuario

que no se puede continuar hasta que la aplicación salga de la vista acoplada. Puedes

incluir un botón para cancelar la pausa, que desacopla el juego y lo reanuda, pero el

juego no debería desacoplarse por sí solo mediante programación sin la acción del

usuario. Intenta no sorprender al usuario sacando el juego de la vista acoplada cuando

no se lo espere. No debería haber un elemento de interfaz de usuario solo para acoplar y

desacoplar el juego. Para obtener más información 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 cómo 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, podrías tener un diseño adaptable que ajuste lo que es visible en función

de la resolución. Por ejemplo, en una pantalla más grande puedes mostrar más

contenido, como incluir más espacio del nivel, en vez de estirar la vista. Y si eliges no

tener un diseño adaptable, Windows 8 proporciona regiones de letterbox habilitados

para temas para las aplicaciones que usan XAML o HTML, de modo que puedes

mantener fácilmente una experiencia envolvente con la relación de aspecto adecuada en

cualquier pantalla. Para obtener más información acerca del escalado de pantallas,

consulta Directrices para el escalado en pantallas.



Administración 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 también deben ponerse en pausa, a menos que sea un

juego que no tiene un modo de pausa significativo. Si una aplicación no tiene un modo

de pausa, cuando el usuario vuelva a entrar en el juego debería ir directamente a la

experiencia de juego.

En un juego multijugador permanente, si ya ha terminado la sesión que el usuario había

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 administración 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 más información sobre la administración de estados, consulta

Directrices para suspender y reanudar una aplicación.

Perfiles móviles en la nube

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

configuración y estado del juego, para que un usuario pueda retomar un juego

exactamente donde lo dejó, independientemente del dispositivo que esté usando.

Mantén la configuración y los estados con movilidad para que los usuarios puedan usar

la aplicación en cualquier parte, ya sea en el equipo familiar de la cocina, en el del

trabajo o en una tableta personal. Para obtener más información, consulta Directrices

para perfiles móviles de datos de la aplicación.

Accesibilidad

Los usuarios de Windows pueden tener una amplia variedad de capacidades y

discapacidades. Si piensas que tu juego se podría reimaginar para hacer que puedan

jugar las personas con discapacidades, asegúrate de acomodarlo a estos usuarios. Las

personas con discapacidades pueden usar la funcionalidad de búsqueda de aplicaciones

accesibles para encontrar tu juego si lo marcas como accesible al enviarlo a la Tienda

Windows. La incorporación de los principios de accesibilidad en la aplicación garantiza

que tu juego pueda ser usado por una público más amplio y ayuda a atraer más clientes

al juego. Las características de accesibilidad son fáciles de incluir en las aplicaciones de

la Tienda Windows, en particular si se tuvieron en cuenta en las fases iniciales del

proceso de diseño. Al agregar las características de accesibilidad, los juegos podrán ser

mejores para todos los usuarios. Por ejemplo, permitir que se puedan reasignar o situar

los controles en función de cómo ponga las manos el usuario, hará que tanto los

jugadores diestros como los zurdos puedan jugar de la forma más cómoda posible.

Hay varios escenarios importantes que debes tener en cuenta al diseñar para la

accesibilidad.





Diseño 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

descripción, un estado, una posición y cualquier otra información relevante. Es

importante tener en cuenta qué aspecto tendrá la interfaz de usuario cuando se habiliten

las opciones de accesibilidad en todo el sistema (configuración de Accesibilidad), como

"Aumentar el tamaño 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

código adicional para ajustar los elementos visuales del juego cuando el usuario habilite

el modo de contraste alto en todo el sistema. Asegúrate de usar un esquema de colores

preparado para daltónicos, y si hay partes del juego en las que se usa el color para

transmitir información, asegúrate de que esta información se pueda transmitir también

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.

Diseño para accesibilidad de teclado y métodos 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. Asegúrate de que se pueda navegar por todos los elementos de interfaz de

usuario con las teclas de flecha y de tabulación. Los elementos de interfaz de usuario

deberían poder activarse con la barra espaciadora y la teclas Entrar. Los comandos y

controles deberían ser accesibles con métodos abreviados de teclado. Piensa cómo

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.

Diseño para impedimentos auditivos: si el juego usa indicaciones de audio o voz para

transmitir información, debería haber subtítulos disponibles para los usuarios sordos o

con dificultades auditivas. Debería haber substitutos visuales para todos los elementos

de audio y el ambiente y el significado del juego debería poder transmitirse incluso sin

sonido. Si tienes varios sonidos diferentes a la vez, como efectos sonoros y diálogo,

proporciona controles de volumen independientes para cada uno para así ayudar a la

comprensión.

Diseño para impedimentos cognitivos: el juego debería permitir una amplia gama de

niveles de dificultad y velocidades de juego, siempre que sea posible. Considera cómo

podrían jugar al juego los usuarios con impedimentos cognitivos o de aprendizaje.

¿Podría 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, podrás diseñar 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 artículo.

Temas relacionados







Diseño de aplicaciones de

entretenimiento excelentes para

Windows (Windows)













En este artículo

Introducción Diseño y navegación en aplicaciones multimedia Pulsar elementos en la vista de concentrador Experiencia de reproducción en curso Navegación entre videoclips o episodios anterior y siguiente Comandos Clasificación y revisión Tipografía en aplicaciones multimedia Contratos Conectado y activo Orientación y vistas Procedimientos recomendados de música y vídeo Temas relacionados

Aquí veras ideas de diseño que te ayudarán a crear aplicaciones multimedia de gran

eficacia y popularidad.













http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#overview

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#layout_navigation

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#tapipng_in_view_hub

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#now_playing

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#navigating_between_pivots_episodes

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#comandos

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#rating_and_reviewing

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#typography


http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#connected_alive

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#orientation_views

http://msdn.microsoft.com/es-es/library/windows/apps/hh868270.aspx#procedimientos_recomendados_de_m_sica_y_v_deo


Introducción


táctiles a portátiles y equipos de escritorio de alta resolución. Muchas de las nuevas

características 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 público.

La nueva Tienda Windows también 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 Windows—Un nuevo lenguaje de diseño para aplicaciones, donde el contenido adquiere el rol más importante.

Iconos dinámicos y notificaciones del sistema—Haz que el usuario vuelva a tu aplicación con una promoción eficaz del contenido y notificaciones relevantes, incluso cuando tu aplicación no se esté ejecutando.

Contratos de Buscar y contratos para contenido compartido—Buscar y compartir contenido multimedia son ahora funciones de nivel superior del sistema operativo, que crea una experiencia del usuario más coherente y facilita las tareas de buscar y compartir contenido en tus aplicaciones.

Contratos de dispositivo—Los usuarios pueden enviar contenido desde sus equipos a dispositivos en red como televisores y receptores de audio y vídeo, lo que permite una participación y visualización de grupos.

Diseño y navegación en aplicaciones multimedia

Las aplicaciones de entretenimiento suelen tener muchas categorías distintas para

diferentes tipos de medios. Por ejemplo, una aplicación de películas te puede permitir

buscar películas por género, por un director o actor específico, por tus preferencias de

cine anteriores o por contenido destacado. De forma similar, en el caso de aplicaciones

de música, los usuarios pueden buscar contenido por intérprete, álbum, género y

contenido destacado. Para una experiencia óptima del usuario final con una aplicación

multimedia, es crucial organizar el contenido de forma significativa para que los

usuarios puedan encontrar lo que quieren de forma rápida y fiable. El uso de patrones de

navegación jerárquicos y de otros tipos en las aplicaciones de la Tienda Windows

convierte a tu aplicación en rápida, fluida y fácil de usar, y permite a los usuarios

encontrar lo que quieren rápidamente.

El artículo Diseño de navegación para aplicaciones de la Tienda Windows contiene más

información sobre la jerarquía de navegación de las aplicaciones.


Modelo jerárquico

Las aplicaciones multimedia y de entretenimiento suelen tener un montón de historias e

imágenes para que el usuario descubra. Si usas los patrones de interacción y navegación

recomendados en Windows 8, estarás llevando el contenido a la superficie, permitiendo

así que las historias y las imágenes sean el foco de la experiencia. La presentación de la

información de lo más general a lo más específico permite a los usuarios encontrar

rápidamente lo que buscan.

La página de concentrador de tu aplicación

Para permitir una experiencia rica y diversa en tu aplicación, usa el modelo jerárquico

para aplicaciones de la Tienda Windows. La página de aterrizaje de tu aplicación o el

hub pueden mostrar contenido destacado, contenido recomendado para el usuario según

sus intereses previos, contenido que se está reproduciendo actualmente, colas guardadas,

géneros y categorías en una superficie por la que puedes desplazarte lateralmente de

forma sencilla. Puedes resaltar cada grupo de categorías y, pulsando en el encabezado,

revelarás más contenido, tal como se muestra en la imagen siguiente. Para hacer saber al

usuario que hay más contenido en la categoría, agrega una nota "Ver 10 más" para

indicar que hay más contenido disponible.

Muestra las categorías del contenido en la página de concentrador de la aplicación y el

contenido multimedia pertinente en cada categoría para llevar a los usuarios a esas

categorías. Para hacer saber al usuario que hay más contenido en la categoría, agrega

una nota View 10 more para indicar que hay más contenido disponible.

Marcadores, favoritos y listas de reproducción

Los usuarios suelen guardar listas de reproducción para agregar elementos multimedia a

colas a las que accederán más tarde. Si tu aplicación admite esto de forma sencilla y

accesible, los usuarios que quieran una experiencia sin problemas para acceder a sus

elementos multimedia favoritos usarán tu aplicación de forma repetida.

Agrega una sección en tu página de destino llamada Marcadores/Favoritos, que será una

recopilación de todo el contenido multimedia guardado del usuario. Permite a los

usuarios seleccionar estos elementos marcados y administrarlos moviéndolos a la parte

superior de la cola, quitándolos de la cola u ordenándolos dentro de la cola. El ejemplo

siguiente muestra contenido recopilado en una cola de "guardados para después".

Si pulsas el encabezado de la sección, se revelarán más opciones en la categoría, tal

como se muestra en esta imagen.

Encabezado de sección desplegable

El uso del encabezado de sección permite a los usuarios saltar lateralmente entre títulos

de sección de forma rápida. Por ejemplo, considera un usuario que navega por los

iconos de películas en la categoría de comedias y quiere navegar a la categoría de

dramas. Para ello, podrá usar fácilmente el desplegable del encabezado de sección. La

imagen siguiente muestra el desplegable del encabezado de sección.

Zoom semántico

Tanto en la página de destino como en las páginas de categorías, los usuarios pueden

usar el zoom semántico para ver fácilmente toda la superficie y acceder rápidamente a

los elementos en los que estén interesados.

La página Diseño de interacción táctil tiene más información sobre cómo puede admitir

tu aplicación el movimiento panorámico. La imagen siguiente muestra una vista de

grupo para el zoom semántico.


Al usar el zoom semántico, el usuario podrá reorganizar la colocación de categorías en

la página principal. Para ello, seleccionará el grupo y lo moverá donde quiera. Tus

usuarios ahora pueden personalizar la página de destino de la aplicación, lo que les da

otro motivo para usar tu aplicación. Esta imagen muestra la reorganización de

categorías de contenido.

También puedes usar el zoom semántico en una página de una categoría específica para

navegar entre diferentes películas o canciones en esa categoría. Los usuarios usarán el

zoom semántico para saltar rápidamente entre diferentes canciones y vídeos.

Pulsar elementos en la vista de concentrador

Caso 1: reproducción instantánea

Cuando un usuario pulsa elementos multimedia en la página de destino o en las páginas

de sección, estos se reproducen. Como los usuarios esperan esto, es mejor que esta sea

la respuesta predeterminada a la pulsación. Esta imagen muestra interacciones para la

reproducción instantánea.

Probablemente, los usuarios querrán más información sobre los elementos multimedia

que reproducen, así que es buena idea ofrecer un botón en la barra de la aplicación que

les permita abandonar la vista de pantalla completa e ir a una vista del elemento

detallada. La imagen siguiente muestra una simulación de esto.

Los elementos multimedia deben seguir reproduciéndose 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 aplicación

está o no acoplada.

Las acciones de tocar el botón de alternancia para pantalla completa o tocar el vídeo o la

música presentados en la interfaz de usuario deberían reanudar el modo de reproducción

en pantalla completa.

O bien, si la aplicación no ofrece una experiencia de información detallada para los

elementos multimedia, un botón en la barra de la aplicación puede alternar la activación

o desactivación de información adicional en lugar de cambiar a una vista detallada

desde la barra de la aplicación. Puedes ver esto en la siguiente imagen.

Caso 2: vista de elemento detallada

Hay situaciones en las que tiene más sentido que la acción de pulsar dirija al usuario a

una página de elemento detallada en lugar de reproducir elementos multimedia

inmediatamente. Por ejemplo, si hay varios episodios de un programa de televisión,

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 opción de pague

por ver, el usuario debe pagar primero antes de que comience, por lo que querrás

mostrar información de pago antes.

La imagen siguiente muestra el proceso de elegir elementos multimedia específicos del

contenido agregado en una página promocional de un programa de televisión. El usuario

pulsa una imagen de un episodio específico, puede leer sobre ese episodio y leer críticas

antes de volver a pulsar para mostrar las opciones de reproducción del episodio.

Para volver a la página de información detallada de ese episodio, toca el botón Atrás en

el encabezado de navegación de la barra de la aplicación superior o toca el botón Vista

completa para alternar con la otra vista.

Experiencia de reproducción en curso

Cuando los recursos multimedia se están reproduciendo, tu aplicación puede marcar la

diferencia ofreciendo una experiencia que muestre el contenido del usuario. Diseña la

experiencia de reproducción de elementos multimedia para ser completamente

envolvente, sin ningún 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 reproducción de un vídeo que es completamente envolvente.

Para aplicaciones de música y vídeo que incluyen el concepto de listas de reproducción,

la experiencia de reproducción en curso permite a los usuarios administrar la lista de

reproducción y navegar por ella fácilmente. Considera la opción de poner un botón de

lista de reproducción en el Canvas o en la barra de la aplicación superior, que muestre

un control flotante desplazable con la lista de reproducción dentro. Los usuarios pueden

seleccionar elementos y administrarlos. Podrán moverlos arriba o abajo o quitarlos de la

lista completamente. La imagen siguiente muestra una lista de reproducción en curso.

Otra alternativa es que quieras mostrar siempre la lista de reproducción en la pantalla

Reproducción en curso. Para ello, puedes usar un patrón de vista de lista y el

desplazamiento vertical para permitir que los usuarios naveguen por la lista de

reproducción fácilmente. Asegúrate de que el resto de la página tiene un diseño fijo,

para que no se desplace en dos direcciones y cause confusión a los usuarios. Muestra

otra información en una sección de ancho fijo junto a la lista de reproducción, tal como

se muestra en la imagen siguiente.

También puedes permitir que los usuarios deslicen transversalmente para seleccionar

elementos y administrar la lista de reproducción tal como se muestra aquí.

Navegación 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

rápidamente al siguiente clip o episodio. Esta imagen muestra botones Anterior y

Siguiente en una experiencia de lista de reproducción.

En el caso de aplicaciones de música, donde las interacciones de anterior y siguiente son

más comunes, estos comandos se presentan mejor en el Canvas tal como se describe en

la sección de Comandos a continuación.

Comandos

Controles multimedia

Para aplicaciones multimedia que tienen listas de reproducción de música y vídeo, la

colocación de controles de reproducción en una ubicación coherente ayuda a los

usuarios a interactuar con los recursos sin problemas. Si quieres más información sobre

los comandos, lee Diseño de comandos para aplicaciones de la Tienda Windows.


El botón Reproducir/Pausa y el control deslizante de transporte son controles

habitualmente cruciales para la reproducción de multimedia, por lo que se pueden

colocar en el Canvas y mostrarse en cuanto el usuario toque la pantalla o deslice

rápidamente el dedo. Reproducir/Pausa debe ser un botón que refleje la acción que

ocurre cuando se toca. Por ejemplo, cuando se reproduce música, el botón debe mostrar

"Pausa" como la acción, y viceversa. Esta imagen muestra controles en una aplicación

multimedia.

Si tu aplicación 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 película o canción. Para evitar esta duplicación, no uses a la

vez el control de transporte y los controles de rebobinar/avanzar.

Otros controles multimedia como Anterior y Siguiente (canción o episodio) dependen

realmente de los escenarios de tu aplicación. Por ejemplo, en el caso de una película que

se está reproduciendo, Anterior y Siguiente no tienen mucho sentido, pero en el caso

de una lista de reproducción de música o programas o series de televisión con episodios,

son muy útiles. Si usas los controles Anterior y Siguiente en tu aplicación, colócalos

con Reproducir/Pausa y el control deslizante de transporte, para que, cuando el

usuario toque o deslice rápidamente 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 reproducción de música, el botón Anterior no será

válido hasta que la reproducción empiece (porque el usuario está al principio de la lista

de reproducción y no hay ninguna pista “anterior”).

Los controles multimedia aparecen al tocar y deslizar rápidamente. La barra de la

aplicación aparece al deslizar rápidamente desde el borde. Siempre que el usuario

desliza rápidamente el dedo para mostrar la barra de la aplicación, muestra también 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

aplicación si así lo quiere.

Además de controles multimedia de la interfaz de usuario, puedes dar a los usuarios más

control sobre su experiencia de reproducción de multimedia si les permites controlar tu

aplicación con botones multimedia de teclado o botones multimedia remotos como:

Reproducir Pausa Avance rápido

Un control deslizante de control de volumen y un botón de silencio están disponibles en

los botones de hardware y no hace falta duplicarlos en tu aplicación.

Otros comandos que no son tan cruciales para la reproducción de multimedia pueden ir

en la barra de la aplicación: como la alternancia entre modo de pantalla completa,

subtítulos opcionales y metadatos Lee Directrices y lista de comprobación de barras de

aplicación si quieres más información sobre el uso de la barra de la aplicación.

Para administrar listas de reproducción, considera la posibilidad de colocar también

botones para "quitar de la lista de reproducción", "borrar cola", "guardar cola", "subir en

la cola" y "bajar en la cola" en la barra de la aplicación.

Estado acoplado

Para el estado de aplicación acoplada, la interacción para los controles multimedia debe

ser la misma: tocar el Canvas para mostrar los controles de reproducción 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 botón Reproducir/Pausa en una aplicación

multimedia acoplada.



Reproducción en primer plano y en segundo plano

Si tu aplicación multimedia reproduce música y el usuario cambia a otra aplicación, tu

aplicación puede permitir que el usuario siga escuchando música en segundo plano.

Algunos buenos ejemplos de escenarios multimedia que funcionan bien en segundo

plano son música, radio de transmisión en secuencias, podcasts y vídeos musicales. Pero

si se reproduce contenido visual como programas de televisión y películas, tu aplicación

debería pausar automáticamente cuando el usuario cambie a otra aplicación. De esta

forma, los usuarios pueden volver al momento en que lo dejaron cuando vuelvan a la

aplicación, sin perderse ningún contenido.

Para ver más información sobre la reproducción de multimedia en segundo plano, lee el

MediaControl.Soundlevel | soundLevel property y el documento Reproducción de

audio en una aplicación 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

aplicación y controlar la reproducción sin tener que volver a la aplicación. Los usuarios

pueden presionar un botón de volumen del hardware en su dispositivo para acceder a

controles multimedia y metadatos de una forma rápida y fluida desde fuera de la

aplicación. Ofrece información sobre la pista y el nombre del intérprete para que los

usuarios sepan lo que se está reproduciendo. Si tu aplicación está cargando o

descargando contenido, puedes ofrecer información del estado al usuario para que sepan

el estado de su reproducción de archivos multimedia. La imagen siguiente muestra

controles de transporte del sistema.

http://msdn.microsoft.com/es-es/library/windows/apps/windows.media.mediacontrol.soundlevel.aspx



Volver a la experiencia de reproducción de multimedia

Si un usuario usa tu aplicación, navega para agregar más canciones a la lista de

reproducción o compra música nueva, es importante contar con un lugar coherente al

que navegar para la Reproducción en curso de música y vídeo. Esto permite a los

usuarios volver rápidamente a la experiencia de Reproducción en curso.

La imagen siguiente muestra lo fácilmente accesible que es la barra de navegación

cuando los usuarios realizan otras tareas relacionadas con multimedia. Los usuarios

pueden navegar rápidamente a la sección de Reproducción en curso de la aplicación

cuando así lo quieran.

Clasificación y revisión

La clasificación y revisión de contenido multimedia es un escenario importante para la

mayoría de aplicaciones multimedia. Considera la posibilidad de colocar estrellas en la

parte superior de una sección de tu aplicación que muestre revisiones para que los

usuarios puedan revisar rápidamente 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 táctil. Al presionar Entrar se enviará la revisión.

El cuadro de texto puede crecer si es necesario en el caso de una revisión más larga.

Los usuarios pueden ver más revisiones si tocan el encabezado, tal como se muestra

aquí.

Tipografía en aplicaciones multimedia

Sigue las instrucciones de la tabla de tipos para crear una sensación de ritmo y

estructura del contenido. Para alinear la tipografía de tu aplicación multimedia con la de

Windows 8, usa Segoe Semilight de 11 puntos como el tamaño principal para el

contenido, y Segoe UI Light de 20 puntos para títulos y subencabezados. Si necesitas un

tamaño inferior, usa Segoe UI Regular de 9 puntos para títulos cortos y créditos. No

especifiques tipos por debajo de los 9 puntos.

Usa Segoe UI Light de 42 puntos con moderación para titulares y títulos. Evita

configurar encabezados, como “Música” o “Películas” de 42 puntos. Reserva el tamaño

de tipografía más grande para el nombre de la película, del álbum o de la pista musical.

Cuando uses el tamaño de tipografía más grande, es importantísimo que apliques

interletraje y puntuación correcta. Usa comillas curvas y apóstrofos en lugar de comillas

rectas. El ejemplo siguiente muestra el uso correcto e incorrecto de la puntuación.

Aunque la personalidad de Windows 8 requiere el uso de mayúsculas tipo oración,

puedes decidir que para tu contenido es más apropiado el uso de todo mayúsculas, todo

minúsculas o tipo título. Ten en cuenta que estos tratamientos tipográficos no se

transmiten a muchos idiomas traducidos. Asegúrate de usar estilos de uso de

mayúsculas y minúsculas coherentemente y de diferenciar partes distintas del contenido;

no solo se trata de agregar interés visual a la tipografía de la aplicación.

Si decides salirte de esta recomendación, trata de usar un máximo de cuatro tamaños y

estilos diferentes de fuente. Usa el color y el tamaño de fuente para diferenciar el

contenido que se muestra en el mismo tipo de fuente.

El documento Directrices y lista de comprobación de texto y tipografía contiene más

información sobre las prácticas recomendadas para las fuentes, como el color, el tamaño

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 aplicación, o desde ella, que pueden diferenciarla del resto. Si

deseas permitir que los usuarios compartan contenido de la aplicación, la aplicación

debe ser un origen de contenido compartido. Si deseas permitir que los usuarios usen

datos de otras aplicaciones, la aplicación debe ser un destino de contenido compartido.

También puedes admitir las dos formas de uso compartido, según las necesidades

específicas de la aplicación.

Compartir contenido procedente de tu aplicación 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 vídeos que encuentran interesantes o canciones que están

escuchando con cualquier aplicación que admita este formato. Esto permite muchos

escenarios atractivos, como compartir vídeos graciosos en redes sociales o enviar por

correo electrónico recomendaciones de películas o canciones a los amigos. También

permite transformar música, fotos o vídeo de tu aplicación multimedia de una manera

interesante mediante otras aplicaciones de Windows, como aplicaciones de filtro de

cámara y aplicaciones de autosintonización, etc.

Compartir contenido en tu aplicación de entretenimiento

Si tu aplicación admite el almacenamiento de fotos, música o vídeos para compartir con

amigos, familiares o todo el público, debes registrarla para el Contrato para aceptar

contenido compartido. De esta forma, los usuarios podrán aprovechar fácilmente la

aplicación para organizar sus elementos multimedia de otras aplicaciones y llegar a un

público más amplio.

Si tu aplicación multimedia puede transformar el contenido de otras aplicaciones de

forma interesante (ya sea mediante la aplicación de filtros especiales en fotografías,

grabaciones de música con autosintonización o la composición de panorámicas, etc.),

debes registrarla para el Contrato para aceptar contenido compartido. De esta forma, los

usuarios podrán aprovechar fácilmente la aplicación para descubrir su valor con

contenido de otras aplicaciones.

Buscar

La búsqueda es un escenario importante en aplicaciones multimedia. A menudo, las

aplicaciones multimedia muestran resultados de búsquedas desde varias categorías. El

uso del acceso a Buscar de Windows 8 ofrece una experiencia centralizada para todas

las necesidades de búsqueda del usuario, mientras lo ayuda a analizar diferentes

categorías de resultados.

Si quieres más información sobre la búsqueda, lee Directrices y listas de comprobación

para búsqueda. La imagen siguiente muestra una experiencia típica de búsqueda.



Si tu aplicación tiene más escenarios de búsqueda avanzada que incluyen filtrado y

ámbitos de búsqueda, puedes ofrecerlos en el Canvas de la aplicación cuando sea

apropiado.

Además, el uso de sugerencias de consulta ayuda a completar automáticamente

consultas de búsqueda del usuario y agiliza sus búsquedas al evitar la necesidad de

escribir toda la cadena.

Configuración

Todas las opciones de configuración aplicables para aplicaciones multimedia, como

información de cuenta de usuario, información de suscripción, configuración de

privacidad y configuración de notificaciones, deben estar activas en el acceso a

Configuración. Ofrece un lugar único para que los usuarios puedan retocar su

configuración. Y además evita que la interfaz de usuario de tu aplicación se llene con

configuraciones diferentes. Esta imagen muestra configuraciones en una aplicación

multimedia.

Dispositivos

El contrato de dispositivos ofrece una buena opción de conexión para tu aplicación. Tus

usuarios pueden querer ver películas o vídeos en televisión y reproducir música en

dispositivos de audio. La integración 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 dinámicos en aplicaciones

multimedia. Iconos para aplicaciones de películas que muestran la última película

recomendada para el usuario, nuevas entregas disponibles en DVD, vídeos muy

populares —todo esto ayuda a captar de nuevo al usuario. De forma parecida, en las

aplicaciones de música: iconos que muestran álbumes nuevos de un intérprete favorito,

música que está en reproducción o un intérprete recomendado según los intereses del

usuario siguen llevando al usuario a tu aplicación cuando descubren contenido nuevo

inesperado en tu icono. Estas imágenes muestran iconos dinámicos que presentan

información.

Al permitir a los usuarios anclar diferentes géneros de cine, canales de televisión,

intérpretes y listas de reproducción a Inicio, les estás permitiendo ver notificaciones

adaptadas sobre el contenido en el que están más interesados y acceder rápidamente al

contenido que más les preocupa. Este es otro motivo para hacer que los usuarios

vuelvan a tu aplicación. Las imágenes 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 aplicación no se está ejecutando, mantendrás al usuario

actualizado con las últimas noticias, lo que hará que vuelva a tu aplicación. Pero

asegúrate de que las notificaciones del sistema son opciones que el usuario pueda

habilitar en la configuración de la aplicación a través del acceso a Configuración,

porque pueden ser bastante intrusivas para algunos usuarios.


Activación de roamina

Activar roaming es mover la configuración y las preferencias de un dispositivo a otro.

La mayoría de la gente tiene más de un equipo con Windows. Si creas una aplicación

que ofrezca una experiencia de usuario coherente en todos sus equipos con Windows 8,

estarás dando a los usuarios lo que esperan. Siempre que sea posible, activa roaming de

las opciones de configuración de la aplicación, 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 activación de roaming

en Directrices para la configuración de una aplicación y Administrar datos de la

aplicación.

Orientación y vistas

Vertical y horizontal

Cuando diseñes tu aplicación multimedia para Windows 8, considera todas las vistas

que pueda ofrecer, como diferentes resoluciones de pantalla y tamaños de dispositivo.

Windows 8 facilita escalar el diseño de pantallas de alta resolución y de diseño vertical,

lo que incluirá más contenido en tu aplicación con dispositivos más grandes. Muestra tu

aplicación en vista horizontal y vertical. Para ciertas vistas en tu aplicación, como ver

una película, puede tener sentido bloquear la vista en horizontal.

Vista acoplada

Windows 8 permite a los usuarios realizar múltiples tareas "acoplando" una aplicación

junto a otra. La vista acoplada es una excelente forma de aumentar el tiempo de la

aplicación en pantalla y atraer a los usuarios por periodos más largos. Tener un estado

acoplado para cada vista de tu aplicación permite a los usuarios realizar varias tareas

mientras usan la aplicación y los resultados que ofrece y mantenerla en la pantalla por

más tiempo, incluso cuando están haciendo otras cosas.

Existen escenarios atractivos en los que el usuario querrá poder realizar varias tareas

con una aplicación multimedia. Un usuario puede querer ver una competencia deportiva

transmitida en vivo mientras navega en la Web, o escuchar su lista de reproducción de

Spotify mientras lee las noticias. Es importante adaptar las experiencias básicas de

reproducción para que la vista acoplada admita estos escenarios comunes. Es muy

recomendable que las otras experiencias de la aplicación tengan vistas acopladas

adaptadas para que se mantenga el contexto cuando se cambie el tamaño de la

aplicación.

Esta imagen muestra ejemplos de aplicaciones de entretenimiento en un estado acoplado.

Observa que hay una vista útil y adaptada de cada página, lo que permite al usuario

mantener el contexto cuando la aplicación cambia de tamaño.




Asimismo, considera la experiencia cuando la aplicación está en modo de relleno y

cuando se usa junto con una aplicación acoplada. Es posible que se muestre a una

relación de aspecto que no sea 16:9, de modo que debes mostrar los vídeos y otro

contenido multimedia según corresponda. Si la relación 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 presentación

A menudo las aplicaciones multimedia tienen que descargar contenido actualizado de la

Web. Para hacer que tu aplicación muestre una respuesta rápida, no esperes a que se

descarguen todas las imágenes de cada categoría para mostrar la pantalla de destino.

Esto puede impacientar a los usuarios. Muestra al usuario la página de destino de la

aplicación después de descargar los iconos de contenido y de cargar imágenes y otros

datos de forma asincrónica. Esta imagen muestra una pantalla de presentación de

ejemplo.

Procedimientos recomendados de música y vídeo

Aplicaciones de música

Recomendación Descripción

Registra tu aplicación

como elementos

multimedia en segundo

plano

Si la aplicación puede reproducir listas de reproducción de

música, puedes hacer que la reproducción continúe en

segundo plano aunque el usuario cambie a otra tarea. Para

obtener más información, consulta Cómo reproducir audio

en segundo plano.

Responde a todos los

botones multimedia del

hardware

Registra y responde a los eventos de Reproducción,

Pausar, Reproducir-Pausa, Pista siguiente, Pista anterior y

otros botones multimedia para que los usuarios puedan

controlar la aplicación desde controladores remotos o

botones de teclados multimedia. Para obtener más

información, consulta Cómo configurar teclas para

controles multimedia.





Proporciona información

de "Reproducción en

curso" en los controles de

transporte del sistema

Las aplicaciones que pueden reproducir en segundo plano

deberían proporcionar información de la pista, nombre del

intérprete y la carátula del álbum en los controles de

transporte del sistema para que los usuarios tengan amplia

información sobre lo que se está reproduciendo, aunque no

estén en la aplicación. Si la aplicación tiene un retraso

cuando el usuario cambia de pista, rellena el campo de

nombre de pista con "Cargando pista siguiente" para que

no dé la sensación de que la aplicación ha dejado de

funcionar. Para obtener más información, consulta Guía

para desarrolladores de controles de transporte del sistema.

Aplicaciones de vídeo

Recomendación Descripción

Elige el tipo correcto

de transmisión por

secuencias para la

aplicación

En la mayor parte de los casos, registra la aplicación como de

elementos multimedia solo en primer plano

Si los usuarios tiene n música reproduciéndose en

segundo plano cuando se inicia el vídeo, la secuencia

hará que se pause automáticamente toda la música en

segundo plano para que los usuarios puedan escuchar el

sonido proveniente del vídeo. Cuando los usuarios

abandonen la aplicación, pon el vídeo en pausa

automáticamente para que los usuarios puedan continuar

más tarde exactamente desde donde lo dejaron sin que se

pierda ninguna parte del vídeo. Para más información,

consulta Reproducción de audio en una aplicación de la

Tienda Windows.

Si el usuario reproduce vídeos de música o crea una lista de

reproducción de vídeo, registra la aplicación como elementos

multimedia en segundo plano

Cuando los usuarios usan la aplicación como un

reproductor de música o para crear una cola de vídeos,

esperan poder oír la reproducción incluso cuando

abandonen la aplicación. Para obtener más información,

consulta Cómo reproducir audio en segundo plano.

Responde a todos los

botones multimedia

del hardware

Registra y responde a los eventos de Reproducción, Pausar,

Reproducir-Pausa, Pista siguiente, Pista anterior y otros botones

multimedia para que los usuarios puedan controlar la aplicación

desde controladores remotos o botones de teclados multimedia.

Para obtener más información, consulta Cómo configurar teclas

para controles multimedia.

http://go.microsoft.com/fwlink/?linkid=246712







Temas relacionados


Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows


Diseño de aplicaciones de noticias

espectaculares para Windows (Windows)













En este artículo

Introducción Diseño y navegación en aplicaciones de noticias Comandos Contratos Tipografía en las aplicaciones de noticias Actualidad del contenido Conectados y en directo Orientación y vistas Temas relacionados

En este tema se describe cómo crear fantásticas aplicaciones de noticias para

Windows 8.

















http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#layout_and_navigation

http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#commanding

http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#contratos

http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#typography_in_news_apps

http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#freshness_of_content

http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#connected_and_alive

http://msdn.microsoft.com/es-es/library/windows/apps/hh868272.aspx#orientation_and_views


Introducción


táctiles a portátiles y equipos de escritorio de alta resolución. Estos diferentes factores

de forma representan una oportunidad única para que los editores de noticias ofrezcan

fantásticas experiencias en distintos casos y escenarios de uso y lleguen a un público

mayor con una aplicación.

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 visual—En Windows 8, el contenido es el rey y el sistema operativo queda en un segundo plano. Los lectores serán más atractivos y distraerán menos que antes.

Deja que tu marca brille—Windows 8 te permite incluir el prestigio y el reconocimiento de tu marca en una aplicación con iconos dinámicos, una pantalla de presentación y tu logotipo, entre otras cosas.

Contratos para contenido compartido y contratos para dispositivos—La nueva funcionalidad de nivel superior del sistema operativo hace que el contenido se pueda compartir mejor y que la aplicación pueda usar los dispositivos que están próximos.

Notificaciones—Usa los iconos dinámicos y las notificaciones del sistema para alertar al usuario de nuevo contenido, aumentando así la atracción y la repetición de uso.

Diseño y navegación en aplicaciones de noticias

Las aplicaciones de noticias suelen presentar las noticias en numerosas categorías

distintas. Con el patrón de navegación jerárquico para aplicaciones de la Tienda

Windows, puedes hacer que el uso de tu aplicación sea realmente rápido y dinámico, al

tiempo que proporciona el contenido que interesa a los usuarios.

Modelo jerárquico

En una aplicación de noticias suele haber gran cantidad de contenido que el usuario

puede descubrir y consumir. Además, para administrar la información, las aplicaciones

y los sitios web de noticias tienden a usar numerosas categorías distintas. Por ejemplo,

está la típica sección "última hora" o "principales historias", que se suele destacar en

primera página. También es probable que haya otras categorías, tales como política,

internacional, tecnología, deportes, economía y ocio, con una selección de artículos

mostrados en el nivel superior de la aplicación. Usar el modelo jerárquico de

Windows 8 para diseño e interacción permite a tu aplicación propagar contenido

interesante al usuario en el nivel superior, en lugar de ocultarlo en pestañas o menús. La

página de aterrizaje de nivel superior, o concentrador, puede ofrecer una amplia

variedad visual, atraer a los usuarios y llevarlos a distintas partes de la aplicación.


Cuando planees el diseño de la aplicación, asigna la prioridad de los escenarios y las

categorías en función de su importancia relativa y de la atracción que provocan en el

mayor número de usuarios. Por ejemplo, las categorías de noticias de última hora o

principales noticias suelen ser importantes para la mayoría de los usuarios de

aplicaciones de noticias, por lo que deben ocupar un lugar destacado en la página del

concentrador.

Este diagrama ilustra un modelo jerárquico de ejemplo para una aplicación de noticias

de ejemplo.

Página del concentrador de tu aplicación

El concentrador de tu aplicación puede mostrar las principales noticias, la última hora,

contenido recomendado para el usuario y los artículos destacados de todas las categorías

en una superficie que se puede mover panorámicamente de forma sencilla. Cada grupo

de categorías puede propagar contenido atractivo al concentrador. Cuando un usuario

pulsa el encabezado de un grupo, puede explorar una sección determinada y ver más

contenido.

Categorías de noticias

Distribuye uniformemente las categorías de la aplicación en la página del concentrador

de la aplicación y muestra unos pocos artículos de cada categoría para atraer al usuario a

esa categoría. Puedes indicar que hay más artículos en una categoría 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 más recientes y más importantes.

Puedes resaltar las noticias de última hora y las historias en curso en un primer plano de

la página del concentrador, haciéndolas más grandes que otro contenido del

concentrador y usando variaciones de color y espesor en función de la prioridad de la

noticia.

En el ejemplo siguiente, los eventos en directo se distinguen mediante la colocación y el

tamaño del contenido, y mediante el texto "En directo" en rojo antes del titular para

captar la atención del usuario a dicho contenido.

Marcadores/guardar para más tarde

Los usuarios guardan y marcan los artículos para continuar leyéndolos más adelante. Si

tu aplicación permite hacer esto de forma rápida y dinámica, los usuarios continuarán

usándola porque volver a los artículos que han guardado les resulta sencillo. Agrega una

sección a tu página del concentrador llamada "Marcadores" o "Favoritos" donde

almacenar todos los artículos guardados del usuario. Observa el siguiente ejemplo.

Los usuarios pueden agregar artículos a la sección "Marcadores" o "Favoritos" y

quitarlos cuando hayan terminado de leer.

Encabezado desplegable

El encabezado también permite a los usuarios saltar lateralmente de una categoría a otra.

Por ejemplo, piensa en un usuario que está leyendo un artículo de deportes y quiere ir a

la sección de ocio de la aplicación de noticias. El usuario puede hacerlo fácilmente con

el encabezado desplegable, tal y como se muestra aquí.

Zoom semántico

El zoom semántico permite a un usuario navegar rápidamente en una sola vista. Por

ejemplo, el usuario puede hacer un gesto de reducir y moverse panorámicamente para ir

desde una de las noticias principales del concentrador a la última categoría de noticias

de la página del concentrador. El ejemplo siguiente muestra cómo los usuarios pueden

usar el zoom semántico para desplazarse rápidamente por las diferentes categorías de

noticias.

Estos son algunos ejemplos más de zoom semántico en acción en una aplicación de

noticias.

Cuando uses el zoom semántico, permite que el usuario pueda reorganizar las categorías

de la página del concentrador seleccionando un grupo y cambiándolo de lugar. De esta

manera, pueden personalizar la página del concentrador para que les guste aún más tu

aplicación. Por ejemplo, quizás un usuario prefiera la categoría "Tecnología" de la

aplicación y quiera colocarla antes que la categoría "Política". Al proporcionar esta

capacidad a los usuarios, estás ajustando la apariencia de la aplicación a sus preferencias.

El zoom semántico también se puede usar en la página específica de una categoría para

navegar por los diferentes artículos de dicha categoría. El zoom semántico permite que

los usuarios salten rápidamente de un artículo a otro.

Vista de artículo de tu aplicación

La vista de artículo de tu aplicación es el lugar donde se muestra el contenido. Permitir

que los usuarios disfruten de su experiencia en esta vista hace que tu aplicación

destaque porque aquí es donde pasan la mayor parte del tiempo en la aplicación. Es

importante que muestres el contenido de forma intuitiva y que esta vista sea visualmente

agradable. También es importante garantizar que la navegación en esta vista sea eficaz.

En una aplicación de noticias, la vista de artículo debe moverse panorámicamente en

horizontal para que los usuarios puedan usar los pulgares para moverse por el contenido

de forma sencilla y ergonómica. Además, considera la posibilidad de dividir los

artículos en páginas. En un artículo, los saltos de página dan a los usuarios una idea de

cuánto han leído y les permiten ir fácilmente donde quieran.

Sin embargo, para lograr un diseño y una experiencia del usuario realmente magnífica, a

la hora de crear la noticia piensa que los usuarios la verán:

En una tableta En un portátil En un equipo de escritorio

Cada uno de estos escenarios saca partido de los diferentes diseños 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 portátil o en

un equipo de sobremesa es más probable que las lean en una vista horizontal. Por lo

tanto, diseña las vistas de artículo con ambas orientaciones en mente. Además, el diseño

pensado para una tableta también debe optimizarse para la navegación táctil. Como se

sugirió anteriormente, es buena idea dividir el contenido en páginas. Una manera de

agregar páginas, centrada en los gestos táctiles, es usar puntos de acople en el artículo

para crear "badenes". Estos indican al usuario en qué lugar del artículo se encuentran

mientras se mueven panorámicamente a toda velocidad por el artículo.

Como la orientación horizontal es más habitual para los usuarios de portátiles y equipos

de escritorio, piensa cómo distribuir el artículo para evitar un aburrido conjunto de

columnas. Una técnica de diseño es el uso de bajorrelieves de contenido, imágenes u

otros elementos multimedia que abarcan varias columnas. Puedes agregar citas o incluir

títulos que abarquen toda la página para aportar variedad al diseño. Además, en los

escenarios de portátiles y equipos de escritorio, los usuarios usarán principalmente el

teclado y el mouse para navegar. Por lo tanto, es importante asegurarse de que el diseño

responde tanto a la entrada del teclado como del mouse.

Además, recomendamos usar la cuadrícula y la tabla de tamaños de tipografía en las

aplicaciones de noticias e información meteorológica. De esta manera se crea una

jerarquía visual que permite a los usuarios explorar y consumir gran cantidad de

información de forma rápida 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 seña 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

información del tiempo, podrías 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 opción popular para los

sitios de noticias en Internet y también puede ser una opción familiar. Si decides

especificar fuentes del sistema alternativas, asegúrate de confirmar que se instalan con

Windows 8 y que no requieren la instalación de una aplicación diferente como

Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia, asegúrate de

tener los derechos legales suficientes para incluirlas con tu aplicación.

Independientemente de las fuentes que uses, la tabla de tipos de Windows 8 ofrece

buenas indicaciones sobre el número máximo de tamaños y estilos que debes usar.

Para obtener más información acerca de los procedimientos recomendados para fuentes,

como tamaño, color y espesor, consulta Directrices y lista de comprobación de texto y

tipografía.

Usar un conjunto pequeño de tamaños de fuente en toda la aplicación, tal y como se

recomienda en las indicaciones de la tabla de tipos, crea una sensación de estructura y

ritmo en el contenido. Si varios elementos usan el mismo tamaño de fuente de la tabla

de tipos pero transmiten diferentes tipos de información—, por ejemplo, el nombre de

usuario y comentario en la sección de conversaciones siguiente, o el texto del cuerpo del

artículo y el encabezado de artículos relacionados, —considera la posibilidad de usar

colores, espesores y estilos de fuente para establecer una jerarquía de la información.



Puedes mostrar los artículos relacionados y los comentarios en la vista de artículo para

conseguir que los usuarios sigan disfrutando de su experiencia de lectura y permanezcan

más tiempo en tu aplicación. Esta es una posible apariencia.

Navegar entre artículos

Los usuarios suelen estar interesados en un tema determinado o en una categoría de

noticias y pueden consumir varios artículos relacionados. Si el contenido de tu

aplicación suele ser corto, deja que el usuario se mueva panorámicamente a la derecha

después del final del artículo para ir al siguiente artículo, y hacia la izquierda antes del

principio del artículo para ir al artículo anterior. También puedes ofrecer zoom

semántico en esta vista para que los usuarios puedan cambiar a diferentes artículos

rápidamente.

Si el contenido de cada publicación o artículo suele ser largo, considera la posibilidad

de colocar los botones "artículo anterior" y "artículo siguiente" en la barra de la

aplicación superior para que el usuario pueda cambiar fácilmente a otros artículos.

Puedes ofrecer estos botones además de permitir que los usuarios pasen atrás y adelante

de un artículo a otro. Puedes probar diferentes estilos para estos botones; por ejemplo,

mostrar miniaturas de los artículos anterior y siguiente ofrece una bonita vista previa del

contenido al que cambiarán. Otra alternativa es usar los glifos estándar "anterior" y

"siguiente" y probar a hacer que la barra de la aplicación superior sea translúcida o

transparente para que no distraiga del contenido. Este es un ejemplo de estos botones en

la barra de la aplicación 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 aplicación

inferior porque reúne todos estos comandos en un solo lugar donde los usuarios pueden

encontrarlos.

Para obtener más información sobre los comandos, consulta Diseño de comandos para

aplicaciones de la Tienda Windows.

Marcadores de posición

Normalmente, los usuarios marcan los artículos desde la página del concentrador

cuando guardan los artículos para leerlos más adelante, o cuando están leyendo un

artículo y no pueden terminarlo por el momento. Una aplicación de noticias atractiva

debe admitir ambas situaciones para que los usuarios puedan marcar los artículos

seleccionados con la barra de la aplicación inferior desde la página del concentrador y

de categorías, y mientras están leyendo un artículo. El botón de marcador debe ser un

botón de alternancia, —es decir, un único botón que agrega o quita un marcador.

Incluye siempre los marcadores en el perfil móvil para que los usuarios puedan

continuar leyendo sus artículos marcados independientemente del dispositivo que estén

usando. Por motivos de coherencia, asegúrate de que el botón permanece en el lado

izquierdo de la barra de la aplicación, como en el ejemplo siguiente, aunque la función

del botón sea contextual en la página del concentrador pero global en la vista de artículo.



Consulta Diseño de navegación para aplicaciones de la Tienda Windows para obtener

más información sobre la jerarquía de navegación de una aplicación.

Selección de texto

Permite la selección de contenido en tu aplicación, especialmente de texto en la vista de

artículo, porque los usuarios tienden a seleccionar extractos de los artículos. El sistema

muestra automáticamente el menú contextual para copiar el contenido seleccionado.

Contratos

Siempre que sea razonable, tu aplicación de noticias debe usar los contratos de

Windows 8 para enriquecer las experiencias del usuario y ayudar a conectar la

aplicación con el resto de su experiencia con Windows 8. Para obtener más información

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 aplicación 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, tendrás todos estos escenarios sin tener que agregar código

para la integración adicional en tu aplicación. Si deseas permitir que los usuarios

compartan contenido desde la aplicación, la aplicación debe ser un origen de contenido

compartido. Si deseas permitir que la aplicación use datos de otras aplicaciones, la

aplicación debe ser un destino de contenido compartido.

Compartir contenido procedente de tu aplicación de noticias

Una mayoría de las aplicaciones de la categoría de noticias son sobre el consumo de

contenido de noticias. El uso compartido de artículos e historias interesantes es hoy en

día una característica clave de las aplicaciones de noticias, de modo que pensamos que

cada una de estas aplicaciones deberían ser un origen del contrato para contenido

compartido.

Que la aplicación sea un origen de contenido compartido significa permitir que su

contenido, ya sean direcciones URI, mapas de bits, código 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 fácil imaginar el paisaje de uso compartido social con un contrato de

este tipo. Puedes hacer que tu aplicación pueda compartir al instante en redes sociales,

aplicaciones de blogs y aplicaciones de correo electrónico.

Más allá del uso compartido social, el contrato permite que los usuarios puedan

completar tareas de investigación, planificación 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 portátil ligero junto con un vínculo

al artículo para consultarlo en el futuro, puedo hacerlo si el origen de contenido

compartido proporciona los tipos de datos correctos que representan esa información.

Si admites el Contrato para ofrecer contenido compartido, también permites que la

aplicación comparta contenido de forma directa con los dispositivos cercanos de la

misma manera que Tocar y enviar.

Como aplicación 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 aplicación con un amplio conjunto de

aplicaciones de destino de contenido compartido. En el siguiente ejemplo, Contoso

News es la aplicación de origen. Consiste en compartir texto, una miniatura y un

vínculo del artículo que está resaltado. El panel Compartir tiene una lista de vínculos

rápidos y aplicaciones de destino de contenido compartido que admite el recurso

compartido de estos tipos de contenido.

Compartir contenido en tu aplicación de noticias

Algunas aplicaciones de noticias serán excelentes para agregar artículos desde otras

aplicaciones, proporcionando un método para que el usuario organice y consuma

información de un gran conjunto de orígenes de manera familiar y mantenido

automáticamente. Estas aplicaciones deberían invertir en admitir el Contrato para

aceptar contenido compartido.

Aceptar contenido compartido significa que se permite que la aplicación consuma los

datos proporcionados por las aplicaciones que ofrecen contenido compartido de un

modo interesante y significativo. En el siguiente ejemplo, puedes compartir un artículo

de una aplicación de noticias al agregador de noticias para leerlo más tarde.

Para obtener más información sobre el contrato para contenido compartido, consulta

Uso compartido y recepción de contenido.

Comentarios e integración con otras aplicaciones sociales

Las aplicaciones de noticias aportan valor porque permiten a sus usuarios publicar

comentarios o discutir artículos, 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. Además, no necesitas invertir tiempo en

codificar para redes sociales específicas porque cuando se lanzan nuevas redes sociales,

la aplicación se integra con ellas automáticamente.

Tipografía en las aplicaciones de noticias

Usa la cuadrícula y la tabla de tamaños de tipografía en las aplicaciones de noticias para

crear una jerarquía visual que permita a los usuarios explorar y consumir gran cantidad

de información de forma rápida y sencilla. Aunque el uso de la fuente Segoe UI

especificada en la tabla de tipos es apropiada para contenido de noticias, podrías

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 opción popular para los sitios de

noticias en Internet y también puede ser una opción familiar para tu aplicación de

noticias.


Si decides especificar fuentes del sistema alternativas, asegúrate de confirmar que se

instalan con Windows 8 y que no requieren la instalación de una aplicación diferente

como Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia,

asegúrate de tener los derechos legales suficientes para incluirlas con tu aplicación.

Independientemente de las fuentes que uses, la tabla de tipos de Windows 8 ofrece

buenas indicaciones sobre el número máximo de tamaños y estilos que debes usar.

Usar un conjunto pequeño de tamaños de fuente en toda la aplicación, tal y como se

recomienda en las indicaciones de la tabla de tipos, crea una sensación de estructura y

ritmo en el contenido. Si varios elementos usan el mismo tamaño de fuente de la tabla

de tipos pero transmiten diferentes tipos de información, considera la posibilidad de

usar colores, espesores y estilos de fuente para establecer una jerarquía de la

información. El ejemplo siguiente muestra cómo usar tamaño de fuente, color y espesor

para crear esta jerarquía.

Consulta Directrices y lista de comprobación de texto y tipografía para obtener más

información sobre los procedimientos recomendados para las fuentes, como tamaño,

color y espesor.


Actualidad del contenido

En los escenarios de noticias, es esencial que el contenido de la aplicación esté

actualizado y al día. Veamos los elementos que indican la actualidad a los usuarios.

La hora en que se actualizó el contenido por última vez

Mostrar la información de la "última actualización" al usuario fomenta la confianza en

la fiabilidad de tu aplicación de noticias. Muestra en el Canvas información acerca de la

última actualización de forma que no moleste. Esta información debería aparecer con el

estilo de información terciaria (9 puntos) de la tabla de tipos. Observa el siguiente

ejemplo.

Hora de publicación del artículo

Mostrar cuándo se publicó el artículo es otra manera habitual de mantener a los usuarios

informados de la actualidad del contenido que están leyendo. Para estas marcas de hora,

usa el estilo de información terciaria de la tabla de tipos, color y espesor para

distinguirla de otro contenido del diseño que pudiera usar la misma tabla de tipos.

Actualización del contenido

Las aplicaciones de noticias deben mostrar siempre el contenido más actualizado. Para

asegurarte de que el contenido de tu aplicación esté al día, descarga los datos cuando se

presente la oportunidad. Por ejemplo, mientras el usuario está leyendo un artículo,

descarga contenido nuevo para la página del concentrador de manera que, cuando el

usuario vuelva a esa página, se haya actualizado. Sin embargo, no descargues datos en

segundo plano mientras el usuario está usando una conexión móvil inalámbrica, porque

las aplicaciones deben minimizar el uso de datos en segundo plano cuando están usando

movilidad o banda ancha móvil.

Además, asegúrate de que tu aplicación puede administrar escenarios sin conexión y

notificar a los usuarios cuando el contenido no esté disponible sin conexión.

En Mantenimiento de la conectividad de red, consulta los procedimientos recomendados

para los escenarios sin conexión y de uso medido.

Si tu aplicación necesita actualizar el contenido de una página en la que se encuentra el

usuario en ese momento, indica el progreso de la actualización en la parte superior del

área del Canvas, tal y como se describe en Directrices y lista de comprobación 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

comprobación 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 aplicación 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.

Asegúrate de que la aplicación tiene capacidad de respuesta incluso aunque se esté

actualizando el contenido. Además, si la conexión es débil, asegúrate de establecer un

valor de tiempo de espera y mostrar la interfaz de usuario sin conexión de tu aplicación.

La imagen siguiente muestra el contenido de la página del concentrador oculta durante

una actualización.

Conectados y en directo

Los iconos dinámicos y las notificaciones permiten mostrar contenido actualizado

cuando los usuarios están en la pantalla Inicio. Con estas características, puedes crear

una conexión con el usuario y llenar de actividad tu aplicación.


Mostrar en iconos las historias más recientes y las últimas noticias vuelve a captar la

atención del usuario y les atrae de nuevo a tu aplicación cuando descubren nuevas

historias interesantes en el icono de la aplicación. Este es un ejemplo de un icono de la

aplicación que muestra el titular de una noticia.

Permite que los usuarios anclen a Inicio los distintos iconos de categorías de noticias

para que puedan ver las notificaciones personalizadas según esas categorías y acceder

rápidamente al conjunto de noticias particular de su interés. Esta es otra manera de

atraer al usuario a tu aplicación.

Si permites que los usuarios elijan si desean recibir notificaciones del sistema sobre

noticias de última hora, que se mostrarán aunque la aplicación no se esté ejecutando, la

aplicación mantendrá a los usuarios que así lo deseen al día de las últimas noticias y les

atraerá a ella. Esta debe ser una opción elegible que el usuario pueda habilitar en la

configuración de la aplicación, mediante el acceso a Configuración, porque las

notificaciones no solicitadas podrían molestar a los usuarios que no expresen

explícitamente un interés en ver las notificaciones del sistema de las últimas noticias.

Este es un ejemplo de una notificación del sistema.

Movilidad

Como la mayoría de las personas tienen más de un equipo con Windows, tu aplicación

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 móviles para configuraciones, marcadores de artículos, categorías de noticias

favoritas, preferencias de lectura y otros datos de la aplicación que resulten útiles en

todos los equipos del usuario. Consulta las Directrices para perfiles móviles de datos de

la aplicación para obtener los procedimientos recomendados para los perfiles móviles de

los datos de la aplicación.





Cuando diseñes tu aplicación de noticias para Windows 8, ten en cuenta todas las vistas

para tu aplicación, como las diferentes resoluciones de pantalla y tamaños de dispositivo.

Vistas vertical y horizontal

Windows 8 permite ajustar fácilmente el diseño a pantallas con diseño vertical y de alta

resolución, e incluye más contenido en la aplicación en el caso de los dispositivos de

mayor tamaño. Como se muestra en el ejemplo siguiente, que muestra una aplicación en

la vista horizontal y en la vista vertical, la aplicación debe continuar moviéndose

panorámicamente 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 aplicación, pero especialmente para la vista de artículo porque

es una orientación habitual para leer contenido.

El tema sobre diseño de interacción táctil contiene más información sobre cómo se debe

admitir el movimiento panorámico en la aplicación. El tema sobre las directrices para

diseños contiene más información sobre los estados de visualización, las interacciones

del usuario y las orientaciones de pantalla.




Vista acoplada



aplicación en pantalla y atraer a los usuarios por períodos más largos. Tener un estado

acoplado para cada vista de tu aplicación permite a los usuarios trabajar en varias tareas

mientras usan tu aplicación porque la mantienen en pantalla aunque estén haciendo otras

cosas.

El usuario puede acoplar la aplicación por diversos motivos. El posible que haya

vínculos en un artículo y el usuario quiera abrir un nuevo vínculo en el explorador sin

salir del artículo. Primero, acoplará la aplicación de noticias y luego abrirá el vínculo.

Quizás el usuario solo quiera aumentar el tamaño de otra aplicación en ejecución.

Independientemente del motivo por el cual el usuario acopla la aplicación, es importante

que dicha acción no inicie una navegación que provoque la pérdida del artículo que el

usuario estaba leyendo.

Cuando la aplicación está acoplada, debes ajustar el flujo de las páginas del artículo

para que se desplacen verticalmente. Los títulos de las noticias del artículo acoplado

deben tener una fuente más pequeña, por lo general, del tamaño del texto del

"subencabezado de página". Para obtener más información sobre los tamaños de fuente

recomendados, consulta el tema sobre las Directrices y lista de comprobación de texto y

tipografía. Si el título es largo, se puede ajustar a varias líneas. Las imágenes grandes

del artículo deben escalarse para que se ajusten al ancho de 320 píxeles. Es posible

apilar verticalmente varias imágenes según corresponda.

También es muy recomendable redistribuir verticalmente el contenido de las páginas de

categorías y del concentrador, de modo que se mantenga el contexto para el usuario,

incluso cuando se cambia el tamaño de la aplicación.



Pantalla de presentación

Como se indicó anteriormente, las aplicaciones de noticias deben descargar con

frecuencia contenido actualizado de Internet. Para que tu aplicación sea más rápida y

con más capacidad de respuesta, no esperes a que se hayan descargado todas las

imágenes de cada categoría antes de mostrar la página de aterrizaje; la espera podría

impacientar a los usuarios. Muestra al usuario la página del concentrador de la

aplicación tan pronto se hayan descargado los titulares de la noticias y después carga

asincrónicamente las imágenes y otros datos.

Durante el corto tiempo de espera hasta que aparezca la página del concentrador,

muestra la pantalla de presentación con un mensaje que informe al usuario de que la

aplicación está descargando contenido. Observa el siguiente ejemplo.

Temas relacionados




Diseño de la interacción táctil







Diseñar impresionantes aplicaciones de

productividad para Windows (Windows)













En este artículo

Introducción Pantalla completa Diseño y navegación en las aplicaciones de productividad Comandos Entrada de datos en aplicaciones de productividad Selección de texto Tipografía en las aplicaciones de productividad Contratos Sentirse conectado y vivo Orientación y vistas Temas relacionados

Windows 8 es una plataforma excelente para aplicaciones de productividad. Además 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 diseño Microsoft y las funcionalidades de Windows 8.














http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#full_screen

http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#layout_and_navigation_in_productivity_apps

http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#commanding

http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#data_input_in_prod_apps

http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#text_selection

http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#typography_in_prod_apps


http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#connected_and_alive

http://msdn.microsoft.com/es-es/library/windows/apps/hh868273.aspx#orientation_and_views


Introducción

Windows 8 proporciona un alcance sin precedente en una gran variedad de dispositivos,

desde tabletas táctiles y centradas en lápiz hasta equipos portátiles y de escritorio de alta

resolución. 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 evaluación y

compras desde la aplicación, con un uso mínimo de codificación, para que puedas

empezar a ganar dinero rápidamente.

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 diseño para las aplicaciones que resalta la creación de contenido de pantalla completa y escenarios de productividad envolventes. Windows se quita de en medio para que el contenido sea lo más importante.

Iconos dinámicos: maximiza la participación y permite a los usuarios volver a la aplicación fácilmente con iconos dinámicos que muestran el contenido reciente en el que ha estado trabajando el usuario. Los iconos secundarios también facilitan la vinculación profunda de contenido y permiten a los usuarios anclar el contenido que usan con mayor frecuencia dentro de la aplicación.

Contrato de Buscar: una nueva función del sistema operativo de nivel superior que ayuda a los usuarios a buscar y organizar su contenido con mayor facilidad que nunca. Tu aplicación se incluye en los resultados de la búsqueda para que los usuarios la reconozcan cuando buscan contenido.

Contrato para contenido compartido: Windows 8 facilita la colaboración y el uso compartido entre aplicaciones, a fin de que tu aplicación 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 fotografías del sistema de archivos y de otras aplicaciones y servicios que participan de los contratos de Selector de archivos.

Zoom semántico: esta característica nativa de Windows 8 permite a los usuarios reducir y alejar una aplicación para obtener una vista panorámica del contenido y los elementos en los que están trabajando. Pruébalo en la pantalla Inicio para verlo en acción.

Vista acoplada: los estados de visualización, incluida la vista acoplada, permiten que dos aplicaciones se ejecuten simultáneamente una al lado de la otra para que los usuarios puedan realizar múltiples tareas y mantenerse productivos con la aplicación en todo momento.

Pantalla completa

Una de las ventajas más 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 aplicación puede usar todos los píxeles 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 aplicación siempre tenga un espacio amplio para mostrar la

información más importante para la tarea que se está realizando. La filosofía de diseño

de "anteponer el contenido al contenedor visual", que resulta tan estimulante y divertida

en las aplicaciones de vídeo o revista, también se aplica a las aplicaciones de

productividad. Cuando se quitan las distracciones, es fácil concentrarse en el contenido

que presenta la aplicación.

Al diseñar una aplicación de productividad, primero identifica la tarea principal del

usuario. Luego usa cada píxel de la pantalla para que tu aplicación realice esa tarea de

manera excelente. Piensa en cómo hacer la tarea más fácil, rápida o divertida gracias a

esta mayor cantidad de espacio. Piensa en una visualización enriquecida de la

información interesante y práctica, en lugar de una representación estática de los datos.

Piensa en cómo la aplicación puede usar el espacio y su ubicación para transmitir la

información. Muchas de las convenciones y los controles que se usan actualmente se

desarrollaron cuando las pantallas de los equipos de escritorio tenían una resolución

más 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

interactúan con la información, la analizan y la manipulan para llevar a cabo su trabajo.

Las aplicaciones de productividad por lo general implican una combinación de

escenarios de creación 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 también varían ampliamente en la complejidad con que

controlan la navegación y la exposición de comandos y experiencias; desde aplicaciones

simples y ligeras para tareas pendientes hasta aplicaciones de creación de contenido

enriquecidas y complejas con menús por niveles que incluyen un sinnúmero de

opciones. Una aplicación de productividad de Windows 8 es fabulosa si permite

navegar entre estas experiencias de un modo rápido, fluido y grandioso.

Diseño y navegación en las aplicaciones de productividad

El diseño de navegación que elijas dependerá de los tipos de escenarios que admita la

aplicación. Si en la aplicación tienes diversas experiencias enriquecidas (por ejemplo, si

presentas varios documentos), con cierta estructura y organización entre ellas, un diseño

jerárquico puede ayudarte a incorporar todo el contenido en el nivel superior en lugar de

esconderlo tras menús o pestañas. Por otro lado, si tu aplicación no tiene una gran

densidad de información o escenarios que requieran de una estructura o jerarquía, elige

un diseño plano que permita a los usuarios navegar rápidamente por las experiencias de

la aplicación. Las aplicaciones con vistas "maestro y detalles" (por ejemplo, las

aplicaciones de correo electrónico y mensajería) 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 diseño de formulario que se sugiere más adelante en este artículo. Elige el diseño que

mejor ayude a los usuarios a encontrar el contenido que les interesa con rapidez y

confianza.

Diseño jerárquico

Las aplicaciones de productividad que tienen una estructura jerárquica y un conjunto de

datos de gran tamaño, como una aplicación de notas con una gran cantidad de notas y

blocs de notas, pueden usar un diseño jerárquico 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 página de concentrador de tu aplicación

La página de concentrador consta de varias secciones, cada una de las cuales se asigna a

diferentes secciones de la aplicación. Cada sección puede exponer contenido o

funciones. El concentrador debe ofrecer una amplia variedad visual para atraer a los

usuarios a distintas partes de la aplicación. Por ejemplo, la siguiente aplicación de notas

muestra algunas de las notas más recientes de cada bloc de notas en el nivel superior. La

siguiente imagen muestra una página 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 página de sección de ese bloc

de notas, si hay más contenido asociado al bloc de notas del que se muestra en la página

principal.

Considera la posibilidad de permitir que los usuarios decidan cómo ordenar su

contenido. Por ejemplo, pueden elegir ordenarlo alfabéticamente, por fecha, por tipo de

contenido o en función de si se comparte o no. El modo correcto de ordenarlo depende

del contenido que presenta la aplicación y del diseño de uso típico de los usuarios. La

siguiente imagen muestra un ejemplo del orden de las notas.

Encabezado desplegable

También puedes usar el encabezado para permitir a los usuarios saltar rápidamente entre

las secciones de la aplicación en sentido lateral. Por ejemplo, un usuario que lee una

nota de un bloc de notas puede moverse rápida y fácilmente a una nota de otro bloc de

notas mediante el encabezado desplegable. La siguiente imagen muestra un encabezado

desplegable en una aplicación de notas.

¾

Zoom semántico

El zoom semántico acerca o aleja el contenido para mostrar su aspecto y permite a los

usuarios navegar rápidamente dentro de una sola vista. (Para más información acerca de

cómo interactúa el usuario en el zoom semántico, consulta las directrices para zoom

semántico). Por ejemplo, en una aplicación de notas, los usuarios pueden alejar y

ampliar rápidamente para pasar de un bloc de notas a otro. Como alternativa, si los

usuarios eligen mostrar sus notas por fecha, pueden pasar rápidamente de las notas más

recientes a las más antiguas.



Esta imagen muestra la agrupación del contenido cuando se aleja.

El zoom semántico también se puede usar en una página de sección específica para

navegar por el contenido de esa sección o categoría. Por ejemplo, en la aplicación de

notas, los usuarios pueden usar el zoom semántico para saltar rápidamente entre

diferentes notas del mismo bloc de notas.

Diseño plano

Si la aplicación tiene la mayor parte del contenido en el mismo nivel, sin una gran

cantidad de jerarquía, considera usar un sistema de navegación plano. Este diseño

permite a los usuarios moverse entre documentos, páginas, pestañas o modos que

residen en el mismo nivel jerárquico de un modo rápido y fluido. Lee Diseño de

navegación para aplicaciones de la Tienda Windows para obtener más información

sobre el diseño plano.

Además, si los escenarios de tu aplicación pueden beneficiarse de una interfaz de varios

documentos, el diseño plano te resultará muy útil. La barra de navegación es perfecta

para alternar entre varios contextos. Por ejemplo, en una aplicación de creación de hojas

de cálculo, el diseño plano permite alternar rápidamente entre las diferentes hojas de

cálculo en las que se encuentra trabajando un usuario.

Algunas aplicaciones pueden elegir incluir otras funciones dentro de la barra de

navegación, como agregar un botón de signo más ("+") para crear una nueva hoja de

cálculo en la propia barra de navegación. En el explorador (una aplicación de la Tienda

Windows) que se muestra a continuación puedes ver un ejemplo.



Diseño de lista

Si tu aplicación de productividad tiene escenarios que involucran la noción de una vista

"maestro y detalles", donde la selección de un elemento determina lo que se muestra en

un panel de detalles, considera usar un diseño de lista para el panel maestro. Por

ejemplo, una aplicación de administración de proyectos puede mostrar hitos y fechas

límite en un panel maestro y, cuando se selecciona un elemento del panel, puede

mostrar los detalles relevantes en la sección de detalles. Una aplicación de correo

electrónico puede colocar la Bandeja de entrada del lado izquierdo de la pantalla y el

panel de lectura del lado derecho, como se muestra a continuación.

Diseños de formulario

Los escenarios de las aplicaciones de productividad por lo general necesitan un diseño

de formulario, en el que los usuarios tienen que especificar determinada información

sobre algo en particular. Por ejemplo, al crear una invitación a una reunión en una

aplicación de calendario, los usuarios deben especificar la ubicación, la hora de inicio,

la hora de fin, la fecha, los asistentes y otra información similar. Este tipo de diseño

suele usar una combinación de distintos tipos de controles y funciona mejor con un

diseño basado en columnas.

A la hora de decidir qué diseño de formulario usar, considera el flujo de la tarea que

quieres que complete el usuario y dónde será necesario el desplazamiento en ese flujo.

El desplazamiento aumentará considerablemente cuando aparezca visible el teclado

táctil, ya que este ocupa casi la mitad del espacio disponible en pantalla en orientación

horizontal. Las notificaciones de error en línea, cuando aparecen, también incrementan

la extensión 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 diseño de una sola columna puede funcionar para formularios de desplazamiento

vertical cortos o extensos. En el siguiente ejemplo de un diseño de una sola columna, la

lectura y las pestañas se ordenan desde arriba hacia abajo y de izquierda a derecha.

Un diseño de formulario de dos columnas aprovecha al máximo el espacio horizontal

visible en orientación horizontal. Para minimizar la necesidad de desplazamiento del

usuario, ordena la lectura y las pestañas de izquierda a derecha y desde arriba hacia

abajo.

La siguiente imagen muestra un diseño de dos columnas.

No ordenes la lectura y las pestañas desde arriba hacia abajo y de izquierda a derecha en

un diseño de dos columnas extenso y con desplazamiento. Esto resulta muy incómodo

porque el usuario tiene que desplazarse hasta el final de la primera columna, volver a

subir hasta el principio de la segunda columna y después desplazarse de nuevo hacia

abajo para terminar de rellenar el formulario. Además, un diseño de dos columnas no

resulta útil en orientación vertical porque exige que las columnas sean demasiado

angostas.

Los siguientes ejemplos muestran qué se debe evitar en un diseño de dos columnas

extenso y con desplazamiento.

Navegar por el contenido de la aplicación 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 aplicación. Por ejemplo, un

usuario puede alternar entre varios documentos, como artículos de investigación y

deberes anteriores, al realizar un trabajo. Al permitir que los usuarios accedan a todo

este contenido de forma rápida y fluida, maximizan su productividad con tu aplicación.

Considera el uso de la barra de navegación descrita en Diseño de navegación para

aplicaciones de la Tienda Windows para los documentos usados más recientemente, los

documentos abiertos actualmente y cualquier tipo de contenido en la aplicación que sea

relevante al espacio de trabajo actual del usuario.



Comandos

Las aplicaciones de productividad suelen tener más comandos que los demás tipos de

aplicaciones. Este hecho plantea cuestiones acerca de cuál es el mejor modo de

presentar los comandos de forma que puedan detectarse fácilmente, pero que aún así el

contenido del usuario tenga prioridad. Los usuarios deben poder completar los

escenarios principales de la aplicación (aquellos escenarios que facilitan el enunciado de

puntos fuertes de tu aplicación) usando únicamente el Canvas de la aplicación. Siempre

que sea posible, permite que los usuarios manipulen directamente el contenido en el

Canvas, en lugar de agregar comandos que actúen sobre el contenido. Por ejemplo,

cuando los usuarios leen un documento, deja que alejen la vista para ampliar el tamaño

de fuente de la visualización, en lugar de tener que usar un control. Para obtener más

información sobre los comandos, consulta Diseño de comandos para aplicaciones de la

Tienda Windows.

Algunos comandos y botones son tan integrales de la aplicación que sería ridículo que

no se mostraran en pantalla todo el tiempo. El botón Reproducir en una aplicación de

vídeo en pausa, por ejemplo, probablemente nunca estará oculto. Pero la mayoría 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 común de Windows 8.

La barra de la aplicación es la barra de herramientas común que puede aparecer en el

borde inferior de la aplicación. Por lo general, no se ve en la pantalla, pero se puede

mostrar al deslizar el dedo rápidamente desde los bordes superior o inferior, al hacer

clic con el botón secundario del mouse o al presionar la tecla del logotipo de

Windows+Z en el teclado. Además, la barra de la aplicación aparece automáticamente

cuando se realiza una selección en el contenido de una aplicación. Las herramientas que

se presentan en la barra de la aplicación son contextuales, para que solo se muestren los

comandos relevantes en cualquier momento. Por ejemplo, cuando se selecciona una

palabra, la barra de la aplicación aparece automáticamente y muestra los comandos de

formato de texto. Si, en cambio, se selecciona una imagen, la barra de la aplicación

muestra los comandos de edición de imágenes. El carácter contextual de la barra de la

aplicación impide que el usuario se distraiga con comandos irrelevantes. Como

resultado, las herramientas que quieras usar siempre estarán a tu disposición, pero no te

distraerán hasta que las necesites.

La barra de navegación también puede aparecer al invocar manualmente la barra de la

aplicación. Se encuentra en la parte superior de la pantalla y permite al usuario saltar a

distintas ubicaciones dentro de una aplicación. Por ejemplo, un explorador puede usar

esta barra para mostrar miniaturas de las pestañas abiertas actualmente. Una aplicación

de procesamiento de texto puede usar esta barra para saltar entre distintos documentos

abiertos. Una aplicación de compras puede usar este espacio para saltar entre diferentes

departamentos de la tienda.

Tanto la barra de la aplicación como la barra de navegación pueden hospedar botones y

menús. 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 aplicación

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 aplicación de notas, los usuarios pueden querer crear notas o blocs de

notas nuevos, ordenar los blocs de notas alfabéticamente o por fecha, cambiar las

opciones de formato del texto de la nota, insertar notas de audio, especificar una

ubicación y agregar etiquetas e imágenes. La barra de la aplicación te ayuda a colocar

todos los comandos de la aplicación sobre una superficie coherente que los usuarios

encuentren predecible, a fin de que puedan encontrar todos los comandos bajo el mismo

techo.

Para tu aplicación, completa un inventario de todos los comandos de la aplicación y

analiza detenidamente sus escenarios de uso. Un modo de reducir los comandos que

aparecen en la barra de la aplicación consiste en organizarlos en dos categorías:

comandos globales de la aplicación y comandos que solo son útiles si se seleccionan. En

el segundo caso, no muestres siempre los comandos contextuales en la barra de la

aplicación. En su lugar, muéstralos únicamente cuando el usuario ha realizado una

selección o en el contexto de la aplicación para el que son relevantes.

Coloca los comandos globales que aparecen en toda la aplicación, como las operaciones

de sincronización y de "crear nuevo", en el lado derecho de la barra de la aplicación. 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 tendrán una selección de ubicación coherente y serán fácilmente

accesibles con los pulgares, independientemente de la aplicación o contexto específicos.

Usa los comandos Eliminar y Nuevo si tu aplicación administra entidades individuales

que podrían persistir fuera de tu aplicación; por ejemplo, una aplicación de correo

electrónico. Eliminar y Nuevo siempre deben aparecer en este orden.

Usa los comandos Quitar y Agregar si tu aplicación 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 selección o comandos que afectan a una selección

existente, como las opciones de formato, "Seleccionar todo" y "Borrar selección".

Considera qué comandos se relacionan funcionalmente y deben colocarse cerca.

Asegúrate de que colocas los comandos de manera coherente siempre que sea posible.

Además, crea conjuntos de comandos para administrar el número de comandos que

aparecen en la barra de la aplicación y considera crear menús de comandos y conjuntos

de comandos siempre que sea posible. Por ejemplo, en una aplicación de notas, si usas

un menú de comandos, puedes ordenar las notas alfabéticamente o por fecha mediante

un solo comando. Los menús de comandos ayudan a organizar y reducir enormemente

la cantidad de comandos de la barra de la aplicación, como se muestra a continuación.

Asegúrate de que la configuración aparezca en el contrato de Configuración y no en la

barra de la aplicación. De este modo, los usuarios podrán configurar la aplicación con

los mecanismos comunes con los que ya están familiarizados.

Ampliar la barra de la aplicación y la barra de navegación

Tanto la barra de la aplicación como la barra de navegación pueden hospedar botones y

menús. 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 aplicación y la barra de navegación no se limitan a botones y menús, 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 táctil, 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 aplicación de varias maneras. Para mantener la mayor coherencia posible con el

resto del sistema, trata de seguir estas instrucciones:

Mantén el foco del usuario en el contenido: da por hecho que la mayoría de las interacciones comienzan con una manipulación directa del Canvas. Se espera que la mayoría 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 aplicación a fin de mostrar y ocultar tu interfaz de usuario. Al agregar tu propia interfaz de usuario oculta alternativa con diferentes métodos de invocación, puedes incluir más 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 ubicación natural y esperada de los comandos es en el borde inferior de la aplicación (o justo sobre el teclado táctil). Esta ubicación permite a los usuarios del teclado táctil interactuar con los comandos sin bloquear la vista del contenido. La ubicación también se relaciona con el gesto de toque usado para mostrar los comandos manualmente. Si colocas los comandos en otra ubicación, esta será menos predecible para los usuarios y podría interferir con el contenido que el usuario quiere ver o con el que pretende interactuar.

Coloca las barras de navegación en el borde superior de la pantalla: en las aplicaciones de la Tienda Windows, la ubicación natural y esperada de la barra de navegación 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 navegación por lo general muestra miniaturas, en lugar de botones, para diferenciarse de la barra de la aplicación que se encuentra en el borde inferior de la pantalla.

Mantén todos los comandos ocultos en la barra de la aplicación: 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, necesitarás varios modos de invocar esas superficies ocultas. Esto hace que los usuarios deban buscar tus comandos en demasiados lugares diferentes. Lo que es aún peor, cada superficie podría 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.

Menús contextuales

Los comandos del Portapapeles, como Cortar, Copiar y Pegar para el texto

seleccionado, y los comandos para copiar y abrir vínculos de direcciones URL pueden

sacar provecho de los menús 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 creación de una lista de tareas pendientes u otro

documento nuevo, la edición de una hoja de cálculo existente y la creación de una

invitación en el calendario requieren la entrada de datos. Al hacer que la entrada de

datos sea lo más rápida 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 deberán especificar en el sistema. Estrategias para lograrlo:

Controles comunes: para entradas que usan un formato preestablecido o requieren validación (como fecha, hora o ubicación), usa controles comunes, como el control de selección, cuadros de lista desplegables, botones de radio y casillas.

Autocompletar: usa Autocompletar siempre que sea posible para proporcionar a los usuarios satisfacción inmediata. Esto ayuda a que los usuarios sean más eficaces al escribir datos.

La siguiente imagen muestra las sugerencias de un selector de contactos.

Teclado táctil

Diseña tu aplicación de modo que funcione bien con teclados. Para ello, sigue las

siguientes instrucciones del tema sobre cómo responder a la entrada de teclado. Diseña

tu aplicación de modo que funcione bien con el teclado táctil. Para ello, sigue las

siguientes instrucciones:

Coloca los controles de entrada de texto en la parte superior del Canvas de la aplicación, si es posible, de modo que el contexto o la región visible del usuario no cambie cuando aparezca el teclado táctil.


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 aplicación se desplaza hacia arriba automáticamente hasta donde aparece el control para que el usuario pueda ver el texto que escribe. La ventana debe desplazarse de modo que quede un mínimo de 30 píxeles entre el control que se está utilizando y el borde de la pantalla y la parte superior del teclado táctil, a fin de dejar espacio suficiente para diversos gestos, elementos de la interfaz de usuario y la barra de redimensionamiento de selección de texto que se encuentran en los bordes. Para más información acerca de la selección de texto, lee el tema sobre las directrices para seleccionar texto e imágenes.

No dejes el teclado en la pantalla porque sí. Si no se espera que se escriba ningún texto, establece el campo de entrada en solo lectura o mueve el foco para que se oculte el teclado.

Así se ve el teclado táctil.

Si la pantalla de tu aplicación parece un formulario, donde suele haber una combinación

de controles de edición (cuadros de texto) con otros controles (como botones de radio y

casillas), la experiencia del usuario no sería buena si el teclado aparece y desaparece.

Para abordar este problema, Windows 8 impide que el teclado táctil desaparezca cuando

un usuario se encuentra en un formulario y navega entre ciertos controles comunes,

como botones de radio, cuadros de texto, controles de selección y la barra de la

aplicación. Puedes usar controles estándar para dar a tu aplicación una experiencia

fluida sin ningún costo. En la siguiente imagen puedes ver cómo el teclado táctil

permanece visible mientras el usuario se mueve de un control a otro.



Revisión ortográfica

Habilita la revisión ortográfica en tu aplicación. Ayuda a los usuarios a escribir el texto

rápidamente y con confianza. (La revisión ortográfica 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 línea ondulada

roja. Al pulsar la palabra mal escrita, se invoca el menú de revisión ortográfica en el que

el usuario puede corregir la palabra u omitirla, como se muestra a continuación.

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 lápiz y

dibujar garabatos en sus notas y documentos, se sentirán fascinados de poder escribir el

texto rápida y naturalmente con un lápiz. Consulta el tema sobre el mouse, el lápiz, el

teclado y el mundo táctil para más información sobre los diferentes métodos de entrada.



Selección de texto

En muchos escenarios de productividad, incluidos el consumo y la creación de

documentos, los usuarios necesitan seleccionar texto. Habilita la selección del texto

escrito por los usuarios para que puedan modificarlo. El texto que proviene de otros

usuarios incluye texto del cuerpo de un correo electrónico u otros tipos de texto que

probablemente se copie. Así se ve la experiencia de selección de texto.

Si habilitas la selección de texto, deja un margen de la mitad del ancho de la barra de

redimensionamiento (4 milímetros) a los costados del texto y de la altura total de la

barra de redimensionamiento (8 milímetros) 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 márgenes correctos que deben dejarse cuando se

habilita la selección de texto.

Tipografía en las aplicaciones de productividad

Al usar la tabla de tamaños y cuadrículas de tipografía en las aplicaciones de

productividad, creas una jerarquía visual que permite a los usuarios analizar y consumir

gran cantidad de información rápida y fácilmente. 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, también 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 más información sobre la

tipografía, consulta el tema sobre Directrices y lista de comprobación de texto y

tipografía.

Si decides especificar fuentes del sistema alternativas, asegúrate de confirmar que se

instalen con Windows 8 y no requieran la instalación de una aplicación independiente,

como Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia,

asegúrate de contar con los derechos legales suficientes para incluirlas en tu aplicación.

Independientemente de las fuentes que elijas, la tabla de tipos de Windows 8

proporciona una buena orientación sobre el número máximo de tamaños y estilos que

debes usar.

La personalidad de la interfaz de usuario de Windows 8 requiere que el uso de

mayúsculas en los encabezados sea del estilo de oración, lo que también recomendamos

para las aplicaciones de productividad. Pero el estilo de título también puede ser

apropiado en algunos casos. El texto en todas minúsculas puede ser demasiado informal

para una aplicación de productividad y el texto en todas mayúsculas podría hacer

acordar al usuario de ciertos mensajes de correo electrónicos no muy amigables. Ten en

cuenta que estos últimos tratamientos de topografía no se transfieren a varios idiomas

localizados. Además, asegúrate de usar los estilos de uso de mayúsculas coherentemente.

Úsalos para diferenciar las distintas partes del contenido y no solo para añadir un interés

visual a la tipografía de tu aplicación.

El uso de un conjunto reducido de tamaños de fuente, como se recomienda en la

orientación de la tabla de tipos, crea una sensación de estructura y ritmo en el contenido.

Si distintos elementos de la aplicación usan el mismo tamaño de fuente de la tabla de

tipos, pero transmiten diferentes tipos de información, considera usar color y espesor de

la fuente para establecer una jerarquía en la información.

Contratos

Los contratos son el lazo de unión 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 día, y existen muchos escenarios atractivos que permiten el uso

compartido entre aplicaciones de productividad. Si deseas permitir que los usuarios

compartan contenido de la aplicación, la aplicación debe ser un origen de contenido

compartido. Si deseas permitir que la aplicación use datos de otras aplicaciones, la

aplicación debe ser un destino de contenido compartido.

Compartir contenido de la aplicación

Como la productividad suele basarse en la creación 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 más 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 aplicación de contactos, compartir

documentos con sus compañeros de trabajo mediante una aplicación de colaboración o

compartir sus creaciones en blogs mediante una aplicación de creación 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 aplicación sea un origen de contenido compartido significa permitir que su

contenido, ya sean direcciones URI, mapas de bits, código HTML, texto, elementos de

almacenamiento o tipos de datos personalizados, esté disponible para que otras

aplicaciones puedan usarlo. Como aplicación 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 aplicación con

un amplio conjunto de aplicaciones de destino de contenido compartido.

Si admites el Contrato para ofrecer contenido compartido, también permites que la

aplicación comparta contenido de forma directa con los dispositivos cercanos de la

misma manera que Tocar y enviar.

Compartir contenido en tu aplicación

Las aplicaciones de productividad también son buenas destinatarias del contenido

compartido procedente de otras aplicaciones, porque la creación del contenido por lo

general comienza con su consumo. Si tu aplicación es un destino de contenido

compartido, los usuarios podrán importar contenido en ella sin problemas y sin tener

que cambiar el contexto de la actividad que están 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

aplicación de creación 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 aplicación de cupones con la lista de compras de tu aplicación de tareas

pendientes. Estas capturas de pantalla muestran ejemplos de una aplicación como

destino de contenido compartido. También 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 búsqueda es un escenario importante de las aplicaciones de productividad y es

posible que tu aplicación deba mostrar una gran cantidad de datos en los resultados de la

búsqueda. Puedes usar el acceso a Buscar de Windows 8 para proporcionar una

experiencia centralizada para todas las necesidades de búsqueda del usuario y para

ayudarle a analizar los distintos tipos de resultados.

Al diseñar la experiencia de búsqueda de tu aplicación, ten en cuenta lo siguiente:

Proporciona filtros de búsqueda en la vista de resultados. Muestra la consulta de búsqueda en la vista de resultados. Muestra el número total de resultados encontrados. Conserva el estado de la aplicación para que los usuarios puedan volver a lo que

estaban haciendo antes de realizar la búsqueda. Indica por qué un resultado coincidió con la búsqueda.

Esta captura de pantalla muestra el uso de la búsqueda en una aplicación de notas.

Proporciona sugerencias de consultas para ayudar a los usuarios a completar

automáticamente sus consultas de búsqueda para que puedan buscar más rápidamente

sin necesidad de escribir la cadena de búsqueda completa.

También considera mostrar sugerencias de resultados para ayudar a los usuarios a

encontrar los más relevantes con rapidez. Al seleccionar una sugerencia de resultado, se

redirigirá a los usuarios a los detalles del resultado. Limita a cinco el número de

sugerencias. Cuanto más corta sea la lista, con mayor facilidad podrán analizarla los

usuarios.

Buscar en la página

Junto con la búsqueda, "Buscar en la página" es un escenario común 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 aplicación la función de Buscar en la página. En su lugar,

impleméntala dentro de la barra de comandos de la aplicación y no en el panel de

búsqueda. Buscar en la página ayuda al usuario a encontrar todas las instancias en la

vista actual. Resalta los resultados de la búsqueda en el documento y muestra los

botones "Siguiente" y "Anterior" en la aplicación para permitir al usuario saltar

rápidamente 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 continuación.

Configuración

Toda la configuración correspondiente a las aplicaciones de productividad (como la

configuración de privacidad, la configuración de notificación y las preferencias de

visualización) debe encontrarse en el acceso a Configuración. El acceso a Configuración

proporciona un único lugar para que los usuarios ajusten su configuración y, además,

impide que la interfaz de usuario de tu aplicación aparezca desordenada con diferentes

configuraciones. Para más información acerca de la configuración, consulta el tema

sobre las directrices para la configuración de una aplicación.

Dispositivos

La impresión de documentos y notas es un escenario común en las aplicaciones de

productividad. Proporciona a los usuarios funcionalidad de impresión con los accesos a

Dispositivos para que tengan una experiencia de impresión sin problemas. Así se ve la

experiencia de dispositivos para impresión.

Los dispositivos pueden ser un contrato interesante para conectar a tu aplicación de

productividad. Si la aplicación 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 integración 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 aplicación 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 aplicación, lo que enriquece

su experiencia. Por ejemplo, en una aplicación de notas, es posible que el usuario quiera

insertar una foto de una aplicación de fotos o notas de audio de una aplicación

grabadora de sonidos.

Tu aplicación también 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 ubicación de almacenamiento en nube.

Modo de vista: cuando permites que el usuario seleccione una foto o un vídeo, puedes personalizar el selector de archivos para que muestre los archivos en el modo de vista de miniaturas. Para todos los demás tipos de archivo, usa el modo de vista de icono.

Asimismo, el contenido de tu aplicación 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 aplicación a disposición de

otras aplicaciones de Windows 8. Esto permite a los usuarios obtener el contenido de tu

aplicación 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 aplicación a través de una

vista del selector de archivos que es específica de tu aplicación 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 electrónico una nota creada en tu

aplicación de notas a algunos amigos, puede adjuntar el contenido de la aplicación de

notas directamente en lugar de tener que guardarlo previamente en el equipo local.

Además, el selector de archivos permite guardar directamente en la aplicación. Esto

también da lugar a escenarios realmente interesantes. Por ejemplo, un usuario puede

guardar un mensaje de correo electrónico o un garabato creado en otra aplicación

directamente en tu aplicación como una nota. Aquí puedes ver cómo 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 móvil y

contratos, tu aplicación encajará perfectamente en el ecosistema de Windows 8.


Mostrar contenido actualizado y personalizado en el icono de la aplicación es una forma

de atraer a los usuarios, ya que les llamará la atención el contenido interesante del icono

y entrarán a tu aplicación. 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 artículos nuevos. Una notificación también

puede mostrar la posición de un punto de interés, como en este ejemplo.

Si permites a los usuarios anclar iconos secundarios para un acceso rápido a sus notas y

contenido favoritos, podrán ver las notificaciones adaptadas sobre ese contenido, lo que

les llamará la atención y los atraerá a tu aplicación.

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 finalización con las tareas. Considera la posibilidad de mostrar

al usuario las notificaciones del sistema programadas para la hora en que quiere que se

le envíe el aviso. Una buena práctica para las notificaciones del sistema pasadas por alto

consiste en mostrar también el aviso en el icono, como se muestra a continuación.

El tema sobre las directrices y la lista de comprobación para notificaciones del sistema

contiene más información sobre los procedimientos recomendados para las

notificaciones del sistema. El tema sobre las directrices y la lista de comprobación para

iconos contiene más información sobre los procedimientos recomendados para los

iconos.

Perfil móvil

La mayoría de las personas tienen más de un equipo de Microsoft Windows. Si tu

aplicación 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

móvil para mover la configuración de tu aplicación, información sobre la última acción

del usuario en tu aplicación y otras preferencias de la aplicación que sean útiles para los

usuarios en todos sus equipos. En el tema sobre las Directrices para perfiles móviles de

datos de la aplicación encontrarás más información sobre los procedimientos

recomendados del perfil móvil.







Puesto que Windows 8 se ejecuta en diversos tipos de dispositivos y cuenta con un

nuevo modelo multitarea, debes asegurarte de que tu aplicación admita varios estados

de visualización, como acopada, pantalla completa, vertical y horizontal.

Vistas vertical y horizontal

Al diseñar tu aplicación de productividad para Windows 8, considera todas las vistas de

la aplicación, como las diferentes resoluciones de pantalla y los distintos tamaños de

dispositivo. Windows 8 te permite escalar el diseño de la distribución vertical y de

pantallas de alta resolución mediante la incorporación de una mayor cantidad de

contenido en la aplicación para dispositivos más grandes. Exhibe la aplicación en vista

horizontal o vertical. Este es un ejemplo de la vista vertical en una aplicación de notas.

Además, la vista vertical es excelente para leer y consumir grandes cantidades de

contenido. Si la aplicación se visualiza en orientación vertical, reorganiza el contenido

para que se ajuste a esa vista. Debes hacer esto porque la orientación vertical es la más

común para leer, especialmente en documentos, hojas de cálculo y otro contenido

similar.

Vista acoplada

Si quieres ver más de una aplicación 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 están visibles, siempre hay una

aplicación que es más grande y otra que es más pequeña, y puedes intercambiarlas

fácilmente. En la aplicación principal, siempre se garantiza la resolución mínima de

1024 × 768; de esta forma, la aplicación no tiene que realizar ninguna acción especial

para admitir ese estado. La aplicación más pequeña, la cual denominaremos aplicación

acoplada, siempre tiene un ancho fijo en cualquier pantalla; de esta forma, puedes fijar

el ancho y crear un estado acoplado adaptado para tu aplicación.

Por lo general, debes considerar la vista acoplada como la misma aplicación, pero más

pequeña. Cambiar el tamaño de la aplicación de un tamaño grande a uno pequeño (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 creación de contenido. Conserva la entrada de texto, la

posición de desplazamiento y cualquier selección que haya establecido el usuario

cuando el usuario cambia el tamaño de la aplicación.

Te recomendamos que la vista acoplada tenga paridad con las vistas más grandes de la

aplicación. Si la selección de texto invoca la barra de la aplicación con un comando para

dar formato al texto seleccionado, este comportamiento debería 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 aplicación: como la vista acoplada es más estrecha, el control

de la barra de la aplicación quita automáticamente 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 aplicación, en la vista acoplada. Para obtener más información,

consulta el tema sobre las directrices para barras de la aplicación.

Además, piensa en cómo la aplicación agrega valor y haz que esos escenarios sean

excelentes. Muestra a los usuarios por qué tu aplicación funciona a la perfección con

otras aplicaciones. Por ejemplo, es fácil imaginar una aplicación para tomar notas o para

crear listas que trabaje junto a otra aplicación. Al investigar o al crear contenido, es

normal tener una aplicación de análisis o de referencia acoplada junto a tu trabajo

principal. Las aplicaciones de lectura o creación de contenido acopladas son muy útiles

para usarlas como referencia mientras realizas otro trabajo. Piensa en la cantidad de

veces que evitarías maximizar la aplicación en el escritorio tradicional. Esos son los

escenarios que la aplicación debe admitir cuando se encuentra acoplada.


La vista acoplada es una excelente forma de aumentar el tiempo de tu aplicación en

pantalla y atraer a los usuarios por períodos más largos. Con un estado acoplado para

cada vista de tu aplicación, permites al usuario realizar estas múltiples tareas y

conservas su atención por más tiempo. Evita hacer que la vista acoplada sea de

"consumo o de solo lectura", porque los usuarios consideran las acciones de consumo y

creación 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 aplicación de

notas.

Temas relacionados




Aplicaciones de deportes (Preliminary)













[Esta documentación es preliminar y está sujeta a cambios.]

El libro de ideas de la aplicación de deportes describe una aplicación de deportes ficticia

para Windows 8. Puedes inspirarte en ella para el diseño de tu propia aplicación de

deportes revisando los escenarios de este tema y viendo cómo se utiliza el lenguaje de

diseño Microsoft de Windows 8 en la aplicación.
















Escenarios de la aplicación de deportes

La aplicación de deportes que se describe en este tema usa las características de diseño

de Microsoft para crear una atrayente experiencia de deportes para los usuarios.

Atraer Compartir Atraer a otros

Llama la atención a los usuarios hacia el contenido de tu aplicación

Puedes usar el lenguaje de diseño Microsoft para crear una experiencia de exploración

informal que sea divertida, fácil y potente. También puedes usar iconos dinámicos para

llamar la atención a los usuarios hacia la aplicación. Sigue este escenario para ver cómo

puedes hacer que tu aplicación de deportes sea atrayente.

Mientras ve las noticias en la televisión, John Rodman está usando su tableta Windows

8 como "segunda pantalla".

La aplicación Contoso Sports atrae su atención con un icono dinámico que indica los

titulares de deportes.

La vista está distribuida horizontalmente con todas las opciones en el mismo Canvas

panorámico. John puede explorar sin navegar por una jerarquía de páginas.

John acerca los dedos para activar el zoom semántico, que le permite navegar

rápidamente hacia su deporte favorito.

Resumen del contenido de la aplicación

En el primer escenario vemos que...

Tu contenido destaca sin necesidad de un contenedor visual ni varias jerarquías de navegación.

Puedes usar iconos dinámicos para llamar la atención de los usuarios hacia la aplicación con información que les es relevante.

Para obtener información sobre los iconos dinámicos, el movimiento panorámico y el

zoom semántico, consulta los siguientes temas:

Instrucciones de iconos dinámicos Muestra de iconos dinámicos Instrucciones de movimiento panorámico Muestra de movimiento panorámico (HTML) Muestra de movimiento panorámico (XAML) Instrucciones de zoom semántico Muestra de zoom semántico (C#/VB/C++) Muestra de zoom semántico (JavaScript)


http://go.microsoft.com/fwlink/?LinkId=231469





http://go.microsoft.com/fwlink/?LinkID=226564


Comparte localmente y a través de las redes

Puedes usar Reproducir en para compartir la experiencia de tu PC en una televisión.

Puedes usar el contrato para contenido compartido para compartir el contenido con otras

aplicaciones.

John ve un artículo interesante y lo abre para verlo en una vista en pantalla completa.

John reproduce el vídeo destacado del artículo en su televisión habilitada para

Reproducir en.

John sabe que el jugador lesionado está en el equipo de favoritos de su amigo Ben

Martens. Desliza rápidamente el dedo para abrir el acceso a Compartir donde usa la

aplicación Contoso Social para avisar a su amigo.

Resumen de Compartir

En el segundo escenario vemos que...

Puedes ampliar el contenido de la aplicación 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 electrónico y redes sociales.

Puedes hacer que tu aplicación sea un destino de contenido compartido para recibir contenido, vínculos u otros tipos de datos estructurados.

Para obtener información 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 aplicación

Puedes volver a atraer a los usuarios a tu aplicación con notificaciones del sistema

oportunas y el contrato de Buscar.

Ben Martens está trabajando con un informe. Ve la notificación del sistema de la

aplicación Contoso Social de John Rodman que dice que su jugador favorito está

lesionado.






Ben hace clic en la notificación del sistema, que es un vínculo profundo a la aplicación

de la red social Contoso. Allí ve que se ha publicado un vínculo a la página 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 aplicación Contoso Sports y ve los extremos de campo relevantes.

Selecciona a Ben Smith, que parece que podría ser un buen sustituto.

Después de seleccionar su nuevo extremo de campo, Ben saca la barra de la aplicación

para agregar el nuevo jugador en su equipo de favoritos. La barra de la aplicación es útil

para la navegación (mostrada como la barra de la aplicación superior) y los comandos

(mostrados como la barra de la aplicación inferior), haciendo que tu aplicación destaque

aun más.

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 aplicación Contoso Sports en la vista acoplada.

Resumen de cómo atraer al usuario que no está en la aplicación

En el tercer escenario vemos que...

Las notificaciones del sistema vinculan en profundidad dentro de la aplicación y proporcionan al usuario la oportunidad de volver a actuar con el contenido.

Una vista acoplada con todas las características permite a los usuarios aumentar su actividad con la aplicación.

La búsqueda coloca a la aplicación en la lista de destinos posibles cuando el usuario necesite información.

Para obtener información sobre las notificaciones del sistema, la vista acoplada, la

búsqueda y la barra de la aplicación, consulta los siguientes temas:

Directrices y lista de comprobación de notificaciones del sistema Muestra de notificación del sistema Instrucciones de vista acoplada Muestra de vista acoplada Instrucciones de búsqueda Muestra de Buscar Instrucciones de la barra de la aplicación Muestra de la barra de la aplicación (HTML) Muestra de la barra de la aplicación (XAML)






http://code.msdn.microsoft.com/windowsapps/Search-app-contract-sample-118a92f5




Explora las posibilidades

Windows 8 está repleto de nuevas características que pueden hacer que tu aplicación

destaque aun más. Para obtener más información, consulta la guía de producto de

Windows 8 para desarrolladores.

Temas relacionados




Muestras e instrucciones

Instrucciones de iconos dinámicos

Muestra de iconos dinámicos

Instrucciones de movimiento panorámico

Muestra de movimiento panorámico (HTML)

Muestra de movimiento panorámico (XAML)

Instrucciones de la barra de la aplicación

Muestra de la barra de la aplicación (HTML)

Muestra de la barra de la aplicación (XAML)

Directrices y lista de comprobación de notificaciones del sistema

Muestra de notificación del sistema

Instrucciones de vista acoplada

Muestra de vista acoplada

Instrucciones de Compartir

Muestra de origen de contenido compartido

Muestra de destino de contenido compartido

Instrucciones de búsqueda

Muestra de Buscar

Instrucciones de Reproducir en

Muestra de Reproducir en

Instrucciones de zoom semántico

Muestra de zoom semántico (C#/VB/C++)

Muestra de zoom semántico (JavaScript)




























Aplicaciones de compras (Preliminary)














El libro de ideas de la aplicación de compras describe una aplicación de compras ficticia

para Windows 8. Puedes inspirarte en ella para el diseño de tu propia aplicación de

compras revisando los escenarios de este tema y viendo cómo se utiliza el lenguaje de














Escenarios de la aplicación de compras

La aplicación de compras que se describe en este tema usa las características de diseño

de Microsoft para crear una atrayente experiencia de compras para los usuarios.

Iconos dinámicos y

exploración Buscar y acoplar Compartir


Puedes usar el lenguaje de diseño Microsoft para crear una experiencia de exploración

informal que sea divertida, fácil y potente. También puedes usar iconos dinámicos para

llamar la atención a los usuarios hacia la aplicación. Sigue este escenario para ver cómo

puedes hacer que tu aplicación de compras sea atrayente.

Tomás Navarro está usando su tableta Windows 8 en el autobús de camino a casa

después del trabajo.

Un icono dinámico que dice "Recién llegado:" avisa a Tomás sobre la llegada de nuevos

artículos de la temporada de otoño. Esto le interesa a Tomás, así que hace clic en el

icono para entrar en la aplicación.

Tomás necesita una chaqueta nueva, así que hace clic en la categoría "Sobre los

hombros".

La vista de las categorías está distribuida horizontalmente, con una vista detallada de

todas las opciones que se muestran en el mismo Canvas. Tomás puede explorar sin tener

que navegar por ninguna jerarquía de contenido.

Tomás acerca los dedos para activar el zoom semántico, que le permite visualizar y

navegar rápidamente por la lista de elementos.

Después de hacer clic en la sección de "Chaquetas", Tomás selecciona una chaqueta

para verla en la vista de elementos y la agrega al carro de la compra.

Tomás completa su compra adquiriendo la chaqueta y una camisa que ya había

agregado al carro antes.

Resumen de iconos dinámicos y exploración


Los iconos dinámicos llaman la atención al usuario hacia la aplicación mostrando información que es relevante para el usuario.

El contenido destaca en la aplicación sin ningún contenedor visual y permite que los usuarios se sumerjan en la experiencia que les interesa.

Para obtener información sobre los iconos dinámicos y el zoom semántico, consulta los

siguientes temas:

Directrices de iconos dinámicos Muestra de iconos dinámicos Directrices de zoom semántico Muestra de zoom semántico (C#/VB/C++) Muestra de zoom semántico (JavaScript)






Dirige la participación de los usuarios

Puedes usar el lenguaje de diseño Microsoft para atraer a los usuarios cuando estén

listos para comprar mediante la implementación 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 aplicación, Antonio puede sacar el acceso a

Buscar en el lado derecho y buscar una chaqueta similar.

Antonio selecciona la aplicación "Head to Toe", que muestra sus resultados de la

búsqueda del término "Chaqueta".

Antonio usa un filtro para reducir los resultados de la búsqueda según el precio.

Después selecciona un elemento.

Antonio acopla la aplicación a la izquierda para poder comparar el elemento con la

chaqueta del blog. Satisfecho con su elección, Antonio agrega la chaqueta a su carro de

la compra.

Mientras está aún en la vista acoplada, Antonio decide completar la compra.

Resumen de cómo dirigir la participación de los usuarios


El contrato de Buscar pone la aplicación en la lista de destinos posibles cuando el cliente pretende realizar una compra.

Un vista acoplada con todas las características permite que los clientes puedan explorar y comparar tu contenido con otras aplicaciones y sitios web.

Para obtener información sobre la búsqueda y la vista acoplada, consulta los siguientes

temas:

Instrucciones de búsqueda Muestra de Buscar Instrucciones de vista acoplada Muestra de vista acoplada





Conectar con Compartir

Puedes usar el lenguaje de diseño Microsoft para conectar a los usuarios con cualquier

otra aplicación, contacto o red social.

Diego Arteaga acaba de comprar una chaqueta. Después de realizar el pedido, se le dice

que puede compartir la noticia.

Diego usa el contrato para contenido compartido para compartir el código promocional

con sus amigos.

Resumen de conectar a los usuarios con Compartir



Puedes hacer que tu aplicación sea un destino de contenido compartido para recibir contenido, vínculos u otros tipos de datos estructurados.

Para obtener información sobre el contenido compartido, consulta los siguientes temas:

Instrucciones de Compartir Muestra de origen de contenido compartido Muestra de destino de contenido compartido





Temas relacionados






Directrices de iconos dinámicos



Directrices de zoom semántico

Muestra de Buscar



























Aplicaciones de viajes (Preliminary)














El libro de ideas de la aplicación de viajes describe una aplicación de viajes ficticia para

Windows 8. Puedes inspirarte en ella para el diseño de tu propia aplicación de viajes

revisando los escenarios de este tema y viendo cómo se utiliza el lenguaje de diseño

Microsoft de Windows 8 en la aplicación.

Escenarios de la aplicación de viajes

La aplicación de viajes que se describe en este tema usa las características de diseño de

Microsoft para crear una atrayente experiencia de viajes para los usuarios.

Inspirar Reservar Facturar













Inspira a los usuarios y atráelos

Puedes usar iconos dinámicos para llamar la atención de los usuarios hacia tu aplicación,

y el contrato para contenido compartido facilita la expansión de su contenido a otras.

Sigue este escenario para ver cómo puedes hacer que tu aplicación de viajes sea

atrayente.

Ben ha abierto el icono dinámico de la aplicación Wigtip Destinations y la oferta de

unas vacaciones en la playa le llama la atención.

Después de iniciar la aplicación, 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 dinámicos y Compartir


Los iconos dinámicos llaman la atención al usuario hacia la aplicación mostrando información que es relevante para el usuario.


Para obtener información sobre iconos dinámicos y Compartir, consulta los siguientes

temas:

Instrucciones de iconos dinámicos Muestra de iconos dinámicos Instrucciones de Compartir Muestra de origen de contenido compartido Muestra de destino de contenido compartido






Reserva del viaje

Puedes usar la la barra de la aplicación y el zoom semántico para hacer que tu contenido

destaque mientras proporcionas a los usuarios una forma coherente de navegar por la

aplicación.

Ben inicia la aplicación Wingtip Destinations y escribe la ciudad a la que va a viajar. La

aplicación ya conoce su ubicación actual.

El calendario es fácil de usar con la funcionalidad táctil y un mouse.

La barra de la aplicación 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 semántico para obtener una vista diferente de los datos.

Ben ve su itinerario, introduce la información 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 más 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 navegación en la barra de la aplicación.

El zoom semántico permite a los usuarios ver datos de diferentes formas. Puedes hacer que la aplicación reconozca la ubicación mediante la ubicación

geográfica.

Para obtener información sobre la barra de la aplicación, el zoom semántico y las

aplicaciones con reconocimiento de ubicación, consulta los siguientes temas:

Instrucciones de la barra de la aplicación Muestra de la barra de la aplicación (HTML) Muestra de la barra de la aplicación (XAML) Instrucciones de zoom semántico Muestra de zoom semántico (C#/VB/C++) Muestra de zoom semántico (JavaScript) Directrices para aplicaciones con reconocimiento de ubicación Muestra de ubicación geográfica









Notificaciones e impresión

Puedes usar el ecosistema de Windows 8 para comunicarte con los usuarios.

Ben está trabajando, cuando una notificación del sistema de Wingtip Destinations le

informa de que es hora de realizar la facturación.

Ben hace clic en la notificación del sistema, que es un vínculo profundo a la página de

facturación. Realiza la facturación e imprime su tarjeta de embarque.

Resumen de notificaciones e impresión



Puedes aprovechar todo el ecosistema de Windows en tu aplicación, incluidos los dispositivos como las impresoras.

Para obtener información sobre las notificaciones del sistema y la impresión, consulta

los siguientes temas:

Directrices y lista de comprobación de notificaciones del sistema Muestra de notificación del sistema Instrucciones de impresión Muestra de impresión









Por ejemplo, agregar el contrato de Buscar en tu aplicación te permite buscar en la

aplicación desde cualquier otra aplicación. Para obtener más información, consulta

Muestra de Buscar e Instrucciones de búsqueda.

Temas relacionados















Directrices de iconos dinámicos






Directrices de zoom semántico

Instrucciones de impresión

Muestra de impresión

Directrices para aplicaciones con reconocimiento de ubicación

Muestra de ubicación geográfica

Muestra de Buscar
























Aplicaciones educativas (Preliminary)














El libro de ideas de la aplicación educativa describe una aplicación educativa ficticia

para Windows 8. Puedes inspirarte en ella para el diseño de tu propia aplicación

educativa revisando los escenarios de este tema y viendo cómo se utiliza el lenguaje de


Escenarios de la aplicación educativa

La aplicación educativa que se describe en este tema usa las características de diseño de

Microsoft para crear una atrayente experiencia educativa para profesores y estudiantes.

Profesora Estudiante














Puedes usar el lenguaje de diseño Microsoft para acceder fácilmente a los elemento

multimedia del sistema de archivos. También puedes usar iconos dinámicos para llamar

la atención a los usuarios hacia la aplicación. Sigue este escenario para ver cómo puedes

mostrar contenido en tu aplicación educativa que sea relevante para el usuario.

La vista de Profesor ofrece una visión general del día del profesor, organizado por

clases. La selección de otra clase revela instantáneamente el contenido relevante.

La profesora ve todas las tareas actuales en la visión general de deberes y selecciona el

botón Agregar de la barra de la aplicación para agregar una nueva tarea de deberes.

Desde la vista panorámica de deberes, puede agregar detalles de los deberes, agregar

estudiantes y grupos, incluir información de las notas y asociar recursos para los

deberes.

La profesora usa el selector de archivos para agregar archivos de vídeo a unos deberes.

Una vez que ha terminado de crear los deberes, la profesora publica los deberes a los

estudiantes.

El icono dinámico de la aplicación Lucern LBS recibe una inserción de actualización y

avisa a los estudiantes acerca de los nuevos deberes.

Resumen del contenido de la aplicación


Puedes colocar grandes cantidades de contenido en un Canvas panorámico. Puedes acceder fácilmente a los archivos y los elementos multimedia del sistema de

archivos. Puedes usar iconos dinámicos para llamar la atención de los usuarios hacia la

aplicación con información que les es relevante.

Para obtener información sobre los iconos dinámicos, el movimiento panorámico y la

barra de la aplicación, consulta los siguientes temas:

Instrucciones de iconos dinámicos Muestra de iconos dinámicos Instrucciones de movimiento panorámico Muestra de movimiento panorámico (HTML) Muestra de movimiento panorámico (XAML) Instrucciones de la barra de la aplicación Muestra de la barra de la aplicación (HTML) Muestra de la barra de la aplicación (XAML)









Atrae a los usuarios continuamente

Puedes usar el lenguaje de diseño Microsoft para atraer a los usuarios mediante

notificaciones del sistema y manteniendo la aplicación disponible en vista acoplada.

Puedes compartir información fácilmente desde tu aplicación con otras aplicaciones.

Steve está trabajando en su presentación de Microsoft PowerPoint cuando recibe una

notificación del sistema acerca de nuevos deberes.

Steve selecciona la notificación del sistema y se inicia la aplicación Lucerne LBS, que

navega hasta la página de deberes para ver los deberes de Steve. La página de deberes

enumera los capítulos de un libro de texto y un artículo web, junto con los miembros de

su grupo.

Steve ve la tarea de los deberes con la vista acoplada y hace clic en los vínculos web

proporcionados.

Steve ve el sitio web mientras toma notas en la aplicación Lucerne LBS en la vista

acoplada.

Después de revisar las notas en la vista de pantalla completa, Steve deslizar rápidamente

el dedo en el acceso a Compartir y envía las notas a los miembros de su grupo.

Resumen de cómo dirigir la participación de los usuarios



Una vista acoplada con todas las características permite a los usuarios aumentar su actividad con la aplicación.

Puedes hacer que tu aplicación ofrezca contenido compartido y envíe contenido, vínculos u otros tipos de datos estructurados.

Para obtener información sobre las notificaciones del sistema, la vista acoplada y

Compartir, consulta los siguientes temas:

Directrices y lista de comprobación de notificaciones del sistema Muestra de notificación del sistema Instrucciones de vista acoplada Muestra de vista acoplada Instrucciones de Compartir Muestra de origen de contenido compartido Muestra de destino de contenido compartido












Temas relacionados





Instrucciones de iconos dinámicos


Instrucciones de movimiento panorámico

Muestra de movimiento panorámico (HTML)

Muestra de movimiento panorámico (XAML)































Casos prácticos (aplicaciones de la

Tienda Windows) (Windows)




Caso práctico de diseño: de sitio web a aplicación de la Tienda Windows

Caso práctico de diseño: de iPad a aplicación de la Tienda Windows

Caso práctico de diseño: aplicación de la Tienda Windows de la línea de negocio empresarial


De sitio web a aplicación de la Tienda Windows

Aprende a usar las tecnologías web con las que estás

familiarizado para crear aplicaciones de la Tienda

Windows.

De iPad a aplicación de la Tienda Windows

Aprende a reconvertir tus aplicaciones para iOS para

que sigan los principios del diseño Microsoft y

saquen partido de la plataforma Windows.

Aplicación de la Tienda Windows de la línea de

negocio empresarial

Aprende a diseñar aplicaciones de la Tienda

Windows de línea de negocio (LOB) para usuarios

de la empresa.

Para más información acerca de la oportunidad comercial de Windows 8, consulta

Venta de aplicaciones. Para obtener más información acerca de las características

usadas para crear aplicaciones de la Tienda Windows, lee la guía de producto de
















Caso práctico de diseño: de sitio web a

aplicación de la Tienda Windows

(Windows)








En este artículo

Aplicación y sitio web de camiones de venta de alimentos Diseño y navegación Comandos y acciones Contratos Funcionalidad táctil Escalado y vistas Notificaciones Conclusión Acerca de los autores

El diseño de sitios web ha sido una práctica común durante décadas. Con Windows 8,

los diseñadores y desarrolladores pueden usar las tecnologías web con las que están

familiarizados, como HTML5, hojas de estilos en cascada, nivel 3 (CSS3) y JavaScript,

para crear aplicaciones de la Tienda Windows. Aquí exploraremos cómo exponer las

funcionalidades de un sitio web para hacer que sea una excelente aplicación de la

Tienda Windows y mostramos maneras de proporcionar valor adicional, personalización

y experiencias enriquecidas mediante el uso de las características de la plataforma de

Windows 8.

Nuestro objetivo es ayudar a los diseñadores y desarrolladores a rediseñar sus sitios web

como aplicaciones de la Tienda Windows.








http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#aplicaci_n_y_sitio_web_de_camiones_de_venta_de_alimentos

http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#dise_o_y_navegaci_n

http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#comandos_y_acciones


http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#funcionalidad_t_ctil

http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#escalado_y_vistas

http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#notificaciones

http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#conclusi_n

http://msdn.microsoft.com/es-es/library/windows/apps/hh868264.aspx#acerca_de_los_autores


Venta de aplicaciones. Para más información acerca de las características usadas para

crear aplicaciones de la Tienda Windows, consulta la guía de producto de Windows 8

para desarrolladores.

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

Aplicación y sitio web de camiones de venta de alimentos

Este artículo 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, estén actualizados con

las últimas noticias y ofrezcan críticas de usuario de dichos camiones. En el caso

práctico orientado al diseño que se encuentra a continuación, exploramos diversas

maneras de rediseñar la funcionalidad clave del sitio y extenderla como aplicación de la

Tienda Windows.

Nuestro objetivo al migrar a una aplicación de la Tienda Windows fue resaltar las

mejores características del sitio web al tiempo que se mantiene paridad con la

funcionalidad clave del sitio. Determinamos que la aplicación 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 anatomía de la interfaz de usuario del sitio web de

camiones de venta de alimentos. Aquí te mostramos cómo trasladar cada uno de estos

componentes de la interfaz de usuario a un estilo de diseño Microsoft.





1. Diseño y navegación 2. Comandos y acciones 3. Contratos: buscar, contenido compartido y configuración 4. Funcionalidad táctil 5. Escalado y vistas 6. Notificaciones


Centrarse en el contenido, no en el contenedor visual

La mayoría de los sitios web usan modelos de diseño bien establecidos. El diseño de la

página principal tiene una interfaz de usuario que admite la navegación (tanto de

encabezado como de pie de página), los componentes de utilidad (inicio de sesión,

búsqueda) y el acceso a otro contenido (blogs y noticias). Estos son elementos comunes

en los sitios web, pero generan una distracción en los usuarios y evitan que se centren

en lo más importante: encontrar un camión de venta de alimentos cercano. Al diseñar la

aplicación de la Tienda Windows, quitamos gran parte de esta interfaz de usuario y del

contenido porque no estaban relacionados directamente con la característica principal de

la aplicación.

Sitio web:

El sitio web tiene un modelo de diseño de dos columnas común: 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.

Aplicación de la Tienda Windows:

Todo el espacio en la página de destino está dedicado a aquello para lo que sirve esta

aplicación: encontrar un camión de venta de alimentos cercano.

Ejemplo: resaltar contenido en la página principal del sitio web y en la Pantalla

principal de la aplicación de la Tienda Windows.

Tanto el sitio web como la aplicación de la Tienda Windows muestran las categorías y

los camiones de venta de alimentos destacados en sus páginas principales. Debido a la

limitación de espacio en el sitio web, cada categoría de camión de venta de alimentos

está representada por una única imagen. Cuando se diseñó la Pantalla principal de la

aplicación de la Tienda Windows, elegimos poner más información sobre los camiones

de venta de alimentos en el nivel superior y, de este modo, proporcionar más contexto a

los usuarios y crear una interfaz más atractiva.

Sitio web:

Cada categoría de camiones de venta de

alimentos está representada por una única

imagen. Los usuarios deben ir a otra

página para ver más camiones en dicha

categoría y después seleccionar un

camión para ver los detalles.


Cada categoría está representada por un

grupo de imágenes, a fin de que los usuarios

puedan determinar con rapidez qué camiones

de una categoría dada se encuentran cerca.

Los usuarios pueden ir directamente a un

camión desde la Pantalla principal.

Para obtener más información acerca de cómo navegar en las aplicaciones de la Tienda

Windows, consulta el tema sobre el Diseño de navegación para aplicaciones de la

Tienda Windows.

Seguir la silueta de la aplicación de la Tienda Windows y alinear con la cuadrícula

La característica más reconocible de una silueta de aplicación de la Tienda Windows

típica es la región de la pantalla destinada al contenido, con márgenes grandes en los

bordes superior, inferior y derecho. Los márgenes izquierdos y los elementos que

aparecen desde la derecha actúan como indicaciones visuales de que el contenido se

desplaza lateralmente de derecha a izquierda. Los márgenes superior e inferior actúan

como riel visual para anclar el contenido. Los componentes de la página se alinean con

la cuadrícula para representar jerarquía.

Ejemplo: aplicación para camiones de venta de alimentos diseñada en la

cuadrícula y silueta de la aplicación de la Tienda Windows.



Las guías rojas muestran cómo cada elemento de la página se alinea con la cuadrícula

(ten en cuenta que una unidad equivale a 20 px).

A. Los márgenes superior e izquierdo son los mismos en toda la aplicación.

B. Usamos un mismo margen para separar las diferentes categorías de camiones como

"Camiones destacados", "Cercanos" y "Asiáticos".

C. Usamos un mismo margen para separar las imágenes dentro de una categoría de

camiones. Este margen es más pequeño que el de la categoría de camiones de venta

de alimentos para representar jerarquía de diseño de página.

D. El título de grupo de cada categoría de camión de venta de alimentos también se

alinea con la cuadrícula.

Usar manipulación directa para navegar

En el sitio web, los elementos de navegación se repiten tanto en la barra de navegación

superior como en el pie de página. Los elementos de navegación son permanentes y

siempre están a la vista. Hemos diseñado los elementos de navegación en la aplicación

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 camión en concreto en el sitio web y en la aplicación de

la Tienda Windows.

Sitio web:

A. Los usuarios navegan a una página

de categorías separada en el sitio web

para ver todas las categorías de

camiones.


A. La Pantalla principal incluye una

página de concentrador que consta de

grupos de contenido: camiones

destacados, camiones cercanos y la

B. Después eligen una categoría (por

ejemplo, "camiones de venta de

barbacoa") y la especifican.

C. El usuario finalmente puede elegir

un camión en la categoría

seleccionada.

vista de categorías.

B. Los usuarios pueden usar la

funcionalidad táctil para desplazarse

lateralmente en ambas direcciones

para ver las diferentes categorías de

camiones de venta de alimentos

directamente en la Pantalla principal.

C. Dado que cada concentrador resalta

varios camiones en la categoría, los

usuarios pueden pulsar en uno para ir

directamente a su página, o pueden

pulsar en el texto del encabezado de

grupo de la categoría (por ejemplo,

"Asiáticos") para ir a la página de la

categoría.

Comandos y acciones

Mantener las acciones y los comandos de la aplicación en la barra de la aplicación

Los sitios web frecuentemente usan comandos ad-hoc que aparecen como acciones de

usuario en línea con el contexto. Por ejemplo, en nuestro sitio web, la página de cada

camión de venta de alimentos tiene un vínculo para que los usuarios carguen fotos de un

camión dado. Estas acciones contextuales se repiten en la página individual de cada

camión.

Siguiendo el enfoque de "anteponer el contenido al contenedor visual" del diseño de

aplicación de la Tienda Windows, hemos puesto todas las acciones contextuales en la

barra de la aplicación, un control común del sistema. Además, los comandos usados

frecuentemente se encuentran cerca de los bordes para que sea más cómodo llegar a

ellos. Mediante la aplicación de estos principios de diseño, la superficie de diseño de la

aplicación no se encuentra abarrotada de controles, y sin importar dónde se encuentre un

usuario, puede deslizar rápidamente la barra de la aplicación 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 aplicación para sus comandos. Dado que los

usuarios estarán familiarizados con las interacciones de la barra de la aplicación,

también aumenta la facilidad de uso de nuestra aplicación y todo el sistema parece más

coherente.


Ejemplo: cargar una foto de un camión de venta de alimentos en el sitio web y en

la aplicación de la Tienda Windows.

Sitio web:

Comandos ad-hoc. Las acciones del usuario están en línea con el contenido.


De manera predeterminada, la barra de la aplicación se oculta para proporcionar una experiencia envolvente a los usuarios.

Un usuario puede deslizar rápidamente desde la parte inferior o superior de la pantalla para obtener acceso a las acciones contextuales. Las acciones cambian en función del lugar donde se encuentre el usuario en la aplicación 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 búsqueda e inicio de sesión. Estas acciones

se fijan permanentemente a la esquina superior derecha del sitio. Cuando se diseñó la

aplicación 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

Configuración. Dado que estos componentes de la interfaz de usuario no están siempre

en pantalla, el Canvas de la aplicación está más ordenado y proporciona más espacio

para el contenido.

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

Como la mayoría de los sitios web, el sitio de camiones de venta de alimentos tiene un

cuadro de búsqueda en cada página y la búsqueda 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 búsqueda en la aplicación 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

búsqueda, y un usuario puede invocarlo en cualquier parte de la aplicación o desde

cualquier parte del sistema.


Ejemplo: buscar un camión de venta de alimentos con el sitio web y la aplicación

de la Tienda Windows.

Sitio web:

El cuadro de búsqueda está siempre visible en el sitio. Cuando se muestran los resultados de la búsqueda, todo el contenedor visual del sitio

web está presente aún. Los usuarios siempre tienen que ir primero al sitio web antes de realizar una búsqueda

de un camión de venta de alimentos.


Los usuarios pueden realizar una búsqueda en cualquier parte de la aplicación deslizando rápidamente desde el borde para que aparezcan los accesos y eligiendo Buscar.

De manera predeterminada, está seleccionada la aplicación de camiones de venta de alimentos porque el usuario actualmente se encuentra dentro de ella. Cuando el usuario comienza a escribir, la aplicación proporciona sugerencias de búsqueda en el panel de búsqueda. De este modo, puede ver rápidamente qué términos generan resultados. Después de que el usuario envía su consulta (por ejemplo "camión de venta de barbacoa"), la aplicación muestra una vista de resultados de búsqueda.

La vista de resultados de búsqueda está ordenada y dedicada exclusivamente a los resultados de la búsqueda sin contenedor visual innecesario.

Ejemplo: buscar un camión de venta de alimentos fuera de la aplicación

(disponible solo en la aplicación de la Tienda Windows).

Además de buscar en la aplicación, los usuarios pueden realizar una búsqueda desde

fuera de ella seleccionando los camiones de venta de alimentos como destino de la

búsqueda. En este ejemplo, un usuario está buscando un "camión de venta de barbacoa"

desde la pantalla Inicio. El usuario pulsa en la aplicación de camiones de venta de

alimentos de la lista de aplicaciones que se encuentra en el panel de búsqueda, y así se

inicia la aplicación y se completa la consulta de búsqueda. Debido a que el camión de

venta de alimentos está optimizado para encontrar camiones de venta de alimentos

cercanos, con una pulsación el usuario puede realizar una búsqueda y encontrar los

camiones de venta de barbacoa de su área.

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

interesen

En el sitio web de camiones de venta de alimentos, los usuarios pueden compartir

información acerca de un camión de venta de alimentos particular a través del correo

electrónico, Facebook o Twitter. Las opciones de uso compartido generalmente están

disponibles en muchos lugares del sitio web, cerca del contenido que puede compartirse.

Los escenarios de uso compartido realmente se destacan en nuestra aplicación 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 aplicación. Los usuarios siempre pueden encontrar opciones de

contenido compartido en una ubicación coherente, sin importar qué aplicación estén

usando. El cambio simplifica el diseño y el desarrollo porque no hay necesidad de

conectarse con cada servicio que el usuario quiera utilizar. Después de integrar nuestra

aplicación con Compartir, se conecta con cada aplicación 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 camión de venta de alimentos.

Sitio web:

Cada servicio de uso compartido tiene su propio botón.

Los botones de uso compartido aparecen dispersados en todo el sitio web.


Una ubicación coherente en todas las aplicaciones de la Tienda Windows para todas las opciones de uso compartido. Los usuarios pueden invocar el uso compartido en cualquier parte dentro de la aplicación.

Cuando un usuario elige un servicio de uso compartido, la aplicación de destino puede personalizar el panel de la interfaz de usuario y la marca.

Ejemplo: análisis detallado del panel Compartir.


Toda aplicación 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 aplicación. Por ejemplo, los usuarios pueden compartir vínculos, fotos o guardar la información en una aplicación 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 Configuración

El sitio web de camiones de venta de alimentos tiene un conjunto de funciones de

utilidad, como Acerca de, Iniciar sesión, Información de contacto y Boletín. Estas

funciones se encuentran en áreas específicas de la pantalla conforme con modelos de

diseño web comunes. Por ello, los usuarios pueden encontrarlas con facilidad. Pero se

expanden en diferentes áreas del sitio. Las tareas de administración y configuración no

son los puntos focales de la aplicación de la Tienda Windows. Mediante el uso del

contrato de Configuración con su punto de entrada coherente, los usuarios no tienen que

memorizar dónde están estas funciones de administración de la aplicación y pueden

invocarlas de forma confiable cuando sea necesario.


Ejemplo: configurar opciones en el sitio web y en la aplicación de la Tienda

Windows.

Sitio web:

Las funciones de utilidad, como Iniciar sesión, Acerca de, Contacto y Boletín, residen en diferentes áreas del sitio.


A. Las opciones de configuración se encuentran todas en un único lugar en el panel

Configuración.

B. Los usuarios pueden iniciar sesión en cualquier parte dentro de la aplicación sin salir

de su contexto actual.

C. La configuración de notificaciones permite que los usuarios especifiquen qué tipos

de notificaciones quieren recibir. Esto reemplaza el boletín del sitio y proporciona a los

usuarios información oportuna desde la aplicación.

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 aplicación de la Tienda Windows mediante el uso del selector de

archivos. El selector de archivos es un cuadro de diálogo de pantalla completa que

permite a los usuarios obtener acceso a archivos y carpetas ubicados en el equipo local,

en dispositivos de almacenamiento conectados o en otros equipos conectados a través

de un Grupo Hogar. También pueden obtener acceso a elementos de las aplicaciones

que participan en el contrato de Selector de archivos.



Ejemplo: cargar una foto del camión de venta de alimentos desde el sistema de

archivos local.


El usuario pulsa el botón Cargar en la barra de la aplicación 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 múltiples fotos en la carpeta y aparece una lista de miniaturas en el costado inferior izquierdo que muestra las fotos seleccionadas.

Funcionalidad táctil

Usar el desplazamiento lateral para el diseño horizontal

Tanto el sitio web de camiones de venta de alimentos como la aplicación de la Tienda

Windows están diseñados sobre la base de la ergonomía y el método de interacción del

usuario. El sitio web está diseñado principalmente para interacción mediante el mouse.

Por lo tanto, el contenido en cada página está dispuesto verticalmente y los usuarios

pueden usar su mouse para desplazarse al contenido que deseen con facilidad y rapidez.

La aplicación de la Tienda Windows está diseñada para la funcionalidad táctil y usa la

orientación horizontal, como la mayoría de los equipos de escritorio y portátiles. El

diseño horizontal optimiza el uso del espacio en pantalla. Además, es más cómodo y

natural para los usuarios desplazarse horizontalmente con la funcionalidad táctil en un

dispositivo horizontal que desplazarse verticalmente.

Ejemplo: navegar por el contenido del sitio web en lugar de la pantalla principal

de la aplicación de la Tienda Windows.

Deslizamiento transversal para seleccionar objetos

Una convención común en los sitios web es usar casillas junto a múltiples objetos para

indicar las selecciones múltiples. Con Windows 8, un usuario puede hacer un rápido

gesto de deslizar rápidamente sobre un objeto, perpendicularmente a la dirección del

desplazamiento lateral, para seleccionar un objeto de una lista o cuadrícula. Cuando se

seleccionan los objetos, la barra de la aplicación puede revelarse automáticamente 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 página de destino de la aplicación, cuando los usuarios deslizan rápidamente para

seleccionar un camión, se revela una barra de la aplicación con un comando Agregar a

favoritos que puede marcar los camiones seleccionados. Este gesto puede revertirse.

Esto hace que la selección sea mucho más eficiente en las aplicaciones de la Tienda

Windows y da a los usuarios la confianza necesaria para explorar la aplicación.

Alejar y ampliar en el zoom semántico

Los gestos de alejar y ampliar permiten a los usuarios recorrer con rapidez una larga

lista de contenido. La página de aterrizaje de la aplicación de la Tienda Windows

muestra un número de grupos, como Destacados, Cercanos, Asiáticos, Barbacoa y

Desayuno. Los usuarios pueden desplazarse lateralmente para ver más contenido o,

mediante el uso del zoom semántico, pueden saltar rápidamente a una sección específica.

Mediante el uso del control de zoom semántico, el gesto de alejar permite dar un vistazo

a todas las secciones de la vista actual. Después, los usuarios pueden pulsar rápidamente

para saltar al comienzo, al final o a una sección específica de la lista. Puede aplicarse

más diseño a la vista alejada para mostrar contenido interesante dentro de cada sección

o metainformación acerca de una sección (como el número de camiones en cada

categoría). Puede usarse para la navegación, en lugar de los elementos de navegación

persistentes en el Canvas de la aplicación.

Ejemplo: saltar a una categoría de camiones en particular mediante el zoom

semántico.


Sitio web:

El usuario debe navegar a una página separada para ver todas las categorías.


El usuario puede usar el zoom semántico en la Pantalla principal para ver todas las categorías con facilidad, sin salir de la pantalla.

En la vista del zoom semántico, se representa cada categoría mediante una única imagen. Todas las categorías están disponibles a través de la Pantalla principal sin la necesidad de desplazarse lateralmente para ver una lista completa.

Escalado y vistas

Diseño adaptativo para tamaños de pantalla y orientación

Diseñamos el sitio web de camiones de venta de alimentos para que sea lo

suficientemente flexible para escalar a diferentes dispositivos, tamaños de pantalla,

resoluciones y orientaciones. Al igual que en un diseño de sitio web fluido, los equipos

de Windows 8 van desde tabletas táctiles pequeñas a equipos de escritorio o portátiles

grandes. Diseñar nuestra aplicación 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 aplicación llegue a más clientes.

Puedes aplicar muchos principios de diseño 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 orientación cambia a vertical,

se muestran más camiones en cada categoría. Del mismo modo, la aplicación también

muestra más camiones en cada categoría para aprovechar el espacio en pantalla

adicional de los monitores de alta resolución.

Ejemplo: el sitio web del camión de venta de alimentos y la aplicación de la Tienda

Windows en diferentes dispositivos.

Sitio web:

El sitio web de camiones de venta de alimentos ajusta el diseño y redistribuye el contenido para diferentes tamaños de pantalla y factores de forma.


La aplicación de la Tienda Windows en modo horizontal, modo vertical y en una pantalla de alta resolución. Usamos el espacio extra para mostrar más contenido.

Usar la vista acoplada para atraer a tus usuarios

Windows 8 permite a los usuarios realizar múltiples tareas acoplando una aplicación


aplicación en pantalla y atraer a los usuarios por períodos más largos. Es sencillo para

un usuario cambiar la aplicación principal y la aplicación acoplada manipulando el

separador entre ambas. Por ello, es importante mantener el contexto a través de los

cambios de tamaño. No queremos que los usuarios pierdan el estado de la aplicación

como resultado del cambio de tamaño de su aplicación.

Para más información sobre la vista acoplada, consulta las directrices para vistas

acopladas y rellenas.

Ejemplo: la pantalla principal de la aplicación de la Tienda Windows en la vista

acoplada y en la vista rellena.

Izquierda: la aplicación de camiones de venta de alimentos en la vista rellena. El usuario puede usar una aplicación de información meteorológica y la aplicación de camiones de venta de alimentos a la vez.

Derecha: en la vista acoplada, un usuario se desplaza verticalmente para obtener más contenido porque es más cómodo desplazarse por el borde largo. Esto se diferencia del desplazamiento horizontal en la vista rellena, que también se optimiza para desplazarse por el borde largo.

Notificaciones

Usar iconos para actualizaciones dinámicas y persistentes

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 ubicación. El sitio web también 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 aplicación de la Tienda Windows, usamos iconos y

notificaciones del sistema para proporcionar a los usuarios la información más

actualizada adaptada a sus necesidades. Los iconos mostrados en la pantalla Inicio

constituyen puertas de acceso a la aplicación de la Tienda Windows. Están diseñados

para tener una apariencia activa y proporcionar contenido personalizado y actual

adaptado al usuario. Por ello, es más probable que usen la aplicación y aprovechen sus

beneficios. La aplicación sigue mostrando este contenido incluso cuando no está

ejecutándose.

Sitio web:

La sección Últimas noticias del sitio web muestra la última ubicación de un camión. El blog del sitio web enumera los camiones nuevos y proporciona claves acerca de

cuándo los camiones de venta de alimentos estarán en un barrio dado.


El icono principal de la aplicación de camiones de venta de alimentos muestra qué camiones de venta de alimentos se encuentran cerca de un usuario y cuánto tiempo se quedarán en esa ubicación. Los iconos pueden actualizarse incluso cuando la aplicación de camiones de venta de alimentos no esté ejecutándose, para que los usuarios puedan recibir actualizaciones en la pantalla Inicio.

Un usuario puede anclar sus camiones favoritos (por ejemplo, el camión de hamburguesas con queso) como un icono en la pantalla Inicio para recibir las últimas noticias acerca de ese camión. Esto proporciona a los usuarios un alto grado de personalización, adaptado a sus necesidades. Se encuentran disponibles muchas plantillas de icono entre las que los diseñadores pueden elegir para que la implementación sea sencilla.

Usar notificaciones del sistema para notificaciones importantes y temporarias

Además de las notificaciones de icono, también 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 interrumpirán a

los usuarios. Se muestran en la parte superior derecha de la pantalla y pueden aparecer

en cualquier parte del sistema. Generalmente, es mejor permitir que los usuarios elijan

recibir notificaciones durante la primera ejecución de la aplicación. Si corresponde,

muestra las notificaciones del sistema recientes en los iconos mientras todavía sean

relevantes.

Ejemplo: el camión de venta de alimentos favorito de un usuario ha cambiado de

ubicación.

El usuario optó por recibir una notificación del sistema a través del panel Configuración

para que le informe cuando un camión de venta de alimentos favorito haya cambiado de

ubicación.

Conclusión

Cuando crees una aplicación de la Tienda Windows sobre la base de un sitio web

existente, siempre pregúntate cuál es la mejor característica de tu aplicación. Cuando

tengas una respuesta, optimiza tu aplicación de la Tienda Windows para ese escenario.

Siempre recuerda dar énfasis al contenido más que al contenedor visual: usa los

comandos integrados en el sistema, como Compartir, Buscar y Configuración, para

proporcionar acceso a funcionalidad común a través de un mecanismo intuitivo y

familiar. Oculta los comandos fuera de la pantalla cuando no haya necesidad de usar la

barra de la aplicación y los controles de zoom semántico. Y saca provecho de las

notificaciones y los iconos dinámicos para que los usuarios puedan seguir obteniendo

beneficios de tu aplicación, incluso cuando no esté ejecutándose. Si haces esto,

obtendrás una aplicación de la Tienda Windows atractiva que deleitará a tus usuarios y

te ayudará a hacer crecer tu negocio.

Acerca de los autores

Nicholas Huttema es un diseñador visual y de interacción en

Plain Concepts. Disfruta de trabajar con ideas nuevas e

interfaces de usuario ordenadas. Su educación y carrera

comenzaron en Michigan como diseñador de impresiones.

Desde aquél entonces, sumó el diseño 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 diseño para Microsoft, Myspace, Amazon.com y

Herman Miller, entre otros. En su tiempo libre, realiza

actividades como excursionismo, acampada y práctica 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

diseñadores a aprender más acerca del estilo de diseño

Microsoft. Su gran pasión es ayudar a las personas a mejorar

su experiencia del usuario con la tecnología de la que

dependen día a día. Antes de unirse al equipo de Windows,

Qixing trabajó como la primera asesora en experiencia del

usuario en Microsoft Canadá, donde ha dado conferencias en

universidades, comunidades de diseño y empresas acerca de la

inversión de Microsoft en experiencia del usuario. También ha

trabajado en la identificación de creativos y la recolección de

historias sobre diseño obtenidas en la comunidad.

http://www.plainconcepts.com/

Caso práctico de diseño: de iPad a

aplicación de la Tienda Windows

(Windows)








En este artículo

La aplicación Diseño y navegación Comandos y acciones Contratos Funcionalidad táctil Orientación y vistas Notificaciones Acerca de los autores

iOS es una plataforma popular para crear aplicaciones con experiencia táctil, divertidas

y atractivas. Con la introducción de Windows 8, los diseñadores y desarrolladores

tienen una nueva plataforma para dejar correr su imaginación.

En este caso práctico, queremos ayudar a los desarrolladores y diseñadores que están

familiarizados con iOS a rediseñar sus aplicaciones usando los principios de diseño de

las aplicaciones de la Tienda Windows. Te mostramos cómo trasladar diseños de

experiencia e interfaz de usuario comunes encontrados en aplicaciones de iPad a

aplicaciones de la Tienda Windows de Windows 8. Nos basamos en nuestra experiencia

en la creación de la misma aplicación para iPad y para Windows 8. Usamos escenarios

de desarrollo y diseño comunes para mostrar cómo sacar provecho de la plataforma de

Windows 8 e incorporar los principios de diseño de las aplicaciones de la Tienda

Windows.


Venta de aplicaciones. Para más información acerca de las características usadas para

crear aplicaciones de la Tienda Windows, consulta la guía de producto de Windows 8

para desarrolladores.








http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#la_aplicaci_n

http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#dise_o_y_navegaci_n

http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#comandos_y_acciones_


http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#funcionalidad_t_ctil_

http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#orientaci_n_y_vistas

http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#notificaciones_

http://msdn.microsoft.com/es-es/library/windows/apps/hh868262.aspx#acerca_de_los_autores




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

La aplicación

La aplicación que estamos desarrollando es un diario fotográfico en el que los usuarios

pueden ver y administrar sus fotos y vídeos en Internet usando una vista de escala de

tiempo.

La aplicación se creó primero para iPad. En la siguiente imagen se muestra la anatomía

de la aplicación de iPad. Veamos ahora cómo cada componente se traslada al lenguaje

de diseño Microsoft.


1. Diseño y navegación

2. Comandos y acciones

3. Contratos: buscar, contenido compartido y otros

4. Funcionalidad táctil

5. Orientación y vistas

6. Notificaciones


Centrarse en el contenido, no en el contenedor visual

La aplicación de diario fotográfico tiene que ser excelente al mostrar las fotos del

usuario y las actividades sociales recientes de esas fotos. Cuando se creó la aplicación

de la Tienda Windows, nuestro primer objetivo fue quitar todos los elementos de

interfaz de usuario que no eran directamente relevantes para la funcionalidad clave de la

aplicación. Por ejemplo, la barra de navegación superior, los controles de paginación y

la barra de control inferior pueden quitarse. En la siguiente sección, hablaremos de

cómo los usuarios pueden llamar al contenedor visual cuando sea necesario mediante el

uso de la barra de la aplicación.

Para obtener más información acerca de cómo navegar en las aplicaciones de la Tienda

Windows, consulta el tema sobre el Diseño de navegación para aplicaciones de la

Tienda Windows.

Aplicación de iPad

A. Barra de navegación superior

B. Contenido de la aplicación

C. Interfaz de usuario de paginación

D. Barra de pestañas inferior

Aplicación de la Tienda Windows

B. Logotipo y contenido de la aplicación




Ejemplo: vista de escala de tiempo en la pantalla principal

Ambas aplicaciones muestran fotos en su Pantalla principal organizadas por mes, pero

el modo en el que se representa el mes difiere. En la versión de iPad del diario

fotográfico, la página se optimiza para mostrar los doce meses de un año con una

metáfora de fotografías apiladas usada para representar cada mes. Cuando se diseñó la

Pantalla principal de la aplicación de la Tienda Windows, elegimos poner más imágenes

y contenido social en el nivel superior, y así proporcionar más contexto a los usuarios.

Quitamos los bordes de las imágenes y, en su lugar, usamos el espacio en blanco para

proporcionar más enfoque visual a las fotografías, que son el punto focal de la

aplicación.

iPad: cada mes se representa mediante

fotos apiladas con una única foto visible.

Aplicación de la Tienda Windows: cada

mes se representa mediante varias fotos,

sus títulos y el número de comentarios

asociados a las fotos. Los usuarios pueden

ver más contenido resaltado para un mes en

la Pantalla principal.

Reducir la jerarquía de navegación

Hemos usado el diseño de navegación jerárquica en el diseño de la aplicación de la

Tienda Windows. Cuando rediseñamos la aplicación, redujimos la jerarquía de

navegación para que pueda obtenerse acceso a más contenido a través de la pantalla del

concentrador de la aplicación y, de este modo, eliminar la necesidad de navegar.

Ejemplo: quitar la barra de pestañas inferior

Aplicación de iPad

A. Vista de fotos

B. Vista de comentarios

La barra de pestañas inferior con dos tablas dinámicas (fotos y comentarios) siempre

está en pantalla. Los usuarios pueden ver una vista o la otra.


Combinamos el comentario y las fotos en una vista para eliminar la necesidad de una interfaz de usuario con pestañas.

El diseño de concentrador para la Pantalla principal revela el contenido más importante para cada sección.

Para ver toda la lista de comentarios, los usuarios pueden pulsar sobre el encabezado de grupo denominado Comentarios recientes.

Usar manipulación directa para navegar

La manipulación directa permite a los usuarios interactuar con contenido y navegar a

diferentes áreas con naturalidad. Cuando se diseñó la aplicación de la Tienda Windows,

usamos la manipulación directa siempre que fue posible mediante controles integrados,

como el zoom semántico, que permite a los usuarios navegar con más eficacia.

Aplicación de iPad

En la Pantalla principal, pulsa en el botón

Años en la barra de navegación superior

para que aparezca una ventana emergente y

selecciona un año.


En la Pantalla principal, haz un gesto de

alejar con dos dedos para ampliar y ver

todos los meses y años. De esta manera, los

usuarios pueden saltar a cualquier mes de

cualquier año con rapidez. Los usuarios

también pueden obtener una visión general

de los meses que tienen fotos y los que no

(fondo rojo atenuado). Los usuarios pueden

navegar completamente mediante la

manipulación del contenido sin usar

contenedor visual ni navegar a una página

diferente.


Comandos y acciones

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

Cuando se rediseñaron los comandos o las acciones contextuales en la aplicación,

nuevamente seguimos el enfoque de "anteponer el contenido al contenedor visual" e

hicimos que todas las acciones contextuales estén disponibles a través del control de la

barra de la aplicación. Con frecuencia, los comandos usados se encuentran cerca de los

bordes derecho e izquierdo para que sean fáciles de alcanzar con la mano. De este modo,

la superficie de diseño de la aplicación no se encuentra abarrotada de controles y, sin

importar dónde se encuentre un usuario, pueda deslizar rápidamente en la barra de la

aplicación desde la parte inferior o superior de la pantalla para ver las acciones

relevantes. Todas las aplicaciones de la Tienda Windows pueden usar la barra de la

aplicación para sus comandos. Dado que los usuarios estarán familiarizados con las

interacciones de la barra de la aplicación, también aumenta la facilidad de uso de

nuestra aplicación y todo el sistema parece coherente.

Ejemplo: eliminar fotos

Aplicación de iPad

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


A. De manera predeterminada, la barra

de la aplicación está oculta para

modo de selección. proporcionar a los usuarios una

experiencia envolvente. Un usuario

puede deslizar rápidamente desde la

parte inferior o superior de la pantalla

para abrir la barra de la aplicación.

B. Cuando un usuario selecciona

objetos en la página, las acciones

contextuales para los elementos

seleccionados aparecen en la barra.

Las acciones cambian en función de si

hay objetos seleccionados y del lugar

donde se encuentra el usuario en la

aplicación. Los comandos globales

generalmente se colocan en el costado

derecho de la barra de la aplicación.

Los comandos que no son tan

importantes deben colocarse en el

costado izquierdo de la barra de la

aplicación.

Contratos

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

En lugar de crear una interfaz de entrada de búsqueda que forme parte del Canvas de la

aplicación permanentemente, implementamos el contrato de Buscar. Los usuarios

pueden invocar de forma coherente la búsqueda a través de los accesos, y los resultados

pueden presentarse en la aplicación de una manera que sea natural para el contenido.

Mediante el contrato de Buscar, los usuarios pueden invocar el acceso a Buscar desde

cualquier parte del sistema para buscar contenido en las aplicaciones que admiten el

contrato.


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

Aplicación de iPad

La búsqueda está disponible dentro de la aplicación en la Pantalla principal.

Cuando un usuario escribe un término de búsqueda, los resultados comienzan a aparecer y el usuario puede seleccionar uno.


El usuario abre la barra de accesos y obtiene acceso a Buscar. De manera predeterminada, está seleccionada la aplicación de diario fotográfico porque el usuario actualmente se encuentra dentro de ella.

Cuando el usuario comienza a escribir, la aplicación proporciona sugerencias de búsqueda en el panel. De este modo los usuarios pueden ver rápidamente qué términos generarán resultados de búsqueda. Una vez que el usuario envía su consulta, aparece una vista de resultados de la búsqueda y podrá seleccionar el que quiera.

Ejemplo: buscar una foto fuera de la aplicación de diario fotográfico (disponible

solo en aplicaciones de la Tienda Windows)

En este ejemplo se muestra cómo buscar un término en diferentes aplicaciones eligiendo

una nueva aplicación en el panel de búsqueda. Esta función permite a los usuarios

buscar cualquier tipo de contenido, en cualquier aplicación y en cualquier momento.


Un usuario busca el término "Barcelona" en la aplicación de Tweet@Rama y quiere

mirar fotos de Barcelona mediante el diario fotográfico. El diario fotográfico es ahora el

proveedor de resultados de búsqueda. La aplicación se inicia automáticamente y

muestra los resultados de la búsqueda. El usuario no necesita iniciar la aplicación de

diario fotográfico y después realizar la búsqueda.

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

interesen

La integración de los medios sociales es un componente clave de la mayoría de las

aplicaciones. Cuando se diseñan las aplicaciones de iPad, los diseñadores y

desarrolladores generalmente eligen qué canales de medios sociales admite la aplicación

(como Twitter o Facebook) y después los desarrolladores deben integrar cada uno de

estos servicios de forma individual o usar uno de los marcos disponibles. Cuando hay

cambios de API para estos servicios de uso compartido, los desarrolladores deben

actualizar su código para que dichos servicios continúen funcionando.

Cuando se trasladó la funcionalidad de uso compartido a la aplicación de la Tienda

Windows, usamos el contrato para contenido compartido del sistema. Este contrato

simplifica el diseño y el desarrollo porque no hay necesidad de conectarse con cada

servicio que el usuario quiera utilizar. Además de las redes sociales, los usuarios

también pueden guardar contenido en otros servicios, por ejemplo, en una aplicación de

toma de notas como Notespace o EverNote. Mediante el uso de tan solo una pequeña

cantidad de código, nuestra aplicación se conecta con cada aplicación de la Tienda

Windows que ha implementado el contrato para contenido compartido. No hay

necesidad de lidiar con cambios de API en servicios web o sitios de redes sociales

externos. Desde el punto de vista de los usuarios, siempre pueden compartir desde una

ubicación coherente; para ello, solo deben acceder a la barra de accesos y abrir el panel

Compartir.


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

iPad

Para compartir una foto desde la aplicación de diario fotográfico de iPad, un usuario

primero pulsa en el botón de acción de la barra de navegación superior y después elige

compartir en Facebook. El desarrollador necesita realizar trabajo adicional y agregar

más botones Compartir si quiere integrarse con otros servicios de redes sociales más

adelante.


Los usuarios siempre pueden encontrar opciones de uso compartido en una ubicación coherente, sin importar qué aplicación estén usando.

Toda aplicación instalada que se haya designado como destino de contenido compartido aparece en la lista de aplicaciones en el panel Compartir. Por ejemplo, Socialite, Tweet@Rama, Notespace y PaintPlay son todas destinos de contenido compartido.

Los usuarios pueden compartir una variedad de tipos de contenido. Por ejemplo, pueden compartir vínculos, fotos o guardar información en una aplicación de toma de notas.

Los destinos de contenido compartido usados con más frecuencia se muestran en la parte superior de la lista para ayudar a los usuarios a completar las tareas con rapidez.

Además de ser un origen de contenido compartido, diseñamos nuestra aplicación de

diario fotográfico para que sea también destino de contenido compartido. Los usuarios

pueden compartir con facilidad fotos desde otra aplicación en sus secuencias de fotos

del diario fotográfico. Esta conexión también se habilita mediante el contrato para

contenido compartido. Consulta el tema sobre las directrices y la lista de comprobación

para uso compartido de contenido para más información acerca de qué aplicaciones

constituyen excelentes destinos de contenido compartido.



Ejemplo: compartir fotos de otra aplicación con el diario fotográfico: destino de

contenido compartido (disponible solo en aplicaciones de la Tienda Windows)

En este ejemplo, un usuario de otra aplicación de fotos mira imágenes de un viaje a

México. Quiere compartirlas desde el álbum con su propia colección de la aplicación de

diario fotográfico para que sea más fácil verlas en una vista de escala de tiempo.

Cuando abre el panel Compartir, ve que la aplicación de diario fotográfico se menciona

como uno de los destinos de contenido compartido, entonces invoca al flujo de trabajo

Compartir.

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

El selector de archivos es un cuadro de diálogo de pantalla completa que permite a los

usuarios obtener acceso a archivos y carpetas ubicados en el equipo local, en

dispositivos de almacenamiento conectados o en un Grupo Hogar. También puede

obtener acceso a los elementos desde aplicaciones que participan en el contrato de

Selector de archivos.

Ejemplo: cargar una foto desde el sistema de archivos local


Aplicación de iPad

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

servicios de redes sociales.


A. El usuario pulsa el botón Cargar en la barra de la aplicación y se abre la interfaz de

usuario del selector de archivos. Esta es una interfaz de usuario coherente que el

usuario 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 múltiples fotos en la carpeta y aparece una lista de miniaturas

en el costado inferior izquierdo que muestra las fotos seleccionadas.

Ejemplo: buscar una foto del diario fotográfico en otra aplicación (disponible solo

en aplicaciones de la Tienda Windows)

También aprovechamos una característica que es exclusiva de las aplicaciones de la

Tienda Windows y agregamos compatibilidad para la selección de contenido fotográfico

desde el diario fotográfico de otra aplicación. Esto permite que los usuarios se ahorren

el paso de descargar las fotos primero desde el diario fotográfico al sistema de archivos

local y que después tengan que cargar las fotos en otra aplicación. El diario fotográfico

implementa el contrato de Selector de archivos para que el sistema lo reconozca como

ubicación de almacenamiento de archivos.


Un usuario se encuentra en la pantalla Configuración del equipo y pulsa en Examinar

para personalizar la foto de su cuenta. Dado que el diario fotográfico implementa el

contrato de Selector de archivos, el usuario puede ver que la aplicación está disponible

para acceder a ella en el directorio de archivos. Entonces, el usuario puede seleccionar

una foto almacenada en la colección de su diario fotográfico.

Funcionalidad táctil

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

En Windows 8, un usuario puede deslizar rápidamente desde los bordes para obtener

acceso a diferentes comandos y navegar entre aplicaciones.

Los comandos de la aplicación aparecen al deslizar rápidamente desde el borde inferior o superior de la pantalla. La barra de la aplicación siempre debe usarse para mostrar comandos de la aplicación.

Al deslizar rápidamente desde el lado derecho de la pantalla, aparece la barra de accesos que contiene los comandos del sistema.

Al deslizar rápidamente desde la izquierda, se cambia a las aplicaciones que ya se usaron.

Al deslizar rápidamente desde el borde superior al borde inferior de la pantalla, se pueden acoplar o cerrar las aplicaciones.

Ejemplo: acceder a la barra de la aplicación y a la barra de botones de acceso en

una aplicación de la Tienda Windows

Desliza rápidamente desde el borde inferior

o superior de la pantalla para obtener

acceso a los comandos de la aplicación.

Desliza rápidamente desde el borde

derecho de la pantalla para revelar la barra

de accesos que contiene los comandos del

sistema: Buscar, Compartir, Iniciar,

Dispositivos y Configuración.

Deslizamiento transversal para seleccionar objetos

Con Windows 8, un usuario puede deslizar el dedo una distancia breve,

perpendicularmente a la dirección del movimiento panorámico, para seleccionar un

objeto de una lista o cuadrícula. Cuando se seleccionan objetos, se revela la barra de la

aplicación que muestra automáticamente los comandos relevantes.

Ejemplo: seleccionar varias fotos para eliminar

Aplicación de iPad

Los usuarios entran en un modo de edición específico para realizar la


Los usuarios deslizan rápidamente hacia abajo sobre el objeto para

acción de selección y otras acciones de edición. Esto se debe a que el gesto de pulsar se reserva para las acciones principales, como el inicio.

Los usuarios salen del modo de edición cuando han terminado.

seleccionar y la barra de la aplicación se muestra automáticamente con comandos relevantes contextualmente.

Los usuarios pueden pulsar o seleccionar un objeto sin entrar en otro modo y salir de él.

Este gesto es reversible, lo que hace que la selección sea mucho más eficiente en las aplicaciones de Windows 8.

Alejar y ampliar en el zoom semántico

Si bien los gestos de alejar y ampliar generalmente se usan para cambiar el tamaño tanto

en las aplicaciones de la Tienda Windows como en las de iPad, en Windows 8 también

permiten saltar al comienzo, al final o a cualquier parte del contenido mediante el zoom

semántico. El zoom semántico permite al usuario alejar para ver los datos de grupos

relacionados y proporciona un modo rápido de volver a reducir. En lugar de

proporcionar navegación para revisar largas listas de contenido, usa el zoom semántico

cuando sea posible para este tipo de interacción. Por supuesto, cuando un usuario

visualiza una foto en el modo de pantalla completa, los gestos de alejar y ampliar

pueden usarse para el zoom óptico.



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

vista de mes


A. El zoom semántico en la Pantalla principal permite que los usuarios salten a un mes

particular de cualquier año rápidamente.

B. El zoom semántico en una página de radio de vista de mes permite a los usuarios

saltar a un día particular y también proporciona un gráfico de información que detalla

cuántas fotos están disponibles de ese año.


Diseño adaptativo para tamaños de pantalla y orientación

Una aplicación de iPad tiene una resolución y un tamaño de pantalla fijos con dos

orientaciones que los diseñadores tienen que considerar. Windows 8 se ejecuta en

diversos factores de forma, desde tabletas portátiles a equipos de escritorio todo en uno.

Como resultado, puedes usar el espacio de pantalla adicional para mostrar más

contenido a los usuarios. Cuando se rediseñó la aplicación de diario fotográfico,

consideramos cómo se vería la aplicación en dos orientaciones de dispositivo, teniendo

en cuenta los tamaños de los dispositivos y las resoluciones de pantalla. El diseño de

cuadrícula facilita la escalación del diseño tanto para el diseño vertical como para las

pantallas de alta resolución. Por ejemplo, incluimos más fotos resaltadas en cada mes

donde hay más espacio vertical disponible.

Ejemplo: diseño de pantalla principal con orientación horizontal, orientación

vertical y pantallas grandes (solo para aplicación de la Tienda Windows)

Aplicación de iPad

El mismo contenido se muestra tanto en el diseño horizontal como en el vertical. El

contenido se redistribuye en la orientación vertical.


La aplicación muestra más contenido en cada sección de la página de concentrador en el

diseño vertical y en pantallas más grandes, lo que ocupa espacio adicional. De un modo

similar a la creación de imágenes para una pantalla Retina de iOS, creamos varias

imágenes para diferentes porcentajes de escala de Windows: 100 %, 140 % y 180 %.

Estas imágenes se cargan automáticamente en tabletas de alta definición.

Usar la vista acoplada para atraer a tus usuarios



aplicación en pantalla y atraer a los usuarios por períodos más largos. Es sencillo para

un usuario cambiar la aplicación principal y la aplicación acoplada manipulando el

separador entre ambas. Por ello, es importante mantener el contexto a través de los

cambios de tamaño. No queremos que los usuarios pierdan el estado de la aplicación

como resultado del cambio de tamaño de su aplicación.

Ejemplo: vista acoplada de la pantalla principal


La vista acoplada de la Pantalla principal es simplemente una vista diferente de la página principal donde un usuario todavía puede obtener acceso al mismo contenido.

En esta vista, un usuario se desplaza verticalmente para obtener más contenido porque es más cómodo desplazarse por el borde largo. Esto se diferencia del desplazamiento horizontal en la vista completa, que también se optimiza para desplazarse por el borde largo.

Notificaciones

Usar iconos para actualizaciones dinámicas y persistentes

iOS 5 introdujo un centro de notificaciones donde las notificaciones nuevas aparecen

rápidamente en la parte superior de la pantalla y los usuarios pueden deslizar

rápidamente desde la parte superior para ver todos los mensajes en el centro. Además,

los iconos de aplicación en Springboard de iOS pueden tener adheridas notificaciones

numéricas para indicar que hay mensajes nuevos. Los iconos de la pantalla Inicio de

Windows 8 combinan la funcionalidad de las notificaciones numéricas en los iconos de

aplicación y del centro de notificaciones en un iPad. Los usuarios pueden iniciar

aplicaciones y leer las notificaciones desde un solo lugar. Además, a diferencia de las

notificaciones en iOS que tienen un formato fijo, los iconos de las aplicación de la

Tienda Windows tienen una gran colección de plantillas entre las que los diseñadores

pueden elegir.


Ejemplo: notificaciones en la pantalla principal

iPad

A. Icono de la aplicación con notificación

numérica en Springboard de iPad.

B. Centro de notificaciones con

notificación del diario fotográfico.

Windows 8

C. Icono en la pantalla Inicio con

notificaciones y notificaciones numéricas.

Existen muchas plantillas de icono

disponibles.

Usar notificaciones del sistema para notificaciones importantes y temporarias

Puedes usar notificaciones del sistema para notificar a los usuarios sobre eventos en

tiempo real. A diferencia de las actualizaciones de icono, que son pasivas, las

notificaciones del sistema en las aplicaciones de la Tienda Windows son actualizaciones

importantes que interrumpirán a los usuarios. Se muestran en la parte superior derecha

de la pantalla y pueden aparecer en cualquier parte del sistema. Generalmente, es mejor

permitir que los usuarios elijan recibir notificaciones durante la primera ejecución de la

aplicación. Si corresponde, muestra las notificaciones del sistema recientes en los

iconos mientras todavía sean relevantes. Las notificaciones del sistema son similares a

las alertas transitorias de iOS que se muestran como pancartas en la parte superior de la

pantalla. Pero los diseñadores pueden elegir entre una colección de plantillas de

notificaciones del sistema para hacer que sus notificaciones sean más relevantes.


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

de un familiar

El usuario está configurado para recibir notificaciones del sistema cuando un familiar

comenta fotos de la aplicación.

Acerca de los autores

Bart Claeys es el diseñador principal de experiencia del

usuario de Ratio Interactive y se especializa en interfaz de

usuario y experiencia del usuario en aplicaciones móviles y

web. Anteriormente, trabajaba como director de arte

interactivo para Saatchi & Saatchi Brussels, donde creó

campañas interactivas para Toyota, Sony y muchas otras

marcas internacionales. Bart realizó una maestría en

Desarrollo de Productos y recibió instrucción adicional en

administración de marcas. Es el fundador de Creativeskills.be,

el tablón de anuncios de trabajo creativo líder de Bélgica. En

2006 Bart ganó el premio "Jij Bent Flanders Future", creado

por el gobierno flamenco para promover el espíritu

empresarial.

Qixing Zheng es directora del programa de experiencia del

usuario de Microsoft. Forma parte del equipo que creó la

interfaz de usuario de Windows 8 y ha estado ayudando a los

diseñadores a aprender más acerca del lenguaje de diseño

Microsoft. Su gran pasión es ayudar a las personas a mejorar

su experiencia del usuario con la tecnología de la que

dependen día a día. Antes de unirse al equipo de Windows,

Qixing trabajó como la primera asesora en experiencia del

usuario en Microsoft Canadá, donde ha dado conferencias en

universidades, comunidades de diseño y empresas acerca de la

inversión de Microsoft en experiencia del usuario. También ha

trabajado en la identificación de creativos y la recolección de

historias sobre diseño obtenidas en la comunidad.

Caso práctico de diseño: aplicación de la

Tienda Windows de la línea de negocio

empresarial (Windows)








Resumen

Aprende a diseñar aplicaciones de la Tienda Windows de línea de negocio (LOB) para clientes empresariales en Windows 8.

En este artículo

Diseño de aplicaciones de línea de negocio para Windows 8 Descripción de los casos de usos Diseño de la experiencia del usuario Soporte de dispositivos incorporado Conectar con datos Autenticación y seguridad Entorno de desarrollo Pruebas Implementación Administración 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 implementación y permiten que tus empleados interactúen

con sus equipos de una manera más natural. Este artículo muestra cómo diseñar y

desarrollar aplicaciones de la Tienda Windows de línea 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. También

proporciona sugerencias para aprovechar nuevos factores de forma para crear

experiencias atrayentes para los usuarios empresariales.








http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#dise_o_de_aplicaciones_de_l_nea_de_negocio_para_windows_8

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#descripci_n_de_los_casos_de_usos

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#dise_o_de_la_experiencia_del_usuario

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#soporte_de_dispositivos_incorporado

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#conectar_con_datos

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#autenticaci_n_y_seguridad

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#entorno_de_desarrollo

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#pruebas

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#implementaci_n

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#administraci_n_de_las_aplicaciones_de_la_tienda_windows

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#acerca_del_autor

Diseño de aplicaciones de línea de negocio para Windows 8

Las aplicaciones de línea de negocio (LOB) en la empresa crean un conjunto único de

retos para los desarrolladores. Las aplicaciones destinadas al cliente general están

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. Además, las aplicaciones de

LOB suelen funcionar con almacenes de datos back-end, están orientadas a procesos

empresariales específicos y deben cumplir directivas de seguridad restringidas. Para

garantizar la seguridad de los recursos de la compañía, las aplicaciones de LOB deben

tener un control férreo sobre las actualizaciones de las aplicaciones. Algunos ejemplos

de aplicaciones LOB serían las aplicaciones de punto de venta, catálogos de productos,

paneles informativos, aplicaciones de ventas, aplicaciones de administración de flujos

de trabajo y aplicaciones de supervisión y respuesta.

Con Windows 8, Microsoft ha introducido las aplicaciones de la Tienda Windows

creadas por encima del nuevo Windows en tiempo de ejecución. 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 táctiles, mejor seguridad y sencillez de

implementación y actualización. Aunque Windows en tiempo de ejecución es nuevo, los

desarrolladores pueden usar sus conocimientos y aptitudes actuales. Las aplicaciones de

la Tienda Windows se pueden escribir en HTML y JavaScript, además 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 práctico, 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 tenían aplicaciones para los

usuarios que trabajan en la oficina, querían que Sonoma Partners les creara nuevas

experiencias para su personal laboral cada vez más móvil. Un cliente necesitaba crear

una aplicación para los representantes de clientes que trabajan en campo. Estos

representantes de campo necesitaban una solución portátil que les permitiera trabajar

remotamente en las oficinas de los clientes, en sus coches, en una cafetería, etc. El

smartphone resultaba demasiado pequeño para las necesidades de los representantes,

pero los equipos portátiles eran muy grandes. En este caso, una tableta sería el

dispositivo perfecto.

En este artículo veremos los requisitos que se indicaron a Sonoma Partners para esta

aplicación de LOB determinada, hablaremos sobre cómo Windows 8 y el diseño de la

aplicación de la Tienda Windows ayudaron a crear una solución y veremos cómo se

pueden usar las aplicaciones de la Tienda Windows para crear unas experiencias de

usuario excepcionales para tu propia organización. Para proteger la propiedad

intelectual de Sonoma Partners y su cliente, en este caso práctico mostraremos una

aplicación genérica de Fabrikam basada en el diseño de Sonoma Partners.

Para este caso práctico, Fabrikam es un fabricante de widgets que necesita una

aplicación para sus representantes de campo en las empresas.

Arriba

http://msdn.microsoft.com/es-es/library/windows/apps/jj659079.aspx#top

Descripción de los casos de usos

Windows 8 está diseñado para ejecutarse en dispositivos que van desde tabletas de

mano hasta grandes equipos compactos todo en uno. Estos dispositivos pueden usar la

funcionalidad táctil, el lápiz o el mouse y el teclado como sus métodos de entrada

principales. Windows y las aplicaciones funcionan bien con todos estos métodos de

entrada.

Antes de diseñar la aplicación, Sonoma pasó una temporada con el cliente. Se fijaron en

los casos de uso particulares de la aplicación y estudiaron a sus usuarios. Al limitarse a

unos pocos casos de uso básicos, pudieron centrar la funcionalidad de la aplicación. Una

útil manera de capturar esto sería el enunciado de puntos fuertes; por ejemplo, esta

aplicación en particular es "genial para que los representantes de campo puedan estar al

tanto de sus cuentas de clientes a diario mientras están 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 aplicación.

Como los representantes de campo pasan la mayor parte del tiempo en la carretera, lo

más probable es que lleven equipos ultraportátiles. Las tabletas, los equipos convertibles

y los portátiles táctiles de próxima generación compatibles con Windows 8 son ideales

para estos escenarios. Estos nuevos dispositivos son mucho más portátiles que los

portátiles tradicionales, a la vez que permiten una mayor productividad en comparación

con los smartphones. Son ligeros, la duración de la batería es mucho las larga, ocupan

poco espacio en la bolsa o en la mesa y se pueden pasar fácilmente de una persona a

otra para ver el contenido.

Estas nuevas categorías de PC también vienen con funcionalidades de ubicación

geográfica y cámaras. Gracias a estas funcionalidades, Sonoma Partners pudo agregar

fácilmente funcionalidades de mapas, foto y vídeo a su aplicación. De este modo, los

representantes podrían obtener direcciones para sus siguientes citas, o capturar una

imagen o un vídeo mientras trabajaban fuera de la oficina. Las aplicaciones de la Tienda

Windows también funcionan en equipos compactos todo en uno y con mouse y teclado

en la oficina, de forma que nunca están limitadas a un factor de forma particular.

Arriba

Diseño de la experiencia del usuario

Las aplicaciones de la Tienda Windows están 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 diseños

limpios y abiertos que incorporan una clara jerarquía de información, animaciones

adecuadas e interacciones directas básicamente táctiles.

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 aplicación: ¿qué es lo primero que haría un usuario y qué haría después?

Para esta aplicación particular, era evidente que los escenarios como la programación de

citas con los clientes, la gestión de pedidos y la revisión de los datos de ventas tenían

una gran importancia.


Arriba

Navegar por la aplicación

Basándose en los anteriores análisis, es claro que esta aplicación LOB incorporaba un

flujo constante de datos. Un cuidado especial con la administración visual y

organizativa de estos datos fue fundamental para hacer que la aplicación se pudiera

utilizar a la vez que se cumplían 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 aplicación. Para un representante de campo, estos son la

parte vital de su trabajo, de modo que tiene sentido formar agrupaciones o jerarquías

alrededor de este contenido.

A diferencia de las aplicaciones de escritorio tradicionales, las aplicaciones de la Tienda

Windows no usan pestañas ni menús para la navegación. En cambio, las aplicaciones de

la Tienda Windows usan patrones de navegación planos o jerárquicos formados por

páginas o vistas a pantalla completa. El gran volumen de contenido de esta aplicación,

así como su tipo, encajaban a la perfección en un patrón de navegación jerárquico. En

este caso, los pedidos y los contactos están vinculados a las cuentas y la citas están

vinculadas a los contactos.

El núcleo de este patrón jerárquico es la página de concentrador, que es la página

principal de la aplicación. La página de concentrador consta de varias secciones

visualmente distintas que corresponden a diferentes áreas de la aplicación. Estas

secciones exponen funcionalidades o contenido únicos directamente en la página. En el

caso de Sonoma Partners, estaba claro que la página de concentrador expondría

contenido acerca de las cuentas y los pedidos; las citas, las tareas pendientes, los

pedidos sin completar, los vínculos directos a cuentas principales y los datos de ventas

según tendencias eran todos muy importantes para el representante móvil.

Como diseñador o desarrollador de aplicaciones, podrás definir cada página de la

jerarquía por separado. Después podrás usar las clases de navegación para administrar el

flujo de la aplicación. Puedes ver un ejemplo de flujo en el siguiente figura.


Al igual que en Internet, puedes definir la navegación que ocurre cuando un usuario

hace clic en una parte determinada del contenido o de la sección de la página. En las

aplicaciones de la Tienda Windows, la navegación también se administra mediante un

botón Atrás permanente en cada página o con el estado real en la barra de la aplicación

superior. Para ver más información sobre las distintas opciones de navegación para la

aplicación de la Tienda Windows, consulta Diseño de navegación para aplicaciones de

la Tienda Windows. Para ver un ejemplo de cómo usar la navegación en la aplicación de

la Tienda Windows, consulta Navegar entre páginas y Admitir navegación.

Arriba

Reducir el desorden y resaltar el contenido moviendo los comandos a la barra de la aplicación

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

también se conoce como el contenedor visual) puede crear un desorden de elementos en

la experiencia y desmerece el propósito de la aplicación. En las aplicaciones de la

Tienda Windows, los comandos rara vez se encuentran en la propia página (aunque sí

podrían estar si son especialmente importantes). En cambio, el contenido se debería

manipular directamente cuando sea posible, por ejemplo, acercando los dedos para usar

el zoom o mediante comandos en la barra de la aplicación.






La barra de la aplicación aparece en los bordes superior e inferior de la aplicación. El

superior se suele usar para la navegación. La barra de la aplicación contiene comandos

que son contextuales a la página actual y el contenido seleccionado, como se muestra en

la siguiente figura.

La barra de la aplicación por lo general no se ve en la pantalla, pero se puede mostrar al

deslizar el dedo rápidamente desde los bordes superior o inferior, al hacer clic con el

botón secundario del mouse o al presionar la tecla del logotipo de Windows+Z en el

teclado. Además, la barra de la aplicación aparece automáticamente cuando se realiza

una selección en el contenido de una aplicación. Como la barra de la aplicación 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

aplicación sea más fácil de aprender.

Para obtener información detallada sobre el uso de la barra de la aplicación en tu propia

aplicación, lee los siguientes temas.

Inicio rápido: Agregar barras de la aplicación Inicio rápido: agregar una barra de la aplicación con comandos Inicio rápido: Agregar una barra de la aplicación con contenido personalizado Directrices y lista de comprobación para barras de aplicación Directrices para barras de la aplicación

Arriba

Uso del Zoom semántico para navegar y resumir contenido







Una aplicación de LOB, como la que ha creado Sonoma Partners, suele tener mucho

contenido que administrar. ¿Cómo se crea una experiencia táctil que use diseños limpios

y abiertos, a la vez que facilita al usuario la navegación rápida por grandes cantidades

de contenido en una sola vista? Proporciona el zoom semántico.

El zoom semántico es un comportamiento de zoom que permite alejar una vista con

gesto táctil de reducir, o con un botón del mouse y el teclado. En el estado alejado, el

usuario ve una vista resumida del contenido que se puede usar para la navegación o para

proporcionar un contexto más significativo. Por ejemplo, al alejar una lista de contactos

se puede presentar una lista de letras con el número de contactos bajo cada letra: al

hacer clic en la letra "A" se pasaría a la lista de contactos que comienzan con "A". En la

siguiente figura, el zoom semántico permite ver una sencilla imagen general de los datos

a la vez que se permite la navegación de la larga vista de concentrador.

Como se muestra en la figura, el zoom semántico en parte consiste en agrupar datos

para facilitar la navegación. En este caso, la navegación se mueve desde un final de una

larga lista hasta el otro final, el equivalente del "zoom óptico". El zoom semántico

también permite usar la vista alejada para proporcionar cuentas y estadísticas que

describen los datos generales de manera resumida. Esto das a los usuarios un acceso

rápido y fácil a detalles importantes de la imagen global.

Como el control de zoom semántico se basa en las plantillas que proporciones, tienes la

libertad de incluir las vistas que consideres valiosas para tus usuarios y hacer que estén

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 semántico, dispones de toda una variedad de excitantes

posibilidades de visualización de datos.

Para obtener información detallada sobre el uso de la barra del control de zoom

semántico en tu aplicación, lee los siguientes temas.

Agregar controles SemanticZoom Directrices para zoom semántico

Arriba

Compatibilidad con diferentes diseños

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, más todo lo

que haya en medio. En vez de tener que crear varias páginas para admitir varios

tamaños de página, Sonoma Partners simplemente definieron varios diseños para la

misma página. Cada diseño especifica cómo 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 función de cuánto estado real de pantalla se encuentra disponible. La

interacción del usuario, el enlace de datos y otros componentes de la aplicación no

cambian. Solo cambia el área de visualización.

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 diseñar la aplicación de forma que cumpliera

con la variadas preferencias y necesidades ergonómicas de los usuarios. Los usuarios ya

no estaban restringidos a un diseño particular. La vista acoplada hace que la aplicación

se más cómoda para los usuarios, ya que permite que se pueda ver junto con otras

aplicaciones empresariales, como una aplicación de correo electrónico.




Para obtener información detallada sobre cómo definir diferentes diseños en la

aplicación, consulta Definición de diseños y vistas.

Arriba

Los contratos proporcionan una experiencia coherente en Windows

Los contratos permiten que la aplicación participe en interacciones comunes de

Windows. Al implementar contratos en la aplicación, puedes proporcionar a los

usuarios una experiencia coherente con todo Windows.

Contrato de Buscar

La búsqueda es una experiencia básica en Windows. Los usuarios pueden buscar

fácilmente en las aplicaciones, los archivos y las configuraciones deslizando el dedo

rápidamente desde la derecha (o moviendo el mouse a la esquina derecha) y haciendo

clic o pulsando en el acceso a Buscar. Las aplicaciones también pueden aprovechar esta

experiencia con la implementación del contrato de Buscar, que permite que los usuarios

puedan buscar en la aplicación. Sonoma Partners aprovechó esto al máximo al

implementar la compatibilidad de la aplicación 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 aplicación

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. Después puede buscar mensajes recientes en la aplicación de correo

electrónico y, a continuación, pasa a la aplicación de LOB para buscar pedidos. Como

desarrollador, tienes control absoluto sobre la experiencia de búsqueda y cualquier

indización que se deba implementar.



El contrato de Buscar es muy sencillo de configurar. Un contrato es, de hecho, un

acuerdo entre la aplicación y el sistema operativo. El contrato describe los requisitos de

la aplicación 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 término de búsqueda. Cuando recibe una

consulta, la aplicación de LOB busca sus datos en muestra los resultados relevantes.

En este tema puedes ver un ejemplo de cómo implementar el contrato de Buscar en tu

aplicación: Inicio rápido: agregar búsqueda a una aplicación. Este tema describe todos

los contratos disponibles en las aplicaciones de la Tienda Windows: Extensiones y

contratos entre aplicaciones.

Arriba

Contrato de Configuración

Al igual que con el contrato de Buscar, puedes aprovechar el contrato de Configuración

para crear una experiencia familiar para la configuración específica del usuario. Esta

configuración puede incluir opciones de notificaciones del sistema, acceso a

dispositivos y configuración de ubicación. Puedes crear una experiencia familiar valores

globales a la aplicación, pero que pueden cambiar, como nombres de servidores,

ubicaciones e información de inicio de sesión. Para las aplicaciones de la Tienda

Windows de LOB, el contrato de Configuración también es ideal para la configuración

de administración de cuentas, como la identidad de usuarios y los permisos,

administración de varias cuentas, cierre de sesión y detalles de cuentas. El acceso a

Configuración simplifica la experiencia de los usuarios y reduce el desorden en la

aplicación. Por ejemplo, no es necesario ocupar espacio con un botón de configuración

dedicado. Se puede acceder fácilmente al acceso a Configuración 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 información sobre la implementación del contrato de Configuración en tu

aplicación, consulta Agregar configuración de la aplicación.

Arriba

Iconos dinámicos para información actualizada, notificaciones del sistema para notificaciones,

iconos secundarios para accesos directos

Los representantes de campo viajan con mucha frecuencia. Mientras están en la

carretera, habitualmente tienen que echar un vistazo rápido a lo próximo que tienen que

hacer. Al admitir los iconos dinámicos, el propio icono informa al representante acerca

de las próximas citas sin necesidad de ejecutar la aplicación. Sonoma amplió su

aplicación aún más 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 fácil acceso a los clientes y las cuentas de ventas

importantes llevando a los usuarios directamente a la página de detalles relevante y

admitiendo las actualizaciones de iconos dinámicos para esa cuenta particular.

Mientras el usuario está usando otra aplicación, una notificación del sistema puede

notificar al usuario acerca de una información importante. Al pulsar o hacer clic en la

notificación del sistema, se cambia instantáneamente a la aplicación. Sonoma ha usado

las notificaciones del sistema para notificar al representante de campo acerca de una cita

próxima, un cambio en el estado de un pedido y otra información importante, como se

muestra en la siguiente figura.

Para obtener información sobre cómo usar iconos dinámicos, notificaciones del sistema

e iconos secundarios en tu aplicación, lee estos temas.

Creación de iconos Anclaje de iconos secundarios Envío 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 generación con Windows 8. Una de estas

funcionalidades es la ubicación geográfica. Al combinar funcionalidades de ubicación

geográfica con los Mapas de Bing, Sonoma pudo mostrar la ubicación actual del usuario

en una vista de mapa junto con las ubicaciones de reuniones y clientes. Esto es una

experiencia más intuitiva que lo tradicionalmente posible.

Para obtener información sobre cómo usar las ubicación geográfica con los Mapas de

Bing en tus propias aplicaciones de la Tienda Windows, consulta estos temas.

Detectar la ubicación geográfica Mapas de Bing para aplicaciones de la Tienda Windows

Además de la compatibilidad de la ubicación geográfica, Sonoma Partners ha podido

usar la compatibilidad de cámara integrada y selector de archivos en Windows 8. Esto

simplifica en gran medida el proceso de agregar imágenes y vídeos a la aplicación de

LOB. Con esta funcionalidad, el usuario puede agregar fácilmente una foto de un cliente

con la cámara incorporada, el disco local, la nube o incluso servicios de terceros. Para

obtener información sobre cómo se puede agregar compatibilidad con las

funcionalidades de selector de archivos y cámara en las aplicaciones de la Tienda

Windows, consulta Captura o representación de audio, vídeo e imágenes y Obtener

acceso a datos y archivos.

Arriba

Conectar con datos

Sonoma Partners ha creado su aplicación de la Tienda Windows como parte de una

solución general para administrar las aplicaciones del cliente para datos y procesos

empresariales. Todas estas aplicaciones se basan en Microsoft Dynamics CRM como su

almacén de datos. Como la aplicación de la Tienda Windows desarrollada por Sonoma

Partners se ha diseñado para los representantes de campo, necesitaban conectarse con

los datos de la empresa en redes públicas. Al usar servicios de web seguros, Sonoma

Partners pudo entregar los datos de Microsoft Dynamics CRM a la aplicación de la

Tienda Windows sin exponer ninguno de los datos confidenciales del cliente. Los

servicios web proporcionan un marco común para describir y compartir datos, y son una

gran manera de trabajar con datos en un entorno distribuido.






http://go.microsoft.com/fwlink/p/?LinkId=263496





Para obtener información detallada sobre cómo conectarse con los servicios web desde

la aplicación, consulta los siguientes temas.

Conexión a un servicio web Inicio rápido: conexión mediante XML HTTP Request (IXHR2) Inicio rápido: conexión a un servicio web con WinJS.xhr Windows Communication Foundation Services y WCF Data Services en Microsoft Visual

Studio Introducción a los servicios móviles de Windows Azure

Las aplicaciones de la Tienda Windows también pueden almacenar datos locales en la

aplicación para el acceso sin conexión y el uso por parte de la aplicación. Esto puede ser

útil para los escenarios con datos sin conexión que se sincronizan con el almacén de

datos central periódicamente, o cuando hay una conexión disponible. Para obtener más

información, consulta Trabajar con datos y archivos.

Las aplicaciones de la Tienda Windows que necesitan acceso a datos sin conexión

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 ejecución. Para obtener más información, consulta SQLite para

aplicaciones para Windows 8.

Arriba

Enlazar a datos

Como con cualquier aplicación, el enlace de datos es una potente herramientas que

simplifica tu código. 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

Autenticación y seguridad

Como se mencionó anteriormente, Sonoma Partners usa Microsoft Dynamics CRM

como almacén de datos de su aplicación. Como resultado, la información de inicio de

sesión del usuario también 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

sesión. De nuevo, esto se aseguró con Capa de sockets seguros (SSL). Cuando se carga

la aplicación, el usuario ve una pantalla de inicio de sesión después de la pantalla de

presentación, como se muestra en la siguiente figura.













Para crear una mejor experiencia del usuario, Sonoma Partners ha utilizado el almacén

de contraseñas de Windows 8. Esto libera al usuario de tener que iniciar sesión

repetidamente en la aplicación.

Tus aplicaciones de la Tienda Windows pueden admitir cualquier cantidad de

funcionalidades de autenticación, incluidos el inicio de sesión en dominios, la

autenticación multifactor mediante tarjetas inteligentes o con cuentas Microsoft.

También puedes administrar todas las credenciales proporcionadas en la aplicación

mediante almacenes de contraseñas, para que la aplicación no tenga que solicitar las

credenciales al usuario al mismo servicio durante cada acceso. Estas credenciales

deberían ser administradas por el usuario mediante el panel Configuración de la

aplicación. Para obtener información sobre el almacén de contraseñas, consulta la

documentación de referencia de PasswordVault.

Arriba

Entorno de desarrollo

Para desarrollar su solución, Sonoma Partners acudió a Microsoft Visual Studio 2012

porque es un entorno de desarrollo potente y familiar para escribir el código de su

aplicación de la Tienda Windows. Para diseñar la interfaz de usuario, Sonoma Partners

usó Microsoft Expression Blend junto con Visual Studio. Esto les permitió separar el

código de fondo de los elementos de interfaz de usuario de la aplicación de la Tienda

Windows. La separación del código de la interfaz de usuario liberó a los diseñadores

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 aplicación.

Puedes descargar Microsoft Visual Studio Express 2012 para Windows 8, que incluye

Expression Blend, en Descargas para desarrolladores para la programación de

aplicaciones de la Tienda Windows. En las siguientes figuras se muestran

Expression Blend y Visual Studio en funcionamiento.

http://msdn.microsoft.com/es-es/library/windows/apps/windows.security.credentials.passwordvault.aspx




Arriba

Pruebas

Las aplicaciones se deben probar para asegurar que son de alta calidad y que no haya

sorpresas.

El Kit para la certificación 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 técnicos de las aplicaciones y garantiza que siguen los procedimientos

recomendados y las recomendaciones del diseño de aplicaciones de la Tienda Windows.

Para obtener más información, consulta Probar la aplicación con el Kit para la

certificación 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 depuración de

Visual Studio, también se incluye un emulador de Windows 8 y el marco de pruebas de

Visual Studio. Para obtener más información, consulta Depurar y probar aplicaciones de

la Tienda Windows y el vídeo de Channel 9, Prueba manual de aplicaciones de la

Tienda Windows de Windows 8.

Las aplicaciones siempre se deberán probar en un equipo distinto del equipo de

desarrollo. Las aplicaciones también deberán probarse en diferentes arquitecturas,

diferentes versiones del sistema operativo instalado y con distintos factores de forma.

Para obtener información sobre la ejecución de aplicaciones en un equipo que no sea el

equipo de desarrollo, consulta el tema sobre la ejecución de aplicaciones de la Tienda

Windows desde Visual Studio y Obtener una licencia de desarrollador.

Arriba

Implementación

Aunque la Tienda Windows es una excelente manera de comercializar y distribuir las

aplicaciones, las aplicaciones de LOB por lo general debería distribuirlas directamente a

los usuarios finales la organización de TI de la compañía. Este proceso de instalación de

aplicaciones en equipos con Windows 8 sin pasar por la Tienda Windows se denomina

instalación de prueba. A continuación se indican algunos procedimientos

recomendados para que los usuarios tengan una gran experiencia con la instalación y la

ejecución de estas aplicaciones de prueba la primera vez.

Usa el Kit para la certificación de aplicaciones en Windows: como ya hemos mencionado, antes de distribuir una aplicación, ejecuta las pruebas de certificación el el Kit para la certificación de aplicaciones en Windows para garantizar que cumple los requisitos de una aplicación de la Tienda Windows.

Firma la aplicación: usa una entidad de certificación (CA) de confianza para firmar la aplicación con un certificado de empresa. Esto forma parte del proceso de implementación, tanto si la aplicación se distribuye mediante la Tienda Windows como si no. El certificado debe ser de confianza en todos los equipos que ejecuten la aplicación y el nombre del publicador en el certificado debe coincidir con el nombre del publicador de la aplicación.

Establece la directiva de grupo: asegúrate 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 aplicación: hay varias opciones para distribuir aplicaciones a los usuarios de una red. Están disponibles las soluciones habituales de administración de aplicaciones, como Microsoft System Center, o los usuarios pueden instalar la aplicación mediante un script de Windows PowerShell.

Para obtener información detallada sobre las distintas formas en que se puede

implementar la aplicación de LOB y administrar las actualizaciones de las aplicaciones,

consulta las entradas de los blogs Implementación de aplicaciones de la Tienda

Windows para los negocios y Administración de equipos "BYO" en la empresa

(incluido WOA).













Arriba

Administración de las aplicaciones de la Tienda Windows

Como ocurría 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

introducción de la Tienda Windows, que está habilitada de manera predeterminada para

Windows 8, los jefes de TI querrán garantizar que el acceso de los usuarios a la Tienda

Windows siga las directivas de la compañía.

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 través de

la Tienda Windows.

Las herramientas de administración 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 compañía 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 compañía 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 más información, consulta Administración 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 más de diez años escribiendo contenido

sobre desarrollo en Microsoft y tiene pasión por ofrecer a los desarrolladores

las herramientas y la información 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 visión general del trabajo que realizan con Windows 8 y Microsoft

Dynamics CRM. También 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 artículo.







Activos de diseño para aplicaciones de la

Tienda Windows (Windows)




Descarga de activos de diseño para aplicaciones de la Tienda Windows

Diseño de animaciones (aplicaciones de la Tienda Windows)


Activos de diseño

Descarga activos de diseño que te

ayudarán a crear fantásticas

aplicaciones de la Tienda Windows.

Animaciones

Aprende a usar animaciones con

propósito para enlazar las

experiencias visuales y contar una

historia.









Descarga de activos de diseño para


(Windows)







Diseñar para Windows 8 no es muy diferente de diseñar para la Web. De hecho, es un

poco más fácil porque tienes PSD para controles, diseños, componentes y plantillas de

proyecto que te ayudarán a diseñar tu interfaz de usuario.

Diseño de animaciones (aplicaciones de la

Tienda Windows) (Windows)















http://www.microsoft.com/click/services/Redirect2.ashx?CR_EAC=300050688



En este artículo

Iniciar tu aplicación Transición entre páginas Transición entre contenidos Tocar y hacer clic en los comentarios Mostrar controles o UI transitorias Actualizar Mostrar contenido o controles adicionales en línea Agregar o eliminar elementos de una lista Filtrar una lista mientras se realiza una búsqueda Mostrar una barra de mensajes o comandos Mostrar un panel de tareas Mostrar una UI emergente Arrastrar y colocar Deslizar rápidamente/seleccionar un icono Revelar capacidad para deslizar rápidamente Actualizar un icono Actualizar un distintivo Cambiar la posición Temas relacionados

Son vídeos, ir a las url’s.



http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#iniciar_tu_aplicaci_n

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#transici_n_entre_p_ginas

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#transici_n_entre_contenidos

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#tocar_y_hacer_clic_en_los_comentarios

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#mostrar_controles_o_ui_transitorias

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#actualizar

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#mostrar_contenido_o_controles_adicionales_en_l_nea

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#agregar_o_eliminar_elementos_de_una_lista

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#filtrar_una_lista_mientras_se_realiza_una_b_squeda

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#mostrar_una_barra_de_mensajes_o_comandos

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#mostrar_un_panel_de_tareas

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#mostrar_una_ui_emergente

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#arrastrar_y_colocar

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#deslizar_r_pidamente_seleccionar_un_icono

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#revelar_capacidad_para_deslizar_r_pidamente

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#actualizar_un_icono

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#actualizar_un_distintivo

http://msdn.microsoft.com/es-es/library/windows/apps/hh975420.aspx#cambiar_la_posici_n


Diseño de UX Para Aplicaciones

Documents

Transcript of Diseño de UX Para Aplicaciones