App per gli sport

Le app per gli sport hanno un grosso impatto sugli utenti, sia che permettano ai tifosi avidi di notizie di sapere sempre le ultimissime sia che aiutino gli atleti a migliorare sul campo le loro prestazioni. Le funzionalità di Windows, come i riquadri, lo zoom semantico e i contratti Ricerca e Condivisione, possono essere particolarmente utili durante la progettazione di un'app interessante per gli appassionati di sport. Questo articolo presenta brevemente tali funzionalità, fornendo numerosi esempi di come vengono utilizzate dalle app per gli sport esistenti per offrire esperienze utente veramente entusiasmanti. Ispirandosi a tali app, sarà poi facile creare una nuova app di questo tipo.

Tipi di app per gli sport

Ecco alcuni tipi comuni di app per gli sport:

	Notizie, informazioni e video Queste app offrono le ultime notizie relative ai diversi sport sotto forma di articoli, video e presentazioni. Il contenuto viene aggiornato con regolarità ed è spesso disponibile nella prima pagina dell'app. Ad esempio, ti basta aprire l'app ESPN per immergerti subito nei contenuti relativi agli eventi sportivi più recenti. Scopri subito in Windows Store queste app specifiche per le notizie sportive: ESPN, Sports Illustrated, NASCAR, Yahoo! Sports e THE Football App.
	Squadre più amate dai tifosi Queste app hanno la funzione di far amare e seguire dai tifosi una particolare squadra di un determinato sport. Offrono infatti notizie, foto e contenuti video relativi a una squadra specifica. Un grande esempio è rappresentato dall'app Chicago Blackhawks. Ecco la pagina di destinazione di questa app, che ti permette di tornare al glorioso momento della storia dei Blackhawks in cui hanno vinto la Stanley Cup. Seattle Sounders FC e AC Milan sono altri due esempi di app di Windows Store dedicate alle squadre più amate dai tifosi.
	Strumenti e utilità Questo tipo di app per gli sport esegue funzioni specifiche come il confronto delle statistiche relative alle squadre, la spiegazione e dimostrazione di come svolgere una particolare attività o specialità sportiva o la possibilità per l'utente di partecipare a un campionato virtuale. Queste app spesso hanno uno schema di esplorazione più lineare per guidare gli utenti nell'esecuzione di una determinata attività. Per trarre ispirazione, guarda le app Decision Maker, Winchester Ballistics, One Basketball o NFL Fantasy Football 2013 in Windows Store.

 

Coinvolgi gli utenti con riquadri e notifiche

Windows 8.1 permette alla tua app di coinvolgere gli utenti in molti modi, anche quando non è in esecuzione. Ad esempio, i riquadri possono visualizzare informazioni dinamiche in tempo reale nella schermata Start. Un riquadro animato può infatti visualizzare notizie flash su una nuova trattativa relativa alla squadra del cuore dell'utente o mostrare in diretta aggiornamenti sui risultati degli incontri. L'app può anche visualizzare notifiche abilitate dall'utente, in modo che i tifosi più accaniti di un determinato sport non perdano mai una partita.

Crea per la schermata Start un riquadro che rappresenti chiaramente l'app. In questa cattura di schermata puoi vedere che i riquadri sono di quattro dimensioni diverse: piccoli, medi, larghi e grandi. Gli utenti tendono a posizionare i riquadri graficamente ben progettati in primo piano nella schermata Start, il che facilita un uso frequente dell'app. Le app con riquadri meno accattivanti potrebbero non trovare spazio nella schermata Start ed essere quindi presto dimenticate. Non sottovalutare l'importanza di un riquadro con una bella estetica.

Riquadri animati: il mondo dello sport si evolve rapidamente: una giocata vincente, un infortunio che mette fine alla stagione di un giocatore o una trattativa importante può avvenire in qualunque momento. Con un riquadro animato, la tua app per gli sport può mantenere aggiornati i tifosi sugli ultimi titoli riguardanti la loro squadra preferita, anche se l'app non è in esecuzione. Pensa a visualizzare nel riquadro animato le ultime notizie, gli aggiornamenti sui risultati o promemoria relativi agli incontri. Per una panoramica generale, vedi Riquadri animati. Per altri dettagli, vedi Guidelines for tiles and badges.

Un riquadro animato è una parte fondamentale dell'esperienza utente per l'app Bing Sport. Ecco il riquadro animato dell'app che mostra un titolo e un'immagine nella schermata Start.

Riquadri secondari: gli appassionati di sport cercano sempre modi rapidi per tenere sottocchio i giocatori, le squadre e i campionati che preferiscono. Aiuta questi utenti avidi di notizie ad accedere immediatamente al contenuto a cui sono più interessati usando un riquadro secondario. Se la tua app per gli sport supporta i riquadri secondari, l'utente può aggiungere un collegamento a contenuto specifico all'interno dell'app direttamente nella schermata Start. Vuoi altre informazioni? Vedi Guidelines for secondary tiles oppure, se vuoi un riepilogo più dettagliato, leggi Panoramica dei riquadri secondari.

Nell'app ESPN, ad esempio, un tifoso dei Toronto Blue Jays può aggiungere alla schermata Start la pagina con le statistiche della squadra. Poiché questo contenuto è stato progettato in modo da poter essere aggiunto, il tifoso può fare clic sull'icona di aggiunta nella barra inferiore dell'app (come mostrato nella cattura di schermata seguente).

Dopo avere fatto clic sull'icona di aggiunta, l'utente conferma di voler aggiungere il riquadro alla schermata Start.

Fa clic sul pulsante "Aggiungi a Start" e nella schermata Start compare un nuovo riquadro secondario. L'utente quindi sposta questo nuovo riquadro accanto al resto delle sue app per gli sport. Ora nella sua schermata Start sono presenti due riquadri ESPN: uno per il contenuto generico e un nuovo riquadro secondario che permette di passare direttamente alla pagina della sua squadra del cuore.

Grazie ai riquadri secondari, questo tifoso dei Blue Jays è stato in grado di accedere alle statistiche a cui è interessato con un semplice clic. Se hai contenuti a cui gli utenti potrebbero voler accedere direttamente, fai in modo che possano essere aggiunti.

Dimensionamento dei riquadri: gli utenti possono modificare le dimensioni del tuo riquadro, perciò assicurati che abbia sempre un bell'aspetto a tutte le dimensioni supportate dalla tua app. Personalizza le immagini per ciascun formato del riquadro. Il riquadro seguente è stato progettato in modo diverso per un formato piccolo, medio o largo.

Poiché le app di Windows Store possono essere eseguite su tutti i tipi di dispositivo, ricordati di fornire versioni ridimensionate delle immagini del riquadro, in modo che risultino nitide con le risoluzioni dello schermo seguenti:

• 1.0 = 1024 x 768px
• 1.4 = 1440 x 1080px
• 1.8 = 1920 x 1440px

Per altre informazioni sulle dimensioni dei riquadri, vedi Dimensioni delle immagini riquadro e di avviso popup. Vuoi altre informazioni sul ridimensionamento? Vedi Guidelines for scaling to pixel density.

Notifiche di tipo avviso popup: gli eventi sportivi si svolgono a tutte le ore del giorno. I riquadri animati sono utilissimi per mantenere aggiornati i tifosi su tutte le ultime notizie di carattere sportivo dalla schermata Start, ma se gli utenti vogliono avvisi più diretti, la tua app può fornire notifiche di tipo avviso popup. Che serva a segnalare l'inizio di un incontro o la vittoria della finale del campionato da parte della squadra preferita, l'utente può fare clic sull'avviso popup per aprire l'app e avere ulteriori dettagli.

Sei curioso di sapere qualcosa in più sugli avvisi popup? Vedi Guidelines for toast notifications. Per una descrizione più approfondita, vedi Panoramica delle notifiche di tipo avviso popup.

Questa immagine mostra una notifica di tipo avviso popup inviata dall'app SportsCenter. Tieni presente che gli avvisi di questo tipo compaiono nell'angolo superiore destro dello schermo.

Visualizza i contenuti in modo creativo con lo zoom semantico

Le app per gli sport spesso presentano molti contenuti di qualità in un'unica pagina. Se un'app visualizza articoli su molti sport principali, la pagina di destinazione può risultare alquanto affollata. Lo zoom semantico offre un metodo semplice per organizzare le pagine con tanti contenuti. Questa funzionalità infatti comprime il contenuto in gruppi logici, dando agli utenti una migliore percezione di tutti i contenuti disponibili e la possibilità di accedere al tipo di contenuto specifico che desiderano.

L'app Sports Illustrated usa lo zoom semantico per mantenere gestibile il proprio contenuto. All'apertura dell'app, l'utente può fare una panoramica verso destra per vedere i vari contenuti. Ecco una cattura di schermata che mostra la visualizzazione predefinita.

Occorre tuttavia fare una lunga panoramica per visualizzare tutti i contenuti disponibili. Per avere una panoramica di quanto disponibile, l'utente usa lo zoom semantico. Quando l'utente esegue lo zoom usando movimenti di tocco o premendo "CTRL" mentre fa scorrere la rotella del mouse, il contenuto viene organizzato in diverse categorie con intestazioni e anteprime utili.

Ora l'utente può scorrere facilmente il contenuto e passare a una sezione particolarmente interessante. Per altri esempi, vedi Zoom semantico. Per informazioni più approfondite, vedi Guidelines for semantic zoom.

Coinvolgi i tifosi con l'hub

Le azioni piene di intensità, i momenti di trionfo e gli spettacoli d'effetto sono all'ordine del giorno nello sport. Il controllo hub colloca l'immagine del "banner personalizzato" in primo piano al centro dell'app. Tale immagine è un'immagine ad alta risoluzione di grandi dimensioni che saluta gli utenti nella pagina di destinazione e li introduce all'articolo all'interno dell'app.

Qui l'app Chicago Blackhawks visualizza il momento più significativo nella storia della squadra nell'immagine del banner personalizzato. È la prima cosa che gli utenti vedono quando aprono l'app.

L'app Bing Sport mostra nella propria immagine del banner personalizzato l'ultima notizia uscita. La foto attira l'attenzione dell'utente ed è accompagnata da un titolo tratto dall'articolo.

Per altre informazioni, vedi Linee guida per il controllo hub.

Amplifica l'impatto con contenuto a schermo intero

Solo perché alla sagoma delle app di Windows Store è associata una griglia, non è detto che tutti i contenuti della tua app debbano essere visualizzati all'interno dei margini. Ritieniti libero di arrivare fino ai bordi e persino di oltrepassarli nella progettazione della tua app per gli sport. Di seguito è riportato un esempio di contenuto che va oltre la griglia. Sul lato sinistro dell'app il logo e il contenuto sono all'interno dei margini. L'immagine del banner personalizzato invece va dall'estremità superiore a quella inferiore dello schermo per amplificare al massimo l'impatto visivo.

L'immagine seguente si sovrappone ai margini della sagoma delle app di Windows Store sulla stessa immagine dell'app. La maggior parte del contenuto dell'app rientra ancora senza problemi nell'area blu delimitata dai margini, ma l'immagine del calciatore si estende oltre fino ai bordi dello schermo.

Anche l'app Seattle Sounders è di forte impatto grazie all'uso di grafica che occupa l'intero schermo. A vivaci immagini di sfondo si sovrappongono contenuti di rilievo altrettanto accattivanti. Anche la pubblicità a grandezza intera all'estrema destra dello schermo è stata realizzata in modo da integrarsi nell'esperienza utente dell'app Seattle Sounders.

Ogni pixel dello spazio sullo schermo è complementare nel design dell'app per gli sport.

Permetti una facile esplorazione con le barre dell'app

Mostra il contenuto in primo piano e al centro della tua app ed evita che i controlli ingombrino lo schermo quando non sono necessari. Nelle app di Windows Store la barra di spostamento (chiamata anche barra superiore dell'app) e la barra inferiore dell'app restano nascoste finché l'utente non fa clic con il pulsante destro del mouse o non scorre rapidamente dal bordo superiore o inferiore dello schermo. Molte app per gli sport usano la barra di spostamento per raggruppare i collegamenti a diverse sezioni. Ad esempio, la barra di spostamento dell'app THE Football App ha schede per varie leghe calcistiche nel mondo. Inoltre, permette all'utente di accedere rapidamente alla home page, alle news, ai video e ai social media.

Oltre ai controlli di spostamento, l'app ESPN mostra nella barra di spostamento gli ultimi risultati degli incontri. Un utente può passare da una sezione all'altra dell'app, visualizzare una rapida panoramica dei risultati delle partite correnti o accedere direttamente a contenuti dell'app più dettagliati specifici di un incontro, tutto dalla barra di spostamento.

La barra inferiore dell'app in genere contiene i controlli pertinenti alla visualizzazione corrente. Ad esempio, una pagina contenente un articolo di carattere sportivo con molto testo potrebbe avere nella barra inferiore dell'app un pulsante per ridimensionare il testo. L'app Sports Illustrated permette agli utenti di filtrare i contenuti in base alla lega sportiva tramite la barra dell'app.

Semplifica le ricerche

C'è molto da sapere sul mondo dello sport. Se permetti le ricerche in-app e usi il contratto Ricerca in modo che la tua app supporti la ricerca da qualunque posizione del sistema, gli utenti possono ottenere le informazioni di cui hanno bisogno dove e quando vogliono.

Ricerca in-app: includi una casella di ricerca nella tua app per permettere agli appassionati di sport di accedere velocemente ai contenuti a cui sono interessati. Se nella tua app sono presenti pagine in cui gli utenti si limiteranno a digitare query di ricerca, puoi abilitare la funzionalità di digitazione per la ricerca, che registra automaticamente qualsiasi input effettuato tramite tastiera come query di ricerca. Per altre informazioni sulle situazioni in cui può essere appropriato usare questa funzionalità, vedi Guidelines for search.

Per un esempio di ricerca in un'app per gli sport esistente, esplora l'app Bing Sport. Se un utente vuole conoscere meglio un determinato giocatore, può aprire l'app e iniziare a digitare il nome dello sportivo in questione. Poiché l'app Bing Sport permette l'uso della digitazione per la ricerca nella sua pagina principale, la casella di ricerca si apre e registra l'input non appena l'utente comincia a digitare.

L'app Bing Sport rifinisce i suggerimenti di risultati di ricerca man mano che l'utente digita.

Con appena otto tasti un utente ottiene le informazioni che vuole.

Contratto Ricerca: fai in modo che i contenuti sportivi della tua app diventino disponibili nelle ricerche di sistema usando il contratto Ricerca. Se la tua app aderisce al contratto Ricerca, gli utenti vedranno i risultati pertinenti prodotti dall'app se usano l'accesso alla ricerca da qualunque punto del sistema. Non hai familiarità con i contratti? Vedi Accessi e contratti per avere una panoramica generale oppure Contratti ed estensioni delle app per avere una descrizione più dettagliata.

Condividi l'amore per gli sport

Gli sport ruotano attorno a gruppi di persone che condividono l'amore per una determinata disciplina o squadra e che vogliono diffondere questa esperienza comune. Windows facilita la condivisione mediante il contratto Condivisione. Quando configuri la tua app come origine di condivisione, un utente può condividerne i contenuti usando un'altra app installata, ad esempio Twitter, Facebook o l'e-mail. La condivisione, oltre a rispondere alle esigenze degli utenti, in fondo contribuisce a promuovere la tua app. Per una vasta panoramica dei contratti disponibili per le app di Windows Store, vedi Accessi e contratti.

Se scegli di registrare la tua app come origine di condivisione, gli utenti possono usare l'accesso alla condivisione per condividere i contenuti dell'app in qualsiasi momento. Ad esempio, supponi che un utente stia riguardando le immagini di una partita nell'app NFL Fantasy Football. Poiché ha discusso di una particolare azione di gioco con un amico il pomeriggio precedente, decide di condividere il video con lui. Scorre rapidamente dal lato destro dello schermo per visualizzare gli accessi e seleziona l'accesso alla condivisione.

L'app NFL Fantasy Football fornisce al sistema il contenuto che l'utente vuole condividere e Windows visualizza un elenco delle app installate nel sistema dell'utente che sono in grado di gestire questo tipo di contenuto della pagina. In questo caso, Twitter, Mail, Evernote Touch, Flipboard e diverse altre app possono condividere questo tipo di contenuto. Ora l'utente può scegliere come vuole condividere tali informazioni. Che preferisca scrivere un tweet sull'argomento, inviare tramite e-mail un link all'amico o condividere il contenuto con una delle altre app disponibili, non dovrà mai uscire da NFL Fantasy Football.

Puoi personalizzare il modo in cui la tua app viene rappresentata quando un utente condivide del contenuto proveniente da essa. Ad esempio, puoi semplicemente fornire un link al contenuto condiviso per impostazione predefinita oppure associare al link il logo della tua app o un'anteprima del contenuto condiviso.

Se vuoi che la tua app per gli sport riceva il contenuto condiviso da altre app, configurala come destinazione di condivisione. Per altre informazioni su come configurare la tua app come origine e/o destinazione di condivisione, vedi Guidelines for sharing content. Per alcuni esempi di codice, vedi Esempio di origine di condivisione ed Esempio di destinazione di condivisione.

Ricorso ai social media: permetti agli utenti di essere sempre aggiornati sui dibattiti sportivi incorporando i social media nella tua app. Sia che tu voglia sfruttare il potenziale di Twitter o sincronizzarti con Facebook per permettere agli utenti di sapere cosa dicono i loro amici sui vari argomenti sportivi, la presentazione creativa dei contenuti di social networking può avere un notevole impatto.

Questa app di intrattenimento FX usa una sequenza temporale per mostrare le tendenze dei social media. Gli utenti filtrano la sequenza temporale in base all'argomento (in questo caso, in base al programma televisivo) e ai social media di origine. L'app quindi visualizza i singoli post e una sequenza temporale di tutte le conversazioni riguardanti l'argomento.

Rendi interattivi i dati

Nel mondo dello sport abbondano le statistiche, che incidono fortemente sulle esperienze d'uso dei tifosi. L'utente può voler prendere sulla base di dati certi una decisione per una trattativa nell'ambito di un campionato virtuale, divertirsi a seguire i successi della sua squadra del cuore o confrontare i punti messi a segno da due giocatori diversi: l'offerta di modalità per la visualizzazione e l'interazione creativa con i dati può far spiccare la tua app rispetto alle altre.

L'app NFL Fantasy Football 2013 ravviva le statistiche relative alle partite con contenuti multimediali interattivi. L'app mostra i risultati di squadre virtuali tracciandoli nel tempo e permette agli utenti di fare clic su determinati punti del grafico per visualizzare clip video delle azioni di gioco che hanno inciso sul risultato.

Panoramiche e linee guida

Presentazione delle app di Windows Store

Linee guida per l'esperienza utente delle app di Windows Store

Accessi e contratti

Contratti ed estensioni delle app

Linee guida per il controllo hub

Riquadri animati

Linee guida per i riquadri animati

Panoramica dei riquadri secondari

Secondary tile guidelines

Panoramica delle notifiche di tipo avviso popup

Linee guida per le notifiche di tipo avviso popup

Linee guida per le dimensioni delle finestre

Linee guida per la panoramica

Zoom semantico

Linee guida per lo zoom semantico

Linee guida per le barre dell'app

Linee guida per la condivisione

Linee guida per la ricerca

Esempi

Esempio di riquadro animato

Esempio di panoramica (HTML)

Esempio di panoramica (XAML)

Esempio di barra dell'app (HTML)

Esempio di barra dell'app (XAML)

Esempio di origine di condivisione

Esempio di destinazione di condivisione

Esempio di ricerca

Esempio di zoom semantico (C#/VB/C++)

Esempio di zoom semantico (JavaScript)

Esempio di avviso popup