Il TAO della progettazione: dall’idea al prototipo, la documentazione nelle varie fasi del progetto web di M.C. Lavazza

COSA VEDREMO OGGI…

TEORIA

1. cosa intendiamo per interaction design

2. come cambia la progettazione

3. il concetto di crossmedialità

4. nuove discipline e nuove figure

5. progettare in un ecosistema

6. progettare per gli altri (TAO)

PRATICA

1. le fasi progetto

2. dall’idea al prodotto

3. ruoli e compiti

4. la documentazione

sul comportamento degli utenti

di strategia

di progettazione

IDEA

INTERAZIONE

IERI

OGGI

Dalle esperienze ponte…

alle esperienze crossmediali

ENTRAMBE

UTENTI

COMPASSIONE

SEMPLICITÀ

UMILTÀ

USER CENTERE

D DESIGN

PROGETTAZIONE

IDEAZIONE REALIZZAZIONE

MARKETING

Nascita idea

Formalizzazione idea

Definizione scopo

Progettazione strategica SEO

Pianificazione tempi, costi, risorse

SEM

Progettazione tecnica

Sviluppo

Produzione contenuti

Pubblicazione

Testing e valutazioni

Pure marketingsauce

Analisi di mercato

Fonte: IWA Web Skill Profiles

Le aree del progetto

UX DESIGN

IDEADefinizione

obiettivi

Business analysis

Definizione requisiti

Formalizzazione progetto

Sviluppo grafico

Sviluppo IT

Test

RILASCIO

Relazioni esterne

Commerciale

Customer care

Studi e analisi

Brand strategist

Marketing

Business strategy

Aree operative

Information technologist

Progettazione operativa

Usability test(esistente)

Target analysis

Marketanalysis

Heuristic analysis

Piano di Marketing

IT

Brand strategist

Scala requisiti

Piano attività

Value proposition

Marketing

SEO

SEM

Brand strategy

Template

Look & feel

CMS personalizzazione

accessibilitàusabilità

IT management

Html

Project/Program management

Information architecture & user interaction design (IA/UX)

User test

Check requisiti

Conce

pt m

odel

Usabi

lity

Plan

Usabi

lity re

port

Conte

nt

inve

ntor

yDef

. Per

sona

s

Site m

apW

irefra

mes

Flowch

art

Prot

otyp

ing

Analisi fattibilità

Progetto di Interaction designIA/UXBrand strategyProject/Program managementMarketingIT management

Test accessibilitàProg. e gestione

risorse

Linee guida

Analisi scenari

Modelli di interazione

Analisi costi/ricavi

Metodologia

Labeling/naming

Prog. sistemi/flussi di aggiornamento

Valutazione scelte IT

Modelli di interazione

Analisi previsionale di sviluppo

Accesib

ilità

Usabilit

à

sul comportamento degli utenti

di strategia

di design

3 TIPOLOGIE DI DOCUMENTO*

Dan Brown www.communicatingdesign.com/

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano un significato elevato e valori profondi per la propria vita.

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano…

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano un significato elevato e valori profondi per la propria vita. Ogni anno,

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che

I livelli del documento

I documenti sul comportamento degli utenti Le personas

La progettazione dei test di usabilità

I risultati dei test di usabilità

LE PERSONAS

Format per creare Personas

http://www.enginegroup.co.uk/service_design/m_page/personas

Personas di Engine Service Design

Person

as

di KIV

IO

Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che

Personas di Openmoko

Personas di Viget Labs

Personas iQContent

http://www.viget.com/advance/why-personas-are-valuable/

http://www.slideshare.net/toddwarfel/data-driven-personas

Personas di Todd Warfel

http://bobulate.com/documents/scenarios.pdf

Personas Razorfish

LA PROGETTAZIONE E I RISULTATI DEI TEST DI USABILITÀ

A cosa serve l’usabilità in un progetto di interaction design?

Scegliamo un approccio

Pianificare la ricerca

Selezione tester e logistica

Scrivere le linee guida

Attuare la facilitazione

Analizzare i risultati

Suggerire le raccomandazioni

Quali step per l’usabilità?

Obiettivi

Logistica e metodologia

Descrizione

Risultati

Indice

Overview

Executive summary

Obiettivi

Metodologia Partecipanti Training Procedure

Criteri Errori critici Errori secondari Valutazione soggettive

Obiettivi raggiunti completamento percorso

Classificazione problemi

Reporting risultati

1

2

I documenti di strategia

analisi competitiva

concept model

content inventory

L’analisi competitiva

Il concept model

Il content inventory

Esempi di content inventory

1

2

I documenti di design

mappe

wireframes

flowchart

prototyping

HOME

Mappe semplici…

o complesse…

Mappe meno classiche

Un vocabolario visuale

Pagina

File

Gruppo di pagine

Gruppo di file

connettori

frecce

crossbar

Add to chart label

Fn

footnote

Connettori secondari

Frecce secondarie

www.jjg.net/ia/visvocab/

area

area repetitiva

area secondaria

richiamo di flusso

punto di continuità in out

set di area secondaria

punti decisionali

ramo secondario

selettore secondario

Area di flusso

Aree di flusso e diagrammi

www.jjg.net/ia/visvocab/

Esempio di flowchart

START

END

1 abbonamento più abbonamentivuoi

Loc. + ID key card + Tipo

abb.

Es. RM 123456 GN

1

Loc. + ID key card + Tipo

abb.

X n. volte

Es. RM 123456 GN 123456 GN…INVIA SMS

Hai acquistato entro 30 ottobre

Hai acquistato dopo 30 ottobre

Tariffa scontata

Tariffa piena

RICEVI SMS di CONFERMA

Commissione carta SI 0,25

Valido come ricevuta d’acquisto da esibire all’entrata

valuta

a1 a2 a3

a

Cinzia vuole fare un abbonamento al teatro tramite mobile

altri esempi di flowchart

I WIREFRAMES

base

specifico

Tipologie di wireframes

Disegnati a mano….

O quasi

IL PROTOTYPING

Prototipi

Grazie!

mc.lavazza@gmail.com