Translational Research and Patient Safety in Europe

Translational Research and Patient Safety in Europe

User Interface elements in eCRF

Wroclaw University of Technology

Work Package: WP5, WT 5.5

Type of document: Conceptual framework

Authors / Version / Status
Stanisław Saganowski
Andrzej Misiaszek
Piotr Bródka / 1.1 / New / In Progress / Completed / Closed

1.  Introduction

According to conclusions from F2F meeting in London on 05.04.2013, it is required to implement an eCRF template database with assigned user interface elements. In this document we are showcasing possible representations of elements that could be used by researcher and presented to a study participant. Below are standard UI controls in Android, iOS systems and web application based on jQuery UI.

2.  User interface standard elements

Study designer can design the eCRF appearance on different ways, according to his needs. However user interface elements available in Android and iOS platform are very specific when it comes to how they look and react. On the other hand there is a wide range of possibilities regarding the web application. Representation for the web app, will be mostly based on jQuery UI.

Below, the standard user interface elements for each platform are presented.

a.  Input field – used for direct input from the keyboard. Input field can be validated e.g. only letters are allowed, only numbers are allowed, limited length of the characters.

Android / iOS / Web app

b.  Date picker – used to choose a date. User chooses a date from a pop-up calendar. Chosen field is then used in other field as a date. Built in validation.

Android / iOS / Web app

c.  Radio button – used to select only one option among many available.

Android / iOS
Web app

d.  Switch control – a field with switch control will have only two options available. Study participant choses only one.

Android / iOS / Web app

e.  Drop down list – after choosing this element a list is shown to the study participant. Only one element can be chosen.

Android / iOS / Web app

3.  Question Types

When an eCRF is created in study designer (manually or automatically), the QuestionType attribute can be added to every ItemDef object. This attribute will indicate how the answers to this question will be displayed to the study participant e.g. adding QuestionType = “DropDown” will cause displaying the answers to that question as a drop down list on each platform.

Study designer can choose one of the six predefined types for the QuestionType attribute:

QuestionType / UI control name / Android component / iOS component / Web App component
InputField / a. Input field / EditText / UITextField / input
DatePicker / b. Date picker / DatePicker / UIDatePicker / datepicker
RadioButton / c. Radio button / RadioButton / UITableView / radio
YesNo / e. Switch control / Switch / UISegmentedControl / radioset
DropDown / f. Drop down list / Spinner / UITableView (on new screen) / combobox

If the attribute QuestionType will not be provided, the default question type will be chosen using the following rules:

·  if ItemDef contains attribute DataType="date", then QuestionType=”DatePicker”,

·  else if ItemDef contains a CodeListRef tag, then QuestionType=”DropDown” (for the web app this will be rendered as a RadioButton set),,

·  else QuestionType=”InputField”.

Other important issues

·  When deciding which user interface elements will be used, we wanted to keep standards persistent on each platform (Android, iOS, web), this way the study participants will be familiar with the interface and will know how to interact with it. Therefore the same question may look different on each platform. What is more, the same question may even look different on two Android devices. The goal is to utilize study participants experience with his own mobile device.

·  Each group of questions tagged as ItemGroupDef will be presented on a single screen in mobile applications (Android, iOS). Buttons “previous” and “next” will be navigating to the previous and next screen (group of questions). In the web application a single group of questions will be highlighted, separating it from other groups of questions.

·  It is the study designers’ responsibility to use QuestionType attribute properly. In case of inappropriate use the eCRF might be rendered incorrectly.