UI/UX l' approccio giusto ad un progetto.
-
Upload
michele-riccio -
Category
Design
-
view
726 -
download
1
description
Transcript of 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)
SOMMARIO
UX UI CONCLUSIONI
Non vi annoierò con un sommario lungo e illeggibile.
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".
L’ IMPATTO
FATTI DELLE DOMANDE SULL’ IMPATTOCHE GENERA LA TUA INTERFACCIA
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”
COSA VEDI TU
MENUARTICOLO
SOCIAL
COSA PUO’ VEDERE L’ UTENTE
FONT TROPPO PICCOLO
QUAL E’ IL MENU TRA
I DUE?
LA FOTO E’ CLICCABILE?
RIFLETTETE SU QUESTO
L’ UTENTE NON E’ STUPIDO!ANCHE SE PUO’ SEMBRARE STRANO, MA HA
SEMPRE RAGIONE!
RIFLETTETE SU QUESTO
“LA COLPA E’ SUA CHE NONOSTANTE UNA UI FANTASTICA, NON RIESCE A USARLA!”
SBAGLIATO!
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
REGOLA FONDAMENTALE
LESS IS MORE SEMPRE
NON DARE NULLA PER SCONTATO
SECONDO IL DESIGNER...
NON DARE NULLA PER SCONTATO
SECONDO L’ UTENTE...
ORMAI SIAMO TUTTI MULTI-TASKING
ACCESSO A PIU’ CONTENUTI
MENO TEMPO PER TUTTO
MENO PAZIENZA
LE CONVENZIONI
LE CONVENZIONI SERVONO PER “STANDARDIZZARE” ALCUNI PROCESSI MIRATI A MIGLIORARE LA CURVA DI APPRENDIMENTO DEL SITO/APP O PER VELOCIZZARLA.
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
LE CONVENZIONI >> ESEMPI
ESEMPI NELLA VITA REALE
WC
ESEMPI NELLA VITA REALE
SIMBOLO USB
ESEMPI NELLA VITA REALE
ON - OFF
DIAMO UNA BUSSOLA ALL’ UTENTE
MINIMIZZA IL “RUMORE” VISIVO!
MENO TESTO RIDURRE TUTTO QUELLO CHE E’ INUTILE
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
...MA ANCHE NEL WEB!
RASSICURA GLI UTENTI DANDO “DELLE BRICIOLE DI PANE”
SEGUITE I MOVIMENTI
MIGLIORATE L’UX CONOSCENDO E ANALIZZANDO BENE COSA FA
L’UTENTE
TUTTO BELLO, MA LA REALTA’ E’ DIVERSA
NELLE RIUNIONI SI RIDISCUTE SEMPRE TUTTO, OGNI SETTORE CERCA DI
CONVINCE GLI ALTRI DELLA PROPRIA IDEA
TESTA, TESTA, TESTA
FAI TESTARE TUTTO DA PERSONE ESTERNECREA UN DOCUMENTO DA DISTRIBUIRE AI VARI TESTER. NON SCEGLIERE AMICI
O CONOSCENTI
COSA FARE - ALCUNI CONSIGLI
RIDUCI AL MINIMO I PASSAGGI DA FAR FARE ALL’ UTENTE
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’
COSA FARE - ALCUNI CONSIGLI
LESS IS MORE
COSA FARE - ALCUNI CONSIGLI
RIDUCI AL MINIMO IL RUMORECOSI DIMINUISCI IL TASSO DI
ABBANDONO!
COSA FARE - ALCUNI CONSIGLI
EVITA DI NASCONDERE LE INFO CHE INTERESSANO L’UTENTE
COSA FARE - ALCUNI CONSIGLI
IN FASE DI REGISTRAZIONE, CHIEDI SOLO LE INFO
NECESSARIE
COSA FARE - ALCUNI CONSIGLI
TESTARE, TESTARE, TESTARE, TESTARE!DIALOGA CON IL TUO GRUPPO DI TEST E
OTTIMIZZA SEGUENDO I LORO CONSIGLI!!
COSA FARE - ALCUNI CONSIGLI
CREA UNA SEZIONE FAQ PER IL SITO O DELLE SCHERMATE DI TOUR PER CHI SCARICA L’APP LA
PRIMA VOLTA
DIAMO LA DEFINIZIONE
L' UI è tutto ciò che rende possibile l’ interazione tra l’ utente e la
macchina / applicativo web o mobile
PREMESSA
NON ILLUSTRERÒ SINGOLARMENTE OGNI COMPONENTE COME
DOVREBBE ESSERE DISEGNATO.
IL PROCESSO
QUESTO PROCESSO AVVIENE SU
OGNI OGGETTO CHE CI CIRCONDA.
DESIGNER UI UTENTE
IL PROCESSO
ESEMPIO1
IL PROCESSO
ESEMPIO2
OK, CHE PASSI FARE QUINDI?
IDEA
STUDIO TARGETMERCATO
SCELTA STRADAMOBILE/WEB
WIREFRAME
PROTOTIPO
TESTING
OTTIMIZZAZIONE UI/UX
STUDIATE IL VOSTRO TARGET
E’ FONDAMENTALE CONOSCERE I NOSTRI FUTURI UTENTI/CLIENTI
STUDIATE IL VOSTRO TARGET
STUDIA LA GIUSTA STRATEGIA DI INTERAZIONE! CHE SIA UN SITO WEB O APP!
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.
SI DICE CHE...
UI COOL NON SIGNIFICA SUCCESSO
CUCITE UN VESTITO PERFETTO
IN BASE ALLE ESIGENZE, CREATE UNA UI CHE SIA ADATTA PER IL WEB/MOBILE (O ENTRAMBE)
CUCITE UN VESTITO PERFETTO
RAGIONATE ANCHE IN BASE AL CONTESTO DI UTILIZZO!
CUCITE UN VESTITO PERFETTO
L’ INTERFACCIA DI UN'APP MOBILE NON SEGUE GLI STESSI PATTERN DI UN’ INTERFACCIA WEB!
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
PROTOTIPO
SIETE QUASI ALLA FINE...
TESTA, TESTA, TESTA
FAI TESTARE TUTTO DA PERSONE ESTERNECREA UN DOCUMENTO DA DISTRIBUIRE AI VARI TESTER. NON SCEGLIERE AMICI
O CONOSCENTI
OTTIMIZZA UI/UX
DARE DELLE DATE E’ GIUSTO, MA NON FARTI PRENDERE DALLA FRETTA, QUESTA FASE E’
IMPORTANTISSIMA
COSA FARE - ALCUNI CONSIGLI
USA ICONE CON SIMBOLI “CONVENZIONATI”RIDUCE DUBBI NELL’ UTENTE
COSA FARE - ALCUNI CONSIGLI
FATTI AIUTARE ANCHE DAI COLORI PER INDICARE I VARI “STATI D’ANIMO”
COSA FARE - ALCUNI CONSIGLI
FONT CHIARO
COSA FARE - ALCUNI CONSIGLI
FAI “RESPIRARE” IL LAYOUT CON PAUSE TRA I VARI ELEMENTI
COSA FARE - ALCUNI CONSIGLI
MAI FAR VENIRE DUBBI ALL’ UTENTE.UN PULSANTE DEVE AVERE LA FORMA DI UN
PULSANTE.
COSA FARE - ALCUNI CONSIGLI
PROVATE SEMPRE DURANTE LA COSTRUZIONE, QUESTO ABBATTE I COSTI EVENTUALI DI
RESTYLING
COSA FARE - ALCUNI CONSIGLI
L’UI DEVE AVERE UNA BUONA CURVA DI APPRENDIMENTO, L’UTENTE NON DEVE
RITENERLA COMPLESSA
COSA FARE - ALCUNI CONSIGLI
DEVE ESSERE EFFICIENTE: DEVE POTER ESEGUIRE L’OPERAZIONE CON IL MINOR NUMERO
POSSIBILE DI PASSAGGI
COSA FARE - ALCUNI CONSIGLI
PIU’ E’ FACILE DA USARE > SARANNO LE POSSIBILITÀ CHE VENGA RIUTILIZZATA
COSA FARE - ALCUNI CONSIGLI
RENDI VISIBILI LE INFO PIU’ IMPORTANTI
COSA FARE - ALCUNI CONSIGLI
IMPORTANTE E’ DARE IL FEEDBACK VISIVO
COSA FARE - ALCUNI CONSIGLI
SII ORIGINALE, MA SENZA PERDERE DI VISTA LE “CONVENZIONI”
CONCLUSIONI
PAIN CLAIM GAIN BINGO
CONCLUSIONI
FATTO QUESTO, COSTRUISCI IL TUO PROGETTO TENDENDO PRESENTE TUTTE QUESTE COSE CHE
CI SIAMO DETTI.
GRAZIE
FACEBOOK.COM/RICCIOMICHELE
TWITTER.COM/MICHELERICCIO
IT.LINKEDIN.COM/IN/MICHELE-RICCIO