Superior ways to a better UI
Download
Report
Transcript Superior ways to a better UI
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…
[email protected]
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
[email protected]
www.ssw.com.au