Better User Experience with .NET

Developing Windows and Web Applications using Visual Studio.NETPeter GfaderSenior Software Architect

„Add New“ disabledProblems with Lab / homework?

Unused methods, after removing UI controlsTip

C# 3.0, C# 4.0, C# 5LINQData with LINQSession 2: Last week?

User Experience (UX)Tips and Techniques, Best practicesWindows Forms Capabilities and Demo’sTools to better UX & codeUX ResourcesAgenda

Better User Experience with .NET

Enter data Find data Show dataEvery business app does

Professional Feel Enter data ValidationFind data Filter dataRich data queryShow dataDifferent ViewsReports (nice printing)Authorization?Every business app

Make site feel aliveReact fastInteract with user“Joy of use”UX - Feel

DevelopersNeed a UI to test their software as they buildUI increases in complexity as software is builtApplication grows but the UI isn’t consistentKnow how the controls work (or they should!!)DesignersMay design the UI but not realize WHAT is possibleMay understand a Visual Consistency but not how its builtWho designs the UI?

„User driven“Do testing with the userPrototypingUsability testingLet user solve a task and see (measure) what he doesUser

Bandwidth – Presentation layerCache / persistent stateFaster ServerBecause of less requests and less work… thanks to processing power being used on clientRicher interfaceNo buggy DHTML/JavaScriptMore responsiveFaster to developNo cross-browser issuesBuild complex controls quicklyWhy Windows Forms?

Not allowed in Standard Operating EnvironmentCross-platform requirements (Linux, PC, Mac)Deployment of the Application is harder / Centralised logicRequires an always-connected data serviceWhy NOT Windows Forms?

Network AdminsDevelopersEnd UsersAccountsWho Do I Please?Browser Based SolutionRich Client Solution

Who uses prototypes?SketchflowBalsamiqDo you design a mockup UI first?

Avoid the thought of a “throw away” prototype.Use as the first step to start a project (or get a project) - WYSIWYGGet great initial feedbackBetter than 100 page documentGet designer involved if need be (Developers can’t design)Tip: Always add client logo + colours. They are easily impressed!Designing a Mockup UI

Would you design Database first or UI?Database schema should be designed before the UI is startedIf 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

Windows Forms – Best practices

Visual InheritanceComposition and Containment (Panels, Usercontrols)DatabindingToolTipsError Provider and ValidatorsAppsettingsWinform Architecture

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 firstA()A.InitializedComponent()B()B.InitialzeComponent()Visual Inheritance

Controls on the Base Form are BY DEFAULT “private” and cannot be edited in the inherited formSolution: Change the modifer to “Protected”Visual Inheritance

Common BehaviourCompany Icon Remembering its size and locationAdding itself to a global forms collection (to find forms that are already open, or to close all open forms) ** Application.OpenFormsLogging usage frequency and performance of forms (load time)No Controls!Inherited Forms – For Every Form

CenterParent only for modal dialogs (to prevent multi-monitor confusion) CenterScreen only for the main form (MainForm), or a splash screen WindowsDefaultLocation for everything else (99% of forms) - prevents windows from appearing on top of one anotherStartPosition

FixedDialog only for modal dialog boxes FixedSingle only for the the main form (MainForm) - FixedSingle has an icon whereas FixedDialog doesn'tNone for splash screen Sizable for any form that has multi-line textbox, grid, listbox or suchFormBorderStyle

Do you encapsulate (aka lock) values of forms?

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.aspxEditorBrowsable: whether a property or method is viewable in an editor.http://msdn.microsoft.com/en-us/library/system.componentmodel.editorbrowsableattribute.aspxHiding Values

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 syntaxMyBase.Font = New Font(Me.Font.FontFamily, 20) End SetEnd Property

Do you know when to use User Controls?

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

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

User ControlsControls only used onceBad! »

User ControlsOnly for reuseGood! »

User Controls – TabPagesException! »

Possible Exception:When a form has multiple tabs, and each tab has numerous controls – it can be easier to use User Control in this caseSmaller designer generated codeMore than one person can be working on a different ‘tab’User Controls – TabPages

Code intensiveMust manually handle the Validating event of each control you want to validateMust be manually running the validation methods when the OK or Apply button is clickedError Provider

Controls that “attach” themselves to existing Do you use validator controls?

Validator ControlsGoodNo code, all in the designer (integrates with the ErrorProvider)

Validation logic is in the ModelValidation with Entity Frameworkpublic partial class Employee{ partial void OnLastNameChanging(string value) { if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0) { throw new ArgumentException("No GFADER allowed"); } }}

Validation logic is in the ModelValidation with Entity Frameworkpublicpartialclass Employee{partialvoidOnLastNameChanging(string value) {if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0) {thrownewArgumentException("No GFADERallowed"); } }}

Partial class holds validation logicPartial class

Happens in modelDifferent UI layers can react to validation differentlyWeb pageWindows FormSilverlightWPF...Validation

Monitor Performance betterGood user feedbackEasy to doAdamE 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?

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

Two-way binding means that the object/data structure is bound to the UI Element/ControlThe setting/getting and the positioning of elements in a collection is handled by the databindingmechansismsDatabinding is VASTLY superior in WPFDo you always use the Visual Studio designer for data binding where possible?

Bad – write your own boring codePrivate 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

Using the DesignerSimpleBinding to a single propertyComplexBinding to a list

MDI FormsHangover from Access 2.0 and Windows 3.1Clutter the applicationOnly one window on the taskbarNo multiple monitor support

Do you make common control with certain width?

Part of Visual Studio 2010 "Ultimate" editionMicrosoft Test Manager

Generated coded UI test[TestMethod]publicvoid CodedUITestMethod1(){this.UIMap.StartApplication();this.UIMap.LoginToApplication();this.UIMap.SeeDetailsform();this.UIMap.ClickOnnextRecord();this.UIMap.SeetheNextRecord();}

Automated recordingIntelliTrace (drill through to Visual Studio)Bug in TFSVideo.wmvDetailed stepsLots of details (you don’t need if you get intelliTrace)Stack traceSystem infoMicrosoft Test Manager

Book "User Interface Design for Programmers“Bloghttp://www.joelonsoftware.com/UX patternshttp://quince.infragistics.com/Resources

http://www.windowforms.nethttp://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInterfaces.aspxWindows UX Guidelineshttp://msdn.microsoft.com/en-us/library/aa511258.aspxDesigning Interfaceshttp://designinginterfaces.com/Automate UI - VS2010 Test ManagerResources

Covers Windows UI reference guidelinesThis should be your main ‘Bible’ when designing Windows Forms (not Web) if you’re not a designer as it provides a consistent standardWindows UX Guidelines

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 info@ssw.com.auwww.ssw.com.au

Better User Experience with .NET

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Better User Experience with .NET (20)

More from Peter Gfader (20)

Recently uploaded (20)

Better User Experience with .NET

Editor's Notes