Superior ways to a better UI

advertisement
Developing Windows
and Web Applications
using Visual
Studio.NET
Drew Robson
Tip

Unused methods, after removing UI controls
Session 2: Last week?

C# 3.0, C# 4.0

http://www.extensionmethod.net/

LINQ

Databining with LINQ
Agenda

User Experience (UX)

Tips and Techniques, Best practices

Windows Forms Capabilities and Demo’s

Tools to better UX & code

UX Resources
Poor User Experience
Good User Experience
Business applications
Every business app does



Data entry
Every business app does



Finding data
Every business app does



Displaying data
Every business app

Data entry


Finding data



Validation
Filtering data
Rich data queries
Displaying data



Different Views
Reports (nice printing)
Authorization?
Over Complicated Design
Lack of Design
Too Many Options
User Experience
User Experience

3 pillars
UX - Look
UX - Usability
UX - Feel

Make a site feel alive

React fast

Interact with user

“Joy of use”
How can we improve UX
Who designs the UI?
Who designs the UI?

Developers





UI to test their software as they build
UI increases in complexity
Application grows but the UI isn’t consistent
Know how the controls work (or they should!!)
Designers


Design the UI but not realize WHAT is possible
Understand a Visual Consistency but not how its built
Who uses the UI?
User

“User driven“

Testing is done with the user

Prototyping

Usability testing

Let the user solve a task and see (measure) what he does
Why choose Windows Forms?
Why 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 NOT Windows Forms?

Not allowed in some Standard Operating Environments

Cross-platform requirements (Linux, PC, Mac)

Deployment of the Application is harder / Centralised logic

Requires an always-connected data service
Who Do I Please?

Network Admins

Developers

End Users

Accountants
Browser Based
Solution
Rich Client
Solution








Do you design a mockup UI first?

Who uses prototypes?


Sketchflow
Balsamiq
Designing a Mockup UI

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 a designer involved if need be (Developers can’t design)

Tip: Always add the client logo + colours. They are easily impressed!
Designing a Mockup UI

Would you design the Database first or the UI?

The 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.
Windows Forms – Best practices
Winform Architecture

Visual Inheritance

Composition and Containment (Panels, Usercontrols)

Databinding

ToolTips

Error Provider and Validators

Appsettings
Visual Inheritance

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”
Inherited Forms – For Every Form

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!
StartPosition
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
FormBorderStyle

FixedDialog only for modal dialog boxes

FixedSingle only for 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
Base Data Entry Form
1
2
Do you encapsulate (aka lock) the
values of forms?
Hiding Values
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
using System.ComponentModel;
Imports System.ComponentModel
[Browsable(false),
EditorBrowsable(false)]
public new Font Font
{
get
{
return base.Font;
}
set
{
base.Font = value;
}
}
<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 Set
End Property
Do you know when to use User
Controls?
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

Each control is used only once
User Controls

Implemented for reuse
User Controls – TabPages
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’
Do you use a status bar to show load
time?

Monitor Performance better

Good user feedback

Easy to do
Splash Screens

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.
Do you always use the Visual Studio designer
for data binding where possible?

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
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
Using the Designer

Simple
Binding to a single property

Complex
Binding to a list
MDI Forms
MDI Forms

Hangover from Access 2.0
and Windows 3.1

Clutter the application

Only one window on
the taskbar

No multiple monitor support
Do you make common control with
certain width?
Example #1
Example #2
Windows Forms – Validation
Don‘t trust anyone
#1 Error Provider

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
Do you use validator controls?

Controls that “attach” themselves to input controls
#2 Validator Controls

Good

No code, all in the designer (integrates with the
ErrorProvider)
#3 Validation with Entity Framework

Validation logic is in the Model
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

Partial classes can hold validation logic
Hook up ErrorProvider
Validation

Happens in model

Different UI layers can react to validation differently





Web page
Windows Form
Silverlight
WPF
...
Resources - Dev

How to develop an Internet browser?


How to develop Windows task manager?


http://www.computingtuts.com/blog/?page_id=48
http://www.codeproject.com/KB/dotnet/threadmonitor.aspx
Coding 4 fun

http://blogs.msdn.com/coding4fun/
Resources

Rules to better Windows Forms


Book "User Interface Design for Programmers“ - Joel Spolsky


http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetter
WindowsForms.aspx
http://www.joelonsoftware.com/ blog!
UX patterns

http://quince.infragistics.com/
Resources

Rules to better Interfaces


Windows UX Guidelines


http://msdn.microsoft.com/en-us/library/aa511258.aspx
Designing Interfaces


http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInterfaces.aspx
http://designinginterfaces.com/
VB 2012 wish list

http://blogs.msdn.com/lucian/archive/2010/01/28/what-didn-t-get-intovb10.aspx
Links

LINQ to everything


http://blogs.msdn.com/charlie/archive/2006/10/05/Links-toLINQ.aspx
Windows Forms and WPF development

http://windowsclient.net/
Windows UX Guidelines

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
http://msdn.microsoft.com/en-us/library/ff657751(v=VS.85).aspx
2 things…

DrewRobson@ssw.com.au

twitter.com/drewmrobson
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.au
www.ssw.com.au
Download