User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

1. User Experience Design Patterns for Business Applications with Microsoft Silverlight 3 Corrina Black Ux Design Microsoft Corporation

4. Agenda • Design patterns • Design attributes • Implementing design patterns in Silverlight 3 • Design principles

5. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

6. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

7. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

8. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

9. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

10. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

11. Design Principles • Simplicity • Visibility • Metaphor • Natural mappings • Constraints • Error prevention • Consistency

12. Design Patterns • A proven set of rules tested in the real world and used to obtain excellence in a field

13. Design Patterns • Orientation • Navigation • Input • Analysis • Action

14. Design Patterns • Orientation • Navigation • Input • Analysis • Action

15. Design Patterns • Orientation • Navigation • Input • Analysis • Action

16. Design Patterns • Orientation • Navigation • Input • Analysis • Action

17. Design Patterns • Orientation • Navigation • Input • Analysis • Action

18. Design Attributes • Color • Typography • Iconography • Effects • Animation

19. Design Attributes • Color • Typography • Iconography • Effects • Animation

20. Design Patterns in Silverlight 3

21. Design Patterns in Silverlight 3 Visual and interaction framework Dynamic layout Global navigation Skin able Ux • Silverlight 3 navigation template Visibility, natural mappings, and consistency Orientation and navigation Color and transitions

22. Design Patterns in Silverlight 3 Alternating row stripes Sorting • DataGrid Consistency Analysis Color

23. Design Patterns in Silverlight 3 Expandable panels • DataGrid, Accordion, Expander, and TreeView Simplicity, metaphor, natural mappings, and consistency Orientation and navigation Color and transitions

24. Design Patterns in Silverlight 3 Paging • DataPager Visibility, natural mappings, and consistency Orientation and navigation Color, iconography, and transitions

25. Design Patterns in Silverlight 3 Master-Details • DataForm and DataGrid Visibility, metaphor, natural mappings, and consistency Orientation and navigation Color and iconography

26. Design Patterns in Silverlight 3 Edit mode Add mode Delete mode • DataForm and DataGrid Visibility, metaphor, natural mappings, and consistency Input Color and iconography

27. Design Patterns in Silverlight 3 Inline error indicators Error summary • DataForm and DataGrid Visibility, metaphor, natural mappings, error prevention, and consistency Input Color, iconography, and transitions

28. Design Patterns in Silverlight 3 DatePicker AutoCompleteTextBox Numeric up/down ComboBox … • Input controls Constraints Input Color, iconography, and transitions

29. Design Patterns in Silverlight 3 Input hints • DescriptionViewer and required field indicators Visibility, metaphor, natural mappings, error prevention, and consistency Input Color, iconography, effects, and transitions

30. Design Patterns in Silverlight 3 Button groups Visible ‘done’ button • DataPager and DataForm Visibility, natural mappings, and consistency Input Color and transitions

31. Design Patterns in Silverlight 3 Bar graph Line graph Scatter graph … • Charts Simplicity, visibility, metaphor, and error prevention Analysis Color and transitions

32. Key Takeaways • Principles + patterns + attributes + Silverlight 3 = great business application Ux • Productivity increases • Input error reductions • Improper data analysis reductions • Support and training cost reductions • User satisfaction increases

33. Resources • Designing Interfaces, Patterns for Effective Interaction Design, by Jennifer Tidwell • Welie.com, Patterns in Interaction Design, by Martijn van Welie • Ten Usability Heuristics, by Jakob Nielsen • Quince, Infragistics • Microsoft Silverlight Toolkit • Microsoft Silverlight Site

34. Please Complete an Evaluation FormYour feedback is important! • Evaluation forms can be found on each chair • Temp Staff at the back of the room have additional evaluation form copies

35. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.