COMSATS UNIVERSITY ISLAMABAD,

ATTOCK CAMPUS

SUBMITTED BY: AQSA SHOAIB

REG. NO.: FA20-BSE-027
SEMESTER: 6-A
SUBJECT: HCI LAB ASSIGNMENT 02
DATE: OCT 13, 2023

LAB:03 Graded Tasks

 LAB Task 01:
Go the following interactive demo: http://fww.few.vu.nl/hci/interactive/fitts/ And perform the
instructed steps. When you are asked to click the targets, make at least 20~25 clicks before
proceedings to the next step. (Go to the next step only when it says click next whenever you are
ready) Report the times for each experiment in your lab report

Lab Task 2
You are creating a fitness app that will not only keep track of your fitness but also motivate you
to eat healthy and exercise. Do a PACT analysis of the fitness app. Discuss all the four parts of
PACT analysis in detail. Create a proper document and submit on teams

PACT Analysis: Fitness App

Our goal in designing this fitness app is to create a user-centered platform that not only tracks
fitness but also motivates users to adopt healthier eating habits and exercise. To ensure the
success of our app, we conducted a PACT analysis to understand the current context, identify
areas for improvement, and envision future scenarios. This analysis integrates various factors,
including People, Activities, Context, and Technologies (PACT), to guide our project.

People:
Accessibility for All:

 It is crucial to design the app to be accessible to people with disabilities, including those with
visibility impairments, color blindness, and physical challenges.
 Ensure that users of all cognitive abilities, from beginners to experts, can easily navigate and
benefit from the app.
 Consider the needs of users with varying levels of computer literacy, especially for those
considering a fitness journey for the first time.

Cognitive Abilities:

 Prioritize a user-friendly "see and click" interface to make interactions intuitive and
straightforward.
 Ensure that visually impaired users can access the app's information through audio descriptions
or Braille.
 Avoid using color combinations that may affect users with color blindness.

Physical Abilities:
 Address the needs of users with sight difficulties by allowing content magnification without
compromising quality.
 Consider providing audio information and descriptions for users who are partially or fully blind.
 Explore the possibility of providing information in Braille for users who prefer this tactile
format.

Activities:
User Activities:

 Plan for a range of user activities, from simple to complex, including tracking fitness progress,
engaging in forums and blogs, sharing pictures, exploring available tours, and using a search
function.

Temporal Aspects:

 Consider the frequency of user activities, such as daily fitness tracking and periodic blog
interactions.
 Optimize the app's response time to ensure fast and efficient performance, even with slow
internet connections.

Nature of Content:

 Choose a user-friendly font and size for textual information.

 Design visually appealing content with user-friendly color schemes.

Context:
Physical Environment:

 Account for users accessing the app in various physical environments, including places with
slow internet access.
 Ensure the app is resilient to network challenges and slow download times.

Usage Context:

 Anticipate users accessing the app from diverse locations like home, workplaces, educational
institutions, or internet cafes.
 Make the app compatible with different resolutions, operating systems, color depths, platforms,
and browsers.

Technologies:
Interaction and Data Handling:
 Implement various interaction styles to accommodate user preferences and needs.
 Ensure that the app efficiently handles and processes a variety of data related to fitness tracking,
nutrition, and user profiles.

Platform Compatibility:

 Make the app available on multiple platforms (e.g., Windows, Macintosh) to reach a broader user
base.

LAB:04 Graded Tasks

Lab Task 1
Use the following checklist and evaluate the accessibility of any website of your choice.
Summarize your findings https://usability.yale.edu/web-accessibility/articles/wcag2-checklist

Website name : Amazon.com

1. Alt Text for Images

 Most images have appropriate alt text, providing essential descriptions.
 Recommendation: Ensure that all images, especially those conveying meaningful content,
have descriptive alt text.

2. Transcripts and Audio Descriptions:

 Video content is well-captioned.
 Recommendation: Ensure that video content also includes audio descriptions where
necessary.

3. Semantic Markup:
 The website uses semantic HTML elements appropriately.
 Recommendation: Continue using semantic markup and ARIA landmarks for enhanced
accessibility.

4. Color Use:
 Color is not the sole means of conveying information.
 Recommendation: Confirm that links are distinguishable through non-color cues, and
ensure that required form fields are programmatically and visually indicated.

5. Keyboard Navigation:
 Website functionality is accessible via keyboard navigation.
 Recommendation: Test for specific keyboard interactions for complex elements and
ensure all are accessible.
6. Custom Widgets:
 Custom widgets are used appropriately, and ARIA attributes are utilized effectively.
 Recommendation: Maintain the correct use of ARIA for enhanced accessibility.

7. Status Messages:
 Status messages are conveyed to screen reader users using ARIA live regions.
 Recommendation: Continue using ARIA live regions for conveying status updates.

Lab Task 2

Andriod has the following accessibility checklist. Use this list to evaluate the accessibility of
Careem/Uber/InDrive and write down your findings.
https://stuff.mit.edu/afs/sipb/project/android/docs/guide/topics/ui/acc essibility/checklist.html

Accessibility evaluation of Careem

1. Labels and Descriptions:

 Some buttons and icons in the app don't have clear labels. This can be confusing for users
who rely on screen readers. It's like having buttons without names.
 Adding clear and descriptive labels to these elements is essential so that everyone can
understand their purpose.

2. Getting Around:
 Navigating the app using touch or keyboard controls seems okay, but there's room for
improvement.
 The order in which the app focuses on elements can be made more logical, making it
easier for users to interact with.

3. Custom Controls:
 The app uses some custom controls. While these can be cool, I couldn't be sure if they
fully support accessibility features or provide descriptions.
 Making these custom controls accessible is vital for a better user experience.

4. Sound and More:

 The app does use sound to give feedback, but it's crucial to have a backup for users who
can't hear the sound.
 Adding visual or touch feedback in addition to sound alerts is a must.

5. Decorative images and graphics:

Decorative elements that don't provide content or enable user actions should not have
accessibility content descriptions.