wow factor apps and ux design techniques ( for i phone and ipad )

Wow Factor: Apps and UX Design Techniques ( for iPhone and iPad )

Goal : Creare app di facile utilizzo, divertenti e capaci di imporsi in un mercato molto affollato

Chi è Acrm net

-aCrm net è una società italiana specializzata nello sviluppo di CRMopen source e di soluzioni ad hoc per il web e il mobile.

- aCrm net vanta più di 50 dipendenti che coprono una vasta gamma di figure professionali e ha ben due sedi in Europa: Roma e Ginevra.

ContattiaCrm Via Enrico Berlinguer, 18 (00054)Fiumicino (Roma) [email protected] +39 06 95214464Fax +39 06 92913681

Le nostre APPS

HERMES HEALTY SPIECES PET ISLAND SWAP ISLAND MORE OR LESS NAPOMEMO

3

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

4

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)


5

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.


6

guidelines of HIG - A step back

Torniamo per un attimo a prima dell’uscita dell’iPhone come erano i telefonini?


7


Mercato e device frammentati

• Manopole

• Controller a 4 direzioni

• Tastiera fisica

• Penna Stilo


8


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.


9

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


10

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


11

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…


12

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


13

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


14

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

15


Esistono solo due tipi di movimenti che possiamo analizzare:• Movimento sull’asse X e quello sull’asse Y• Il movimento sull’asse Z è automatico


16

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 regione4. Constrained Control Quantity: Limitare o restringere il più possibile il

numero di controlli da presentare all’utente5. Control Clarity: limitare il numero di elementi unici e definirli in modo

chiaro utilizzando etichette6. 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


17

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 voltaaCrm net training course Apr 2014

18


Esempio di navigazione gerarchica, Settings:


19

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

aspettative2. Capire come l'esperienza d'uso del prodotto può essere diversa e

migliore da quella prevista dai concorrenti3. Capire che potrebbe essere necessario concentrarsi su generare il

desiderio4. Generare desiderio, significa che l’ambiente che progettiamo oggi può

richiedere l'esplorazione di soluzioni non ortodosseaCrm net training course Apr 2014

20

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?


21

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.


22


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.


23


1) Aspetto: Deve essere gradevole e curato2) 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.


24

Interaction Design Best Practices – Fattore Wow


Trauma iOS

FX Guru iOS/Android

25

Control mapping and Touchscreen ergonomics


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!

26

Control mapping and Touchscreen ergonomics - La consapevolezza della fisicità 1/12


• 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

27



• 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

28



Uso Verticale con una mano libera

29



Uso Verticale con due mani

30



Uso Orizzontale con una mano Uso Orizzontale con una mano libera

31



Uso Orizzontale con due mani

32



• 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

33



• 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?

34



Uso Verticale con una mano libera

35



Uso Verticale con due mani

36



Uso Orizzontale con una mano libera

37



Uso Orizzontale con due mani

38

Control mapping and Touchscreen ergonomics – Considerazioni sul Layout 1/2


• 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

39

Control mapping and Touchscreen ergonomics – Considerazioni sul Layout 2/2


La spaziatura deve essere inversamente proporzionale alla dimensione degli oggetti

40

Control mapping and Touchscreen ergonomics – Feedbak e reattività 1/2


• 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”?

41

Control mapping and Touchscreen ergonomics – Controlli non visibili 1/2


• 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

42

Control mapping and Touchscreen ergonomics – Controlli non visibili 2/2


43

Wow Factor: Apps and UX Design Techniques ( for iPhone and iPad )


Grazie per l’attenzione!

wow factor apps and ux design techniques ( for i phone and ipad )

Presentations & Public Speaking

guidelines of hig hig

siri acrm net training

acrm net vanta

sviluppatori e

il web e il mobile

guidelines of hig prima

contatti acrm

il doppio