• Save
Corso Tecnologie Mobile - Lezione 2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Corso Tecnologie Mobile - Lezione 2

on

  • 1,385 views

Corso Tecnologie Mobile ENAIP FVG - Udine, anno 2011. Slide della seconda lezione. Dal design delle applicazioni iOS alla definizione dei singoli elementi grafici dell'interfaccia.

Corso Tecnologie Mobile ENAIP FVG - Udine, anno 2011. Slide della seconda lezione. Dal design delle applicazioni iOS alla definizione dei singoli elementi grafici dell'interfaccia.

Statistics

Views

Total Views
1,385
Views on SlideShare
1,308
Embed Views
77

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 77

http://caspaolo.blogspot.it 41
http://caspaolo.blogspot.com 36

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Corso Tecnologie Mobile - Lezione 2 Presentation Transcript

  • 1. Tecnologie Mobili - Lezione 2
  • 2. Sommario
    • La progettazione delle applicazioni mobili
    • Sviluppare interfacce grafiche su iOS
    • Caratteristiche della piattaforma
    • Principi per la progettazione
    • Elementi grafici
    • Tecnologie
    • Casi di studio
  • 3. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/heraclitusboy/2809691149 Il processo di definizione dell’idea
  • 4. Spazio alle idee
    • Partire da una idea generale
    • Focalizzare la funzionalità principale dell'app
      • Rispondete alla domanda: “Perché dovrei utilizzare questa app ?”
        • Le app più famose si sono concentrate, almeno all’inizio, su una funzionalità sola, originale e
      • Troppo funzionalità -> app dispersiva
    • Definire quello che sarà il vostro prodotto
      • Obiettivi
      • Destinatari e fruitori dell'app
    Dr. Paolo Casoto, Ph.D - 2011
  • 5. Il processo di definizione dell’idea
    • PASSO 1: Definire tutto quello di cui l’utente potrebbe aver bisogno all’interno della app
      • Fare una intensa attività di brainstorming, come quella che abbiamo avviato in laboratorio.
      • Definire una lista di funzionalità, anche se lunga o di difficile realizzazione…sarete sempre in tempo per ridurla
      • Non preoccupativi del come farlo, per ora la vostra unica preoccupazione è cosa fare
    Dr. Paolo Casoto, Ph.D - 2011
  • 6. Esempio (in inglese)
    • Getting recipes
    • Comparing prices
    • Locating stores
    • Viewing cooking demos
    • Exploring different cuisines
    • Finding ingredient substitutions
    Dr. Paolo Casoto, Ph.D - 2011
  • 7. Il processo di definizione dell’idea
    • PASSO 2: Determinare i potenziali utenti della app
      • Dobbiamo rispondere alla domanda: chi utilizzerebbe questa applicazione e perché?
      • Determinare i potenziali utenti è importantissimo per motivare molteplici scelte implementative:
        • Quali funzionalità implementare
        • Che scelte grafiche effettuare
        • Che prezzo assegnare alla applicazione (sembra un problema secondario ma non lo è per nulla)
    Dr. Paolo Casoto, Ph.D - 2011
  • 8. Esempio (in inglese)
    • Usually cook at home or prefer ready-made meals
    • Enjoy hunting for special ingredients
    • Follow recipes strictly or use recipes as inspiration
    • Buy small amounts frequently or buy in bulk infrequently
    • Insist on specific brands or make do with the most convenient alternatives
    • Tend to buy a similar set of items on each shopping trip or buy items listed in a recipe
    Dr. Paolo Casoto, Ph.D - 2011
  • 9. Il processo di definizione dell’idea
    • PASSO 3: filtrare la lista delle funzionalità identificate in accordo con lo specifico target di utenti individuato
      • E’ necessario chiedersi quali siano le funzionalità che il nostro utente ideale utilizzerebbe e quali, al contrario, non sarebbero utilizzate efficacemente.
    • Contestualizzare la lista delle funzionalità
    • “ A shopping list creation tool for people who love to cook. “
    Dr. Paolo Casoto, Ph.D - 2011
  • 10. Il processo di definizione dell’idea
    • PASSO 4: iterare i tre passi precedenti durante l’intero ciclo di vita della applicazione
      • Identifico una nuova funzionalità che potrebbe essere interessante per la mia app, cosa faccio?
        • La valuto rispetto ai miei utenti, come ho fatto al passo 3. Se la nuova funzionalità è interessante nel contesto degli utenti è opportuno che la integri.
      • Il tema grafico, le componenti, i contenuti sono quanto gli utenti si attendono dalla mia applicazione?
    Dr. Paolo Casoto, Ph.D - 2011
  • 11. Capire cosa il mercato offre
    • Siate certi che la vostra app, nel mare degli store, sia davvero originale
      • “ Qualcun altro ha già fatto una cosa simile ?”
    • Analizzare il mercato
      • Cercate tutto quello che assomiglia alla vostra app e confrontate le idee degli altri con la vostra:
        • Hanno evidenziato idee alle quali non avevo pensato ?
        • Fanno cose che non credevo utili per l’utente?
        • Hanno identificato criticità alle quali non avevo pensato ?
    Dr. Paolo Casoto, Ph.D - 2011
  • 12. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/42931449@N07/5187987248
  • 13. Capire le limitazione dei competitor
    • Analizzate le limitazioni tecniche e studiate la fattibilità del sistema.
      • Una sorta di reverse engineering basato sull’osservazione e sull’utilizzo
    • Considerate sempre le eventuali limitazioni tecnologiche che possono rappresentare una criticità per la vostra soluzione:
      • E.g.: app iPhone che blocca le telefonate
        • Lo SDK non lo permette
      • E.g.: app per cercare i ristoranti vicini tramite Google
        • C'è un limite al numero di query
    Dr. Paolo Casoto, Ph.D - 2011
  • 14. Predisporre una strategia
    • Pianificare le funzionalità future ed i tempi di rilascio delle singole funzionalità
      • Soluzione incrementale che consenta di aggiungere via via nuove funzionalità in accordo con i feedback degli utenti e l’evoluzione dell’idea.
    • Monitorare continuamente l’evoluzione delle piattaforma tecnologiche
      • Le limitazioni di oggi potrebbero essere superate in futuro.
      • L’esempio iOS insegna…
        • E.g.: invio programmatico degli SMS
        • E.g: alert con campi di testo
        • … e molti altri ancora
    Dr. Paolo Casoto, Ph.D - 2011
  • 15. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/kroolik/5691225802 Formalizziamo le esigenze degli utenti
  • 16. Analisi dei requisiti utente
    • Identificare i potenziali utenti della nostra app
      • Conoscere i destinatari dell'app è importante per diversi aspetti progettuali (stile, layout, colori, ecc.)
    • Analizziamo i requisiti funzionali e non funzionali che animano i nostri utenti potenziali.
      • Quali funzionalità e i servizi dovrà fornire il sistema ?
      • Quali vincoli di piattaforma, tecnologia o gestione dovremo affrontare ?
        • E.g.: applicazione operante sulla piattaforma XYZ
    Dr. Paolo Casoto, Ph.D - 2011
  • 17. Scenari
    • Aiutano a comprendere in quali situazioni la vostra app sarà utilizzata
      • Dove sono gli utenti? A piedi ? In bus ? Stanno guidando ?
    • Pensare alla varietà di circostanze di interazione al fine di comprendere come progettare le funzionalità
      • E.g.: navigatore satellitare -> indicazioni vocali
    • “ Il 43enne Bill sta guidando verso il centro città per un incontro di lavoro e vuole fermarsi per bere un caffè...”
    • Come sarà l'app? Quanti tap per trovare un caffé?
    Dr. Paolo Casoto, Ph.D - 2011
  • 18. Casi d'uso
    • Descrizione gli attori che interagiscono con il sistema e delle azioni che possono essere condotte nel corso del processo di interazione.
    Dr. Paolo Casoto, Ph.D - 2011
  • 19. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/cappellmeister/5921913 Progettazione
  • 20. Definire la struttura delle informazioni
    • Parimenti al processo di sviluppo di un sito web, definire come saranno organizzate le funzionalità e le informazioni fra le varie schermate della app.
    • Definire un flusso di interazione efficace ed efficiente
    • Evitare la ridondanza, siamo in ambito mobile
      • La regola “ One door, one room ” è d ’ oro.
      • Evitare più vie per raggiungere le medesime informazioni o attivare le medesime funzionalità.
    Dr. Paolo Casoto, Ph.D - 2011
  • 21. Esempi di struttura delle informazioni Dr. Paolo Casoto, Ph.D - 2011
  • 22. Esempi di struttura delle informazioni Dr. Paolo Casoto, Ph.D - 2011 Home
  • 23. Il layout preliminare
    • Analizzando i contenuti prodotti dalle precedenti attività del processo avviamo lo studio del contenuto dell'app e dei controlli grafici che ne consentiranno la fruizione.
      • Layout preliminare dell'applicazione;
    • Studio delle informazioni da mostrare all’utente, delle modalità comunicative più efficaci (e.g.: dimensioni, colori).
      • Minimizzare il carico cognitivo dell’utente e l’information overloading.
    Dr. Paolo Casoto, Ph.D - 2011
  • 24. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/anand-j/6024899914 Ricercate la semplicità
  • 25. Dal layout preliminare al wireframe
    • Wireframe
      • Schema dell'applicazione e delle differenti schermate che la costituiscono.
      • Può essere creato in modo digitale usando tool grafici o a mano su fogli di carta (paper prototype)
    Dr. Paolo Casoto, Ph.D - 2011
  • 26. Paper prototype Dr. Paolo Casoto, Ph.D - 2011
  • 27. Paper prototype Dr. Paolo Casoto, Ph.D - 2011
  • 28. Vantaggi del paper prototyping
    • Creazione rapida, senza la necessità di alcun tool di disegno o sviluppo.
    • Rendono più agevole la visualizzazione delle schermate e del flusso informativo per gli utenti, in particolare per quelle tipologie di utenti non abituati ad interagire con un dispositivo mobile.
      • Fondamentali in ottica USER CENTERED DESIGN
      • Facili da condividere, da modificare, da rielaborare e…
    Dr. Paolo Casoto, Ph.D - 2011
  • 29. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/naturewise/2924419598 … e da buttare
  • 30. Prototipi digitali
    • I prototipi di carta presentano una scarsa precisione dei dettagli grafici. A tal fine è opportuno passare a prototipipiù precisi e dettagliati come quelli elaborati con strumenti digitali.
    • Schermate cliccabili permettono di “navigare” nell’interfaccia, simulando l’interazione
      • E.g.: PowerPoint
      • Facili da realizzare ma limitati alla sola modalità di simulazione Point & Click (o meglio Point & Tap)
    Dr. Paolo Casoto, Ph.D - 2011
  • 31. User testing
    • Testate fin dalla fase di progettazione la vostra applicazione, non solo per validare il codice sorgente ma, soprattutto per raccogliere il feedback utente.
    • Strutturate opportunamente l’attività di testing in accordo con gli specifici aspetti che si intende testare:
      • Emulatore / Dispositivi reali
      • Laboratorio / mondo reale
      • Con o senza utenti
      • Performance / Usabilità
    Dr. Paolo Casoto, Ph.D - 2011
  • 32. User testing
    • In fase progettuale siamo concentrati sulla raccolta di feedback utente che ci consentano di valutare l’efficacia della interfaccia proposta.
      • Test basati su prototipi cartacei e digitali con gli utenti.
    • Procedura iterativa: progetto, verifico, riprogetto, riverifico…
      • Tanti cicli quanti servono a raggiungere la qualità del sistema desiderata.
    Dr. Paolo Casoto, Ph.D - 2011
  • 33. User testing (solo su carta) Dr. Paolo Casoto, Ph.D - 2011
  • 34. Altre modalità di test
    • Laboratorio
      • Valutazione del comportamento dei dispositivi reali o virtuali in situazioni normali e potenzialmente critiche (e.g.: connessione assente o limitata, et al.)
    • Field test
      • Valutazione dell'applicazione nel mondo reale, con le reali condizioni di utilizzo (e.g.: carico dei server, funzionalità non disponibili in laboratorio).
    Dr. Paolo Casoto, Ph.D - 2011
  • 35. Ed infine la progettazione grafica definitiva
    • Creazione della grafica definitiva con gli strumenti opportuni (e.g.:Photoshop, Illustrator, Gimp, Inkscape, et al.)
    • Definizioni, per ciascuna schermata delle dimensioni delle componenti e dei font adottati.
    • Attività singola (grafico) o concertata con il programmatore che ne utilizzerà i singoli elementi ritagliati.
    Dr. Paolo Casoto, Ph.D - 2011
  • 36. Dal wireframe all grafica Dr. Paolo Casoto, Ph.D - 2011
  • 37. Ci siamo dimenticati nulla? Dr. Paolo Casoto, Ph.D - 2011
  • 38. Dr. Paolo Casoto, Ph.D - 2011 http://www.flickr.com/photos/foolswisdom/44619131 Non ci rimane che un bel po’ di programmazione
  • 39. Sviluppare interfacce grafiche su iOS
  • 40. Sviluppare interfacce grafiche su iOS
    • Le migliori applicazioni sono quelle che rispettano i principi di usabilità della piattaforma !!!
      • L’utente è già abituato ad interagire con il dispositivo in un determinato modo
        • e.g.: pinch per zoomare all’interno di una mappa, una immagine o una pagina web
      • Le componenti grafiche rese disponibili dalla piattaforma sono state studiate da esperti nel corso degli anni e sono state scelte per la loro efficacia.
    Dr. Paolo Casoto, Ph.D - 2011
  • 41. Sviluppare interfacce grafiche su iOS
    • Una applicazione iOS di successo ripropone, generalmente, lo stile che rende unica la piattaforma.
      • Colori, riflessioni ed ombreggiature, dimensioni delle componenti e loro utilizzo.
      • Deviare dallo stile standard è rischioso:
        • L’applicazione può risultare difficilmente utilizzabile dall’utente
        • L’applicazione può apparire fuori luogo, quasi brutta
          • Il consiglio: siate più aderenti possibile allo standard nella scelta di font e colori !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 42. Sviluppare interfacce grafiche su iOS
    • Prima di iniziare a definire l’aspetto grafico di una app è necessario avere ben chiaro, su carta e nella propria testa alcuni punti:
      • Cosa l’utente può fare mediante l’ app ?
      • Come l’utente deve interagire con l’ app al fine di utilizzarla ?
      • L’interazione proposta è analoga ad altri esempi o paradigmi che l’utente potrebbe aver già sperimentato ?
        • E.g.: strutturare la propria app in modo similare rispetto ai principali programmi della piattaforma (Mail, Contatti, Phone)
    Dr. Paolo Casoto, Ph.D - 2011
  • 43. Sviluppare interfacce grafiche su iOS
    • I dispositivi iOS dispongono di molteplici tecnologie: gli utenti si aspettano che voi facciate uso di tali tecnologie nelle vostre app!!!
      • Usate tutto ciò che la piattaforma vi mette a disposizione (e.g.: GPS, wi-fi, bussola, et al.) … ma senza esagerare
        • Ad esempio il GPS richiede un significativo consumo di batteria, se non serve è opportuno lasciarlo inutilizzato per non fare brutte sorprese all’utente.
    • Gli utenti iOS sono utenti per tradizione raffinati ed attenti al design ed alla innovazione…non deludeteli!!!
    • Vedremo nel corso del corso come una buona grafica personalizzata possa rendere del tutto unica l’esperienza di utilizzo di una app.
    Dr. Paolo Casoto, Ph.D - 2011
  • 44. L’importanza del design su iPad Dr. Paolo Casoto, Ph.D - 2011
  • 45. Principi di interazione uomo macchina : integrità
    • L’integrità di una applicazione è la misura di come le componenti grafiche che la costituiscono sono integrate con le sue funzionalità.
      • Applicazioni professionali con un design serio e minimale, che consenta all’utente di focalizzarsi sulle funzionalità della app
    • Mantenere una integrità estetica che caratterizzi le specifiche funzionalità ed il target della app e che non allontani l’utente dall’obiettivo principale per il quale utilizza la app (e.g.: gioco, lavoro, et al.)
    Dr. Paolo Casoto, Ph.D - 2011
  • 46. Principi di interazione uomo macchina : consistenza
    • Una applicazione è consistente se ripropone i paradigmi noti derivanti da una precedente esperienza dell’utente
      • Non è una copia!!! E’ un modo comune di effettuare le medesime operazioni e, conseguentemente, già familiare per l’utente.
    • Utilizzare le componenti e le funzionalità fornite dal sistema in maniera corretta
    • Utilizzare stili, testi, icone e modalità di interazioni omogenei all’interno della app
    • Utilizzare stili congruenti anche fra differenti versioni della app stessa, al fine di non generare smarrimento negli utenti
      • E.g.: Windows Vista
    Dr. Paolo Casoto, Ph.D - 2011
  • 47. Principi di interazione uomo macchina : manipolazione diretta
    • La manipolazione diretta rappresenta la forma più naturale di interazione con il dispositivo
      • L’utente si attende che le app rispondano per quanto possibile a tale paradigma, secondo un principio, anche in questo caso, di consistenza
      • La manipolazione diretta comporta immediatezza nella risposta da parte della app
        • Muovo il cursore del volume e percepisco una modifica immediata.
    Dr. Paolo Casoto, Ph.D - 2011
  • 48. Principi di interazione uomo macchina : feedback
    • E’ importantissimo fornire all’utente riscontro (feedback) sulle azioni svolte e sullo stato dell’applicativo
      • E.g.: animazione del pulsante o dell’elemento della lista selezionato
      • Visualizzazioni di messaggi di conferma delle attività più complesse
      • Visualizzazione di barre di scorrimento per le attività più lunghe, che potrebbero rendere momentaneamente inutilizzabile la app.
      • Animazioni e suoni possono dare una mano nel fornire feedback all’utente.
        • Ricordate però che il volume potrebbe essere spento !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 49. Principi di interazione uomo macchina : metafore
    • Una metafora, nell’ambito della interazione uomo macchina, è un modo per associare ad azioni ed oggetti reali azioni ed oggetti virtuali
      • E.g.: cartelle e file, volume ed equalizzatore
    • Rispetto al mondo reale le metafore non impongono limiti fisici agli oggetti virtuali
      • E.g.: nel mondo reale le cartelle hanno una definizione infinita, sul vostro computer no !!!
      • Immaginate di far stare un insieme enorme di informazioni in un faldone di cartone…
    Dr. Paolo Casoto, Ph.D - 2011
  • 50. Principi di interazione uomo macchina : metafore
    • La manipolazione diretta e la ricchezza dei dettagli grafici consentono di riprodurre con semplicità molteplici metafore tipiche del mondo reale:
      • Sfogliare un album di foto;
      • Accendere e spegnere un interruttore;
      • Scorrere un selettore rotante per impostare un parametro;
      • Utilizzare un telecomando o un autoradio.
    Dr. Paolo Casoto, Ph.D - 2011
  • 51. Principi di interazione uomo macchina : controllo utente
    • E’ l’utente che determina il comportamento della app
      • Evitare quanto più possibile di sostituirsi al comportamento dell’utente, anche nel caso di processi e compiti complessi
      • Utilizzare modalità di interazione con le quali l’utente è familiare  di nuovo il concetto di consistenza.
    • Dare all’utente tutti gli strumenti necessari per decidere autonomamente il comportamento della app
      • E.g.: pannelli di conferma, avviso, errore.
    Dr. Paolo Casoto, Ph.D - 2011
  • 52. Progettare per il dispositivo
    • I controlli devono invitare l’utente al tocco: tutte le componenti interattive devono essere caratterizzate da gradienti, forme ed ombreggiature che richiamino il tocco.
    • La navigazione delle schermate deve essere semplice ed intuitiva
      • Due modalità di navigazione: barra di navigazione (navigazione gerarchica) e barra di tabulazione (navigazione in parallelo per funzionalità)
    Dr. Paolo Casoto, Ph.D - 2011
  • 53. Progettare per il dispositivo
    • Fornire un feedback fluido e chiaro
      • Animazioni, barre di progressione, popup con messaggi di conferma e notifica
      • Utilizzare i badge: indicatori numerici che possono essere utilizzati per arricchire una icona
    • Valorizzare mediante le componenti fornite da iOS le caratteristiche (dimensione, risoluzione) di ciascuna tipologia di device
      • Alcune scelte ottimali su iPhone si rivelano non efficaci su iPad e viceversa.
    Dr. Paolo Casoto, Ph.D - 2011
  • 54. Progettare per il dispositivo
    • Adattare la componente grafica al dispositivo non solo in termini della risoluzione delle immagini
      • Gli utenti di iPad si aspettano una app più ricca graficamente di un utente iPhone, poiché più spazio sul dispositivo può essere delegato ad un uso “frivolo”
    • Indipendentemente dal dispositivo utilizzato l’applicazione deve fornire all’utente una descrizione chiara ed evidente delle funzionalità principali e degli obiettivi.
    Dr. Paolo Casoto, Ph.D - 2011
  • 55. Zone di comfort
    • Vi sono zone dello schermo più evidenti per l’utente rispetto ad altre.
    • Sfruttate al meglio tali zone per collocarvi i controlli più importanti per la vostra app ed il feedback e le informazioni più critici.
    Dr. Paolo Casoto, Ph.D - 2011
  • 56. Adattare informazioni e funzionalità al dispositivo Dr. Paolo Casoto, Ph.D - 2011 Diversificare le informazioni ed il modo di fruirne
  • 57. Adattare informazioni e funzionalità al dispositivo Dr. Paolo Casoto, Ph.D - 2011 + spazio = +contenuti, + dettaglio e + funzionalità
  • 58. App vs Web: progettazione
    • Un sito web è caratterizzato, generalmente, da una ampia mole di informazioni
      • L’utente deve navigare più livelli per raggiungere le informazioni di interesse.
      • Nella app l’utente, invece, vuole accedere in maniera diretta alle informazioni, senza il carico cognitivo legato alla attività di ricerca delle stesse.
      • Rendere il contenuto informativo fruibile immediatamente.
    • Pôc ma bon in friulano !!!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 59. App vs Web: progettazione
    • Il Web è uno strumento in molti casi passivo: richiedo informazioni e le ottengo da un server
      • Vi ricordate le prime lezioni di reti ???? 
      • Nella app l’utente è portato a fare !!!
        • Paradigma della manipolazione diretta
        • Touch Screen
    • Progettare per il touch: il web è pensato per un utilizzo basato sul mouse. Qui dovrete rivoluzionare il modo di pensare !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 60. App vs Web: progettazione
    • Paginazione: nel Web le informazioni sono raccolte in pagine, il cui ordine determina l'importanza delle informazioni stesse
      • Gli utenti generalmente osservano le prime due pagine dei risultati di Google
        • Importanza di essere in prima pagina  Search Engine Optimization (SEO).
      • Su iOS l’utente è abituato, invece, ad un paradigma differente, quello dello scrolling. Scorro una lista potenzialmente infinita di contenuti…che sito vi ricorda ???
        • Facebook naturalmente !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 61. Quanto personalizzare la propria app ? Dr. Paolo Casoto, Ph.D - 2011 Discutiamo dei due esempi insieme
  • 62. Quanto personalizzare la propria app ?
    • Quando vi è una ragione oggettiva
      • Una UI personalizzata consente una più efficace interazione da parte dell’utente
    • Quanto più possibile senza caricare troppo le risorse cognitive dell’utente
      • Evitare che l’utente distolga la sua attenzione dall’obbiettivo finale (e.g.: fare una telefonata) per capire come funziona l’interfaccia che sta utilizzando.
      • Non forzare gli utenti ad apprendere cose nuove ove non necessario. Loro utilizzano la vostra app per un fine !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 63. Quanto personalizzare la propria app ?
    • Senza distogliere l’attenzione dal contenuto della app
      • In una app per visualizzare i video, non è importante la bellezza del tasto play, quanto piuttosto che il tasto scompaia automaticamente lasciando il video a pieno schermo.
    • In generale pensateci bene due volte prima di spaziare con la fantasia
      • Se avete un dubbio su una componente scelta, non esitate ad avviare una sperimentazione con gli utenti, saranno il miglior banco di prova possibile.
    Dr. Paolo Casoto, Ph.D - 2011
  • 64. Caratteristiche della piattaforma - Schermo
    • Lo schermo è l’elemento fondamentale di tutti i sistemi basati sulla piattaforma iOS.
      • Lo schermo è al tempo stesso dispositivo di visualizzazione e strumento di input
        • Schermo multitouch con possibilità di tastiera virtuale  … cercheremo di capire di cosa si tratta
      • Lo schermo varia in risoluzione (numero di pixel visualizzati) a seconda del dispositivo e dell’orientamento verticale o orizzontale
    Dr. Paolo Casoto, Ph.D - 2011
  • 65. Caratteristiche della piattaforma - Schermo Dr. Paolo Casoto, Ph.D - 2011 Anche iPad 2
  • 66. Caratteristiche della piattaforma - Schermo
    • Quando definiamo una app per iPhone o iPad dobbiamo prendere in considerazione le differenti risoluzioni dei dispositivi
      • Una grafica a risoluzione elevata risulta pesante da caricare per un dispositivo più arretrato (e.g.: iPhone 3G)
      • Una grafica a risoluzione troppo ridotta risulta sgranata su un iPhone 4G
      • In generale è buona norma sviluppare, su iPhone, due diversi insieme di elementi grafici, di dimensione (x,y) per iPhone/iPod e (2x,2y) per iPhone 4G
    Dr. Paolo Casoto, Ph.D - 2011
  • 67. Caratteristiche della piattaforma - Schermo
    • Nel caso in cui l’iPhone 4G non disponga di un elemento grafico (e.g.: una icona) ad alta risoluzione utilizza il rispettivo elemento a bassa risoluzione
      • Per visualizzare 1 px dell’immagine utilizzo 4px del dispositivo
      • Tuttavia, essendo doppia la risoluzione  il risultato risulta sgranato e fuori fuoco
      • Per gestire la doppia risoluzione delle immagini iOS dispone di un meccanismo molto furbo
        • L’immagine pippo.png è a risoluzione normale, l’immagine pippo@2x.png è a risoluzione elevata
    Dr. Paolo Casoto, Ph.D - 2011
  • 68. Caratteristiche della piattaforma - Schermo
    • Per questi motivi su iOS non si parla mai di pixel ma di punti.
      • Un punto può corrispondere rispettivamente , a seconda del dispositivo, ad 1o 4 pixel
      • In questo modo è possibile astratte logicamente dalla dimensione reale e semplificare la vita di noi programmatori e di voi grafici
    • In generale vige la regola che tutto quello che deve essere utilizzabile dall’utente non sia più piccolo di 44 punti!!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 69. Esempio 1 Dr. Paolo Casoto, Ph.D - 2011
  • 70. Esempio 2 Dr. Paolo Casoto, Ph.D - 2011
  • 71. Caratteristiche della piattaforma - Orientamento
    • La piattaforma iOS può operare in diversi orientamenti, a seconda del modo in cui il dispositivo è orientato.
      • Portrait (ritratto): dispositivo in verticale
      • Landscape (paesaggio): dispositivo in orizzontale
    • Su iPhone / iPod le schermate di default sono sempre in modalità portrait.
      • Alcuni giochi utilizzano la modalità landscape, in generale non utilizzata dalle app.
    • Su iPad tutte le modalità sono solitamente utilizzate.
    Dr. Paolo Casoto, Ph.D - 2011
  • 72. Caratteristiche della piattaforma - Touch
    • Le applicazioni iOS rispondono ad un movimento (gesture), non al clic !!!
    • L’utente è fortemente agevolato da questo tipo di interazione
      • Manipolazione diretta degli oggetti sullo schermo  la modalità di interazione più naturale possibile per l’uomo
      • Immaginate la differenza fra maneggiare un oggetto e dover utilizzare un mouse. (Verificatelo con i vostri genitori o nonni).
    Dr. Paolo Casoto, Ph.D - 2011
  • 73. Caratteristiche della piattaforma - Touch
    • iOS introduce per la prima volta il paradigma Multitouch: più dita contemporaneamente sono utilizzate per comporre movimenti complessi:
      • TAP: simile al clic classico del mouse, singolo o doppio (DOUBLE TAP);
      • DRAG: trascinamento di un oggetto;
      • SWIPE: sposta fra due schermate in orizzontale;
      • FLICK: scorre verticalmente all’interno di una schermata (e.g.: lista di oggetti o testo lungo)
    Dr. Paolo Casoto, Ph.D - 2011
  • 74. Caratteristiche della piattaforma - Touch
      • PINCH: movimento di due dita lungo una diagonale, utilizzato per aumentare o ridurre lo zoom.
      • TOUCH and HOLD: tocco prolungato di una area dello schermo.
        • Quando tenete premuto una area di testo ed appare la lente di ingrandimento.
      • SHAKE: movimento dell’intero dispositivo, utilizzato generalmente con funzione di reset/annulla.
    Dr. Paolo Casoto, Ph.D - 2011
  • 75. Caratteristiche della piattaforma - Multitasking
    • Il paradigma iOS prevede che un utente possa utilizzare una sola app alla volta.
      • all’opposto del modello a finestre di Windows / Mac OS X comune in ambiente desktop.
    • Tuttavia un utente può necessitare di più applicazioni attive, fra le quali muoversi con semplicità ed in tempi ridotti.
    • Fino alla versione 3.x di iOS una applicazione può essere aperta o chiusa.
    Dr. Paolo Casoto, Ph.D - 2011
  • 76. Caratteristiche della piattaforma - Multitasking
    • Da iOS 4.x (tranne su iPod Touch ed iPhone 3G per motivi legati alle performance) una app può anche essere sospesa in background.
      • La app non è spenta ma non è visibile all’utente
      • La app può ancora svolgere alcune attività, anche se non visibile
    • Quando l’utente seleziona nuovamente una app in background, essa ritorna visibile senza essere riavviata
    Dr. Paolo Casoto, Ph.D - 2011
  • 77. Caratteristiche della piattaforma - Multitasking
    • Vantaggi:
      • Possibilità di definire app che svolgono specifiche funzioni (e.g.: monitoraggio della posizione GPS, analisi delle news disponibili all’interno di un sito web) anche se non visibile dall’utente
      • Passaggio rapido da una app all’altra
    • Svantaggi:
      • Consumo di memoria
      • Proliferare di app attive.
    Dr. Paolo Casoto, Ph.D - 2011
  • 78. Caratteristiche della piattaforma – Impostazioni
    • E’ buona norma che le app che utilizzano impostazioni utente per il loro funzionamento (e.g.: username, password) ne consentano la modifica dal menù generale delle impostazioni.
    • Gli utenti dispongono in tal modo di un pannello comune per la gestione delle impostazioni di tutte le applicazioni installate sul dispositivo.
    • Dipende dalle necessità della vostra app. Potrebbe non essere necessario
    Dr. Paolo Casoto, Ph.D - 2011
  • 79. Caratteristiche della piattaforma – Browser
    • La piattaforma iOS dispone di un proprio browser, Safari, leggermente differente dalla controparte desktop:
      • L’area visualizzata non può essere ridimensionata, solo con la rotazione del dispositivo;
      • Molte pagine richiedono, per una agevole lettura, l’utilizzo dello zoom avanti ed indietro (meno su iPad)
      • Supporta i cookies
      • Non supporta Java (Applet), Flash ed altre tecnologie web di terze parti (e.g.: Silverlight, Shockwave, Flex, et al.)
    Dr. Paolo Casoto, Ph.D - 2011
  • 80. Caratteristiche della piattaforma – Browser
    • Supporta HTML5, CSS3, Javascript, animazioni e transizioni dei contenuti in fase di visualizzazione
    • Safari può essere integrato all’interno di app, per la fruizione di contenuti web, mediante la componente UIWebView
    • Non abusate del Web browser integrato all’interno delle app!!! La app non è una versione ottimizzata di un sito web, ma deve offrire qualcosa di originale all’utente
    Dr. Paolo Casoto, Ph.D - 2011
  • 81. Caratteristiche della piattaforma – Browser
    • I primi tempi Apple consentiva la realizzazione di app che fungessero da repliche del sito web aziendale
    • Ad oggi tale tipologia di applicazioni è fortemente sconsigliata  Esiste una soluzione alternativa, costituita dai siti web ottimizzati per iOS
    • In generale una app deve fornire all’utente finale un valore aggiunto, un insieme di funzionalità che il telefono ed i suoi strumenti inclusi (browser, mail, et al.) non sono in grado di fornire.
    Dr. Paolo Casoto, Ph.D - 2011
  • 82. Caratteristiche della piattaforma – Stampa
    • Da iOS 4.2 è possibile stampare via wireless il contenuto della propria app
      • Sui dispositivi con supporto al multitasking
    • iOS si occupa della ricerca della stampante e della procedura di stampa
      • Purtroppo solo su pochissimi modelli di stampante supportate
    • Le app possono fornire veri e propri layout professionali di stampa
      • Ben oltre la semplice stampa di ciò che vediamo a video
    Dr. Paolo Casoto, Ph.D - 2011
  • 83. Caratteristiche della piattaforma – Stampa Dr. Paolo Casoto, Ph.D - 2011
  • 84. Caratteristiche della piattaforma – Stampa
    • Da utilizzare solo nelle sezioni della applicazione dove può aver senso per gli utenti, è una funzionalità complessa dal punto di vista tecnico e cognitivo
      • E.g.: la stampa di un ordine da una app destinata ad agenti e commerciali
      • E.g.: la stampa della lista della spesa da una app per la gestione del carrello della spesa.
    • Utilizzare gli elementi standard offerti da iOS e solo nel caso in cui sia possibile stampare
    Dr. Paolo Casoto, Ph.D - 2011
  • 85. Caratteristiche della piattaforma – iAd
    • Consente di integrare all’interno della propria applicazione un banner pubblicitario di diverse tipologie
      • Consente allo sviluppatore della app di guadagnare pochi centesimi di euro per ciascun utente che visualizza o clicca sul banner (da 5 a 30 eurocent).
    • L’idea non è originale, già Google aveva lanciato una tecnologia simile per iOS: AdMob
    • La peculiarità geniale di iAd è la possibilità di filtrare la tipologia di spot in accordo con la posizione GPS dell’utente
    Dr. Paolo Casoto, Ph.D - 2011
  • 86. Caratteristiche della piattaforma – iAd
      • E.g. : sono in prossimità del centro di Udine e sto utilizzando l’applicazione di una nota marca di vestiti –> iAd mi consiglia lo spot di un negozio del centro.
        • In realtà è utopico…non ci sono ancora sufficienti inserzionisti in zona per realizzare questo genere di spot personalizzati.
      • Al clic dell’utente il banner consente una serie di attività:
        • Visualizzare un video, attivare una pagina web, visualizzare uno specifico contenuto.
        • Un utilizzo tipico è la promozione di altre app, a pagamento.
    Dr. Paolo Casoto, Ph.D - 2011
  • 87. Caratteristiche della piattaforma – iAd
    • Due tipologie di banner:
      • Banner standard: occupa una regione minima dello schermo e può essere collocato nelle diverse regioni dello schermo sulla base delle esigenze del programmatore.
        • Avete provato su Angry Birds, dove potrebbe essere il banner?
          • Sulla traiettoria di tiro, così si generano molti clic, per sbaglio, e conseguentemente molti guadagni…furbi eh.
      • Banner a schermo intero: utilizzabile solo su iPad, visualizza uno spot a schermo intero
    Dr. Paolo Casoto, Ph.D - 2011
  • 88. Caratteristiche della piattaforma – iAd
    • In generale è buona norma posizionare lo spot sulla parte inferiore dello schermo per non risultare invasivo per l’utente…
      • A meno che il vostro obiettivo non sia guadagnare il più possibile…
    • Non posizionate i banner all’interno di schermate transitorie
      • E’ importante che l’utente non percepisca il banner come un qualcosa di invasivo
        • Creerebbe la stessa repulsione che abbiamo per la pubblicità
    Dr. Paolo Casoto, Ph.D - 2011
  • 89. Caratteristiche della piattaforma – QuickLook
    • Una delle caratteristiche della piattaforma MacOSX riproposte, per semplicità ed efficacia, su iOS
      • Possibilità di aprire un documento all’interno di una app anche se la app non è in grado di gestire lo specifico formato
        • E.g.: aprire nella vostra app un documento Word
      • Utilizza le altre app installate sul telefono, capaci di interagire con un determinato formato di file, per svolgere l’attività
        • Vedremo il concetto di Intenzione quando parleremo di Android il prossimo anno con Luca
    Dr. Paolo Casoto, Ph.D - 2011
  • 90. Caratteristiche della piattaforma – Suoni
    • iPhone ed iPad nascono dall’esperienza di iPod Touch, un dispositivo nato proprio per consentire agli utenti di portare sempre con se la propria musica.
      • I suoni possono divenire un elemento fondamentale della vostra app
        • E.g.: fornire feedback
        • E.g.: fornire funzionalità (E.g.: all’interno della app dedicata alla corsa attivo l’iPod per ascoltare correndo le mie canzoni preferite)
    • Attenzione: il suono del dispositivo può essere spento !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 91. Caratteristiche della piattaforma – Suoni
    • I dispositivi iOS sono caratterizzati (come i dispositivi Android) da due tipologie di volume:
      • Volume della suoneria e degli avvisi
        • e.g. chiamate in arrivo, messaggi ed email in arrivo, notifiche push
      • Volume delle applicazioni
    • Il primo si regola con il pulsante silenzioso, il secondo con i due pulsanti del volume
    • Situazione analoga su tutti i dispositivi iOS
    Dr. Paolo Casoto, Ph.D - 2011
  • 92. Caratteristiche della piattaforma – Suoni
    • Quando si opera con i suoni è necessario considerare anche la possibilità per l’utente di utilizzare strumenti esterni
      • Cuffie: come deve comportarsi la mia app quando l’utente scollega le cuffie dal dispositivo?
        • In generale è buona norma sospendere i suoni quando l’utente scollega le cuffie, per evitare di disturbare gli altri utenti.
        • Comportamento di default del player audio di iOS
    • Non togliete all’utente il controllo finale sul volume della vostra app
      • Ricordate: controllo utente !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 93. Caratteristiche della piattaforma – Suoni
    • Quale ruolo assumono i suoni nella vostra app:
      • Supporto al feedback utente (pressione di pulsanti, messaggi di errore, et al.)  iOS rende disponibile uno strumento di gestione dei suoni semplice ed efficace, il System Sound Service.
      • Ruolo fondamentale all’interno della app (colonna sonora di un videogioco, app per la manipolazione di file musicali, et al.)  iOS rende disponibile uno strumento più avanzato, l’ Audio Session Service.
    Dr. Paolo Casoto, Ph.D - 2011
  • 94. Caratteristiche della piattaforma – Suoni
    • Il servizio l’ Audio Session Service consente di definire lo scenario dell ’ esperienza audio offerta all ’ utente
    Dr. Paolo Casoto, Ph.D - 2011
  • 95. Caratteristiche della piattaforma – Suoni Dr. Paolo Casoto, Ph.D - 2011
  • 96. Caratteristiche della piattaforma – Suoni
    • Alcuni esempi di utilizzo degli scenari predefiniti dal sistema:
      • Applicazione per imparare l’inglese, dove l’utente ascolta un file audio.  Playback
      • Applicazione per parlare via VoIP (stile Skype)  Play and Record
      • Navigatore satellitare che vi invia le indicazioni sul percorso in tempo reale  Playback
      • Gioco  Ambient o Solo Ambient
    Dr. Paolo Casoto, Ph.D - 2011
  • 97. Caratteristiche della piattaforma – Suoni
    • Ricordatevi quando lavorate con i suoni che le app possono essere interrotte in qualsiasi momento
      • E.g.: arriva una telefonata, arriva un SMS
    • E’ necessario capire come gestire l’interruzione e la ripresa di un suono quando l’utente lascia, interrompe o riapre l’app.
      • E.g.: suona il telefono mentre ascolto un MP3. Alla chiusura della telefonata come mi comporto ? Riattivo la riproduzione del file dal punto in cui è stato interrotto?
    Dr. Paolo Casoto, Ph.D - 2011
  • 98. Caratteristiche della piattaforma - VoiceOver
    • Tecnologia di text-to-speech per aiutare l’utilizzo di iOS da parte degli utenti con disabilità visive
    • Il sistema opera in automatico con le componenti standard di iOS, proponendo per ciascuna la giusta lettura agli utenti
      • E.g.: il blocco di testo contiene il valore “Pippo”
    • Quando definite le vostre componenti personalizzate VoiceOver non è in grado di fornire il rispettivo supporto agli utenti.
      • Ricordatevelo se volete allargare la vostra base di utenti potenziali
    Dr. Paolo Casoto, Ph.D - 2011
  • 99. Caratteristiche della piattaforma – Menù contestuali
    • Il menù contestuale caratteristico di iOS è quello per la gestione delle aree di testo, con i tasti Seleziona/Copia/Incolla.
    • E’ possibile personalizzare completamente il comportamento del menù contestuale di una app iOS, definendone:
      • Comandi da includere;
      • Area da utilizzare per la visualizzazione;
      • Oggetti che possono causare la visualizzazione del menù e modalità (e.g. doppio tap)
    Dr. Paolo Casoto, Ph.D - 2011
  • 100. Caratteristiche della piattaforma – Menù contestuali
    • Utilizzare i menù contestuali in maniera fortemente dipendente dal contesto:
      • Se qualcosa è selezionato non visualizzare il tasto “Seleziona”
      • Se non ho nessun elemento già copiato negli appunti non visualizzare il tasto “Incolla”
    • Selezionare con cure gli elementi cui agganciare un menù contestuale
      • Un menù contestuale su un pulsante sarebbe inutile
    • Supportare sempre sia il tocco prolungato sia il doppio tap !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 101. Caratteristiche della piattaforma – Menù contestuali
    • Evitare la ridondanza fra i comandi del menù contestuale ed i pulsanti che trovano spazio all’interno della applicazione
      • L’inverso rispetto al modello desktop classico, dove tutto è ridondante più volte
        • Pensate ad Office, dove tutto può essere fatto da icona, ribbon bar, barra dei menù e combinazione di tasti.
    • Non mescolare comandi personalizzati con i comandi classici del sistema
      • Renderebbe l’interazione per l’utente particolarmente anomala.
    Dr. Paolo Casoto, Ph.D - 2011
  • 102. Caratteristiche della piattaforma – Annulla
    • Una delle principali caratteristiche di tutte le applicazioni desktop è la possibilità di annullare le azioni eseguite
      • Il classico ctrl –z su Windows e Command + Z su Mac
    • iOS mette a disposizione degli sviluppatori di app le medesime funzionalità
      • Anche in questo caso non abusatene, fate ricorso a questa funzionalità solo se estremamente necessaria per il corretto funzionamento della vostra app.
        • E.g.: app per scrivere i vostri appunti di viaggio
    Dr. Paolo Casoto, Ph.D - 2011
  • 103. Caratteristiche della piattaforma – Tastiera virtuale
    • iOS mette a disposizione dello sviluppatore un insieme di tastiere virtuali pensate per consentire l’inserimento di diverse tipologie di valori
      • Testo
      • Navigazione Internet
      • Email
      • Numeri di telefono
    • Gli sviluppatori possono a loro volta personalizzare il layout della tastiera per far fronte a specifiche esigenze di input
    Dr. Paolo Casoto, Ph.D - 2011
  • 104. Caratteristiche della piattaforma – Tastiera virtuale Dr. Paolo Casoto, Ph.D - 2011
  • 105. Caratteristiche della piattaforma – Tastiera virtuale Dr. Paolo Casoto, Ph.D - 2011
  • 106. Caratteristiche della piattaforma – Tastiera virtuale Dr. Paolo Casoto, Ph.D - 2011
  • 107. Caratteristiche della piattaforma – Localizzazione
    • Insieme dei servizi che consentono di conoscere la posizione di un utente, la direzione in cui è rivolto il dispositivo e la direzione in cui l’utente si sta eventualmente muovendo
    • La valutazione della posizione utente può essere valutata con maggiore o minore precisione, in accordo con lo specifico strumento utilizzato
      • GPS
      • Wi-Fi
      • Cella telefonica
    Dr. Paolo Casoto, Ph.D - 2011
  • 108. Caratteristiche della piattaforma – Localizzazione
    • GPS: precisione variabile dell’ordine dei 100 - 5 m
      • Richiede un tempo di setup per il corretto aggancio dei segnali di almeno 3 satelliti geostazionari. Può richiedere anche alcune decine di secondi.
      • Richiede un significativo consumo di energia
    • Wi-Fi: consente una precisione dell’ordine di 50 – 1 Km
    • Cella GSM: consente una precisione dell’ordine di 3 Km: non costa nulla, già l’informazione è determinata dallo standard GSM
      • E’ sufficiente per la maggior parte delle applicazioni
    Dr. Paolo Casoto, Ph.D - 2011
  • 109. Caratteristiche della piattaforma – Localizzazione
    • Il sistema determina in automatico lo strumento o l’insieme di strumenti ideali per la determinazione della posizione dell’utente.
      • In accordo con lo stato dei singoli strumenti e con i permessi accordati dall’utente
        • L’utente può aver disabilitato GPS, Wi-Fi o rete GSM (e.g.: modalità aereo) o aver disabilitato il servizio di localizzazione per la specifica applicazione
    • Non violare mai le specifiche volontà dell’utente forzando l’utilizzo del servizio di localizzazione.
    Dr. Paolo Casoto, Ph.D - 2011
  • 110. Caratteristiche della piattaforma – Notifiche
    • Le notifiche locali e remote consentono di inviare informazione all’utente anche nel caso in cui l’applicazione sia in modalità background e non attiva sullo schermo del dispositivo
      • Qualcosa è cambiato
      • Una nuova informazione è disponibile
      • Una attività è stata portata a compimento
    Dr. Paolo Casoto, Ph.D - 2011
  • 111. Caratteristiche della piattaforma – Notifiche
    • Notifiche locali: l’applicazione presente all’interno del dispositivo notifica all’utente l’avvenuto cambiamento di stato
      • Applicazione calendario, applicazione “To-Do List”
    • Notifiche remote: l’applicazione si registra ad un servizio esterno che comunica l’avvenuto cambiamento di stato alla applicazione, anche se in background.
      • Gioco in rete, applicazione per la visualizzazione di news (e.g.: Repubblica Mobile)
    Dr. Paolo Casoto, Ph.D - 2011
  • 112. Caratteristiche della piattaforma – Notifiche
    • E’ possibile visualizzare all’utente le notifiche utilizzando due metafore tipiche della piattaforma iOS ed utilizzate inizialmente dalle app di sistema
      • E.g.: Mail, Safari, SMS
    • Badge: un indicatore numerico sull’icona della applicazione identifica il numero di nuove notifiche relative alla app
            • Il badge può riportare solo valori numerici e può essere utilizzato come metafora anche sulle TabBar che vedremmo in seguito
    Dr. Paolo Casoto, Ph.D - 2011
  • 113. Caratteristiche della piattaforma – Notifiche
    • Alert: l’applicazione può presentare all’utente una notifica mediante un alert similare a quello utilizzato per la notifica del ricevimento di una nuova mail o di un SMS
    • L’ alert è personalizzabile:
      • Nome della applicazione
      • Messaggio della notifica
    • La scelta del messaggio è importantissima: le notifiche sono invasive per l’utente, limitate i messaggi in numero ed il loro contenuto
    Dr. Paolo Casoto, Ph.D - 2011
  • 114. Caratteristiche della piattaforma – Notifiche
    • In generale quando predisponete un alert, anche al di fuori delle notifiche, le seguenti regole devono essere tenute ben in considerazione:
      • Focalizzare l’attenzione sull’informazione e non sulle azioni che l’utente può fare in relazione alla specifica notifica.
      • Utilizzare per quanto possibile frasi complete e corrette nella punteggiatura. Non abbreviare, potrebbe risultare di difficile comprensione per gli utenti.
      • Essere completi ma contenuti al massimo ad 1-2 righe.
    Dr. Paolo Casoto, Ph.D - 2011
  • 115. Caratteristiche della piattaforma – Notifiche
    • Le notifiche possono essere arricchite da un insieme di contenuti opzionali, quali:
      • Immagine di apertura: l’immagine da visualizzare all’utente durante il caricamento della applicazione, in alternativa alla immagine standard di avvio della app.
      • Suono di notifica: i suoni aiutano l’efficacia della comunicazione attirando l’attenzione dell’utente.
        • Attenzione alle criticità che abbiamo già affrontato in termini di suoni, volume et al.
      • Operazioni personalizzate per l’apertura della app che ha generato la notifica.
    Dr. Paolo Casoto, Ph.D - 2011
  • 116. Finestre (UIWindow)
    • La finestra è lo strumento che gestisce la visualizzazione delle varie schermate, dette anche Viste (UIView), sullo schermo del dispositivo per la specifica applicazione.
    • Oltre a gestire la visualizzazione si occupa della raccolta degli eventi (e.g.: gesture, multitouch) e della loro corretta distribuzione alle singole componenti grafice
      • E.g.: indicare che l’evento tap ha coinvolto specificamente il pulsante A
    Dr. Paolo Casoto, Ph.D - 2011
  • 117. Finestre (UIWindow)
    • Caratterizzate da un livello, che indica l’asse z nella visualizzazione
      • Un alert ha un livello superiore rispetto alla finestra standard della applicazione
    • In generale esiste una sola finestra per ciascuna app, all’interno della quale sono inserite le varie viste in accordo con lo specifico comportamento dell’utente
      • Questo dogma non è più vero da quando è stata introdotta la possibilità per l’iPad di controllare un proiettore esterno con la possibilità per una app di avere più finestre anche differenti nei contenuti
    Dr. Paolo Casoto, Ph.D - 2011
  • 118. Finestre (UIWindow) Dr. Paolo Casoto, Ph.D - 2011
  • 119. Le barre
    • Le barre costituiscono uno degli elementi principali per la realizzazione delle app su piattaforma iOS.
    • Ciascuna app ha uno specifico aspetto, modificabile in parte dall’utente, ed una specifica funzionalità.
    • Vi sono 4 tipologie di barre utilizzabili dagli sviluppatori:
      • Barra di stato;
      • Barra di navigazione;
      • Barra degli strumenti (Toolbar);
      • Barra di tabulazione (Tabbar).
    Dr. Paolo Casoto, Ph.D - 2011
  • 120. La barra di stato
    • La barra di stato visualizza alcune informazioni importante sul dispositivo dell’utente e sull’ambiente di utilizzo dello stesso.
      • Ora, tipologia del dispositivo, stato della batteria, stato della connettività, stato della rete wi-fi, trasferimento dati.
    Dr. Paolo Casoto, Ph.D - 2011
  • 121. La barra di stato
    • La barra di stato può essere resa visibile o meno ed occupa sempre la sezione superiore dello schermo, al variare dell’orientamento del dispositivo
    • Su iPhone la barra può assumere più colorazioni, mentre su iPad è sempre di colore nero.
    • La decisione di nascondere o meno la barra di stato è particolarmente complessa.
      • Nascondere la barra implica il privare l’utente di alcune informazioni fondamentali e rende necessaria l’uscita dalla app stessa per la consultazione.
    Dr. Paolo Casoto, Ph.D - 2011
  • 122. La barra di stato
    • Nascondere la barra di stato può aver senso nel caso di un gioco a schermo intero, di uno strumento per la visualizzazione di immagini e video o, più in generale, di contenuti multimediali.
    • La barra di stato ha una funzionalità fondamentale per le applicazioni che fanno uso della connettività alla rete internet: visualizzare l’indicatore di utilizzo della connettività di rete
      • Fondamentale per fornire un feedback opportuno all’utente, in particolare per utenti con un traffico dati limitato o con pagamento a consumo.
    Dr. Paolo Casoto, Ph.D - 2011
  • 123. La barra di navigazione
    • La barra di navigazione rappresenta lo strumento di navigazione all’interno di una gerarchia di schermate, mediante un modello che vedremo nelle prossime slide che prende il nome di UINavigationController.
    • La barra di navigazione appare nel bordo superiore dello schermo appena al di sotto della eventuale barra di stato.
    • La barra riporta, generalmente, il titolo della schermata visualizzata e gli eventuali comandi per la navigazione all’interno della gerarchia.
    Dr. Paolo Casoto, Ph.D - 2011
  • 124. La barra di navigazione Dr. Paolo Casoto, Ph.D - 2011
  • 125. La barra di navigazione Dr. Paolo Casoto, Ph.D - 2011
  • 126. La barra di navigazione
    • La barra di navigazione può ospitare due pulsanti, rispettivamente ai lati destro e sinistro. Tutti i pulsanti collocati all’interno della barra di navigazione assumono lo stile sbordato (BorderedStyle).
    • La barra di navigazione può adattare le proprie dimensioni al variare dell’orientamento del dispositivo.
    • La barra di navigazione può essere modificata in colore e stile ed è possibile utilizzare una immagine in sostituzione della etichetta del titolo
      • Logo dell’azienda
    Dr. Paolo Casoto, Ph.D - 2011
  • 127. La barra di navigazione
    • La barra di navigazione deve utilizzare propriamente l’etichetta del titolo. A ciascuna nuova schermata collocata all’interno dell’ UINavigationController il titolo deve essere opportunamente aggiornato.
    • In caso di più schermate all’interno della pila dell’ UINavigationController la barra di navigazione deve riportare il tasto per la navigazione all ’ indietro, con riferimento al titolo della schermata precedente o, in alternativa, il tasto “ back ” .
    Dr. Paolo Casoto, Ph.D - 2011
  • 128. La barra di navigazione
    • Utilizzare, soprattutto su iPhone, titoli lunghi e di scarsa leggibilità è deleterio.
      • Selezionare opportunamente font e colori per migliorare la leggibilità.
    • La barra di navigazione ha un obiettivo specifico, consentire la navigazione fra la pila delle schermate. Non utilizzate la barra quale contenitore di pulsanti.
      • La barra degli strumenti (Toolbar) è lo strumento ideale per questa tipologia di utilizzo.
    Dr. Paolo Casoto, Ph.D - 2011
  • 129. La barra di navigazione
    • Utilizzare quanto più possibile per il comando a destra i pulsanti standard.
      • Utilizzano icone comuni fra tutte le applicazioni e sono facilmente associabili dagli utenti a specifiche azioni relative al contenuto della schermata.
    • Alterare il meno possibile la visualizzazione del tasto “Back”, per evitare di distrarre l’utente e rendere più efficace l’usabilità dell’applicazione stessa.
    • Utilizzare sempre i colori e gli stili in maniera consistente all’interno della app, utilizzando colori e stili trasparenti ove si voglia convogliare l’attenzione dell’utente sul contenuto collocato al di sotto della barra.
    Dr. Paolo Casoto, Ph.D - 2011
  • 130. La barra di navigazione
    • Ricordate che la barra di navigazione può apparire diversamente al variare dell’orientamento. Se la riempite di icone o contenuti aggiuntivi potrebbe risultare illeggibile in un orientamento di tipo portrait.
    Dr. Paolo Casoto, Ph.D - 2011
  • 131. La barra degli strumenti
    • La barra degli strumenti è finalizzata alla visualizzazione delle funzioni che possono essere applicate al contenuto della schermata.
    • La barra degli strumenti appare sempre nella sezione inferiore dello schermo su iPhone, mentre su iPad può essere collocata anche nel bordo superiore dello schermo, al di sotto dell’eventuale barra di stato.
    Dr. Paolo Casoto, Ph.D - 2011
  • 132. La barra degli strumenti
    • Le icone o i pulsanti che compongono la barra degli strumenti sono equamente spaziati gli uni dagli altri.
    • Anche nel caso della barra degli strumenti l’orientamento può influire su dimensioni e spaziatura degli oggetti.
    • Fornire agli utenti le principali funzionalità contestualmente alla schermata visualizzata. Rendere più efficace l’interazione fra l’utente e la applicazione.
    • Anche nel caso della barra degli strumenti cercare di utilizzare quanto più possibile i pulsanti di default del sistema.
    Dr. Paolo Casoto, Ph.D - 2011
  • 133. La barra degli strumenti
    • Come per le altre tipologie di barra, anche nel caso della barra degli strumenti è fondamentale mantenere una consistenza in termini di:
      • Stili e colori della barra;
      • Stili, colori, utilizzo delle icone e bordo dei pulsanti
        • Non utilizzare pulsanti con bordi differenti o con alternanza di icone e testi.
      • Spaziature fra i pulsanti, in particolare al variare dell’orientamento della applicazione.
    Dr. Paolo Casoto, Ph.D - 2011
  • 134. La barra di tabulazione (TabBar)
    • Consente di fornire all’utente l’abilità di variare la tipologia, la modalità o il compito visualizzate dalla schermata attuale.
    • La barra di tabulazione è collocata sempre nell’area inferiore dello schermo e di colore nero.
      • Le icone ed i testi che appaiono all’interno della barra di tabulazione sono automaticamente ridimensionate al fine di assumere le medesime dimensioni.
    • Quando una icona è selezionata, essa appare automaticamente illuminata su sfondo più chiaro rispetto alla barra.
    Dr. Paolo Casoto, Ph.D - 2011
  • 135. La barra di tabulazione (TabBar) Dr. Paolo Casoto, Ph.D - 2011
  • 136. La barra di tabulazione (TabBar) Dr. Paolo Casoto, Ph.D - 2011
  • 137. La barra di tabulazione (TabBar)
    • Sull’iPhone una barra di tabulazione può includere al massimo 5 icone.
      • In presenza di più di 5 icone, il sistema automaticamente gestisce e icone in eccesso mediante una specifica schermata di personalizzazione.
    • Sull’iPad la barra non presenta limitazioni al limite di icone che possono apparire.
    • Ciascuna icona può essere ulteriormente arricchita da un badge per la segnalazione di eventuali informazioni numeriche
    Dr. Paolo Casoto, Ph.D - 2011
  • 138. La barra di tabulazione (TabBar)
    • La barra di tabulazione non serve a presentare all’utente le funzionalità da applicare al contesto attuale.
      • Quale barra utilizzereste per questa finalità?
    • La barra ha lo scopo preciso di consentire il cambio di contesto. La selezione di un elemento della barra deve richiamare nell’utente una variazione del contesto.
    • In generale va bene utilizzare la barra di tabulazione per fornire tutti i possibili contesti a livello di applicazione
    Dr. Paolo Casoto, Ph.D - 2011
  • 139. La barra di tabulazione (TabBar)
    • I badge hanno lo scopo preciso di convogliare l’informazione sulla presenza di nuove informazioni in contesti differenti.
    • Attenzione a non inserire, nel caso di iPad, troppi elementi all’interno della barra e, in particolare, di non superare lo spazio disponibile lasciando apparire il pulsante “more”.
      • In generale la legge empirica è di 7 elementi in portrait e massimo 9 nel caso di app che operino solo in landscape.
    Dr. Paolo Casoto, Ph.D - 2011
  • 140. Popover (solo iPad)
    • Il Popover è una vista che appare solo nel momento in cui l’utente seleziona un elemento collocato nella mia vista principale.
    • E’ gestita da uno specifico controller, l’ UIPopoverController
    • Si posiziona al di sopra del contenuto dello schermo e mantiene un costante riferimento, mediante una freccia, all’elemento che ne ha scatenato l’apertura.
    Dr. Paolo Casoto, Ph.D - 2011
  • 141. Popover (solo iPad) Dr. Paolo Casoto, Ph.D - 2011
  • 142. Popover (solo iPad)
    • Un Popover può contenere al suo interno una qualsiasi altra tipologia di vista
      • E’ possibile definire le dimensioni occupate dal popover in accordo con le dimensioni dell’oggetto in esso contenuto.
    • Generalmente su iPad tutti gli ActionSheet (schermate di selezione delle azioni) appaiono come un Popover rispetto alla finestra principale.
    Dr. Paolo Casoto, Ph.D - 2011
  • 143. Popover (solo iPad)
    • Fornire informazioni accessorie rispetto a quelle visualizzate.
    • Fornire una lista di oggetti collegati all’oggetto selezionato.
      • E.g.: lista delle foto presenti all’interno di una app per la visualizzazione di immagini in sequenza.
    • Mostrare il contenuto del pannello di sinistra di una SplitView (vedremo subito di cosa si tratta) in caso di visualizzazione con orientamento verticale.
    • Mostrare una lista di azioni collegate con quanto visualizzato sullo schermo.
    Dr. Paolo Casoto, Ph.D - 2011
  • 144. Popover (solo iPad)
    • Evitare di fornire agli utenti un pulsante esplicito di chiusura di un Popover.
      • Il Popover deve chiudersi automaticamente quando l’utente ha completato la sua attività, ad esempio selezionando un elemento da una lista o una azione.
      • Generalmente il Popover deve chiudersi automaticamente quando l’utente esegue un tap al di fuori dei bordi stessi del Popover.
    • Il Popover interrompe il flusso cognitivo dell’utente. Ricordatevi di salvare il lavoro in corso.
    Dr. Paolo Casoto, Ph.D - 2011
  • 145. Popover (solo iPad)
    • Ricordatevi di assegnare sempre il Popover allo specifico componente della interfaccia che ne ha scatenato la visualizzazione.
    • Posizionate con cura i Popover, che non possono essere spostati, all’interno della vostra interfaccia in modo che l’utente possa, se necessario, continuare a visualizzare le informazioni significative della vista principale.
    • Non mostrare in contemporanea più di un Popover e non utilizzare mai i Popover in modalità modale (stile alert) !!!
    Dr. Paolo Casoto, Ph.D - 2011
  • 146. Popover (solo iPad)
    • Attenzioni alle dimensioni del Popover, in generale mantenete come riferimento una dimensione variabile fra i 320 ed i 600 punti.
    • Attenzione inoltre anche agli aspetti estetici quando utilizzate un Popover, poiché la vista contenuta all’interno del Popover apparirà al di sopra della vostra vista principale.
    • E’ possibile animare la dimensione del Popover una volta visualizzato. E’ molto utile nel caso in cui so voglia offrire all’utente una informazione contestuale o estesa senza richiedere l’apertura di ulteriori Popover.
    Dr. Paolo Casoto, Ph.D - 2011
  • 147. Split View (solo iPad)
    • Vista a tutto scherma che fa uso di due viste poste una accanto all’altra.
    • Gestita dal controller UISplitViewController
    • Il pannello di destra, di dimensione fissata a 320 pixel (qui utilizzo pixel poiché l’iPad ha una sola risoluzione) prende il nome di pannello MASTER
    • Il pannello di sinistra prende il nome di pannello DETAIL
    Dr. Paolo Casoto, Ph.D - 2011
  • 148. Split View (solo iPad) Dr. Paolo Casoto, Ph.D - 2011
  • 149. Split View (solo iPad)
    • I pannelli che costituiscono una Split View possono, a loro volta, includere un qualsiasi tipo di vista disponibile
      • E.g.: a sinistra la lista delle ricette, a destra il dettaglio della ricetta selezionata con visualizzazione del video della realizzazione.
    • Quando si porta in visualizzazione verticale la Split View diviene una vista standard, con il pannello di sinistra che diviene un Popover a scomparsa
    Dr. Paolo Casoto, Ph.D - 2011
  • 150. Split View (solo iPad)
    • Sebbene il pattern da adottare nell’utilizzo delle Split View sia quello della lista/dettaglio, è possibile utilizzare le due viste nella modalità che è più utile per la propria app
    • Attenzione però nell’utilizzo, all’interno dei singoli pannelli, della navigazione gerarchica (con le barre di navigazione)
      • Limitare la navigabilità ad uno solo dei due pannelli
      • Il rischio che si corre è di dare all’utente la possibilità di “perdersi” fra le schermate della applicazione.
    Dr. Paolo Casoto, Ph.D - 2011