1.simplicity 2.visibility 3.metaphor 4.natural mappings 5.constraints 6.error prevention...

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

Upload: marshall-copeland

Post on 18-Jan-2018

228 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

User Experience Design Patterns for Business Applications with Microsoft Silverlight 3Corrina BlackUx DesignMicrosoft Corporation

Page 2: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency
Page 3: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency
Page 4: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

AgendaDesign patternsDesign attributesImplementing design patterns in Silverlight 3Design principles

Page 5: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 6: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 7: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 8: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 9: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 10: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 11: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Principles1. Simplicity2. Visibility3. Metaphor4. Natural mappings5. Constraints6. Error prevention7. Consistency

Page 12: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

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

Page 13: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design PatternsOrientationNavigationInputAnalysisAction

Page 14: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design PatternsOrientationNavigationInputAnalysisAction

Page 15: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design PatternsOrientationNavigationInputAnalysisAction

Page 16: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design PatternsOrientationNavigationInputAnalysisAction

Page 17: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design PatternsOrientationNavigationInputAnalysisAction

Page 18: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design AttributesColorTypographyIconographyEffectsAnimation

Page 19: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design AttributesColorTypographyIconographyEffectsAnimation

Page 20: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3

Page 21: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

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: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Alternating row stripesSorting

DataGrid

ConsistencyAnalysisColor

Page 23: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Expandable panels

DataGrid, Accordion, Expander, and TreeView

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

Page 24: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Paging

DataPager

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

Page 25: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Master-Details

DataForm and DataGrid

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

Page 26: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Edit modeAdd modeDelete mode

DataForm and DataGrid

Visibility, metaphor, natural mappings, and consistencyInputColor and iconography

Page 27: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Inline error indicatorsError summary

DataForm and DataGrid

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

Page 28: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3DatePickerAutoCompleteTextBoxNumeric up/downComboBox…

Input controls

ConstraintsInputColor, iconography, and transitions

Page 29: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

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: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Button groupsVisible ‘done’ button

DataPager and DataForm

Visibility, natural mappings, and consistencyInputColor and transitions

Page 31: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Design Patterns in Silverlight 3Bar graphLine graphScatter graph…

Charts

Simplicity, visibility, metaphor, and error preventionAnalysisColor and transitions

Page 32: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

Key TakeawaysPrinciples + patterns + attributes + Silverlight 3 = great business application Ux

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

Page 33: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

ResourcesDesigning 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: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

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: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency

© 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: 1.Simplicity 2.Visibility 3.Metaphor 4.Natural mappings 5.Constraints 6.Error prevention 7.Consistency