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

2. 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 IN
VULCANICALAB.COM
CO-FOUNDER DI COSMEETI.CO
(STARTUP OPERANTE NEL SETTORE
DEI COSMETICI)

3. SOMMARIO
Non vi annoierò con un
sommario lungo e illeggibile.
UX UI CONCLUSIONI

4. 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".

5. L’ IMPATTO
FATTI DELLE DOMANDE SULL’ IMPATTO
CHE GENERA LA TUA INTERFACCIA

6. 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”

7. COSA VEDI TU
MENU
ARTICOLO
SOCIAL

8. COSA PUO’ VEDERE L’ UTENTE
FONT TROPPO PICCOLO
QUAL E’ IL
MENU TRA LA FOTO E’
I DUE? CLICCABILE?

9. RIFLETTETE SU QUESTO
L’ UTENTE NON E’ STUPIDO!
ANCHE SE PUO’ SEMBRARE STRANO, MA HA
SEMPRE RAGIONE!

10. RIFLETTETE SU QUESTO
“LA COLPA E’ SUA CHE NONOSTANTE UNA
UI FANTASTICA, NON RIESCE A USARLA!”
SBAGLIATO!

11. L’ IMPORTANZA DEI NOMI
MENTRE COSTRUISCI UN SITO WEB O UN’ APP,
RICORDATI DI UTILIZZARE VOCI CHE SIANO
CHIARE PER TUTTI
OVVIO PER TE MENO PER L’UTENTE
TOMO LIBRO PIU’ IMMEDIATO LIBRO
OVVIO PER TE MENO PER L’UTENTE
FILTRA CERCA PIU’ IMMEDIATO CERCA

12. REGOLA FONDAMENTALE
LESS IS MORE SEMPRE

13. NON DARE NULLA PER SCONTATO
SECONDO IL DESIGNER...

14. NON DARE NULLA PER SCONTATO
SECONDO L’ UTENTE...

15. ORMAI SIAMO TUTTI MULTI-TASKING
MENO PAZIENZA
MENO TEMPO PER TUTTO
ACCESSO A PIU’ CONTENUTI

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

17. 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

18. LE CONVENZIONI >> ESEMPI

19. ESEMPI NELLA VITA REALE
WC

20. ESEMPI NELLA VITA REALE
SIMBOLO USB

21. ESEMPI NELLA VITA REALE
ON - OFF

22. DIAMO UNA BUSSOLA ALL’ UTENTE
MINIMIZZA IL “RUMORE” VISIVO!
MENO TESTO RIDURRE TUTTO QUELLO
CHE E’ INUTILE

23. 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

24. ...MA ANCHE NEL WEB!
RASSICURA GLI UTENTI DANDO
“DELLE BRICIOLE DI PANE”

25. SEGUITE I MOVIMENTI
MIGLIORATE L’UX CONOSCENDO
E ANALIZZANDO BENE COSA FA
L’UTENTE

26. TUTTO BELLO, MA LA REALTA’ E’ DIVERSA
NELLE RIUNIONI SI RIDISCUTE SEMPRE
TUTTO, OGNI SETTORE CERCA DI
CONVINCE GLI ALTRI DELLA PROPRIA
IDEA

27. TESTA, TESTA, TESTA
FAI TESTARE TUTTO DA PERSONE ESTERNE
CREA UN DOCUMENTO DA DISTRIBUIRE
AI VARI TESTER. NON SCEGLIERE AMICI
O CONOSCENTI

28. COSA FARE - ALCUNI CONSIGLI
RIDUCI AL MINIMO I PASSAGGI DA FAR FARE
ALL’ UTENTE

29. 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’

30. COSA FARE - ALCUNI CONSIGLI
LESS IS MORE

31. COSA FARE - ALCUNI CONSIGLI
RIDUCI AL MINIMO IL RUMORE
COSI DIMINUISCI IL TASSO DI
ABBANDONO!

32. COSA FARE - ALCUNI CONSIGLI
EVITA DI NASCONDERE LE INFO CHE
INTERESSANO L’UTENTE

33. COSA FARE - ALCUNI CONSIGLI
IN FASE DI REGISTRAZIONE,
CHIEDI SOLO LE INFO
NECESSARIE

34. COSA FARE - ALCUNI CONSIGLI
TESTARE, TESTARE, TESTARE, TESTARE!
DIALOGA CON IL TUO GRUPPO DI TEST E
OTTIMIZZA SEGUENDO I LORO CONSIGLI!!

35. COSA FARE - ALCUNI CONSIGLI
CREA UNA SEZIONE FAQ PER IL SITO O DELLE
SCHERMATE DI TOUR PER CHI SCARICA L’APP LA
PRIMA VOLTA

36. DIAMO LA DEFINIZIONE
L' UI è tutto ciò che rende possibile
l’ interazione tra l’ utente e la
macchina / applicativo web o mobile

37. PREMESSA
NON ILLUSTRERÒ SINGOLARMENTE
OGNI COMPONENTE COME
DOVREBBE ESSERE DISEGNATO.

38. IL PROCESSO
DESIGNER UI UTENTE
QUESTO PROCESSO AVVIENE SU
OGNI OGGETTO CHE CI
CIRCONDA.

39. IL PROCESSO
ESEMPIO1

40. IL PROCESSO
ESEMPIO2

41. OK, CHE PASSI FARE QUINDI?
OTTIMIZZAZIONE
UI/UX
TESTING
PROTOTIPO
WIREFRAME
SCELTA STRADA
MOBILE/WEB
STUDIO TARGET
MERCATO
IDEA

42. STUDIATE IL VOSTRO TARGET
E’ FONDAMENTALE CONOSCERE I
NOSTRI FUTURI UTENTI/CLIENTI

43. STUDIATE IL VOSTRO TARGET
STUDIA LA GIUSTA STRATEGIA DI
INTERAZIONE! CHE SIA UN SITO WEB
O APP!

44. 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.

45. SI DICE CHE...
UI COOL NON SIGNIFICA SUCCESSO

46. CUCITE UN VESTITO PERFETTO
IN BASE ALLE ESIGENZE, CREATE UNA UI CHE
SIA ADATTA PER IL WEB/MOBILE (O ENTRAMBE)

47. CUCITE UN VESTITO PERFETTO
RAGIONATE ANCHE IN BASE AL CONTESTO DI
UTILIZZO!

48. CUCITE UN VESTITO PERFETTO
L’ INTERFACCIA DI UN'APP MOBILE NON SEGUE
GLI STESSI PATTERN DI UN’ INTERFACCIA WEB!

49. 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

50. PROTOTIPO
SIETE QUASI ALLA FINE...

51. TESTA, TESTA, TESTA
FAI TESTARE TUTTO DA PERSONE ESTERNE
CREA UN DOCUMENTO DA DISTRIBUIRE
AI VARI TESTER. NON SCEGLIERE AMICI
O CONOSCENTI

52. OTTIMIZZA UI/UX
DARE DELLE DATE E’ GIUSTO, MA NON FARTI
PRENDERE DALLA FRETTA, QUESTA FASE E’
IMPORTANTISSIMA

53. COSA FARE - ALCUNI CONSIGLI
USA ICONE CON SIMBOLI “CONVENZIONATI”
RIDUCE DUBBI NELL’ UTENTE

54. COSA FARE - ALCUNI CONSIGLI
FATTI AIUTARE ANCHE DAI COLORI PER
INDICARE I VARI “STATI D’ANIMO”

55. COSA FARE - ALCUNI CONSIGLI
FONT CHIARO

56. COSA FARE - ALCUNI CONSIGLI
FAI “RESPIRARE” IL LAYOUT CON PAUSE TRA I
VARI ELEMENTI

57. COSA FARE - ALCUNI CONSIGLI
MAI FAR VENIRE DUBBI ALL’ UTENTE.
UN PULSANTE DEVE AVERE LA FORMA DI UN
PULSANTE.

58. COSA FARE - ALCUNI CONSIGLI
PROVATE SEMPRE DURANTE LA COSTRUZIONE,
QUESTO ABBATTE I COSTI EVENTUALI DI
RESTYLING

59. COSA FARE - ALCUNI CONSIGLI
L’UI DEVE AVERE UNA BUONA CURVA DI
APPRENDIMENTO, L’UTENTE NON DEVE
RITENERLA COMPLESSA

60. COSA FARE - ALCUNI CONSIGLI
DEVE ESSERE EFFICIENTE: DEVE POTER ESEGUIRE
L’OPERAZIONE CON IL MINOR NUMERO
POSSIBILE DI PASSAGGI

61. COSA FARE - ALCUNI CONSIGLI
PIU’ E’ FACILE DA USARE > SARANNO LE
POSSIBILITÀ CHE VENGA RIUTILIZZATA

62. COSA FARE - ALCUNI CONSIGLI
RENDI VISIBILI LE INFO PIU’ IMPORTANTI

63. COSA FARE - ALCUNI CONSIGLI
IMPORTANTE E’ DARE IL FEEDBACK VISIVO

64. COSA FARE - ALCUNI CONSIGLI
SII ORIGINALE, MA SENZA PERDERE DI VISTA LE
“CONVENZIONI”

65. CONCLUSIONI
PAIN CLAIM GAIN BINGO

66. CONCLUSIONI
FATTO QUESTO, COSTRUISCI IL TUO PROGETTO
TENDENDO PRESENTE TUTTE QUESTE COSE CHE
CI SIAMO DETTI.

67. GRAZIE
FACEBOOK.COM/RICCIOMICHELE
TWITTER.COM/MICHELERICCIO
IT.LINKEDIN.COM/IN/MICHELE-RICCIO