Progettazione web e semplicità: dieci regole per una creatività ragionata

Milano, 19-21 ottobre 2011 - Fieramilanocity

Fabrizio Caccavello - International Webmasters Association (IWA/HWG) [email protected] - http://fabriziocaccavello.akebia.it

1Può sembrare démodé impostare un ragionamento su una serie di regole o punti da rispettare. In controtendenza questo workshop intende riproporre in chiave web, tra design e tecnologie, i 10 punti trattati dal graphic designer John Maeda nel suo volume del 2006 "Le leggi della semplicità". Una progettazione web di successo non può prescindere da strategie rigorose e allo stesso tempo creative, tali da condurre lo sviluppatore in un percorso logico e ragionato. L'attuale abbondanza di risorse online scaricabili gratuitamente o a bassissimo costo (come i temi di Wordpress) se da una parte ha favorito lo sviluppo di progetti web meno caotici e più professionali rispetto al fai da te, ha contribuito dall'altra a rovesciare le fasi del ragionamento: gli sviluppatori invece di mettere al centro le esigenze del cliente piegano queste ultime alle caratteristiche del prodotto disponibile. Vedremo come nel mondo dell'abbondanza delle risorse tecnologiche la semplificazione e la riduzione ragionata possano essere vincenti rispetto alla quantità.

Progettazione web e semplicitàDieci regole per una creatività ragionata

giovedì 27 ottobre 11

http://www.iwa.it

http://www.iwa.it

mailto:[email protected]


http://[email protected]




Progettazione web e semplicità. Dieci regole per una creatività ragionata

2

About meFabrizio Caccavello

Web Project Manager e User Experience Designer.Mi occupo di strategie di comunicazione online, e di sviluppo di applicazioni web con particolare riferimento ai temi dell'accessibilità.

Cerco di applicare ai miei progetti processi di semplificazione e riduzione in modo da renderli più efficienti e semplici.

Sono amministratore e fondatore di Akebiasocietà di servizi per il web.

Sono membro del Consiglio Direttivo di IWA Italy.Sono relatore di IWA/HWG ai workshop formativi di SMAU.


http://www.iwa.it

http://www.iwa.it








3

IWA/HWG è un’Associazione professionale no profit riconosciuta leader mondiale nella fornitura dei principi e delle certificazioni di formazione per i professionisti della Rete Internet; è presente in 100 paesi, con 130 sedi ufficiali in rappresentanza di più di 165.000 associati.La sua missione:• Fornire programmi formativi di qualità;• Fornire agli associati supporto e collaborazione a livello regionale, nazionale e internazionale, nonché un marchio di affiliazione riconosciuto a livello mondiale;• Promuovere i principi universali di etica e di pratica professionale per tutti i professionisti della Rete Internet;•Fornire supporto per la definizione e lo studio di normative nei Paesi in cui è presente

Network: http://www.iwa.it http://www.itlists.org http://blog.iwa.it http://webaccessibile.org http://skillprofiles.eu

Partecipazioni internazionali

Partecipazioni nazionali


http://www.iwa.it

http://www.iwa.it





http://webaccessibile.org

http://webaccessibile.org




4

Perché IWA?

• Fare rete tra professionisti– Scambiarsi informazioni / esperienze– Condividere buone pratiche di lavoro• Apprendere– Consultare documentazione condivisa– Discutere con gli altri soci– Partecipare ad eventi formativi / informativi• Divulgare– Effetto “ebola”: condividere la conoscenza – Proporsi come discenti per seminari e corsi




5


Fabrizio [email protected]://fabriziocaccavello.akebia.it




http://fabriziocaccavello.akebia.it

http://fabriziocaccavello.akebia.it

la semplicità non è banale





7

Il web in una forma complessa

Yahoo nel 2001


http://www.iwa.it

http://www.iwa.it








8

Il web in una forma complessa

il motore di ricerca Arianna nel 2001


http://www.iwa.it

http://www.iwa.it








9

Semplificazione:aumento dell’efficienza e della complessità “invisibile”

Google nel 2001


http://www.iwa.it

http://www.iwa.it








10

creativoVS

tecnico

E’ uno scontro che non ha senso


http://www.iwa.it

http://www.iwa.it








11

IWA Italy Web Skills Profiles


http://www.iwa.it

http://www.iwa.it








12

Ripercorriamo le dieci considerazioni del libro (leggi)in chiave internet (siti e web application)

http://lawsofsimplicity.com/The Laws of Simplicity

Le Leggi della Semplicità2006 Bruno Mondadori

John Maeda


http://www.iwa.it

http://www.iwa.it





http://lawsofsimplicity.com

http://lawsofsimplicity.com



Laws of SimplicityJohn Maeda

Progettazione web e semplicità Dieci regole per una creatività ragionata

13

1 RIDURREIl modo più semplice per conseguire la semplicità è attraverso una riduzione ragionata

Cerchiamo di partire bene: ridurre non significa diminuire le dimensioni del testo

‣nr. di menù‣colonne di layout‣ funzionalità non necessarie‣animazioni

NON SI DIMOSTRANO EFFICIENZA E POTENZIALITA’ METTENDO TUTTO IN HOMEPAGEse possibile preferire il layout di destra a quello di sinistra


http://www.iwa.it

http://www.iwa.it









14

2 ORGANIZZAL’organizzazione fa si che un sistema composto da molti elementi appaia costituito da pochi

Da tempo si usano menù a tendina, accordion, menù su più livelli


http://www.iwa.it

http://www.iwa.it









15

2‣ L’origine dell’universo‣ Le galassie‣ Galassie a spirale‣ Andromeda‣ La Via Lattea‣ Il sistema solare‣ I pianeti non gassosi‣ Mercurio, Venere, Terra, Marte

‣ Pianeti gassosi‣ Galassie a sombrero

‣ Lo spazio intergalattico‣ L’evoluzione

ma non sempre una corretta organizzazione corrisponde a una semplificazione del contenuto

in questo esempio quasi si perde il livello di annidamento dei contenuti

ORGANIZZAL’organizzazione fa si che un sistema composto da molti elementi appaia costituito da pochi

Organizzare il contenuto


http://www.iwa.it

http://www.iwa.it









16

2Organizzare il contenuto è complicato, aiutiamoci con le tag (etichette)

Tag cloudsper organizzare i contenuti

avete mai cliccato?raramente, immagino

tag clouds di Punto Informatico



http://www.iwa.it

http://www.iwa.it









17

2Organizzare il contenuto è complicato, aiutiamoci con le tag (etichette)

Tag cloudsper organizzare i contenuti

LE TAG SONO UTILIZZATE PER COSTRUIRE IL MENU PRINCIPALE



http://www.iwa.it

http://www.iwa.it









18

3 TEMPOi risparmi di tempo somigliano alla semplicità

Tutti i browser puntano sulla velocità.

Aiutiamoli !

Analizzare con Firebug il caricamento della pagina


http://www.iwa.it

http://www.iwa.it









19

4 IMPARAla conoscenza rende tutto più semplice

Normative e linee guida

Risorse disponibili

Esperienze

Esigenze ed attese del

cliente

TUTTO CIÒ CHE C’È, C’È GIÀmushup consapevole


http://www.iwa.it

http://www.iwa.it









20

5 DIFFERENZEla semplicità e la complessità sono necessarie l’una all’altra

semplicità e complessità non hanno confini nettiè evidente che Google appare più semplice di Yahoo

ma visto nelle sue specificità Yahoo non è complesso


http://www.iwa.it

http://www.iwa.it









21

6 CONTESTOciò che sta alla periferia della semplicità non è assolutamente periferico

punti di riferimento e spazi

siete qui: percorso > contenuto

contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto

❖ menu 1❖ menu 2❖ menu 3

è un menù contestuale, riferito alla pagina?

l’utente saprà capire dove si trova?


http://www.iwa.it

http://www.iwa.it









22

6punti di riferimento e spazi

Questa versione di lightbox ha una indicazione per chiudere l’effetto, comandi da tastiera, chiare indicazioni per sfogliare.

CONTESTOciò che sta alla periferia della semplicità non è assolutamente periferico


http://www.iwa.it

http://www.iwa.it









23

7 EMOZIONImeglio emozioni in più piuttosto che in meno

la solita visione,

emozionante ma prevedibile

se fossi un pittore vorrei starci in questo posto

ok

X


http://www.iwa.it

http://www.iwa.it









24

8 FIDUCIAnoi crediamo nella semplicità

la fiducia è una filiera

utente si fida

si fida

si fida

progetto online

committente del progetto web agency

web agency tecnologie utilizzate


http://www.iwa.it

http://www.iwa.it









25

8basta pochissimo per perdere la fiducia

fiduciaweb agencyjquery funziona!garantisce massimo “progressive enancement”un menù si apre sempre, anche con browser vecchissimi

basterebbe una sola incompatibilità per far perdere la fiducia

FIDUCIAnoi crediamo nella semplicità


http://www.iwa.it

http://www.iwa.it









26

8basta pochissimo per perdere la fiducia

utentefiducia

è un messaggio chiaro che dà fiducia?

FIDUCIAnoi crediamo nella semplicità


http://www.iwa.it

http://www.iwa.it









27

9 FALLIMENTOci sono cose che non è possibile semplificare

ci sono cose che non si possono semplificaree che non conviene semplificare

vi siete mai chiesti perché i layout dei giornali online si assomigliano tutti?


http://www.iwa.it

http://www.iwa.it









28

10 L’UNICA

semplificare significasottrarre l’ovvio e aggiungere il significativo

Il progetto che state presentando al cliente è veramente adattato alle sue esigenze?

Il progetto che state valutando è veramente adattato alle vostre esigenze?

web agency

azienda


http://www.iwa.it

http://www.iwa.it









29

10semplificare significa

sottrarre l’ovvio e aggiungere il significativo

IL CODICE E’ POESIA

L’UNICA


http://www.iwa.it

http://www.iwa.it








30

Il bello del mostro


http://www.iwa.it

http://www.iwa.it








31

Il bello del mostro

WordPress è forse il migliore e più diffuso CMS

Esistono migliaia di temi (template) che si possono utilizzare


http://www.iwa.it

http://www.iwa.it








32

Il bello del mostro

Bellissimo tema ma siamo sicuri che è adatto alle esigenze del progetto che stiamo studiando?

E’ stata fatta un’analisi simile al percorso che abbiamo fatto fino a qui?


http://www.iwa.it

http://www.iwa.it








33

Il bello del mostro

per le aziende

se vi stanno proponendo un progetto che vi sembra sottocosto, siete sicuri che non vi stiano prospettando una soluzione quasi casuale?


http://www.iwa.it

http://www.iwa.it








34

1

2

3

4

5

6

7

8

9

10

RIDURREnon abbiamo solo la homepage

ORGANIZZAarchivia i contenuti seguendo una logica

VELOCITÀavete mai navigato in mobilità?

Dieci cose a cui pensare per non progettare a caso

RIUTILIZZAcopia e incolla responsabilmente

ORIENTAMENTOle briciole di pane sono essenziali

EMOZIONIgli utenti vogliono vivere il web

FIDUCIAè una filiera che non si può spezzare

GLI ALTRIraramente sbagliano

IL CODICE È POESIADIFFERENZEsottrarsi dal paragone


http://www.iwa.it

http://www.iwa.it








35

GRAZIE

http://twitter.com/cfabryjoin the conversation


http://www.iwa.it

http://www.iwa.it





Progettazione web e semplicità: dieci regole per una creatività ragionata

Business

Transcript of Progettazione web e semplicità: dieci regole per una creatività ragionata