Ria Design

  • 930 views
Uploaded on

Presentation used during the talk for all4Web day in Milano

Presentation used during the talk for all4Web day in Milano

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
930
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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