Phone 7 : Interaction Guide & UI Design in pillole

Un elenco da stampare e appiccicare al muro se si ha intenzione di sviluppare per phone 7. 

Vi consiglio di leggere il documento integrale, di seguito un breve riassunto dei punti + importanti per lo sviluppatore:

Generici

• Non usare Font con dimensione inferiore di 15pt, sarebbe faticosa la lettura.
• Puoi usare un Font proprietario, e non solo quello usato di default cioè il Segoe WP.
• Il touch target (ossia la zona sensibile al tocco..) deve essere almeno 34px x 34px oppure 9mm x 9mm, e deve distanziarsi da tocuh target adiacenti di 2mm x 8px. Se il touch target fa parte di un controllo molto usato, meglio aumentare le dimensioni.
• Il touch element (ossia la zona grafica associata al touch target) può essere più piccolo del tocuh target ma non più del 60%.
• Non usare transizioni personalizzate nel passare da landscape a portrait o viceversa.
• Puoi personalizzare le Screen Transition, cioè l'effetto grafico durante il passaggio da una pagina ad un'altra.
• Se la tua applicazione supporta il landscape view allora deve sopportare sia il right landscape che il left landscape.
• La Application Bar supporta solo 4 ICONE e devono essere chiare e leggibili. Eventualmente possiamo aggiungere altri 5 item nel menù a tendina  chiamato Application bar menu.
• Se si usa una pagina con il Page Title, allora è meglio che tutte le pagine ne siano provviste.
• Le impostazioni della propria applicazione saranno da implementare all'interno di essa, quindi prevedere una pagina Settings. (Non prevedere eventuali conferme da parte dell'utente, le modifiche devono essere immediate). Non superare le due pagine per non avere impostazioni troppo complesse. La pagina si dovrà chiamare "settings" e come titolo "nome app".
• Se si usano web-service verificare se il dispositivo non sia in modalità "airplane mode"

Gesture

• Touch & Hold (tenere premuto il dito sullo schermo): Per visualizzare un menù contestuale oppure per aprire una pagina di configurazione riferita all'item indicato.
• Touch (toccare lo schermo e subito allontanare il dito): Quando il dito tocca il touch target siamo nella fase di touch indication, quando il dito non tocca + lo schermo siamo nella fase di tocuh execution.
• Double Tap (doppio touch ravvicinato): In genere usato per lo zoom di un'area.
• Pan (scorrere il dito sullo schermo mantenendo il contatto) : Usato per scorrere un controllo i spostare elementi.
• Flick (scorrere velocemente e allontanare il dito, tipo sfogliare un libro velocemente): Usato per spostare elementi da una zona ad un'altra.
• Pinch & Stratch (avvicinare o allontanare due dita a contatto con lo schermo): Usato per zoom in / zoom out continuo.

Hardware button

• Non è possibile interagire con il pulsante Search. E' possibile creare un button con la medesima icona e simulare una ricerca all'interno della nostra applicazione. (usando semmai la classe Search Task)
• Il puslante Backbutton server per tornare alla pagine precedente o chiudere uno screen modale. Se siamo nella pagina principale e premiamo back, usciamo dall'applicazione.

Controlli della GUI

• I Button non devono contenere più di due parole. Quindi limitarsi con parole chiave chiare, tipicamente un verbo...
• I pulsanti di conferma (tipo OK,YES) devono essere a sinistra, quelli di annullamento (tipo CANCEL, NO) a destra.
• Se ho un controllo editabile multiline è lo sviluppatore che deve controllare che la linea attualmente editabile sia visibile e non coperta dalla tastiera a video.
• Il Canvas è + performante del Grid ma non è adatto se vogliamo un layout ridimensionabile o che ruoti.
• Il testo delle Checkbox sarebbe meglio non superasse le due linee.
• Meglio non usare il terzo stato o stato indeterminato nelle Checkbox.
• Usare gli Hyperlink solo per navigare tra le pagine, non per attivare azioni o interagire in altri modi con la GUI.
• Non usare il MediaElement per effetti sonori, si usa solo per contenuti multimediali. Usare XNA SoundEffect per gli effetti.
• La Background image del controllo Panorama Control deve essere al massimo 1024x800 per avere prestazioni ottimali.
• Un Panorama Control formato da 4 sezioni dovrebbe rispettare la proporzione 16:9
• Il titolo del Panorama Control può ospitare anche loghi o immagini.
• Una singola sezione del Panorama Control può ospitare un controllo con scrolling verticale, ma il controllo deve essere contenuto completamente all'interno della section. Non usare scrolling orizzontale nei controlli.
• Il Pivot Control può essere usato efficacemente per visualizzare data sets o cmq tabelle contenenti molti dati.
• Non innestare un Pivot Control dentro una'altro Pivot Control.
• Non innestare un Pivot Control dentro un Panorama Control.
• Tra le pagine di un controllo Pivot Control non vi devono essere grosse differenze di utilizzo e di layout di presentazione dei dati. (Devono essere pagine similari)
• Usare gli Slider orizzontali piuttosto che gli slider verticali.