Hierarchical Task Analysis (HTA) in Human-Computer Interaction (HCI)

1. Introduction to HTA

Hierarchical Task Analysis (HTA) is a structured method used in Human-Computer

Interaction (HCI) and ergonomics to break down complex tasks into smaller, more manageable
subtasks. It helps in understanding how users interact with systems, identifying usability issues,
and optimizing user experiences.

HTA is widely used in user-centered design, usability testing, system design, and workflow
optimization to improve the efficiency and effectiveness of human interactions with technology.

2. Definition of HTA

HTA is a top-down task decomposition technique that systematically breaks a task into
hierarchically organized goals, sub-goals, and operations. It is primarily used to analyze how
users perform tasks and identify potential improvements.

3. Key Components of HTA

HTA consists of the following main components:

1. Overall Goal – The primary task or objective that needs to be achieved.

2. Subtasks – The breakdown of the overall goal into smaller, more manageable steps.
3. Plans – Rules that describe the sequence in which subtasks should be performed.
4. Hierarchy Structure – A tree-like representation showing how a task is decomposed
into smaller elements.

For example, consider the task of "Making a cup of tea" using HTA:

 0. Make a cup of tea (Overall Goal)

o 1. Boil water
o 2. Add tea bag to cup
o 3. Pour hot water into cup
o 4. Let the tea steep
o 5. Remove tea bag and add sugar/milk (if needed)
o 6. Stir and serve

Plan: Do steps 1 → 2 → 3 → 4. Then do 5 (if required) → 6.

4. Steps Involved in Conducting HTA

To perform HTA, follow these steps:

Step 1: Define the Overall Goal

 Identify the main task to be analyzed.

 Example: "Booking a flight ticket online."

Step 2: Identify Subtasks

 Break the main task into smaller subtasks.

 Example:
o 0. Book a flight ticket
 1. Open the airline website
 2. Search for flights
 3. Select a flight
 4. Enter passenger details
 5. Make payment
 6. Receive confirmation

Step 3: Organize Tasks in a Hierarchical Structure

 Structure the tasks in a tree diagram or nested list to represent dependencies.

Step 4: Define Plans

 Specify the order in which tasks should be performed (e.g., sequential, conditional, or
optional).

Step 5: Review and Refine

 Ensure all tasks and subtasks are logically structured and relevant.

5. Applications of HTA in HCI

HTA is widely used in the following areas of HCI:

1. User Interface (UI) & User Experience (UX) Design

o Helps in designing intuitive interfaces by understanding user workflows.
o Identifies bottlenecks in user interactions.
2. Usability Testing
o Helps in detecting usability issues in software applications and websites.
o Used to optimize user flows and remove unnecessary steps.
3. Human Factors and Ergonomics
 Used in industries like aviation, healthcare, and manufacturing to analyze and
o
optimize task performance.
4. Automation and AI Integration
o Helps in designing AI-driven systems that can automate user tasks effectively.

6. Advantages of HTA

✔ Improves Task Efficiency – Helps in streamlining workflows.

✔ Enhances Usability – Identifies and removes redundant or complex interactions.
✔ Facilitates System Design – Helps developers design user-friendly software.
✔ Supports Training and Documentation – Provides clear task breakdowns for training
users.
✔ Flexible & Scalable – Can be applied to simple or complex tasks.

7. Limitations of HTA

❌ Time-Consuming – Requires detailed task decomposition, which can be complex.

❌ Lack of Context – Focuses on task steps but may miss user emotions and cognitive load.
❌ Requires Expertise – Needs experienced analysts to create accurate HTA models.
❌ Static Representation – Does not capture dynamic changes in real-time user interactions.

8. Conclusion

Hierarchical Task Analysis (HTA) is a powerful method in HCI and UX design for
understanding and improving user interactions. By breaking tasks into structured hierarchical
steps, it helps in designing efficient, user-friendly systems. However, it should be combined
with other qualitative and quantitative research methods to gain deeper insights into user
behavior and experience.

Would you like a real-world example of HTA applied to a specific technology or system? 🚀

Engineering Task Models in HCI for College

1. Introduction to Engineering Task Models in HCI

Engineering Task Models (ETMs) are systematic representations of how users interact with a
system to achieve a goal. They are used in Human-Computer Interaction (HCI) to analyze,
design, and improve user interfaces by focusing on task efficiency, usability, and user
behavior.
These models help engineers, designers, and developers understand user workflows, optimize
task execution, and enhance the usability of interactive systems.

2. Definition of Engineering Task Models

Engineering Task Models (ETMs) are formalized, structured frameworks that describe tasks
in terms of:

 User goals (what users want to accomplish)

 Task sequences (how users achieve their goals)
 System interactions (how the interface responds)
 Performance constraints (time, effort, and accuracy)
 Cognitive processes (mental workload, decision-making)

3. Importance of Engineering Task Models in HCI

ETMs are essential in HCI research and system design because they: ✔ Improve System
Usability – Help in designing interfaces that align with user needs.
✔ Enhance Task Efficiency – Optimize the number of steps users take to complete a task.
✔ Reduce Errors – Identify and eliminate usability issues before deployment.
✔ Support Automation – Help in developing AI-driven and automated systems.
✔ Ensure Accessibility – Make interfaces more accessible to a diverse range of users.

4. Types of Engineering Task Models

There are different types of task models used in HCI:

1. Hierarchical Task Analysis (HTA)

 Breaks tasks into subtasks in a hierarchical structure.

 Example: Booking a college course online
o 0. Register for a course

1. Log in to the student portal


2. Search for the course



3. Select course and check prerequisites

 

4. Add course to schedule



5. Confirm registration

2. ConcurTaskTrees (CTT)

 Graphical representation of tasks using symbols to show parallel, sequential, and conditional
tasks.
 Example: Using a library system
o Browsing books (parallel task)
o Selecting a book (sequential task)
o Checking out a book (conditional task)

3. GOMS Model (Goals, Operators, Methods, and Selection Rules)

 Focuses on cognitive processes and predicts task execution time.

 Example: Composing an email
o Goal: Send an email
o Operators: Open email app, type content, click send
o Methods: Use keyboard shortcuts or manual typing
o Selection Rules: Choose shortcut if familiar, else use manual typing

4. Task Analysis for User Interface Design (TAUID)

 Focuses on user interactions with an interface and predicts potential usability issues.
 Example: Using an e-learning platform
o Logging in
o Navigating courses
o Watching lectures
o Submitting assignments

5. Steps to Develop an Engineering Task Model

Step 1: Define User Goals

 Identify the primary task the user wants to achieve.

 Example: "A student wants to enroll in a college course online."

Step 2: Break Down Tasks

 Decompose the task into subtasks and actions.

Step 3: Identify Task Sequences

 Define whether tasks are performed sequentially, in parallel, or conditionally.

Step 4: Assign Task Properties

 Consider:
o Time constraints (How long does the task take?)
o Error rates (Where do users make mistakes?)
o Cognitive load (How much thinking is required?)

Step 5: Represent the Task Model

 Use diagrams, flowcharts, or tables to visualize task flows.

Step 6: Validate & Optimize

 Test with real users and refine the model for better usability.

6. Applications of Engineering Task Models in HCI

Engineering Task Models are used in various domains:

Domain Application

Education Designing e-learning platforms, virtual labs, and college registration portals

Healthcare Improving medical device interfaces, patient record systems, and telemedicine

E-commerce Optimizing checkout processes, payment flows, and search features

Software Development Creating user-friendly dashboards, reducing complexity in apps

AI and Automation Designing intelligent assistants, chatbot interactions

7. Example: Engineering Task Model for an Online College Registration System

Goal: Register for a college course

Task Breakdown (HTA Model):

1. Log in to the student portal

 2. Search for the course
o Enter course name or code
o Filter by department
3. Select course
o Check prerequisites
o Check available slots
4. Add course to schedule
5. Confirm registration
o Pay fees (if applicable)
o Receive confirmation email

Plan (Sequence of Execution)

 Plan 1: Do steps 1 → 2 → 3 → 4 → 5 sequentially.

 Plan 2: If prerequisites are not met, repeat step 2.

Possible Usability Issues Identified

❌ Complex navigation – Too many clicks to find a course.

❌ Slow loading times – Increases frustration.
❌ Confusing UI – Poorly labeled buttons.

Optimizations Suggested

✔ Simplify search options.

✔ Improve system response time.
✔ Provide step-by-step guidance.

8. Advantages of Using Engineering Task Models

✅ Enhances Efficiency – Reduces task completion time.

✅ Identifies UX Issues – Helps find and fix usability problems.
✅ Improves Accessibility – Ensures the system works for all users.
✅ Supports Automation – Aids in designing AI-based interactions.

9. Limitations of Engineering Task Models

❌ Time-Consuming – Requires detailed analysis.

❌ Not Always Flexible – May not adapt well to dynamic user behaviors.
❌ Complex for Large Systems – Hard to model all possible interactions.
10. Conclusion

Engineering Task Models (ETMs) are critical tools in HCI that help in designing user-friendly,
efficient, and accessible interactive systems. They ensure that human interactions with
technology are optimized by analyzing task sequences, reducing errors, and improving
usability.

For college applications, ETMs can be used to improve e-learning platforms, student portals,
and online registration systems, ensuring a seamless experience for students and faculty.

Would you like a practical case study or real-world example to illustrate these concepts
further? 🚀

Concur Task Tree (CTT) in HCI – Detailed Explanation for College Exam
1. Introduction to Concur Task Tree (CTT)

Concur Task Tree (CTT) is a graphical notation used in Human-Computer Interaction (HCI)
for modeling and analyzing user tasks in interactive systems. It helps in understanding how users
perform tasks, interact with systems, and coordinate multiple activities.

CTT is particularly useful for designing, evaluating, and improving user interfaces, ensuring
that they meet usability and efficiency requirements.

2. Definition of CTT

A Concur Task Tree (CTT) is a hierarchical task model that represents user activities with a
tree-like structure, where:

 Nodes represent tasks or subtasks.

 Branches show the relationships between tasks.
 Operators define task execution logic, such as whether tasks occur sequentially, in parallel, or
conditionally.

CTT provides a formal, structured approach to analyze user workflows, helping designers
improve system interactions.

3. Importance of CTT in HCI

CTT is widely used because it:

✔ Enhances usability – Helps design user-friendly interfaces.
✔ Improves efficiency – Identifies unnecessary steps in workflows.
✔ Supports multitasking – Models parallel and concurrent tasks.
✔ Aids in automation – Helps in developing AI-based interactions.
✔ Simplifies task analysis – Provides a structured representation of user actions.

4. Key Components of CTT

A CTT consists of tasks, task relationships, and operators.

1. Types of Tasks

 User Tasks – Actions performed by the user (e.g., clicking a button).

 System Tasks – Automated actions by the system (e.g., loading a webpage).
 Abstract Tasks – Conceptual steps that group multiple actions (e.g., "Register for a course").
 Interactive Tasks – Tasks requiring user-system interaction (e.g., filling out a form).

2. Task Operators in CTT

CTT uses operators to define task execution rules:

Operator Symbol Meaning

Enabling >> Task A must be completed before Task B starts (sequential).

Choice [ ] User can choose between Task A or Task B.

Parallel `

Order Independence ` >>

Iteration * Task can be repeated multiple times.

Disabling [> Task A stops when Task B starts.

5. How to Create a CTT Model?

Step 1: Identify the User Goal

Define the main task the user wants to achieve.

Example: "Register for an online course".

Step 2: Break the Task into Subtasks

Decompose the goal into smaller steps.
Example:

 0. Register for a course

o
1. Log in to the student portal
o

2. Search for courses

o

3. Select a course
o

4. Enroll in the course

o

5. Confirm registration

Step 3: Define Relationships Between Tasks

Use CTT operators to show task execution logic:

 Log in >> Search for courses >> Select course >> Enroll >> Confirm registration (Sequential).
 User can choose to enroll in multiple courses [ ].

Step 4: Draw the CTT Diagram

Use tree-like notation to represent tasks and subtasks.

6. Example: CTT Model for Online Course Registration

Below is a CTT model for a college's online course registration system.

Task Breakdown

Main Task: "Register for a Course"

 1. Log in
 2. Search for courses
o 2.1. Filter by department [ ] Filter by level
 3. Select a course
o 3.1. Check course details
o 3.2. Verify prerequisites
  4. Enroll in the course
 5. Confirm registration

CTT Representation with Operators

Register for a Course
>> Log in
>> Search for courses
[ ] Filter by department
[ ] Filter by level
>> Select a course
>> Check course details
>> Verify prerequisites
>> Enroll in the course
>> Confirm registration

📌 Explanation:

 Tasks are arranged sequentially (>>).

 The user can filter courses in multiple ways ([ ]).

7. Applications of CTT in HCI

CTT is widely used in various fields:

Domain Application

Education Designing e-learning platforms and student portals.

Healthcare Optimizing medical record systems and appointment booking.

E-commerce Improving online shopping checkout processes.

Banking Enhancing online banking transactions and security measures.

Software Development Analyzing user interaction flows for apps.

8. Advantages of Using CTT

✅ Supports Complex Interactions – Handles parallel and multitasking activities.

✅ Improves User Experience – Helps in designing intuitive workflows.
✅ Graphical Representation – Makes task structures easy to understand.
✅ Enhances System Usability – Identifies and fixes UI inefficiencies.
✅ Flexible & Scalable – Can model simple or complex tasks.
9. Limitations of CTT

❌ Time-Consuming – Requires detailed task decomposition.

❌ Can Become Complex – Large systems may result in complicated diagrams.
❌ Limited Focus on User Emotions – Does not capture user frustrations or cognitive load.

10. Conclusion

Concur Task Tree (CTT) is a powerful task modeling technique in HCI that helps in designing
efficient, user-friendly systems. By breaking tasks into hierarchical structures and defining
their relationships using formal operators, CTT enables better usability, task optimization,
and system performance.

For college applications, CTT can be used to analyze online student registration systems, e-
learning platforms, and academic portals, ensuring a seamless experience for students and
faculty.

Exam Tip 💡:

For your college exam, focus on:

✔ Definition of CTT
✔ Operators & Task Relationships
✔ CTT Diagram Example (like Course Registration)
✔ Applications & Benefits

Would you like a detailed CTT diagram or real-world case study for better understanding? 🚀

Introduction to Formalism in Dialog Design in HCI

1. Introduction to Dialog Design in HCI

What is Dialog Design?

In Human-Computer Interaction (HCI), dialog design refers to the structuring of

interactions between users and computer systems. It ensures that conversations (or interactions)
between the user and the system are clear, intuitive, and efficient.
For example, when a user interacts with a voice assistant (like Siri), chatbots, or ATM
interfaces, the system must follow a well-structured dialog flow to ensure smooth
communication.

Why is Dialog Design Important?

 Enhances Usability – Ensures easy-to-follow conversations.

 Reduces Errors – Minimizes confusion and misunderstandings.
 Supports Automation – Helps in designing AI chatbots and voice assistants.
 Improves Accessibility – Makes systems user-friendly for different user groups.

2. What is Formalism in Dialog Design?

Definition of Formalism

Formalism in dialog design refers to the use of structured, rule-based approaches to define
and analyze conversations between users and systems.

It helps designers: ✔ Model conversations

✔ Analyze user interactions
✔ Ensure consistency in responses
✔ Develop efficient AI-driven interactions

3. Key Approaches to Formalism in Dialog Design

There are different formal methods used to structure dialogs in HCI:

Formalism Approach Description Example

Represents dialogs as a series of states ATM Interface (Insert card → Enter PIN
State Transition
where the system moves based on user → Select Amount → Confirm
Networks (STN)
input. Withdrawal).

Finite State Machines Uses predefined states and transitions Voice Assistants (Wake Word → Listen
(FSM) to guide conversation flow. → Respond → End).

Augmented Transition An enhanced version of FSM that allows Customer Support Chatbot (Greeting →
Networks (ATN) nested sub-dialogs. Issue Category → Specific Help).

Uses linguistic rules to define valid user AI-based chatbots understanding

Dialogue Grammars
inputs and responses. synonyms and sentence structures.
Formalism Approach Description Example

Uses slots and attributes to structure Online Booking System (User provides
Frame-Based Models
conversations. Date, Time, Location).

4. Explanation of Formalism Approaches

1. State Transition Networks (STN)

 A graph-based model where each node represents a system state.

 Edges define the transitions based on user input.
 Used for structured dialogs, such as ATM interactions or online forms.

Example: ATM Withdrawal Process

Start → Insert Card → Enter PIN → Select Amount → Confirm → End

📌 Key Feature: If the user enters the wrong PIN, the system transitions back to the PIN input
state.

2. Finite State Machines (FSM)

 Defines a fixed number of states with predefined transitions.

 Cannot handle complex, flexible conversations.

📌 Example: Voice Assistant Interaction

User: "Hey Siri" → System: "How can I help?"

User: "Set an alarm" → System: "For what time?"
User: "7 AM" → System: "Alarm set for 7 AM."

🛑 Limitation: If a user asks "Wake me up at 7", the FSM might not recognize it without
predefined patterns.

3. Augmented Transition Networks (ATN)

 An advanced version of FSM allowing sub-dialogs.

 More flexible and context-aware.

📌 Example: Customer Support Chatbot

Main Dialog:
User: "I need help with my order."
System: "What is the issue?"

Sub-dialogs:
- Track Order → Ask for Order ID → Provide status.
- Refund Request → Ask for Order ID → Explain refund process.

✅ Advantage: Can handle multiple user intents in nested dialogs.

4. Dialogue Grammars

 Uses linguistic structures (like grammar rules) to interpret user input.

 Helps in Natural Language Processing (NLP) for AI-based systems.

📌 Example: AI Chatbot Handling Variations

User: "Book a flight to New York."

User: "I want to fly to NYC."
User: "Can I get a plane ticket for New York?"

All variations map to the same intent using grammar rules.

✅ Advantage: Enables AI to understand different sentence structures.

5. Frame-Based Models

 Uses frames (data structures) with slots to collect user information.

 Common in form-filling applications (e.g., flight bookings, hotel reservations).

📌 Example: Online Flight Booking

Frame: {Destination: ___, Date: ___, Time: ___, Class: ___}

User: "I want a flight to London on March 10."
System fills → {Destination: London, Date: March 10}

✅ Advantage: Allows partial input and dynamic updates.

5. Comparison of Formalism Approaches

Formalism Approach Strengths Weaknesses

State Transition Networks (STN) Simple, structured dialogs Becomes complex for large
 Formalism Approach Strengths Weaknesses

interactions

Rigid, cannot handle flexible

Finite State Machines (FSM) Easy to implement
conversations

Augmented Transition Networks Supports sub-dialogs, more

More difficult to program
(ATN) flexible

Dialogue Grammars Supports Natural Language Requires complex linguistic rules

Efficient for structured data

Frame-Based Models Not suited for open-ended dialogs
input

6. Applications of Formalism in Dialog Design

Formalism in dialog design is widely used in various fields:

Domain Application

Banking ATM interfaces, voice-based banking assistants

Healthcare AI chatbots for medical inquiries, patient appointment scheduling

Education Virtual tutors, automated grading assistants

E-commerce Customer service chatbots, shopping assistants

Smart Homes Voice-controlled assistants (Alexa, Google Home)

7. Advantages of Formalism in Dialog Design

✅ Ensures Consistency – Predictable responses and interactions.

✅ Reduces Errors – Minimizes ambiguity in user input processing.
✅ Improves User Experience – Makes systems intuitive and responsive.
✅ Supports AI and Automation – Helps in chatbot and voice assistant development.
8. Challenges & Limitations

❌ Complexity in Large Systems – Requires detailed modeling.

❌ Rigid Structures – FSM and STN models struggle with natural language variations.
❌ Difficult Debugging – Errors in dialog flow can be hard to fix.

9. Conclusion

Formalism in dialog design is crucial in HCI to create efficient, structured, and user-friendly
interactions between humans and machines. By using formal models like FSM, STN, ATN,
dialogue grammars, and frame-based approaches, designers can improve chatbots, AI
assistants, and interactive systems.

Exam Tip 💡:

For your college exam, focus on:

✔ Definition of Formalism
✔ Different Formal Models (FSM, STN, ATN, etc.)
✔ Examples (ATM, Chatbots, AI Assistants)
✔ Advantages & Limitations

Would you like a detailed diagram or example-based explanation for better understanding? 🚀

Design Using Finite State Machines (FSM) in HCI – Detailed Explanation

for College
1. Introduction to FSM in HCI

What is a Finite State Machine (FSM)?

A Finite State Machine (FSM) is a mathematical model used to design systems that can be in
one state at a time and transition between states based on inputs or conditions.

In Human-Computer Interaction (HCI), FSMs are widely used for designing user
interactions, system behaviors, and workflows in software applications, including: ✔ User
interfaces (UI/UX)
✔ Chatbots and voice assistants
✔ Game development
✔ Menu navigation in applications
FSM ensures that user interactions are structured, predictable, and follow a logical flow.

2. Components of a Finite State Machine

FSM consists of:

1. States

 Represent different conditions of the system.

 Example: "Logged Out," "Logged In," "Viewing Profile" in a website.

2. Transitions

 Define how the system moves from one state to another.

 Triggered by user actions or system events.
 Example: "Click Login Button" → Transition from "Logged Out" to "Logged In".

3. Inputs (Events/Triggers)

 Actions from users or system-generated events.

 Example: Clicking a button, entering a password, receiving a message.

4. Outputs (Actions/Responses)

 The system’s response when a transition occurs.

 Example: Displaying a "Login Successful" message after entering correct credentials.

5. Initial State

 The starting point of the system.

 Example: "Home Screen" when an app is first launched.

6. Final State (Optional)

 Represents the end of an interaction.

 Example: "Logged Out" when a user logs out from an application.

3. FSM Design Process in HCI

Step 1: Identify the System’s Behavior

  Determine the different states the system can have.
 Example: For a vending machine → "Idle," "Accepting Money," "Dispensing Item."

Step 2: Define Possible User Actions

 What actions will change the state?

 Example: User inserting money, choosing a product.

Step 3: Define State Transitions

 Create rules for how the system moves between states.

 Example: If money is inserted → Move to "Accepting Money" state.

Step 4: Implement FSM in Software

 Code the FSM using a programming language.

 Use state diagrams to visually represent the process.

4. FSM Example in HCI: Login System

Let’s design an FSM for a website login system.

FSM States:

1️⃣ Logged Out (Initial State)

2️⃣ Entering Credentials
3️⃣ Authenticating
4️⃣ Login Successful (Logged In)
5️⃣ Login Failed (Back to Logged Out)

FSM Transitions:

Current State Input (User Action) Next State Output (System Response)

Logged Out User clicks "Login" Entering Credentials Display login form

Entering Credentials User submits credentials Authenticating Checking details

Authenticating Valid credentials Logged In Show user dashboard

Authenticating Invalid credentials Logged Out Show "Login Failed" message

Logged In User clicks "Logout" Logged Out Redirect to home page

FSM Diagram:
(Logged Out) → [Click Login] → (Entering Credentials) → [Submit] →

↘ (Login Failed) ← [Wrong Password] ←

(Authenticating)

(Logged In) ← [Correct Password] ←

[Click Logout] → (Logged Out)

📌 Key Takeaways:

 The system starts in the "Logged Out" state.

 User input triggers state changes (e.g., clicking login).
 FSM prevents unexpected behaviors (e.g., prevents access without logging in).

5. Applications of FSM in HCI

FSM is widely used in various HCI applications:

Application Example

Graphical User Interfaces (GUIs) UI navigation, menu selection

Chatbots and Virtual Assistants Understanding user queries

Games and Simulations Character behavior control

Web and Mobile Apps Login/logout flow, form validation

ATMs and Vending Machines Transaction management

6. Advantages of FSM in HCI

✅ Predictable Behavior – Ensures a structured interaction flow.

✅ Simple Implementation – Easy to model and code.
✅ Error Handling – Prevents invalid transitions.
✅ Scalability – Can be extended for complex applications.
7. Limitations of FSM in HCI

❌ State Explosion – Large systems have too many states, making FSM complex.
❌ Lack of Flexibility – Hard to handle unstructured conversations like natural language.
❌ Manual Updates Required – Every new feature may require FSM modifications.

8. Conclusion

FSM is a powerful tool for designing structured, rule-based interactions in HCI. By modeling
user actions, system states, and transitions, FSM helps create intuitive and predictable
interfaces in software applications. Despite its limitations, FSM remains a fundamental concept
in UI/UX design, AI chatbots, gaming, and automated systems.

📌 Exam Tips:

 Explain FSM with real-world examples (login system, ATM, chatbot, etc.)
 Draw an FSM diagram to showcase state transitions.
 Compare FSM with other models (like Augmented Transition Networks).

Would you like a coding example of FSM implementation in Java/Kotlin for your college
project? 🚀

Design Using FSM, Statecharts, and Petri Nets in Dialog Design in HCI
1. Introduction to Dialog Design in HCI

In Human-Computer Interaction (HCI), dialog design focuses on structuring the interaction

between users and systems. FSMs, Statecharts, and Petri Nets help in designing predictable,
structured, and efficient user dialogs.

For example, voice assistants, chatbot conversations, ATM interactions, and GUI navigation
all require a well-defined dialog structure.

2. Finite State Machines (FSM) in Dialog Design

What is FSM?
A Finite State Machine (FSM) is a mathematical model used to design systems that transition
between a finite number of states based on user actions.

FSM Components

1️⃣ States – Represent different system conditions.

2️⃣ Transitions – Define state changes based on user actions.
3️⃣ Inputs – User actions that trigger state transitions.
4️⃣ Outputs – System responses to user actions.
5️⃣ Initial State – The starting state of the system.
6️⃣ Final State – Optional end state of the interaction.

FSM in Dialog Design Example: ATM Interface

Current State User Action (Input) Next State System Response (Output)

Start (Idle) Insert Card Request PIN Prompt user for PIN

Request PIN Enter correct PIN Show Menu Display account options

Request PIN Enter wrong PIN (3x) Locked Display "Account Locked"

Show Menu Select "Withdraw Cash" Enter Amount Ask for withdrawal amount

Enter Amount Enter valid amount Dispense Cash Give cash and show balance

Enter Amount Insufficient Balance Show Menu Display "Insufficient Funds"

FSM Diagram for ATM Interaction

↘ [Wrong PIN 3x] → (Locked)

(Start) → [Insert Card] → (Request PIN) → [Correct PIN] → (Show Menu)

(Show Menu) → [Withdraw Cash] → (Enter Amount) → [Valid] → (Dispense Cash)

(Enter Amount) → [Insufficient Balance] → (Show Menu)

✅ FSM ensures:
✔ A structured user interaction.
✔ Prevents unexpected behavior (e.g., blocking access after incorrect PINs).

3. Statecharts in Dialog Design

What are Statecharts?

Statecharts extend FSMs by introducing:
✔ Hierarchical states – A state can contain sub-states.
✔ Parallel states – Multiple states active at the same time.
✔ History states – Remember previous state after returning from another.

Advantages of Statecharts over FSM

✅ Reduces Complexity – Avoids FSM’s state explosion problem in large systems.

✅ Models Concurrent States – Useful for multitasking applications.
✅ Supports Event Handling – Useful in interactive dialogs.

Example: Chatbot Dialog Design Using Statecharts

State User Action (Event) Next State

Start (Idle) User says "Hello" Greeting

Greeting "I need help" Asking Help

Asking Help User selects "Billing Issue" Billing Support

Asking Help User selects "Technical Issue" Tech Support

Billing Support User asks about "Refund" Refund Info

Tech Support User asks about "Internet Speed" Speed Test

Statechart Representation

 Main State: Chatbot

o Sub-state: Greeting
o Sub-state: Asking Help → Billing Support / Tech Support

✅ Key Benefits:
✔ Hierarchical Structure makes it scalable.
✔ Parallel States allow chatbot to handle multiple issues at once.
✔ History Feature ensures chatbot remembers previous conversations.

4. Classical Petri Nets in Dialog Design

What are Petri Nets?

A Petri Net is a graphical model used to represent concurrent, asynchronous, or parallel
processes in systems.

It consists of:
✔ Places (Circles, represent states)
✔ Transitions (Bars, represent actions or events)
✔ Tokens (Dots, represent information moving through the system)

Why Use Petri Nets in Dialog Design?

✅ Models concurrent dialogs (e.g., user filling a form while interacting with an assistant).
✅ Handles parallel interactions (e.g., chatbot answering multiple queries at once).
✅ Supports synchronization (e.g., verifying user input before allowing progress).

Example: Online Customer Support Chatbot Using Petri Nets

Scenario: A chatbot handling multiple customer requests simultaneously.

Petri Net Components:

1️⃣ Places (States):

 Start
 Receive Query
 Process Billing Request
 Process Technical Issue
 End

2️⃣ Transitions (Events):

 User submits a query

 System classifies request
 System provides response
 Conversation ends

3️⃣ Tokens (Data Flow):

 Each token represents a user query moving through the system.

Petri Net Diagram Representation

(Start) → (Receive Query) → [Billing Issue] → (Process Billing Request) →

↘ [Tech Issue] → (Process Tech Request) → (End)

(End)

📌 Key Takeaways:
  Parallel Processing: Handles multiple queries at the same time.
 Asynchronous Workflow: System processes different requests independently.
 Efficient Dialog Management: Prevents delays in chatbot response.

5. Comparison: FSM vs. Statecharts vs. Petri Nets in Dialog Design

Feature FSM Statecharts Petri Nets

Handles Complexity ❌ No ✅ Yes (Hierarchical) ✅ Yes (Concurrency)

Handles Parallel States ❌ No ✅ Yes ✅ Yes

Remembers Previous State

❌ No ✅ Yes ✅ Yes
(History)

Supports Asynchronous
❌ No ❌ Limited ✅ Yes
Actions

Simple Dialogs (Login, Chatbots, Interactive AI Assistants, Automated

Common Use Cases
ATM) Apps Systems

6. Conclusion

 FSM is ideal for simple, structured dialogs (e.g., login flow, ATM).
 Statecharts handle hierarchical and parallel states, making them great for chatbots and
interactive systems.
 Petri Nets model concurrent processes, making them ideal for AI-driven dialogs, automated
workflows, and real-time applications.

By understanding FSM, Statecharts, and Petri Nets, designers can build efficient, scalable,
and user-friendly interactions in HCI.