Better User Experience with .NET


Published on

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

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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 iTunes
  • 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

    1. 1. Developing Windows and Web Applications using Visual Studio.NET<br />Peter Gfader<br />Senior Software Architect<br />
    2. 2. Homework?<br />
    3. 3. „Add New“ disabled<br />Problems with Lab / homework?<br />
    4. 4. Unused methods, after removing UI controls<br />Tip<br />
    5. 5. C# 3.0, C# 4.0, C# 5<br />LINQ<br />Data with LINQ<br />Session 2: Last week?<br />
    6. 6. User Experience (UX)<br />Tips and Techniques, Best practices<br />Windows Forms Capabilities and Demo’s<br />Tools to better UX & code<br />UX Resources<br />Agenda<br />
    7. 7.
    8. 8.
    9. 9. Business applications<br />
    10. 10. Enter data <br />Find data <br />Show data<br />Every business app does<br />
    11. 11. Professional Feel <br />Enter data <br />Validation<br />Find data <br />Filter data<br />Rich data query<br />Show data<br />Different Views<br />Reports (nice printing)<br />Authorization?<br />Every business app<br />
    12. 12. User Experience<br />
    13. 13. User experience<br />3 pillars<br />
    14. 14. UX - Look<br />
    15. 15. UX - Usability<br />
    16. 16. Make site feel alive<br />React fast<br />Interact with user<br />“Joy of use”<br />UX - Feel<br />
    17. 17. How can we improve UX<br />
    18. 18. Developers<br />Need a UI to test their software as they build<br />UI increases in complexity as software is built<br />Application grows but the UI isn’t consistent<br />Know how the controls work (or they should!!)<br />Designers<br />May design the UI but not realize WHAT is possible<br />May understand a Visual Consistency but not how its built<br />Who designs the UI?<br />
    19. 19. The user<br />Who uses the UI?<br />
    20. 20. „User driven“<br />Do testing with the user<br />Prototyping<br />Usability testing<br />Let user solve a task and see (measure) what he does<br />User<br />
    21. 21. Why choose Windows Forms?<br />
    22. 22. Bandwidth – Presentation layer<br />Cache / persistent state<br />Faster Server<br />Because of less requests and less work… thanks to processing power being used on client<br />Richer interface<br />No buggy DHTML/JavaScript<br />More responsive<br />Faster to develop<br />No cross-browser issues<br />Build complex controls quickly<br />Why Windows Forms?<br />
    23. 23. Not allowed in Standard Operating Environment<br />Cross-platform requirements (Linux, PC, Mac)<br />Deployment of the Application is harder / Centralised logic<br />Requires an always-connected data service<br />Why NOT Windows Forms?<br />
    24. 24. Network Admins<br />Developers<br />End Users<br />Accounts<br />Who Do I Please?<br />Browser Based Solution<br />Rich Client Solution<br /><br /><br /><br /><br /><br /><br /><br /><br />
    25. 25. Who uses prototypes?<br />Sketchflow<br />Balsamiq<br />Do you design a mockup UI first? <br />
    26. 26. Avoid the thought of a “throw away” prototype.<br />Use as the first step to start a project (or get a project) - WYSIWYG<br />Get great initial feedback<br />Better than 100 page document<br />Get designer involved if need be (Developers can’t design)<br />Tip: Always add client logo + colours. They are easily impressed!<br />Designing a Mockup UI<br />
    27. 27. Would you design Database first or UI?<br />Database schema should be designed before the UI is started<br />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.<br />Designing a Mockup UI<br />
    28. 28. Windows Forms – Best practices<br />
    29. 29. Visual Inheritance<br />Composition and Containment (Panels, Usercontrols)<br />Databinding<br />ToolTips<br />Error Provider and Validators<br />Appsettings<br />Winform Architecture<br />
    30. 30. 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<br />A()<br />A.InitializedComponent()<br />B()<br />B.InitialzeComponent()<br />Visual Inheritance<br />
    31. 31. Controls on the Base Form are BY DEFAULT “private” and cannot be edited in the inherited form<br />Solution: Change the modifer to “Protected”<br />Visual Inheritance<br />
    32. 32. Common Behaviour<br />Company Icon <br />Remembering its size and location<br />Adding itself to a global forms collection (to find forms that are already open, or to close all open forms) <br /> ** Application.OpenForms<br />Logging usage frequency and performance of forms (load time)<br />No Controls!<br />Inherited Forms – For Every Form<br />
    33. 33. CenterParent only for modal dialogs (to prevent multi-monitor confusion) <br />CenterScreen only for the main form (MainForm), or a splash screen <br />WindowsDefaultLocation for everything else (99% of forms) - prevents windows from appearing on top of one another<br />StartPosition<br />
    34. 34. FixedDialog only for modal dialog boxes <br />FixedSingle only for the the main form (MainForm) - FixedSingle has an icon whereas FixedDialog doesn't<br />None for splash screen <br />Sizable for any form that has multi-line textbox, grid, listbox or such<br />FormBorderStyle <br />
    35. 35. Base Data Entry Form<br />3<br />4<br />1<br />2<br />
    36. 36. Do you encapsulate (aka lock) values of forms?<br />
    37. 37. Hiding Values<br />
    38. 38. Developers fiddle!<br />Browsable: whether a property or event should be displayed in a Properties window.<br />EditorBrowsable: whether a property or method is viewable in an editor.<br />Hiding Values<br />
    39. 39. Hiding Values<br />using System.ComponentModel;<br />[Browsable(false), EditorBrowsable(false)]<br />public new Font Font<br />{<br /> get<br /> {<br /> return base.Font;<br /> }<br /> set<br /> {<br />base.Font = value;<br /> } <br />}<br />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)<br /> End SetEnd Property <br />
    40. 40. Do you know when to use User Controls?<br />
    41. 41. You lose the AcceptButton and CancelButton properties from the Designer e.g. OK, Cancel, Apply<br /> Therefore the OK, Cancel and Apply buttons cannot be on User Controls.<br /> User Controls<br />
    42. 42. You can use a user control more than once on the same form e.g. Mailing Address, Billing Address <br />You can reuse logic in the code behind the controls e.g. Search control <br />User controls are less prone to visual inheritance errors<br /> User Controls<br />
    43. 43. User Controls<br />Controls only used once<br />Bad! »<br />
    44. 44. User Controls<br />Only for reuse<br />Good! »<br />
    45. 45. User Controls – TabPages<br />Exception! »<br />
    46. 46. Possible Exception:<br />When a form has multiple tabs, and each tab has numerous controls – it can be easier to use User Control in this case<br />Smaller designer generated code<br />More than one person can be working on a different ‘tab’<br />User Controls – TabPages <br />
    47. 47. Code intensive<br />Must manually handle the Validating event of each control you want to validate<br />Must be manually running the validation methods when the OK or Apply button is clicked<br />Error Provider<br />
    48. 48. Controls that “attach” themselves to existing <br />Do you use validator controls? <br />
    49. 49. Validator Controls<br />Good<br />No code, all in the designer (integrates with the ErrorProvider)<br />
    50. 50. Windows Forms – Validation<br />
    51. 51. Validation logic is in the Model<br />Validation with Entity Framework<br />public partial class Employee<br />{<br /> partial void OnLastNameChanging(string value)<br /> {<br /> if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0)<br /> {<br /> throw new ArgumentException("No GFADER allowed");<br /> }<br /> }<br />}<br />
    52. 52. Validation logic is in the Model<br />Validation with Entity Framework<br />publicpartialclass Employee<br />{<br />partialvoidOnLastNameChanging(string value)<br /> {<br />if (string.Compare(value, "Gfader", StringComparison.InvariantCultureIgnoreCase) == 0)<br /> {<br />thrownewArgumentException("No GFADERallowed");<br /> }<br /> }<br />}<br />
    53. 53. Partial class holds validation logic<br />Partial class<br />
    54. 54. Hook up ErrorProvider<br />
    55. 55.
    56. 56. Happens in model<br />Different UI layers can react to validation differently<br />Web page<br />Windows Form<br />Silverlight<br />WPF<br />...<br />Validation<br />
    57. 57. Monitor Performance better<br />Good user feedback<br />Easy to do<br />AdamE thinks“general user’s don’t care about technical details, a progress bar is better”<br />Do you use a status bar to show load time?<br />
    58. 58. 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.<br />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.<br />Splash Screens<br />
    59. 59. Two-way binding means that the object/data structure is bound to the UI Element/Control<br />The setting/getting and the positioning of elements in a collection is handled by the databindingmechansisms<br />Databinding is VASTLY superior in WPF<br />Do you always use the Visual Studio designer for data binding where possible?<br />
    60. 60. Bad – write your own boring code<br />Private Sub OnLoad()<br />OrderDetailsService.Instance.GetAll(Me.OrderDetailsDataSet1)<br /> Dim row As OrderDetailsDataSet.OrderDetailsRow = Me.OrderDetailsDataSet1.OrderDetails(0)<br /> Me.TextBox1.Text = row.UnitPrice.ToString("c")<br /> End Sub<br /> Private Sub Save()<br /> Dim row As OrderDetailsDataSet.OrderDetailsRow = Me.OrderDetailsDataSet1.OrderDetails(0)<br />row.UnitPrice = Decimal.Parse(Me.TextBox1.Text, System.Globalization.NumberStyles.Currency)<br /> End Sub<br />
    61. 61. Using the Designer<br />SimpleBinding to a single property<br />ComplexBinding to a list<br />
    62. 62. MDI Forms<br />
    63. 63. MDI Forms<br />Hangover from Access 2.0 <br /> and Windows 3.1<br />Clutter the application<br />Only one window on <br /> the taskbar<br />No multiple monitor support<br />
    64. 64. Do you make common control with certain width?<br />
    65. 65. Bad/Good Example #1<br />
    66. 66. Bad/Good Example #2<br />
    67. 67. Testing<br />Don‘t trust anyone<br />
    68. 68. Part of Visual Studio 2010 "Ultimate" edition<br />Microsoft Test Manager<br />
    69. 69. Microsoft Test Manager<br />
    70. 70.
    71. 71. Generate Coded UI test<br />
    72. 72. Use existing recording<br />
    73. 73. Generated coded UI test<br />[TestMethod]<br />publicvoid CodedUITestMethod1()<br />{<br />this.UIMap.StartApplication();<br />this.UIMap.LoginToApplication();<br />this.UIMap.SeeDetailsform();<br />this.UIMap.ClickOnnextRecord();<br />this.UIMap.SeetheNextRecord();<br />}<br />
    74. 74. Automated recording<br />IntelliTrace (drill through to Visual Studio)<br />Bug in TFS<br />Video.wmv<br />Detailed steps<br />Lots of details (you don’t need if you get intelliTrace)<br />Stack trace<br />System info<br />Microsoft Test Manager<br />
    75. 75.
    76. 76. Book "User Interface Design for Programmers“<br />Blog<br /><br />UX patterns<br /><br />Resources<br />
    77. 77.<br /><br />Windows UX Guidelines<br /><br />Designing Interfaces<br /><br />Automate UI - VS2010 Test Manager<br />Resources<br />
    78. 78. Covers Windows UI reference guidelines<br />This should be your main ‘Bible’ when designing Windows Forms (not Web) if you’re not a designer as it provides a consistent standard<br />Windows UX Guidelines<br />
    79. 79. What's next?<br />
    80. 80. Thank You!<br />Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA <br />ABN: 21 069 371 900 <br />Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105 <br /> <br />