Table of Contents Page

1)Introduction 3

2)Literature Review 4-9

3)Requirements Specification 10-11

4)Analysis 12-13

5)Design 14-25

6.Development/Implementation 26-36

7)Testing 37-38

8.Evaluation 39

9.References 40

10.Appendix 41-49

2
1. Introduction

Relational Logic is a game concept which can be implemented for those who like their kids
below 12 years old to learn on simple programming ideology where logic plays the main part of
it. Before that we must get ourself know why it is necessary for kids to get know at least a bit of
programming knowledge in their life. Nowdays, in this evolving era of 2021 it’s hard for us to
imagine a single career which doesn’t requires the need for coding. Every little things which
works has some kind of codes which provides a method to make it run. Coding/programming is
something we are being surrounded in our daily routine. As an example, choosing a proper
shoe to wear also needs so logics to be evolved so that we can purchase a right fitting shoes for
our legs. So, logic is the main thing we have to understand first. In order to implement logics in
games, this games would be a right one to be chosen to let our kids learn the basic comparison
between the logics involving numbers. This game integrates critical thinking and problem
solving task which make the kids to calculate and compare the answer values between to
numbers given on screen.
2. Literature Review

In this section will look upon some design issue which take place in order to complete the
design game for children.Some of the related summarization has been researched to let us
identify key facts that could be useful in proving the design criteria involved or has been used
for the interface design.

2.1 Don Norman’s design principle

2.1.1What is Don Norman’s Principle

Don Norman’s principle was created by Donald Norman a cognitive scientist and engineer who
has pioneered many ideas related user centred-design. This principle brings up the idea for any
developer for making their concept reach huge number of audience

2.1.2 Usability and Accessibility

Usability and Accessbility are main part for any successful design yet most of the designer
forget to pay attention on this. Usability is basically letting the user to identify those needs
they require easily without any guidance being provided. A design that is perfect helps the use
of an app ease and user friendly.
Don Norman’s Principle have came up with a few rules for design:

1. visibility-can make the user to see the state of a design and able to identify whatever
function drawn and its usage. Let’s say a design of a car which is too mainstream
because it has to be in a way universally understand. In this case people can find it
more recognizable.
2. Feedback-Is what is it doing now. For an example a calculator has been design to
show us the values when we total up some numbers. This is a feedback.
3. Affordance-knowing the real motif of having an object that gives clues to its
operation. A scissor can only use to cut paper its not created to dig a hole.

2.2 Guidelines, principles and standards

Nielson and Shneiderman came up with guidelines and standards to help designers develop
their way of designing methods to enable it become more efficient and useful.
2.2.1 Schneiderman’s Eight Golden Rules of Interface Design

Shneiderman has proposed this amazing collection of principle which derived from his
experience and the way he applied those single things in most of his R&D(Research and
Development) after being properly interpreted.

To make a good interface design and to improve the quality of it Sheneiderman’s “Eight Golden
Rules of Interface Design” are a guide for every single designer as discussed below

1. Strive for consistency-Consistent sequences of action should be used in prompt,menus

and help screens; and consistent commands should be employed throughout.
2. Enable frequent userd to use shortcuts-As a user is a frequent user they can desire to
increase the pace of interaction.
3. Offer informative feedback-Without a feedback for every action does by the user they
wont be any change of improving the design. For frequent and minor actions the
response can be modest, while for infrequent and major actions, the response should
be more substantial.
4. Design dialogue to yield closure-sequences of action must be organized in a manner of
beginning, middle, and end. The informative feedback at the completion of a group of
action gives the operators the satisfaction of accomplishment, a sense of relief, the
signal to drop contingency plans and options from their minds which provide a way to
prepare for the next group of actions. Offer simple error handling- design the system
so the user cannot make a serious error. If an error is made, the system should be able
to detect the error and offer simple, comprehensible mechanisms for handling the
error.
5. Permit easy reversal of actions- This feature relieves anxiety, since the user knows that
errors can be undone; it thus encourages exploration of unfamiliar options. The units of
reversibility may be a single action, a data entry, or a complete group of actions.
6. Support internal locus of control- Experienced operators strongly desire the sense that
they are in charge of the system and that the system responds to their actions. Design
the system to make users the initiators of actions rather than the responders
7. Reduce short-term memory load- The limitation of human information processing in
short-term memory requires that displays be kept simple, multiple page displays be
consolidated, window-motion frequency be reduced, and sufficient training time be
allotted for codes, mnemonics, and sequences of actions.
2.4 User Interface Design

2.4.1Context and Layout

The design content is where the text, image, stunned animations are organized for the
pleasuring view of the user. The way the designer arrange the view of a design is very important
where the design must be universally understood by any user based on the project age group
requirement.
Other than that, consistency is another key element for a successful design as per stated by
Nielson Theory. Based on Nielson principle having an appropriate design of button and text
can make those who having visual diabbilities to make use of any design. Hence, creating a
successful design must include these criteria.

2.4.2Font and Colour

Fonts has three main criteria such as size, style, colour to form any designs so that the data and
information provided is clear and visible to any group of users.

Using typography in User Interface Design for kids game

In most cases, the use of text should be little moderate and it depends on the concept or title
of the project we are involved in. For kids game, text must be as their wish so that it can reach
the peak of sales.
In order to choose appropriate Typeface it is an important element to choose a well-defined
contours and generous space between letters which can able to make the kids fell inviting and
playing the game. A designer should gave the liberty to choose fonts that have a very
distinctive look and feel creating a design for a kid’s game.
Regarding the colour tone used for design, for every design there must a purpose of using
specific colour. For kids game design, colours which can make them adore the game is
needed but the designer must be very careful in selecting the colour just to avoid some
reading issue such as;
 Ability to distinguish the background colour and the font colour
 Avoiding having similar colours to avoid user to get bored
 Choosing bright colour background with white colour font,

Font size must be according to the children’s development stages. As an example for
kinderkaten kids they requires a larger font size since they are just getting used to
alphabets.this is specially important when choosing font size for buttons and links. Generally as
suggested in a research, size of font for any designs for kids should be above 14pt.It is an ideal
size for kids to make a quick read and easy for them to understand.

2.5 Criteria

o The title screen is clear and readable by kids

o Navigation provided is very simple since just a button to click and play
o Can easily understand the motif of the game
o Suitable fonts has been used for clear readings
o Sans-Serif font used for designing
o Font size not smaller than 14pt
o The content colour has been separated from background colour to make the text readable
o The design follow Shneiderman’s principle
3. Requirements Specification

3.1Overview

The main purpose was to create a kids programming game design for kids age between 7 to 11
years old which promotes the implementation of the knowledge of logics to kids.Logics plays an
important role in programming.In whatever programming language whithout logic we cannot
even sort out the problem involved in a case.So,this low level prototype game let the kids to
learnt the most fundamental part of programming.This design is suitable on a range of screen
sizes.The range of screen size is for all the computers and phones.The prototype will not face
any difficulties for kids to play in any gadgets.The user interface design must follow the
principle of Shneidermen so that it fulfills a perfect design’s requirements.

3.2Objective

o Well defined usability,Accessibility and design elements details

o Determine target audience eg*kids
o Develop a low fidelity prototype design
o Test prototype design based on requirements
o Evaluate design against criteria

User Groups

3.2.1Adults

Mostly adults are not so well to handle with the latest gadgets with latest technology.They are
more like an information seekers on any new coming games.Let’s say the game is beneficial for
them in terms of knowledge and it looks classic as they desires they will look into it.

3.2.2Children

Childrens especially those who are below 12 years old still having a developing mentality
towards the real world.Their preference would be more to graphical user interface which can
be presentable for pleasuring their eyes.Unlike adults,younger kids favour more fancy visuals
and a plain interface design fail to attract kids.
3.3.3Disabilities

User with color blind issues having disabilities with the appearance and usage of a design.For
them, seeing some combination of different background colour and text might be a problem
because they cannot really experience the actual appearance of the design as others does.For
this group of people they tend to go after a plain and simple design rather than suffocating
their eyes seeing a lots of combination of graphical user interface.

3.4 Required Functions

o The interface design must very clear without having so many graphical inputs on text
o Layout design must be constant and user should feel like they are on the same design
o User must able to identify the settings involved and should be able to change it
o The colour theme must be maintain as the same until the end of the design
o Content must be readable for all group of users

3.5 Assumptions

The interface design for the low fidelity game will be for both phones and computers.It will be
work on both phones and computers on any resolution.even though its not a fully playable
game it shows full structural design of how it would look like on screen,with the game start
menu with a click and play button,ideal layouts,settings option and game content.It will be
assumed that the potential redesign of the interface will be more attractive and easily drags the
number of kids users based on usability and accessibility guidelines.
4. Analysis

4.1Task Analysis

These are those task analysis that will demonstrate the user’s ability to play the low fidelity
game for kids

1. click the app on computer or phones and the welcome screen appears
2. welcome screen with title and 4 option such as ; play,game option,settings and exit will be
on welcome screen
3. Access settings
-Let user to adjust screen sizes
-Let user to adjust the volume
4. Access game option
–let user to select difficulties of the game play
–let user to set time limit
5. Access play
–user able to select levels to play based on their preferences
–user can start playing
6. Access exit
–user can exit from the game play screen
7. Game over screen
–user can retry level
–user can navigate to next level
–user can navigate to main menu
4.2Mobile/tablet

4.2.1Viewing user interface design on Mobile/Tablet

Viewing a design on a phone differs the way it looks on a personal computer (PC) as the screen
sizes for both devices is different.Information provided on design must be less in mobile design
due to smaller screen size.
Hence it is important to a pay attention on context whenever it comes to mobile’s interface
design. The Relational Logic game provides only essential buttons and playable features for
the mobile’s interface design.

4.2.2Usability guideline for Mobile Interface design

o Reducing amount of content
o Buttons must be particular
o Every pages has the navigation option to main menu
o Have the feature of touchscreen and non-touchscreen design
o Make use of input functionality
5. Design

5.1Design Justification
Total number of 6 interface design prototypes have been developed for both personal
computer (PC) and phones.Both interface designs having same functionalities and features.In
phone interface design it has been modified into a simpler way so that it supports on every
phone universally.

5.2Design Screens

5.2.1 Welcome screen for Personal Computer

Game Title

Main button to navigate

into the game
Button to access to
settings

Button to select game

difficulties

Button which allows to exit

5.2.2 Welcome screen for Phones/Tablets

Game Option button Button for settings

Game title

Button to play the game

 5.2.3 Option Screen for Personal Computer (PC)

Difficulties options

Time limit options

Back to Main Menu Button

5.2.4 Option screen for phones/tablets

Level selection button Setting button option

Difficulties selection option

Time limit selection option

5.2.5 Setting screen for Personal Computer

Screen Resolution
selection option

Volume selection
option

Button to navigate to Main Menu

5.2.6 Setting screen for Phones/Tablets

Level selection button Setting button

Volume controloptions

Back to previous Screen Button

5.2.7 Level option screen for Personal Computer(PC)

Setting Button

Level Selection Button

Back to Main Menu Button

5.2.8 Level option screen for phones/tablets

Level Selection Button Setting Button

Level option Button

Back to previous Screen Button

 5.2.9 Game screen for Personal Computer(PC)

Setting Button

Answer selection Options

Screen where numbers appears

Result values

Screen where numbers appears

Main Menu button

 5.3.0Game screen for phones

Setting Button
Level Selection Button

Screen where numbers appear

Answer selection Options

Result values

Main Menu button

5.4 Site Map

The main navigation screen has three links which can access to specific adjustments and
gameplay. User able to get back to the main navigation screen by they link provided on
the other screens .

Welcome Screen

Game Settings
Game option Play game

Select levels Adjust screen and Audio Play and view the score
5.5Criteria

The welcome screen and the game title is visible and identifiable: The title is readable
and attractive especially for kids since the fonts is designed to look attractive for them. It
was visually separated from the background color theme so that it look outstanding.

Can easily find information: Information and navigation to level selection options and settings
are provided on the welcome screen itself. User can go back to the welcome screen back after
adjusting their desired from settings and level selection option screen.

Clear and readable gameplay: Numbers appears during the game is visible and big enough for
the user to see. Font size used is 24pt just to avoid user with visual disabilities to view it clearly.

Consistent Design Theme: The layout and background colour used must be the same so that it
can have a look of an identical gameplay.

Limitation of graphics: Its important to consider those with colour blindness and having
some visual disabilities. So there must be a limit on animations and images involves on
gameplay.
6. Development/Implementation

6.1Features

6.1.1Title screen

i)For Personal Computer(PC)

Although, concept is the same for phone and PC but the layout and the arrangement of some
button must be different. In terms of colours, as we can see from the screenshot below we can
easily read the text while the background image is not bothering the text. The use of using
different colour shading also viewable especially for those who having troubles in visual
disabilities. The brighter font colour make the title looks catchy for the users eyes.
ii)For Phones
6.1.2 Level Option screen

Level screen consists of 3 different colour contents those colour usage can be seen as catchy for
user’s eyes.For the levels which has been unlocked by user by winning the games can be seen
without the lock icon as shown below. Pink is one of the favorite colour for kids,so it has been
used to make them attracted to this colour tone.

i)For Personal Computer(PC)

II)For phones
6.1.3 Setting screen

For the setting design there is the maintain in colour selection. Only for the selected option of
settings. Lets say the screen sizes chosen as full screen as shown below. Only the for the
selected option the text will appear in green colour whereas other option stays pink.

i)Setting screen for Personal Computer(PC)

ii)Setting screen for phones

6.1.4 Game option screen

The concept similar like the game setting design.only the chosen option will appear green and
other will be in pink colour.Like the difficulties option below easy is the option selected by the
user and others unselected options remain pink.

i)Game option screen for personal computer(PC)

ii)Game option screen for phones
6.1.5 Gameplay Screen

i)It has been shown below how will be the game look like when playing.Two number will appear
on left and right and the player have to use their up,down and enter key to select the answer
while comparing the values based on logics.Answers given such as lesser than,lesser than or
equal,greater than,greater than or equal.Scores and Mistakes has been designed in red colour
and also the time limit.When user exceed the time limit the result will be shown
immediately.The color chosen for the values on game play screen was black to avoid any visual
disability playes to have problems in playing the game.
ii)For the phone design it is just the similar method,but player have to slide the screen to
choose the answer and tap on the right answer.The question will appear just like for PC on the
left and right hand sides of the screen.Scorings and mistakes designed in red colour and also
the timer.Once the time is up it will navigate to Game Over screen.
6.16Game over Screen

Game over screen is the final design where it will show all the scores, mistakes and total
points of the player.It has been design in a way like the results has been written down in
blackboard in order to make the player feel the same phenomena like being in school. Only
the blackboard score will be highlighted in this screen and others designed to be faded
behind.
ii)For phones

For phones the similar design criteria has been involved.

7. Testing

7.1User Testing

A test on the user interface design has been carry on with user to receive their feedback. Test
had been done by kids below 12 years old. Two scenarios were given for them to make this test
successful.

7.1.1Scenario One: adjust volume

Outcome Modification
Step 1:Enter WELCOME SCREEN Welcome Screen None
Step2:Click SETTINGS Settings option None
Step 3:Select “high” on “AUDIO” Select high audio from 3 None
audio options
Step 4:Select “Main Menu” Back to Welcome screen None
Step 5:Select “Play” Navigate to Gameplay None
screen
Step 6:Check “Audio” on Confirming the Audio None
gameplay adjustment
Step 7:Exit to “Main Menu” Back to Welcome Screen None

7.1.2Scenario two: Adjust difficulties

Outcome Modification
Step 1:Enter WELCOME Welcome Screen None
SCREEN
Step2:Click GAME OPTION Game option screen None
Step 3:Select “HARD” on Select hard as difficulty from 3 None
“DIFFICULTY OPTION” other options
Step 4:Select “Main Menu” Back to Welcome Screen None
Step 5:Select “Play” Navigate to Gameplay Screen None
Step 6:Check “DIFFICULTIES” Confirming the change in None
on gameplay gameplay difficulties
Step 7:Exit to “Main Menu” Back to Welcome Screen None
7.2Modification Needed

o An option to change the colour of font based on user’s desire can be done
o A helpdesk unit available in case of any crash of the software
o Options to upgrade the interface design can be provided
8. Evaluation

8.1 Prototype Evaluation

The visual prototype created has got some positive feedback from users based on their
participation in the testing process, however the next step is to develop the User Interface
Design to a Real World Game where users can really experience the joy involves in playing this
game.A successful design must comply with requirements listed on some Heuristic Check List
such as Nielsons Heuristics List. However, the user interface design never failed to follow
with the guidelines and principles set for a user-friendly game designs and this is the final
interface design as it can be concluded.

8.2 Project Evaluation

All the deliverables for the overall project has been successfully determined and achieved and
separated into different level of explanations. The User Interface Design for a Kids Programming
game have been evaluated against the research undertaken within the Literature Review and
from some important criteria involves in designing method based on theorist like Nielson. The
planning and the time schedule of the project has got some timeframe within the due date so
the need to complete it on time was required. All the objectives, discussions, ideas have been
kept concise and targets have been completed.

8.3 Further Improvement

o Improving the color theme of the design

o Giving user the choice of choosing the fonts
o A fully designed project must be test in the form of surveys among kids
o Increase the usability functions like in Personal Computer
9. References

Websites

Developing Heuristics based on User Experience[Online] Available at:

http://www.academia.edu/4356390/Evaluating_Computer_Game_Usability_Developing_Heuri
s tics_Based_on_User_Experience Last Accessed: 9th April 2015

Heuristics for user interface design [Online]Available at:

http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-
design

Last accessed:11th April 2015

Nielson, J. 2011. Digital Idiom. [Online] Available at:

http://www.digitalidiom.co.uk/w3c_web_standards.php Last accessed:11th April 2021

10 usability principle of Nielsen[Online]Available at:

http://www.slideshare.net/crafted/10-usability-heuristics-explained Last Accessed:10

April,2021

Don Norman’s design principle [Online]Available at:

http://www.csun.edu/science/courses/671/bibliography/preece.html Last accessed:11th April

2021
 Appendix

1)For Personnal Computer(PC)

a)Welcome Screen Interface Design

b)Level option Screen Interface Design

c)Setting Screen Interface Design

d)Game Option Screen Interface Design

e)Gameplay Screen Interface Design

f)Gameover Screen Interface Design

2)For Phones/Tablets

a)Welcome Screen Interface Design

b) Game Option Screen Interface Design
c)Setting Screen Interface Design
d)Level Option Screen Interface Design
e) )Gameplay Screen Interface Design
f)Gameover Screen Interface Design