Buttons

Buttons are needed to navigate end-users to different pages in the intervention.

How many times can you get the word ‘button’ into two short sentences??

To create a button, click on the button button in the insert panel. The newly created button will include the default message “a button” but this can be changed to whatever you want your button to be called.

Types of buttons

There are five types of button, which can be selected from the button properties menu:

• Next button – will direct end-users to the next page that is specified in the logic

• Back button - will direct end-users to the previous page.
  • This button works in exactly the same way as the browser back button located on the top left of the internet browser window. When a back button is pressed, it will take the end-user back to the last page shown in the browser history.

• Close pop-up button - will close the window of pop-up pages only.

Note that this button will not work on pages that are not set as pop-up. You will find that if you use a Close pop-up button on a page which is not set as a pop-up, the page will close when this button is pressed in Internet Explorer, but if an end-user is using FireFox, the page will not close. We therefore recommend that you only use this button for pop-up windows.

• Jump button - will direct end-users to a particular page.
  • When this type of button is selected, a section will appear in the button properties menu asking what page you want the jump button to direct to. Type in the unique name of the specific page (you do not need to write the .lgpl bit at the end as this will mean that the page won’t display properly).

• Print button - will link to the printing system of the PC where the intervention is being used.
  • When this button is pressed, a Print window will pop up to let end-users select further printing options (e.g. the printer, number of copies, etc).

The last page of a session in your intervention should not have a button. Instead, instructions to tell the end-user to close their web browser could be given.

Button content

You can select the content of a button from the three options in the Button Properties area: Text, Image, and Text & image:

Text buttons

A Text button will only contain text. You can type in the text that you want to be on the button in the button properties menu (e.g. Print).

Uncheck the global style option to change the style of the text (e.g. colour, size, whether it is bold, italic, or underlined and whether it is aligned left, centre or right). You can also change the background colour of the button. However this colour will only be a block colour. If you want to use graded colours or include a coloured border on your button you will need to create an image and use this on the button.

Image buttons

An Image button will only contain an image (e.g. a picture of a printer).

Once you have selected the image option for the button contents, you can then add the image in exactly the same way as inserting a multimedia image file. Remember that to use an image on a button (or in an image file), it first has to be saved in your workspace folder – this is also explained in the next chapter.

Images used for buttons will need to be saved to the size that you require for the button before being saved in the Workspace folder. If you reduce the size of an image on a button in LifeGuide by clicking and dragging the resize handles, you will lose part of the image - it will not shrink to fit.

Text and image buttons

A Text and image button will contain text and an image (e.g. an image of a printer and the word “print”).

In the button properties menu you can then choose whether the image is positioned to the left or right of the text.

Designing your buttons

To create buttons that fit with the look and feel of the intervention you may want to ask your graphic designer to create these for.

Alternatively, you can use other packages such as Microsoft PowerPoint to design your buttons. This gives more flexibility in choosing the text style for your button and how it can be positioned alongside the image. These designs can then be saved as an image file and used as an image button.

Adding Buttons to Pages that Include Error Messages

Error messages ensure that end-users respond to interactions on a page before they can move onto the next page. Therefore, if the end-user has not given the required response on a page they will not move to the next page when they click on a button.

This works well for Next buttons because end-users are required to answer all questions before continuing, but if there is for example a jump button on a page, the error messages will show when the jump button is pressed and end-users will have to answer all questions before they can view another page!!!

We would recommend only having next, print or back buttons on these pages but if this is not possible you will need to create a textbox that acts as a button.

Text boxes as buttons

This can be a bit complicated and requires you to use HTML (HyperText Markup Language) which is a computer language code. This HTML should be written in the text box in the Textbox properties menu. This cannot be written in the Rich Text Editor.

An example of the code used to display a text box as a button is shown below:

Example: HTML to create a textbox as a button

If you want to use a textbox as a back button we would recommend copying and pasting the following command into the textbox. This will display as an image button

<a href=”?jumpto=*1”><img src=”*2” alt=”Back” /></a>

Change the asterisked numbers to your own details as below. Everything else in the command should be exactly the same (so ensure you include the quotation marks).

• 1 - change this to the name of the page that you want the textbox button to go to.

• 2 - change this to the name of the image that you would like to display in the textbox button. This will also need to include the file extension (e.g. .jpeg or .png) of the image file.

Using Links

Another way of moving back to a previous page from a page with an error message is to use a link.