Improvement of Graphical User Interface of IslayTab

Islay, an educational programming environment for children, has used state transition diagrams to describe a program because of their graphically comprehensive nature. However, even in its latest web-based version with a touch interface, IslayTab, users cannot see all the attributes set for all states at the same time, so they have to go to the trouble of touching each state one by one to see its attributes in a dialog box. This study aims to improve the graphical user interface (GUI) of IslayTab in this respect. First, we redesign the icon shape of states and the display of their attributes within the icon. Then, we introduce a new way to display all actions and conditioned transitions described in all state transition diagrams in the form of a single structured text, so that the user can see all the information at a glance.