better user experience with .net

Developing Windows and Web Applications using Visual Studio.NET

Peter Gfader

Senior Software Architect

Homework?

„Add New“ disabled

Problems with Lab / homework?

Unused methods, after removing UI controls

Tip

C# 3.0, C# 4.0, C# 5

LINQ

Data with LINQ

Session 2: Last week?

User Experience (UX)

Tips and Techniques, Best practices

Windows Forms Capabilities and Demo’s

Tools to better UX & code

UX Resources

Agenda

Business applications

Enter data

Find data

Show data

Every business app does

Professional Feel

Enter data

Validation

Find data

Filter data Rich data query

Show data

Different Views Reports (nice printing) Authorization?

Every business app

User Experience

User experience

3 pillars

UX - Look

UX - Usability

Make site feel alive

React fast

Interact with user

“Joy of use”

UX - Feel

How can we improve UX

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?

The user

Who uses the UI?

„User driven“

Do testing with the user

Prototyping

Usability testing

Let user solve a task and see (measure) what he does

User

Why choose Windows Forms?

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?

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?

Network Admins

Developers

End Users

Accounts

Who Do I Please?

Browser Based Solution

Rich Client Solution

Who uses prototypes?

Sketchflow Balsamiq

Do 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) - 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

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

Windows Forms – Best practices

Visual Inheritance

Composition and Containment (Panels, Usercontrols)

Databinding

ToolTips

Error Provider and Validators

Appsettings

Winform 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 first

1. A()

2. A.InitializedComponent()

3. B()

4. B.InitialzeComponent()

Visual Inheritance

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

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

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

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

Base Data Entry Form

1

2

3

4

Do you encapsulate (aka lock) values of forms?

Hiding Values

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

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

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

Controls only used once

Bad! »

User Controls

Only for reuse

Good! »

User Controls

Exception! »

User Controls – TabPages

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

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

Controls that “attach” themselves to existing

Do you use validator controls?

Good

No code, all in the designer (integrates with the ErrorProvider)

Validator Controls

Windows Forms – Validation

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"); } }}

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"); }

}

}

Partial class holds validation logic

Partial class

Hook up ErrorProvider

Happens in model

Different UI layers can react to validation differently

Web page Windows Form Silverlight WPF ...

Validation

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?

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/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?

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

SimpleBinding to a single property

ComplexBinding to a list

Using the Designer

MDI Forms

Hangover from Access 2.0

and Windows 3.1

Clutter the application

Only one window on

the taskbar

No multiple monitor support

MDI Forms

Do you make common control with certain width?

Bad/Good Example #1

Bad/Good Example #2

TestingDon‘t trust anyone

Part of Visual Studio 2010 "Ultimate" edition

Microsoft Test Manager

Microsoft Test Manager

Generate Coded UI test

Use existing recording

Generated coded UI test

[TestMethod]public void CodedUITestMethod1(){

this.UIMap.StartApplication(); this.UIMap.LoginToApplication(); this.UIMap.SeeDetailsform(); this.UIMap.ClickOnnextRecord(); this.UIMap.SeetheNextRecord();

}

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

Book "User Interface Design for Programmers“

Blog

http://www.joelonsoftware.com/

UX patterns

http://quince.infragistics.com/

Resources

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

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

What's next?

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