Post on 01-Nov-2014
description
User Experience Design Patterns for Business Applications with Microsoft Silverlight 3
Corrina BlackUx DesignMicrosoft Corporation
Agenda
Design patternsDesign attributesImplementing design patterns in Silverlight 3Design principles
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Principles
1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency
Design Patterns
A proven set of rules tested in the real world and used to obtain excellence in a field
Design Patterns
OrientationNavigationInputAnalysisAction
Design Patterns
OrientationNavigationInputAnalysisAction
Design Patterns
OrientationNavigationInputAnalysisAction
Design Patterns
OrientationNavigationInputAnalysisAction
Design Patterns
OrientationNavigationInputAnalysisAction
Design Attributes
ColorTypographyIconographyEffectsAnimation
Design Attributes
ColorTypographyIconographyEffectsAnimation
Design Patterns in Silverlight 3
Design Patterns in Silverlight 3Visual and interaction frameworkDynamic layoutGlobal navigationSkin able Ux
Silverlight 3 navigation template
Visibility, natural mappings, and consistencyOrientation and navigationColor and transitions
Design Patterns in Silverlight 3Alternating row stripesSorting
DataGrid
ConsistencyAnalysisColor
Design Patterns in Silverlight 3Expandable panels
DataGrid, Accordion, Expander, and TreeView
Simplicity, metaphor, natural mappings, and consistencyOrientation and navigationColor and transitions
Design Patterns in Silverlight 3Paging
DataPager
Visibility, natural mappings, and consistencyOrientation and navigationColor, iconography, and transitions
Design Patterns in Silverlight 3Master-Details
DataForm and DataGrid
Visibility, metaphor, natural mappings, and consistencyOrientation and navigationColor and iconography
Design Patterns in Silverlight 3Edit modeAdd modeDelete mode
DataForm and DataGrid
Visibility, metaphor, natural mappings, and consistencyInputColor and iconography
Design Patterns in Silverlight 3Inline error indicatorsError summary
DataForm and DataGrid
Visibility, metaphor, natural mappings, error prevention, and consistencyInputColor, iconography, and transitions
Design Patterns in Silverlight 3DatePickerAutoCompleteTextBoxNumeric up/downComboBox…
Input controls
ConstraintsInputColor, iconography, and transitions
Design Patterns in Silverlight 3Input hints
DescriptionViewer and required field indicators
Visibility, metaphor, natural mappings, error prevention, and consistencyInputColor, iconography, effects, and transitions
Design Patterns in Silverlight 3Button groupsVisible ‘done’ button
DataPager and DataForm
Visibility, natural mappings, and consistencyInputColor and transitions
Design Patterns in Silverlight 3Bar graphLine graphScatter graph…
Charts
Simplicity, visibility, metaphor, and error preventionAnalysisColor and transitions
Key Takeaways
Principles + patterns + attributes + Silverlight 3 = great business application Ux
Productivity increasesInput error reductionsImproper data analysis reductionsSupport and training cost reductionsUser satisfaction increases
Resources
Designing Interfaces, Patterns for Effective Interaction Design, by Jennifer TidwellWelie.com, Patterns in Interaction Design, by Martijn van WelieTen Usability Heuristics, by Jakob NielsenQuince, InfragisticsMicrosoft Silverlight ToolkitMicrosoft Silverlight Site
Please Complete an Evaluation FormYour feedback is important!
Evaluation forms can be found on each chairTemp Staff at the back of the room have additional evaluation form copies
© 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.