Introduzione

Web design: tecnologie, workflow, professioni, problematiche

Tecnologia web

• Internet = web?

Tecnologia web

• Internet (contrazione della locuzione inglese Interconnected Networks, ovvero Reti Interconnesse) è una rete di computer mondiale ad accesso pubblico, attualmente rappresentante il principale mezzo di comunicazione di massa, e che offre all'utente tutta una vasta serie di possibili contenuti e servizi. (http://it.wikipedia.org/wiki/Internet)

• Web: uno dei servizi fruibili tramite Internet(altri servizi: email, telefonia IP, canali chat IRC)

Tecnologia web

• Architettura client - server

Internet

client server

Database (DB)

File system

Linguaggi web

• Linguaggi

Internet

client serverDatabase (DB)

File system

Linguaggi web

• HTML (HyperText Markup Language): standard per la creazione di pagine web

• Creato e mantenuto dal W3C• XHTML 1.1 e HTML 5

• CSS (Cascading Style sheets): linguaggio per elaborare gli stili degli elementi HTML

Linguaggi web

• Javascript: linguaggio di scripting lato client• Jquery: libreria javascript per semplificare la

creazione di script

• Linguaggi di programmazione server-side: PHP, ASP e .NET, CGI, JSP…

• AJAX: uno script javascript interroga uno script PHP

Dispositivi client

Browser: programma per «sfogliare» il web

http://www.w3schools.com/browsers/browsers_stats.asp

Accessibilità

• WAI: Web Accessibility Initiative

Tecnologia web

• Importanza degli standard• Cross-browser: refers to the ability for a

website, web application, HTML construct or client-side script to support all the web browsers.

Media

• Inclusi da fonti esterne• Immagini: JPG, GIF, PNG• Video: Mpeg4, FLV…

Workflow

• Web ReDesign. Strumenti e metodi per la riprogettazione di un sito WebKelly Goto, Emily CotlerApogeo Editore, 2002

Workflow

1.Definire il progetto

2. Sviluppare la struttura del sito

3. Visual design e testing

4. Produzione e controllo qualità

5. Lancio e manutenzione

Workflow1. Definire il progetto

Esplorazione• Raccolta informazioni• Comprensione dell’audience• Identificazione dei requisiti di programmazione/backend• Analisi competitiva

Pianificazione• Definizione del budget• Tempistica e scheduling• Selezione del team di progetto• Aree e strumenti di collab.• Strategie di user testing• Documentazione del progetto

Chiarificazione• Individuazione degli obiettivi strategici• Briefing creativo

Avvio del progetto

Esplorazione

Pianificazione

Chiarificazione

Avvio del progetto

Workflow1. Definire il progetto

Esplorazione

Pianificazione

Chiarificazione

Avvio del progetto

Raccolta informazioni• Distribuzione, raccolta e analisi

di questionari• Raccolta di materiali e

documenti presso il clienteComprensione dell’audience• Identificazione delle

competenze tecnologiche dell’audience

WorkflowClient survey

WorkflowClient survey

WorkflowComprensione dell’audience

• Chi è l’utente?Elaborare uno o più profili dell’utente-tipo

• Dove trovare informazioni:– Client survey– Analisi dati di traffico dell’attuale sito web– Informazioni demografiche generali

WorkflowAnalisi competitiva (informale)

• Costruire un piano per l’analisi• Definire e categorizzare il competitive set• Creare una lista delle funzionalità• Effettuate analisi individuali e test di usabilità

informali• Creare una griglia delle funzionalità• Effettuare valutazioni complessive• Creare un report finale

WorkflowRequisiti tecnologici

• Funzionalità da includere:– Motore di ricerca– Login/registrazione– Personalizzazione contenuti – Sicurezza– Questionari/sondaggi/votazioni– Newsletter– E-commerce– CMS (Content Management System)

• Il sito deve integrarsi con un database pre-esistente?• Contatto con i responsabili tecnici/fornitori esterni

WorkflowObiettivi strategici

• Qual è lo scopo del sito?– Aumentare il traffico– Incrementare le vendite– Promuovere un nuovo prodotto– Fornire nuovi contenuti agli utenti– Alleggerire il carico del customer service– Rendere più intuitiva e semplice la navigazione del sito– Facilitare la consultazione e l’effettuazione degli acquisti– Impostare una struttura scalabile in vista di una crescita futura

• Come misurare gli obiettivi per determinare il successo del progetto?

WorkflowBrefing creativo

• Panoramica• Scopo• Obiettivi secondari e a lungo termine

Sintesi del progetto

• Profilo degli utenti tipo• Tipici task che eseguono

Profilo dell’audience

• Cosa pensa l’audience del sito attuale• Cosa si vorrebbe pensasse/provasse, come ottenere questo effetto• Aggettivi che descrivano il modo in cui il sito e l’azienda dovrebbero essere percepiti• Aspetti chiave da veicolare sul piano visuale

Percezione, tono, linee guida

WorkflowBrefing creativo

• Messaggio globale da trasmettere all’audience• Come veicolare questo messaggio• Stadi di sviluppo attraverso i quali conseguire questi obiettivi• Come misurare il successo del nuovo sito

Strategia di comunicazione

• In cosa l’azienda si differenzia rispetto ai competitor?• Quali sono le caratteristiche peculiari che distinguono l’azienda?• Quali sono le aree di maggior successo del sito attuale e perché?

Posizionamento competitivo

Messaggio di fondo

WorkflowScheduling

WorkflowDefinizione del budget

• 2 dimensioni– Stima per ruolo– Stima per attività

• Contabilizzazione modifiche extra indotte dal cliente

WorkflowUser testing

• Questionari online• Focus Group• Test di usabilità

Workflow2. Sviluppare la struttura del sito

Contenuti

• Organizzazione• Analisi dell’esistente• Schematizzazione gerarchica• Pianificazione del content delivery

Sito

• Mappatura• Analisi dell’esistente• Convenzioni

Pagina

• Gabbia concettuale• Navigazione• Nomenclatura e titolazioni• Analisi dei task e percorsi interattivi

Contenuti

Sito

Pagina

WorkflowContenuti

WorkflowMappa del sito

WorkflowGabbia concettuale (mockup)

WorkflowPercorsi di interazione

• Ordinare una consegna di fiori per la festa della mamma

• Effettuare una transazione finanziaria online, come una compravendita di azioni

• Cercare e ordinare una batteria di ricambio per il vostro cellulare

• Comprare una cuccia per il vostro cane

• Scenari utente

Workflow3. Visual design e testing

Creazione• Revisione degli obiettivi e del briefing• Brainstorming concettuale• Proposte di layout e verifica del

feedback

Convalida• Realizzazione del «protoito»• Testing funzionale

Applicazione• Creazione dei template grafici• Stesura di una guida di stile per il

design

Creazione

Convalida

Applicazione

Workflow4. Produzione e controllo qualità

Revisione• Linee-guida e specifiche• Stato e condizioni di avanzamento• Architettura di file e cartelle

Costruzione• Ottimizzazione della grafica• Template e pagine master in HTML• Realizzazione di script «leggeri»• Riempimento delle pagine• Sviluppo del back-end (se necessario)

Testing• Pianificazione del CQ• Monitoraggio della qualità• Priorità ed esecuzione del debugging• Verifica finale

Revisione

Costruzione

Testing

Workflow5. Lancio e manutenzione

Consegna• Guida di stile per produzione/aggiornamento• Documentazione del progetto• Archiviazione• Meeting retrospettivo• Training per il team di manutenzione

Lancio• Pianificazione dei comunicati• Registrazione presso i motori di ricerca• Lancio ufficiale (upload)

Manutenzione• Team di manutenzione• Piano di manutenzione• Misurazione dei risultati (successo)• Verifica della sucurezza

Consegna

Lancio

Manutenzione

Un redesign di successoin 10 mossePensate prima di agire

Identificate i punti chiave e gli obiettivi del redesign

Analizzate i vostri competitor

Coinvolgete il vostro target

Progettate per gli utenti, non per gli investitori

Attenzione da subito al lato tecnologico

Curate e verificate l’utilizzo

Non sottovalutate i contenuti

Comunicate con chiarezza gli obiettivi

Pensate a lungo termine, agite a breve termine

ProfessioniWeb designer• Information architect• Interaction designer / User experience designer

Graphic designer•UI designer• Illustratore•Fotografo/Videomaker•Media buyer/planner•Media producer•Art director•Visual designer

Web developer•Front-end developer•Back-end developer

Web content editor•Copywriter

Web marketing specialist•Marketing director•Web analyst•SEM specialist•SEO manager•Customer marketing manager•Device strategy manager

Project manager•Responsabile del controllo qualità

Social media specialist•Community manager