A Pragmatic View of UX Driven Development

3,740 views
3,319 views

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,740
On SlideShare
0
From Embeds
0
Number of Embeds
635
Actions
Shares
0
Downloads
24
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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 />

×