ESAME

Puoi scegliere la sua destinazione se per ios o per android

Saper motivare le scelte.
Un intero livello a parte per i componenti usati
Benchemark, sketch, diagramma di flusso

Potrai scegliere uno di questi 3 progetti:

1-App di un sito di podcast

2- app di un Sito di un evento con annessa ricerca

es. Eurovision – come valorizzare il festival e i singoli artisti
All’interno di un flusso secondario scompare la navigazione in basso (tab bar) e appare
solo il tasto back in alto
Shop: due nav bar perché probabilmente apre il sito, per qualche motivo la scritta
shop è nera invece che gialla quando mi trovo nello shop
Non è detto che devo inserire tutte le info del sito, chiaramente deve averci un senso

3- App di un giornale
Es. Il sole 24 ore – testata di riferimento per economia (ha come Podcast: radio 24)
Spesso nei siti di giornali/riviste, viene richiesto l’abbonamento dopo un tot di articoli
letti, oppure te li fa aprire tutti ma puoi leggerne solo un piccolo paragrafo.
Mandare sempre un feedback all’utente se la pagina non carica
Anche qua rimanda al sito, non ha senso, perché scaricarmi una app se poi mi rimandi
al sito?
In alternativa al sole 24 ore, guardare grazia, vanityfair

19 aprile 2024

UX

La bellezza di un gioco non è data solo dal suo design ma soprattutto dall’esperienza
di gioco es: Stray – ti fa immergere a pieno nell’esperienza di essere gatto

Netflix

Alcune funzioni disponibili solo sulla versione desktop o mobile. In alto trovo la nav
bar: a sx sempre il logo, a dx ad esempio impostazioni e le azioni sull’account. Subito
sotto troviamo l’hero content, chè il contenuto più pompato su Netflix spesso con auto
play. Se clicco su un contenuto si apre una piccola finestra detta modale. I vari film e
serie sono a carosello, di solito contiene un numero predefinito di contenuti per cui è
bene inserire anche uno sfoglia tutto in modo da consultare tutti i contenuti di quella
categoria. I badge aiutano nello scandagliamento dell’occhio, sfruttando una
comunicazione immediata.
Le app native stanno sostituendo le web app.

22 aprile 2024

La realizzazione di un’app non termina con la sua effettiva creazione, ma va fatta

manutenzione.

Netflix
Sign up (sainup) – momento in cui la prima volta l’utente entra in contatto col
prodotto
Log in – quando accede le volte successive
In queste situazioni avviene la profilazione, non è detto che debba avvenire sempre
nel primo momento, in altri portali avviene ad es. dopo la visualizzazione di un certo
numero di contenuti col paywall (richiesta di scegliere un piano di abbonamento). Se
invece si chiede l’accesso con i social o altre piattaforme, si chiama single sign on. Il
logo sempre visibile in tutte le schermate. Poi segue un ulteriore profilazione nella
scelta del profilo, di default c’è quello per i minori, la possibilità di aggiungerne uno e
di modificare (gestione profili). Da app la gestione profili non è sempre contemplata,
da desktop solitamente vi sono più azioni disponibili. Una volta entrati si presenta la
main view o vista principale, con nav bar e hero content con auto play (che si può
disattivare) e a seguire verso il basso le preview di tutti gli altri contenuti disponibili. Il
mouse hover (presente solo nei dispositivi dotati di puntatore) introduce che i bottoni
hanno diversi stati, ad es. una piccola scritta che descrive l’azione eseguita dal
bottone detta tool tip. I contenuti sono raccolti in categorie come “i più popolari”
oppure “consigliati” che nascono da profilazione per cui son diversi per ognuno di noi,
“titoli del momento”, “top 10”. Spesso cambiano le copertine dei contenuti per darti la
possibilità di ricliccarci e magari riguardarli. All’hover sui contenuti, si allarga e parte il
trailer o un estratto. La modale è una schermata che appare sovrapposta alla
schermata precedente, quando clicco sui contenuti, qui ho varie azioni disponibili:
play, aggiungi alla lista e mi piace; con quest’ultima azione do ulteriori informazioni
per la profilazione. Sotto i contenuti simili o che potrebbero piacermi.
Dalla funzione cerca viene fuori un wall con anche contenuti simili anche in base alla
profilazione, oltre a quelli strettamente legati alla key word. Netflix ha rivoluzionato la
fruizione dei contenuti, prima era tutto piratato ma anche proponendo contenuti
interattivi come Bear Grills - scuola di sopravvivenza, Black Mirror – Bandersnatch e i
giochi, questi da mobile ti portano a scaricare app esterne, da desktop non sono
disponibili.

Poc: prof of concept ha lo scopo di testare una funzionalità

Responsiveness: il modello con AI riconosce gli elementi

Analisi di Benchmark: analisi swot, competitor e cosa fanno, posizionamento,

individuare i gap

Why
Who – chi ne usufruisce ma anche chi è coinvolto (stakeholder)
When
Where
How

Service safari 101

- Fotografare l’utente durante l’interazione col prodotto; serve a capire se le
persone usufruiscono o no sempre allo stesso modo, o per notare certe
corrispondenze quando ad es gli utenti fruiscono dal telefono

Romina Non sa avviare Netflix, chiama i nipoti per farlo, se non ci sono non lo
guarda.
73 anni Non sceglie lei i contenuti
Guarda serie turche, film italiani, cinepanettoni
Difficoltà nella lettura
Non sa mettere in pausa
La sorella (68 anni) sa usarlo
I nipoti guardano qualsiasi cosa capiti non avendo un account riservato
Guarda solo tv satellitare e Netflix
Le piace poter scegliere cosa guardare, ma non le piace che è complicato
Possibili soluzioni: Comando vocale

Davis Lo usa anche come sottofondo

22 anni Guarda contenuti offline quando in viaggio
Non pienamente soddisfatto dell’offerta di contenuti
Si informa su YouTube su cosa vedere su Netflix
Su YT segue travel blogger e contenuti sul design
Su Netflix i contenuti son distribuiti in maniera efficace, sfrutta le
categorie
Gli dà fastidio non poter vedere gli stessi contenuti all’estero
Sfrutta anche piattaforme pirata
Usufruisce principalmente da mobile ma ha anche la smart tv
Non è soddisfatto della personalizzazione del suo feed
Interfaccia caotica e auto play fastidioso così come l’hover dei contenuti
Possibili soluzioni: Vorrebbe che la piattaforma implementasse un metodo di
pagamento semplificato per amici che si dividono l’account

Mario Usa Ray Play per le repliche

61 anni Guarda tv ai pasti, preferisce Netflix
Fruisce da tv, perché ha difficoltà a sincronizzare dispositivo e il telefono è
troppo piccolo e non riesce a cliccare con precisione
Guarda le partite al bar con gli amici
Guarda le top 10 e i suggeriti ma quest’ultimi non rispecchiano i suoi
gusti
Non riesce a leggere i sottotitoli
Ha la tv in sala davanti al divano e in camera
Guarda anche con la moglie dopo cena – sceglie lei
 Di Ray Play apprezza che sembri più intuitivo e con colori chiari e che
abbia contenuti prodotti in Italia

6 aprile 2024
Andare a definire il layout, decidendo come organizzare le info e i vari collegamenti tra
le schermate. Inizialmente su carta poi in digitale. Si può prototipare ad es. su Marvel
App o Figma ed è un processo costante.

Osservare l’utente crea empatia: in che modo si approcciano al servizio. Dare

importanza anche al feedback e focalizzarsi sul problema. Individuare il problema
principale e poi stabilirne le proprietà.

Human Centered Design (HCD): progettazione focalizzata sull’utente, design

antropocentrico
Capacità di Problem solving viene utilizzata per valutare l’intelligenza.
Affordances: è la qualità che definisce l’oggetto, ad esso intrinseco. Secondo Norman è
l’invito all’uso che l’oggetto ci innesca ad es. il bottone ci invita ad essere premuto,
questa proprietà non deve essere ingannevole.

Nel digitale:
Colori, link, testi, immagini
Bottoni: tap
freccia verso sinistra: indietro
X: chiudi

- Flowchart del nostro Netflix e sketch delle schermate collegandole su Marvel

Crei la bounding box dove vuoi che avviene l’azione e selezioni il frame
successivo
In caso testala su conoscenti per modificare se serve il flowchart nel caso in cui
non sia così intuitivo
Sign up, log in, home, contenuti, aprire un contenuto e tornare indietro, profilo
utente, pag pagamento
Bounding box: box di selezione
La chiusura di solito è dall’alto verso il basso.

10 maggio 2024
Figma
Atomic design

Design system: è tutto quell’insieme di elementi per lo sviluppo dell’app, e serve

anche a dare coerenza all’intero prodotto col brand.

Nomi dei componenti, essenziali da conoscere per poter progettare.

Differenza IOs e Androin
Partono da un linguaggio differente ma cambia anche l’interpretazione di alcuni
elementi come i font o le unità di misura. E diversi pattern di navigazione
Safe area: zona dello schermo su cui non posso lavorare, ovvero i bordi.

Android https://m2.material.io/components/app-bars-bottom
Come minimo di schermo per android può esser preso 360 x 444 px, è una buona idea
partire dallo schermo più piccolo.
Ci sono numerosissime variabili di dimensioni di schermi
Material Design: riferimento per il mondo Android, qui si possono verificare le novità
del sistema operativo
Uno dei pattern di Android è la barra di navigazione in basso.

- Backdrop: viste modali che salgono dal basso. Ha dei valori, a scaletta entro cui
si richiude o si apre.

- Banner
Es privacy policy
Ne esistono tantissimi tipi

- Fab - A floating action button (FAB) – solo android

- Checkbox

- Switches (ios toggle)

- Chips: a differenza delle tabs, hanno sempre il bordo da bottone

- Navigation drawers: si apre sempre lateralmente, ed è sempre per un menu

- (Action sheets “fogli” che appaiono sulla stessa schermata sovrapponendosi)

 - Snackbars (toast notification) può essere solo caption (testo) o anche cta. Su ios
invece è solo testo che appare e scompare da solo.

- Sheets bottom/side: partono dal basso/partono da dx

- Labels: Testo di placeholder (testo segnaposto)

- Tooltips: Piccola scritta che appare all’hover

iOS https://developer.apple.com/design/human-interface-guidelines/
per mobile ci sono principalmente dimensione iphone 8 e i pro
Ci son problemi di retrocompatibilità, ovvero alcuni software non disponibili per le
versioni di sistema operativo precedenti, però si è a conoscenza di queste non
funzionalità.
Se le grafiche o funzionalità non rispettano certi parametri, le app non vengono
accettate allo store, Apple cerca di garantire ai suoi clienti elevati standard.

Templates: https://developer.apple.com/design/resources/

Layouts – li trovi su Foundations

20 maggio 2024
Figma

Consigli
La modale ha sempre la x a dx, mai il tasto indietro
Partire dalla progettazione dello schermo più piccolo, ad esempio fai il progetto per
l’iPhone e il tablet più piccolo.
Rotella di caricamento personalizzata (call to refresh)
Notifiche: ricorda che il logo nelle notifiche, rispetto all’icona dell’app è ancora più
piccolo
Single sign on: accesso coi social
Versione dell’app: il numero della versione è importante perché se ci sono problemi è
possibile capire quale versione ha difetti.
Solitamente si progetta ad 8 colonne e in moduli (o componenti)
Icone mai inferiori a 45px

Partire a progettare dalla home, dove saranno contenuti la maggior parte dei
componenti. Se si ha gia in mente dei componenti che mi serviranno, si può partire
direttamente creando quelli.
Trello – piattaforma per organizzare lavori in gruppo: suddividendo le cose da fare, le
cose in corso d’opera e ciò che è stato fatto.

27 maggio 2024
Table of content: indice, subito dopo la copertina

Glossario
nav bar
hero content
Modale: finestra in sovraimpressione, ha la x a dx e non il tasto indietro.
Onboarding: al primo accesso in una app, tuor delle funzionalità
Single Sign On: accesso a piattaforme o servizi attraverso i dati di un’altra piattaforma
Sign In / Log In: accedere ad un account esistente
Sign On / Sign Up: registrarsi (creare l’account))
Survey: sondaggio
Tooltip: istruzioni additive per i componenti attivi, che appaiono all’hover

Coplay - piattaforma
Una sola password e E-mail per gli account condivisi.
3 piani di pagamento: Light, Medium, Pro
Ogni profilo può avere al suo interno delle suddivisioni.

Cambio piano
Per effettuare un cambio del piano, basta che un utente lo faccia dal suo profilo,
sull’area personale, da Piano Attivato. Una volta selezionato il nuovo piano, arriva una
notifica ad ogni accesso (per stimolare gli uteti ad accordarsi sul piano) sugli altri
profili che l’utente “nome avatar” ha proposto il cambio piano, fino a che tutti gli
utenti non confermano, il nuovo piano non parte. A conferma di tutti gli utenti, il nuovo
piano parte dal mese successivo. Se non si conferma mai, l'avviso apparirà ad ogni
accesso. Ci sarà anche la conferma che il piano sarà attivato dal prossimo mese.
Dialogue: attendiamo che gli altri utenti confermino il cambio piano, ci pensiamo noi
ad avvisarli.

Allineamenti home
Pallini onbording in terza pagina
Impostazione sul profilo, in modo da mettere il logo a sx, a dx metto inidietro
Componenti a parte