What’s New In Illume Next

The new responsive survey design feature in Illume Next gives users the ability to create online surveys that optimize the user experience for survey respondents — including easy reading and navigation with a minimum of re-sizing, panning, and scrolling — on any desktop computer, tablet, or smartphone.

This feature detects the size of the browser window of the respondent’s device, based on industry standards, and automatically adjusts the rendering style – desktop, tablet, or mobile – within the survey to be most functional for their browser size. For example, if the browser size detected is less than 992 pixels, the survey will be optimized for a tablet; a browser size less than 768 pixels will be optimized for a mobile device.

Once Illume determines the pixel size, it automatically adjusts the Cascading Style Sheet that controls the display of the web page that is the survey. Users have the ability to view and edit the style settings associated to each rendering style.

Turning on Responsive Design

To use responsive design in an Illume Survey:

1. Create a new, or open an existing, survey

2. Go to the Tools menu and select Change Render Style

3. There are two options: Classic and Responsive.

4. Select Responsive.

Things to Consider

There are two main considerations when determining whether a survey built in a prior version of Illume should be altered to allow for Responsive design:

1. Any styles implemented via the Edit/Style editor from the prior version will be lost. These styles will need to be re-implemented in the Style editor.

2. Custom JavaScript implemented in the survey to facilitate custom validations or other custom solutions will not be functional in Responsive Design surveys. Prior versions of Illume utilized JavaScript and the Prototype.js library.  Illume Next, in contrast, utilizes the Angular framework and JQuery.  Given this, surveys with high utilization of custom JavaScript should remain in Classic mode.  If changed to Responsive, the custom coding will need to be rebuilt using JQuery.

3. Multicontrol questions and question types are not supported in Responsive design surveys. Questions of these types should be reprogrammed as standard questions prior to switching to responsive mode.

Viewing

To view and edit the rendering styles associated to a responsive survey:

1. Within the Illume survey editor, go to the “Survey” menu and select “Style”
   

2. If you scroll down on the left pane, you will see the style tree for “Survey”, and eventually for “Tablet” and “Mobile”.
   

3. The “Survey” style tree is the default style, if the browser size does not require Tablet or Mobile display.

4. The three style trees – Survey, Tablet, and Mobile – provide access to altering the survey style settings. When Responsive rendering is selected, you will see that the style settings, such as font and control size, varying across the 3 modes.

Editing

To edit a style setting associated with a particular rendering style:

1. Expand the tree for “Survey“, “Tablet“, or “Mobile“.

2. Find the style setting on the left pane that you wish to alter.

3. Edit on the right pane by clicking in the rectangle next to the setting.

For example, to edit the “alternating question highlighting color“:

1. Click on “Alternating” under “Question” within the Mobile tree.

2. In the right pane, click on the box next to Background Color where it currently says “Default”.

3. This pulls open the Pick Color modal.
   

The following additional changes have been made in the Illume Survey Editor to improve end user experience. These features are supported in the Responsive mode only:

1. Navigation Buttons: Previously, navigation buttons were images found in the Resource library of a survey, which led to a lengthy editing process that required other software. In Illume Next, navigation buttons are dynamically rendered on the survey web page. Users have the ability to adjust the color within the Style Editor, and button text within the Preferences Editor (under Survey > Preferences > Buttons).

2. Transitions: Users may set a transition (i.e. Fade, To Top, To Bottom, To Left or To Right) from page to page, as well as define the number of milliseconds of elapsed time for the transition. The transition can be set to Fade, To Top, To Bottom, To Left, or To Right. This results in a smoother, PowerPoint-like transition as the Next button is hit and the subsequent screen loads on the page.

3. Default Text: The default text found on pages within Survey > Preferences > Page Text has been modified to be simpler and concrete.

4. Survey Header Wizard: Users can more easily edit the style of the Survey Header via the Survey Header Wizard found under the Survey > Header menu.  Users can add and control the position of title text, an image (e.g. a logo), and a progress bar; the Survey Header Wizard will ensure all components are placed appropriately.  The ability to create the header manually remains.
   

5. Checkboxes & Radio Buttons: rendering style of checked radio buttons and checkboxes are now more appealing, as in the examples below:
   
   

6. Date Selection: Questions that require a date to be entered automatically provide a “date picker” for easy selection of dates, as in the example below:
   

7. Placeholder Text: Questions of Text display type may utilize placeholder text to assist with accurate data entry. The example above for Date of Surgery demonstrates this feature, wherein the Label is applied as “inline,” such that it appears as pale text within the text box, yet disappears as soon as the text box is clicked.

8. Default Template: The Responsive Default Template for new surveys has been enhanced to be more visually appealing.

For previous Illume users, you may notice the menus within Illume Next have been updated to make features easier to find. The menu headers are: File, Edit, Preview, Survey, Add, View, Tools, Repository, and Help. Here is a list of the changes within the following menus:

1. Preview Menu
   • Survey Preview
   • Survey layout
   • Preview in default browser

2. Survey Menu
   • Survey components – Style, Preferences, End Page Content, Redirects
   • Custom CSS/JavaScript section
   • Header pages (previously in Preferences/Page Text section)
   • Security Settings – Web Services Connection (for SDK users), browser cookies for unauthenticated sessions, and survey session time out.

3. Add Menu
   • Common survey tasks – adding questions, question tables, Text/HTML objects and page breaks

The Background Task Handling feature gives users the ability to initiate bulk actions – such as bulk participant import, delete, and update – and have them process in the background, while continuing other administrative tasks. Progress can be monitored using the Task Indicator in the bottom right corner of the web interface of the Enterprise Manager, Discovery, or the Data Manager:

Once an action is complete, the Task Handler will display the successful completion of the task:

You may view and export a summary report of the task handling via the interface.

Color Indicators

New indicators have been created within the Remote Data Collection client to assist data collectors in monitoring synched vs unsynched submissions.  Surveys for which unsynched survey sessions exist will be listed in red font.  If a survey has not collected any data, or all collected data have been synched, then the survey will be listed in green font.

For example, in the screenshot below, the survey has collected no data, and thus appears in green:

Automatic Survey Selection

When Users of Remote Data Collection type (as opposed to Users of Normal type with the Data Collector role) click Add Survey, the survey(s) to which that User has been assigned are automatically added, bypassing the need to select the survey(s) from a list.