Development Process for Web Interface


Low-fidelity to medium-fidelity


The low-fidelity prototype consisted of a series of static html pages that provided some look and feel for the interface but no actual implementation formed the basis for the medium- and high- fidelity prototypes. After considering a variety of options, we decided to implement the web interface in php because it is free, easy to program in and provides rich support for database interaction with MySQL. Implementing the necessary functions often led to slight changes in the appearance of the pages due to the reality of implementation being different than how it was originally conceived.


The low fidelity screens presented in figures 1 and 2 show the same basic form as the high-fidelity screens (see presentation of design), but differ where the forms needed to change and/or the design was improved. Figures 3 and 4 show the same screens in the medium-fidelity interface that was created by actually implementing the proper functionality.


Figure 1: Low-fidelity screens



Figure 2: More low fidelity screens



Figure 3: Medium-fidelity prototype screens



Figure 4: More medium-fidelity prototype screens



Usability Tests




Once we had the medium-fidelity prototype finished, we ran usability tests to evaluate the interface. We ran six usability tests using the ScalePlus web interface. Four of the participants were University of Maryland students between the ages of 20 and 25. One of the other participants was a 48 year old woman, and the final participant was a 16 year old girl. Backgrounds in using computer interfaces varied as the subjects ranged from computer programmers to participants who knew little other than how to use a word processor and browse the World Wide Web.


The four university students completed the tasks in a quiet apartment bedroom on a computer running Windows XP and Mozilla Firefox. The other two participants completed their tasks in a residential living room using Internet Explorer on Apple laptops. We were unable to resolve an issue where sometimes response time would be unusually slow (taking up to 10 seconds for simple pages to load) despite usually being very fast. Several participants complained about this, but with time and some troubleshooting this problem could almost certainly be resolved for a final version.


Over the course of the usability tests, several problems became obvious. Participants were given a set of seven tasks to complete. The tasks were presented as a scenario for them to work through. Each test took between 15 and 30 minutes.





Each usability test participant was given the following information and the following seven tasks to complete.


For the purposes of this study you are John Smith. The following is your personal information.

Height: 5 feet 11 inches

Age: 32

Gender: Male


You just got your new ScalePlus and set it up so that you can access the web interface. There are currently no users, create an account for yourself.


You have been using the scale for about a week now and the sounds are becoming annoying. Change the sound settings so that the scale will not make any noises while you use it.


You would like to enter your height so the scale can calculate your Body Mass Index (Just enter the height, it won't actually compute BMI as of yet).


You have been using the scale regularly for two weeks now (the weights are already there) and would like to check on the progress of your diet for the past week (April 1st to April 8th). Generate a graph of your weights for the past week.


You have yet to weigh yourself today (April 9th), go weigh yourself. Actually, just make a new entry with your weight being 210 pounds on April 9th.


View the graph again, you notice that you have apparently gained 3 pounds since yesterday which you think is unlikely. You then realize you weighed yourself with your shoes on. Remove the erroneous weight and go weigh yourself again. This time enter a weight of 207 pounds.


After catching that error you realize there is another weight (on April 4th) that has you gaining 3 pounds in one day as well. You think you were wearing your shoes but can’t remember. Attach a comment to your weight for April 4th saying that you may have been wearing your shoes.





In order to ease the discussion of participants while keeping their identity anonymous, each participant is given a fake name.


Bob is a current student at the university and an active runner. He has never owned a scale and only weighs himself when he needs to at doctors’ appointments. He is an experienced computer user. The major points of confusion that emerged during the test were as follows. He expected there to be a “My Account” and a “Create New Account” link rather than just a “User Settings” link. On several occasions it wasn’t clear to him that changes had been applied when the response time was very fast and there was no confirmation message. Height was treated differently from other information and seemed out of place. The lack of specific instructions on how to format dates slowed him down despite his entering acceptable dates on the first try. The fact that in order to add a new entry, you had to first view current entries prevented him from finding how to add a new entry. Even when he did manage to add a new entry, it was not displayed because the date filter did not include the date of the new entry which added more confusion. It was also unclear to him that you could type over the fields while viewing data as a chart. Frequently he would get stuck trying to do things that were explained in help at the bottom of the screen, but he never read the help.


Bill is a current computer science major at the University of Maryland. He has never owned a bathroom scale and is entirely uninterested in his weight. As a computer science major he is a veritable computer expert. He spent over two minutes looking for the sound settings before finally finding them, and then immediately also filled in his height which was on the same screen even though he had not reached that task yet. He had trouble noticing when his changes were entered because sometimes they appeared so instantaneously that it looked as though nothing had happened. He commented that the variance in response time (due to an aforementioned problem) was probably to blame for that.


Sue is a 48 year old woman who spends time working with a specialist about losing weight and dieting. She weighs herself every few weeks and keeps paper records of her weight. She is a moderately experienced computer user who for the most part only uses a word processor and web browser. She is also far sighted, but does not generally wear reading glasses. She expected there to be a link specifically to create a new account rather than adding an account in the User Settings menu. She was entirely unable to find the sound settings and had to be directed toward the instructions at the bottom of the User Settings page. She had to find how to graph data and add data through exhaustive searches of the whole system, but once she found them she was very quick at using them. She complained that the fonts were too small for her to read (probably due to her far sightedness). Finally some of the text fields were too small due to the fact that the system had not been viewed from an Apple computer before running this test.


Sally is a 16 year old high school student who has also worked with a specialist to help her lose weight. She is relatively inexperienced using a computer for anything other than web browsers, chat programs and word processors. She was confused as to whether a space was allowed in the name entry. She was unable to find the sound settings until prompted to look at the directions. She suffered from the same problem where the text boxes were too small on the Apple computer. She was very confused about how to add a new entry because it first required her to view current entries. When adding a new entry or modifying an old entry she first clicked the “add” or “modify” button expecting it to bring up a new page. Interestingly, when asked to change an entry she deleted the old entry and put a new one in its place rather than modifying the existing entry.


Barbara is a current student at the University of Maryland. She does not exercise often if at all and hates getting on a scale. She is a very experienced computer user when it comes to word processors, spreadsheet programs and web browsers. She was one of two users to find the sound settings in a reasonable amount of time. She didn’t seem to understand that you could just change settings at the top of the page when viewing data and instead reloaded the page every time. She was confused because it was sometimes not clear when her changes had been applied and it was not obvious that you could type over the fields on the view data page.


Fred is a student at the university and only uses his computer to play games, browse the internet and write papers. He is unconcerned with exercise or his weight. He was unable to find the sound settings without prompting. He had trouble realizing when his changes were applied. He was confused about how to enter dates with no specification. He repeatedly tried to add data while viewing a graph before viewing a chart to enter the new data. It was unclear to him that you had to first enter data and then click “add new,” this was largely because the text boxes were not obvious.





We were surprised at the fact that not one person read the instructions at the bottom of each screen without prompting even though they would often go through every screen in the whole interface several times looking for something that was explained there. We also noticed that even though the places where people needed to enter dates would accept almost any date format (even things like “two weeks ago”), they were confused about how to enter the date because no specification was provided. Finally, we noticed that when people did make a decision about how to enter the date it was always copying the format from either the task list or the places where the system displayed dates.


The following is compilation of the problem discovered in the usability tests. Importance is on a scale of 1 to 5 with 1 being the least important and 5 being the most important. Effort is also on a scale of 1 to 5, with 1 being the easiest to fix and 5 being the hardest to fix.





Hard to find sound settings



Response time variable



Height treated differently



No feedback when modifications are made



Make it obvious where to go to make a new account



Date format not specified



Adding an entry requires you to first view old entries



Not obvious that you type over fields when viewing data as a chart



Fonts not large enough



New entries possibly do not show up in chart due to date filter



People didn’t look at the help



Descriptions of different menus are not complete





Medium-fidelity to high-fidelity


With the results of the usability tests as a starting point, we made several changes to the interface to fix the discovered problems. The welcome screen was updated to contain more accurate and meaningful information about each menu. A link for new users to follow was placed next to the banner at the top of each page. The link sends users to a special version of the user settings screen which has specific instructions for new users. References to sound settings were added to both the welcome screen and the user settings screen to make finding sound settings easier. On screens where it was not obvious when changes had been made, a confirmation dialog box appeared letting the user know when the changes had been successfully applied. We made it much easier and more intuitive to add a new weight record by separating it from the tabular view of past records. In the medium-fidelity prototype it was not clear that you could type the old values in the tabular list of records. Changing the text boxes back to the standard look (rather than with alternating grey backgrounds) helped make this clear. Finally the font size was increased to facilitate people with deteriorating eyesight.


These changes constitute all of the major differences between the medium-fidelity and high-fidelity prototypes.

Web Accessibility