A GUI Analysis of ARTigo

Recently I played the Browser-Game ARTigo and was surprised about the typing errors I made although I am able to write very well with ten fingers on the keyboard. My first thought was: “Who did that? It can’t have been me?” But because I was sitting alone at my computer it must have been me. That’s why I have taken a closer look at the GUI (Graphical User Interface) of ARTigo.

The GUI has a pleasingly clear minimalistic design. Nothing distracts from the image to be described. In the left area of the window the following objects are located: a list containing links, a progress bar which shows the remaining playing time, the list of tags, and the current score. In the right area the image is shown, below the image there is a text field where you can enter the tags. As a newbie you possibly want to take a look at the rules first. You get this information when you click on the About ARTigo > ARTigo game link. Luckily the GUI does not offer too many links, so you don’t need to spend too much time searching. In principle the command to be selected should be named clearly. This is a question of mapping which defines the relation between the intention of the player and his/her planned action. The link could be named e.g. About ARTigo > rules.

My saccades (rapid eye movements) are to some extent enormous. The arrows on the figures below display a simplified impression of these movements. To measure them exactly an eye tracking camera would be necessary. Due to the structure of the visual design and the objects the player has to keep an eye on, the schematic illustration should be comprehensible.

The size of the saccades is dependent on the format of the image (landscape or portrait) as well as the location of the text field where the tags have to be entered and the length of the tag list.

Figure 1: Schematic depiction of saccades when playing an image in
portrait format with a comparatively short tag list

Figure 2: Schematic depiction of saccades when playing an image in
landscape format with a comparatively long tag list

As already mentioned I have an eye on several objects when playing:

  • The most important thing first of all is the image which I have to take a closer look at, because I have to describe it. Therefore it makes sense to have as much playing time as possible to do so.
  • I have to keep an eye on the list of tags as well because here I see the tags I have entered and the tags I have to re-enter because of a typo. Furthermore after a while higher scores appear with some tags in this list, like the number 25 in bold type. This makes me curious and that’s why I regularly sneak a glance at this list.
    It is irritating that this list is dynamic. A new tag is added to the bottom of the list therefore each look at a recently entered tag is linked to an additional search process.
  • The text field is located below the image and is always in the same place, but depending on the image size its location differs on the screen. After each round my gaze has to be re-adjusted and this costs time.
  • I also occasionally look at the progress bar which indicates the remaining playing time

The conclusion is: When playing I have to keep an eye on different objects and for this reason I have to make many rapid eye movements. This is time-consuming and I have less net-time for watching the image, which is essential for the game. Furthermore a glance at the dynamically growing tag list is also time-consuming because each inserted tag appears at a different location (each new tag has varying x, y coordinates). Hence it is important to arrange the GUI objects to be observed in such a way to provide as much time as possible for watching the image.

Resulting from this observation I would make the following suggestions for restructuring the GUI of ARTigo (see figure 3):

If the text field was placed above the tag list and the latest tag appeared on top of the list – always having the same x, y coordinates – this would save time. In this example I have moved the score above the progress bar because I think it is more important for the game and is more often looked at than the score. This is an assumption which needs to be assessed.

The objects progress bar, latest inserted tag and the text field for the tags should be located closely together. The saccades between these objects would be smaller which would save time. It would also save time to locate these objects in a fixed position. They should always appear at the same x, y coordinates on the monitor. For the player this would mean more time to watch the image.

Figure 3: Suggestion for restructuring the GUI of ARTigo with reference to cognitive ergonomic aspects. The screenshot has been changed by photomontage.

 Finally it should be investigated whether the design shown in figure 3 with the image on the left and the tags on the right would be useful. With illustrations we are used to finding a text on the right side of an image. This has to do with the reading direction and cognitive processing. One would have to establish whether there would be a further time advantage through this for the player. It is possible that the current design – image on the right side, tags on the left side – is indeed better because the glance of the player is more quickly directed to the text field.

A more ergonomic design of ARTigo’s GUI could save time with more efficient saccades. Another result could be a lower number of typos which would result in a more efficient insertion of tags and would again mean time-saving. The player would therefore have more time to win a higher quantity of tags. It has yet to be established if the effect is indeed significant.