LECTURE 18 16/11/15. MAKING THE INTERFACE CONSISTENT Consistency is one way to develop and reinforce...
-
Upload
roy-howard -
Category
Documents
-
view
214 -
download
1
Transcript of LECTURE 18 16/11/15. MAKING THE INTERFACE CONSISTENT Consistency is one way to develop and reinforce...
![Page 1: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/1.jpg)
LECTURE 18 16/11/15
![Page 2: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/3.jpg)
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)
![Page 4: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/5.jpg)
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?
![Page 6: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/7.jpg)
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)
![Page 8: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/8.jpg)
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)
![Page 9: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/10.jpg)
CancelOK
First Name: Last Name:
Address:
City:
State: Zip Code:
![Page 11: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/11.jpg)
Frequentlyenteredinformation Seldom
enteredinformation
![Page 12: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/12.jpg)
Label
Label
Possible locations for text
LabelsPossible location for text labels
![Page 13: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/13.jpg)
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”
![Page 14: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/14.jpg)
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)
![Page 15: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/17.jpg)
GUIDELINES FOR THE COMMAND BUTTONS LAYOUT
CancelOK
First Name: Last Name:
Address:
City:
State: Zip Code:
Help
Help
OK
Cancel
Or
Default Button
![Page 18: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/18.jpg)
![Page 19: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/22.jpg)
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
![Page 23: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/23.jpg)
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
![Page 24: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/24.jpg)
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)
![Page 25: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/25.jpg)
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
![Page 26: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/26.jpg)
Create userinterfacecontrols
Associate actionsto the user
interface controlsand their events
Test/ debug
Enter title here
OKCancel
Create the forms and controls
Enter title here
OKCancel
Add actions
Enter title here
OKCancel
Test the UIDone
![Page 27: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/27.jpg)
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”
![Page 28: 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.](https://reader035.fdocuments.net/reader035/viewer/2022081520/5697bff61a28abf838cbdfac/html5/thumbnails/28.jpg)