user experience design patterns for business applications with microsoft silverlight 3

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

Upload: goodfriday

Post on 01-Nov-2014

2.635 views

Category:

Technology


0 download

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.

TRANSCRIPT

Page 1: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Corrina BlackUx DesignMicrosoft Corporation

Page 2: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3
Page 3: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3
Page 4: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Agenda

Design patternsDesign attributesImplementing design patterns in Silverlight 3Design principles

Page 5: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 6: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 7: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 8: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 9: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 10: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 11: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Principles

1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 12: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns

A proven set of rules tested in the real world and used to obtain excellence in a field

Page 13: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns

OrientationNavigationInputAnalysisAction

Page 14: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns

OrientationNavigationInputAnalysisAction

Page 15: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns

OrientationNavigationInputAnalysisAction

Page 16: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns

OrientationNavigationInputAnalysisAction

Page 17: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns

OrientationNavigationInputAnalysisAction

Page 18: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Attributes

ColorTypographyIconographyEffectsAnimation

Page 19: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Attributes

ColorTypographyIconographyEffectsAnimation

Page 20: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3

Page 21: User Experience Design Patterns for Business Applications with Microsoft 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

Page 22: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Alternating row stripesSorting

DataGrid

ConsistencyAnalysisColor

Page 23: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Expandable panels

DataGrid, Accordion, Expander, and TreeView

Simplicity, metaphor, natural mappings, and consistencyOrientation and navigationColor and transitions

Page 24: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Paging

DataPager

Visibility, natural mappings, and consistencyOrientation and navigationColor, iconography, and transitions

Page 25: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Master-Details

DataForm and DataGrid

Visibility, metaphor, natural mappings, and consistencyOrientation and navigationColor and iconography

Page 26: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Edit modeAdd modeDelete mode

DataForm and DataGrid

Visibility, metaphor, natural mappings, and consistencyInputColor and iconography

Page 27: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Inline error indicatorsError summary

DataForm and DataGrid

Visibility, metaphor, natural mappings, error prevention, and consistencyInputColor, iconography, and transitions

Page 28: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3DatePickerAutoCompleteTextBoxNumeric up/downComboBox…

Input controls

ConstraintsInputColor, iconography, and transitions

Page 29: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Input hints

DescriptionViewer and required field indicators

Visibility, metaphor, natural mappings, error prevention, and consistencyInputColor, iconography, effects, and transitions

Page 30: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Button groupsVisible ‘done’ button

DataPager and DataForm

Visibility, natural mappings, and consistencyInputColor and transitions

Page 31: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Design Patterns in Silverlight 3Bar graphLine graphScatter graph…

Charts

Simplicity, visibility, metaphor, and error preventionAnalysisColor and transitions

Page 32: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Key Takeaways

Principles + patterns + attributes + Silverlight 3 = great business application Ux

Productivity increasesInput error reductionsImproper data analysis reductionsSupport and training cost reductionsUser satisfaction increases

Page 33: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

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

Page 34: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

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

Page 35: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

© 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.

Page 36: User Experience Design Patterns for Business Applications with Microsoft Silverlight 3