Transcript © 2004 SRP Computer Solutions, Inc., All Rights Reserved SRP Computer Solutions, Inc. Why do we need to be concerned about our GUI? -

© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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)
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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)
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
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.
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
Questions?
© 2004 SRP Computer Solutions, Inc., All Rights Reserved
Thank You!
© 2004 SRP Computer Solutions, Inc., All Rights Reserved