Back

Designing and documenting forms, I/O screens and reports

Designing the software interface
There are many common elements to the design of good interfaces, whether they are for data input forms, navigation interfaces, an interface for an application, web sites and web forms or dialogue boxes or indeed data capture forms and reports. In this section, we will document the features of these items with a view to designing our own.

Data capture forms
A data capture form is a paper-based form used to capture information. It is then given to a data input operator to type in, using a data input form on the computer. For example, if a new pupil joined the school, their parents may be given a data capture form, requesting details such as their child's full name, address, emergency contact details and so on. Once completed, they return the form to the school. The school secretary or someone else in the Admin Department would then transfer the details from the paper form to the school's computer system. Don't confuse the data capture form with the data input form! The former is paper-based. The latter is on the computer. It makes sense to design the data capture form so that it mirrors the data input form. That will make data entry much faster.

Data input forms
Good input form design is important for a number of reasons.

• • Users need to be able to navigate quickly and easily around different screens.
  • Users need to be able to get help when they get stuck.
  • Users need to be able to enter data quickly and correctly.
  • Users need to be able to change their minds and cancel what they are doing. 

Data input forms can have many features on them, to aid entering data into computer systems. Possible features on any user interface might include:

• • A button to cancel the whole form.
  • A button to enter the data and continue.
  • A button to get further help.
  • A button to go to further options. Only the common options are shown. The rest are put on their own screen and linked from the main screen.
  • A title for the form.
  • Titles for each piece of information that has to be entered.
  • An indication to the user about what fields must be filled in and which ones are optional. This can be done by putting an asterisk next to compulsory fields, with a note near the fields saying that they are compulsory.
  • User instructions for the form.
  • User instructions for certain pieces of data. E.g. Under an input requiring a date of birth, you might see DD/MM/YYYY showing you the form that the date must be entered in.
  • User examples, E.g. instead of showing you the form of the data, you might be shown an example 21/08/1986.
  • A box next to the name of the data to be entered, so that the user knows where to type. For example, a box next to 'Name'.
  • A scroll box can be used to display a block of writing. This is a box on the screen with a scroll bar. For example, if you were ordering something online, there might be a scroll box on the screen showing you the terms and conditions. This ensures that much of the screen is not taken up with huge amounts of text.
  • Tick boxes. For example, a tick box next to "Tick if you need a VAT receipt".
  • Radio buttons. These allow a user to see all the options available and to select one or more of them. Seeing all the options at once takes space on the screen so they are only suitable when there are a limited number of options.
  • Combo boxes (drop down lists). These are suitable when there are a large number of options to choose from but you don't want them all on the screen at once because they would take up a lot of space. Tick boxes, radio buttons and combo boxes are faster ways of entering data than e.g. keyboards. They also remove the possibility of incorrect data entry, for example, through spelling mistakes or entering an option that isn't allowed. They are a method of data validation. (Validation is making sure you get sensible data into a computer as opposed to verification, which is checking that the sensible data you have entered is actually the data you want, perhaps by double-checking it).
  • Wherever possible, validation rules are used on data entry fields. These might include the use of data entry masks and range checks, for example.
  • Data entry fields are logically grouped together. All the name and address fields are together, while the options in the 'Select your Interests' are grouped together, for example. Logical groupings are often reinforced by drawing boxes around groups or by selection of colours and shading to 'raise' or 'sink' an area from the rest of the form
  • The use of pictures to reinforce a selection. For example, you could have used radio buttons to allow a user to select how to be contacted. If they select 'By telephone', a little icon of a telephone appears on the screen.
  • Clear, readable fonts.
  • Good selection of colour. Colours need to be selected so they work together and they're easy on the eyes. Some combinations work well together. Some don't. You can find lots of information about this very subject on the Internet. Discuss what keywords you could try and then do a search. The usual rule of thumb is that no more than three colours should be used or else you're in danger of the form looking a mess!
  • Colour can be used to draw a user to a particular area of the screen. For example, you could put an 'Are you sure you want to proceed?' message in red.
  • Tab order. You can't show this on a screen design but the order that you jump from one field to the next can be set up by the designer. This allows the designer to set an efficient and logical path for the user through the form.

Dialogue boxes
A special type of input form is a dialogue box. This is any window that appears because you have to make selections from choices. An application or utility wants to know how to proceed with an action and needs you to give it some details. It pops up a dialogue box for you to fill in. These are usually designed to be very quick and easy to fill in. For example, you might want to print out some work. You go FILE then PRINT and a dialogue box appears. It might look something like this:

     -  a title, because a user may have many reports
     -  a date, because the same report may be printed off at different times and the user needs to be able to identify the latest one.

In addition, reports should have headings for data, so the user knows what the data is they are looking at. Headings should be seperated by lines and spaces, to ensure easy reading. Columns of data shouldn't be too close to each other, or the data will be confusing.

Back