Website usability articles by UZilla.org

HCI – an introduction.

In this, our first article on website usability, we touch on the formal study of Human Computer Interaction (HCI). HCI is a field of study that looks at how humans interact with computers. For our objectives we are only interested in a subset of HCI and that is what can be practically applied to website design for usability. The idea behind HCI, for our purposes, is to try and produce abstract models that will enable us to design consistent websites that are suited to a given person achieving a given objective in a user friendly manner. If this field of study is new to you, or the concepts seem removed from website design then there are many articles on HCI that will place this study area in the website design context.

Semantic, Syntactic, and Interaction Models of human computer interaction.

The basic idea behind these three models is to provide a top down, starting with the most abstract in terms of definition, view of the interface in order to design appropriate (for the target audience) and consistent sets of screens. The idea behind this approach is to discover and draft a conceptual model of the website that a user would have (in their mind) while that user interacts with the website. Clearly we cannot get into someone’s head but in general we can say that a given user (of our website) will have an idea of account balances, baying bills and moving cash around accounts (in the case of an online banking website). This first model, of the conceptual interaction, is called the Semantic model.

Semantic model of user interaction.

At the semantic level of interaction we model the concepts, independent of any physical design that will allow us to describe the interaction. This model is a little like the Conceptual Data Model, for those familiar with data modeling but this model includes the behavior, or operations on that data. Using our online banking example the conceptual model consists of data objects such and account balance, amount, account number, type of account etc. and operations on those data objects such as withdraw amount, transfer amount from current account to deposit account. There are various notations for the semantic model, and these will be the subject of other articles, but the purpose of the semantic model is to represent the functions of the website at the user’s conceptual level. When this is done the next model, moving down our models of user interaction abstraction, can be produced and that is the syntactic model.

Syntactic model of user interaction.

In many ways it is easier to define the Interaction model and then say that the syntactic model, bridges the two models. This is because of the three models the syntactic is the more difficult to understand. That said we will continue with the top down approach of defining the three models. The syntactic model defines how our semantic actions are constructed into sequences of inputs and outputs. For example to transfer an amount between two accounts we could select source account then enter the amount then select the destination account and select the transfer action. At this level we have given more detail to the conceptual operations (described at the semantic level) but we have not stated how these given operations will be implemented, the specification of how the interaction is executed (on the web browser) is defined in the interaction model.

Interaction model of user interaction.

Of the three models this is the easiest to visualize at it is a description of how, in terms of clicking menus entering test etc., the given operation is accomplished. So we would have something like the following command sequences, to define the transfer amount operation:-