1. © 2004 SRP Computer Solutions, Inc., All Rights Reserved

2. SRP Computer Solutions, Inc. Why do we need to be concerned about our GUI? - First impressions mean a lot. - Expectations of performance/quality are based on the GUI. - A good GUI helps you appear more established, experienced, and larger. - It is the only documentation many or most users read. - Bottom line...if our end users dont like the look, feel, smell, or taste of our GUI it will not matter how great actual system may actually be underneath the surface.

3. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Why is (good) GUI design difficult? Blame Rev/G and AREV. They work too well: SRP Computer Solutions, Inc. - 800 x 600 pixels = 480,000 pixels of real estate. - 16.7 million color choices. - More fonts than all your fingers and toes. - 80 columns x 25 rows = 400 blocks of real estate. - 16 color choices. - 1 font.

4. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Why is (good) GUI design difficult? So many ways to present the data: SRP Computer Solutions, Inc. - We have editlines, editboxes, and edittables. - We have listboxes, comboboxes, radiogroups checkboxes, and slider controls. - We have groupboxes, bitmaps, and static labels. - All we have are labels and fields. - We specify how those fields work. - We even have the world of OLE.

5. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Why is (good) GUI design difficult? - Revelation developers/programmers do it all. SRP Computer Solutions, Inc. - It takes work and time to get it done. - This is time that takes away from functionality. - We tend to design as if we were the end user. - GUI…its just a bunch of Micro$oft/Bill Gates garbage.

6. © 2004 SRP Computer Solutions, Inc., All Rights Reserved What makes a good GUI? - Philosophy (Understanding what a user needs) SRP Computer Solutions, Inc. - Aesthetics (Understanding what a user likes) - Technique (Understanding how to make it work) GUI design depends upon these three categories:

7. © 2004 SRP Computer Solutions, Inc., All Rights Reserved What makes a good GUI? 1. Clear SRP Computer Solutions, Inc. 2. Clean 3. Consistent The Three Cs of GUI design. Our GUI must be…

8. © 2004 SRP Computer Solutions, Inc., All Rights Reserved What makes a good GUI? - Intuitive, using correct controls and metaphors. SRP Computer Solutions, Inc. - Simple, using minimal verbiage and is unambiguous. - Organized, using logical groupings and uncluttered forms. 1. A Clear GUI is:

9. © 2004 SRP Computer Solutions, Inc., All Rights Reserved What makes a good GUI? - Balanced, where controls are evenly distributed. SRP Computer Solutions, Inc. - Symmetrical, where gray space is evenly distributed. - Squared, where our forms can be divided into nice and tidy rectangles. 2. A Clean GUI is:

10. © 2004 SRP Computer Solutions, Inc., All Rights Reserved What makes a good GUI? - Standardized, where the same visual look and feel is maintained through the entire application. SRP Computer Solutions, Inc. - Prioritized, where sufficient time and energy is devoted to implement our standards. 3. A Consistent GUI is: - Compliant, where the standards used above are familiar, common, and proven.

11. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Tools and Resources - Extended style support for borders/no black borders SRP Computer Solutions, Inc. - Improved disabled control look - Bleed through problem fixed 1. OpenInsight 7.0 or higher - Residual text in controls fixed - Ctrl-Arrow keys in the Form Designer

12. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Tools and Resources SRP Computer Solutions, Inc. 2. Zoom+ (http://www.gipsysoft.com/zoomplus) 3. Paint – or your own favorite pixel editor 4. Joel Spolskys User Interface Design for Programmers online articles (http://www.joelonsoftware.com)

13. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Form Designer Tips - Use pre-sized and pre-designed forms. SRP Computer Solutions, Inc. - Memorize your alignment and Sizing accelerators. - Use the lasso box to help evenly space controls vertically. - Remember that Shift-Click will lasso specific controls. - Autosize and anchor controls even if designing a dialog box. - Put a groupbox around your edittables to provide an edge. - Align static text labels with the text inside of the edit control.

14. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Common GUI problems - Minimize buttons on dialog boxes. SRP Computer Solutions, Inc. - No anchored or autosized controls on resizable windows. - Right aligned text labels. - Lack of accelerators on labels, buttons, and menus. - No repeating accelerators. - Controls are misaligned. - Multi-page forms dont visually line their outer controls.

15. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Common GUI problems - Left justified numbers, especially decimals. SRP Computer Solutions, Inc. - Lack of tooltips/bubblehelp for graphical pushbuttons. - No OK or Cancel defaults. - Modal dialog boxes that arent centered. - Partially displayed rows in edittables and listboxes. - Comboboxes that could be taller. Comboboxes without scrollbars. - Incorrect use of ellipses on buttons and menu items.

16. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Questions?

17. © 2004 SRP Computer Solutions, Inc., All Rights Reserved Thank You!