1. Wow Factor: Apps and UX Design Techniques ( for iPhone
and iPad )
Goal : Progettare le interazioni e l’interfaccia utente mantenendo il
focus sulla User Experience

2. Techniques and methods for creating compelling apps that are easy
to use, entertaining and noticeable in a crowded marketplace
• Quello delle applicazioni mobili è un mercato difficile
• Avere un’applicazione stabile e funzionante non basta per scalare la classifica dei
download!
• Bisogna sorprendere l’utente, entusiasmarlo
• Bisogna creare il “WOW Factor”
aCrm net training course
Apr 2014
2

3. WOW Factor
• Immediatezza di impatto (design)
• Novità o differenza (user inteface)
• Risposta positiva (user experience)
• Riuscire a inserire tutti questi fattori in
un’app significa riuscire a guidare l’utente
attraverso un’onda emotiva positiva (Wow
Factor)
aCrm net training course
Apr 2014
3

4. guidelines of HIG
HIG = Human Interface Guidelines
(https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html)
• La Apple ha creato le linee guida HIG come punto di partenza per tutti i designer e
gli sviluppatori che si avvicinano per la prima volta alla creazione di applicazioni
mobili
• Nel 2008 al lancio dell’Apple store esistevano già teams specializzati in sviluppo di
applicazioni mobili che erano ben disposti verso la nuova piattaforma, ma allo
stesso tempo lo sviluppo di app era ancora una piccola nicchia di mercato.
• Apple però aveva bisogno di una comunità più grande di team di sviluppo, queste
linee guida sono state create appositamente per aumentare la comunità di
sviluppatori e di applicazioni create da terze parti.
aCrm net training course
Apr 2014
4

5. guidelines of HIG - A step back
Torniamo per un attimo a prima dell’uscita dell’iPhone come erano i telefonini?
aCrm net training course
Apr 2014
5

6. guidelines of HIG - A step back
Mercato e device frammentati
• Manopole
• Controller a 4 direzioni
• Tastiera fisica
• Penna Stilo
aCrm net training course
Apr 2014
6

7. guidelines of HIG - A step back
L’iPhone ha cambiato tutto
• Un solo tasto hardware
• Schermo touch senza penna stilo
• Nessuna tastiera fisica
• UX e UI innovative
Senza l’eliminazione delle nozioni preconcette
non sarebbe stato possibile raggiungere il
livello di esecuzione richiesto.
aCrm net training course
Apr 2014
7

8. guidelines of HIG
Prima di proseguire cerchiamo di capire su cosa si basa la User
Experience di iOS seguendo alcuni concetti
• La Metafora nel SO
• La Direct Manipulation
• La centralità dell’Home Button
aCrm net training course
Apr 2014
8

9. guidelines of HIG - Metafora VS Utilità
Diversamente da un Mac negli iPhone e iPad manca
completamente una metafora visiva.
Perché è stata privilegiata l’utilità alla metafora, in questo modo
l’utente non ha un file system, non deve pensare a dove
salvare un file oppure a ricercarlo
Ogni applicazione gestisce i propri “contenuti” a modo suo:
• Camera fotografica: lista di immagini o immagine a tutto
schermo swipe-able
• iPod: lista di oggetti multimediali o carousel
• iBooks: lista di libri/documenti o navigazione basata su elenco
aCrm net training course
Apr 2014
9

10. guidelines of HIG - Direct Manipulation
• La manipolazione diretta è un concetto fondamentale per
qualsiasi interfaccia touch
• Si toccano direttamente gli oggetti con i quali si vuole
interagire, quindi si elimina la barriera tra reale e virtuale
• Gli oggetti tendono a comportarsi come ci si aspetterebbe
facessero nel mondo fisico
• Quindi più gli oggetti sono grandi e più è facile manipolarli e
avere un ottimo feedback, ma non sempre…
aCrm net training course
Apr 2014
10

11. guidelines of HIG - Direct Manipulation
Un ottimo esempio, la tastiera!
• Feedback visivo del pulsante
toccato
• Algoritmo per il
suggerimento delle parole
• Algoritmo per il controllo
ortografico inline
aCrm net training course
Apr 2014
11

12. guidelines of HIG - Home Button
Inizialmente il tasto Home poteva essere configurato, il doppio
click poteva richiamare la videocamera, la ricerca, i numeri di
telefono preferiti …
Con l’aumentare delle app è aumentata anche la loro
complessità e il pulsante Home è stato rivisto
• Ritorno alla home screen quando è aperta un app.
• Visualizzazione dell’app switcher con il doppio click
• Tenere premuto il tasto home per Siri
aCrm net training course
Apr 2014
12

13. guidelines of HIG - Capire iOS
Continuiamo ad analizzare come funziona iOS verificando
l’utilizzo dello spazio attraverso il quale si muovono gli utenti
L’interfaccia di iOS è un ambiente “planare”, ma il suo
funzionamento, la sua UI è su 3 piani diversi
• Default plane = icone delle applicazioni e dock
• Underlying plane = app switcher (più limitato)
• Superimposed plane = alert o popup (più limitato)
aCrm net training course
Apr 2014
13

14. guidelines of HIG - Capire iOS
Esistono solo due tipi di movimenti che possiamo analizzare:
• Movimento sull’asse X e quello sull’asse Y
• Il movimento sull’asse Z è automatico
aCrm net training course
Apr 2014
14

15. guidelines of HIG - Concetti 1/2
1. Semplicità
2. Finite navigation: concentrarsi sulla creazione di un’unico percorso,
chiaro e ben definito attraverso contenuti o funzionalità (no
ricorsività)
3. Constrained Control Mapping: il contenuto è il Re, i pulsanti di
navigazione vanno limitati ad una determinata regione
4. Constrained Control Quantity: Limitare o restringere il più possibile
il numero di controlli da presentare all’utente
5. Control Clarity: limitare il numero di elementi unici e definirli in
modo chiaro utilizzando etichette
6. OS Offloading: In alcuni casi è preferibile spostare alcune
funzionalità sul SO, come per esempio le impostazioni per ridurre
la complessità dei controlli
7. User Interface Suppression: Gli elementi di controllo non devono
essere necessariamente onnipresenti
aCrm net training course
Apr 2014
15

16. guidelines of HIG - Concetti 2/2
8. Progressive Disclosure: Sforzatevi di fornire funzionalità solo dove e
quando serve. Non avere a disposizione le funzionalità che non servono,
serve a ridurre la complessità dello schermo
9. Brand and Identity De-emphasis: Non è utile inserire il nostro brand
ovunque
10. State Persistence and Restoration: Gli utenti sono multitasking e possono
aprire e chiudere l’applicazione più volte
11. Implicit Saving: Ogni operazione dell’utente che genera modifiche o
creazione di contenuto va salvato
12. Gestural Restraint: Limitare l’uso di gesture uniche per interagire con
l’applicazione, utilizzare troppi gesti o impararne di nuovi potrebbe
essere un ostacolo
13. Hierarchical Restraint: Un elevato livello di struttura gerarchica rende
difficile progettare un’app che abbia un percorso semplice e facilmente
comprensibile
14. App Modality: L’utente può utilizzare una sola applicazione alla volta
aCrm net training course
Apr 2014
16

17. guidelines of HIG - Capire iOS
Esempio di navigazione gerarchica, Settings:
aCrm net training course
Apr 2014
17

18. guidelines of HIG - User Experience
La User Experience(UX) inizialmente includeva l’usabilità, l’estetica, la
percezione e il coinvolgimento emotivo dell’utente
Oggi ogni azienda dota la propria applicazione di una corretta UX,
come fare?
Bisogna determinare altri fattori dell’esperienza utente che
renderanno la vostra APP più desiderata.
Per farlo bisogna:
1. Capire lo stato in continua evoluzione degli utenti , comprese le
loro aspettative
2. Capire come l'esperienza d'uso del prodotto può essere diversa e
migliore da quella prevista dai concorrenti
3. Capire che potrebbe essere necessario concentrarsi su generare il
desiderio
4. Generare desiderio, significa che l’ambiente che progettiamo oggi
può richiedere l'esplorazione di soluzioni non ortodosse
aCrm net training course
Apr 2014
18

19. Interaction Design Best Practices
Abbiamo le informazioni base, ora:
• Come si decide il design che differenzia l’applicazione da
quella dei nostri concorrenti?
• Come si arriva alle idee innovative?
aCrm net training course
Apr 2014
19

20. Interaction Design Best Practices – Fattore Wow
1/3
Il fattore WOW è banalmente la reazione favorevole degli utenti
davanti ad un’applicazione unica o particolarmente
coinvolgente
Quali sono i fattori chiave?
1) Immediatezza: Il design dell’applicazione deve essere in
grado di suscitare una risposta immediata da parte
dell’utente
2) Riconoscimento di novità/differenza: Un utente deve essere
in grado di riconoscere la novità di un app, o comunque
identificarla come diversa dalle altre app
3) Risposta positiva: La novità o la differenza devono essere
seguite da una reazione positiva dell’utente di fronte ad
un’esperienza nuova o strana.
aCrm net training course
Apr 2014
20

21. Interaction Design Best Practices – Fattore Wow
2/3
Come raggiungere questi obiettivi?
Attraverso uno o più di questi attributi:
Aspetto: descrive gli attributi estetici di una determinata soluzione
progettuale espressa attraverso la struttura dello schermo , il layout
, il rendering , e di altri elementi che compongono le immagini
statiche di un app
Meccanica e comportamenti di interazione : Si riferisce alla interazione
fisica o gestuale e altre azioni necessarie per interagire con gli
elementi dell'interfaccia utente di un'applicazione
Interazione visiva, il movimento e l'animazione: Si riferisce agli
elementi reattivi o dinamici e alla loro animazione in una soluzione
progettuale. Questi possono essere strettamente associati a un
particolare interazione, feedback o reattività agli input dell'utente.
aCrm net training course
Apr 2014
21

22. Interaction Design Best Practices – Fattore Wow
3/3
1) Aspetto: Deve essere gradevole e curato
2) Meccanica e interazione: Un utente deve essere in grado di
riconoscere la novità di un app, o comunque identificarla
come diversa dalle altre app
3) Interazione visiva: La novità o la differenza devono essere
seguite da una reazione positiva dell’utente di fronte ad
un’esperienza nuova o strana.
aCrm net training course
Apr 2014
22

23. Interaction Design Best Practices – Fattore Wow
aCrm net training course
Apr 2014
23
Trauma iOS
FX Guru iOS/Android

24. Control mapping and Touchscreen ergonomics
aCrm net training course
Apr 2014
24
L’utilizzo dei Touchscreen è ormai diventato di largo uso ma
dobbiamo fare attenzione a creare la giusta interazione fisica
con questi dispositivi
Ci sono migliaia di applicazioni interessanti da scaricare ma che
sono scomode da usare e in certi casi hanno delle user
experience imbarazzanti e sono cancellate all’istante
Non dobbiamo lasciare che questo accada!

25. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 1/12
aCrm net training course
Apr 2014
25
• Affrontiamo alcuni principi di base che contribuiranno a
garantire il successo della vostra applicazione.
• La progettazione di app per dispositivi mobili è diversa da
quella Web perché manca di interazione fisica
• Disegnare un’interfaccia per dispositivi mobili significa
aggiungere alle attività di progettazione anche il disegno di
una “tastiera” e “un mouse” per ogni applicazione che si
crea. Questo apre un sacco di opzioni per i designer

26. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 2/12
aCrm net training course
Apr 2014
26
• Inizialmente la Apple pensò che
l’iPhone dovesse essere tenuto
con una sola mano e disegnò i
pulsanti principali e i comandi
fisici per questa modalità
Uso Verticale con una sola mano

27. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 3/12
aCrm net training course
Apr 2014
27
Uso Verticale con una mano libera

28. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 4/12
aCrm net training course
Apr 2014
28Uso Verticale con due mani

29. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 5/12
aCrm net training course
Apr 2014
29
Uso Orizzontale con una mano Uso Orizzontale con una mano libera

30. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 6/12
aCrm net training course
Apr 2014
30
Uso Orizzontale con due mani

31. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 7/12
aCrm net training course
Apr 2014
31
• Ognuna di queste posizioni e l’orientamento possono
influenzare il posizionamento dei controlli o della meccanica
delle gesture
• La posizione delle mani dell’utente e l’orientamento del
dispositivo possono fare la differenza nel rendimento
complessivo dell’applicazione

32. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 8/12
aCrm net training course
Apr 2014
32
• Per l’iPad il discorso è ancora diverso, perché:
– E’ più grande
– E l’uso del dispositivo è diverso ed è usato per lunghi periodi di
tempo
• Quindi quanto sarà usato un iPad con una sola mano?

33. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 9/12
aCrm net training course
Apr 2014
33
Uso Verticale con una mano libera

34. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 10/12
aCrm net training course
Apr 2014
34
Uso Verticale con due mani

35. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 11/12
aCrm net training course
Apr 2014
35
Uso Orizzontale con una mano libera

36. Control mapping and Touchscreen ergonomics - La
consapevolezza della fisicità 12/12
aCrm net training course
Apr 2014
36
Uso Orizzontale con due mani

37. Control mapping and Touchscreen ergonomics –
Considerazioni sul Layout 1/2
aCrm net training course
Apr 2014
37
• Sono due i fattori principali da prendere in considerazione
durante la progettazione di qualsiasi controllo touch-based
– Scale: Le dimensioni del controllo
– Proximity: Quanto vicino è il controllo agli altri elementi
dell’interfaccia
• La tecnologia capacitiva usato nei dispositivi iOS è
estremamente precisa e accurata
• La Proximity è più importante perché degli oggetti troppo
vicini aumentano le possibilità di errore

38. Control mapping and Touchscreen ergonomics –
Considerazioni sul Layout 2/2
aCrm net training course
Apr 2014
38
La spaziatura deve essere inversamente proporzionale alla dimensione degli oggetti

39. Control mapping and Touchscreen ergonomics – Feedbak e
reattività 1/2
aCrm net training course
Apr 2014
39
• Fornire agli utenti un feedback per ogni loro input sul sistema è
fondamentale per qualsiasi progetto.
• Il Feedback da la conferma che un evento ha avuto luogo e che il
sistema ha catturato l’evento
• Vi manca l’effetto “over” o “hover”?

40. Control mapping and Touchscreen ergonomics – Controlli
non visibili 1/2
aCrm net training course
Apr 2014
40
• Ci sono soluzioni di user interface che richiedono che alcuni
controlli siano richiamati dall’utente sullo schermo
• La chiave per questo tipo di interfaccia è sapere come offrire
un aiuto all’utente per scoprire e utilizzare i controlli,
specialmente quando per l’utilizzo è richiesto all’utente una
gesture specifica
• Quando i controlli non sono visibili può essere utile
visualizzare un’icona trasparente sottile o un altro indicatore
visivo che identifica la posizione del controllo

41. Control mapping and Touchscreen ergonomics – Controlli
non visibili 2/2
aCrm net training course
Apr 2014
41

42. Wow Factor: Apps and UX Design Techniques ( for iPhone
and iPad )
aCrm net training course
Apr 2014
42
Grazie per l’attenzione!