Aplicaciones de deportes

A los usuarios, las aplicaciones de deporte les facilitan la vida, tanto si son aficionados que desean estar al día de las últimas noticias deportivas como si se trata de atletas que desean mejorar su rendimiento en el campo. Las características de Windows como los iconos, el zoom semántico y los contratos de Buscar y para compartir contenido pueden resultar especialmente útiles al diseñar una aplicación que resulte atractiva para los aficionados a los deportes. En este artículo se presentan brevemente estas características y se ofrecen muchos ejemplos de la manera en que las aplicaciones de deportes existentes las usan para ofrecer excelentes experiencias de usuario. Te servirá de inspiración a la hora de crear tu nueva aplicación de deportes.

Tipos de aplicaciones de deportes

Aquí tienes unos cuantos tipos habituales de aplicaciones de deportes:

	Noticias, información y vídeos Estas aplicaciones ofrecen las últimas noticias deportivas en artículos, vídeos y presentaciones. El contenido se actualiza periódicamente y está disponible a menudo en la primera página de la aplicación. Por ejemplo, si abres la aplicación ESPN, te encontrarás de inmediato con el contenido deportivo más reciente. Echa un vistazo a estas aplicaciones de deportes centradas en noticias disponibles en la Tienda Windows: ESPN, Sports Illustrated, NASCAR, Yahoo! Sports y THE Football App.
	Favoritas de los aficionados Estas aplicaciones van dirigidas a los aficionados de un equipo concreto. Ofrecen noticias, fotos y contenido de vídeo sobre un equipo. La aplicación de los Chicago Blackhawks es un excelente ejemplo. Aquí puedes ver la página de destino de la aplicación, que retrata el memorable momento en la historia de los Blackhawks cuando ganaron la Stanley Cup. Seattle Sounders FC y AC Milan son otros dos ejemplos de aplicaciones de la Tienda Windows favoritas de los aficionados.
	Herramientas y utilidades Este tipo de aplicación de deportes realiza funciones concretas, como comparar estadísticas de equipos, enseñar al usuario una habilidad atlética específica o permitir a los usuarios participar en una liga ficticia. A menudo, estas aplicaciones tienen un patrón de navegación más lineal, para guiarlos por una tarea concreta. Consulta las aplicaciones Decision Maker, Winchester Ballistics, One Basketball o NFL Fantasy Football 2013 en la Tienda Windows para inspirarte.

 

Atraer a los usuarios con iconos y notificaciones

Windows 8.1 ofrece muchas maneras de atraer a los usuarios con tu aplicación, incluso cuando no se ejecute. Por ejemplo, los iconos pueden incluir información dinámica en directo en la pantalla Inicio. Un icono dinámico puede mostrar un avance informativo sobre un nuevo fichaje del equipo favorito del usuario o mostrar actualizaciones de resultados en directo. La aplicación también puede proporcionar notificaciones habilitadas por el usuario para garantizar que un aficionado a los deportes no se pierda nunca ningún partido.

Crea un icono para la pantalla Inicio que represente claramente tu aplicación. En esta captura de pantalla, puedes ver que los iconos tienen cuatro tamaños distintos: pequeño, mediano, ancho y grande. Los usuarios tienden a colocar los iconos bien diseñados en un lugar destacado de sus pantallas Inicio, lo que fomenta el uso habitual. Es posible que las aplicaciones con iconos menos atractivos no se ganen un puesto en la pantalla Inicio, con lo que serán mucho más fáciles de olvidar. No subestimes el poder de un icono atractivo.

Iconos dinámicos: el mundo de los deportes sigue un ritmo rápido. Un partido ganado, una lesión a final de temporada o un fichaje importante pueden producirse en un abrir y cerrar de ojos. Con un icono dinámico, la aplicación de deportes informa a los aficionados de los últimos titulares de sus equipos favoritos, aunque la aplicación no se esté ejecutando. Considera la posibilidad de mostrar noticias de última hora, actualizaciones de resultados de los partidos o recordatorios sobre partidos en el icono dinámico. Consulta Iconos dinámicos para obtener información general o Guidelines for tiles and badges para obtener más detalles.

Un icono dinámico es una parte fundamental de la experiencia de la aplicación Bing Deportes. A continuación se muestra el icono dinámico de la aplicación, que comparte un titular y una imagen en la pantalla Inicio.

Iconos secundarios: los aficionados a los deportes desean disponer de maneras rápidas de estar al día de sus jugadores, equipos y ligas favoritos. Ayuda a los aficionados a acceder de inmediato al contenido que les interesa con un icono secundario. Si tu aplicación de deportes admite iconos secundarios, un usuario puede anclar directamente a la pantalla Inicio un acceso directo a contenido específico de la aplicación. ¿Quieres más información? Consulta Guidelines for secondary tiles o, para obtener un resumen más detallado, Introducción a los iconos secundarios.

En la aplicación ESPN, por ejemplo, un aficionado de los Toronto Blue Jays puede anclar la página de estadísticas del equipo a la pantalla Inicio. Como este contenido se diseñó para poder anclarse, el aficionado puede hacer clic en el icono de anclaje de la barra de la aplicación inferior (tal como se muestra en la siguiente captura de pantalla).

Tras hacer clic en el icono de anclaje, el usuario confirma que desea anclar el icono a la pantalla Inicio.

Presiona el botón "Anclar a Inicio" y aparece un icono secundario nuevo en la pantalla Inicio. Mueve el icono nuevo cerca de las otras aplicaciones de deportes. Ahora, su pantalla Inicio tiene dos iconos de ESPN: uno para el contenido general y un icono secundario nuevo que lleva al usuario directamente a la página de su equipo favorito.

Los iconos secundarios han permitido a este aficionado de los Blue Jays acceder a las estadísticas que le interesan con un solo clic. Si tienes contenido al que los usuarios puedan querer acceder directamente, haz que se pueda anclar.

Tamaño del icono: los usuarios pueden cambiar el tamaño del icono. Por tanto, asegúrate de que el icono se vea bien en todos los tamaños que admita tu aplicación. Personaliza las imágenes del icono para cada tamaño de icono. Este icono tiene un diseño distinto para los tamaños de icono pequeño, mediano y ancho.

Como las aplicaciones de la Tienda Windows se pueden ejecutar en todo tipo de dispositivos, asegúrate de proporcionar versiones a escala de las imágenes del icono para que se vean nítidas en las siguientes resoluciones de pantalla:

• 1,0 = 1.024 x 768 px
• 1,4 = 1.440 x 1.080 px
• 1,8 = 1.920 x 1.440 px

Para obtener más información sobre los tamaños de icono, consulta Tamaños de las imágenes de iconos y notificaciones del sistema. ¿Deseas obtener más información sobre el escalado? Consulta Guidelines for scaling to pixel density.

Notificaciones del sistema: los eventos deportivos tienen lugar a todas horas. Los iconos dinámicos son excelentes para informar a los aficionados de las novedades deportivas desde la pantalla Inicio, pero si los usuarios desean alertas más directas, tu aplicación de deportes puede proporcionar notificaciones del sistema. Un usuario puede hacer clic en la notificación para abrir la aplicación y obtener más detalles, tanto si la notificación es sobre el inicio de un partido como si informa al usuario de que su equipo favorito acaba de ganar la liga.

¿Quieres más información sobre las notificaciones? Consulta Guidelines for toast notifications. Para obtener una descripción más detallada, consulta Introducción a las notificaciones del sistema.

En esta imagen se muestra una notificación del sistema de la aplicación SportsCenter. Observa que las notificaciones aparecen en la esquina superior derecha de la pantalla.

Mostrar contenido de manera creativa con el zoom semántico

A menudo, las aplicaciones de deportes tienen gran cantidad de contenido de calidad en una sola página. Si una aplicación abarca noticias de muchos deportes distintos, la página de destino puede abarrotarse. El zoom semántico es una manera ordenada de organizar las páginas que tienen mucho contenido. Esta característica contrae el contenido en grupos lógicos, lo que ofrece a los usuarios una mejor percepción de todo el contenido disponible y una manera de acceder al tipo de contenido concreto que desean ver.

La aplicación Sports Illustrated usa el zoom semántico para que su contenido sea manejable. La primera vez que se abre la aplicación, un usuario puede desplazarse lateralmente hacia la derecha para ver todo su contenido. Aquí tienes una captura de pantalla de la vista predeterminada.

No obstante, para ver todo el contenido disponible hay que desplazarse mucho. Para obtener una vista general del contenido disponible, el usuario utiliza el zoom semántico. Cuando el usuario aplica zoom por medio de los gestos táctiles o presionando "Ctrl" mientras mueve la rueda del mouse, el contenido se organiza en distintas categorías con titulares y miniaturas útiles.

Ahora, el usuario puede echar una ojeada al contenido fácilmente e ir a una sección que le parezca interesante. Consulta Zoom semántico para ver más ejemplos y Guidelines for semantic zoom para obtener información más detallada.

Hacer que los aficionados se sumerjan en el contenido con la navegación centralizada

En los deportes, no falta acción, momentos de triunfo y espectáculos impresionantes. El control de navegación centralizada coloca la imagen "principal" en el lugar más destacado de la aplicación. La imagen principal es una imagen de alta resolución y gran tamaño que da la bienvenida a los usuarios en la página de destino y les anima a explorar tu aplicación.

Aquí, la aplicación de los Chicago Blackhawks muestra el momento más memorable del equipo en su imagen principal. Es lo primero que ven los usuarios al abrir la aplicación.

La aplicación Bing Deportes muestra el titular más reciente en su imagen principal. La foto llama la atención del usuario e incluye una leyenda extraída del artículo.

Para obtener más información, consulta para el control de navegación centralizada.

Maximizar el impacto con contenido en pantalla completa

El mero hecho de que haya una cuadrícula asociada a la silueta de la aplicación de la Tienda Windows no significa que todo el contenido de la aplicación tenga que estar dentro de los márgenes. Si quieres, amplía e incluso cruza los límites del diseño de tu aplicación de deportes. A continuación tienes un ejemplo de contenido que cruza las líneas de cuadrícula. En la parte izquierda de la aplicación, el logotipo y el contenido se ajustan a los márgenes. No obstante, la imagen principal fluye desde la parte superior de la pantalla a la inferior, para maximizar el impacto visual.

En la imagen siguiente los márgenes de la silueta de la aplicación de la Tienda Windows se superponen sobre la misma imagen de la aplicación. La mayoría del contenido de la aplicación sigue dentro de la zona azul limitada por los márgenes, pero la imagen del jugador cruza los límites hacia los bordes de la pantalla.

La aplicación de los Seattle Sounders también crea impacto con gráficos que abarcan toda la pantalla. Las impactantes imágenes de fondo se superponen con el atractivo contenido destacado. Incluso el anuncio a tamaño completo que aparece en el extremo derecho de la pantalla está diseñado para integrarse en la experiencia de los Sounders.

El diseño de la aplicación de deportes puede ocupar todos los píxeles del espacio en pantalla.

Facilitar la navegación con barras de la aplicación

Destaca el contenido de la aplicación y evita que los controles se acumulen en la pantalla cuando no resulten necesarios. En las aplicaciones de la Tienda Windows, la barra de navegación (también conocida como barra de la aplicación superior) y la barra de la aplicación inferior permanecen ocultas hasta que el usuario hace clic con el botón derecho o desliza el dedo rápidamente desde el borde superior o inferior de la pantalla. Muchas aplicaciones de deportes usan la barra de navegación para incluir accesos directos a distintas secciones de la aplicación. Por ejemplo, la barra de navegación de THE Football App tiene pestañas para distintas ligas de fútbol del mundo. También ofrece al usuario acceso rápido al inicio, las noticias, los vídeos y las redes sociales.

Además de los controles de navegación, la aplicación ESPN muestra los resultados más recientes de partido en la barra de navegación. Desde la barra de navegación, un usuario puede pasar de una sección de la aplicación a otra, obtener información general rápida sobre los resultados de los partidos actuales o saltar a contenido de la aplicación más detallado relacionado con los partidos.

En la barra de la aplicación inferior se suelen incluir los controles relevantes para la vista actual. Por ejemplo, una página que contenga un artículo sobre deportes con mucho texto podría tener un botón para cambiar el tamaño del texto en la barra de la aplicación inferior. La aplicación Sports Illustrated permite a los usuarios filtrar el contenido según la liga deportiva desde la barra de la aplicación.

Simplificar la búsqueda

En el mundo de los deportes, hay mucho por conocer. Si permites las búsquedas en la aplicación y usas el contrato de Buscar para que se pueda buscar en tu aplicación desde cualquier ubicación del sistema, los usuarios podrán obtener la información que necesitan en el momento justo.

Búsqueda en aplicación: incluye un cuadro de búsqueda en la aplicación para que los aficionados a los deportes puedan acceder rápidamente al contenido que deseen ver. Si hay páginas en la aplicación en las que los usuarios solo escribirán consultas de búsqueda, puedes habilitar la búsqueda mediante escritura, que registra automáticamente todas las entradas del teclado como consultas de búsqueda. Para obtener más información sobre los puntos en los que puede resultar adecuado usar la búsqueda mediante escritura, consulta Guidelines for search.

Para ver un ejemplo de la búsqueda en una aplicación de deportes existente, consulta la aplicación Bing Deportes. Si un usuario desea saber más sobre un jugador concreto, puede abrir la aplicación y empezar a escribir el nombre del jugador. Como la aplicación Bing Deportes permite la búsqueda mediante escritura en su página principal, el cuadro de búsqueda se abre y registra la entrada en cuanto el usuario empieza a escribir.

La aplicación Bing Deportes limita las sugerencias de resultados de la búsqueda a medida que el usuario escribe.

El usuario obtiene la información que necesita con solo ocho pulsaciones de teclas.

Contrato de Buscar: haz que el contenido de deportes de tu aplicación esté disponible en las búsquedas del sistema mediante el contrato de Buscar. Si tu aplicación participa en el contrato de Buscar, los usuarios verán los resultados relevantes de la búsqueda en la aplicación si usan el acceso a Buscar para realizar una búsqueda desde cualquier ubicación del sistema. ¿No sabes cómo funcionan los contratos? Consulta Accesos y contratos para obtener información general o Contratos y extensiones para aplicaciones para obtener una descripción más detallada.

Compartir la afición a los deportes

Los deportes giran en torno a comunidades de personas que comparten su afición por el juego, por un equipo y una experiencia común. Windows facilita el uso compartido con el contrato para contenido compartido. Si haces que tu aplicación pueda ofrecer contenido compartido, un usuario puede compartir contenido de la aplicación mediante otra instalación instalada como Twitter, Facebook o el correo electrónico. El hecho de compartir contenido no solo satisface a tus usuarios, sino que también promociona sutilmente tu aplicación. Consulta Accesos y contratos para obtener una descripción general de los contratos disponibles para las aplicaciones de la Tienda Windows.

Si registras tu aplicación para que pueda ofrecer contenido compartido, los usuarios pueden usar el acceso a Compartir para compartir contenido de la aplicación en cualquier momento. Por ejemplo, imaginemos que un usuario mira las repeticiones de un partido en la aplicación NFL Fantasy Football. La tarde anterior estuvo hablando del partido con un amigo y decide compartir el vídeo con él. Desliza el dedo rápidamente desde el lado derecho de la pantalla para mostrar los accesos y selecciona el acceso a Compartir.

NFL Fantasy Football proporciona al sistema el contenido que el usuario desea compartir y Windows muestra una lista de aplicaciones instaladas en el sistema del usuario que pueden admitir este tipo de contenido de página. En este caso, Twitter, Correo, Evernote Touch, Flipboard y otras aplicaciones pueden compartir este tipo de contenido. Ahora, el usuario puede decidir cómo desea compartir esta información. Tanto si desea publicar un tweet, enviar un vínculo a su amigo por correo electrónico o compartirla con una de las otras aplicaciones disponibles, no tendrá que salir de NFL Fantasy Football.

Puedes personalizar la manera en que se representa tu aplicación cuando un usuario comparte contenido desde ella. Por ejemplo, puedes proporcionar un vínculo al contenido compartido de manera predeterminada o incluir además el logotipo de tu aplicación o una miniatura del contenido compartido.

Si quieres que tu aplicación reciba el contenido que comparten otras aplicaciones, haz que tu aplicación de deportes acepte contenido compartido. Para obtener más información sobre cómo hacer que tu aplicación ofrezca o acepte contenido compartido, consulta Guidelines for sharing content. Para ver ejemplos de código, consulta la muestra de origen de contenido compartido y la muestra de destino de contenido compartido.

Aprovecha las redes sociales: incorpora las redes sociales en tu aplicación para permitir a los usuarios participar en conversaciones sobre deportes. Tanto si deseas dominar las posibilidades que te ofrece Twitter como si deseas sincronizar con Facebook para que los usuarios sepan qué opinan sus amigos sobre los temas deportivos, presentar el contenido social de manera creativa puede ser impactante.

Esta aplicación de entretenimiento de FX usa una escala de tiempo para mostrar las tendencias en las redes sociales. Los usuarios filtran la escala de tiempo por tema (en este caso, por programa de televisión) y por la red social de origen. A continuación, la aplicación muestra las entradas individuales, así como una escala de tiempo de todas las conversaciones pertenecientes a ese tema.

Hacer que los datos sean interactivos

El mundo de los deportes está plagado de estadísticas que influyen sobremanera en las experiencias de los aficionados a los deportes. Tanto si un usuario desea informarse para tomar una decisión en un intercambio en un deporte de fantasía, disfrutar de los logros de su equipo de hockey favorito o comparar las carreras impulsadas de dos bateadores de la MLB, si proporcionas maneras creativas de visualizar los datos e interaccionar con ellos, tu aplicación puede resaltar por encima del resto.

La aplicación NFL Fantasy Football 2013 anima las estadísticas de los partidos con medios interactivos. La aplicación muestra los resultados de los equipos ficticios a lo largo del tiempo y permite a los usuarios hacer clic en puntos concretos del gráfico para ver videoclips de las jugadas que han cambiado los resultados.

Temas relacionados

Introducciones y directrices

Conocer las aplicaciones de la Tienda Windows

Directrices de experiencia del usuario para aplicaciones de la Tienda Windows

Accesos y contratos

Extensiones y contratos entre aplicaciones

Directrices para el control de navegación centralizada

Iconos dinámicos

Directrices para los iconos dinámicos

Introducción a los iconos secundarios

Secondary tile guidelines

Introducción a las notificaciones del sistema

Directrices para las notificaciones del sistema

Directrices para el tamaño de ventana

Directrices para el desplazamiento lateral

Zoom semántico

Directrices para el zoom semántico

Directrices para AppBar

Directrices para el uso compartido

Directrices para la búsqueda

Muestras

Muestra de iconos dinámicos

Muestra de movimiento panorámico (HTML)

Muestra de movimiento panorámico (XAML)

Muestra de la barra de la aplicación (HTML)

Muestra de la barra de la aplicación (XAML)

Muestra de origen de contenido compartido

Muestra de destino de contenido compartido

Muestra de Buscar

Muestra de zoom semántico (C#/VB/C++)

Muestra de zoom semántico (JavaScript)

Muestra de notificación del sistema