170 likes | 302 Views
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.
E N D
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 don’t like the look, feel, smell, or taste of our GUI it will not matter how great actual system may actually be underneath the surface.
SRP Computer Solutions, Inc. Why is (good) GUI design difficult? Blame Rev/G and AREV. They work too well: - 80 columns x 25 rows = 400 blocks of real estate. - 16 color choices. - 1 font. - 800 x 600 pixels = 480,000 pixels of real estate. - 16.7 million color choices. - More fonts than all your fingers and toes.
SRP Computer Solutions, Inc. Why is (good) GUI design difficult? So many ways to present the data: - All we have are labels and fields. - We specify how those fields work. - We have editlines, editboxes, and edittables. - We have listboxes, comboboxes, radiogroups checkboxes, and slider controls. - We have groupboxes, bitmaps, and static labels. - We even have the world of OLE.
SRP Computer Solutions, Inc. Why is (good) GUI design difficult? • Revelation developers/programmers “do it all”. • 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…it’s just a bunch of Micro$oft/Bill Gates garbage.
SRP Computer Solutions, Inc. What makes a good GUI? GUI design depends upon these three categories: • Philosophy (Understanding what a user needs) • Aesthetics (Understanding what a user likes) • Technique (Understanding how to make it work)
SRP Computer Solutions, Inc. What makes a good GUI? The Three “C”s of GUI design. Our GUI must be… 1. Clear 2. Clean 3. Consistent
SRP Computer Solutions, Inc. What makes a good GUI? 1. A “Clear” GUI is: - Intuitive, using correct controls and metaphors. - Simple, using minimal verbiage and is unambiguous. - Organized, using logical groupings and uncluttered forms.
SRP Computer Solutions, Inc. What makes a good GUI? 2. A “Clean” GUI is: - Balanced, where controls are evenly distributed. - Symmetrical, where gray space is evenly distributed. - Squared, where our forms can be divided into nice and tidy rectangles.
SRP Computer Solutions, Inc. What makes a good GUI? 3. A “Consistent” GUI is: - Standardized, where the same visual look and feel is maintained through the entire application. - Prioritized, where sufficient time and energy is devoted to implement our standards. - Compliant, where the standards used above are familiar, common, and proven.
SRP Computer Solutions, Inc. Tools and Resources 1. OpenInsight 7.0 or higher • Extended style support for borders/no black borders • Improved “disabled” control look • Bleed through problem fixed • Residual text in controls fixed • Ctrl-Arrow keys in the Form Designer
SRP Computer Solutions, Inc. Tools and Resources 2. Zoom+ (http://www.gipsysoft.com/zoomplus) 3. Paint – or your own favorite pixel editor 4. Joel Spolsky’s User Interface Design for Programmers online articles (http://www.joelonsoftware.com)
SRP Computer Solutions, Inc. Form Designer Tips • Use pre-sized and pre-designed forms. • 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.
SRP Computer Solutions, Inc. Common GUI problems • Minimize buttons on dialog boxes. • 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 don’t visually line their outer controls.
SRP Computer Solutions, Inc. Common GUI problems • Left justified numbers, especially decimals. • Lack of tooltips/bubblehelp for graphical pushbuttons. • No “OK” or “Cancel” defaults. • Modal dialog boxes that aren’t 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.