Unit 10 HCI

When considering an interactive kiosk, the following requirements are vital to meet:

• Interface should be clear and uncluttered
• Interaction is likely to be solely via touch
• Audio may be helpful

Sample project

Following object oriented principles, we could consider pages where data is displayed as containing multiple instances of a class that we have created.

For example, if the kiosk was to display an interactive map, one might choose to create a class that represents one of the items that appears on the map – perhaps a store.

Assuming a store, I may wish to refer to the following attributes:

• Store name
• Store location
• Type of store
• Image of the store logo

Now considering the behaviours that must be displayed, each store entity must:

• Be able to respond to being ‘clicked’
• Be able to adjust its location in the event of the page size changing

Finally, as this item should be visible on the screen and I want it to be able to respond to user input, I am inheriting from Panel – this means MapEntity will have all of the methods and attributes of a Windows control.

To create this entity requires the code as found in MapEntity.cs.

When a map item is tapped, we want to show more information to the user – in this example, it will be through the use of a pop-up frame, which has been called MenuPanel – this also inherits from Panel, and can be found in file class1.cs. Each MapEntity contains an instance of MenuPanel which is responsible for displaying that item’s information on the screen (logo, description etc) – note that you can easily change this by altering the attributes used in the MapEntity.

The map itself is a simple Windows Form, containing a panel item, into which the map items will be placed, along with an image to serve as the background for the map.

This code is relatively simple, and is located in MapPage (design and cs files). Notice that there are a couple of event handlers required for this to work fully: one that reacts to clicking the ‘X’ button to close the map, and one to respond to resizing the window.

Other components

Each section of the kiosk is simply a different Windows Form, and these can be displayed and closed as required to create the navigation through the system.

Accessibility

Using a kiosk usually means there are no input devices other than the touch screen. If you were wishing to search for a store, you would need to be able to enter some of the information: for this purpose, an onscreen keyboard is useful.

One has been implemented in this code, using a multi-dimensional string array that contains the characters that are to appear on the keyboard. Each character is represented by a button item, together with a click event handler. When a button is clicked, it is assumed that the character on the key (its text) is what should be typed. This is added to a textbox to show the user the current search term.

NB: After downloading, change the file extension to .zip in order to unzip the demo project.

Other considerations

Please ensure that all files are appropriately named at all times, for example:

• Filenames for classes should reflect the class name
• Forms should be named after their purpose and function
• Files should be named appropriately
• Full file system should be used – ie folders for different types of media etc