ITPE-104-Module-2-Lesson1-2.pdf

Module 2: The Graphical User Interface Lesson1: Components of GUI The graphical user interface (GUI), popularized by Microsoft Windows, is an interactive visual interface rather than a command or text-only interface. The interactive interface tools are visually represented as windows, icons,...

Module 2: The Graphical User Interface Lesson1: Components of GUI The graphical user interface (GUI), popularized by Microsoft Windows, is an interactive visual interface rather than a command or text-only interface. The interactive interface tools are visually represented as windows, icons, menus, and a pointer device, which collectively are known as WIMP. The GUI interface also includes a text interface, called the graphical character-based interface. Presently, GUI is the most common and well-known user interface for computers and some earlier mobile devices like mobile phones and laptops. Gracoli, a hybrid interface, combines the strengths of the GUI and CLI to perform application specific interfaces C# has all the features of any powerful, modern language. In C#, the most rapid and convenient way to create your user interface is to do so visually, using the Windows Forms Designer and Toolbox. Windows Forms controls are reusable components that encapsulate user interface functionality and are used in client side Windows based applications. A control is a component on a form used to display information or accept user input. The Control class provides the base functionality for all controls that are displayed on a Form. From the following steps you can understand how to place a new control on windows Form and the CUI Controls Button Textbox ComboBox RadioButton  CheckBox DataGrid View CREATING NEW PROJECT IN C#  1. Menu Bar 2. Standard Toolbar 3. ToolBox 4. Forms Designer 5. Output Window 6. Solution Explorer 7. Properties Window 1 2 6 3 4 5 7  Lesson2: GUI Design Principles 1. Place users in control of the interface  Good UIs instill a sense of control in their users. Keeping users in control makes them comfortable; they will learn quickly and gain a fast sense of mastery.  Make actions reversible – be forgiving  Create an easy-to-navigate interface  Provide informative feedback – be acknowledging  Show the visibility of system status  Accommodate users with different skill levels 2. Make it comfortable to interact with a product  Eliminate all elements that are not helping your users  Don’t ask users for data they’ve already entered  Avoid jargon and system-oriented terms  Apply Fitts’s Law to interactive elements- Fitts Law states that the time to acquire a target is a function of the distance to and size of the target. This means that it’s better to design large targets for important functions (big buttons are easier to interact with).  Design accessible interfaces  Use real-world metaphors  Engineer for errors  Protect a user’s work 3. Reduce cognitive load  Chunking for sequences of information or actions  Reduce the number of actions required to complete a task  Recognition over recall  Promote visual clarity 4. Make user interfaces consistent   Visual consistency (style)  Functional consistency (behavior)  Consistent with user expectations Activity 2: 1. Relative to your activity one, design the GUI of you proposed project using the software you installed last time. The GUI will compose of the following output: Basic Login: (Registration and User Authentication) Basic File Maintenance: Create, Read, Update and Delete (CRUD). Wait for the approval of your proposal before you can start this activity.