Presentation used during the talk for all4Web day in Milano

1. Design di
applicazioni RIA
Milano, 8 Maggio 2009
Monday, May 11, 2009 1

2. Daniela
blog: http://tech.piyodesign.it/
twitter: @TsoDa
Monday, May 11, 2009 2

3. Di che cosa parliamo
• Overview
• Desktop, web e RIA
• Il concetto di COMPITO
• L’importanza dell’esperienza
• Basarsi sul sapere condiviso
• Best practice
• Prototyping
• Alla fine
Monday, May 11, 2009 3

4. Overview
Progettare un’applicativo
RIA
Monday, May 11, 2009 4

5. User centered design
“What separates you from your
competitors isn’t design or development,
it’s truly thinking about the person who
will use your design or development and
figuring out how it can solve their needs.
”
- Deborah Adler
Monday, May 11, 2009 5

6. Desktop, web
e RIA
Progettare per gli utenti
Monday, May 11, 2009 6

7. L’applicazione desktop
• L’applicazione desktop per chi è stata pensata?
• Seguire lo standard
• Paradigmi d’uso:
• le voci di menu “file” e “edit” e gli strumenti
• modalità di selezionare: singolo/doppio click e multipla
• manipolazione diretta
• MDA
Monday, May 11, 2009 7

8. L’applicazione web
• L’applicazione web da chi viene usata e a quale
scopo?
• La navigazione e le azioni
• La personalizzazione
• L’information retrieval
Monday, May 11, 2009 8

9. L’applicazione RIA
• Un’applicazione RIA a che modello di utente si
rivolge?
• Il personal desktop
• La mobilità
Monday, May 11, 2009 9

10. Il concetto di
compito
Monday, May 11, 2009 10

11. Compito e azione
• La necessità
• Il compito : l’azione che scaturisce dalla necessità
• L’oggetto dell’azione
Monday, May 11, 2009 11

12. L’importanza
dell’esperienza
Come evitare che l’utente
fugga davanti al nostro
applicativo
Monday, May 11, 2009 12

13. L’evoluzione è veloce, noi
meno*
• Ridurre il gap tra l’utente e l’oggetto
“desiderato”
• La semplicità
• La scoperta e il “gioco”
• La curva di apprendimento nel design
Monday, May 11, 2009 13

14. Basarsi sul
sapere condiviso
L’architettura
dell’informazione nel
progesso di progettazione
Monday, May 11, 2009 14

15. Il ruolo della IA
• La curva di apprendimento: scelta del vocabolario
• Le tassonomie
• La costruzione delle mappe
Monday, May 11, 2009 15

16. Best practise
Effetti sì, quando?
Monday, May 11, 2009 16

17. Best practise
• Selezione
• Manipolazione
• Transizioni
• Ridimensionamento: scrolling e densità di dati
• Effetti davvero speciali: suoni e grafica 3D
Monday, May 11, 2009 17

18. Selezione
• Il monoclick
• Selezione degli oggetti
• Comandi di tastiera
Monday, May 11, 2009 18

19. Manipolazione
• Puntatore e spostamento
• Drag&Drop
• Ridimensionamento dell’oggetto
Monday, May 11, 2009 19

20. Transizioni
• Movimenti di “avviso”
• Transizioni di movimento
• Transazioni di pagina
Monday, May 11, 2009 20

21. Ridimensionamento
• All in one window
• Scrolling
• Ridimensionamento
Monday, May 11, 2009 21

22. Effetti davvero speciali
• Suoni
• Grafica 3D
• Video e altri contenuti non interattivi
Monday, May 11, 2009 22

23. Prototyping
Come un’idea diventa
visibile
Monday, May 11, 2009 23

24. Step di progettazione
• Schizzo
• Wireframes
• Immagine statica
(static comps)
• Functional mockups
Monday, May 11, 2009 24

25. Schizzo
Monday, May 11, 2009 25

26. Wireframes
Monday, May 11, 2009 26

27. Immagine statica
interazioni
legenda
navigator
controlli di navigazione: zoom
simbolo
avanti/indietro
libro full screen
disegna tutte le relazioni
seminario pubblicato
cancella le relazioni
seminario
m.over su icona > si formano relazioni + glow sulle icone collegate
m.over su icona > pop up
su click i collegamenti rimangono permanenti
Monday, May 11, 2009 27

28. Functional mockups
Monday, May 11, 2009 28

29. Alcuni esempi
• Google Docs: Online - Offline
• Lacan+Freud Viz: ricerche interattive
• SIRS: paradigmi
Monday, May 11, 2009 29

30. Online - Offline
• Mobile desktop
• paradigmi del web +
desktop:
l’esempio delle voci
di menù
Monday, May 11, 2009 30

31. Ricerche interattive
• Iconizzare
• Mettere in relazione
• Zoom&pan
Monday, May 11, 2009 31

32. Paradigmi
• Information Retrieval
• All in one window
• Focus+context
• La griglia elastica
Monday, May 11, 2009 32

33. Alla fine
Non riduciamoci a
schematismi
Monday, May 11, 2009 33

34. Bibliografia e link utili
• Remo Jobs (a cura di), Manuale di psicologia cognitiva, CAROCCI
• Calvin Moores, Ambient findability, O'REALLY
• Bill Morridge, Interaction Design, MIT PRESS
• J. Preece, Y. Rogers, H. Sharp, Interaction design, APOGEO
• Robert Spence, Information Visualization, Design for Interaction –
2nd ed., Perason Educated Limited
• http://www.welie.com/patterns/index.php
• http://quince.infragistics.com/
• http://en.wikipedia.org/wiki/Mooers%27_Law
• sinestesia: http://teemingvoid.blogspot.com/2008/10/synesthesia-
and-cross-modality-in.html
• Ingegneria della conoscenza: http://en.wikipedia.org/wiki/
Knowledge_engineering
Monday, May 11, 2009 34

35. Domande?
Monday, May 11, 2009 35