Thursday, 13 December 2007

Our Inteface Design

We have now completed our GUI watch mock up, and it is shown below. It is an interactive Adobe Shockwave movie that should play on any browser, as most have Shockwave installed by default. If this is not the case you can obtain the plug in here.

Please do not be put off by its apparent complexity, this arose as translating the interface for a physical watch into a point and click interface is tricky:
  • The cluster of four buttons labelled up, down, left, right form the direction pad and translate into the joystick of the physical device.
  • The two buttons labelled add and settings translate into the side buttons of the device.
  • The two buttons just below the screen labelled Time and Flip are the two face buttons of the device.
  • The buttons on the blue bar on the left hand side are used to simulate external events, like a friend nearby or imminent event.
  • Only what is displayed in the white bounded box is the actual display of the device!








Ignore the buttons on the blue bar for now and notice/try the following features:

  • The time and date are displayed prominently by default.
  • Click once on any button of the directional pad: Pressing any button on will take you to the people screen.
  • Click on the the up or down button on the direction pad: Notice how the card changes to a different person.
  • Click on the flip button: Notice how the card flips over to display further information if available.


  • Press the Add button: This would on the actual device add the person to facebook.
  • Push Left or Right on the direction pad: This will take you to Societies or Events categories respectively. Again you can flip the card at your leisure.

  • Press the time button: This takes you back to the time and date display, from anywhere in the interface, pressing a directional button again takes you back to the card you were looking at before!
  • Try pressing and holding the up button (when looking at a persons picture): This will pop up an extra navigation device to take you back to people you met longer ago.

The settings button (Expert Users): Here we have tried to make this screen simultaneously easy to use for novices but quick for experts. It does however change the functionality the user is used to, if you press any one of up ,down, left, right or add you will notice that a check box is changed. This we felt would be the quickest way of disabling syncing in a scenario where the user did not want to share information.


The only alternative we could think of would be a cursor type operation controlled by the joystick, but we felt this would be cumbersome to both novices and experts alike. At least this way once the screen is mastered, the user can set the desired settings as quickly as possible. One other thing to note is that if we needed more settings for customisation e.t.c we could flip the card using the flip button; and add lesser used settings there, though this is not implemented.

External Events: The result of pressing the buttons on the blue par depends upon whether you are at the main time screen, or viewing information. If you are simply viewing the time, pressing these buttons simply changes the date text momentarily, and in real life would perhaps give a discreet notification.


If on the other hand you are viewing information, it gives the information gently over the screen you are viewing, without navigating you away from the screen. The only exception to this is the sync button, because in practise synchronising may change information you are currently looking at, or may take a long time, so it would be better to have the time displayed while this takes place.

Now we must critically evaluate our prototype by gaining feedback from users...

If for any reason you cannot view our interactive prototype you can download a zip package of the standalone version here: [Available Shortly]

No comments: