HCI Assignment 2 Final Document
HCI Assignment 2 Final Document
1
Contents
1.Introduction ......................................................................................................................................... 4
1.1. Overview of the App’s Purpose ................................................................................................... 4
1.1.1. Mobile Train Ticket Booking and Tracking Platform ............................................................. 4
1.1.2. Key Features for User-Friendliness and Accessibility............................................................ 4
1.2. Importance of Inclusive and Accessible Design ........................................................................... 5
2. Research on Diverse User Groups....................................................................................................... 6
2.1. User Groups Considered .............................................................................................................. 6
2.1.1. Beginners .............................................................................................................................. 6
2.1.2 Intermediate Users ................................................................................................................ 6
2.1.3 Advanced Users...................................................................................................................... 6
2.1.4 Users with Disabilities ............................................................................................................ 6
2.2 Accessibility Needs of Users with Disabilities ............................................................................... 7
2.2.1 Visually Impaired Users .......................................................................................................... 7
2.2.2 Hearing-Impaired Users ......................................................................................................... 7
2.2.3 Mobility-Impaired Users ........................................................................................................ 7
2.2.4 Cognitively Impaired Users .................................................................................................... 7
2.3 Inclusivity Considerations for Non-Disabled Users ....................................................................... 7
2.3.1 Elderly Users........................................................................................................................... 7
2.3.2 Tourists/Non-Native Speakers ............................................................................................... 8
2.3.3 Users with Low Digital Literacy .............................................................................................. 8
3.Personas and User Scenarios Simply ................................................................................................... 9
3.1 persona 1 ...................................................................................................................................... 9
3.2 Persona 2 ...................................................................................................................................... 9
3.3 Persona 3 .................................................................................................................................... 10
3.4 Persona 4 .................................................................................................................................... 10
3.5 Persona 5 .................................................................................................................................... 11
4.Inclusive and Accessible Design ......................................................................................................... 12
4.1 Key Design Features for Accessibility .......................................................................................... 12
4.1.1 Screen Reader Compatibility................................................................................................ 12
4.1.2 High Contrast Mode for Visually Impaired Users................................................................. 12
4.1.3 Keyboard Navigation and Voice Commands ........................................................................ 12
4.1.4 Multimodal Notifications (Visual, Auditory, and Haptic Feedback)..................................... 12
4.1.5 Adjustable Text Sizes for Users with Visual and Cognitive Impairments ............................. 12
4.2 Designing for Inclusivity .............................................................................................................. 13
4.2.1 Simple Navigation for Beginners .......................................................................................... 13
2
4.2.2 Detailed Options for Advanced Users .................................................................................. 13
4.2.3 Multilingual Support for Non-Native Speakers .................................................................... 13
5.Application Features (User Interface) ................................................................................................ 14
5.1 Booking Process .......................................................................................................................... 14
5.2 Live Train Updates....................................................................................................................... 14
5.3 E-Ticket Management ................................................................................................................. 15
5.4 Notifications ................................................................................................................................ 15
5.5 Seat Tracking ............................................................................................................................... 16
6.Colors and Visual Design .................................................................................................................... 17
6.1. Color Palette for User Interface (UI) Design .............................................................................. 17
6.1.1.High Contrast for Readability ............................................................................................... 17
6.1.2.Neutral Colors and Accessibility for Color-Blind Users ........................................................ 17
6.2.Justification for Color Choices..................................................................................................... 18
7.High-Fidelity Prototype ...................................................................................................................... 19
7.1 Overview of the Prototype Design .............................................................................................. 19
7.2 Key Screens and Interactions ...................................................................................................... 20
7.2.1 Booking Page ........................................................................................................................ 20
7.2.2 Live Train Updates Screen .................................................................................................... 21
7.2.3 E-Ticket Page ........................................................................................................................ 21
7.2.4 Seat Tracking Interface........................................................................................................ 22
7.3 Accessibility Features in the Prototype (Figma) ......................................................................... 22
8.Conclusion .......................................................................................................................................... 23
3
1.Introduction
4
3. QR Code E-Ticket
• Instant Access to E-Tickets: After a successful booking, the app generates a QR code
that serves as the user’s e-ticket. This code is stored within the app and can be
accessed anytime.
• Paperless and Contactless Boarding: At the station, users simply show their QR code
at designated scanning points for entry, eliminating the need for printed tickets.
• Offline Availability: The e-ticket QR code is available even without an internet
connection, ensuring users can access it in areas with poor network coverage.
• Older Users: Simple navigation, large buttons, and clear text ensure the app is easy to use
for people who may not be tech-savvy.
• People with Disabilities: Features like voice commands and adjustable font sizes make the
app accessible for users with visual impairments or other disabilities.
• Color-Blind Users: The app avoids using color as the only way to convey information, making
it usable for people with color blindness.
5
By focusing on inclusivity, T-Easy Pay ensures that anyone, regardless of age, ability, or technical
knowledge, can easily book train tickets and manage their trips.
• Design Considerations:
o Easy Navigation: The app uses clear, large icons and minimalistic menus, helping
first-time users find their way without confusion.
o Onboarding Help: The initial screens, like the "Register" and "Log in" pages in
design, include clear prompts and tooltips guiding users through account creation
and booking steps.
• Design Considerations:
o Quick Access: The app provides shortcuts for frequent actions like booking, viewing
trips, and accessing e-tickets, which cater to intermediate users who need efficiency.
• Design Considerations:
o Advanced Filtering and Options: These users will appreciate the ability to filter train
schedules or sort trips based on travel times or seat availability, visible in the
"Booking" pages.
o Voice Commands: The app's voice command feature helps advanced users book
tickets quickly, enhancing productivity.
• Design Considerations:
o Assistive Technologies: The app is compatible with screen readers and has features
like high-contrast text and voice commands for users with limited mobility or vision.
6
2.2 Accessibility Needs of Users with Disabilities
2.2.1 Visually Impaired Users
• Overview: Users with partial or complete vision impairment may require assistance in
navigating the app.
• Design Considerations:
o Dark Mode & High Contrast: The app's dark mode (seen in "App Settings")
reduces eye strain, while high-contrast colors, like yellow for key buttons,
ensure that text and icons stand out.
o Screen Reader Compatibility: The app's interface is designed with screen reader
support, making it accessible for blind users.
• Design Considerations:
o Visual Notifications: Instead of relying on sound alerts, the app uses banner
notifications and vibration to notify users of train updates or e-ticket availability.
• Design Considerations:
o Large Touch Areas: The app uses large, easily tappable buttons for primary
functions, such as the "Search Train" button on the booking page.
• Design Considerations:
o Simple and Consistent Layout: The app follows a consistent layout across
screens, with easily recognizable icons and color coding for different tasks (e.g.,
red for "Download" and blue for "Share" in the e-ticket page).
o Step-by-Step Assistance: Booking processes are broken down into clear, simple
steps, reducing cognitive load.
• Design Considerations:
7
o Large Text and Icons: The font size adjustment options in "App Settings" cater to
elderly users who need larger text.
o Simplified Navigation: Key tasks like booking and checking trips are available on
the home screen, reducing the need for extensive navigation.
• Design Considerations:
o Multilingual Support: The app offers language options like Sinhala, Tamil, and
English, as seen in the "App Language" setting.
o Visual Cues: The app uses clear icons (such as a train symbol for bookings and a
QR code for e-tickets) to help non-native speakers understand the app without
relying on language.
• Design Considerations:
o Minimalist Design: The use of a clean and simple interface (as seen in the
"Home" and "Booking" pages) prevents overwhelming users with too much
information.
8
3.Personas and User Scenarios Simply
3.1 persona 1
3.2 Persona 2
9
3.3 Persona 3
• Scenario: Pavani is
commuting to a business
meeting and needs to quickly
book a ticket.
• Goal: Find the earliest
train and book efficiently on
the go.
• Outcome: Pavani books
her ticket within minutes and
makes it to her meeting on
time.
3.4 Persona 4
10
3.5 Persona 5
Sarah (Mother with Toddler)
11
4.Inclusive and Accessible Design
4.1 Key Design Features for Accessibility
4.1.1 Screen Reader Compatibility
• Overview: Screen reader compatibility ensures that visually impaired users can navigate
and interact with the app through auditory feedback.
• Implementation in T-Easy Pay: The app supports screen readers by having properly
labeled UI elements (like buttons, fields, and icons). For example, important buttons
such as "Search Train" and "Checkout" are tagged with descriptive text, enabling users
to understand their functions without needing to see the screen. This is particularly
helpful for blind users during the booking process or when viewing their trip details.
• Implementation in T-Easy Pay: The app's color scheme includes bright yellow (#D7AC00)
for key elements such as buttons and dark text on a light background, ensuring optimal
contrast for users with low vision. This color palette, seen on multiple screens like the
booking and profile sections, helps visually impaired users navigate the app with ease.
• Implementation in T-Easy Pay: Voice command support enables users to search for
trains, check trip details, or book tickets without using their hands. This is ideal for users
with motor impairments, and the app’s voice command feature integrates with
accessibility tools to enhance usability.
• Implementation in T-Easy Pay: For example, when users receive updates about train
schedules or booking confirmations, the app provides visual cues (banner notifications),
auditory alerts, and vibrations (haptic feedback). This ensures that users with hearing or
visual impairments are notified about important updates, regardless of their specific
sensory limitations.
4.1.5 Adjustable Text Sizes for Users with Visual and Cognitive Impairments
• Overview: Adjustable text size is crucial for users with visual impairments or cognitive
disabilities, allowing them to comfortably read the content.
• Implementation in T-Easy Pay: In the "App Settings" page, users can customize text size
to suit their needs. This feature ensures that visually impaired users can increase text
readability, while users with cognitive disabilities can simplify the interface for easier
comprehension.
12
4.2 Designing for Inclusivity
13
5.Application Features (User Interface)
14
5.3 E-Ticket Management
5.4 Notifications
• Overview: Notifications are used to alert users about key events like booking confirmations,
train delays, or upcoming trips.
• Implementation in T-Easy Pay: Users receive both in-app notifications and push
notifications for updates such as train schedules, payment confirmation, and seat
availability. These notifications can be customized in the app’s settings, allowing users to
choose between visual, auditory, and haptic alerts. For example, users can set banner
notifications or vibration alerts for critical updates like last-minute platform changes. This
multimodal approach ensures that notifications reach users effectively, regardless of their
personal preferences or accessibility needs.
15
5.5 Seat Tracking
16
6.Colors and Visual Design
6.1. Color Palette for User Interface (UI) Design
The color palette plays a crucial role in the user interface design of the T-Easy Pay train
ticket booking application. By leveraging a balanced combination of contrast and neutral
tones, we ensure both visual appeal and usability. Below are the considerations taken into
account while defining the color palette:
6.1.1.High Contrast for Readability
Primary Color (#D7AC00 - Warm Yellow):
• Used for primary actions like buttons (e.g., "Save", "Add to Cart") and highlights throughout
the app.
• This yellow color stands out on both dark and light backgrounds, ensuring that important
actions and elements are always visible.
Secondary Colors:
• Black (#000000) and Dark Grey (#333333) for text and icons on lighter backgrounds.
• These darker colors provide high contrast with the background, improving readability of
content like navigation text, headers, and body text.
Background Colors:
• White (#FFFFFF) and Light Grey (#F1F1F1) are used as the background for most sections,
especially for cards, forms, and lists. This ensures that the primary yellow and black
elements remain highly readable and distinct against these neutral tones.
• Ensures that key elements like buttons, notifications, and form inputs are immediately
distinguishable.
• Makes the interface more accessible for users with low vision or those using the app in
bright light environments.
• Shades of Grey (#F1F1F1, #C0C0C0) are used for less important elements like borders and
dividers.
• These neutral tones help maintain a clean and minimalist design, avoiding overwhelming the
user with excessive color saturation.
• Red-green color blindness is the most common form of color blindness. Therefore, the
primary color palette avoids red and green combinations as critical differentiators.
17
• Instead, we use black and yellow, which are distinct and accessible to most users, including
those with color vision deficiencies.
• For important actions (e.g., confirmation or error states), additional elements such as icons
and text descriptions are employed to complement color-based information, ensuring that
users with color blindness can still understand the context.
Impact on Accessibility:
• The use of neutral and accessible colors ensures that all users, regardless of their vision
abilities, can easily navigate the app and interact with key elements.
• By combining both color and text to communicate important information, the app provides
an inclusive experience for users who may have trouble distinguishing between certain
colors.
o This shade of yellow is vibrant and friendly, which aligns with the app’s mission to
make train ticket booking quick and hassle-free. The color is also reminiscent of train
ticket counters and information signs, adding a subtle connection to the context of
train travel.
o These are used for text and key icons to ensure readability across various screen
sizes. Black and dark grey provide excellent contrast against the white and light grey
backgrounds, ensuring that textual information remains clear, especially in list
views, buttons, and navigation elements.
o These colors are used for background areas and secondary UI elements to provide a
clean, professional look while maintaining high readability of the primary text and
button elements.
• Additional Justification:
o The palette balances vibrancy and simplicity, ensuring a modern design that appeals
to a broad user base while maintaining functional clarity.
o High contrast between text and background enhances readability for all users,
making the app functional even in less-than-ideal lighting conditions (e.g., outdoors).
18
7.High-Fidelity Prototype
7.1 Overview of the Prototype Design
The interface of the prototype, T-easy pay, in focus, has a well-defined structure and a simple
approach to the booking of train tickets, which is aimed at different groups of users and comprises a
number of functions. The prototype is designed in a way to provide intuitive navigation and
interaction to the users right from creating the account, booking the ticket, to tracking the user’s
travels.
19
7.2 Key Screens and Interactions
Features: Train route search bar, date selection, passenger details box, seat selection, payment
(credit card and other).
User Flow: User enters the start journey and end journey. Then he clicks on search button. Schedule
is shown and user clicks the button showing view seats. He selects the seat, and click on proceed to
pay button. After that he gets e-ticket confirmation.
Interactions: Make interactions clear and responsive. Validate and handle errors in input fields.
20
7.2.2 Live Train Updates Screen
21
7.2.4 Seat Tracking Interface
Compliance: Hard to say from the images, but ideally the prototype meets accessibility
guidelines like WCAG.
Features: Think about including functionalities like high-contrast mode, keyboard navigation
and screen-reader compatible.
Testing - it is important to test the application/application feature in association with
assistive technology to make sure that it works for user with disability.
22
8.Conclusion
In conclusion, the T-easy Pay app exemplifies the importance of inclusive and accessible
design in modern mobile applications. By considering the diverse needs of users, from
beginners to advanced users, as well as individuals with disabilities, the app ensures that
everyone can easily book train tickets, access real-time updates, and manage their journeys
without unnecessary complications. The research into user groups, including elderly users,
tourists, and individuals with varying levels of digital literacy, has informed a design that is
both intuitive and robust.
Key accessibility features such as screen reader compatibility, high contrast mode, and
adjustable text sizes reflect the app's commitment to inclusivity. In addition, the multimodal
notifications and keyboard navigation ensure that users with different abilities can navigate
and interact with the app smoothly. The use of a color palette optimized for readability and
accessibility further enhances the overall user experience, making T-easy Pay a
comprehensive solution for a wide range of users.
The high-fidelity prototype brings these design principles to life, showcasing a seamless
booking process, real-time updates, e-ticket management, and seat tracking interfaces that
prioritize ease of use and accessibility. By focusing on user-friendliness and adhering to
WCAG guidelines, the app is well-positioned to meet the needs of a broad audience,
promoting independent and confident use for all travelers.
Through thoughtful design and a commitment to inclusivity, T-easy Pay has successfully
created an application that not only meets technical requirements but also enhances the
travel experience for all users, regardless of their abilities or background.
Group BD Members
Student ID Name
28283 W.G.G.A.S.K. Dias
28838 M.A.A. Ruvinda
29020 M.N.J. Rifka
28837 S.T.R.K.R. Samarakkody
28586 Hettiarachchi .U.K.
28549 W.H.E.P. Wickramaarachchi
28921 M.F.F. Fazla
29091 N.V. Pasindu Piyumika
28923 T.L.A. Pavani Nisansala
28732 J. M. P. L. Jayasekara
28485 L.D. Ruwanthika
29021 K.K.D.C.D. Nawarathna
28472 H.U. Madubhashini
29181 P.K.D.B. Sandaruwanee
23