better user experience with .net
DESCRIPTION
User Experience (UX)Tips and Techniques, Best practicesWindows Forms Capabilities and Demo’sTools to better UX & codeUX ResourcesTRANSCRIPT
![Page 1: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/1.jpg)
Developing Windows and Web Applications using Visual Studio.NET
Peter Gfader
Senior Software Architect
![Page 2: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/2.jpg)
Homework?
![Page 3: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/3.jpg)
„Add New“ disabled
Problems with Lab / homework?
![Page 4: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/4.jpg)
Unused methods, after removing UI controls
Tip
![Page 5: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/5.jpg)
C# 3.0, C# 4.0, C# 5
LINQ
Data with LINQ
Session 2: Last week?
![Page 6: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/6.jpg)
User Experience (UX)
Tips and Techniques, Best practices
Windows Forms Capabilities and Demo’s
Tools to better UX & code
UX Resources
Agenda
![Page 7: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/7.jpg)
![Page 8: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/8.jpg)
![Page 9: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/9.jpg)
Business applications
![Page 10: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/10.jpg)
Enter data
Find data
Show data
Every business app does
![Page 11: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/11.jpg)
Professional Feel
Enter data
Validation
Find data
Filter data Rich data query
Show data
Different Views Reports (nice printing) Authorization?
Every business app
![Page 12: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/12.jpg)
User Experience
![Page 13: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/13.jpg)
User experience
3 pillars
![Page 14: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/14.jpg)
UX - Look
![Page 15: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/15.jpg)
UX - Usability
![Page 16: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/16.jpg)
Make site feel alive
React fast
Interact with user
“Joy of use”
UX - Feel
![Page 17: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/17.jpg)
How can we improve UX
![Page 18: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/18.jpg)
Developers
Need a UI to test their software as they build UI increases in complexity as software is built Application grows but the UI isn’t consistent Know how the controls work (or they should!!)
Designers
May design the UI but not realize WHAT is possible May understand a Visual Consistency but not how
its built
Who designs the UI?
![Page 19: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/19.jpg)
The user
Who uses the UI?
![Page 20: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/20.jpg)
„User driven“
Do testing with the user
Prototyping
Usability testing
Let user solve a task and see (measure) what he does
User
![Page 21: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/21.jpg)
Why choose Windows Forms?
![Page 22: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/22.jpg)
Bandwidth – Presentation layer
Cache / persistent state
Faster Server Because of less requests and less work… thanks to processing power
being used on client
Richer interface No buggy DHTML/JavaScript
More responsive
Faster to develop
No cross-browser issues
Build complex controls quickly
Why Windows Forms?
![Page 23: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/23.jpg)
Not allowed in Standard Operating Environment
Cross-platform requirements (Linux, PC, Mac)
Deployment of the Application is harder / Centralised
logic
Requires an always-connected data service
Why NOT Windows Forms?
![Page 24: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/24.jpg)
Network Admins
Developers
End Users
Accounts
Who Do I Please?
Browser Based Solution
Rich Client Solution
![Page 25: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/25.jpg)
Who uses prototypes?
Sketchflow Balsamiq
Do you design a mockup UI first?
![Page 26: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/26.jpg)
Avoid the thought of a “throw away” prototype.
Use as the first step to start a project (or get a project) - WYSIWYG
Get great initial feedback
Better than 100 page document
Get designer involved if need be (Developers can’t design)
Tip: Always add client logo + colours. They are easily impressed!
Designing a Mockup UI
![Page 27: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/27.jpg)
Would you design Database first or UI?
Database schema should be designed before the UI is started
If you are doing fixed price work, signed-off mockups serve as a great way to stop goal posts moving.
Any changes to the mockups thereafter will result in additional work.
Designing a Mockup UI
![Page 28: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/28.jpg)
Windows Forms – Best practices
![Page 29: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/29.jpg)
Visual Inheritance
Composition and Containment (Panels, Usercontrols)
Databinding
ToolTips
Error Provider and Validators
Appsettings
Winform Architecture
![Page 30: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/30.jpg)
The constructor of each form/control class contains a call of a private method "InitializeComponent()". If B is derived from A, then the constructor of A is called first
1. A()
2. A.InitializedComponent()
3. B()
4. B.InitialzeComponent()
Visual Inheritance
![Page 31: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/31.jpg)
Controls on the Base Form are BY DEFAULT “private” and cannot be edited in the inherited form
Solution: Change the modifer to “Protected”
Visual Inheritance
![Page 32: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/32.jpg)
Common Behaviour
Company Icon Remembering its size and location Adding itself to a global forms collection (to find
forms that are already open, or to close all open forms) ** Application.OpenForms
Logging usage frequency and performance of forms (load time)
No Controls!
Inherited Forms – For Every Form
![Page 33: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/33.jpg)
1. CenterParent only for modal dialogs (to prevent multi-monitor confusion)
2. CenterScreen only for the main form (MainForm), or a splash screen
3. WindowsDefaultLocation for everything else (99% of forms) - prevents windows from appearing on top of one another
StartPosition
![Page 34: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/34.jpg)
FixedDialog only for modal dialog boxes
FixedSingle only for the the main form (MainForm) - FixedSingle has an icon whereas FixedDialog doesn't
None for splash screen
Sizable for any form that has multi-line textbox, grid, listbox or such
FormBorderStyle
![Page 35: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/35.jpg)
Base Data Entry Form
1
2
3
4
![Page 36: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/36.jpg)
Do you encapsulate (aka lock) values of forms?
![Page 37: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/37.jpg)
Hiding Values
![Page 38: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/38.jpg)
Developers fiddle!
Browsable: whether a property or event should be displayed in a Properties window. http://msdn.microsoft.com/en-us/library/system.componentmodel.browsableattribute.aspx
EditorBrowsable: whether a property or method is viewable in an editor. http://msdn.microsoft.com/en-us/library/system.componentmodel.editorbrowsableattribute.aspx
Hiding Values
![Page 39: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/39.jpg)
Hiding Valuesusing System.ComponentModel;
[Browsable(false), EditorBrowsable(false)]public new Font Font{ get { return base.Font; } set { base.Font = value; }}
Imports System.ComponentModel
<Browsable(False), EditorBrowsable(false)> _ Public Shadows Property Font() As Font Get Return MyBase.Font End Get Set(ByVal Value As Font) 'MyBase.Font = Value 'normal property syntax MyBase.Font = New Font(Me.Font.FontFamily, 20)
End SetEnd Property
![Page 40: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/40.jpg)
Do you know when to use User Controls?
![Page 41: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/41.jpg)
You lose the AcceptButton and CancelButton properties from the Designer
e.g. OK, Cancel, Apply
Therefore the OK, Cancel and Apply buttons cannot be on User Controls.
User Controls
![Page 42: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/42.jpg)
You can use a user control more than once on the same form e.g. Mailing Address, Billing Address
You can reuse logic in the code behind the controls e.g. Search control
User controls are less prone to visual inheritance errors
User Controls
![Page 43: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/43.jpg)
Controls only used once
Bad! »
User Controls
![Page 44: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/44.jpg)
Only for reuse
Good! »
User Controls
![Page 45: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/45.jpg)
Exception! »
User Controls – TabPages
![Page 46: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/46.jpg)
Possible Exception:
When a form has multiple tabs, and each tab has numerous controls – it can be easier to use User Control in this case
Smaller designer generated code More than one person can be working on a different
‘tab’
User Controls – TabPages
![Page 47: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/47.jpg)
Code intensive
Must manually handle the Validating event of each control you want to validate
Must be manually running the validation methods when the OK or Apply button is clicked
Error Provider
![Page 48: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/48.jpg)
Controls that “attach” themselves to existing
Do you use validator controls?
![Page 49: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/49.jpg)
Good
No code, all in the designer (integrates with the ErrorProvider)
Validator Controls
![Page 50: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/50.jpg)
Windows Forms – Validation
![Page 51: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/51.jpg)
Validation logic is in the Model
Validation with Entity Framework
public partial class Employee{ partial void OnLastNameChanging(string value) { if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0) { throw new ArgumentException("No GFADER allowed"); } }}
![Page 52: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/52.jpg)
Validation logic is in the Model
Validation with Entity Framework
public partial class Employee{
partial void OnLastNameChanging(string value) {
if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0) { throw new ArgumentException("No GFADER allowed"); }
}
}
![Page 53: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/53.jpg)
Partial class holds validation logic
Partial class
![Page 54: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/54.jpg)
Hook up ErrorProvider
![Page 55: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/55.jpg)
![Page 56: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/56.jpg)
Happens in model
Different UI layers can react to validation differently
Web page Windows Form Silverlight WPF ...
Validation
![Page 57: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/57.jpg)
Monitor Performance better
Good user feedback
Easy to do
AdamE thinks“general user’s don’t care about technical details, a progress bar is better”
Do you use a status bar to show load time?
![Page 58: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/58.jpg)
Don't use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times.
Don't use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often, that assumption is correct.
Splash Screens
![Page 59: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/59.jpg)
Two-way binding means that the object/data structure is bound to the UI Element/Control
The setting/getting and the positioning of elements in a collection is handled by the databinding mechansisms
Databinding is VASTLY superior in WPF
Do you always use the Visual Studio designer for data binding where possible?
![Page 60: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/60.jpg)
Bad – write your own boring code
Private Sub OnLoad() OrderDetailsService.Instance.GetAll(Me.OrderDetailsDataSet1) Dim row As OrderDetailsDataSet.OrderDetailsRow = Me.OrderDetailsDataSet1.OrderDetails(0) Me.TextBox1.Text = row.UnitPrice.ToString("c") End Sub
Private Sub Save() Dim row As OrderDetailsDataSet.OrderDetailsRow = Me.OrderDetailsDataSet1.OrderDetails(0) row.UnitPrice = Decimal.Parse(Me.TextBox1.Text, System.Globalization.NumberStyles.Currency) End Sub
![Page 61: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/61.jpg)
SimpleBinding to a single property
ComplexBinding to a list
Using the Designer
![Page 62: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/62.jpg)
MDI Forms
![Page 63: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/63.jpg)
Hangover from Access 2.0
and Windows 3.1
Clutter the application
Only one window on
the taskbar
No multiple monitor support
MDI Forms
![Page 64: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/64.jpg)
Do you make common control with certain width?
![Page 65: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/65.jpg)
Bad/Good Example #1
![Page 66: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/66.jpg)
Bad/Good Example #2
![Page 67: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/67.jpg)
TestingDon‘t trust anyone
![Page 68: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/68.jpg)
Part of Visual Studio 2010 "Ultimate" edition
Microsoft Test Manager
![Page 69: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/69.jpg)
Microsoft Test Manager
![Page 70: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/70.jpg)
![Page 71: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/71.jpg)
Generate Coded UI test
![Page 72: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/72.jpg)
Use existing recording
![Page 73: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/73.jpg)
Generated coded UI test
[TestMethod]public void CodedUITestMethod1(){
this.UIMap.StartApplication(); this.UIMap.LoginToApplication(); this.UIMap.SeeDetailsform(); this.UIMap.ClickOnnextRecord(); this.UIMap.SeetheNextRecord();
}
![Page 74: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/74.jpg)
Automated recording
IntelliTrace (drill through to Visual Studio)
Bug in TFS
Video.wmv
Detailed steps
Lots of details (you don’t need if you get intelliTrace)
Stack traceSystem info
Microsoft Test Manager
![Page 75: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/75.jpg)
![Page 76: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/76.jpg)
Book "User Interface Design for Programmers“
Blog
http://www.joelonsoftware.com/
UX patterns
http://quince.infragistics.com/
Resources
![Page 77: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/77.jpg)
http://www.windowforms.net
http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInterfaces.aspx
Windows UX Guidelines
http://msdn.microsoft.com/en-us/library/aa511258.aspx
Designing Interfaces
http://designinginterfaces.com/
Automate UI - VS2010 Test Manager
Resources
![Page 78: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/78.jpg)
Covers Windows UI reference guidelines
This should be your main ‘Bible’ when designing Windows Forms (not Web) if you’re not a designer as it provides a consistent standard
Windows UX Guidelines
![Page 79: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/79.jpg)
What's next?
![Page 80: Better User Experience with .NET](https://reader035.vdocuments.us/reader035/viewer/2022081413/546ed6dfaf795987318b5e99/html5/thumbnails/80.jpg)
Thank You!
Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA
ABN: 21 069 371 900
Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105