Ecological Task

Version: v1 (current)

The Ecological Task guides participants through external computer-based activities using step-by-step instructions displayed in a floating window or inline on the page.

Overview

This task enables you to design studies where participants perform real-world computer activities (such as navigating websites, watching videos, or interacting with applications) while receiving structured guidance from your study. Instructions are displayed in a small floating window (Picture-in-Picture) that stays on top of other windows, allowing participants to follow your directions while working in external applications.

If the floating window is not supported by the participant's browser or if they close it, the task automatically switches to displaying instructions inline on the participation page.

How It Works

1. Main Instructions

Before the steps begin, participants see your main instructions page explaining the overall task.

2. Step-by-Step Guidance

Once they start, participants proceed through a sequence of steps you define. For each step:

• Instructions appear in the floating window (or inline if PiP is unavailable)
• Participant completes the external activity described
• Participant clicks the button to advance to the next step
• Progress indicator shows current step number (e.g., "2 / 5")

3. Completion

After all steps are completed, the task finishes and the next task in the study begins.

Configuration Options

Picture-in-Picture Settings

Option	Description	Default
Enable PiP	Use floating window for instructions	Enabled
Window Width	Width of floating window in pixels	420 px
Window Height	Height of floating window in pixels	520 px

Browser Compatibility: Floating windows (Document Picture-in-Picture) are supported in Chrome and Edge version 116 or later. Firefox and Safari do not support this feature yet, but the task will automatically show instructions inline instead.

Step Configuration

Define your activity as a sequence of steps using the spreadsheet interface:

Column	Description	Example
Step Text (HTML)	Instructions for this step (supports HTML formatting)	Navigate to example.com and find the 'About' page.
Button Label	Text for the advancement button	"Found it", "Done", "Next"

You can add as many steps as needed. Each step can have different button text to match the action (e.g., "Start watching", "Finished reading", "Done").

Instructions

Use the rich text editors to customize:

• Main Instructions: Explain the overall task before steps begin
• Hint Instructions: Quick reference available via the "?" button during the task

Use Cases

Website Navigation Studies

Guide participants through specific pages or actions on websites:

Step 1: Navigate to example.com
Step 2: Find and click the 'Contact Us' link
Step 3: Read the office hours information

Video Comprehension

Direct participants to watch specific content:

Step 1: Open this video link and watch the first 3 minutes
Step 2: Take notes on the main argument (use a text editor or paper)
Step 3: Rewatch the conclusion (final minute)

Application Interaction

Study how participants use software tools:

Step 1: Open your email application
Step 2: Compose a new message with subject "Meeting Request"
Step 3: Add two recipients and write a brief message

LLM/Chatbot Interaction

Research conversational AI usage:

Step 1: Open ChatGPT and ask: "What are the benefits of exercise?"
Step 2: Read the response carefully
Step 3: Ask a follow-up question based on the response

Multitasking Studies

Examine task-switching and attention:

Step 1: Open a news website in one tab and a spreadsheet in another
Step 2: Read the headline article while periodically checking the spreadsheet
Step 3: Summarize the article in the spreadsheet

Data Output

Markers and Responses

The task records markers for each step progression and PiP mode changes, plus one response object per completed step.

Markers (step_shown):

{
  "type": "step_shown",
  "ts": "2024-01-01T00:00:01.000Z",
  "hr": 1234.56,
  "data": {
    "step_index": 0,
    "step_text": "<p>Navigate to example.com and find the 'About Us' page.</p>",
    "button_label": "Found it",
    "mode": "pip"
  }
}

Additional markers logged via the task's marker base:

• {task}_pip_opened -- PiP window successfully opened
• {task}_pip_closed -- PiP window closed (manual close or task completion)
• {task}_step_{N}_shown -- Step N (0-based) displayed to participant
• {task}_step_{N}_complete -- Step N (0-based) completed by participant
• {task}_fallback_to_inline -- Mode switched from PiP to inline after manual close

Response Data (one per completed step):

{
  "step_index": 0,
  "mode": "pip",
  "shown_hr": 1234.56,
  "completed_hr": 5678.90,
  "duration_ms": 4444
}

Summary Artifact

A JSON file (ecological_summary_{taskIndex}.json) with aggregated step data:

{
  "task_kind": "ecological_task",
  "task_index": 0,
  "mode_used": "pip",
  "pip_supported": true,
  "pip_manually_closed": false,
  "total_steps": 3,
  "steps": [
    {
      "step_index": 0,
      "step_text": "<p>Navigate to example.com...</p>",
      "button_label": "Done",
      "shown_hr": 1234.56,
      "completed_hr": 5678.90,
      "duration_ms": 4444,
      "mode": "pip"
    }
  ]
}

Tips for Researchers

Writing Effective Step Instructions

1. Be specific: Instead of "Visit the website", write "Navigate to https://example.com/about"
2. Use action verbs: "Click", "Read", "Watch", "Type", "Navigate"
3. Set clear completion criteria: "After reading the paragraph, click Done"
4. Include links: Use HTML anchors: <a href="https://..." target="_blank">Click here</a>
5. Format for readability: Use <strong> for emphasis, <ul> for lists

Button Labels

Choose button text that reflects the action:

• Informational steps: "Next", "Continue"
• Task completion: "Done", "Finished"
• Specific actions: "Found it", "Opened", "Submitted"

Floating Window Considerations

Advantages:

• Stays visible over external applications
• Minimizes context switching
• Feels less intrusive than switching tabs

Limitations:

• Only works in Chrome/Edge 116+
• Participants can manually close the window (task will auto-switch to inline)
• Small screen size may not suit long instructions

When to disable PiP:

• If your participant base uses Firefox/Safari primarily
• If step instructions are lengthy or include complex formatting
• If you prefer a more traditional task interface

Testing Your Configuration

Before launching your study:

1. Preview the task in the study form
2. Try it in both Chrome (PiP mode) and Firefox (inline fallback)
3. Test with realistic step timings to estimate total duration
4. Ensure external links open in new tabs (target="_blank")

Moderation Support

Unmoderated Mode

Participants advance through steps by clicking the button in each step.

Moderated Mode

The researcher observes via video call while the participant controls advancement.

Strictly Moderated Mode

The researcher controls advancement via the participation dashboard. Buttons are hidden from the participant, and the researcher clicks "Advance Task" to move to the next step or complete the task.

Example Configuration

Here's a sample configuration for a website navigation study:

Main Instructions:

<p>In this task, you will navigate a website and find specific information.</p>
<p>Follow the instructions in the floating window (or on this page) for each step.</p>
<p>Click the button after completing each step to proceed.</p>

Steps:

Step Text	Button Label
<p>Navigate to <strong>https://example.com</strong></p><p>Find the "About Us" page using the navigation menu.</p>	Found it
<p>On the About Us page, read the company history section.</p><p>Identify the year the company was founded.</p>	Done reading
<p>Use the search function to find information about their products.</p><p>Count how many product categories are listed.</p>	Done

PiP Settings:

• Enable PiP: ✓ (checked)
• Width: 420 px
• Height: 520 px