
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Architettura dell’informazione e design: come coniugare al meglio due attività che potrebbero entrare in conflitto
Questa è la traduzione dell’articolo Information Architecture as an Extension of Web Design di Joshua Kaufman, pubblicato originariamente su Digital web Magazine. L’articolo è stato tradotto con il consenso dell’editore.
Sia gli architetti dell’informazione sia i web designer peccano di presunzione riguardo il ruolo che ricoprono. Pretendono continuamente di categorizzarsi in uno spazio unico e limitato, tentando di definire i reciproci ruoli. Da un lato, molti web designer non comprendono il ruolo dell’architettura dell’informazione nel contesto del web designer. I designer credono che gli architetti dell’informazione siano delle persone che tentano di organizzare ogni cosa. Dall’altro lato, molti architetti dell’informazione sottovalutano il ruolo del web designer all’interno di un progetto. Gli architetti dell’informazione pensano che il loro compito sia quello di scrivere le specifiche di un sito, mentre i designer dovrebbero codificarlo.
Quindi tale malinteso fa sì che l’architettura dell’informazione ed il web design vengano spesso considerate due categorie a sé. L’architettura dell’informazione sviluppa l’organizzazione, la struttura e l’etichettatura; il web design invece lo sviluppo tecnico e la progettazione visiva. Di conseguenza i web designer vengono indotti a credere che sono limitati in ciò che fanno e hanno sempre fatto, e che dovrebbero lasciare l’architettura dell’informazione agli architetti dell’informazione. Ciò non deve accadere.
Se è vero che tutto il contenuto di un libro come Information Architecture for the World Wide Web non si può imparare in un giorno, ci sono diverse tecniche dell’architettura dell’informazione che i web designer possono imparare facilmente e applicare ai loro progetti. Si tratta di concepire l’architettura dell’informazione come estensione del web design. Tale prospettiva presenta parecchi vantaggi:
Per mettere in pratica tale concetto, prenderemo in esame tre fondamentali attività del web design (navigazione, layout e codice) ed li estenderemo nel regno dell’architettura dell’informazione.
Iniziamo dalla navigazione, uno degli aspetti più amati e odiati del web design. Poiché al sito vengono aggiunte diverse pagine, un web designer è tentato di raggrupparle in categorie che appaiono a lui ragionevoli. Il problema però, come molti di voi sanno, è che all’interno del sito il visitatore spesso non condivide lo stesso schema mentale del contenuto e quindi spesso nell’area in cui sta navigando non riesce a trovare quello che cerca.
Come esercizio preliminare, sarebbe bene raggruppare le pagine in categorie al fine di sviluppare un sistema di navigazione. Ma dopo tale esercizio, dovreste chiedere ad alcuni potenziali utenti del sito di stilare una specie di scheda. Questo esercizio è utile al fine di scoprire in che modo la gente raggruppa le cose e i nomi che danno a tali gruppi. E’ così facile come dire 1-2-3:
Dopo aver eliminato parecchie schede, i modelli cominceranno ad emergere e sarà facile trovare uno schema principale per l’organizzazione.
Ecco come progettare l’estensione. Dopo aver individuato quali sono i contenuti che il sito conterrà, stilate una specie di scheda con almeno alcuni potenziali utenti del sito. In seguito, avrete quello che gli architetti dell’informazione chiamano una tassonomia, un sistema di classificazione gerarchica. Questa tassonomia si rivelerà estremamente preziosa al momento di decidere sulle etichette per la navigazione e le mappe del sito.
Poi, diamo un’occhiata ai layout, che da sempre sono un aspetto importante del web design. L’importanza del layout ha fatto sì che molti web designer diventassero molto abili ad utilizzare le sezioni di Photoshop. Fino al 1996, esso era sufficiente per la maggior parte dei progetti, e lo è ancora in qualche misura. Ma per siti vasti, multi-nazionali e con molti utenti, i web designer hanno la necessità di creare più di un semplice layout di pagina. Essi devono sviluppare uno schema della pagina o wireframe.
I wireframe descrivono i contenuti delle pagine attraverso l’uso di un diagramma a blocchi in scala di grigi. Essi possono variare nel dettaglio, ma generalmente mostrano la posizione dei contenuti, delle immagini, della navigazione e altre funzionalità della pagina. All’inizio, assomiglia un po’ al layout di una pagina di Photoshop, ma poiché si focalizza principalmente sulle informazioni piuttosto che sulla progettazione visiva, è un prezioso strumento per valutare le relazioni tra informazioni, contenuti e gruppi di contenuti. Ecco come progettare un’estensione. Prima di iniziare a progettare un layout in Photoshop, dovete creare un wireframe utilizzando dei software come Visio o OmniGraffle. Scoprirete che esso vi aiuterà a pensare al contenuto in maniera più analitica prima di decidere di che colore deve essere.
Così dopo aver analizzato insieme agli utenti parecchie schede, avete perfezionato la navigazione e la mappa del sito. Inoltre l’utilizzo del layout e della progettazione visiva è in gran parte facilitato dall’uso del wireframe. Tutto fatto, giusto? Beh, non sembrerebbe un sito web a meno che non venga sviluppato, adesso, vero?
Sì, a questo punto bisogna iniziare a scrivere il codice. A questo punto l’architettura dell’informazione eventualmente che cosa potrebbe aggiungere? Beh, se siete un web designer esperto di web standards potete aggiungere un bel po’.
Come web designer, con una approfondita conoscenza dei web standards, sapete come creare un sito web utilizzando HTML e CSS. Inoltre sapete l’importanza di un codice HTML che sia semanticamente strutturato, utilizza cioè gli elementi h1
per le intestazioni, gli elementi p
per i paragrafi, etc. Infine, sapete che la semantica può sopravvivere attraverso molteplici livelli di sviluppo — dall’HTML al CSS alla progettazione visiva. Quello che forse non sapete è che anche solo tramite l’applicazione di tale conoscenza, state già pensando quasi come un architetto dell’informazione.
Lo scorso anno durante una presentazione di Christina Wodtke e Nate Koechely (“First Things First: IA and CSS”) è stato accertato come usare uno sviluppo basato sui web standard possa essere d’aiuto per l’architettura dell’informazione e il design.
Ciò avviene principalmente in tre modi:
I collegamenti della mappa del sito compatibili con lo standard CSS sono nomi significativi che non iniziano con un numero. Un esempio a tale riferimento è globalLoginForm
.
Dopo, è necessario identificare le gerarchie nel markup, definendo l’ordine dei contenuti in modo efficace. Per fare ciò, prima di tutto date uno sguardo al codice HTML e assicuratevi che leggendolo da cima a fondo il contenuto abbia un senso. Poi, definite l’ordine dei titoli (h1
, h2
, h3
… h6
). Gli autori della presentazione sostengono che non bisogna seguire un ordine, ma le Linee Guida per l’Accessibilità dei contenuti web dichiarano chiaramente che esse dovrebbero essere ordinate correttamente senza saltare i livelli (ad esempio, h3
dopo h1
).
Per concludere, dovrete fare una lista dettagliata di tutti gli elementi della pagina per definire fra gli elementi le relazioni e le analogie. Ad esempio, è probabile che vari elementi della pagina serviranno per una funzione simile, come ad esempio le intestazioni per le aree di contenuto, ma saranno situati in diversi punti della pagina. Dopo aver individuato tra gli elementi i punti comuni, è possibile progettare in CSS e HTML tenendo presente la riusabilità del codice.
Ecco come progettare l’estensione. Prima di scrivere il vostro primo tag, completate le tre attività di cui sopra. Successivamente, attraverso il processo di progettazione ci si relazionerà con l’architettura dell’informazione, in modo tale da facilitare la comunicazione e migliorare il flusso di lavoro tra i gruppi addetti alla progettazione.
Come ho dimostrato, la linea tra web design e architettura dell’informazione non deve essere così trasparente come si pensa. Ci sono molte opportunità per i web designer di ricoprire le mansioni dell’architetto dell’informazione in ogni progetto. Questo non vuol dire che gli architetti dell’informazione non siano più necessari. Al contrario, con siti web che diventano ogni giorno più dinamici e complessi, gli architetti dell’informazione sono necessari più che mai. Ma come architetto dell’informazione che ha rivestito il ruolo di web designer, vi posso assicurare che gli architetti dell’informazione non sono gli unici in grado di organizzare le cose.
Traduzione a cura di Cinzia Pasqualino.
Se vuoi aggiornamenti su L'architettura dell'informazione come estensione del web design inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Francesco Esposito
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Consigli e strategie per costruire siti adatti all’apprendimento online
Lo sviluppo di servizi Web 2.0 e l’affermarsi di progetti aziendali che costituiscono l’evoluzione delle tradizionali Intranet sembrano avere ormai definitivamente sancito l’importanza della “costruzione” collettiva della conoscenza
La navigazione è la base di ogni buon sito. Tre semplici linee guida da Derk Powazek.
Tailwind CSS è un framework CSS che si propone come alternativa a soluzioni più tradizionali ed abbondantemente diffuse come Bootstrap o w3.css. Rispetto a questi ultimi, Tailwind CSS si contraddistingue per l’approccio diverso, non più basato su classi che realizzano elementi già preconfenzionati, bensì sfruttando una serie di classi di utility per implementare le nostre idee direttamente nelle pagine HTML.