Designing a Graphical User Interface (GUI) 10 IST – Topic 6

The User Interface  determines how the user interacts with the program.  enables users to run or command the program  enables users to enter data into or receive information from the program.

User Interface Design  How a program is designed to interact with the user depends on the program and the user's requirements.  inexperienced users require a simple interface  program that requires users to enter and view large amounts of data requires well-designed and efficient interfaces to maximise the user's productivity.

Types of User Interface 1. Command line interface Command line interfaces are non- graphic and require the user to enter text commands to interact with the program. 2. Graphical User Interface Graphical user interfaces have windows, icons, menus and pointers (WIMP) to enable the user to interact with the software. This interaction with the interface is usually through the mouse and screen elements such as buttons and menus.

The Graphical User Interface (GUI)  Advantages of the GUI  easier to learn  more intuitive  users don't have to remember exact commands  enables interaction with mouse & keyboard as well as other hardware devices – eg. joystick, scanner, printer etc…

The Graphical User Interface (GUI) Features of a GUI  consistency of elements  functionality  navigation  radio buttons and list boxes  borders and white space  instructions to the user  inclusive design features

The Graphical User Interface (GUI)

Consistency  helps users learn to use the program more quickly because they can predict where particular elements of a screen will be located and they can anticipate how the program will work.

The Graphical User Interface (GUI) Functionality  The functionality of an interface comprises the set of capabilities and features that are available to the user.

The Graphical User Interface (GUI) Navigation  The navigation facilities of a program determine how the mouse and keyboard are used to move around and between screens.  good use of buttons, toolbars, menus, and hyperlinks  place the most frequently used or most important information in the most accessible places on the interface.  ensure tab ordering follows a logical order

The Graphical User Interface (GUI) Objects In a GUI, an object is an element that is activated by the user.  Check Box  Radio button  Combo box  List box  Command Button  Text Box  Menu

The Graphical User Interface (GUI) Graphics Tools elements that help to make the interface look good. and make the interface easier to understand and use.  Picture  Border (frame)  Colour  Label

Designing a GUI The following steps can be used as a guide for designing a GUI. 1. Know and understand the inputs and outputs required for the interface. 2. Determine how the data will be grouped and ordered on a screen. 3. Choose the interface tools and objects to be used on that screen. 4. Construct the screen layout using GUI screen-design features and elements 5. Collect feedback from users about the design.

Designing a GUI Inclusive Design Inclusively designed GUIs enable all users to use the interface successfully.

Designing a GUI Colour  appropriate for the application  used sparingly  contrasting colours (e.g. light-coloured text on a dark background) makes the text easier to read. Fonts  use fonts that are easy to read on the screen (Verdana, Ariel)  limit number of different fonts

Designing a GUI Industry Standards  use the layout, menu and colours that reflect the industry standard layout (e.g. Windows 7) Alignment  use consistent alignment of elements on the page  justified elements are easier for the eye to follow