• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Better User Experience with .NET
 

Better User Experience with .NET

on

  • 1,835 views

User Experience (UX)

User Experience (UX)
Tips and Techniques, Best practices
Windows Forms Capabilities and Demo’s
Tools to better UX & code
UX Resources

Statistics

Views

Total Views
1,835
Views on SlideShare
1,833
Embed Views
2

Actions

Likes
1
Downloads
17
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Click to add notesPeter Gfader Developing Windows and Web applications
  • Show View call hierarchy: for finding uncalled methodsCtrl+K, Ctrl+T
  • Who did the C# tutorial?What is .NET?What is .NET framework?What is the CLR?What is OOP?Classes, Objects, Properties, Events, MethodsEncapsulation, Abstraction, Inheritance, Polymorphism
  • Browse iPhone apps on the web without iTuneshttp://www.yappler.com/
  • User Experience consists of usability, look and feelWe want to improve the feel and usability
  • ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal
  • Make the site feel alive
  • How can we make our users happy
  • What do they do?
  • Its all about the user!
  • Demo Test managerRecord interaction with NorthwindEntities (from lab week2)

Better User Experience with .NET Better User Experience with .NET Presentation Transcript

  • 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
    A()
    A.InitializedComponent()
    B()
    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
  • 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 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
    3
    4
    1
    2
  • 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 Values
    using 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 Controls
    Controls only used once
    Bad! »
  • User Controls
    Only for reuse
    Good! »
  • User Controls – TabPages
    Exception! »
  • 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?
  • Validator Controls
    Good
    No code, all in the designer (integrates with the ErrorProvider)
  • 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
    publicpartialclass Employee
    {
    partialvoidOnLastNameChanging(string value)
    {
    if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0)
    {
    thrownewArgumentException("No GFADERallowed");
    }
    }
    }
  • 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 databindingmechansisms
    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
  • Using the Designer
    SimpleBinding to a single property
    ComplexBinding 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?
  • Bad/Good Example #1
  • Bad/Good Example #2
  • Testing
    Don‘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]
    publicvoid 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 trace
    System 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