APP E Cloud computing - DiUniTogoy/materiale/1718/VerneroGrillo1718.pdf · 2018-05-17 ·...
Transcript of APP E Cloud computing - DiUniTogoy/materiale/1718/VerneroGrillo1718.pdf · 2018-05-17 ·...
PROGETTARE APP MOBILE PER GLI UTENTI NELLE NUVOLE: UX DESIGN E ARCHITETTURE CLOUD
16 maggio 2018 - Pierluigi Grillo, Fabiana Vernero
MOBILE APP DESIGN
COSA SONO LE APP? - 1
➤ Le app sono piccoli
programmi, generalmente
focalizzati su un obiettivo
specifico, che si possono
installare sui dispositivi
mobili, accanto alle app “di
sistema”.
➤ I fattori che hanno favorito il proliferare delle app sono:
➤ Touchscreen
➤ App store orientato al consumatore
3
COSA SONO I DISPOSITIVI MOBILI?
➤ I dispositivi mobili si distinguono per:
➤ Caratteristiche fisiche
➤ Uso di sistemi operativi “post-PC”.
✦ Le possibilità di interazione superano quelle del modello WIMP (window – icon – menu – pointing device).
4
DIFFUSIONE DEI S.O. PER SMARTPHONE
76%
20%
3%
1% 0% 0%
Quota di mercato nel mondo aprile 2018
Android
iOS
Unknown
Windows
Series 40
Samsung
75%
23%
2% 0%
0% 0%
Quota di mercato in Italia aprile 2018
Android
iOS
Windows
Samsung
Unknown
BlackBerry OS
5
http://gs.statcounter.com/os-market-share/mobile/worldwide
TIPI DI APP - 1
➤ Indipendentemente dal sistema operativo su cui si appoggiano, le app possono essere classificate in tre grandi famiglie:
➤ Native
✦ Sviluppate con strumenti e linguaggi definiti dalla specifica piattaforma
➤ Web-based (comprendono anche le PWA, Progressive Web Applications)
✦ Sviluppate con gli strumenti e i linguaggi del Web, sono eseguite nel browser.
➤ Ibride
✦ App web-based incapsulate i9n un contenitore nativo.
6
Contenuti tratti da: Tecnologie Web – Diego Magro ©
TIPI DI APP - 2
7
Contenuti tratti da: Tecnologie Web – Diego Magro ©
App nativa (2014) Web app (2014)
browser
APP NATIVE
VANTAGGI ➤ Fedeltà al look&feel della piattaforma
(migliore UX).
➤ Accesso alle risorse hardware del dispositivo e ai dati dell'utente gestiti dalla piattaforma (messaggi, calendario, contatti, ecc.).
➤ Possibilità di utilizzo offline.
➤ Migliori performance.
➤ Maggiore visibilità e notifiche per gli aggiornamenti grazie alla pubblicazione sull'app store.
SVANTAGGI
➤ Sono specifiche per una piattaforma.
➤ Richiedono specifiche competenze e
strumenti di sviluppo ad hoc.
➤ Richiedono maggiori tempi e costi di sviluppo.
➤ La pubblicazione sull'app store è vincolante in
termini di tempo e di costo
➤ Alcuni utenti possono ignorare gli
aggiornamenti resi disponibili nell'app store.
Contenuti tratti da: Tecnologie Web – Diego Magro ©
WEB APP
VANTAGGI
➤ Sono cross-platform (write once run anywhere)
➤ Permettono di utilizzare gli stessi strumenti e competenze necessari per lo sviluppo su Web. Esistono molti framework e librerie.
➤ Possono essere utilizzate anche attraverso i browser desktop e possono essere indicizzate nei motori di ricerca.
➤ Non sono vincolate a nessun app store e non richiedono installazione.
➤ Sono automaticamente aggiornate.
SVANTAGGI
➤ Performance peggiori.
➤ Necessitano sempre della connessione di rete attiva (a meno che l'app non si sfruttino le offline API di HTML5).
➤ Non hanno accesso alle risorse hardware del dispositivo né ai dati dell'utente gestiti dalla piattaforma.
➤ Non rispettano automaticamente il look&feel della piattaforma.
➤ Minore visibilità (non sono pubblicate sull'app store).
Contenuti tratti da: Tecnologie Web – Diego Magro ©
PROGRESSIVE WEB APPLICATIONS (PWA)
➤ Sono state introdotte nel 2015 da Google.
➤ Si tratta di web app che sfruttano le caratteristiche dei browser moderni per
offrire un’esperienza d’uso simile a quella delle app native, ad esempio
permettendo l’utilizzo offline, l’aggiornamento dei dati in background, la
ricezione di notifiche push, l’accesso ad alcune risorse hardware. Come le
web app, anche le PWA non sono vincolate a nessun app store.
10
APP IBRIDE - 1
11
Contenuti tratti da: Tecnologie Web – Diego Magro ©
APP IBRIDE - 2
➤ Le applicazioni ibride sono applicazioni web-based incapsulate all'interno di un contenitore nativo:
➤ E’ possibile accedere alle risorse della piattaforma.
➤ Lo sviluppo è cross-platform native partendo da un unico codice web-based.
➤ Le app possono essere pubblicate nell'app store di riferimento.
➤ E’ possibile l’utilizzo anche in modalità offline.
➤ Le performance sono comparabili alle app web-based.
12
Contenuti tratti da: Tecnologie Web – Diego Magro ©
PER FARE UN’APP… CI VUOLE METODO
➤ Lo user centred design (UCD) è una metodologia di
progettazione iterativa che mette in primo piano i bisogni
dell’utente.
➤ I prodotti sono costantemente sottoposti a valutazione.
➤ L’esito delle valutazioni può portare a ripetere i passi di
progettazione e sviluppo.
13
Copyright 2009 Usabilla.com
USER CENTRED DESIGN - 2
➤ Nello UCD ci sono alcune “regole” che è bene ricordare per
non sbagliare:
➤ Il progettista non è l’utente
14
Un prodotto che “ha senso” e funziona bene per il
progettista, non necessariamente funzionerà
altrettanto bene per l’utente.
USER CENTRED DESIGN - 3
➤ Evitare la “proliferazione
strisciante delle funzioni”
Aggiungere troppe funzionalità non fondamentali ad un
prodotto può renderlo troppo complicato da usare.
➤ Evitare “l’adorazione di falsi
idoli”
Rendere molto complesso un prodotto (ad esempio con
molte funzionalià, un’interfaccia non standard e con
funzionalità nascoste, …) può farlo sembrare “sofisticato” e
di qualità, ma lo renderà anche difficile da usare
15
➤ .
Queste sono le due “tentazioni mortali del progettista”
[D. Norman, La caffettiera del masochista]
PER FARE UN’APP… CI VOGLIONO LE GIUSTE PROFESSIONALITÀ
16
UX Researcher
UX Researcher
Interaction Designer
UI Designer
iOS Developer
Android Developer
Backend Developer
UX Researcher Tester
Web Developer
INTERACTION DESIGN
➤ L’interaction design è l’attività di progettazione dell’interazione tra una persona (l’utente) e un prodotto. Si occupa di definire:
➤ In che modo l’utente dovrebbe utilizzare il prodotto per raggiungere un certo obiettivo.
Si tratta di definire un flusso di compiti, azioni ed eventi.
➤ Quali elementi occorra fornire all’utente affinché possa agire nel modo previsto.
Si tratta di offrire una serie di “indizi” e “inviti all’uso” che guidino in modo appropriato le azioni
dell’utente.
17
https://bit.ly/2wlfMiz
INTERFACCIA UTENTE - 1
➤ Si chiama interfaccia utente (user interface, UI) ciò che
permette ad una persona (l’utente) di interagire con un certo
prodotto, digitale o meno. Un’interfaccia comprende:
➤ Comandi: elementi attraverso cui l’utente comunica le sue
intenzioni al prodotto.
➤ Display: elementi attraverso cui il prodotto manifesta il
proprio stato all’utente.
18
INTERFACCIA UTENTE - 2
19
display
comandi
Ma anche…
comandi
display
INTERFACE DESIGN
➤ L’interface design è l’attività di progettazione delle interfacce.
Si occupa di definire:
➤ L’aspetto generale delle interfacce, la disposizione e le
relazioni gerarchiche tra i diversi elementi che le
compongono.
➤ Gli aspetti strettamente visivi/sensoriali (visual interface
design) come font, color, elementi grafici.
➤ Una buona interfaccia supporta il flusso di interazione
progettato con l’attività di interaction design.
20
UN CONFRONTO
INTERACTION DESIGN
➤ Definisce gli elementi dell’interfaccia (comandi e display) e il modo in cui gli utenti li utilizzano.
➤ Ha l’obiettivo di comprendere ed influenzare il comportamento dell’utente.
➤ Si basa su principi e conoscenze che evolvono lentamente.
INTERFACE DESIGN
➤ Determina l’aspetto degli elementi dell’interfaccia.
➤ Si basa su principi e conoscenze in continua evoluzione e soggetti a mode.
➤ Il prodotto del lavoro
dell’interaction designer è una
serie di rappresentazioni del
flusso di interazione e degli
elementi che caratterizzano
un’interfaccia.
INTERACTION DESIGNER ALL’OPERA
22 By Lindsey Smith (WMF) [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
➤ Cos’è?
➤ Uno sketch è un disegno a mano libera eseguito
rapidamente.
✦ E’ uno strumento di lavoro, non un prodotto finito.
✦ Non deve essere “bello” o verosimile, ma efficace.
SKETCHING: IL SUPERPOTERE DELL’INTERACTION DESIGNER
23
➤ Nel processo di design:
➤ Annotare e sviluppare idee;
➤ Confrontare idee;
➤ Confrontarsi con altri progettisti;
➤ Lavorare in gruppo su un’idea;
➤ Spiegare un’idea ad altri membri del team;
➤ Test con l’utente
➤ Perché è utile?
➤ Veloce
➤ Economico
➤ Non necessita di strumenti sofisticati
➤ Alla portata di tutti
➤ Stimola la collaborazione
SKETCHING: IL SUPERPOTERE DELL’INTERACTION DESIGNER
Bill Verplank
➤ Si chiama User Experience (UX) l’insieme di interazioni che una persona (l’utente) ha con un prodotto, un servizio, un’organizzazione.
➤ Le interazioni si possono riferire tanto al mondo digitale, quanto a quello fisico.
➤ Per progettare una user experience soddisfacente, occorre considerare lo stile di vita dell’utente e il contesto in cui questi fruirà di un certo prodotto/servizio.
USER EXPERIENCE - 1
25
Fonte: http://www.ninjamarketing.it/2017/06/27/glossario-della-user-experience/
➤ “I thought human interface
and usability were too
narrow. I wanted to cover all
aspects of the person’s
experience with the system,
including industrial design
graphics, the interface, the
physical interaction, and the
manual.”
USER EXPERIENCE - 2
Donald Norman
UN CONFRONTO
USER EXPERIENCE
➤ Considera in modo ampio tutte le occasioni di “contatto” tra utente e prodotto.
➤ Si occupa di capire chi siano gli utenti e quali siano i loro bisogni.
➤ Si basa su costanti valutazioni.
INTERACTION DESIGN
➤ Ha l’obiettivo di progettare
l’interazione tra utente e prodotto,
concentrandosi sui momenti di
interazione diretta.
➤ Non esiste una user
experience oggettivamente
buona o cattiva.
➤ Creare una buona user
experience significa
considerare diversi fattori:
➤ Utilità
➤ Usabilità
➤ Apprendibilità
➤ Estetica
➤ Emozioni
VALUTARE LA USER EXPERIENCE
PER RIEPILOGARE
29
Chi sono gli utenti?
Di cosa hanno bisogno?
Quali sono i loro obiettivi?
Come dovrebbe funzionare un
prodotto per permettere agli utenti
di raggiungere i loro obiettivi?
Che aspetto dovrebbe avere
l’interfaccia perché sia facile e
piacevole da utilizzare nel modo
previsto?
UX Researcher Interaction Designer UI Designer
CONTESTI D’USO - 1
STATIONARY
Non è necessario
(ma è possibile) che
i dispositivi siano
portatili.
SEATED
L’utente ha
entrambe le mani
libere per interagire
col device e può
dedicare tutta la
sua attenzione
all’interfaccia.
STANDING
L’utente regge il
device con una
mano e ci lavora
con l’altra.
MOVING
L’utente regge e
utilizza il device con
la stessa mano
(deve averne una
libera).
CONTESTI D’USO - 2
PORTABILITA’ ATTENZIONEe GESTIONE APPRENDIBILITA’
alcuni primaria due mani,
stabile tecnologica
alcuni primaria due mani,
stabile metaforica
due secondaria due mani,
instabile
metaforica
uno minima una mano,
sbilanciato idiomatica
Il contesto “moving” presenta il maggior numero di vincoli,
ma un device mobile con un’interfaccia adatta può essere usato
in tutti i contesti.
INTERAZIONI PROBLEMATICHE - 1
➤ Tra le principali criticità nell’interazione con i dispositivi mobili
ci sono:
32
L’inserimento di
ampie porzioni di
testo.
L’uso di intefacce
che richiedono
precisione nell’input.
A fronte di un’ampia
offerta di app diverse,
per la maggior parte
gratuite, l’attenzione
dell’utente è limitata.
PROGETTARE PER PIÙ PIATTAFORME
➤ Si inizia progettando un’app “generica”:
➤ Tutta l’attenzione è sui contenuti e sul
modo in cui sono connessi tra loro.
➤ Successivamente si adatta il progetto ad
ogni piattaforma, scegliendo i modelli di
interazione che meglio valorizzano i
contenuti e che sono più familiari agli
utenti.
PROGETTARE PER UNA PIATTAFORMA SPECIFICA
➤ E’ buona norma consultare le linee guida ufficiali per la
piattaforma a cui ci si rivolge.
34
https://goo.gl/x4bvBu
https://goo.gl/Kbv3wW
➤ Un’ottima strategia per scegliere i
modelli di interazione più appropriati
(e imparare qualcosa sui propri
utenti) consiste nell’analizzare le
applicazioni che hanno obiettivi
simili o si rivolgono allo stesso tipo
di utenti.
➤ Per una panoramica generale, è
utile analizzare le applicazioni più
scaricate per la propria piattaforma
di riferimento.
PROGETTARE “CON IL RAMPINO”
"Imparai sempre a leggere col rampino,
tirando al mio proposito ciò ch'io ritrovava di buono,
notandolo nel mio zibaldone e servendomene a suo tempo“
[Giambattista Marino]
➤ La maggior parte delle app utilizza uno o più metodi di navigazione standard, in combinazione o in punti diversi.
➤ I metodi di navigazione riguardano le relazioni e i passaggi tra le viste che compongono un’app.
➤ Una vista è una “finestra” o una “schermata”.
➤ I metodi di navigazione stabiliscono se e in che modo, a seguito di un evento o di un’azione dell’utente, l’app debba aggiornare le informazioni presenti nella vista corrente oppure trasferire l’utente ad una vista diversa.
SCHEMI DI NAVIGAZIONE STANDARD
36
SCHEMI DI NAVIGAZIONE STANDARD
APP E CLOUD COMPUTING
APP BACKEND
➤ App non è solo UX/UI
➤ Scambio dati/memorizzazione db/
integrazione altri servizi/sicurezza/…
CARATTERISTICHE DI UN BACKEND
➤ Essere ospitato da un hosting e raggiungibile pubblicamente
➤ Gestire database con i dati
➤ Implementare un protocollo di comunicazione con l’app
➤ Gestire sicurezza
➤ Essere in grado di “scalare”
➤ Offrire un’interfaccia di amministrazione
COS’È IL CLOUD?
➤ Insieme di tecnologie che
consentono l’accesso a
risorse software e hardware
➤ Accesso alle risorse tramite
server remoto
➤ Richiesta una connessione
internet
➤ Servizio offerto da un
provider, spesso in
abbonamento
COS’È IL CLOUD?
➤ Risorse software/hardware:
✦ Configurabili
✦ “Tagliate su misura” per l’utilizzo richiesto
✦ Gestibili esternamente
RISORSE DEL CLOUD COMPUTING
➤ Esempi:
✦ CPU
✦ Storage
✦ Reti
✦ Applicazioni
✦ Servizi
PERCHÉ IL CLOUD?
➤ Abbassamento dei costi
➤ Abbassamento dei rischi
➤ Accesso ai servizi in ogni momento e in ogni luogo
➤ Servizi offerti on-demand
➤ Pay-per-use
ABBASSAMENTO DEI COSTI
➤ Upgrade e downgrade delle risorse in tempo reale e in base
alle esigenze del momento
➤ Infrastrutture IT crescono con il business
dell’azienda
➤ No costi di personale esperto per
installazione/configurazione/manutenzione
➤ Time-to-market per l’implementazione IT
nuova e ottimizzata ridotto
RISCHI RIDOTTI
➤ Sicurezza è un problema dell’hosting provider
➤ Assume ruolo centrale e adotta le misure necessarie a
garantirla
➤ Gestire solo gli aspetti di sicurezza dello
specifico applicativo
ANCHE SVANTAGGI
➤ Aggiornamenti automatici
✦ rimozione di funzionalità deprecate
✦ nuova opzione che “rompe” la sicurezza del servizio
✦ nuova interfaccia
ANCHE SVANTAGGI
➤ Costi vantaggiosi per piccole implementazioni,
per grandi aziende non è sempre così
➤ Termini di servizio e
condizioni offerte poco chiare
➤ Privacy e proprietà dei dati, perdita di controllo
➤ Problemi di connettività
TIPOLOGIE DI CLOUD
➤ In base alla sicurezza ci sono tre forme di cloud
✦ Public
✦ Private
✦ Hybrid
✦ Community
TIPOLOGIE DI CLOUD: PUBLIC
➤ Tipicamente modello pay-as-you-go
➤ Ambiente multi-tenant
➤ Self-managed
➤ Servizi e infrastrutture sono fornite attraverso Internet
➤ Efficienza di condivisione delle risorse
➤ Vulnerabile
TIPOLOGIE DI CLOUD: PRIVATE
➤ Servizi e infrastrutture mantenute in una rete privata e
dedicata
➤ Livello di sicurezza e controllo alto
➤ Costo elevato di acquisto e mantenimento del software e
infrastrutture
➤ Alta personalizzazione
TIPOLOGIE DI CLOUD: HYBRID
➤ Utilizzo di public cloud e private cloud per gestione delle
risorse
➤ Gestione di multipli cloud come un’unica entità
➤ Problemi:
✦ comunicazione tra cloud
✦ sicurezza
TIPOLOGIE DI CLOUD: COMMUNITY
➤ È un hybrid/private cloud ma condiviso tra diverse
organizzazioni
➤ Tipicamente host esterno, ma un’organizzazione potrebbe
occuparsi dell’host
➤ Stesse caratteristiche di un hybrid
TIPI DI SERVIZI
➤ Software as a Service (SaaS:
servizio che fornisce
un’applicazione software che
essere utilizzata su richiesta
➤ Platform as a Service (PaaS):
servizio che fornisce una
piattaforma e un ambiente per
permettere lo sviluppo di
applicazioni e servizi attraverso
internet
➤ Infrastructure as a Service (IaaS):
fornisce hardware virtualizzato
TIPI DI SERVIZI
CLASSIFICAZIONE CLOUD PROVIDER
SaaS PaaS IaaS
Cloud Computing enablers
AMAZON WEB SERVICES
➤ Piattaforma offerta da amazon.com
➤ Comprende servizi PaaS e IaaS
➤ Tutti i servizi gestibili da console web
AMAZON DATA CENTERS
AMAZON MACHINE LEARNING
➤ Machine Learning e Artificial Intelligence
per tutti e per diverse applicazioni
➤ Modelli e algoritmi senza troppe operazioni
di messa a punto
➤ Architetture veloci e scalabili
AMAZON DEVICE FARM
➤ Problema sviluppo app: varietà di dispositivi
➤ Testing continuo
➤ Trovare problemi specifici
GOOGLE DATA CENTERS
GOOGLE APP ENGINE
➤ Piattaforma di cloud computing per servizi di tipo PaaS
➤ Fornisce una serie di strumenti per realizzare applicazioni web
✦ Supporto di diversi linguaggi
✦ Altamente scalabile
✦ Fully managed
✦ Espandibile con altri servizi cloud
GOOGLE APPS
➤ Fornisce servizi tipo SaaS
➤ Insieme di web application consumer e business (free e a
pagamento)
✦ Google Apps (free)
✦ Google Apps for business
✦ Google Apps for education
✦ Google Apps for government
✦ Google Apps for nonprofit
DOMANDE?