define & design apps for success

Define & Design Apps for success

Goal : The tools you can use to make a mock-up design for mobile apps you are creating

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

Index

• Considerazioni generali

• La via della Apple

• La via di Google

• La via Microsoft

• Come integrare il design con le immagini

• Anatomia di un’App iOS

• Interactività – Gestures

• Progettare una Strategia

aCrm net : Giugno 2012 3

Considerazioni generali

• Il tuo telefono è ormai come un computer nelle tue mani

• Il tablet è un secondo schermo, lo puoi utilizzare per vedere la TV

• La tua macchina ha ormai un sistema centralizzato di infotainment

• Il 54% degli americani ha uno smartphone (IDC)• In Italia l’80% ha cellulare, il 68% ha uno smartphone

• Il 25% di tutto il traffico Web arriva da device mobili (Cisco)

• I bambini imparano ad usare le apps prima di sapere come si usa un computer


Perché le app mobili sono cosi usate?

• Perché qualsiasi persona può installare un’app.

• L’utilizzo di app è un successo per 3 motivi:

– One-click install—non hai bisogno di un avvocato per leggere il legalese

– Interfaccia utente naturale con l’uso del touch

– Le dimensioni dello schermo limitato costringono gli sviluppatori a concentrasi su funzionalità chiave


Progettare app di successo

• La progettazione di App è totalmente differente dalla progettazione desktop

• Abbiamo a disposizione solo schermi molito piccoli (tra 3.5 e 5 pollici),

• Il controller primario è un dito (le app sono utilizzate tramite gesture, possono anche essere inventate gesture custom, specialmente sui tablet che hanno uno schermo più grande)


Iniziare la progettazione - Design

• Il design mobile di apps non è molto differente da quello web

• Si usa carta e penna per le prime bozze di design

• Successivamente si usano tools di mock-up portare il disegno su schermo


Advantage

• Le bozze sono poco costose e possono essere presentati al cliente come prime soluzioni, si possono utilizzare anche degli stencil

• Le bozze possono fare vedere subito al cliente come potrà funzionare un’app

Prima di partire: Tenere a mente

• E 'molto più conveniente fare avanti e indietro da un cliente durante la fase di progettazione di un app quando esiste l'app solo come disegno.

• E 'molto più costoso cambiare le cose quando ci sono già programmatori che hanno iniziato a scrivere codice.

• Ci sono molti tipi di Sistemi Operativi e risoluzioni per dispositivi mobili, specialmente per Android

• Tenete ben presente che:– Ogni sistema operativo mobile ha le sue linee guida di progettazione– Un interfaccia mobile non è uguale ad un’interfaccia desktop– Le app (soluzioni) vanno progettate in scala, per essere utilizzate su differenti grandezze di

schermo, ma devono essere pensate in modo diverso tra dispositivi differenti


9

L’uso del telefono Mobile non è l’uso DesktopSpendiamo molto del nostro tempo davanti al nostro pc; cerchiamo, ricerchiamo e quando finito cerchiamo ancora. Normalmente abbiamo tempo di utilizzare il pc a casa, in aereo, o in qualsiasi altro luogo dove possiamo stare seduti e avere qualche minuto per accendere il nostro pc. Lo schermo è il nostro focus

aCrm net training course Jan 2014

Normalmente il tempo medio di interazione con un dispositivo mobile è di 17 minuti rispetto ai 39 minuti su desktop.

Le persone utilizzano i loro telefoni, quando sono in conversazione, in viaggio, o in attesa di una riunione

Per la progettazione dobbiamo prendere in seria considerazione come e quando viene utilizzato il telefono

10

Gli utenti Mobile non sono uguali agli utenti Desktop

Prendete quello che abbiamo definito sopra e includete altri dispositivi, supporti, sistemi operativi e dimensioni dello schermo; I vostri utenti mobile sembrano sempre di più differenti dalla loro controparte desktop


Gli utenti iPhone sono giovani e con più soldi

Gli utenti iPhone sono più propensi a fare acquisti da un dispositivo mobile che gli utenti Android

Aggiungete anche le differenze tra gli utenti smartphone e tablet

Gli utenti Android normalmente vedono molti più contenuti rispetto agli utenti iPhone che invece si concentrano su un solo contenuto

11

L’equazione mobileSono molte le variabili introdotte nella progettazione di un’esperienza mobile.Mixate l’assurdità dell’operatore telefonico e della potenza del segnale dipesa dalla vostra posizione.E mischiatela con l diversi fattori di forma e dimensioni di ogni dispositivo mobile che intendete utilizzare.


A questo aggiungete l’operatore telefonico e la potenza del segnale dipendente

dalla vostra posizione

Mescolate i diversi sistemi operativi (Android, iOS, Windows, etc.) e le differenti

versioni dei sistemi operativi.

12

L’opportunità mobileIl telefono mobile ci offre un'opportunità che non abbiamo mai avuto con la progettazione di esperienze web desktop. La possibilità di connettersi one on one con l’utente‐ ‐La possibilità di generare contenuti personalizzati per ogni tipo di utente, favorendo un’esperienza unica


Il telefono mobile mette nelle mani di un singolo utente la possibilità di navigare

in internet.

Il telefono mobile permette di poter accedere al Web in qualsiasi momento e in qualsiasi luogo e la possibilità di trasmettere o collegarsi direttamente one-on-one.

Il cellulare offre ad ogni singolo utente una telecamera, una connessione web, la possibilità di postare, twittare e messaggiare con il mondo esterno

Gli utenti potranno portare i loro telefoni e di conseguenza le loro esperienze ovunque

Human Interface Guideline (HIG) and UX 1/2

• I problemi reali per la progettazione mobile sono

– EXPERIENCE (UX)

– USER INTERFACE (UI)

Prima di andare avanti con la creazione di un'esperienza mobile ricordiamo che: Progettare per dispositivi mobili è “un’arte” che ci impone di imparare e capire le sue regole e i suoi principi guida.


Human Interface Guideline and UX

• Come si utilizza il proprio iPhone? Non è una domanda stupida. – La domanda ci porta a pensare qual è la user experience, o UX – Costruire una mobile UX è molto complesso ( richiede user experience design, user

interface design, e lo sviluppo deve essere completamente integrato con i due fattori fin dall’inizio del progetto)

• Io uso il dito per interagire con lo schermo del mio telefono. Io tappo, swipe, pinch, zoomo — esattamente le esperienze che faccio nella vita reale. – “L’esperienza” è il perché gli smartphone sono cosi popolari

La vostra user experience mobile non è la stessa user experience desktop, Gli utenti desktop non sono i vostri utenti mobile, e i vostri obiettivi dibusiness non sono i vostri obiettivi mobile. Il Mobile è differente Del desktop da ogni punto di vista.


Siate sempre pronti allo Stop

• Una app iOS non deve mai visualizzare una opzione di Close o Quit

• Le persone fermano l’uso di un’app quando passano ad un’altra app, ritornano alla schermata Home, oppure mettono il loro device in modalità sleep.

• Quando le persone escono dalla vostra app, il sistema multitasking di iOS mette la vostra UI in background e la sostituisce con l’interfaccia utente della nuova app.– Per essere preparati a questa situazione l’app deve:

• Salvare i dati dell’utente il più presto possibile (asap) o con una frequenza ragionevole• Salvare lo stato attuale quando viene fermata nel modo più preciso possibile

• Mai chiudere un’app iOS : viene interpretato come un crash

• Se tutte le funzionalità di un’app non sono disponibili, visualizzare una schermata che descrive la situazione e suggerisce cosa fare.

• Se solo alcune funzionalità sono disponibili, visualizzare una schermata o un avviso quando l’utente cerca di utilizzare una funzionalità non disponibile


Human Interface Guideline e User Interface UI

• I dispositivi mobili non sono creati allo stesso modo

• Oggi abbiamo 3 leader nel settore dei sistemi operativi per dispositivi mobili:– Google’s Android,– Apple’s iOS, – Microsoft’s Windows 8.

• Ad ogni sistema operativo corrisponde un hardware. – Apple ha solo un pulsante fisico nella parte inferiore dello schermo– Microsoft sfrutta i tiles nel design, – Google sta portando tutti i pulsanti fisici nel mondo virtuale

aCrm net : Gennaio 2014 16

HIG & Design approach

• E’ necessario costruire una UI e UX per ogni mobile operating system e hardware sul quale si presume di sviluppare

• Un approccio progettuale potrebbe essere: "Beh, se funziona bene su una piattaforma, allora possiamo mantenere il progetto uguale per tutte le piattaforme"

• Se voi usate lo stesso layout grafico per ogni piattaforma il rischio è: TOTAL DISASTER!

• Differenti piattaforme hanno una differente UX • Una tecnica tipica del design di Android prevede di mantenere i pulsanti di menu nella

parte alta dello schermo. I bottoni di menu su iOS sono nella parte bassa dello schermo

• E’ importante progettare correttamente e per ogni device la giusta UI and UX. Le persone che scaricheranno la vostra app sapranno la differenza


aCrm net training course Jan 2014 18

LA VIA APPLE

Apple engineers asked themselves when creating the iPhone : How do you interact with phone? Apple is a pioneer in HIG

Human Interface Guidelines (HIG)

• “Human interface” è il termine che usa Apple per descrivere cosa tenere in considerazione nella progettazione software.

• Apple ha creato una serie di guidelines (https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556)

• E’ assolutamente necessario studiare e conoscere cosa dice Apple e imparare dalla loro esperienza

• Le HIG sono un insieme di istruzioni che spiegano come si dovrebbero elaborare le soluzioni.


https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html

Apple’s Guideline

Apple fornisce un approccio per creare un’ottima Human Interface Lo scopo delle guidelines è quello di coprire i seguenti principi chiave, fondamentali per fornire un’esperienza coerente agli utenti Apple:

• Aesthetic integrity : L’applicazione deve essere bella

• Consistency : La user experience deve essere compresa immediatamente da tutti

• Direct manipulation : la possibilità di utilizzare touch e swipe e gesture

• Feedback : è la risposta visiva, fisica e audio ad una interazione dell’utente. Per uno smartphone, può essere un suono quando si invia un sms, si apre un app, si selezione un’icona, o la vibrazione del telefono quando arriva una chiamata.

• Metaphor : in una app è quello di riprodurre le azioni e le esperienze del mondo reale in un mondo virtuale

• User control : Il controllo deve essere posto nelle mani dell’utente. A nessuno piace quando il cellulare lavora da solo


Integrità estetica

• L’integrità estetica (Aesthetic integrity) non misura la bellezza di un’app

• Esso rappresenta quanto bene l’aspetto e il comportamento di un’app si integra con le funzionalità per avere un messaggio coerente

• Le persone fanno molto caso a verificare cosa promette e quali sono le funzionalità di un’app

• Se l’applicazione invia segnali contrastanti presentando una UI invadente, frivola o arbitraria, le persone potrebbero mettere in discussione l’affidabilità e la credibilità dell’app.

21aCrm net training course Jan 2014

Consistency

• La Coerenza (Consistency) permette alle persone di trasferire la loro conoscenza e competenza da una parte dell’app all’altra o addirittura ad un’altra app

• Un’app coerente non è una copia di un’altra app

• Un’applicazione coerente presta attenzione agli standard

• Un’app coerente offre un’esperienza interna coerente


Domande da porsi per verificare la consistency:• L’app è coerente con gli standard iOS?• Utilizza i controllo forniti dal sistema, le viste e le icone in

maniera corretta? • Incorpora le funzionalità del dispositivo come si aspettano

gli utenti? • E’ un’app coerente in sè?• Usa testi, terminologie e stili uniformi?• Le stesse icone significano sempre la stessa cosa?• Le persone possono prevedere cosa accadrà eseguendo la

stessa azione in differenti posti?

Direct Manipulation

• Coinvolgimento. Quando le persone manipolano direttamente gli oggetti sullo schermo, invece di utilizzare comandi separati, risultano più coinvolti ed è più facile per loro capire i risultati delle loro azioni

• La rotazione o il movimento dello schermo influenza la posizione degli oggetti

• Usare le gestures per manipolare gli oggetti sullo schermo

• In questo modo possono vedere che le loro azioni hanno risultati immediati


Feedback

Feedback • Riconoscere le azioni delle persone

• Mostrare loro i risultati di un’azione

• Aggiornarli sui progressi della loro azione

Evidenziare brevemente quando le persone li toccano

L’animazione può dare un feedback significativo che aiuta a chiarire i risultati delle loro azioni. Per esempio, le liste possono essere animate con l’aggiunta di una nuova riga per aiutare le persone a monitorare in modo visivo il cambiamento


TIPS

BEAR IN MIND WHEN YOU DESIGN

Approfittare di tutto lo schermo

• Estendere il contenuto utilizzando tutto lo schermo

• Tutte le rappresentazioni devono essere chiare e immediate


Lasciate che gli elementi di UI tranlucidi aiutino a vedere cosa c’è sotto di loro

• Gli elementi traslucidi—come il Control Center— forniscono:

• Contesto, aiutano gli utenti a vedere che sotto c’è contenuto e possono segnalare che stiamo utilizzando qualcosa di transitorio

• Un elemento traslucido offusca solo il contenuto direttamente dietro di esso, dando l’impressione di guardare attraverso la carta di riso, non sfoca tutto lo schermo

• L’innovazione va inserita nell’effetto wow non nell’utilizzo


Utilizzare il negative space.

• Evidenziare uno spazio “in modo negativo” parta il focus su una determinata area dell’applicazione

• La negatività degli spazi porta anche un senso di calma e tranquillità

• Lo spazio negativo può far apparire un app come efficiente e mirata


Lasciate che i colori semplifichino la UI

• Un colore chiave – come la tonailtà del “giallo Note”— evidenzia uno stato importante e indica interattività.

• Un colore chiave da ad un’app un tema visivo coerente


Garantire la leggibilità utilizzando i font di sistema

• In iOS 7 il sistema è in grado di regolare automaticamente la spaziatura e l’altezza di linea dei fonts, in questo modo il testo è di facile lettura e sembra della grandezza corretta per ogni dimensione

• A prescindere dall’utilizzo di fonts di sistema o personalizzati, assicurarsi di utilizzare il Dynamic Type in modo che le app siano in grado di gestire correttamente quando un utente sceglie una grandezza di font diversa.


Utilizzate pulsanti senza bordo

• In iOS 7, tutti i bar buttons sono senza bordi.

• Nelle aree di contenuti un pulsante senza bordi utilizza, il contesto, il colore e la call-to-action per indicare l’interattività

• Un pulsante content-area può visualizzare un bordo sottile o uno sfondo colorato che lo rende distintivo.


Transizioni avanzate : Calendario

• Il Calendario utilizza transizioni avanzate per offrire agli utenti un senso di gerarchia e profondità quando si muovono tra le visualizzazioni di anni, mesi e giorni.

• Nella vista dell’anno, mostrata di lato, gli utenti possono istantaneamente vedere la data di oggi ed eseguire le altre attività del calendario

• Quando gli utenti selezionano un mese, la vista si ingrandisce e rivela quella mensile. La data odierna rimane evidenziata e l’anno appare nel pulsante indietro, cosi gli utenti sanno esattamente dove sono, da dove vengono e come possono tornare indietro.



APPLE’S STORYBOARD TECHNIQUE FOR APP DESIGN


Se avete bisogno di costruire un tutorial per spiegare come funziona la vostra app,

beh, avete fallito!

Tenete sempre presente

• Il display è di primaria importanza, indipendentemente dalle dimensioni (integrità estetica).

• L’Orientamento del dispositivo può cambiare.

• Le Apps rispondono ai gesti, non ai click (manipolazione diretta).

• Le persone interagiscono con una sola applicazione alla volta (storyboard).

• L’help Onscreen è minimale.

• Safari per iOS fornisce l'interfaccia web.

• Se avete bisogno di costruire un tutorial per spiegare come funziona la vostra app, beh, avete fallito!


Gli schermi per iPhone

• Per ora abbiamo tre dimensioni dello schermo distinti per i dispositivi iOS:– iPhone (1–4S at 3.5 inches), – iPhone 5 (4 inches), – iPad (the iPad Mini è una verione downgradata dell’iPad 2).

Apple ci tiene ovviamente ad avvertire che le dimensioni degli schermi potranno cambiare


Gestures : Voi usate le dita

• Tenete il vostro iPhone con una mano e giocateci un pò• Vedrete che l’orientamento (Landscape e Portrait) cambia.

– Una delle prime cose da pensare in fase di progettazione è se l’app vada usata con un orientamento fisso o no.


Partire immediatamente 1/3

• Le persone trascorrono non più di un minuto o due nella valutazione di una nuova app

• Il periodo utile per la presentazione di contenuti e per catturare l’utente è di 30 secondi quindi dobbiamo cercare in questi 30 secondi di creare un’esperienza superiore

• Non bisogna dire alle persone di riavviare o restartare il proprio dispositivo dopo l’installazione della vostra app– Il riavvio richiede tempo e rende la vostra app inaffidabile e difficile da usare.– Verificate che la vostra app non abbia bisogno di usare troppa memoria o altre problematiche che

rendano difficile l’esecuzione del’app una volta avviata

• Le persone non dovranno scegliere nessuna impostazione, l’applicazione dovrà essere già configurata per comportasi nel modo che le persone si aspettano

• Se è possibile reperire informazioni nelle impostazioni dell’applicazione o nelle impostazioni del dispositivo interrogate il sistema per prendere i valori, non chiedete alle persone di inserirli nuovamente– Conservate queste informazioni nell’app



• Ritardate la richiesta di registrazione il più possibile.– E’ meglio quando gli utenti possono navigare all’interno della vostra applicazione e

utilizzare alcune funzionalità senza effettuare il login. – L’App Store non richiede agli utenti di accedere fino a quando non vogliono

acquistare un contenuto.– Gli utenti spesso abbandonano le applicazioni che li costringono ad effettuare il

login prima di poter fare qualcosa si utile.

• Onboarding Experience: L’Onboarding presente la caratteristiche di un’app e spiega come eseguire le operazioni più comuni.– E’ importante fornire agli utenti solo le informazioni di cui hanno bisogno per iniziare.

Dimostrate brevemente alcune delle caratteristiche più interessanti per gli utenti.– Utilizzate animazioni e interattività per coinvolgere gli utenti ed aiutarli ad imparare.

• Inserire testo con parsimonia• Non aspettatevi che gli utenti leggano un poema

– Dare la possibilità di uscire facilmente o skippare l’onboarding experience

• Lanciate sempre l’app con l’orientamento di default del dispoitivo



• Se possibile, evitare di richiedere agli utenti di leggere disclaimer o di accettare un contratto di licenza quando si avvia per la prima volta l’app.

• Quando l’app viene riavviata ripristinate lo stato nel quale gli utenti l’avevano lasciata in modo che sia facile riprendere ad usarla


Funzionalità non diponibile

Se solo alcune funzionalità dell’ app sono disponibili, visualizzate una schermata o un avviso quando l’utente cerca di utilizzare la funzione.


Suggerimenti

Rendere facile alle persone interagire con i contenuti e i controlli, dando ad ogni elemento interattivo la giusta spaziatura.

41• aCrm net training course • Jan 2014

Piazzare gli elemnti nella parte alta

Inserire gli elementi principali nella metà superiore dello schermo e da sinistra verso destr


Utilizzate oggetti grandi

Gli oggetti di grandi dimensioni catturano l’occhio e tendono a comparire più importanti di quelli più piccoli.L’allineamento tende a dare all’app un aspetto pulito e organizzatoGli utenti non dovrebbero scorrere orizzontalmente per leggere il testo o zoomare per vedere le immagini importanti


Utilizzare gli alert in modo essenziale

Le persone possono interagire con le applicazioni iOS in modi non lineari; è importante fornire agli utenti un modo per completare un task o ottenere informazioni senza distrazioni; Fornire sempre un modo ovvio e sicuro per uscire da un task

44

Riservare gli alert per le informazioni essenziali

Rispettare le preferenze degli utenti per la ricezione delle notifiche

• aCrm net training course • Jan 2014

Evitare troppi avvisi

45

Evitare segnalazioni inutili

Un alert è un potente meccanismo di feedback, ma dovrebbe essere usato solo per consegnare importanti (e idealmente fruibili) informazioni


Colori Chiave per rafforzare la visualizzazione

46

I colori chiave offrono agli utenti un forte indicatore visivo di interattività soprattutto in applicazioni che non utilizzano una grande varietà di altri colori.


Titoli o icone


Un’icona o un titolo che forniscono una chiara call to action invitano gli utenti a tapparlo.

“Add Bookmark” e “Directions to Here,” descrivono chiaramente le azioni che gli utenti possono effettuare

Imparare da Apple

aCrm net : training course 48

L’App Store utilizza un bottone con bordo per ogni riga della tabella per sottolineare la distinzione tra tappare la riga per avere informazioni e tappare il pulsante per avviare l’acquisto

L’ Inserimento di informazioni dovrebbe essere facile


L’immissione di informazioni richiede tempo e attenzione

Quando un’app rallenta l’utente chiedendo troppo informazioni prima che accada qualcosa utile, le persone potrebbero essere scoraggiate dall’app

Rendete più semplice effettuare scelte per l’utenteUtilizzate un selettore o una table view al posto di un campo di testo, perché la maggior parte delle persone trovano più facile selezionare una voce da un elenco che digitare parole

Resistere alle tentazioni

50

La gente non vuole essere costretta a guardare una pubblicità.

Bisogna essere meno intrusivi possibile

Resistete alla tentazione di inserire il vostro logo su tutte le pagine della vostra app


Il Colore migliora la comunicazione

51

Il coloro aiuta ad indicare interattività

Rende l‘app vitale

Fornisce continuità visiva

Se create colori personalizzati assicuratevi che funzionino bene insieme

Prestate attenzione ai contrasti cromatici nei differenti contesti : Se non c’è abbastanza contrasto tra lo sfondo, i pulsanti, la barra di navigazione e i titoli sarà difficile per l’utente interagire

Utilizzate bar translucenti

Il colore comunica, ma non sempre nel modo che intendiamo.

Ognuno vede il colore in maniera diversa

Spendete del tempo per cercare come l’uso di un colore può essere percepito in altri paesi e culture


52

Il testo deve essere sempre leggibileUtilizzare uno solo font per tutta l’app. Troppi font in un’app la rendono sciatta e frammentata.Utilizzare un font-weight normale o medio; non utilizzare un font light o bold


53

Icone e GraficaOgni app ha bisogno di una bella iconaL’icona dell’app è una parte impostante del proprio brandLe migliori icone sono uniche, ordinate, coinvolgenti e memorabili


54

Bar IconCi sono molte piccole icone che rappresentano i task più comunie le tipologie di contenuto utilizzate nelle tab bars, toolbars, e navigation bars una buona idea è quella di utilizzare lil più possibile e icone di default perché gli utenti sanno già qual è il loro significato


55

Utilizzare correttamente gli standards UI

• Per quanto possibile, è buona norma utilizzare gli elementi dell’interfaccia utente standard che si trovano nel framework UIKit.

• Le persone sono più tranquille con l’utilizzo degli elementi standard della UI perché sanno immediatamente come usarli nella vostra app.

• Se la tua app consente un’esperienza immersiva o un’attività coinveolgente, può esssere ragionevole creare dei controlli custom.

• Gli elementi di UI standard sono aggiornati automaticamente se iOS ridisegna questi elementi

• Ovviamente per gli elementi custom non è cosi.

• Non mescolate elementi UI presi da diverse versioni di iOS.

• Evitate di creare un elemento della UI custom che esegue un’azione standard

• Non utilizzate pulsanti e icone di sistema per scopi diversi da quelli standard


56

Rispondere ai cambiamenti di orientamento del dispositivo

Idea degli utentiGli utenti generalmente si aspettano di utilizzare il loro dispositivo iOS con qualsiasi orientamento, quindi è meglio quando la vostra app risponde in maniera appropriata.In particolare gli utenti di Tablet/iPad usano le app in qualsiasi orientamento, e si aspettano che le app funzionino

Massima prioritàMantenere il focus sul contenuto principale in tutti gli orientamenti Cambiare il focus quando il dispositivo viene ruotato disorienta l’utente


Lanciare l’app con l’orientamento supportatoSe un gioco gira solo in orizzontale, è opportuno lanciare l’app in orizzontale, anche se il dipositivo è in verticale.In questo modo se l’utente lancia l’app in verticale sa che deve ruotare il dispositivo per visualizzare il contenuto.

57

Lanciare l’app con l’orientamento supportatoEvitare di visualizzare un elemento della UI che dice all’utente di ruotare il dispositivo

E’ importante supportare entrambe le varianti di orientamento, sia verso destra che verso sinistraEs. Se un’app gira solo in orizzontale comunque gli utenti devono essere in grado di usarla si tenendo il device con il stato home sulla destra che sulla sinistra


58

Utilizzare le impostazioni solo se necessario

SettingsAlcune app potrebbero aver bisogno di dare agli utenti un modo per installare o configurare l’app ma la maggior parte della applicazioni dovrebbero evitare o ritardare la richiesta di impostazioni

Non incoraggiata l’uscita dall’appEvitate di mandare gli utenti nelle impostazioni. E’ importante ricordare che gli utenti non possono aprire le impostazioni senza uscire dalla vostra app, e mi sembra ovvio non incoraggiare questa azione


Ricerca orientataQuando progettate un’app e avete bisogno di informazioni dell’utente verificate se è possibile interrogare il sistema per averle

Quindi…Consentire agli utenti di impostare i comportamenti che vogliono all’interno della vostra appConfigurazioni

Per quanto possibile, non offrire le opzioni di configurazione nella UI principale. Può avere senso offrirle se la configurazione può essere cambiata spesso oppure è un controllo primario Ise invece gli utenti possono modificarle solo occasinalmente ha senso metterli in una view separata


LA VIA DI GOOGLE

Android is supported on more than 3,000 different devices

Considerazioni Generali su Google OS

• Ogni dispositivo ha una specifica diversa per:– hardware, – dimensioni, – screen resolution, – E molte altre caratteristiche.

• Dobbiamo garantire che l’app sia in grado di scalare e adattarsi ai diversi schermi

• Google design guidelines : http://developer.android.com/design/index.html

• Google ha anche una propria serie di user interface guidelines che gi designer e gli sviluppatori Android possono usare.


http://developer.android.com/design/index.html

http://developer.android.com/design/index.html

Google Design

• Visione creativa. (Ti senti ispirato? ) Le applicazioni Android sono frizzanti ed eleganti

• Principi di design: Le apps Android apps sono veloci e chiare

• Stile : il layout è il significato

• Patterns da applicare al proprio design– comprendono gestures, navigation, – action bar, widgets, settings, – and notifiche

La tua app deve saper combinare semplicità, bellezza, e deve creare un’esperienza magica


Focus sul design di Google - differenze

• I principi sdi design di Google sono molto vicini a quelli di Apple

• Google incoraggia il supporto alla human interaction con touch e gestures

• Google incoraggia inoltre la personalizzazione spinta della app

• Android è open-source questo consente agli sviluppatori di estendere il sistema operativo in modalità impossibili per Apple

• Gli utenti che usano per la prima volta l’app dovrebbero coglierne intuitivamente le caratteristiche principali

• Crea l’incredibile


Building Blocks

il sistema operativo Android è dotato di una serie di strumenti di interfaccia utente che è possibile utilizzare come mattoni per la progettazione. I blocchi principali sono: • Tabs, Liste, Griglie ,Scrolling • Spinners, Bottoni, Campi di testo ,Seek bars• Progress and activity Switches• Finestre di dialogo, Pickers

• Cioè che è diverso dal sistema Apple , tuttavia, è che si può scegliere di ignorare completamente le linee guida per creare il proprio design

• E’ improbabile che Google vietarà la vostra app

• Le linee guida sono state create per rendere facile l’utilizzo dell’app da parte dei vostri clienti



LA VIA DI MICROSOFT

With Windows 8, Microsoft has, for the first time, outdone Apple in user experience. Microsoft creates a smart-phone experience that is not a traditional Microsoft experience.

Once upon a time

• C'era una volta , una società chiamata Microsoft ,che dominava l'industria del software . Oggi , Microsoft è terza piattaforma mobile. Windows 8 è stata un'occasione per Microsoft invertire la rotta e diventare un pari concorrente di Apple e Google .

La sfida di Microsoft è ora ad una svolta epocale. Anche se è al terzo posto per quanto riguarda i sistemi operativi mobili sta perdendo terreno come sistema operativo per i PC. La ragione è molto facile da capire : telefoni e tablet possono davvero svolgere molteplici compiti che tradizionalmente venivano svolti dai desktop. Oggi, Controllo dell’e-mail, inviti alle riunioni , aggiornamento dei social media e modifica delle fotografie possono essere facilmente realizzate anche su un telefono. Mentre azioni più complesse come presentazioni , documenti, e molti strumenti di produttività girano alla grande sui tablet.

Questo non significa che non vi è più spazio per i pc desktop. Lo spazio c’è e ci sarà anche per i decenni a venire. Ma quello che è successo negli ultimi due anni è che i consumatori stanno utilizzando i soldi del loro portafogli per acquistare un diverso tipo di: Computer che mettiamo nelle nostre tasche, computer che possiamo tenere come un libro.

Microsoft stranamente è arrivata in ritardo nella rivoluzione degli smartphone. Ed è strano, perché Microsoft già dalla fine del 1990 aveva delle soluzioni per il mercato mobile.


La strategia Microsoft

• La strategia di Apple sugli SO è semplice: sul desktop avete OS X , e sul cellulare avete iOS . Entrambi i sistemi operativi hanno un patrimonio comune ma le funzionalità sono chiaramente diverse.

L’approccio di Microsoft legato alla mobilità è stato questo: Microsoft ha voluto mantenere i concetti del desktop anche per i dispositivi mobile. Per consentire di utilizzare i menu su un telefono , Microsoft ti ha dotato una penna stilo.

Ma non ha funzionato . Apple e poi Google con Android hanno dimostrato che il sistema operativo mobile non è lo stesso di quello desktop.

Così Microsoft è corsa ai ripari e ha imboccato una strada diversa , una strategia che va oltre il PC .

Windows Phone 7 è stata la prima chiara dimostrazione di una nuova direzione per Microsoft . L'interfaccia sfrutta un moderno stile di design conosciuto come “Tiles". Microsoft lo aveva inizialmente chiamato: stile "Metro“.


Ancora errori…

• L’arrivo di Windows 8 ha creato molti problemi, perché Microsoft ha disperatamente cercato cancellare il proprio patrimonio. Non solo, per confondere ancora di più le idee ai consumatori, Windows ha fatto uscire 2 versioni diverse del suo sistema Surface, una versione completa e una versione depotenziata, conosciuta come Windows RT.

• Poniamoci una domanda, se avessimo 600€ da spendere per comprare un tablet, acquisteremo un iPad, un Android (magari il note 8 di Samsung) o una versione depotenziata di Windows?

• La risposta a questa domanda? Nella seconda metà del 2013 Microsoft ha ammesso di aver perso 900milioni di dollari costruendo tablet windows surface che nessuno ha voluto


What’s new

• Una nuova metafora di design, denominata “Tiles” sostituisce le icone

• Le immagini piatte sostituiscono le icone dettagliate;

• E un font “artistico“ è utilizzato come parte del progetto di design per presentare i dati( per chi è curioso, il font utilizzato è Segoe UI).

• Inoltre è possibile sviluppare per dispositivi mobili utilizzando lo stesso linguaggio e gli stessi strumenti fino ad oggi utilizzati per sviluppare software per pc

• Le linee guida Windows Phone si trova no qui: http://dev.windowsphone.com/en-us/design.


I Principi Microsoft

• Sfruttare l’animazione incorporata nel sistema operativo per riflettere le interazioni della tua app

• Utilizza il movimento per guidare l’utente attraverso la storia della tua app

• Ridurre la digitazione

• Design pulito

• Design ordinato

• Veloce e fluido

• Tanto con meno


Il processo seguito in Microsoft

• Le linee guida Microsoft’ definiscono il processo necessario prima di iniziare a scrivere codice.

• Definisci le caratteristiche della tua app e concentrati sull’esperienza; come Apple, Windows 8 è un’app experience storyboard-driven (nessuna finestra!!).

• Tracciare il flusso dello storyboard e quindi applicare il wireframe design per ogni schermata

• Continuare a disegnare fino a quando la soluzione è quella meglio concepita

• Come per iOS e Android, l’esperienza in Windows 8 deve essere unica

• Non commettere l’errore di prendere un’app che funziona alla grande su iPhone e pensare che lo farà automaticamente anche su Windows



COME INTEGRARE IL DESIGN CON LE IMMAGINI

Microsoft has an expression: “Speak without words”

L’iconografia non è fatta solo di immagini

• L’iconografia è un elemento essenziale nella progettazione dell’app

• L’uso di testo come simbolo– Pensate ai lochi classici di Nike, IBM, e UPS, loro usano un semplice font come immagine

• A differenza del web, le applicazioni mobile non si limitano ad un set fisso di fonts

• Un buon carattere può sostituire un’immagine


Scegliere il Formato Immagine più giusto

• Usate le progressive networks graphic (PNG) per le app

• E’ supportato da tutte le piattaforme mobili

• Consente trasparenza e colori ricchi

• Ed è supportato da tutti i principali software di immagini


Lavorare con le Risoluzioni

• Ci sono milioni di dispositivi, come la prima generazione di iPad mini, che non supportano le immagini ad alta risoluzione

• Quando inserite un immagine in un’app non è necessario preoccuparsi del tempo di download, l’app viene eseguita in locale.

• PPI Pixel per inch - DPI Dot per Inch. Sono la stessa cosa


Una breve lista di devices PPI

• Here is a list of leading devices and their PPI: – Acer Iconia Tab—149 PPI – Amazon Kindle Fire—169 PPI – Amazon Kindle Fire HD—216 PPI – Apple iPhone (4, 4S and 5)—326 PPI – Apple iPad 2—132 PPI – Apple iPad Mini—163 PPI – Apple iPad 3, 4—264 PPI – HTC Evo—216 PPI– HTC Touch—245 PPI – HTC One—468 PPI – Huawei D2—443 PPI – LG Optimus LTE—329 PPI – Motorola Droid RAZR—256 PPI – Motorola Xoom—149 PPI – Nokia 820—217 PPI – Nokia 900—217 PPI– Samsung S3—306 PPI– Samsung S4—441 PPI– Samsung Galaxy Nexus—316 PPI – Samsung Galaxy Note II—267 PPI


Applicare un Desing Responsive al Layout

• La prima sfida di un Designer è decidere la densità delle immagini , ovvero il numero di pixels per inch.

• La seconda sfida ? Esistono molte e diverse dimensioni di schermo…


Una breve lista di dispositivi mobili, con la grandezza dello schermo in pixels.

Acer Iconia Tab—1280 × 800Amazon Kindle Fire—1024 × 600 Amazon Kindle Fire HD—1280 × 800 Apple iPhone (4 and 4S)—960 × 640 Apple iPhone 5—1136 × 640Apple iPad 2—1024 × 640Apple iPad Mini—1024 × 768Apple iPad 3, 4—2048 × 1536HTC Evo—480 × 800HTC Touch—480 × 800HTC One—1920–1080Huawei D2—1920–1080LG Optimus LTE—720 × 1280 Motorola Droid RAZR—960 × 480 Motorola Xoom—1280 × 800Nokia 820—800 × 480Nokia 900—800 × 480BlackBerry Z10—1280 × 768 Samsung S3—720 × 1280Samsung S4—1080 × 1920Samsung Galaxy Nexus—720 × 1280 Samsung Galaxy Note II—720 × 1280

77

Noterete che la stragrande maggioranza dei dispositivi si basa su Android

E che la maggior parte del rimanente è Apple

Solo un paio di questi sono Windows e Blackberry

Creare una soluzione che sia in grado di scalare rispetto alle dimensioni dello schermo è fondamentale

Ci sono alcuni tool che possono aiutarci, Firefox, , http://www.responsinator.com/


L’Applicazione Evernote

• Evernote è un grande esempio di soluzione digitale che gira su tutti i dispositivi desktop computers, tablets, e telefoni

• E’ un’app che permette in modo estremamente semplice di registrare gli appunti di una riunione e creare liste di cose da fare e alter in calemdario

• Vediamo come Evernote è stata pensata su ciascun device:– Le versioni Mac OS X e Windows di Evernote are pensate in modo diverso, perché gli

utenti di questi devices lavorano in modo differente– Le versioni per iPhone e iPad di Evernote sono differenti, perché uno ha uno schermo a

3.5- o 4-pollici l’altro a 7.8- o a 9.8-pollici; – La versione Android è ancora diversa

78

Evernote è pensata appositamente per adattarsi all’utente di ogni sistema operativo



ANATOMIA DI UN’APP IOS

To design you need to know some essential concepts. Knowing the names, roles, and capabilities of these basic components helps you make informed decisions as you design the UI of your app.

Essentials 1/2

• Normalmente le apps iOS utilizzano almeno uno dei componenti UI definiti nel framework UIKit

Gli elementi UI forniti dal framework UIKit si dividono in quattro grandi categorie:

80

Bars contengono le informazioni contestuali che segnalano algi utenti dove si trovano e i controlli che aiutano l’utente a navigare o ad eseguire altre azioni

Content views. Le viste contenuto racchiudono i contenuti specifici dell’app e possono permettere azioni come lo scrolling, l’inserimento, la cancellazione, e l’arrangiamento degli elementi.

Controls. I Controlli eseguono azioni o visualizzano informazioni.

Temporary views. Le viste temporanee appaiono brevemente per fornire agli utenti informazioni importanti o scelte e funzionalità aggiuntive.


Essentials 2/2

• Oltre agli elementi della UI, UIKit definisce gli oggetti che implementano le funzionalità, come gesture, disegno, accessibilità e supporto di stampa.

• Un elemento di UI è considerato un tipo di view perché eredita la classe da UIView.

• Una view sa già come disegnarsi sullo schermo, e sa anche quando un utente tocca l’interno dei suoi confini

• Per gestire un set o una gerarchia di view nella vostra app, in genere si usa un view controller.

• Un view controller coordina la visualizzazione delle views, implementa le funzionalità che stanno dietro alle interazioni degli utenti, e può gestire le transizioni da uno schermo all’altro.


Views e view controllersAnche gli sviluppatori devono pensare in termini di views and view controllers, gli utenti tendono a sperimentare un’app iOS come un insieme di schermate



INTERATTIVITA’

Users Know the Standard Gestures People generally expect gestures to work the same in all the apps they use

Gestures


Gestures

87

• Evitate di associare alle gesture azioni diverse da quelle standard

• Evitate di creare gestures personalizzate che richiamano le stesse azioni di quelle standard

• Evitate di definire nuove gestures a meno che la vostra app non sia un gioco

• Per i tablet considerate l’uso delle gestures multidita



DAL CONCETTO AL PRODOTTO

An app definition statement is a concise, concrete declaration of an app’s main purpose and its intended audience

89

Definite la vostra App

L’App Charter descrive la vostra applicazione, fornendo la base per la creazione del progetto per il prodotto che state costruendo.

Creare l’App Charter vi forza a pensare alla vostra app prima di spendere tempo e denaro nella scrittura dl codice.

Questa modalità vi aiuterà prima a capire se essere entusiasti della vostra idea oppure è meglio lasciar perdere.

Acquisirete una comprensione migliore della vostra app senza dover spendere un sacco di tempo o denaro

La prima cosa da fare quando di progetta un’applicazione è capire cosa si vuole creare

E’ necessario definire la vostra applicazione e capire cosa farà e per chi.

Un buon punto di partenza è l’ App Charter.


90

App charter

L’App Charter è anche un buon modo per condividere la propria idea con gli altri

Normalmente si pensa che mantenere il segreto sulla vostra app sia una buona idea, ma non lo è.

Si ha bisogno di condividere l’idea con gli altri per ottenere un feedback.

Spesso le risposte che otterrete vi aiuteranno a migliorare ciò che si pensa sia un concetto già impressionante , ma molte altre volte i feedback ricevuti vi diranno che è meglio trovare un’idea per un’altra app


91

Cosa inserire in un App Charter

• Il nome dell’App: il nome scelto o quello provvisorio

• App summary: Una breve descrizione della vostra applicazione e la sua differenziazione rispetto al mercato

• Feature list: Una lista di caratteristiche che potranno essere incluse nell’app

• Target audience: L’utente o gli utenti ideali della vostra applicazione

• I prodotti concorrenti: Una lista di altre applicazioni concorrenti


92

Nome dell’APP

Inizialmente non c’è bisogno di spendere un sacco di tempo per pensare il nome dell’app

Un buon nome arriverà sicuramente più tardi, quando c si troverà già nello sviluppo dell’app

Pratica comune: all’inizio utilizzate un nome in codice o un nome provvisorio

Apple usa nomi di felini per le principali versioni di OS X , mentre Android quelle di dolciumi,

iOS code names: http://www.imore.com/ios-version-codenames


93

App Summary

È una breve descrizione della vostra applicazione. Dovrebbe essere lunga come un paragrafo, non più di tre o quattro frasi.

Deve fornire al lettore una comprendione generale della vostra applicazione

Deve assolutamente includere e indicare ciò che la rende unica.

Deve anche aiutare a decidere quali features(caratteristiche) devono essere incluse nell’app.

Inserire cosa la differenzia dalle altre App o qual è lo “unique value proposition”

Vediamo un esempioOvation è un client Twitter per iPad che si concentra nel ricercare tutte le conversazioni che riguardano la vostra azienda e i suoi prodotti. Cerca nella timeline pubblica di Twitter e semplifica l’elaborazione delle risposte ai commenti formulate in merito alla vostra aziendaOvation è diversa in quanto la sua funzione primaria è quella di trovare le menzioni della vostra azienda e dei prodotti all'interno della timeline pubblica su Twitter. La sua funzione primaria è la sua proposta di valore unica, la sua differenziazione. E 'ciò che rende questa applicazione diversa dal resto.


94

Feature List

Sono le funzionalità che la vostra app eseguirà.

Un elenco di funzionalità che dice cosa la vostra app sarà in grado di fare.

Un brainstorming di funzionalità è il modo migliore per iniziare l’analisi

Il brainstorming è una tecnica per catturare tutte le idee, i suggerimenti e le soluzioni creative per un problema o argomento

Potete utilizzare il metodo del Mind Mapping


95

I Prodotti Concorrenti

Conoscere la concorrenza è importante. Aiuta a decidere che cosa rende la vostra applicazione diversa.

Ci dice anche se esiste un mercato per la vostra app. Se non ci sono competitors significa avere zero concorrenza, quindi o la vostra idea è qualcosa di mai pensato prima, poco probabile, oppure non esiste un mercato per la tua app, risposta più probabile.

Se pensate siano stati Google e Yahoo ad inventare i motori di ricerca siete fuori strada.

Prima dell’esistenza di questi motori c’era Archie (www.searchenginehistory.com per info sui motori di ricerca). Google and Yahoo! Hanno semplicemente trovato un modo migliore per indicizzare la ricerca. . . E battere la concorrenza.

Per battere la concorrenza, è necessario sapere quale essa sia!

Prendi il nome dell’app, il nome del venditore, l’URL dell’ app e delSito Web, e qualsiasi altra nota o commento su le app concorrenti



PROTOTYPING

A mockup is a good way to validate your UI design, and tools such as iMockups, Balsamiq, and Keynote make it possible to create clickable mockups that simulate the workflow of your app. But sometimes this is not enough.

97

Cos’è un Prototipo

Un prototipo è un applicazione di esempio scritta con l’obiettivo di convalidare il concetto di design o un gruppo di concetti

A differenza di un mockup, un prototipo è un’applicazione funzionante

Si può interagire, aggiungere e recuperare dati, eseguire calcoli e altro ancora.

Lo scopo principale di un prototipo è quello di validare un concetto o mostrare come qualcosa potrebbe essere realizzato.

è una vera e propria applicazione scritta con il codice sorgente

Non si dovrebbe spendere troppo tempo sullo sviluppo di un prototipo. Non c’è ragione per la quale un prototipo debba comportarsi come un’applicazione reale.


98

Creare un’app prototipo

E’ possibile creare un mockup cliccabile per il vostro prototipo, ma va bene per iniziare perché è un approccio limitato

Un’app prototipo è come qualsiasi altra applicazione. L’unica differenza è che il vostro prototipo non sarà condiviso con il mondo, e il mondo non utilizzerà il vostro prototipo per risolvere i problemi reali.


99

Gli obiettivi di un Prototipo

Ricoerdate l’obiettivo primario di un prototipo è quello di validare uno o più concetti.

Nel corso della creazione del prototipo si guadagna anche e soprattutto la conoscenza delle tecniche e si verificano quelle che funzionano e quelle no.

Armati di questa conoscenza si è in grado di scrivere codice migliore e in meno tempo.



FROM APP PLANNING TO TEAM CREATION

Una volta avuta la buona idea e capito che può funzionare come creiamo un team per il suo sviluppo?

define & design apps for success

Presentations & Public Speaking

il web e il mobile

e mischiatela

il design mobile

infotainment il

qualsiasi luogo e

qualsiasi momento e

il telefono mobile permette

forma e dimensioni