Keywords

1 Introduction

Nowadays, foreign tourists or short-time visitors often use technology such as smartphones to help them, for example, to translate words or to locate tourist attractions. In each country, there are many automatic machines which are very useful but there are some unclear icons and functions. In addition, the instructions on how to do something such as “How to buy a ticket” and “How to order food” are not sufficiently provided.

This paper is about the user interface design (UID) of applications that provide these instructions and discusses what visual representations of those instructions are preferred.

2 Description of Instruction

An instruction consists of three structures: sequence, selection and loop structures [1].

2.1 Sequence Structure

Sequence is a procedural structure that the next step is already determined. Figure 1 shows that the current step(yellow) is in the 2nd state and you can go into the 3rd state only. An example of the sequence structure is a beverage vending machine. Users have to insert some money before choosing the goods.

Fig. 1.
figure 1

Sequence structure

2.2 Selection Structure

Selection is a procedural structure that has a selection to choose before moving on to the next step. Figure 2 shows that from the current step, you can choose the next state from two. An example of the selection structure is a ticket vending machine. Users can choose to start from selecting a target or inserting money, or inserting card.

Fig. 2.
figure 2

Selection structure

2.3 Loop Structure

Loop structure is a procedure structure that iterates the same steps until not required. Figure 3 shows that at the current step, you can repeat to the first state, or go to the end. An example of the loop structure is a food-order machine of kaiten-sushi. Users can order sushi as much as they want until end and paying money.

Fig. 3.
figure 3

Loop structure

3 Visual Representations of an Instruction

Four visual representations P1 to P4 of an instruction are discussed in this manuscript. They are summarized below.

3.1 Visual Representation P1

All steps can be selected anytime. All buttons are available so users do not have to start from the first button. This representation uses numbers to show the order. Figure 4 shows an example of representation P1 with a vending machine. The 1st state is inserting coins and selecting a product is in the 2nd state.

Fig. 4.
figure 4

Visual representation P1

3.2 Visual Representation P2

All steps can be selected anytime like P1, but using arrows instead of numbers to show the order. Figure 5 is an example of representation P2 with a vending machine. Arrows are drawn between the states such as from the state of inserting coins to the state of selecting a product.

Fig. 5.
figure 5

Visual representation P2

3.3 Visual Representation P3

Only one step can be selected in order. The available button is only the next one. Users have to start the first button then the second will become visible. Figure 6 shows an example of representation P3 with a vending machine. The green-border button on the top is only one available button.

Fig. 6.
figure 6

Visual representation P3

3.4 Visual Representation P4

Previous and next steps can be selected. This pattern is similar to a slide-presentation. Users can go back to the previous step and go forward to the next step. Figure 7 shows an overall image at top-left side, and description of current state is shows in the middle. You can go back or go forward by buttons.

Fig. 7.
figure 7

Visual representation P4

4 Experiment and Result

The purpose of this experiment is to find the best representation of instructions. There were 5 subjects. Each subject was asked to use our instruction system in each of four representations of instructions for a vending machine and a ticket machine. The instruction for a vending machine has a sequence structures, and a ticket machine has a selection structure. After that, evaluating the score by questionnaires with a scale from 5(excellent) to 1(bad).

Figure 8 shows the average score of P1 to P4 representations. The red one is the score of the vending machine and the green one is the score of the ticket machine.

Fig. 8.
figure 8

Result

5 Conclusion

This manuscript discussed four representations of an instruction. The result revealed that limiting the available steps is better for increase in steps. Moreover, the explanation after clicking button is also important, such as text size and real-thing images which is easy to understand.