21AI038 HUMAN COMPUTER INTERACTION

Questions

Consider Two gaming apps

Figure A1.1: Two gaming apps

(i) Following is a similar set of guidelines available from the Nokia developer’s home page:
1. Enable shortcuts (e.g., hot keys) for frequently used functions
2. Keep the user informed of his or her actions
3. Follow the device’s (vendor’s) interface patterns (positioning of the buttons and menus).
Based on the guidelines identify the similarities in a and b of Figure A1.1

Enable shortcuts:
● Both apps have shortcuts for frequently used actions, such as a prominent "Play" button
in app (b) and "Game Start" in app (a), enabling users to begin gameplay quickly without
navigating through multiple menus.
Keep the user informed of actions:

● App (a) uses labels like "Welcome Challenge" and clear buttons like "Log Out" to inform
users of their current options and actions.
● App (b) uses clear options like "Play" and visual indicators to keep users updated about
their choices.

Follow the device's interface patterns:

● Both apps follow standard interface designs, with buttons such as "Settings" and menus
placed in familiar locations (e.g., bottom or top-right).
● Key actions like "Play" or "Game Start" are centrally positioned, adhering to intuitive
patterns.

(ii) Identify the changes to be made in the apps to make it more appealing. For example: reduce
menu size

● Reduce menu size.

● Enhance visual design.
● Simplify navigation.
● Add personalization options.
● Provide tutorials or tooltips.
● Optimize screen layout.
● Add multilingual support.

iii) Based on the guidelines given by nokia predict the guidelines to be followed while developing a
mobile app for chatting.
 ● Enable shortcuts for frequently used functions.
● Keep the user informed with status indicators like "Typing..." or "Message
Delivered."
● Follow familiar interface patterns, e.g., chat bubbles and bottom-placed controls.
● Add customization options for themes, fonts, and notifications.
● Optimize for accessibility with a clean, intuitive design

Imagine that you are watching a video on TV, turn down the volume and observe the non-verbal
behavior as the actor often exaggerate their gestures and facial expressions to convey their emotions.
It is easy to understand what kind of scene is happening from the actors posture, body movements,
gestures and facial expressions.
(i) Identify the method by which people compensate non-verbal communication during online chats

In online chats, people use emojis, GIFs, stickers, and text formatting (e.g., bold or

excitement or hesitation, People use smileys 😊, sad faces 😢

uppercase letters) to express emotions and tone. Punctuation like "!!!" or "..." can convey
, or other emojis to show their
feelings.while memes or images add humor or context. These methods mimic gestures, facial
expressions, and tone, helping to compensate for the lack of non-verbal cues.

(ii) Say true or false and indicate the reason

Statement True/False Reason
Direct manipulation refers to direct interaction True Direct manipulation refers to
with information objects interacting with object on
the screen, like dragging
and clicking
Contextual environment is based on how False Contextual environment is
humans perceive interfaces as super real about settings in which
interface is used.
Super real is the interface in which locating False Super real refers to an
themselves in space and time immersive experience,
making the user feel like
they are part of the virtual
world.

Consider you are working on a project “Eduplay” an interactive education app that combines games
with learning materials for young children aged 5 to 10.
(i) Consider the scenario and identify the team members involved in the process
Project Manager
Educational Content Experts
UX/UI Designers
App Developers
Quality Assurance Testers
Marketing Team
Psychologists/Child Development Experts
Customer Support Team

(ii) Collaborative communication model can be used in the scenario. Justify

The collaborative communication model is ideal in this scenario because the success of the
Eduplay app requires constant collaboration between different teams—content developers,
designers, and developers. Regular discussions, feedback, and sharing of ideas are essential to
make sure the app is educational, engaging, and user-friendly. Tools like Slack, Microsoft Teams,
or project management software such as Trello can facilitate this process by enabling real-time
collaboration, file sharing, and seamless communication across departments.

(iii) Identify the use of asynchronous communication used in the scenario given
Emails for project updates and feedback.
Project Management Tools (e.g., Trello, Jira) for task assignments and progress tracking.
Recorded Videos/Voice Messages for sharing instructions or feedback.
 Online Collaboration Platforms (e.g., Google Docs) for document updates and contributions.

You are designing a mobile app that helps users navigate through a large shopping mall. The app
provides information such as store locations, promotions and event schedules
- To ensure users can easily find their way around the mall clear and simple navigation tools like
maps, interactive floor plans can be used
- Applying principles like feedback (eg. Vibrate or auditory cues when arriving at a location) and
affordance ( buttons/ icons should look tappable) will ensure the app is intuitive and user
friendly.
(i) Consider the scenario and predict the method to incorporate personalization to an app which
track health fitness.
Allow users to set personal goals (e.g., weight loss, step count, or workout duration).
Provide customized workout plans and meal suggestions based on user preferences,
fitness level, and health data.
Track and analyze individual progress metrics (e.g., calories burned, heart rate) to
offer tailored feedback.
Use push notifications to remind users about workouts or encourage them to stay
active.

(ii) Identify the challenges to face while developing a health app. For example: getting personal
information
Ensuring data privacy and security.
Obtaining user trust for sharing personal information.
Meeting regulatory compliance (e.g., HIPAA, GDPR).
Ensuring accuracy of data from devices.
Maintaining user engagement.
Integrating with various health devices.
Managing development costs.

(iii) While developing a smart home system predict the ways to provide seamless and intuitive
experience to users
Personalized Automation: AI learns routines to adjust lighting, temperature, and appliances.
Voice/Gesture Control: Integrate with Alexa/Google Assistant; enable gestures for device
control.
Unified Hub: Single app for managing all devices, easy pairing, and third-party integration.
Proactive Notifications: Alerts for security, energy savings, or weather-related reminders.
User-Friendly Interfaces: Simple controls, clear visuals, and tutorials for all users.
Energy Management: Track usage and provide efficiency tips.

Figure E2.1: HCI design process

(i) Identify the missing steps A,B,C of Figure E2.1
 (ii) Identify different phases of interfaces in Figure E2.1

(iii) Find A, B, C, D in the table with suitable areas of usage, first one is given:
Hardware interface selection options Suite area
Desktop Office related tasks
Smart phones Simple and short task
Kiosks Public user and installations
LCD Display
Virtual Reality Spatial Training, immersive entertainment

NEXT SET
1 You have been tasked with designing a voice activated smart home control system for people with
physical disabilities, specifically those with limited mobility. The system will allow users to control
household appliances, lights, doors and entertainment systems using voice commands. The system will
also need to support various accessibility features such as speech recognition for different accents,
speech impairments and background noise interference. Additionally the system will integrate with a
mobile app that allows caregivers to monitor and control the home environment remotely. The voice
commands need to be intuitive and adaptable allowing users to perform complex actions like “dim the
lights and turn on the TV” or “lock all the doors and set the alarm”. The system should also provide
feedback in the form of visual or auditory responses, like notifications when commands are successfully
executed or when errors occur.
(i) The error handling and feedback for the above scenario can be done by:
- Real time feedback when command is not understood or ambiguous
- For visually impaired auditory responses
- For hearing impaired visual responses
- Able to do undo actions quickly
 Similarly identify the methods to apply privacy and security to the above given scenario

Use voice authentication to recognize authorized users.

Ensure end-to-end encryption for all data transmissions.
Implement privacy controls to let users restrict access to specific features or data.
Log and notify users of unauthorized access attempts.
Regularly update the system with security patches.

(ii) To deal with the background noise we can implement a wake word. Predict alternative method for
background noise prevention
Use multi-microphone arrays for noise cancellation.
Incorporate beamforming microphones to focus on user speech.
Implement machine learning algorithms to filter background noise.
Enable a manual activation option like a button press on the mobile app to bypass noise issues.

(iii) With reference to the above scenario, identify the steps to be taken for failure management in
critical situations like short circuit

● Emergency Notifications.
● Fall back system.
● Auto shutdown.
● Diagnostics and Alerts
● Integration with emergency Services.

2 Consider the below interaction Design Process diagram,

Figure B2.1 Interaction Design Process

(i)

Network of screens for add/ remove user is given in the above figure. Similarly identify network
screen for “message”
(ii)

Consider (i) and (ii) and predict Space to highlight “A”

 iii

Managing multiple columns in interactive system is given. Similarly identify the methods for
managing list of names

1 In GOMS models there are two methods CLOSE_METHOD and L7_METHOD

(i) Consider the scenario and develop GOMS function for photocopy paper.
 .

(ii) The CCT model works on production rule as given:

Find the missing statement

DO-KEYSTROKE ‘K’

(iii) Identify the GOMS model for getting money from ATM with CLOSE METHOD and L7 METHOD

○ Goal: Withdraw cash from ATM.

○ Operators:
■ Insert ATM card.
■ Enter PIN (via keypad - L7_METHOD).
■ Navigate options and select "Withdraw Money."
■ Enter withdrawal amount.
■ Confirm and collect money.
■ Remove card (using CLOSE_METHOD to finalize and eject).

3 A large e-commerce platform has introduced new features to enhance the shopping experience. These
features include inlays for providing additional product details and overlays for important notifications,
recommendations, and shopping cart updates.
Inlays:
When a user browses a product category (e.g., smartphones), small inlay popups appear when the
user hovers over or taps on a product thumbnail. These inlays show quick product specifications like
price, average rating, and key features. Users can choose to expand the inlay to reveal additional details
such as product comparisons, availability in nearby stores, or user reviews.
Overlays:
 The platform also uses overlays to notify users of time-sensitive information, such as flash sales,
limited stock warnings, and cart reminders. These overlays appear at the top or bottom of the screen and
can be dismissed with a swipe or close button. If a user is idle on the platform for a certain amount of
time, an overlay may suggest items based on their browsing history. Overlays also inform users when a
product in their cart is about to sell out or when prices drop for a product they viewed earlier.

(i) Identify the inlays and overlays in a banking website

Inlays:
★ Provide mini summaries like account balance, recent transactions, or loan details on
hover.
★ Tooltips can also guide users by offering contextual help for form fields or inputs.

Overlays:
★ Display urgent alerts like low balance or downtime warnings to ensure user awareness.
★ They can also highlight promotional offers, such as cashback deals or limited-time loan
offers.

(ii) A user is searching for a new smartphone in a platform. As they scroll through the list, they hover
over a product, triggering an inlay that provides a quick glance at key specs like battery life,
camera quality, and price. The user clicks on the inlay to view a product comparison with other
smartphones in the same price range.
Identify the method to give notification to user on a sudden flash sale on the same product

The most effective method would be to use an overlay notification. This overlay can appear
prominently, either at the top or center of the screen, with a clear call-to-action (CTA). The overlay
can include:

● A banner displaying "Flash Sale: [Product Name] now 20% off for the next 30 minutes!"
● A countdown timer to create urgency.
● A "Shop Now" or "Add to Cart" button that redirects users to the product page.

(iii) Identify the overlays used in a ecommerce website

Flash sale notifications with timers.

Low stock or price drop alerts.
Cart reminders or idle user suggestions.
Confirmation messages.

Figure E2.1: Mobile ecosystem

(i) Different types of Earcons are given below. Name of the first one is given. Identify the names of
other earcons A,B,C
(ii) Classify the following into Augmentation tools, meeting rooms, sharing surfaces:
VideoWhiteboard, TeamWorkStation, Xerox PARC’s CoLab, Capture Lab, IBIS, gIBIS

Augmentation Tools
● IBIS
● gIBIS

Meeting Rooms
● Xerox PARC’s CoLab
 ● Capture Lab

Sharing Surfaces
● VideoWhiteboard
● TeamWorkStation

(iii)

Figure E2.2: Groupware in the time/space matrix

Identify the missing blocks A,B,C,D in the Figure E2.2