1. Stand-Alone Apps & Web Apps
Form Guidelines For
Stand-Alone Apps & Web Apps
Database Systems
CSCI-3343
Dr. Tom Hicks
Computer Science Department

2. Learn By Counter Example

3. Get Script To Create Database
Download Database LibraryTH
Put it on the desktop

4. About Data Entry Forms White is pretty bland!
Select a form background that would be pleasant and easy to read for the person doing data-entry 8 hours at a time.
White is pretty bland! 4

5. Some Colors Are Not Good Choices5

6. Some Colors Are Not Good Choices6

7. Some Colors Are Better Choices7

8. About Data Entry Forms
Select a font color that is compatible with your background. It should be an easy combination to read from a distance 8

9. About Data Entry Forms
Select a font face, font size, and font color combination that would be easy to read for the person doing data- entry 8 hours at a time. 9

10. About Data Entry Forms
Never make the prompt more bold or larger than the data entry. The data is more important than the prompt! 10

11. About Data Entry Forms
Opt for font clarity over cuteness. 11

12. About Data Entry Forms
The fact that some API’s contain a form generator that generate a starting Data-Entry form does not make that form professional or acceptable.
This form is a mess. It looks like someone just threw the prompts and textboxes onto the screen. Some of the prompts are not even entirely visible.
This is way better than nothing, but serves as a starting point and not a destination! 12

13. About Data Entry Forms
It is most often a good idea to lay out your form in such a way that it has one or two major columns.
It is most often a good idea to place the most important info at, or near, the top! (There are certainly many exceptions). 13

14. Form Would Be Better With Two Columns14

15. About Data Entry Forms
It is generally a good idea to align all prompts and data horizontally. Many API’s have alignment tools to make this easier. 15

16. About Data Entry Forms
It is not always possible, but try to avoid “void/blank” spaces in form. 16 16

17. About Data Entry Forms
It is generally good idea to frame the form so that you have about the same amount of blank space around all four of the form borders 17
Don’t Always Need A Prompt For Textbox Message 17

18. About Data Entry Forms
It is generally a good idea to try to make the space between rows consistent and not too large. 18

19. Data-Entry Form Prompt & Textbox
Stand-Alone Applications, Websites, etc. 19

20. About Textbox Prompts Every Prompt Should Be Clear & Concise
Supplier ID#
Minimum Quantity To Stock 20

21. About Textbox Prompts Every Prompt Should Be Clear & Concise
There will be times when forms are cluttered with lots of data entry containers. Arranging the various controls aesthetically and logically often prove challenging.
Adding Mouse-Over Text to the prompt is one way to really help clarify the request. Many API’s provide mechanisms for this with some type of “Tool Tips”; use it when necessary. 21

22. About Textbox Prompts
The Prompt Should Not End With A Colon (:). 22

23. Name Tom Name Tom About Textbox Prompts
You may place prompt over or to the left of the data entry field; most of the time it is best to select one or the other and be consistent.
Name
Tom
Prompt
Response TextBox
Name
Tom
Prompt
Response TextBox 23

24. Data-Entry Form Controls Stand-Alone Applications, Websites, etc.24

25. About Controls
It is generally a good idea to left-justify the data entry controls (textbox, radio button, drop-down list, checkbox, buttons, etc.) 25

26. Stand-Alone Applications, Websites, etc.
More Data-Entry Form
Text Prompts
Stand-Alone Applications, Websites, etc. 26

27. About Textbox Prompts
If you are placing the prompt beside the data entry fields, it is best to right-justify the prompts.
If you are placing the prompt over the data entry fields, it is generally best to left-justify both the prompt and the field.
It is generally best to keep the distance between the prompt and the data entry fields consistent.
It is generally best to keep the prompts the same font and size. 27 27

28. About Textbox Prompts
It is generally a good idea to capitalize the first letter of each and every word in the prompt.
It is generally a good idea to try to avoid all upper case prompts (unless they are acronyms).
It is generally a good idea to keep the distance between the prompt and the data entry  small, readable, and consistent. 28 28

29. ID Field
Searching/Matching Numerics Is Much Faster Than Searching/Matching Strings! 29

30. Numeric ID’s
Most Classes/Structs/Tables should have a unique ID which can be used to identify any one record.
Most databases have an auto incrementing field just for this purpose, but it can be implemented in any programming language.
It is best to use auto incrementing mechanisms for unique primary keys! 30

31. Numeric ID’s
If creating your own auto incrementing integer fields, these unique ID's should never change!
Since these auto incrementing integers are not going to change, then the user should not be able to change it. It will often be displayed on forms, but the user will not be able to change it.
A label often appropriate to display the value; if a textbox were used, the user would try, in vain, to change it.
These auto incrementing fields preserve relationships. 31

32. More Data-Entry Form Recommendations
Stand-Alone Applications, Websites, etc. 32

33. About Data Entry Forms
Each form should contain a clear statement of title in the title bar; the title should describe the form. (This is a great place for a commercial!) 33

34. About Data Entry Forms
All of the forms in an application, or website, should have a common feel
Consistent navigation and/or buttons
Consistent fonts
Compatible, or consistent, background colors 34

35. About Data Entry Forms
The Data Entry should be sufficiently large to hold the maximum size value (current font).
If the largest Title is 70 characters big, the data entry field should be large enough to handle 70 characters; use multi- line if needed! 35

36. Complex Data-Entry Form Recommendations
Stand-Alone Applications, Websites, etc. 36

37. About Data Entry Forms
The use of lines, boxes, panels, and/or tables will enable you to place more information on a form.
Organize the information in some logical pattern. 37

38. About Data Entry Forms
You may use multiple font faces and font sizes and font colors on a form; normally this will decrease the usability of the form. Have a reason for those changes. 38

39. About Data Entry Forms
Consider using tab frames when your form has a lot of data. Organize it logically. Label the tabs. Use tab colorization to help user recognize each tab. 39

40. About Data Entry Forms
Include enough duplicate information on each of the tabs to assure that the user never has to guess which record they are viewing. 40

41. About Data Entry Forms Note that the contact name
It is often a good idea to provide the user with a multi-line textbox in which to store information that may be needed later in the software life cycle; a database memo field might be used to store things that may not have even been considered during the analysis.
Note that the contact name 41

42. About Data Entry Forms
Use Drop-down Combo Boxes To Validate Data Entry Selections Whenever Possible; This Will Help Reduce Data Entry Errors.
Wouldn’t a combo box, or a spinner, which contained only the acceptable values be better for verifying the birthday?
Wouldn’t a drop-down combo box, containing only the acceptable abbreviations for the states be better than the user selection?

43. About Data Entry Forms
Do not select a background that forces one to strain to read/enter text and utilize the buttons.
Do not use too many colors on the same form.
Keep colors consistent throughout the many forms of an application. 43

44. Data-Entry Form Buttons/Menus Stand-Alone Applications, Websites, etc.44

45. About Buttons & Menus
Button names should be extremely clear (btnExit) and the button face text should be as clear as you can make it within the space available. (Exit) 45

46. About Buttons & Menus
Button should generally be well organized in an orderly fashion. (Remember to frame the form). There will be lots of possible options. 46

47. About Buttons & Menus
We have found that Next works best on the bottom right and Previous works best on the bottom left.
There will be times when you make more frequently used buttons larger. 47

48. About Buttons & Menus
We have found that menus on the right are not nearly as effective as menus on the bottom. 48

49. About Buttons & Menus Power Users often don’t want big buttons.
It is perfectly all right to have different button layouts for users with different skills. 49

50. About Buttons & Menus
Include mouse-over tool tips with graphical buttons. 50 50

51. About Buttons & Menus
The Navigation Buttons & Menus on all of the forms in an application, or website, should have a common feel/style. 51

52. ----------- Not An A or B -----------
All Of These Came From The Same Project! Do These Look Compatible/Complementary & Consistent?
Not An A or B

53. ----------- Not An A -----------
All Of These Came From The Same Project! Do These Look Compatible/Complementary & Consistent?
Not An A

54. Stand-Alone Applications, Websites, etc.
Data-Entry Form About Edit-Add-View
Stand-Alone Applications, Websites, etc. 54

55. About Edit-Add-View
Rather than create one form/prototype for an Edit Mode, one form/prototype for an Add Mode, and one for a Normal View Mode, it is often possible to design a system to use one format for all. 55

56. About Edit-Add-View
In the Normal View Mode, the user would enter the Edit Mode by selecting Add or Edit; buttons Save & Cancel buttons are disabled!
Add & Edit can often use the same form! 56

57. About Edit-Add-View
The Edit Mode (when either editing an existing record, or adding a new record) should be noticeably different. I don’t recommend this color combination. 57

58. About Edit-Add-View
Note that only buttons Save & Cancel are enabled! When editing, or adding, the only two choices available to the user should be Save or Cancel! 58

59. About Edit-Add-View
The Edit Mode should work with a copy of the data; this way the user can Cancel without destroying the original data. 59

60. Not An Acceptable Primary Data-Entry Form
7. The column-tablular style might be ok format to use as a second data entry form for power users. 60

61. Stand-Alone Applications, Websites, etc.
Data-Entry Form Navigation
Stand-Alone Applications, Websites, etc. 61

62. Navigation
Most of your High Level subsystems should have an option for the “novice users” to scan through the data with Next and Previous buttons. 62

63. Not An Acceptable Primary Data-Entry Form
Student View User Form:
“User Suppose To Enter Any Info They Know – with tabs – when they hit ENTER Key Shows Users”
Goal:
“No Manual & No Training”
Great to have a Secondary Navigation Form that is Search-Oriented for Power Users! 63

64. Argument Against Next-Previous
We have 10,000 Items!
Therefore : “This would take forever” “Not Useful”
If this is the case, we need to bundle Next & Previous with other controls & options!

65. Navigation Quick Links
We have 10,000 Users! Make it useful. “Divide & Conquer”
Use Quick-Link search buttons such as “A”, “B”, “C”, …
Select “B” to navigate to first User whose Name starts with an “A”
Navigation Quick Links

66. Navigation Quick Links
We have 10,000 Users! Make it useful. “Divide & Conquer”
Most Sub-Systems should include Navigation Filters to reduce data sets.

67. You Need To Start Asking “Why Looking Up User?
Navigation Filters
Filters might be used, to partition or subdivide the data; what type of things might we use in an elementary school library application to subdivide the Users?
You Need To Start Asking “Why Looking Up User?
Teachers
Librarians
Students
First Grade
Second Grade
Third Grade
Check-Out Book?
Pay Fine?
Fourth Grade
First Period
Miss Wilson
Second Period
Mr. Smith
Fifth Grade
Ms. Jones …
Sixth Grade …

68. Navigation Filters
Most Sub-Systems should take advantage of navigation filters to isolate traffic.
Filters should also be used to isolate printed data; the same report layout, with variable titles, can be used for multiple listings.

69. Navigation Filter Example

70. Order By
Most Sub-Systems should take advantage of an Order By combo box to provide logical order (as opposed to physical order).

71. Order By Example

72. High-Level Navigation
The user should always know where they are, where they need to go, & how to get there!
(Many Systems Will Need More Than A Few Tab Frames!)

73. High-Level Navigation
Although not very clever or creative, you might have a set of controls that sit on the desktop to access each of your sub-systems.

74. High-Level Navigation
You can use .NET to create an application environment with upper level menu strip controls at the top; the forms beneath may be all button related.

75. High-Level Navigation
There are a number of API’s that provide menu-strip controls; you might have an upper level menu-strip control your sub-system forms (which also have menu strip controls)

76. The Navigation Choices Must Be Obvious
The Navigation Choices Must Be Obvious! Obvious is not “Right Mouse Click On The Form & Select……

77. Computer Science Department
Database Systems CSCI 3343
Dr. Thomas E. Hicks
Computer Science Department
Trinity University