Progettazione di interfacce web: approccio centrato sull'utente, Appunti di Architettura Tecnica

Scarica Progettazione di interfacce web: approccio centrato sull'utente e più Appunti in PDF di Architettura Tecnica solo su Docsity!

DOMANDE

f)

Cosa

si intende

per

macro

atto ?

espedienti linguistico

testuali che

orientano

l' utente all'interazione

'

. ci si

multimodali to

'

? E

come

differisce

da multimedialità

Multimediale

:

incorpora

2 diversi media ( immagini

a

suoni

)

Multimodale

:

fa

riferimento

al

modo

di comunicare

,

attraverso

→ testi

→

suoni

\

immagini

differenza tra

segno

di

Peirce

e

Sansone

?

1. Cos' e

'

un

segno

?

Peirce

:

tripartizione

dei

segni

Saussure :

significante

significato

Qualsiasi cosa

puo

'

essere un

segno

finche

'

uno non

lo

interpreta

diversamente

.

( token

)

Non ho

capito

bene

la

differenza

tra metafora

e

metonimia

per

le

icone

(

cez 11

le

opere

di Rozza

Metafora.

(

paragone

il mio cane è

un razzo n

Metonimia

;

similitudine

congiunzione (

sostituzione

di

un' espressione con

un'

altra

connessa

semantica

Ascolto

roztart

In

pagina

175

riga

15 e

Pac 176

riga

4 scrive a

volte metonimia è

sbagliato

MAPPA

MENTALE

società usano

ai

strumenti comunicazione

emittente canale →

Ricevente

mente

→

codificate

codifica

Modello

Modello della comunicazione di Jacobson

→

Modello

psicologico

→

etnografico

÷

Modello

pragmatico

nome

Pragmatico

: azione tiritera

zione

sociale

linguaggio

umano come sistema

di azioni verbali

Comunicazione

dai

vari

modelli

→ dominio interezza sociale

(

516

→

Mediata dal

Computer

Educazione

istituzione

PER

comunicare in rete serve :

famiglia...

Contestualizzazione

Nuove

competenze

conoscente)

Multimedialità

e

Home page e

abilita

'

Multimodali

tai

(architetto conoscenza

,

contenuto

,

informatico

,

scrittore

,

designer

MAIL.localifornia.IE

design

( cognitivo

,

contenuto

,

interattività

, navigazione

,

grafico

,

esperienziale

¥

~

¥ !

!

dialogo

con

contenuti

principi

di

modo in

grafica

:

user

experience

l' utente

e tematici

del interazione cui si • comunicativa

come

percepii

sito

/

menu

'

uomo

• macchina

naviga

nel • allusiva

scee memoria .

sito

interattiva

=

contenitori della dimensione

TEMPLATE

grafico

• iconica e testuale

di

←

Per progettazione

si

Architettura

di

conoscenza e

contenuto design

criteri e

regole

per

criteri e

regole

per

×

il

creare

contenuti

elettronici

fido

:

alogici

}

WEB

|

f.

divisione in

temi

e sottolinei

• Norme

di

composizione

linguistica

(

testi

)

re

Elmetto

.

}

Progettazione

di siti

e

portali

→

Coerenza

e Coesione

informatica

design cognitivo

( architettura

di

conoscenza

)

riceve

,

memorizza

,

Il

designer

della

conoscenza

deve

sapere

come

l'

utente elabora

, reagisce

attraverso

: info centrale

,

info

spezzata

in blocchi

,

movimento

(

linn

)

→ MAPPA

MENTALE

grafica

e colore

blocchi

info

suggerimenti

testuali

spazi

bianchi

Link

,

nazioni

,

tabelle

,

parole

pochi aggettivi

,

Poco testo

TRA GRAFICA

,

colonne

Leggibilità chiave

,

mappe testo

..

.

Come l'

utente

reagisce

col sito

Memoria a breve e

lungo

termine

1

design

Di

CONTENUTO

Tipo

di

sito

,

di rete

Scegliere ,

organizzare

e

codificare

l'

informazione

→

di

contenuto ,

dominio tematico

¥

AREE SEPARATE

e

Modelli di

rappresentazione

:

fatti

,

eventi

,

procedure

....

Testo

verbale

e

content

Testi nella rete

:

chat

,

tweet

,

commenti

.

..

.

→

Riprogettare _

Meg

Testi

brevi

,

No retorica

o ERRORI

,

aggiungere retta informazione

,

focalizzare link

,

no troppa

ROBA

design di interazione

dialogo uomo

• macchina

È È

of

MACRO atto informatico :

Progettista

→

Software

/

sito

←

←

cÌÉ←

utente

consente

all'

utente

di

interagire

testo

MACROATO info

.

:

espedienti linguistico

testuali che

orientano l'utente all'interazione

(

aree

tematiche ,

documenti

stesti

elettronici

,

linguaggi...

testo digitale : sito

contenitore che racchiude

file

testuali

,

immagini ,

video

,

suoni

...

capire

i contenuti

/

temi

info

testuali

μ

.

la

fune

.

intersit identif tematico

lfunz

.

→ f.

i.

meta

comunicazione

infor

→ f. i. comuni. infor

Cosa

l'

utente

può

fare e

come

il

sw

risponde

oggetto

• testo INTER

!

Sequenze

operative

o icone enter ,

grafo

motori funzione interattiva

← f.

i contatto

Segnalazione

che il sw sta

lavorando (

clessidra

)

azione

relazione

design di navigazione

3

modelli

architetturali :

gerarchico

Diversi

scopi

: memorizzazione

,

contestualizzazione

,

identificazione tematica

menù →

piega:{

de

USAGE

and

USER

Center

ed

design

basi

design

scopo

:

D.

Norman

padre

psicologia cognitiva )

user center

ed

→

avvicinarsi

all'utente

,

riscatto

Mutamento

Modello

sfruttare conosc

. Modello

Modello da

paradigma

: Usabilità ←

Universale

←

pregresse

←

prog

.

→ Sistemi

Utente

←

Metafora.

.

Caffettiera

¥

usage centered

Approccio al design

centrato succiso :

Collezione attività coordinate

Parametri

Norman :

Parametri

constata

→

Ciclo di

vita

che

contribuisce

all' usabilità

Semplif

.

strult

.

compiti

o struttura

software

attività

indipendenti vengono

condotte

in

ciclo continuo

parallelo ,

in modo

che i

compiti

che l'utente

faro

'

Considerare

i vincoli

.

Semplicità

¥ vengano

a

comprendersi

con +

dettaglio ,

standardizzare

o

Fornire feedback Modello

attivita !

aiutando il

progettista

margine

d' errore (clessidra

)

È

straziare

concetti

q

Secondo

ingegni

.

Ce

' a

Scuola Neozelandese

e

Californiana

5 modelli

di

Const

.

e Locri

.

:

Qualsiasi cosa

puo

'

essere un

segno

finché

Raccolta

astratta

.

/ :

rapporto

utente

• sistema

uno non

lo

interpreta

diversamente

.

token)

di

bisogni

,

interessi

compito

:

compiti

ytente-yrapresent.me caratteristiche di

• contenuto

:

strumenti interfaccia

nÈ

\

utenti e

sistema

f.

operazionale

: contestatissima

→

IIII

e si tratta di

Ho

implementare

:

progetti

interfaccia

]

utente e

_

raccolta ruoli

utente ed alle Modello Ruolo utente

relazioni tra di essi relazioni

tra

di essi

In

relazione all'

uso

,

utente ed

Finalista

)

←

all'

interfaccia :

linguaggio segni

co

2

Tempo e

LUOGO

: nel web non

esiste

PARAMETRI accessibilità e usabilità

Contesto

normativo per rendere piu accessibili i siti

web

( direttiva Eu , standard Iso , wcaa , legge 412004 )

direttiva eu

Il concetto di

accessibilità

dovrebbe essere inteso come

tecniche

per rendere i contenuti più

accessibili → condizionale

Non si applica a siti ed app europee → 4 principi dalla WAI : percepibili ta ! utilizzabilità , comprensibilità , solidità

• in

America : Rehabilitation Act →

agenzie

federali devono

rendere accessibili i servizi e tecnologie Qualita '

SOFTWARE

usabilità iso

Qualità

: caratteristiche di un prodotto sw , per soddisfare i

bisogni

dell'

État ( non

solo

tecnicismi

interna : caratteristica predittiva

, importanza

di rilevare gli elementi che possono essere

modificati durante il ciclo di vita

ext : fase

di test del

prototipo , dove si inserisce il

prodotto

nel contesto dove dovro ' operosi :{ razza in uso : valutazione della

risposta

ai bisogni dell' utente in termini di efficacia ,

efficienza e soddisfazione

gran parte

dei costi 1- Parametri qualita ' : funzionalità , affidabilità , usabilità , efficienza , mantenibili tai , portabilità , soddisfazione , efficacia

funzionalità :

il

prodotto

sw deve essere

funzionale

e deve rispondere alle esigenze

dichiarate

usabilità

: capacità del prodotto su di essere compreso

ed usato

in

maniera

semplice

efficienza

: fornire

i

risultati in

tempi ragionevoli , in funzione →

• efficacia :

raggiungere il risultato con completezza ( a Nielsen : massimo 3 click x

raggiungere

lo scopo ¥

molto importante Criteri usabilità : Percezione ,

usabili

, consistenza ,

safety

, trasparenza , apprendi bilità , tolleranza

agli

errori .

..

Percezione : comandi sempre disponibili e percettibili a. flessibilità : deve adattarsi al contesto

browser coerenza : Organizzazione dei contenuti dei menù per aree tematiche

a verticale e orizzontale coesione

: Criteri di referenza

e

conferenza del sito →

ripetizione e ridondanza Usabuislita ' : legato

all'

uso del

prodotto

in termini di efficacia ,

efficienza e soddisfazione

→ genera

ROI

Accessibilità:

insieme di soluzioni

tecnologiche per abbattere barriere tecnologiche , sensoriali e

motorie

nata

grazie

al W3c che avvia il WAI

proponendo 13

linee

guida

, per ridurre barriere tecn . . sensoriali W3C : Consorzio per sviluppare le potenzialità del web , gli

standard

per il www ( linguaggi e protocolli

usabilità (

architettura

cognitiva ) implica

accessibilità (

tecnologia ) e viceversa

VK.atgif.it/-sSipossonousaresoftw M

ROI : .

ogni

investimento deve generare

1. 1

am Servono esperti

17 in piu ' per aiutare

ipovedenti

.... )

profitto

inserire

l'

usabilità in

progettazione , Riferimento genera vantaggio al cliente e

risparmio

Pag

2 in manutenzione 4

Memoria semantica

e architettura cognitiva

Intelligenza

: si

forma sulla base

dei

dati

dall' ambiente

circostante

che

interpretiamo e relazioniamo

.

Nel caso

di IA

ci sono

degli aspetti

da

tenere

in considerazione

:

• dati : sono dati molto

eterogenei

:

chiamate

,

post

fb

,

feed twitter

...

Data Warehouse : estrae

,

screma

ed

organizza

i dati

eterogenei

provenienti da crawler : software

che analizza i contenuti

di una rete

per

conto di un

motore

di

ricerca

• architettura cognitiva umana

:

• ÷ Modello mente

→ fatta di memoria breve

(

operativa

) e lungo

termine

,

calcolo

sensi

(

attività percettiva

)

• significato delle

PAROLE : lessemi

semantica lessicale

: studio del

significato

velato alle

parole (

significato :

[

È?

en

?

! !!

!!

'

di

significati

di una parola

immagine

contenuto

di un'

espressione linguistica )

mucchio

( piu

'

o meno

grande

)...

scopo

di Quivi

AN

Come

modelli zzare

la

significato mente

: emotivo

,

sociale

,

ironico

,

MÌ

.

net

Aja

in

funzione del

significato

metafora :

sei un'

enciclopedia

metonimia

:

bevo un

bicchiere

Memoria semantica : memoria

che conserva

ciò

che

sappiamo ,

in

particolare

i

significati

da soli

non sono

molto efficienti

f.

mooenisenraicitiimiiiiiiiiiiiiiii

iii.

siiii

!

:p

: %

! !

!

puntata

. : relazioni tra

→

Concetti :. strumenti

cognitivi

che costituiscono conoscenza

di base

semplificano

l' analisi

di

input

e

delle

risposte

comportamentali

tassonomie

:

classi di entità

gerarchiche

non

contestualizzate

ne

'

connesse

da relazioni

"

logico

semantiche ( come tassonomia del

regno

animale

,

necessarie x

i menù

)

ONTOLOGIE : sistemi

di

entità e

relazioni

log

sen.

astratte

concontestuslizzonuove

TECNOLOGIE

: Iot

,

Big

data

,

Mobile

. Sicurezza

informatica

,

strutturare i

dati in maniera

contestualizzata

Cloud Computing

: ambiente esecuzione elastico con accesso

via cloud

con risorse

condivise (

server

È

Cloud

:

privato ,

pubblico ,

ibrido

{

Vantassi

:

costi

solo

operativi ,

scalabilità

,

micro

• servizi

Problemi :

interoperabilità , monopolio

dati

svantaggi

:

sicurezza

,

privacy

,

continuità dei servizi

Block

Chain

:

infrastruttura

di

rete

Contiene

crittografia

,

matematica

, algoritmi

.

senza

controlli

di

istituzioni

combina reti

peer

to

peer

accessi controllati

o meno

( private

o

pubbliche

)

infrastruttura

multipla integrata

. serve

per mining

di

cripto

valute

• dati

incorruttibili

e incancellabili tra 2 blocchi

.

con

funzioni

di hash

per

un' identifica

.

transazioni

Non fornisce una

protezione

a tutti

i

mali della rete

,

si devono attuare

procedure

di

sicurezza

efficienti

Big data analitica

:

masse

di dati con o

senza

struttura da analizzare

obbiettivi : per scopi

rimediati e preventivi

nei diversi settori (

militari

,

mediche

..

.

)

→ mancano tassonomie

E

interoperabilità logico

• semantica si usano in combinazione con

strumenti di tassonomia

VOCABOLARIO CONTROLLATO

:

5

Tips

×

analisi

di

un

sito

Et

sit ,

Sito

web visto

come

canale

di comunicazione

tra mittente e destinatario attraverso un

linguaggio

comune

(

chiare interni

;

Utilizzo

pragmatica (

azione

ed interazione sociale

per

arrivare

ad uno

scopo ) migliore grazie

all'

uso

delle interfacce

grafiche

2

Scopo

e

target

dell'

analisi

collocazione

spaziale

,

home

page ,

domini

,

ruoli

attori

principali

,

scopi

sito

)

Contestualizzazione interna

/

esterna

DI

Riferimento

alla scuola di Jacob

Nielsen e

alle

specifiche

di usabilità

e

accessibilità definite da

Ieee

nonché

alle altre scuole come

quella

californiana

(

Morris Henricus

sto Architetto conoscenza ,

comunica. .

informatico e vari

ruoli

per

creare un

sito

ha

a

architettura

di

contenuto

(

anche metadati )

Macro funzioni del sito e

funzionalità dei menu

'

Metacomunicazione

( per

funzioni interattive

)

Interattività di contatto

,

di

ridondanza

Analisi

home

page

Posizionamento di istruzioni

operative

nel

completamento

dei moduli

Coesione informatica :

ridondanza

positiva

(

negativa

,

Coerenza

logico

• semantica

( spiegare

sempre

un

menù

,

mantenere contesto

sempre

senza usare

le funz .

del

browser

Meroni mia L?! )

ha

Design

cognitivo e come

l'

utente

interpreta

l' informazione

Modello californiano su come si riceve

l'

informazione

e cosa bisogna

tenere conto durante

la

progetta.

dove

e

come sono

poste

le

attivita

'

da

svolgere

,

mappa

mentale del sito (

dei sottomenù

soprattutto

Tecniche

per

l'

utilizzo

del

design

nell' area

centrale

Est

design

di

contenuto ( tipo

di sito

,

di contenuto

,

di

testo

.... )

Tipo

di sito

( istituzionale

,

commerciale

,

polifunzionale

...

)

Tipi

di

contenuto

(

educativo

,

informativo

,

transazionale

)

o

in chiave

cognitiva ( processi

,

procedure

..

Tipi

testuali

descrizioni

,

info

,

notizie

....

Analisi delle

"

decorazioni

"

del

testo

EH

Design

di interazione

(

uomo

• macchina

)

e

navigazione

(

meni

.

struttura

,

label

)

design

di interattività

: ottimizzazione

interazione attraverso un

contesto

, oppure

attraverso

comunicazione implicita

Struttura del sito

(gerarchica ,

relazionale

,

lineare

)

,

scrolling

vetriate

EH

Usage

and

user

centered

design

design

centrato

sull'

uso e sull'utente

5

modelli

Scuola neozelandese : relazione tra modello

e

contesto

in chiave semiotica

Definizione di

segno

secondo

Peirce

(

scuola

americana

) ,

piapresentamen

oggetto

interpretante

Ruolo utente secondo

Constantine

e Loca

wood

Vari

ruoli

e

tassi dei vari

soggetti

Est

• Interfacce

grafiche

Gui

(

studiata in chiave semiotica da

Zinna )

Interfaccia

oggetto

soggetto

(

comunicazione con

l'

utente

o con

altri sistemi

)

L'

interfaccia

dal

punto

di

vista

del browser

e

dal

punto

di vista editoriale

(

no

freccia indietro del browser

;

Contestualizzazione

internate

sterna

)

di

navigazione

(

link

interni

/ esterni

,

di contatto . .

. )

EH

Scrittura

iconica conversazione

:

Smiley ,

emoticon

test

Multimedialità e

Multi modalità

digitale

:

Testualità

digitale

:

software

scritti con

diversi

linguaggi

multimediale

Multi modalità

: incorpora

almeno a diversi media

di

rappresentazione

(

audio

e

testo

)

Principio

della

contiguità

:

testo

e

grafica

devono

apparire

insieme

in modo

contiguo

anziché

separati

affinché l' attenzione sia massima e

la

memoria

dell' utente non si esaurisca

Progettazione

multimediale :

coesione lineare

:

immagini

correlate a

testo

orale

commenti )

• coesione

di

relais : parole

fanno

procedere

le

immagini

e

viceversa (cartoni )

coesione

procedurale

:

specifica

della coesione di Relais

per

segnali

transnazionali

risposta

utente deve

procedere)

coesione

ridondante

per

l'

interattività: funzione

referenziale (

FI

per

chiusura e

per

indietro )

EH

Accessibilità e

usabilità : direttive

per

definire

l' accessibilità dei siti

ai disabili

legge

412004 )

Accessibilità :

grado

con

cui

un prodotto può

essere

usato

da

specifici

utenti ( vorra iso

)

Quattro principi

:

1) Percepibili

tà

:

devono

essere

percepibili

in qualche

modo da

tutti

gli

utenti

di accessibilità 2)

Comprensibilità

:

facilmente

comprensibili

solidità : Interpretabili

solidamente da

tutti

i

programmi

accessibilità

per

il w3c : 13 linee

guida

per

ridurre

le barriere

nell'

uso

della rete

vvcag

2.0 :.

fornire alternative testuali

a tutti contenuti non testuali e

descrizioni

pre

registrate

o

in

tempo

reale

facilitare

il

riconoscimento di

informazioni in

primo

piano

rispetto immagini

e

suoni

di sfondo

Leggibilità

e comprensione

del

testo

Label chiari

capitolo 2

definizione

di

comunicazione

digitale

:

Pac

65

Definizione

di

interfaccia

grafica

PAG 66

Varie

discipline

del

linguaggio

: pag

to

• 71
• Tim Berners

Lee :

inventore di internet

Pactz

differenze

tra siti e vita

reale

Parti costitutive un sito e

loro caratteristiche

Tassonomia dei contenuti nei

template

: informazioni

informatica

ed

elettronica

dei siti

Pac

74

architettura di

conoscenza e

di

comunicazione pace 75

Modellizzazione della

progettazione

dell' architettura dei contenuti

in chiave

cognitiva :

6

tipi

di design pace 76

• 94

secondo

Morris e Hinriohs

4

compiti

dell' architetto della conoscenza

in rete

PAG

79

altri 2

compiti

paaso

compiti

del

designer

cognitivo

pace

80

Tecniche

di

design cognitivo

e tips

per

l'analisi

Testo macro

atto informatico

e

testo elettronico

pace

94

55

Coerenza

logica

semantica

Pac

95

User and usage CENTERED

design

Pag

96

. 99

Accessibili

a

'

: secondo

il

Wc e

WAI PAG 100

°

USABILITA

'

: norme Iso

Jakob Nielsen

criteri del

cnipa

per

progettazione

centrata sull' utente

PAG

102

Protocollo x

analisi

di

un sito

PAG 103 - 104

Caratteristiche

di

un buon

sito PAG 100

figure professionali per progettare

un buon

sito PAG 107

capitolo 3

Testo elettronico :

definizione

pag 112

Testo

/ macro

atto informatico :

definizione +

richiamo al testo elettronico Pacis

• Testo

digitale

:

definizione PAG 114

Testo elettronico : diversi

tipi

di

informazione testuale (

para

.

.

meta -

,

intra.

... )

PAG 114 - 115

Testo

Isnacro

atto informatico : diversi

tipi

di

informazione testuale

pag 115

caso

di

studio

Informazione

metatestuale

ltestode

elettronica

pace

121

• Informazione interstatale elettronica PAG 122
• Contestualizzazione

interna

+ informare

.

testuale informi

. (

e criteri

)

pag 123

• 124

Informazione

performativa

meta testuale informatica

t

Informazione

performativa

meta

comunicativa informatica pag

124

Interfacce

grafiche

dal

punto

di vista

utente

(

interfaccia

soggetto

→ interfaccia -

oggetto

)

secondo

Zinna PAG 125

Distinzione

tra

interfaccia

editoriale e browser paa

126

Contestualizzazione interna Iesternal

di

navigazione

pag 126 (

fine

pagina

e 128

129

Identificazione

tematica del sito

Pac 129

Coerenza dei menù

con

il loro contenuto

PAG 130

funzione

interattiva

di

identificazione

tematico funzionale (

tematiche

che si trattano )

Pac 130

funzione

interattiva

di metacomunicazione informatica

(

cambio

colore

,

grassetto

.. .

al

passaggio

)

PAG 130

funzione

interattiva

di comunicazione informatica

fai click

,

chiudi

..

pag

funzione interattiva di contatto

(

sei sicuro

?

,

vuoi

salvare

.

...

) Pac 131

• Testo elettronico in architettura di conoscenza e

contenuto PAG 131

• 132