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

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?