User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Preview:

DESCRIPTION

Come hear how creating great user experiences for business applications can result in both improved productivity and significant support cost savings. Learn how to use proven user experience patterns in cost effective ways with Silverlight 3, including rich data display, data input and advanced data validation, and application navigation.

Citation preview

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.

Recommended