UI/UX l' approccio giusto ad un progetto.

67

description

Lezione su Usabilità e User Interface per Make a Cube for Expo Milano 2015 www.vulcanicalab.com

Transcript of UI/UX l' approccio giusto ad un progetto.

Page 1: UI/UX l' approccio giusto ad un progetto.
Page 2: UI/UX l' approccio giusto ad un progetto.

CHI SONO?

25 ANNI, MI OCCUPO DI UX/UI PER DISPOSITIVI MOBILE DAL 2008.

HO FONDATO LA MIA SOFTWARE HOUSE KFLAB.COM (2008) POI EVOLUTASI INVULCANICALAB.COM

CO-FOUNDER DI COSMEETI.CO (STARTUP OPERANTE NEL SETTORE DEI COSMETICI)

Page 3: UI/UX l' approccio giusto ad un progetto.

SOMMARIO

UX UI CONCLUSIONI

Non vi annoierò con un sommario lungo e illeggibile.

Page 4: UI/UX l' approccio giusto ad un progetto.

DIAMO LA DEFINIZIONE

L' UX è un approccio della progettazione per rendere interfacce web e mobile facili da usare per l'utente finale, senza richiedere all'utente una curva di apprendimento notevolmente eccessiva e "demotivante".

Page 5: UI/UX l' approccio giusto ad un progetto.

L’ IMPATTO

FATTI DELLE DOMANDE SULL’ IMPATTOCHE GENERA LA TUA INTERFACCIA

Page 6: UI/UX l' approccio giusto ad un progetto.

L’ IMPATTO

- NON DARE NULLA PER SCONTATO

- GLI UTENTI POTREBBERO FARE RAGIONAMENTI DIVERSI DAL TUO

- L’ UTENTE PUO’ VISITARE IL SITO O APP CON UN “PERCORSO DIVERSO”

Page 7: UI/UX l' approccio giusto ad un progetto.

COSA VEDI TU

MENUARTICOLO

SOCIAL

Page 8: UI/UX l' approccio giusto ad un progetto.

COSA PUO’ VEDERE L’ UTENTE

FONT TROPPO PICCOLO

QUAL E’ IL MENU TRA

I DUE?

LA FOTO E’ CLICCABILE?

Page 9: UI/UX l' approccio giusto ad un progetto.

RIFLETTETE SU QUESTO

L’ UTENTE NON E’ STUPIDO!ANCHE SE PUO’ SEMBRARE STRANO, MA HA

SEMPRE RAGIONE!

Page 10: UI/UX l' approccio giusto ad un progetto.

RIFLETTETE SU QUESTO

“LA COLPA E’ SUA CHE NONOSTANTE UNA UI FANTASTICA, NON RIESCE A USARLA!”

SBAGLIATO!

Page 11: UI/UX l' approccio giusto ad un progetto.

L’ IMPORTANZA DEI NOMI

MENTRE COSTRUISCI UN SITO WEB O UN’ APP, RICORDATI DI UTILIZZARE VOCI CHE SIANO

CHIARE PER TUTTI

MENO PER L’UTENTEPIU’ IMMEDIATO LIBRO

OVVIO PER TETOMO LIBRO

MENO PER L’UTENTE

PIU’ IMMEDIATO CERCA

OVVIO PER TE

FILTRA CERCA

Page 12: UI/UX l' approccio giusto ad un progetto.

REGOLA FONDAMENTALE

LESS IS MORE SEMPRE

Page 13: UI/UX l' approccio giusto ad un progetto.

NON DARE NULLA PER SCONTATO

SECONDO IL DESIGNER...

Page 14: UI/UX l' approccio giusto ad un progetto.

NON DARE NULLA PER SCONTATO

SECONDO L’ UTENTE...

Page 15: UI/UX l' approccio giusto ad un progetto.

ORMAI SIAMO TUTTI MULTI-TASKING

ACCESSO A PIU’ CONTENUTI

MENO TEMPO PER TUTTO

MENO PAZIENZA

Page 16: UI/UX l' approccio giusto ad un progetto.

LE CONVENZIONI

LE CONVENZIONI SERVONO PER “STANDARDIZZARE” ALCUNI PROCESSI MIRATI A MIGLIORARE LA CURVA DI APPRENDIMENTO DEL SITO/APP O PER VELOCIZZARLA.

Page 17: UI/UX l' approccio giusto ad un progetto.

LE CONVENZIONI

GIUSTO COMPROMESSO TRA CREATIVITÀ E CONVENZIONI.

(SOPRATTUTTO QUANDO SI PARLA AD UN PUBBLICO ETEROGENEO)

“VIE” NUOVE RESETTANO TUTTO QUELLO CHE L’UTENTE HA IMPARATO

Page 18: UI/UX l' approccio giusto ad un progetto.

LE CONVENZIONI >> ESEMPI

Page 19: UI/UX l' approccio giusto ad un progetto.

ESEMPI NELLA VITA REALE

WC

Page 20: UI/UX l' approccio giusto ad un progetto.

ESEMPI NELLA VITA REALE

SIMBOLO USB

Page 21: UI/UX l' approccio giusto ad un progetto.

ESEMPI NELLA VITA REALE

ON - OFF

Page 22: UI/UX l' approccio giusto ad un progetto.

DIAMO UNA BUSSOLA ALL’ UTENTE

MINIMIZZA IL “RUMORE” VISIVO!

MENO TESTO RIDURRE TUTTO QUELLO CHE E’ INUTILE

Page 23: UI/UX l' approccio giusto ad un progetto.

CREARE UN PERCORSO NELLA VITA REALE

IKEA INDICA BENE I PROPRI PERCORSI STABILITI E “OBBLIGA” I CLIENTI COSI A RESTARE PIU’ DEL TEMPO DOVUTO MA CON LA MASSIMA TRASPARENZA

Page 24: UI/UX l' approccio giusto ad un progetto.

...MA ANCHE NEL WEB!

RASSICURA GLI UTENTI DANDO “DELLE BRICIOLE DI PANE”

Page 25: UI/UX l' approccio giusto ad un progetto.

SEGUITE I MOVIMENTI

MIGLIORATE L’UX CONOSCENDO E ANALIZZANDO BENE COSA FA

L’UTENTE

Page 26: UI/UX l' approccio giusto ad un progetto.

TUTTO BELLO, MA LA REALTA’ E’ DIVERSA

NELLE RIUNIONI SI RIDISCUTE SEMPRE TUTTO, OGNI SETTORE CERCA DI

CONVINCE GLI ALTRI DELLA PROPRIA IDEA

Page 27: UI/UX l' approccio giusto ad un progetto.

TESTA, TESTA, TESTA

FAI TESTARE TUTTO DA PERSONE ESTERNECREA UN DOCUMENTO DA DISTRIBUIRE AI VARI TESTER. NON SCEGLIERE AMICI

O CONOSCENTI

Page 28: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

RIDUCI AL MINIMO I PASSAGGI DA FAR FARE ALL’ UTENTE

Page 29: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

REGOLA 80/20! (SE E’ UN’ APP)80% PERSONE USA IL 20% DELLE FUNZIONI!

FAI FOCUS ED ELIMINA O DAI MENO SPAZIO ALLE COSE MENO UTILIZZATE PER AUMENTARE

L’USABILITA’

Page 30: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

LESS IS MORE

Page 31: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

RIDUCI AL MINIMO IL RUMORECOSI DIMINUISCI IL TASSO DI

ABBANDONO!

Page 32: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

EVITA DI NASCONDERE LE INFO CHE INTERESSANO L’UTENTE

Page 33: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

IN FASE DI REGISTRAZIONE, CHIEDI SOLO LE INFO

NECESSARIE

Page 34: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

TESTARE, TESTARE, TESTARE, TESTARE!DIALOGA CON IL TUO GRUPPO DI TEST E

OTTIMIZZA SEGUENDO I LORO CONSIGLI!!

Page 35: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

CREA UNA SEZIONE FAQ PER IL SITO O DELLE SCHERMATE DI TOUR PER CHI SCARICA L’APP LA

PRIMA VOLTA

Page 36: UI/UX l' approccio giusto ad un progetto.

DIAMO LA DEFINIZIONE

L' UI è tutto ciò che rende possibile l’ interazione tra l’ utente e la

macchina / applicativo web o mobile

Page 37: UI/UX l' approccio giusto ad un progetto.

PREMESSA

NON ILLUSTRERÒ SINGOLARMENTE OGNI COMPONENTE COME

DOVREBBE ESSERE DISEGNATO.

Page 38: UI/UX l' approccio giusto ad un progetto.

IL PROCESSO

QUESTO PROCESSO AVVIENE SU

OGNI OGGETTO CHE CI CIRCONDA.

DESIGNER UI UTENTE

Page 39: UI/UX l' approccio giusto ad un progetto.

IL PROCESSO

ESEMPIO1

Page 40: UI/UX l' approccio giusto ad un progetto.

IL PROCESSO

ESEMPIO2

Page 41: UI/UX l' approccio giusto ad un progetto.

OK, CHE PASSI FARE QUINDI?

IDEA

STUDIO TARGETMERCATO

SCELTA STRADAMOBILE/WEB

WIREFRAME

PROTOTIPO

TESTING

OTTIMIZZAZIONE UI/UX

Page 42: UI/UX l' approccio giusto ad un progetto.

STUDIATE IL VOSTRO TARGET

E’ FONDAMENTALE CONOSCERE I NOSTRI FUTURI UTENTI/CLIENTI

Page 43: UI/UX l' approccio giusto ad un progetto.

STUDIATE IL VOSTRO TARGET

STUDIA LA GIUSTA STRATEGIA DI INTERAZIONE! CHE SIA UN SITO WEB O APP!

Page 44: UI/UX l' approccio giusto ad un progetto.

STUDIATE IL VOSTRO TARGET

MAGGIORE SARA’ IL TEMPO CHE DEDICHERETE A QUESTA FASE,

MINORE SARA’ IL TEMPO CHE PERDERETE A CAPIRE COSA VA O NON VA

DEL VOSTRO PROGETTO.

Page 45: UI/UX l' approccio giusto ad un progetto.

SI DICE CHE...

UI COOL NON SIGNIFICA SUCCESSO

Page 46: UI/UX l' approccio giusto ad un progetto.

CUCITE UN VESTITO PERFETTO

IN BASE ALLE ESIGENZE, CREATE UNA UI CHE SIA ADATTA PER IL WEB/MOBILE (O ENTRAMBE)

Page 47: UI/UX l' approccio giusto ad un progetto.

CUCITE UN VESTITO PERFETTO

RAGIONATE ANCHE IN BASE AL CONTESTO DI UTILIZZO!

Page 48: UI/UX l' approccio giusto ad un progetto.

CUCITE UN VESTITO PERFETTO

L’ INTERFACCIA DI UN'APP MOBILE NON SEGUE GLI STESSI PATTERN DI UN’ INTERFACCIA WEB!

Page 49: UI/UX l' approccio giusto ad un progetto.

WIREFRAME

REALIZZATE I WIREFRAME DELLA STRUTTURA FACENDO ATTENZIONE IN QUESTA FASE AGLI

SPAZI TRA GLI ELEMENTI, CERCATE DI REALIZZARE IN GRANDI LINEE LA UI CHE

IMMAGINATE FUNZIONI

Page 50: UI/UX l' approccio giusto ad un progetto.

PROTOTIPO

SIETE QUASI ALLA FINE...

Page 51: UI/UX l' approccio giusto ad un progetto.

TESTA, TESTA, TESTA

FAI TESTARE TUTTO DA PERSONE ESTERNECREA UN DOCUMENTO DA DISTRIBUIRE AI VARI TESTER. NON SCEGLIERE AMICI

O CONOSCENTI

Page 52: UI/UX l' approccio giusto ad un progetto.

OTTIMIZZA UI/UX

DARE DELLE DATE E’ GIUSTO, MA NON FARTI PRENDERE DALLA FRETTA, QUESTA FASE E’

IMPORTANTISSIMA

Page 53: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

USA ICONE CON SIMBOLI “CONVENZIONATI”RIDUCE DUBBI NELL’ UTENTE

Page 54: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

FATTI AIUTARE ANCHE DAI COLORI PER INDICARE I VARI “STATI D’ANIMO”

Page 55: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

FONT CHIARO

Page 56: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

FAI “RESPIRARE” IL LAYOUT CON PAUSE TRA I VARI ELEMENTI

Page 57: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

MAI FAR VENIRE DUBBI ALL’ UTENTE.UN PULSANTE DEVE AVERE LA FORMA DI UN

PULSANTE.

Page 58: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

PROVATE SEMPRE DURANTE LA COSTRUZIONE, QUESTO ABBATTE I COSTI EVENTUALI DI

RESTYLING

Page 59: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

L’UI DEVE AVERE UNA BUONA CURVA DI APPRENDIMENTO, L’UTENTE NON DEVE

RITENERLA COMPLESSA

Page 60: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

DEVE ESSERE EFFICIENTE: DEVE POTER ESEGUIRE L’OPERAZIONE CON IL MINOR NUMERO

POSSIBILE DI PASSAGGI

Page 61: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

PIU’ E’ FACILE DA USARE > SARANNO LE POSSIBILITÀ CHE VENGA RIUTILIZZATA

Page 62: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

RENDI VISIBILI LE INFO PIU’ IMPORTANTI

Page 63: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

IMPORTANTE E’ DARE IL FEEDBACK VISIVO

Page 64: UI/UX l' approccio giusto ad un progetto.

COSA FARE - ALCUNI CONSIGLI

SII ORIGINALE, MA SENZA PERDERE DI VISTA LE “CONVENZIONI”

Page 65: UI/UX l' approccio giusto ad un progetto.

CONCLUSIONI

PAIN CLAIM GAIN BINGO

Page 66: UI/UX l' approccio giusto ad un progetto.

CONCLUSIONI

FATTO QUESTO, COSTRUISCI IL TUO PROGETTO TENDENDO PRESENTE TUTTE QUESTE COSE CHE

CI SIAMO DETTI.

Page 67: UI/UX l' approccio giusto ad un progetto.

GRAZIE

FACEBOOK.COM/RICCIOMICHELE

TWITTER.COM/MICHELERICCIO

IT.LINKEDIN.COM/IN/MICHELE-RICCIO