Design di
                       applicazioni RIA


                             Milano, 8 Maggio 2009

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



...
Di che cosa parliamo

                       •   Overview
                       •   Desktop, web e RIA
                  ...
Overview
              Progettare un’applicativo
                                   RIA




Monday, May 11, 2009          ...
User centered design


               “What separates you from your
               competitors isn’t design or development...
Desktop, web
                     e RIA
                  Progettare per gli utenti




Monday, May 11, 2009              ...
L’applicazione desktop

                   •    L’applicazione desktop per chi è stata pensata?
                   •    Se...
L’applicazione web


                   •   L’applicazione web da chi viene usata e a quale
                       scopo?
...
L’applicazione RIA


                   •   Un’applicazione RIA a che modello di utente si
                       rivolge?...
Il concetto di
                      compito




Monday, May 11, 2009             10
Compito e azione


                   •   La necessità
                   •   Il compito : l’azione che scaturisce dalla n...
L’importanza
       dell’esperienza
             Come evitare che l’utente
               fugga davanti al nostro
        ...
L’evoluzione è veloce, noi
                       meno*

                   •    Ridurre il gap tra l’utente e l’oggetto
 ...
Basarsi sul
sapere condiviso
                        L’architettura
               dell’informazione nel
           proges...
Il ruolo della IA


                   •   La curva di apprendimento: scelta del vocabolario
                   •   Le tas...
Best practise
                       Effetti sì, quando?




Monday, May 11, 2009                         16
Best practise

                   •   Selezione
                   •   Manipolazione
                   •   Transizioni
  ...
Selezione


                   •   Il monoclick
                   •   Selezione degli oggetti
                   •   Coma...
Manipolazione


                   •   Puntatore e spostamento
                   •   Drag&Drop
                   •   Rid...
Transizioni


                   •   Movimenti di “avviso”
                   •   Transizioni di movimento
               ...
Ridimensionamento


                   •   All in one window
                   •   Scrolling
                   •   Ridim...
Effetti davvero speciali


                   •    Suoni
                   •    Grafica 3D
                   •    Video ...
Prototyping
                       Come un’idea diventa
                                     visibile




Monday, May 11, ...
Step di progettazione


                   • Schizzo
                   • Wireframes
                   • Immagine statica...
Schizzo




Monday, May 11, 2009             25
Wireframes




Monday, May 11, 2009                26
Immagine statica




                                                     interazioni
                          legenda
  ...
Functional mockups




Monday, May 11, 2009                        28
Alcuni esempi


                   •   Google Docs: Online - Offline
                   •   Lacan+Freud Viz: ricerche inte...
Online - Offline


                   • Mobile desktop
                   • paradigmi del web +
                       des...
Ricerche interattive


                   • Iconizzare
                   • Mettere in relazione
                   • Zoom...
Paradigmi


                   • Information Retrieval
                   • All in one window
                   • Focus+c...
Alla fine
                       Non riduciamoci a
                             schematismi




Monday, May 11, 2009      ...
Bibliografia e link utili
                        •   Remo Jobs (a cura di), Manuale di psicologia cognitiva, CAROCCI

   ...
Domande?




Monday, May 11, 2009              35
Upcoming SlideShare
Loading in...5
×

Ria Design

984

Published on

Presentation used during the talk for all4Web day in Milano

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Ria Design"

  1. 1. Design di applicazioni RIA Milano, 8 Maggio 2009 Monday, May 11, 2009 1
  2. 2. Daniela blog: http://tech.piyodesign.it/ twitter: @TsoDa Monday, May 11, 2009 2
  3. 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. 4. Overview Progettare un’applicativo RIA Monday, May 11, 2009 4
  5. 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. 6. Desktop, web e RIA Progettare per gli utenti Monday, May 11, 2009 6
  7. 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. 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. 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. 10. Il concetto di compito Monday, May 11, 2009 10
  11. 11. Compito e azione • La necessità • Il compito : l’azione che scaturisce dalla necessità • L’oggetto dell’azione Monday, May 11, 2009 11
  12. 12. L’importanza dell’esperienza Come evitare che l’utente fugga davanti al nostro applicativo Monday, May 11, 2009 12
  13. 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. 14. Basarsi sul sapere condiviso L’architettura dell’informazione nel progesso di progettazione Monday, May 11, 2009 14
  15. 15. Il ruolo della IA • La curva di apprendimento: scelta del vocabolario • Le tassonomie • La costruzione delle mappe Monday, May 11, 2009 15
  16. 16. Best practise Effetti sì, quando? Monday, May 11, 2009 16
  17. 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. 18. Selezione • Il monoclick • Selezione degli oggetti • Comandi di tastiera Monday, May 11, 2009 18
  19. 19. Manipolazione • Puntatore e spostamento • Drag&Drop • Ridimensionamento dell’oggetto Monday, May 11, 2009 19
  20. 20. Transizioni • Movimenti di “avviso” • Transizioni di movimento • Transazioni di pagina Monday, May 11, 2009 20
  21. 21. Ridimensionamento • All in one window • Scrolling • Ridimensionamento Monday, May 11, 2009 21
  22. 22. Effetti davvero speciali • Suoni • Grafica 3D • Video e altri contenuti non interattivi Monday, May 11, 2009 22
  23. 23. Prototyping Come un’idea diventa visibile Monday, May 11, 2009 23
  24. 24. Step di progettazione • Schizzo • Wireframes • Immagine statica (static comps) • Functional mockups Monday, May 11, 2009 24
  25. 25. Schizzo Monday, May 11, 2009 25
  26. 26. Wireframes Monday, May 11, 2009 26
  27. 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. 28. Functional mockups Monday, May 11, 2009 28
  29. 29. Alcuni esempi • Google Docs: Online - Offline • Lacan+Freud Viz: ricerche interattive • SIRS: paradigmi Monday, May 11, 2009 29
  30. 30. Online - Offline • Mobile desktop • paradigmi del web + desktop: l’esempio delle voci di menù Monday, May 11, 2009 30
  31. 31. Ricerche interattive • Iconizzare • Mettere in relazione • Zoom&pan Monday, May 11, 2009 31
  32. 32. Paradigmi • Information Retrieval • All in one window • Focus+context • La griglia elastica Monday, May 11, 2009 32
  33. 33. Alla fine Non riduciamoci a schematismi Monday, May 11, 2009 33
  34. 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. 35. Domande? Monday, May 11, 2009 35

×