COMP1650

BSc (HONS) Computing, University of Greenwich, UK COMP1650 User Interface Design

Low-Fidelity Prototype for Kids Programming Game Done By Name Gauthaman a/l Pradabhan

UOG ID 000863432

COMP1650User Interface Design UOGID-000863432

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

COMP1650User Interface Design UOGID-000863432

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 2015 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.

3

COMP1650User Interface Design UOGID-000863432

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.He worked for Apple,Hewlett Packard,Northwestern University,UCSD.He critiques and examine many everyday items as examples of problematic designs.Mainly,design principles a framework for discussing and thinking about everyday interactions.Providing a guide for any designer was his duty by the creation his own principle.This principle brings up the idea for any developer for making their concept reach huge number of audience 2.1.2Usability 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 want easily without any guidance being provided.A perfect usability design is a design where the user able to identify all the designs included and able to differentiate it by their own. Don Norman’s Principle have provide us such a rules for making an usable and accessible 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. 4

COMP1650User Interface Design UOGID-000863432

4. Mapping-Relation to control and their effect.An air-conditioner needs a remote to control the temperature.This is how mapping works. 5. Constraints-Eliminating the possibilities of error occurrence in any terms.Putting a dish into an oven while the temperature is too high will burn the dish.So,making sure of the right temperature for types of meals and putting into an oven can avoid any errors to be occur. 6. Consistency-Designing interfaces to have similar backgrounds and functionality can be more usable and learnable.This enable users to quickly transfer their prior knowledge and able to do the relevant context and make them focus on new tasks.

2.2 Guidelines ,principles and standards Some of the guidelines,principles and standards have been clearly organized and given to the world by theorist such as Nielson and Shneiderman to help designers develop their way of designing methods and helping it become more efficient and useful. 2.2.1Shneiderman’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.Those are the discussion on the eight principles: 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 increace 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. 5

COMP1650User Interface Design UOGID-000863432

5. 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. 6. 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. 7. 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 8. 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.2.2 Nielsen’s Usability Heuristics Jakob Nielsen's heuristics are probably the most-used usability heuristics for user interface design. Nielsen developed the heuristics based on work together with Rolf Molich in 1990.The final set of heuristics that are still used today were released by Nielsen in 1994. 1. Visibility of system status- The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2. Match between system and the real world- The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. 3. User control and freedom- Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go throughanextended dialogue. Support undo and redo. 4. Error prevention- Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

6

COMP1650User Interface Design UOGID-000863432

5. Help users recognize, diagnose, and recover from errors- Error messages should be expressed in plain language 6. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 7. Recognition rather than recall- Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 8. Flexibility and efficiency of use- Accelerators --unseen by the novice user --may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 9. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 10. Help and Documentation- Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation.

7

COMP1650User Interface Design UOGID-000863432

2.4User 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 criterias.

2.4.2Font and Colour Fonts has three main criterias 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. Types of fonts must be chosen accordingly based on what design we going to do.There are two types of typeface which is serif or sans serif typefaces.It is common practice to use sans serif fonts in any designs or applications for children.Mainly because sans serif has this features like having a simple looks and simplicity.while,serif can be used only for designing the title part of the design because serif font its not suitable for everyone especially for those who have visual impairment.

8

COMP1650User Interface Design UOGID-000863432

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.5Criteria o o o o o o o o

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

9

COMP1650User Interface Design UOGID-000863432

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 o o o o

Well defined usability,Accessibility and design elements details Determine target audience eg*kids Develop a low fidelity prototype design Test prototype design based on requirements 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. 10

COMP1650User Interface Design UOGID-000863432

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.4Required Functions o o o o o

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

3.5 Asumptions 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.

11

COMP1650User Interface Design UOGID-000863432

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

12

COMP1650User Interface Design UOGID-000863432

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. Nielson stated some issues regarding problems on viewing designs and web pages on mobile devices. o Smaller screen size o Hardness in inputting data o Lack of designing issues on interfaces o Downloading problems 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

13

COMP1650User Interface Design UOGID-000863432

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.1Welcome 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

14

COMP1650User Interface Design UOGID-000863432

5.2.2Welcome screen for Phones/Tablets

Game Option button

Button for settings

Game title

Button to play the game

15

COMP1650User Interface Design UOGID-000863432

5.2.3Option Screen for Personal Computer (PC)

Difficulties options

Time limit options

Back to Main Menu Button

16

COMP1650User Interface Design UOGID-000863432

5.2.4Option screen for phones/tablets

Setting button option

Level selection button

Difficulties selection option

Time limit selection option

17

COMP1650User Interface Design UOGID-000863432

5.2.5Setting screen for Personal Computer

Screen Resolution selection option

Volume selection option

Button to navigate to Main Menu

18

COMP1650User Interface Design UOGID-000863432

5.2.6Setting screen for Phones/Tablets

Level selection button

Setting button

Volume controloptions

Back to previous Screen Button

19

COMP1650User Interface Design UOGID-000863432

5.2.7Level option screen for Personal Computer(PC)

Setting Button

Level Selection Button

Back to Main Menu Button

20

COMP1650User Interface Design UOGID-000863432

5.2.8Level option screen for phones/tablets

Setting Button

Level Selection Button

Level option Button

Back to previous Screen Button

21

COMP1650User Interface Design UOGID-000863432

5.2.9Game screen for Personal Computer(PC)

Setting Button

Answer selection Options

Screen where numbers appears

Result values

Screen where numbers appears

Main Menu button

22

COMP1650User Interface Design UOGID-000863432

5.3.0Game screen for phones

Level Selection Button

Setting Button

Screen where numbers appear

Answer selection Options

Result values

Main Menu button

23

COMP1650User Interface Design UOGID-000863432

5.4Site 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 option

Select levels

Game Settings

Adjust screen and Audio

24

Play game

Play and view the score

COMP1650User Interface Design UOGID-000863432

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:Infor mation 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.

25

COMP1650User Interface Design UOGID-000863432

6.Development/Implementation 6.1Features 6.1.1Title screen i)For Personal Computer(PC) Eventhough the 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.

26

COMP1650User Interface Design UOGID-000863432

ii)For Phones

27

COMP1650User Interface Design UOGID-000863432

6.1.2Level 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 favourite colour for kids,so it has been used to make them attracted to this colour tone.

i)For Personal Computer(PC)

28

COMP1650User Interface Design UOGID-000863432

II)For phones

29

COMP1650User Interface Design UOGID-000863432

6.1.3Setting screen For the setting design there is the maintain in colour selection.Only for the selected option of settings.Lets say the screen sizse 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

30

COMP1650User Interface Design UOGID-000863432

6.1.4Game 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)

31

COMP1650User Interface Design UOGID-000863432

ii)Game option screen for phones

32

COMP1650User Interface Design UOGID-000863432

6.1.5Gameplay 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.

33

COMP1650User Interface Design UOGID-000863432

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.

34

COMP1650User Interface Design UOGID-000863432

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.

35

COMP1650User Interface Design UOGID-000863432

ii)For phones For phones the similar design criteria has been involved.

36

COMP1650User Interface Design UOGID-000863432

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

Modification None None None None None None None

7.1.2Scenario two:Adjust difficulties

Step 1:Enter WELCOME SCREEN Step2:Click GAME OPTION Step 3:Select “HARD” on “DIFFICULTY OPTION” Step 4:Select “Main Menu” Step 5:Select “Play” Step 6:Check “DIFFICULTIES” on gameplay Step 7:Exit to “Main Menu”

Outcome Welcome Screen

Modification None

Game option screen Select hard as difficulty from 3 other options Back to Welcome Screen Navigate to Gameplay Screen Confirming the change in gameplay difficulties Back to Welcome Screen

None None

37

None None None None

COMP1650User Interface Design UOGID-000863432

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

38

COMP1650User Interface Design UOGID-000863432

8.Evaluation 8.1Prototype 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.2Project 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 againt 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.3Further Improvement o o o o

Improving the color theme of the design Giving user the choice of choosing the fonts A fully designed project must be test in the form of surveys among kids Increase the usability functions like in Personal Computer

39

COMP1650User Interface Design UOGID-000863432

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: 2nd November 2015

Heuristics for user interface design [Online]Available at: http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interfacedesign Last accessed:4th November 2015

Nielson, J. 2011. Digital Idiom. [Online] Available at: http://www.digitalidiom.co.uk/w3c_web_standards.php Last accessed:4th November 2015

10 usability principle of Nielsen[Online]Available at: http://www.slideshare.net/crafted/10-usability-heuristics-explained Last Accessed:5th November 2015

Don Norman’s design principle [Online]Available at: http://www.csun.edu/science/courses/671/bibliography/preece.html Last accessed:5th November 2015

40

COMP1650User Interface Design UOGID-000863432

Appendix 1)For Personnal Computer(PC) a)Welcome Screen Interface Design

b)Level option Screen Interface Design

41

COMP1650User Interface Design UOGID-000863432

c)Setting Screen Interface Design

d)Game Option Screen Interface Design

42

COMP1650User Interface Design UOGID-000863432

e)Gameplay Screen Interface Design

f)Gameover Screen Interface Design

43

COMP1650User Interface Design UOGID-000863432

2)For Phones/Tablets a)Welcome Screen Interface Design

44

COMP1650User Interface Design UOGID-000863432

b) Game Option Screen Interface Design

45

COMP1650User Interface Design UOGID-000863432

c)Setting Screen Interface Design

46

COMP1650User Interface Design UOGID-000863432

d)Level Option Screen Interface Design

47

COMP1650User Interface Design UOGID-000863432

e) )Gameplay Screen Interface Design

48

COMP1650User Interface Design UOGID-000863432

f)Gameover Screen Interface Design

49