Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

A Pragmatic View of UX Driven Development

A Pragmatic View of UX Driven Development

Télécharger pour lire hors ligne

This presentation shows how using UI toolkits that a) have broad and deep functionality exposed by a powerful design-time interface and b) that are "pattern aware" is a winning strategy for UX driven development. Firstly, they minimise the disconnect between the customer, UX practictioner and developer by enabling the easy creation of high-fidelity prototypes. Secondly, they address the challenges of time, budget, developer ability and the growing need to target multiple devices.

This presentation shows how using UI toolkits that a) have broad and deep functionality exposed by a powerful design-time interface and b) that are "pattern aware" is a winning strategy for UX driven development. Firstly, they minimise the disconnect between the customer, UX practictioner and developer by enabling the easy creation of high-fidelity prototypes. Secondly, they address the challenges of time, budget, developer ability and the growing need to target multiple devices.

Plus De Contenu Connexe

A Pragmatic View of UX Driven Development

  1. 1. a Pragmatic view of UX Driven Development<br />Akshay Luther<br />akshayl@infragistics.com | @akshayl<br />Technical Evangelist, Infragistics<br />
  2. 2. Agenda<br />About Infragistics<br />Challenges<br />The Value of Prototypes<br />UX Patterns<br />Examples<br />
  3. 3. About Infragistics<br />Global market leader in UI development tools<br />20 year track record of success<br />40,000+ customers across all verticals<br />240+ awards<br />UI toolkits for web, desktop and mobile applications - .NET & platform agnostic<br />User Experience Consulting & Training<br />UDX, IXD, usability research feeds into product development<br />
  4. 4. Challenges<br />
  5. 5.
  6. 6.
  7. 7.
  8. 8. Other Challenges<br />Time<br />Budget<br />Developer Ability<br />Multiple Devices<br />Desktop, web, mobile, tablet<br />
  9. 9. The Value of Prototypes<br />Maximising Bang for Buck<br />
  10. 10. Paper mockups<br />
  11. 11. Wireframes (Balsamiq)<br />
  12. 12. Interactive mockups (iRise)<br />
  13. 13. Interactive mockups (SketchFlow)<br />
  14. 14. Fully Functioning<br />Software<br />Prototypes<br />(Using UI Toolkits)<br />Fidelity<br />Interactive<br />Mockups<br />Wireframes<br />Requirement<br />Specifications<br />Paper Mockups<br />Ease of creation<br />
  15. 15. Protototype (Blend) <br />
  16. 16. Styling, Using sample data<br />
  17. 17. Design surface on child items<br />
  18. 18. Adding functionality<br />
  19. 19. Prototype in action – it’s a real application!<br />
  20. 20. Same project in developer’s IDE<br />
  21. 21. UX Patterns<br />A Common Language<br />
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30. Examples<br />Implementing UI Patterns Using “Pattern Aware” Standardised UI Toolkits<br />
  31. 31. Pattern: Visual Framework<br />
  32. 32. Pattern: Ribbon<br />
  33. 33. Pattern: Text Field Autocompletion<br />
  34. 34. Pattern: Active Filtering<br />
  35. 35. Patterns: Structured Format, Inline Validation<br />
  36. 36. Pattern: Local Zooming<br />
  37. 37. Pattern: Local Zooming<br />
  38. 38. Patterns: Dashboard, Data Tips<br />
  39. 39.
  40. 40.
  41. 41.
  42. 42. Pattern: Treemap<br />
  43. 43. Pattern: Dashboard<br />
  44. 44. Resources<br />Mockup/Prototyping Tools<br />Balsamiq (balsamiq.com)<br />iRise(irise.com)<br />Expression Blend & SketchFlow(www.microsoft.com/expression/products/blend_overview.aspx)<br />UX Pattern Libraries<br />Welie.com<br />Patternry(patternry.com)<br />UI Patterns (ui-patterns.com)<br />Quince (quince.infragistics.com)<br />
  45. 45. Resources<br />UI Control Toolkits<br />infragistics.com<br />jqueryui.com<br />sencha.com<br />telerik.com<br />devexpress.com<br />
  46. 46. Thank You<br />akshayl@infragistics.com<br />superhappycoder.wordpress.com<br />(slides will be posted here)<br />

×