T4 Development of GUI design
From SoftwarePractice.org
Contents |
Introduction
Individual concepts were taken into account when designing the final interface for the physiological sensor. Some of the designs are displayed below.
The left design made use of a touch screens whereas the middle and right made use of external physical buttons.
The Main Screen
It was decided that intergrating a touch screen interface would the be easiest to construct as well as being the friendliest to the user. Minimal buttons that weren't space consuming and yet big enough to respond to a person's touch were required to allow ample space for the clock, which has priority to the user and should be displayed the biggest. These issues allowed us to compromise on an appropriate size ratio of the features to be displayed on the main screen as shown below.
- The Smiley Face icon leads to Profile screen
- The Clock icon leads to the Time Editor screen
- And the Jagged Line - representing a graph - icon leads to the Graph screen
In justification to the project topic, the clock was added to increase the usability of the device's long term use with the user (in case they're required to wear it for more than a day), as it is a feature necessary to people at all times.
The Time Editor
The user is required to edit the time by:
- Using the up and down arrow keys to select a time
- Clicking to OK button to confirm the time
- And then clicking the Back button (lowest right button)to exit to the Main screen
By using the OK button to confirm the time, we avoid forcing the user to edit the time each time they land on the 'Time Editor' screen. Rather, they can just press the Back button if they accidently land on the screen.
The Graph
The graph was given it's own screen as it has priority to the user when selected.
Buttons were kept minimal, keeping those whose functionality were essential i.e. changing between Pulse, Temperature, and GSR measurements, running and stopping the measurements and going back to the main page.
Only the Temperature Graph is displayed here, but two other graphs will be produced that show different scales that would better represent data to be displayed. The five buttons will remain the same in every graph screen.
Changing The Profile
To avoid confusion between different person's readings, the user is required to input their name, which will be saved as the filename when the graph is transfered to an external source e.g. personal computer (which will automatically detect the device and allow drag and drop to occur)
The user selects a letter from the alphabet at the lower left and presses 'OK' to select it. The cursor will then move to the next character space to be edited. When the user is satisfied, they press the lower right button - the Back Button.
The 'ABC' button, when pressed will change to an 'abc' button and will allow the characters selectable on the lower left to be in capital letters. The Del button deletes the last character on the display for every press.
