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.

1. a Pragmatic view of UX Driven Development Akshay Luther akshayl@infragistics.com | @akshayl Technical Evangelist, Infragistics

2. Agenda About Infragistics Challenges The Value of Prototypes UX Patterns Examples

3. About Infragistics Global market leader in UI development tools 20 year track record of success 40,000+ customers across all verticals 240+ awards UI toolkits for web, desktop and mobile applications - .NET & platform agnostic User Experience Consulting & Training UDX, IXD, usability research feeds into product development

4. Challenges

8. Other Challenges Time Budget Developer Ability Multiple Devices Desktop, web, mobile, tablet

9. The Value of Prototypes Maximising Bang for Buck

10. Paper mockups

11. Wireframes (Balsamiq)

12. Interactive mockups (iRise)

13. Interactive mockups (SketchFlow)

14. Fully Functioning Software Prototypes (Using UI Toolkits) Fidelity Interactive Mockups Wireframes Requirement Specifications Paper Mockups Ease of creation

15. Protototype (Blend)

16. Styling, Using sample data

17. Design surface on child items

18. Adding functionality

19. Prototype in action – it’s a real application!

20. Same project in developer’s IDE

21. UX Patterns A Common Language

30. Examples Implementing UI Patterns Using “Pattern Aware” Standardised UI Toolkits

31. Pattern: Visual Framework

32. Pattern: Ribbon

33. Pattern: Text Field Autocompletion

34. Pattern: Active Filtering

35. Patterns: Structured Format, Inline Validation

36. Pattern: Local Zooming

37. Pattern: Local Zooming

38. Patterns: Dashboard, Data Tips

42. Pattern: Treemap

43. Pattern: Dashboard

44. Resources Mockup/Prototyping Tools Balsamiq (balsamiq.com) iRise(irise.com) Expression Blend & SketchFlow(www.microsoft.com/expression/products/blend_overview.aspx) UX Pattern Libraries Welie.com Patternry(patternry.com) UI Patterns (ui-patterns.com) Quince (quince.infragistics.com)

45. Resources UI Control Toolkits infragistics.com jqueryui.com sencha.com telerik.com devexpress.com

46. Thank You akshayl@infragistics.com superhappycoder.wordpress.com (slides will be posted here)