27 JULY 2023

INTRODUCTION TO
HUMANCOMPUTER
INTERACTION
Course Code CS202

PRESENTED TO:
LAKSHI MEGHOO

PRESENTED BY:

ALLYBUCCUS ADHEL 001977

ISAÏE CAMELLIA 001987
 Table of Contents

Background Study 03

About Us 04

REQUIREMENT ANALYSIS 05

Result and Survey 06

List funtional and non funtional of the website 07

LOW FIDELITY PROTOTYPE 08

HIGH FIDELITY PROTOTYPE 09

Accessibility and Usability Features 10-11

Evaluation TEST 12-14

Methods And Result of Evaluation 15

Conclusion and References 16-17

 DREAM CODE WEBSITE

Background
Study Learning to code presents an excellent opportunity for
children to enhance their problem-solving and critical
thinking abilities while fostering focus and organization to
successfully complete projects. Initially, coding often
involves drag-and-drop visual programming, where
EDUBLOCKS children connect blocks to create programs. This
approach imparts fundamental concepts without the
Edublocks aimed to make coding
need for typing or syntax, focusing instead on the
accessible and fun for learners by
underlying logic of the code. As they progress, children
providing a block-based
can transition to real-world programming languages such
programming interface. This
as Python, JavaScript, and C.
interface used visual blocks that
students could drag and drop to SCRATCH
create programs, eliminating the
Code Editor : Scratch offers a visual drag-and-drop interface
need to write code in a traditional
that allows users to build programs by combining various code
programming language. This
chunks. These building bricks stand in for a variety of
method is often called "block-based
programming ideas, including loops, conditions, variables, and
programming" or "visual
others.
programming."

The software offers a library of pre-made characters (referred to

The platform's primary audience
as sprites) and backgrounds that users can utilize in their
was educators, teachers, and
creations. Users can also make their own original sprites and
parents who wanted to introduce
backgrounds to give their projects a personal touch. Community
coding concepts to their students or
& Sharing: The Scratch community allows users to share their
children. It was designed to be user-
projects, which enhances creative thinking and collaboration.
friendly and suitable for beginners
Shared projects can be demonstrated, remixed, and
with little to no prior programming
commented on by other users, encouraging a positive
experience. The visual nature of
environment. Social Interaction: Scratch users are able to
block-based programming makes it
submit messages, follow other creators, and take part in
ideal for introducing programming
discussions, fostering a sense of community and encouraging
logic and concepts without the
mutual learning. Scratch offers a variety of tools, tutorials, and
complexities of syntax.
instructions to assist beginners and gradually advance their
KODABLE coding abilities. Online project storage enables users to access
their work from any device with an internet connection. All
Kodable is presented as a game,
projects are saved online.
often with cute characters and
engaging storylines. The goal is to
make the learning process
TYNKER
Tynker primarily focuses on introducing coding fundamentals to
enjoyable, encouraging kids to
children through games, riddles, and creative projects.
progress through various levels and
Young learners may drag and drop code blocks to build
challenges. The platform typically
programs using the platform’s visual programming interface,
uses a visual programming
which makes complex coding principles simple. Tynker is
language that allows children to
appropriate for children of diverse ages and experience levels
drag and drop blocks of code to
since it supports a variety of programming languages, including
create commands and solve
Python and Scratch-based block coding.
puzzles. This approach makes it
easy for kids to understand
Tynker provides a variety of instructional materials, such as
programming logic without needing
interactive courses, coding projects, and competitions. These
to type complex syntax.
tasks sometimes entail making interactive tales, games, and
animations, which aid students in using their coding abilities in
real-world situations.
DOCUMENTATION| PAGE 3
 DREAM CODE WEBSITE

About us
The purpose of a coding website for kids and teenagers is to introduce them to the
world of programming and computer science in a fun, interactive, and educational
way. Our objectives:

INTRODUCTION TO ⦁ PROMOTE
CODING CONCEPTS COMPUTATIONAL
THINKING
Dream Code aim is to introduce the
fundamental concepts of coding and Dream Code encourage the development of
programming in a simplified and age- computational thinking skills, such as
appropriate manner for kids and teenagers . problem-solving, logical reasoning, and
We use engaging and interactive activities algorithmic thinking.
to make learning enjoyable and accessible.

⦁ CREATIVITY AND ⦁ SELF-PACED LEARNIN

INNOVATION
By providing opportunities to build and
create their projects, Dream Code websites
foster creativity and innovation in children
and teenagers.
: Dream Code offer self-paced learning,
allowing kids and teenagers to progress at
their own speed. This flexibility
accommodates different learning styles and
ensures a positive learning experience.

⦁ DIVERSITY IN LEARNING
CONTENT
: this websites offer a variety of coding
languages and topics, allowing kids and
teenagers to explore different areas of
interest, such as game development, web
design, robotics, and more.

DOCUMENTATION | PAGE 4
 PROJECT PROPOSAL

REQUIREMENT
ANALYSIS
Surveys play a crucial role in gathering valuable feedback and insights from users of a coding
website.
Surveys help in understanding the specific needs and expectations of the users. It allows website
owners to identify what users are looking for, the kind of coding content they are interested in,
and the features they expect from the website.Surveys provide an opportunity for users to share
their feedback, suggestions, and grievances. This feedback is invaluable for identifying areas that
require improvement, such as user interface, content relevance, or feature enhancements.
Surveys help in evaluating the overall user experience of the coding website. By asking users
about their satisfaction levels and ease of use, website owners can identify areas where the user
experience can be enhanced. Surveys allow website owners to validate design decisions before
implementing major changes. Surveys can include questions about user demographics, such as
age, skill level, and coding interests. This data helps in understanding the website's target
audience better and tailoring content accordingly.

DOCUMENTATION| PAGE 5
 DREAM CODE WEBSITE

Result
and
Survey

DOCUMENTATION | PAGE 6
 DREAM CODE WEBSITE
List funtional and non
funtional of the
website
FUNCTIONAL
REQUIREMENTS:
User Registration and Login: Allow users to
create accounts and log in to access their
projects and profile.
Project Creation and Editing: Provide tools
and a user-friendly interface for users to
create, edit, and save their projects.
Dashboard: Provide a personalized
dashboard for each user to track progress,
view completed projects, and access
learning resources.
Coding Lessons: Offer interactive coding
lessons and tutorials suitable for different
age groups and skill levels.
Coding Environment: Provide a user-friendly
coding environment with drag-and-drop
features and a visual programming
interface.
Mobile Responsiveness: Ensure the website
is optimized for various screen sizes and
devices.
DOCUMENTATION | PAGE 7
NON -FUNCTIONAL
REQUIREMENTS:
Performance: The website should be
responsive and load quickly, even with a
large number of concurrent users.
Reliability: Ensure the website is stable, with
minimal downtime or errors.
Security: Implement proper user
authentication, data encryption, and
safeguards against potential vulnerabilities.
Usability: The interface should be intuitive,
making it easy for users of all ages to
navigate and create projects.
Accessibility: Ensure the website is
accessible to people with disabilities,
following relevant accessibility guidelines.
Browser Compatibility: Support various
modern web browsers to accommodate a
broad range of users.
Data Backup and Recovery: Regularly back
up user data and provide recovery options in
case of data loss.
Moderation and Content Management:
Implement content moderation to prevent
inappropriate content from being shared.
 PROJECT PROPOSAL

Low-fidelity wireframes are quick and easy to create,

making them ideal for brainstorming and exploring various
design concepts and layout ideas. They help in visualizing
the overall structure of the interface without getting
bogged down in detail. Since low-fidelity wireframes are
basic sketches or digital representations, they can be
created rapidly. This speed allows designers and
stakeholders to iterate quickly and make changes without
LOW FIDELITY investing too much time or resources.

PROTOTYPE Low-fidelity wireframes are easy to create and understand,

making them ideal for sharing and gathering feedback
from stakeholders, team members, or users. They facilitate
collaboration and enable early input, reducing the risk of
major changes later in the design process.Creating low-
fidelity wireframes is less time-consuming and resource-
intensive compared to high-fidelity designs. This makes
them a cost-effective way to explore multiple design
concepts before investing significant effort in detailed
visual designs.

DOCUMENTATION| PAGE 8
 PROJECT PROPOSAL

High-fidelity wireframes, on the other hand, are more

detailed and visually refined representations of the design.
They include elements like color schemes, typography,
images, and other visual assets. Here's why they are
important:
High-fidelity wireframes provide a more realistic
representation of the final product, helping stakeholders
HIGH FIDELITY and clients better visualize the end result. This can lead to
more informed decisions and reduce the risk of

PROTOTYPE misunderstandings during the development phase.With the

addition of visual elements, high-fidelity wireframes can be
used for usability testing and user experience evaluations.
They allow users to interact with a design closer to its final
form, providing more realistic feedback.By incorporating
visual branding elements, high-fidelity wireframes aid in
establishing design consistency throughout the project.
This consistency is crucial for building a cohesive user
experience and maintaining the brand's identity.

DOCUMENTATION| PAGE 9
 DREAM CODE WEBSITE

ACCESSIBILITY
FEATURES
Screen Reader Compatibility:
Test the website with popular screen readers (e.g., JAWS, NVDA, VoiceOver) to ensure the content
is properly read out and understandable.
Check that all images have appropriate alternative text (alt text) to convey their purpose and
meaning.

Contrast and Color Test:

Use color contrast checking tools to verify that text and other elements have sufficient contrast
to be readable by people with visual impairments.
Ensure that color is not the sole means of conveying information, and important information is
not conveyed solely through color cues.

Heading Structure:

Confirm that heading tags (h1, h2, h3, etc.) are used in a logical order to create a clear and
meaningful document structure.
Ensure that headings accurately describe the content they precede.

Semantic HTML Elements:

Check that semantic HTML elements (e.g., nav, main, article, section) are appropriately used to
define the structure and purpose of content.

Form Accessibility:
Validate that form elements have proper labels and instructions associated with them.
Ensure that error messages are provided for incorrectly filled form fields and that they are
identified clearly.

Responsive Design and Zoom Test:

Test the website's responsiveness to different screen sizes and orientations.
Verify that the website content remains usable and readable when zoomed in.

Browser and Assistive Technology Compatibility:

Test the website on different browsers and ensure compatibility with various assistive
technologies.

Skip Navigation Link:

Include a "skip to main content" link at the beginning of the page to allow users to jump directly to
the main content and bypass repetitive navigation elements.

DOCUMENTATION | PAGE 10
 DREAM CODE WEBSITE

USABILITY
FEATURES
Navigation and Site Structure: Evaluate the ease of navigation and the overall site structure. Can
users quickly find the information they need? Is the website's layout intuitive and organized?

Search Functionality: Test the effectiveness of the search feature. Can users find relevant coding
topics, tutorials, or projects easily using the search bar?

Registration and Login Process: Assess how smooth and straightforward the registration and
login process is for new and returning users.

Search Functionality: Test the effectiveness of the search feature. Can users find relevant coding
topics, tutorials, or projects easily using the search bar?

Registration and Login Process: Assess how smooth and straightforward the registration and
login process is for new and returning users.

Responsive Design: Test the website's responsiveness across different devices and screen sizes,
ensuring a seamless user experience on desktops, tablets, and mobile devices.

Error Handling and Validation: Check how the website handles errors, such as incorrect code
submissions or invalid inputs. Are error messages clear and informative?

Loading Times: Evaluate the loading times of pages and interactive elements. Slow loading times
can negatively impact the user experience.

Accessibility: Verify if the website meets accessibility standards, such as providing alternative text
for images and ensuring compatibility with screen readers.

Security Measures: Ensure that user data and accounts are adequately protected, and sensitive
information is handled securely.

DOCUMENTATION | PAGE 11
 PROJECT PROPOSAL

USABILITY Test
When conducting a usability testing evaluation of a coding website, it's
essential to follow a systematic approach to gather meaningful insights
and identify areas for improvement.

Define Testing Objectives: Clearly outline the goals and objectives of the
usability testing. What specific aspects of the coding website do you
want to evaluate?

Recruit Test Participants: Identify your target audience, which may

include coding beginners, intermediate learners, or experienced
developers.

Conduct the Usability Test: One-on-one testing is generally more

effective for usability evaluations. Observe participants as they interact
with the coding website, and encourage them to think aloud, explaining
their thought processes.

Gather Quantitative Data: Collect quantitative data, such as success

rates, task completion times, and user satisfaction ratings through
questionnaires or surveys.

Security Review: Evaluate the security measures implemented to

safeguard user data and accounts.

Accessibility Evaluation: Ensure that the website meets accessibility

standards, making it usable for all users, including those with
disabilities.

DOCUMENTATION| PAGE 12
 PROJECT PROPOSAL

Accessibility Test
Accessibility testing evaluation of a coding website is crucial to ensure that all
users, including those with disabilities, can access and use the website
effectively.

Accessibility Tools and Checkers: These tools automatically scan the website
for accessibility errors and provide detailed reports.

Screen Reader Testing: Use screen readers (e.g., NVDA, JAWS, VoiceOver) to
evaluate how users with visual impairments can navigate and understand the
website's content.

Alternative Text for Images: Check that all images have appropriate
alternative text (alt text) to provide a meaningful description for users who
cannot see them.

Color Contrast: Verify that the color contrast between text and background
elements meets the minimum requirements for readability, especially for users
with visual impairments.

Form Labels and Validation: Ensure that form fields have descriptive labels
and proper validation messages to assist users using screen readers or other
assistive technologies.

Semantic HTML: Confirm that the website's HTML is well-structured with proper
heading tags, lists, and semantic elements to enhance navigation for screen
reader users.

Resize and Zoom Testing: Test the website's responsiveness to screen resizing
and zooming to ensure that content remains accessible and readable at
different magnification levels.

Mobile Accessibility: Test the website's accessibility on mobile devices, ensuring

that it is usable on smartphones and tablets with assistive technologies.

DOCUMENTATION| PAGE 13
 PROJECT PROPOSAL

RESPONSIVE Test
Responsive testing evaluation of a coding website is essential to ensure that the website
functions and displays correctly across various devices and screen sizes.

Test on Different Devices: Use a variety of devices to test the website, including desktop
computers, laptops, tablets, and smartphones. This will help you assess how the website
adapts to different screen sizes and resolutions.

Orientation Testing: Test the website in both portrait and landscape orientations on
mobile devices. Check for any layout issues or elements overlapping when the screen
orientation changes.

Cross-Browser Testing: Test the website on different web browsers, such as Chrome,
Firefox, Safari, Edge, and Internet Explorer . Ensure that the website functions correctly
and looks consistent across all major browsers.

Font and Text Size: Verify that fonts and text are legible and do not become too small or
too large on different devices. Ensure that the text remains readable when the screen
size is adjusted.

Image and Media Optimization: Optimize images and media files for different screen
resolutions to improve loading times and user experience on mobile devices.

Forms and Input Fields: Check the functionality and layout of forms and input fields on
various devices. Ensure that users can enter information easily and that validation
messages are visible.

Navigation Testing: Test the website's navigation on mobile devices to ensure it is user-
friendly and easy to use with touch gestures.

Performance Testing: Evaluate the website's performance on different devices, checking

for any slow loading times or performance issues.

Consistency: Verify that the design elements, branding, and user interface remain
consistent across all devices.

User Testing: involving users in responsive testing to gather feedback on their experience
with the website on different devices.

DOCUMENTATION| PAGE 14
 DREAM CODE WEBSITE

Methods of Evaluation

To effectively evaluate the website we employ various methods and techniques that provide valuable
insights into its usability, functionality, and overall user experience.

Survey and Questionnaires: Distribute surveys or questionnaires to gather feedback from a larger
audience. Ask about user satisfaction, ease of use, and suggestions for improvements.

Task Analysis: Observe users as they perform specific coding tasks on the website to understand how
well the platform supports their workflow and learning process.

Performance Testing: Evaluate the website's loading times and responsiveness under different traffic
conditions to ensure it can handle peak usage.

Accessibility Testing: Check the website's compliance with accessibility guidelines to ensure it is usable
by people with disabilities.

User Feedback Analysis: Monitor user feedback and reviews from various sources (e.g., forums, social
media, app stores) to gain insights into user satisfaction and pain points.

Cross-Browser and Cross-Device Testing: Test the website on various browsers and devices to ensure
consistent functionality and display.

Code Review: Conduct a thorough code review to identify potential security vulnerabilities, bugs, or areas
for optimization.

Competitor Analysis: Evaluate competing coding websites to identify their strengths and weaknesses,
helping you position your website better.

DOCUMENTATION | PAGE 15
 DREAM CODE WEBSITE

CONCLUSION
In conclusion, our coding website proposal represents a comprehensive and compelling
vision for a platform that will revolutionize the way kids and teenagers engage with the
world of coding. With an emphasis on fostering creativity, innovation, and hands-on
learning, our website aims to inspire young minds and empower them to become the
tech leaders of tomorrow.

Through a user-centric approach, we will offer a wide range of interactive coding

tutorials, challenges, and projects, catering to learners of all skill levels and interests.
Our platform's self-paced learning environment will enable each individual to progress
at their own speed, building confidence and a strong foundation in coding principles.
The website's intuitive user interface and seamless navigation will ensure an enjoyable
and enriching experience for our young users, while responsive design guarantees
accessibility across various devices and screen sizes. Our commitment to accessibility
standards will make sure that every child, regardless of ability, can explore the exciting
world of coding.

Our coding website proposal is not just about teaching coding; it's about inspiring a
generation to think critically, solve problems creatively, and shape the future through
technology. Let's unlock the boundless potential of young minds and lead them on a
journey of discovery and innovation. Thank you for considering our proposal.

DOCUMENTATION | PAGE 16
 DREAM CODE WEBSITE

References
https://snap.berkeley.eduBernat Romagosa (2019). Snap!
Build Your Own Blocks. [online] Berkeley.edu. Available at:
https://snap.berkeley.edu/.

code.org (2011). Code.org: What will you create? [online]

Code.org. Available at: https://code.org/.

contributors, M.O., Jacob Thornton, and Bootstrap (n.d.).

Examples. [online] getbootstrap.com. Available at:
https://getbootstrap.com/docs/5.3/examples/.

www.kodable.com. (n.d.). Benefits of Coding | Kodable:

Programming for Kids. [online] Available at:
https://www.kodable.com/benefits [Accessed 27 Jul. 2023].

Brilliant.org. (2019). Brilliant | Learn to think. [online]

Available at: https://brilliant.org/.

Mit.edu. (2023). Available at:

https://scratch.mit.edu/projects/876904947/ [Accessed 27
Jul. 2023].

DOCUMENTATION | PAGE 17