LECTURE 18 16/11/15

MAKING THE INTERFACE CONSISTENT Consistency is one way to develop and reinforce the users conceptual model of applications and give the user the feeling of control over the application, since the user can predict the behaviour of the system User interfaces should be consistent throughout the application

PURPOSE OF A USER INTERFACE Each window in a user interface should server a clear, specific purpose Data Entry Windows: Provide access to data that users can retrieve, display, and change in the application Dialog Boxes: Display status information or ask users to supply information or make a decision before continuing with a task (a typical feature is an OK button)

PURPOSE OF A USER INTERFACE Application Windows (Main Windows): Contain an entire application that users can launch (container of application components) In developing a model of an application you should be able to document the purpose of a window within the application

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS Consider the following issues:  In general, what kind of information will users work with and why?  Do users need access to all data in a DB table or a subset?  Order in which to display information (alphabetically, chronologically, or numerically)?  Also, identify the tasks the users need to perform on this?

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS You can provide menus, command buttons, etc. that users choose to initiate tasks Controls can be placed anywhere on a window However, the layout chosen determines how successfully users can enter data using the form

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS Consider the following:  Use existing paper-based or computerised screens as the starting point for the design (no radical changes, unless requested)  Amount of information to fit on the screen, use a main window and optional smaller windows or a main window with multiple views (users typically are more productive when a screen is not cluttered)

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS  Users scan the screen from top-left to bottom-right. In general, put required or frequently entered information toward the top and left side of the form, entering optional or seldom entered information toward the bottom and right side  When information is positioned vertically, align fields at their left edges (this usually makes it easier for the user to scan the information)

GUIDELINES FOR DESIGNING FORMS AND DATA ENTRY WINDOWS  Text labels are usually left aligned and placed above or to the left of the areas to which they apply  Users expect to enter (type) information from left to right and top to bottom and tabbing from one control to another in sequence with data entry  Emphasise groupings of related information displayed on the form, using visual effects

Label Possible locations for text Labels Possible location for text labels

GUIDELINES FOR DESIGNING DIALOG BOXES A dialog box provides an exchange of information or a dialog between the user and the application If the dialog box is for an error message, use the following guidelines:  Error message should be positive  For example, instead of displaying “You have typed an illegal date format” display this message “Enter date format mm/dd/yyyy”

GUIDELINES FOR DESIGNING DIALOG BOXES  Error message should be constructive  For example, avoid messages such as “You should know better! Use the OK button”; instead display “Press the Undo button and try again” (messages that make the users feel in control of the system)  Message should be brief and meaningful (displaying error descriptions as opposed to error numbers)

GUIDELINES FOR THE COMMAND BUTTONS LAYOUT  Arrange the command buttons either along the upper-right border of the form or dialog box or lined up across the bottom of the form or dialog box  Positioning buttons on the left border is very popular in Web interfaces

GUIDELINES FOR THE COMMAND BUTTONS LAYOUT  For easy readability, make buttons a consistent length  Consistent visual and operational styles will allow users to transfer their knowledge and skills more easily

GUIDELINES FOR THE COMMAND BUTTONS LAYOUT

GUIDELINES FOR DESIGNING APPLICATION WINDOWS A typical application window consists of a frame (or border) which defines its extent:  title bar  scroll bars  menu bars  toolbars  status bars

GUIDELINES FOR USING COLOURS For all objects on a window, use colours to add visual appeal to the form  Consider the hardware Figure out a colour scheme Use identical or similar colours to indicate related information Use different colours to distinguish groups of information from each other

GUIDELINES FOR USING FONTS Consistency is the key to an effective use of fonts and colour in your interface Use commonly installed fonts, not specialized fonts that users might not have on their machines Most commercial applications use 12-point system font for menus and 10- point system font in dialog boxes

GUIDELINES FOR USING FONTS These are fairly safe choices for most purposes The most practical font is Times New Roman Using too many font styles, sizes and colours can be visually distracting and should be avoided

PROTOTYPING THE USER INTERFACE Rapid prototyping encourages the incremental development approach, “grow, don’t build” Prototyping involves iteration It is highly desirable to prepare a prototype of the user interface during the analysis, to better understand the system requirements

PROTOTYPING THE USER INTERFACE Visual and rapid prototyping is a valuable asset in many ways:  [1] It provides an effective tool for communicating the design  [2] It can help you define task flow and better visualise the design  [3] It provides a low-cost vehicle for getting user input on a design (this is particularly useful early in the design process)

PROTOTYPING THE USER INTERFACE: THREE GENERAL STEPS 1.Create the user interface objects visually (such as buttons, data entry fields) 2.Link or assign the appropriate behaviours or actions to these user interface objects and their events 3.Test, debug, then add more by going back to step 1

MAKE USERS FEEL IN CHARGE Instead of pushing them into a certain direction – try to understand what they need It is reflected in the language used Instead of using leading phrases like, “We could do this..." or "It would be easier if we..." Choose phrases that give the user the feeling that he/she is in charge: “Do you think that if we did... it would make it easier for the users?” “Do users ever complain about...? “We could add... to make it easier”