Enhancing the Graphical User Interface

1. Enhancing the Graphical User Interface Multiple Forms, Controls, and Menus

2. Objectives 1. How to design a good user interface 2. Use Toolbox tools to create and modify forms and controls 3. Multiple Document Interface (MDI) vs. Single Document Interface (SDI) vs. Explorer-style interface 4. Create input features such as text boxes, labels and command buttons

3. Objectives 5. Include graphics using picture box or image controls 6. Create a Graphical User Interface with menus 7. Include file management features using drive list boxes, directory list boxes and file list boxes 8. Include frames, check boxes, option buttons, combo boxes, and list boxes

4. Designing the GUI Interface Styles • Multiple Document Interface (MDI) • Single Document Interface (SDI) • Explorer-style interface

5. Multiple Document Interface Parent Form Child Form Child Form

6. Single Document Interface Independent Form Independent Form

7. Explorer-style interface Left pane browsing controls Right pane detailed view

8. Five Principles of GUI Design Principle 1: Know Your End User Principle 2: Be Consistent Principle 3: Show and Use Informative Graphics and Messages Principle 4: Keep It Simple Principle 5: Let the User Control the Application

9. Principle 1: Know Your End User • Who is my audience? • Will be used by children, adults or both? • What is reading level of users? • If retired adults, use large font. • Write down as much as you know about your end user before beginning design.

10. Principle 2: Be Consistent • Use Windows Guidelines - Close button • Windows standard fonts - Arial, Times New Roman, and MS Sans Serif • Establish font color and size, background color, and foreground color • Use menus and standard menu positions • See Appendix D - Standard Menus for Windows Applications

11. Principle 3: Show and Use Informative Graphics and Messages • Show user, instead of telling • Use informative graphics, instead of merely creative graphics • Graphics especially useful for international applications • GUI analogy - dashboard of car • Use symbols, not words

12. Principle 4: Keep It Simple • KISS “Keep it simple sweetie” • If interface looks difficult, it will be hard to use • Use several forms instead of a single cluttered form • Group items, use tabbed format • Set default options for user

13. Principle 5: Let the User Control the Application • Conversation between computer and end user • Let end user decide tasks and order • Programmer controls computer’s responses to end user • Visual Basic is event-driven so this is relatively easy to achieve

14. Form Designer Grid See Appendix C - The Toolbox, Toolbars, and Controls Twips - screen-independent unit Pixels - picture elements, screen-dependent unit

15. The Learning Arithmetic Project • Game to practice addition, subtraction, multiplication and division skills • Numbers from 0 to 9 • Child in grade 3, 4 or 5 • Give feedback to child • Use Window Calculator accessory as model

16. GUI Enhancement with the Learning Arithmetic Project Hands-On Exercise 1(p.163-174) • Use the Application Wizard • Save your forms and project files • Modify the Splash form • Add the Calculator form • Add the Bears form • Write the Module code • Run and test the project • Debug your project • Print your project and exit

17. End of Lecture