Creación de aplicaciones de la Tienda Windows sobresalientes

Las aplicaciones de la Tienda Windows son el núcleo de la experiencia del usuario en Windows 8, y las aplicaciones de la Tienda Windows sobresalientes comparten un conjunto de rasgos que conforman una experiencia del usuario coherente, elegante y atractiva. En este tema conocerás los 8 rasgos característicos de las aplicaciones de la Tienda Windows sobresalientes.

Ver el vídeo

Este vídeo explica cómo usar los principios de estilo del diseño de Microsoft que te ayudarán a crear grandes aplicaciones. Después de ver el vídeo, sigue leyendo para ver un resumen de lo que hace que una aplicación de la Tienda Windows sea sobresaliente.

00:00:00

|

00:00:00

Saca provecho del estilo de diseño Microsoft

El contenido es el núcleo de las aplicaciones de la Tienda Windows y anteponer el contenido al contenedor visual es fundamental en el diseño de aplicaciones de la Tienda Windows. Lo demás son accesorios —o elementos visuales— que ayudan a presentar el contenido y habilitar la interacción con él.

Presentación de contenido

Diseña la interfaz de usuario de tus aplicaciones para que presente el contenido y haz que sea accesible para los usuarios con alguna discapacidad.

Diseño limpio y abierto

• Deja en la pantalla únicamente los elementos más relevantes para reducir las distracciones y ayudar al usuario a concentrarse en el contenido.
• Quita líneas, cuadros y efectos gráficos innecesarios como desenfoques o degradados, para dejar espacio al contenido. Usa espacios abiertos para enmarcar el contenido.
• Limita los contenedores visuales de navegación que están permanentemente en pantalla, como las pestañas. Deja que los usuarios se centren en el contenido actual y evita distraerlos con elementos visuales de navegación.

Jerarquía de la información clara   El lenguaje de diseño Microsoft usa una tipografía limpia y atractiva que ayuda a los usuarios a comprender la jerarquía del contexto. Usa tipografía en lugar de líneas y cuadros para ayudar a establecer la estructura y la jerarquía.

• Usa tamaños, espesores y colores en el texto de manera uniforme para transmitir la importancia de una sección de contenido. El conjunto de variaciones debe ser pequeño para que el usuario vea fácilmente dónde se sitúa el contenido en la jerarquía general. Consulta las directrices para texto y tipografía.
• Usa la hoja de estilos predeterminada para aplicar el tipo predefinido a tu texto.

Silueta Windows  Cuando las personas se centran en el contenido, la composición del mismo conforma la identidad de la aplicación. Una silueta familiar ayuda al usuario a reconocer instintivamente tu aplicación como una aplicación de la Tienda Windows frente a, por ejemplo, una página web.

• Incorpora una silueta Windows para ofrecer sensación de familiaridad y confianza.
• Comienza con las plantillas de proyecto Grid o Split de Visual Studio para elaborar el diseño. Consulta las directrices sobre las plantillas de proyecto de JavaScript para aplicaciones de la Tienda Windows de Visual Studio.

Interacción con el contenido

Usa interacciones que mantengan al usuario al mando y confiado.

Interacciones directas  La manera más natural de que el usuario interaccione con el contenido es directamente, sin contenedores visuales intermedios.

• Siempre que sea posible, deja que el usuario complete las acciones mediante manipulación directa del contenido en lugar de la manipulación indirecta mediante controles.

  Por ejemplo, permite que el usuario pulse un elemento para ver más detalles, que deslice el dedo desde el borde para seleccionarlo, que lo arrastre para moverlo o que aleje la vista para ver el contenido completo—en lugar de colocar botones en la pantalla para realizar estas acciones.

• Saca provecho del zoom semántico y úsalo como un medio rápido, fluido y centrado en el contenido para navegar por una lista larga de contenido.
• Ten en cuenta el modo en que los usuarios y lectores de pantalla que dependen de un teclado van a interactuar con el contenido.

Aprovecha los bordes   Algunas acciones no se pueden realizar mediante manipulación directa. En estos casos, muestra los comandos contextualmente, solo cuando se necesiten, para evitar abarrotar el Canvas. Aprovecha el borde de la pantalla o del dispositivo para que el usuario pueda encontrar los comandos con seguridad.

• Coloca los comandos en la barra de la aplicación, que puede aparecer a demanda pasando el dedo desde el borde superior o inferior de la pantalla, y desaparecer cuando el usuario haya completado sus acciones.
• Saca partido de los botones de acceso Buscar, Compartir, Dispositivos o Configuración, que se pueden invocar a demanda pasando el dedo desde el borde derecho.
• Evita colocar comandos permanentes en la pantalla y mostrar puntos de entrada duplicados para los contratos a los que se accede mediante botones de acceso.
• Crea el diseño teniendo presente la comodidad y coloca las superficies de interacción de uso frecuente cerca de los bordes.

Consulta Diseño de comandos para obtener más información.

Sé rápido y fluido

Responde a las acciones del usuario rápidamente una energía acorde.

Animaciones con propósito  

El movimiento es una parte fundamental del lenguaje de diseño Microsoft. Unas animaciones bien diseñadas dan vida a las aplicaciones y ofrecen una experiencia que se percibe elaborada y elegante.

• Usa animaciones con propósito para enlazar las experiencias visuales y contar una historia. En una interfaz fluida, todo viene de algún lugar y va a algún lugar.
• Saca provecho del conjunto de animaciones específicas del escenario de la Biblioteca de animaciones, diseñadas para transmitir información. Los movimientos familiares refuerzan los conceptos, ayudan al usuario a saber qué esperar y crean un sentimiento de confianza. Consulta las directrices para animaciones en la sección Animación de la interfaz de usuario.
• Al usar una animación para comunicar información importante, asegúrate de proporcionar un modo alternativo accesible de transmitir tal información.

Diseño táctil  

Las aplicaciones de la Tienda Windows están diseñadas para ser tocadas. Emplean las manos y los dedos para su principal objetivo, teniendo en cuenta la comodidad y la ergonomía.

• Adopta el lenguaje táctil de Windows 8 y usa el conjunto de gestos predefinido para que el usuario pueda manipular el contenido de forma natural y congruente. Consulta Diseño de interacción táctil para obtener más información.
• Haz que el contenido siga tus dedos. Ve más allá del gesto de pulsar y usa interacciones deslizantes, como el zoom semántico, para que el usuario navegue por el contenido e interactúe con él rápidamente y sin esfuerzos.
• Ofrece información visual inmediata sobre el gesto táctil para que el usuario sepa si ha tocado el destino deseado. Haz que las interacciones sean reversibles y confirma solo cuando el usuario las suelte para permitir que se equivoque y promover la exploración.
• No crees interacciones diferentes para el mouse y la entrada táctil.
• De cara a la accesibilidad, asegúrate de que se puede acceder mediante programación a todos los elementos interactivos. Para obtener más información, consulta los temas sobre accesibilidad de los eventos táctiles y comprobación de los principales escenarios de aplicación mediante Narrador.

Controles integrados  

Saca partido de los controles integrados para incorporar animaciones fluidas, atractivas y coherentes, y comportamientos optimizados para los gestos táctiles. Por poner algunos ejemplos:

• El control ListView integra la selección mediante el gesto de deslizar el dedo desde el borde (deslizar transversalmente). Se puede ampliar con el zoom semántico para que el usuario pueda navegar de forma rápida y fluida por una lista larga. Consulta las directrices sobre el control ListView.
• El control FlipView permite a los usuarios moverse de un elemento a otro y tiene animaciones de transición integradas.
• Todos los botones, controles de alternancia, casillas, botones de radio y controles deslizantes ofrecen información visual al tocarlos, solo se confirman al dejar de tocarlos y se pueden apartar arrastrándolos para cancelar la acción. Consulta las directrices sobre botones, controles de alternancia, casillas, botones de radio, selectores de fecha y hora, y controles de clasificación y deslizantes.

No olvides que se puede acceder a los controles integrados de manera predeterminada, lo que puede reducir el coste de desarrollo de una aplicación accesible. Consulta la lista de controles integrados en las directrices detalladas de experiencia de usuario.

Ajusta y cambia la escala con elegancia

Crea una experiencia única en cada factor de forma y cada opción de vista que se abra a los usuarios.

Escalado a diversos factores de forma   Tu aplicación podría usarse en los cientos de millones de equipos que ejecutan Windows 8. Estos equipos tienen una amplia variedad de tamaños de pantalla y resoluciones, desde <tabletas de 10" a >pantallas de 27".

• Usa la compatibilidad para un diseño fluido que ofrecen los controles de la plataforma para sacar el mejor provecho de los elementos en pantalla. Por ejemplo, ListView redistribuirá el contenido automáticamente en función del espacio disponible.
• La plataforma ajusta la escala automáticamente en función del tamaño y la resolución de la pantalla del dispositivo. Ofrece 3 tamaños de activos o usa el formato SVG (Scalable Vector Graphics) para asegurarte de que tu aplicación tenga siempre un aspecto limpio y despejado. Consulta las directrices para ajustar la escala en pantallas y las directrices para ajustar la escala a la densidad de píxeles.
• Recuerda que activar Aumentar el tamaño de los objetos en la pantalla en Accesibilidad reduce realmente la resolución actual, por lo que deberás asegurarte de que toda la interfaz de usuario se puede seguir viendo y usando. Para obtener más información, consulta el tema sobre cómo comprobar tu aplicación con "Aumentar el tamaño de los objetos en la pantalla".
• Usa el simulador de Microsoft Visual Studio para ver el aspecto que tendrá tu aplicación en diferentes factores de forma.

Diseño para estados de visualización  Los usuarios son multitarea y pueden ajustar dos aplicaciones para ejecutarlas simultáneamente. Todas las aplicaciones deben implementar un estado ajustado, y un buen estado ajustado invita a los usuarios a mantener la aplicación en pantalla más tiempo. Consulta las directrices para vistas ajustadas y rellenas.

• Diseña una vista ajustada útil que proporcione una vista funcional de la aplicación. Conserva el contexto del usuario cuando cambie de un estado de visualización a otro.
• Cuando se ajusta, el ancho de la aplicación se fija en 320 píxeles, pero el alto es variable. Desplaza verticalmente para evitar conflictos con el borde y la franja de ajuste.
• Cuando tu aplicación está en pantalla puedes ajustar otras aplicaciones, por lo que debes diseñarla para que se redistribuya de forma fluida desde un ancho mínimo de 1024 píxeles.

Usa los contratos adecuados

Los contratos son el adhesivo 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 algunos de los contratos más comunes, como buscar, compartir y selectores de archivos, comienza con las plantillas de elemento correspondientes de Visual Studio.
• Los botones de acceso te ofrecen un modelo de invocación uniforme en el que los usuarios pueden confiar. Evita crear una interfaz de usuario alternativa en el Canvas de la aplicación para invocar a los contratos; eso podría confundir al usuario.
• Consulta la lista completa de contratos de aplicación.

Compartir   Los contratos de compartir permiten a los usuarios compartir datos de una aplicación con otra. La aplicación de origen es la que ofrece algo que compartir y la aplicación de destino recibe el contenido compartido, con un conjunto de formatos de datos comunes. Consulta las directrices para compartir contenido.

• Todas las aplicaciones deberían ser un origen de contenido compartido e implementar el conjunto de formatos más amplio posible.
• Las aplicaciones que publican, almacenan o transforman los datos compartidos son buenas candidatas para ser un destino de contenido compartido. Algunos ejemplos son las comunicaciones, las redes sociales y las aplicaciones conectadas a dispositivos.

Buscar   Los contratos de buscar permiten a los usuarios buscar el contenido de una aplicación desde cualquier lugar de Windows. La aplicación proporciona los resultados y se muestran en la interfaz de usuario de la propia aplicación. Consulta las Directrices y lista de comprobación de buscar.

• Usa el botón de acceso Buscar en lugar de una búsqueda personalizada de la aplicación, especialmente si el ámbito es todo el contenido de la aplicación (por ejemplo, buscar un producto en una aplicación de compras). No uses la búsqueda como una característica de búsqueda interna cuando el ámbito está limitado a la vista actual (por ejemplo, buscar una palabra en un documento).
• Ofrece sugerencias de búsqueda para ayudar al usuario a encontrar algo rápidamente.
• Ofrece una manera de navegar por la página de resultados y la interfaz de usuario principal de la aplicación.

Selectores de archivos     Los contratos de selector de archivos permiten al usuario acceder al contenido de una aplicación desde otra aplicación. Cuando se invoca al selector de archivos, el usuario puede examinar y seleccionar los archivos del almacenamiento local o de otra aplicación que admita el contrato de selector de archivos. Consulta las directrices para selectores de archivos.

• Saca provecho de este contrato si tu aplicación accede o almacena archivos que pueden ser útiles para usuarios de otro contexto.
• Usa el control ListView para obtener el diseño fluido y el comportamiento de selección que integra.

Invierte en un icono excepcional

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. Consulta las directrices para iconos.

• Personaliza el contenido que se muestra a los usuarios en el icono y actualízalo para mantenerlo al día a medida que cambie el contenido de la aplicación. Existen numerosas plantillas de icono predefinidas; selecciona el diseño que mejor se adapte a tu tipo de contenido.
• Haz referencia al contenido de la página de inicio de la aplicación para que los usuarios la encuentren fácilmente después de iniciar la aplicación.
• Usa iconos secundarios para que los usuarios dispongan en su pantalla Inicio de subsecciones de contenido de la aplicación interesantes y que se actualicen con frecuencia. Consulta las directrices para iconos secundarios.

Sentirse conectado y vivo

Ofrece contenido actualizado a través de notificaciones e iconos dinámicos para que los usuarios se sientan conectados a tu aplicación. Tanto los iconos dinámicos como las notificaciones usan las mismas infraestructuras y se pueden actualizar en cualquier momento mediante los Servicios de notificaciones de inserción de Windows localmente mientras la aplicación se está ejecutando, o a la hora programada.

Iconos dinámicos   No dejes de atraer a usuarios con el contenido dinámico, relevante y personalizado del icono de tu aplicación. Un contenido actualizado en el icono da motivos al usuario para colocarlo en un lugar destacado de la pantalla Inicio, y para iniciar la aplicación una y otra vez.

• Un icono dinámico puede actualizarse hasta 5 veces. Por ejemplo, el icono dinámico de una aplicación de noticias puede actualizar varias historias cada día.
• El contenido que se muestra en las actualizaciones vivas debe ser accesible desde la página de inicio de la aplicación. Quita las notificaciones obsoletas si ya no son relevantes o accesibles desde la página de inicio
• Usa distintivos para mostrar información sencilla con números o glifos.

Notificaciones   Las aplicaciones pueden usar notificaciones para mostrar brevemente a los usuarios mensajes sujetos a limitación temporal que deben irrumpir desde cualquier lugar de Windows. Consulta las directrices para notificaciones del sistema.

• La mayoría de las aplicaciones deben ser silenciosas—es decir, el usuario debe poder elegir habilitar las notificaciones en una aplicación.
• Los usuarios tienen el control sobre la funcionalidad de notificaciones de la aplicación por lo que debes enviar notificaciones solo si realmente están sujetas a limitación temporal y son pertinentes. Si son críticas, muestra las notificaciones perdidas en el icono de la aplicación.
• Combina las notificaciones si se producen varias actualizaciones en un corto período de tiempo.
• No uses notificaciones para mostrar errores o advertencias. Los errores deben mostrarse en línea o en ventanas flotantes o cuadros de diálogo de mensajes.

Perfiles móviles en la nube

Movilidad   Crea una experiencia continua en todos los dispositivos usando un perfil móvil para los datos que permiten al usuario retomar una tarea en el mismo punto donde la dejaron. Lee las directrices para usar un perfil móvil con datos de aplicación.

• Saca provecho de las cuentas Microsoft y el almacenamiento en la nube por usuario para almacenar configuraciones, estados y una pequeña cantidad de contenido del usuario, y usar un perfil móvil con ellos.
• Ejemplos de configuración de la aplicación idóneos para usar con un perfil móvil:
  • Ciudades y preferencias de grados Celsius o Fahrenheit en una aplicación de información meteorológica
  • Fuentes RSS a las que se suscribieron los usuarios en una aplicación de noticias
  • Equipos favoritos en una aplicación deportiva
• Ejemplos de estados de aplicación idóneos para usar con un perfil móvil:
  • La última posición leída en una aplicación de lectura
  • El último punto de control o movimiento completado en un juego
  • La última pista reproducida en una aplicación de música

Administración del ciclo de vida de los procesos (ciclo de vida de la aplicación)   Conserva el estado sin necesidad de guardar explícitamente para garantizar una experiencia continua a los usuarios. Lee las directrices para suspender y reanudar una aplicación.

• Como regla general, reanuda la aplicación tal cual la dejó el usuario en lugar de iniciarla desde cero. El usuario debe poder cambiar a otra aplicación y volver a un carro de la compra, un correo electrónico no terminado o un juego en pausa igual que lo dejó.
• Inicia la aplicación desde cero si ha transcurrido un período de tiempo largo desde que el usuario accedió por última vez y el contenido anterior ya no es relevante. Por ejemplo, en una aplicación de noticias, lleva al usuario a la página principal si ha transcurrido mucho tiempo desde que abrió el último artículo que ya se ha quedado obsoleto.
• No termines la aplicación cuando se quite de la pantalla. Deja el ciclo de vida de la aplicación en manos del sistema para asegurarte de que los usuarios puedan volver a la aplicación de la manera más eficaz posible. No ofrezcas a los usuarios formas de terminar tu aplicación.

Adopta los principios de estilo de diseño Microsoft

Usa estos principios como guía para tu diseño.

Muestra buen hacer

• Dedica tiempo y energía a las pequeñas cosas que suelen ser vistas por muchos.
• Proyecta una experiencia completa y sofisticada en todas las etapas.

Haz más con menos

• Elimina las distracciones, no la capacidad de descubrir. Deja que el usuario se concentre en lo que le gusta y ya explorará el resto.
• Deja solo los elementos más relevantes en la pantalla para que el usuario pueda concentrarse en el contenido y crear así una experiencia nítida y con propósito.

Sé rápido y fluido

• Permite que el usuario interaccione directamente con el contenido y responde a las acciones rápidamente con una energía acorde.
• Da vida a la experiencia, crea una sensación de continuidad y cuenta una historia mediante el uso significativo del movimiento.

Sé auténticamente digital

• Aprovecha todas las ventajas de los medios digitales. Elimina los límites físicos para crear experiencias que sean más eficientes y naturales que la realidad.
• Acepta el hecho de que somos píxeles en una pantalla. Crea diseños con imágenes y colores intensos, vibrantes y llamativos que traspasen los límites de los materiales del mundo real.

Gana en equipo

• Saca provecho del ecosistema y trabaja con otras aplicaciones, dispositivos y el sistema para completar los escenarios para el usuario.
• Ajústate al modelo de interfaz de usuario para reducir la redundancia. Aprovecha lo que la gente ya sabe para ofrecer una sensación de familiaridad, control y confianza.