Post on 07-Feb-2016
description
Diseño de UX para aplicaciones
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
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
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
Casos prácticos
iOS:> aplicaciones para la Tienda Windows Sitio web:> aplicaciones para la Tienda Windows
Activos
Planear aplicaciones de la Tienda
Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 39 de 41 - Valorar este tema
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:
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
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:
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
(aplicaciones de la Tienda Windows)
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
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
(aplicaciones de la Tienda Windows)
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 3 de 3 - Valorar este tema
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.
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
(aplicaciones de la Tienda Windows)
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 1 de 1 - Valorar este tema
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.
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.
Diseño de accesibilidad (aplicaciones de
la Tienda Windows) (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
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).
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Planear aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 2 de 2 - Valorar este tema
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
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
Planear aplicaciones de la Tienda Windows
Directrices de diseño para aplicaciones
de la Tienda Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 11 de 12 - Valorar este tema
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
Diseño de navegación para aplicaciones
de la Tienda Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 24 de 25 - Valorar este tema
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.
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 12 de 13 - Valorar este tema
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
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 16 de 17 - Valorar este tema
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.
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.
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.
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.
Lectura, exploración,
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
interacción rápida.
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.
Lectura, exploración,
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
interacción rápida.
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
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
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
aplicaciones de la Tienda Windows
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 2 de 3 - Valorar este tema
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:
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 comandos para aplicaciones de la Tienda Windows
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
de la Tienda Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Directrices de diseño para aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 11 de 11 - Valorar este tema
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
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
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
Aprende cómo crear fantásticas aplicaciones de
noticias para Windows 8.
Aplicaciones de productividad
Aprende cómo crear fantásticas aplicaciones de
productividad para Windows 8.
Aplicaciones de deportes
Aprende a crear fantásticas aplicaciones de deportes
para Windows 8.
Aplicaciones de compras
Aprende a crear fantásticas aplicaciones de compras
para Windows 8.
Aplicaciones de viajes
Aprende a crear fantásticas aplicaciones de viajes
para Windows 8.
Aplicaciones educativas
Aprende a crear fantásticas aplicaciones educativas
para Windows 8.
Temas relacionados
Diseño de comandos para aplicaciones de la Tienda Windows
Creación de aplicaciones de la Tienda Windows sobresalientes
Diseño de navegación para aplicaciones de la Tienda Windows
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 1 de 1 - Valorar este tema
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
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.
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 comandos para aplicaciones de la Tienda Windows
Creación de aplicaciones de la Tienda Windows sobresalientes
Diseño de navegación para aplicaciones de la Tienda Windows
Diseño de aplicaciones de
entretenimiento excelentes para
Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
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.
Introducción
Windows 8 se ofrece en una variedad incomparable de dispositivos, desde tabletas
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.
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
Iconos y notificaciones
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.
Temas relacionados
Creación de aplicaciones de la Tienda Windows sobresalientes
Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
Diseño de aplicaciones de noticias
espectaculares para Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 1 de 1 - Valorar este tema
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.
Introducción
Windows 8 se ofrece en una variedad incomparable de dispositivos, desde tabletas
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.
Iconos y notificaciones
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.
Orientación y vistas
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
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 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 comandos para aplicaciones de la Tienda Windows
Creación de aplicaciones de la Tienda Windows sobresalientes
Diseño de navegación para aplicaciones de la Tienda Windows
Diseño de la interacción táctil
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
Diseñar impresionantes aplicaciones de
productividad para Windows (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 4 de 4 - Valorar este tema
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.
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.
Iconos y notificaciones
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.
Orientación y vistas
Puesto que Windows 8 se ejecuta en diversos tipos de dispositivos y cuenta con un
nuevo modelo multitarea, debes asegurarte de que tu 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
Creación de aplicaciones de la Tienda Windows sobresalientes
Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
Aplicaciones de deportes (Preliminary)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
[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)
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)
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
Creación de aplicaciones de la Tienda Windows sobresalientes
Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
[Esta documentación es preliminar y está sujeta a cambios.]
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
diseño Microsoft de Windows 8 en la aplicación.
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
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 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
En el primer escenario vemos que...
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
En el segundo escenario vemos que...
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
En el tercer escenario vemos que...
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 el contenido compartido, consulta los siguientes temas:
Instrucciones de Compartir Muestra de origen de contenido compartido Muestra de destino de contenido compartido
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
Creación de aplicaciones de la Tienda Windows sobresalientes
Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
Muestras e instrucciones
Muestra de iconos dinámicos
Directrices de iconos dinámicos
Muestra de zoom semántico (C#/VB/C++)
Muestra de zoom semántico (JavaScript)
Directrices de zoom semántico
Muestra de Buscar
Instrucciones de búsqueda
Muestra de vista acoplada
Instrucciones de vista acoplada
Muestra de origen de contenido compartido
Muestra de destino de contenido compartido
Instrucciones de Compartir
Aplicaciones de viajes (Preliminary)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
[Esta documentación es preliminar y está sujeta a cambios.]
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
En el primer escenario vemos que...
Los iconos dinámicos llaman la atención al usuario hacia la aplicación mostrando información que es relevante para el usuario.
Puedes convertir tu contenido en origen de contenido compartido y Windows 8 te conecta con otras aplicaciones, correo electrónico y redes sociales.
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
En el segundo escenario vemos que...
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
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.
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
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.
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
Creación de aplicaciones de la Tienda Windows sobresalientes
Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
Muestras e instrucciones
Directrices y lista de comprobación de notificaciones del sistema
Muestra de notificación del sistema
Muestra de iconos dinámicos
Directrices de iconos dinámicos
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)
Muestra de zoom semántico (C#/VB/C++)
Muestra de zoom semántico (JavaScript)
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
Instrucciones de búsqueda
Muestra de origen de contenido compartido
Muestra de destino de contenido compartido
Instrucciones de Compartir
Aplicaciones educativas (Preliminary)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Inspiración para el diseño (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
[Esta documentación es preliminar y está sujeta a cambios.]
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
diseño Microsoft de Windows 8 en la aplicación.
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
Llama la atención a los usuarios hacia el contenido de tu aplicación
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
En el primer escenario vemos que...
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
En el segundo 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.
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
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
Creación de aplicaciones de la Tienda Windows sobresalientes
Patrones de diseño de experiencia del usuario para aplicaciones de la Tienda Windows
Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows
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
Casos prácticos (aplicaciones de la
Tienda Windows) (Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Casos prácticos (aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 1 de 1 - Valorar este tema
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
Windows 8 para desarrolladores.
Caso práctico de diseño: de sitio web a
aplicación de la Tienda Windows
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Casos prácticos (aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 13 de 13 - Valorar este tema
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.
Para más información acerca de la oportunidad comercial de Windows 8, consulta
Venta de aplicaciones. Para más información acerca de las características usadas para
crear aplicaciones de la Tienda Windows, consulta la guía de producto de Windows 8
para desarrolladores.
Descarga este artículo: para ello, consulta la versión sin conexión de este artículo.
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
Diseño y navegación
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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.
Aplicación de la Tienda Windows:
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
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 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.
Aplicación de la Tienda Windows:
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.
Caso práctico de diseño: de iPad a
aplicación de la Tienda Windows
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Casos prácticos (aplicaciones de la Tienda 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
Personas que lo han encontrado útil: 9 de 9 - Valorar este tema
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.
Para más información acerca de la oportunidad comercial de Windows 8, consulta
Venta de aplicaciones. Para más información acerca de las características usadas para
crear aplicaciones de la Tienda Windows, consulta la guía de producto de Windows 8
para desarrolladores.
Descarga este artículo: para ello, consulta la versión sin conexión de este artículo.
La aplicación
La aplicación que estamos desarrollando es un diario fotográfico en el que los usuarios
pueden ver y administrar sus fotos y vídeos en Internet usando una vista de escala de
tiempo.
La aplicación 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
Diseño y navegación
Centrarse en el contenido, no en el contenedor visual
La aplicación de diario fotográfico tiene que ser excelente al mostrar las fotos del
usuario y las actividades sociales recientes de esas fotos. Cuando se creó la aplicación
de la Tienda Windows, nuestro primer objetivo fue quitar todos los elementos de
interfaz de usuario que no eran directamente relevantes para la funcionalidad clave de la
aplicación. Por ejemplo, la barra de navegación superior, los controles de paginación y
la barra de control inferior pueden quitarse. En la siguiente sección, hablaremos de
cómo los usuarios pueden llamar al contenedor visual cuando sea necesario mediante el
uso de la barra de la aplicación.
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.
Aplicación de la Tienda Windows
Combinamos el comentario y las fotos en una vista para eliminar la necesidad de una interfaz de usuario con pestañas.
El diseño de concentrador para la Pantalla principal revela el contenido más importante para cada sección.
Para ver toda la lista de comentarios, los usuarios pueden pulsar sobre el encabezado de grupo denominado Comentarios recientes.
Usar manipulación directa para navegar
La manipulación directa permite a los usuarios interactuar con contenido y navegar a
diferentes áreas con naturalidad. Cuando se diseñó la aplicación de la Tienda Windows,
usamos la manipulación directa siempre que fue posible mediante controles integrados,
como el zoom semántico, que permite a los usuarios navegar con más eficacia.
Aplicación de iPad
En la Pantalla principal, pulsa en el botón
Años en la barra de navegación superior
para que aparezca una ventana emergente y
selecciona un año.
Aplicación de la Tienda Windows
En la Pantalla principal, haz un gesto de
alejar con dos dedos para ampliar y ver
todos los meses y años. De esta manera, los
usuarios pueden saltar a cualquier mes de
cualquier año con rapidez. Los usuarios
también pueden obtener una visión general
de los meses que tienen fotos y los que no
(fondo rojo atenuado). Los usuarios pueden
navegar completamente mediante la
manipulación del contenido sin usar
contenedor visual ni navegar a una página
diferente.
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
Aplicación de la Tienda Windows
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.
Aplicación de la Tienda Windows
El usuario abre la barra de accesos y obtiene acceso a Buscar. De manera predeterminada, está seleccionada la aplicación de diario fotográfico porque el usuario actualmente se encuentra dentro de ella.
Cuando el usuario comienza a escribir, la aplicación proporciona sugerencias de búsqueda en el panel. De este modo los usuarios pueden ver rápidamente qué términos generarán resultados de búsqueda. Una vez que el usuario envía su consulta, aparece una vista de resultados de la búsqueda y podrá seleccionar el que quiera.
Ejemplo: buscar una foto fuera de la aplicación de diario fotográfico (disponible
solo en aplicaciones de la Tienda Windows)
En este ejemplo se muestra cómo buscar un término en diferentes aplicaciones eligiendo
una nueva aplicación en el panel de búsqueda. Esta función permite a los usuarios
buscar cualquier tipo de contenido, en cualquier aplicación y en cualquier momento.
Aplicación de la Tienda Windows
Un usuario busca el término "Barcelona" en la aplicación de Tweet@Rama y quiere
mirar fotos de Barcelona mediante el diario fotográfico. El diario fotográfico es ahora el
proveedor de resultados de búsqueda. La aplicación se inicia automáticamente y
muestra los resultados de la búsqueda. El usuario no necesita iniciar la aplicación de
diario fotográfico y después realizar la búsqueda.
Usar el contrato para contenido compartido para llegar a más destinos y personas que te
interesen
La integración de los medios sociales es un componente clave de la mayoría de las
aplicaciones. Cuando se diseñan las aplicaciones de iPad, los diseñadores y
desarrolladores generalmente eligen qué canales de medios sociales admite la aplicación
(como Twitter o Facebook) y después los desarrolladores deben integrar cada uno de
estos servicios de forma individual o usar uno de los marcos disponibles. Cuando hay
cambios de API para estos servicios de uso compartido, los desarrolladores deben
actualizar su código para que dichos servicios continúen funcionando.
Cuando se trasladó la funcionalidad de uso compartido a la aplicación de la Tienda
Windows, usamos el contrato para contenido compartido del sistema. Este contrato
simplifica el diseño y el desarrollo porque no hay necesidad de conectarse con cada
servicio que el usuario quiera utilizar. Además de las redes sociales, los usuarios
también pueden guardar contenido en otros servicios, por ejemplo, en una aplicación de
toma de notas como Notespace o EverNote. Mediante el uso de tan solo una pequeña
cantidad de código, nuestra aplicación se conecta con cada aplicación de la Tienda
Windows que ha implementado el contrato para contenido compartido. No hay
necesidad de lidiar con cambios de API en servicios web o sitios de redes sociales
externos. Desde el punto de vista de los usuarios, siempre pueden compartir desde una
ubicación coherente; 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.
Aplicación de la Tienda Windows
Los usuarios siempre pueden encontrar opciones de uso compartido en una ubicación coherente, sin importar qué aplicación estén usando.
Toda aplicación instalada que se haya designado como destino de contenido compartido aparece en la lista de aplicaciones en el panel Compartir. Por ejemplo, Socialite, Tweet@Rama, Notespace y PaintPlay son todas destinos de contenido compartido.
Los usuarios pueden compartir una variedad de tipos de contenido. Por ejemplo, pueden compartir vínculos, fotos o guardar información en una aplicación de toma de notas.
Los destinos de contenido compartido usados con más frecuencia se muestran en la parte superior de la lista para ayudar a los usuarios a completar las tareas con rapidez.
Además de ser un origen de contenido compartido, diseñamos nuestra aplicación de
diario fotográfico para que sea también destino de contenido compartido. Los usuarios
pueden compartir con facilidad fotos desde otra aplicación en sus secuencias de fotos
del diario fotográfico. Esta conexión también se habilita mediante el contrato para
contenido compartido. Consulta el tema sobre las directrices y la lista de comprobación
para uso compartido de contenido para más información acerca de qué aplicaciones
constituyen excelentes destinos de contenido compartido.
Ejemplo: compartir fotos de otra aplicación con el diario fotográfico: destino de
contenido compartido (disponible solo en aplicaciones de la Tienda Windows)
En este ejemplo, un usuario de otra aplicación de fotos mira imágenes de un viaje a
México. Quiere compartirlas desde el álbum con su propia colección de la aplicación de
diario fotográfico para que sea más fácil verlas en una vista de escala de tiempo.
Cuando abre el panel Compartir, ve que la aplicación de diario fotográfico se menciona
como uno de los destinos de contenido compartido, entonces invoca al flujo de trabajo
Compartir.
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.
Aplicación de la Tienda Windows
A. El usuario pulsa el botón Cargar en la barra de la aplicación y se abre la interfaz de
usuario del selector de archivos. Esta es una interfaz de usuario coherente que el
usuario 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.
Aplicación de la Tienda Windows
Un usuario se encuentra en la pantalla Configuración del equipo y pulsa en Examinar
para personalizar la foto de su cuenta. Dado que el diario fotográfico implementa el
contrato 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
Aplicación de la Tienda Windows
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
Aplicación de la Tienda Windows
A. El zoom semántico en la Pantalla principal permite que los usuarios salten a un mes
particular de cualquier año rápidamente.
B. El zoom semántico en una página de radio de vista de mes permite a los usuarios
saltar a un día particular y también proporciona un gráfico de información que detalla
cuántas fotos están disponibles de ese año.
Orientación y vistas
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.
Aplicación de la Tienda Windows
La aplicación muestra más contenido en cada sección de la página de concentrador en el
diseño vertical y en pantallas más grandes, lo que ocupa espacio adicional. De un modo
similar a la creación de imágenes para una pantalla Retina de iOS, creamos varias
imágenes para diferentes porcentajes de escala de Windows: 100 %, 140 % y 180 %.
Estas imágenes se cargan automáticamente en tabletas de alta definición.
Usar la vista acoplada para atraer a tus usuarios
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 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
Aplicación de la Tienda Windows
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Casos prácticos (aplicaciones de la Tienda 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
Este tema aún no ha recibido ninguna valoración - Valorar este tema
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.
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
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.
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.
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Activos de diseño para aplicaciones de la Tienda Windows
Descarga de activos de diseño para aplicaciones de la Tienda Windows
Diseño de animaciones (aplicaciones de la Tienda Windows)
Personas que lo han encontrado útil: 1 de 1 - Valorar este tema
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
aplicaciones de la Tienda Windows
(Windows)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Activos de diseño para aplicaciones de la Tienda Windows
Descarga de activos de diseño para aplicaciones de la Tienda Windows
Diseño de animaciones (aplicaciones de la Tienda Windows)
Personas que lo han encontrado útil: 45 de 49 - Valorar este tema
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)
Aprenda a crear aplicaciones para Tienda Windows
Diseño de UX para aplicaciones
Activos de diseño para aplicaciones de la Tienda Windows
Descarga de activos de diseño para aplicaciones de la Tienda Windows
Diseño de animaciones (aplicaciones de la Tienda Windows)
Personas que lo han encontrado útil: 3 de 3 - Valorar este tema
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.