Norman’s Design Principles

App pages: Age Length or Height Data Validation Summary Help

Age

Visibility: The prime function of this page is to prompt the user to pick a date. Keeping this in mind, the “Please pick a Date of Birth” button is the biggest and the most visible. The page itself is minimally designed making help, options, next, cancel and set buttons clearly visible.

Feedback:Once the user selects the pick a date button, a dialog box opens up with the calendar – a new state is communicated. When the user picks and date and presses set, the dialog box closes and the text box displaying the date changes to the selected date thereby notifying the user and providing feedback of his selection. When the next button is pressed, the button changes color and the user is taken to the next page – a new state is communicated.

Affordance:We tried to use text to notify the user of a button’s functionalities as much as possible. In this page “Cancel”, “Set”, “Please pick a date of birth” are examples of this.

Mapping:As mentioned above, most of our control buttons have clear labels on them and therefore the user will be able to gauge how the controls relate to their effects in the

real world. The close and the help buttons in the action bar are not identified with text. However, for these, we have used two commonly used symbols to map the control to its function. For instance, the help button, which opens the help page is identified by “?” in the action bar.

Consistency:The next button is made consistent through out the app. We have also tried to be consistent in terms of the design – the background, font etc.

Constraints:The Date picker is designed so that the age range available for the user to pick is 5years – 0days. The date picker sets the max date as the current date and the min date 5 years prior to today. This restriction is placed because the app is primarily designed for children <5 years. The options button in the action bar is only active in the advanced mode. If clicked in the standard mode, a toast message will explain the same.

Length or Height

Visibility:The main function of this page is to ask the user to choose between length and height. The pictures make the radio button options very visible. Again, this page is minimally designed so the next button and the action bar are clearly visible.

Feedback:Once the user selects the radio button, the button changes to an on state thereby giving feedback. The next button changes color as well when clicked and it further directs the user to the next page.

Affordance:As mentioned before, we tried to be explicit by using text to notify the user of the functions of our main buttons.

Mapping:Length and Height radio buttons use both text and images. The user should be able to identify that by selecting one, he/she is choosing an option. Therefore, the user will be able to understand how his choice makes an impact. The un labeled control buttons that are commonly used, like “?” for the help page

Consistency:The next button and the action bar are carried over from previous pages. So is the background and the general interface of the app.

Constraints:The app forces the user to make a choice before proceeding to the next page. A text warning appears on the page if the user tries to move to the next page without making a choice. The options button in the action bar is only active in the advanced mode. If clicked in the standard mode, a toast message will explain the same. Constraints are also placed on the radio button selection – the user can select only one of the radio buttons.

Data Validation Summary

Visibility:The main function of this page is to present a summary of the values previously entered, which has resulted in a Z score beyond the range specified by the user, and enquire whether the user wants to re-enter these values. Therefore, the “yes” and “no” buttons take center stage.

Feedback:If the “No” button is chosen, the button changes color and the user is directed to the summary page immediately. If the “Yes” button is chose, the button changes color and the user is directed to Age, Length Height or Length depending on the settings.

Affordance:Text is used to identify the control buttons

Mapping:As mentioned above, text is used to identify the control buttons. In cases where it is not, commonly used symbols are used. Therefore, the user should be able to map the control button to its effect easily.

Consistency:The action bar is carried over from the previous pages. The next button is not because we want the user to answer a specific question in order to move to the next/appropriate page.

Constraints:The next button is removed to force the user to check the values in the summary and indicate if they want to re-enter values or proceed as such. The options button in the action bar is only active in the advanced mode. If clicked in the standard mode, a toast message will explain the same.

Help

Visibility:The only control button on this page is the done button placed at the end of the page. All the information is presented in one page with scroll making it easier to access and read.

Feedback:When the done button is pressed, the button changes color and the user is take back to the page from where he/she pressed the help button.

Affordance:The done button is identified with text and it is the only control button on this page

Mapping:The text used on the button should map the button to its functionality well

Consistency:This page has been intentionally deigned differently from the rest of the app. The background and designed are not carried over. Neither is the action bar or the next button.

Constraint:The only button allowed on this page is the “Done” button. This is because we wanted the help page to be isolated from the rest of the app. Once the user hits the “Done” button he/she is taken back to the page from where they selected the help button and they can access all the control buttons from here on.