User Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko

User Interface Design

COMP- 1650 Page 1

Coursework Title : User Interface Design

COMP 1650 : User Interface Design

Due Date : 10th November 2015

Centre : KMD (Yangon, Myanmar)


COMP- 1650 Page 2

Acknowledgement

First of all, I like to acknowledge the responsible persons from University of Greenwich who provide this coursework for students. I would like to thank to all the authors and researchers who researched about User Interface Design. Moreover, I would like to present my appreciation for our lecturer, Mrs. Moe Pale, for her great and expert lectures and guidelines. Last but not least, I would like to appreciate responsible teachers and staffs from our centre, KMD for providing such a good learning environment.


COMP- 1650 Page 3

Table of Contents 1. Introduction ........................................................................................................................... 5

2. Literature Review .................................................................................................................. 6

2.1 Review of Design Guidelines ..................................................................................... 6

2.1.1 How to Apply Shneiderman’s Eight Golden Rules ...................................... 6 2.1.2 How to Apply Nielsen’s Usability Heuristics ............................................... 7

2.1.3 Identifying Usability and UX Criteria for Low Level Prototype ................... 9 2.1.4 Evaluation on Existing Games Using Usability and UX Criteria ................ 10

2.2 Colour Theory ......................................................................................................... 13

2.2.1 Justifying Colours for the Prototype .......................................................... 14 2.3 Font Terminology .................................................................................................... 14

2.3.1 Justifying Font Style for the Prototype ....................................................... 15 2.4 Layout Design ......................................................................................................... 16

2.4.1 Justifying Layout Design for the Prototype ................................................ 16 2.5 Graphic Design Elements ......................................................................................... 16

2.5.1 Justifying Graphic Design Elements for the Prototype ............................... 17

3. Current Issues ..................................................................................................................... 18

3.1 Issues deal with User Interface Design on Different Screen Sizes............................. 18

3.2 Other Relevant User Interface Design Issues ............................................................ 19

3.3 How to Avoid the Issues in the Prototype ................................................................. 21

3.4 Legal, Social and Ethical Issues ............................................................................... 22 4. Developing the Prototype .................................................................................................... 23

4.1 Feasibility Study and Foundation ............................................................................. 23

4.1.1 Justifying User Groups .............................................................................. 23 4.2 Design ..................................................................................................................... 24

4.2.1 Conceptual Scenario (Story Line) of the Game .......................................... 24 4.2.2 Evolution of the Low Level Prototype ...................................................... 26

4.2.3 Story Board for the Low Level Prototype .................................................. 29 5. Evaluation Techniques ........................................................................................................ 32

5.1 Justifying Evaluation Techniques ............................................................................. 32

5.2 Heuristic Evaluation Using Usability and UX Criteria for the Prototype .................. 33


COMP- 1650 Page 4

5.3 Paper Prototyping for the Prototype ......................................................................... 34

6. Conclusion ........................................................................................................................... 35

6.1 Knowledge Got from the Report .............................................................................. 35

6.2 Discussion for Missing Things and Further Enhancement ........................................ 35 7. References ............................................................................................................................ 36

Appendix ................................................................................................................................. 38

Figures

Fig 2.1 A game for Children ...................................................................................................... 10

Fig 2.2 Another game for Children ........................................................................................... 11

Fig 2.3 Typical Colour Circle .................................................................................................... 13

Fig 2.4 Difference between serif fonts and sans-serif fonts ........................................................ 14

Fig 2.5 A Serif Font Style.......................................................................................................... 15

Fig 2.6 Sans-Serif Font.............................................................................................................. 15

Fig 2.7 Layout Design for “Buildings Professional Game” ........................................................ 16

Fig 3.1 Responsiveness Issue .................................................................................................... 18

Fig 3.2 Difference between Adaptive and Responsive Design ................................................... 21

Fig 4.1 Layouts of the Low Level Prototype .............................................................................. 26

Fig 4.2 Low Level Prototype Version 1 ..................................................................................... 27

Fig 4.3 Low Level Prototype Version 2 ..................................................................................... 27

Fig 4.4 Final Low Level Prototype ............................................................................................ 28

Fig 5.1 Paper Prototyping Evaluation ........................................................................................ 34


COMP- 1650 Page 5

1. Introduction

In recent years, computer games were developed not only for the entertainment purpose but also for the learning. Children can learn various topics such as languages, mathematics and drawings by playing computer games. Moreover, people try to teach the basic concepts of programming to their children via computer games. Since today world is known as the age of information technology, the children must need to understand the basic concepts of the programming platforms.

Therefore, throughout this report, we would develop a low fidelity prototype for a game that will support children of 7-11 ages to understand the basic concepts of programming. The low level prototype would be designed to view on a range of screen sizes. The low fidelity prototype should follow the User Interface Design Guidelines, legal and ethical constraints.

The name of the game is “Buildings Professional”. The game is about building houses. The game is targeted to be an offline game. The low level prototype would be designed for Windows OS due to the broad market of Windows OS. Although the low level prototype would be designed to view on a range of screen sizes, the targeted screen size would be 1024×768 pixel, which is mostly for portable computers.


COMP- 1650 Page 6

2. Literature Review

2.1 Review of Design Guidelines

The principles of design guidelines are very useful in designing user interface. There are varieties of design guidelines such as Don Norman Design Principles, Shneiderman’s Principles, W3C design standards, Nielsen’s Usability Heuristics and so on.

Among them, we would apply Shneiderman’s eight golden rules and Nielsen’s Usability Heuristics in defining usability and UX criteria. This is because other guidelines such as W3C standards are mostly focus on web design. And, the chosen two guidelines are more suitable to evaluate the design of a game.

2.1.1 How to Apply Shneiderman’s Eight Golden Rules

Shneiderman (2010) stated the eight golden rules which discuss how to do in a design process. In this section, we would discuss how to apply Shneiderman’s Eight Golden Rules in our low level prototype.

1. Strive Consistency

The interface design and functionality of a game should be consistent. Otherwise, it is difficult for the users to be familiar with the game. Games with no consistent interface design are usually not successful. Therefore, we should have consistent design and functionality in the game.

2. Enable Users to use Shortcuts

By providing shortcuts in a game, it would be very comfortable for a diverse range of user groups. Users will be more satisfied with shortcuts. Thus, we should consider to provide some shortcuts in “Buildings Professional” game.

3. Offer Informative Feedback

Users always expect a feedback when they have done an action. System feedbacks help the users in confirmation and decision-making. Without feedbacks, the users would be ambiguous what to do next. Therefore, system feedback in a game is critical.


COMP- 1650 Page 7

4. Design Dialogs to Yield Closure

The functionality and user interface design of a game should be organised from beginning, middle to end. If not, the users will close the game and will not play it anymore.

5. Prevent Errors

The designing pattern of a game should encourage the users not to make serious errors like infinity looping error. By preventing errors, the game would achieve more user satisfactions.

6. Permit Easy Reversal of Actions

Not only the games but also all applications should provide “Undo” and “Redo” actions. Actions in a game should be reversible so that users can know errors can be undone.

7. Support Internal Locus of Control

The users should be allowed to feel in control of a game. By responding respectively, the users can imagine themselves as controller or owner of the game. And this can lead to the success of the game.

8. Reduce Short Term Memory Load

Most of the people have small short-term memory load. Therefore, it is difficult for the users to memorise too much information at once. The game must not provide too much information at once to users.

2.1.2 How to Apply Nielsen’s Usability Heuristics

1. Recognition Rather than Recall

The user should not need to memorise the information from one part of a page to another. This rule is similar with one of Shneiderman’s rules, “reduce short term memory load”.


COMP- 1650 Page 8

2. Flexibility and Efficiency of Use

The flow of a game should be flexible for both novice user and expert user. The game should provide accelerators or speed up the interaction for the expert users, which are unseen by the novice users.

3. Aesthetic and Minimalist Design

The texts in a game should not include information that is not needed or rarely needed by the user. Misinformation and information overloading are needed to be concerned in designing a game.

4. Help users recognize, diagnose, and recover from errors

The words used in an error message should not be complex. The error messages should help the users to recognize or diagnose their errors.

5. Help and Documentation

Documentation for help such as user manual should be provided in a game, although documentation could be bored for the users.

6. Culture

It is important to consider the diversity of culture among the users. Words like “kill”, “suck” or “abort” should not be used in a game. More neutral words like “stop”, “wrong” or “cancel” should be used instead. Moreover, some colours are associated with politics, culture or religion (for example- black and white, red and yellow).

7. Design Paradigms and Precedent

The structure of a game should be precedent. The user interface design of a game should encourage being precedent.


COMP- 1650 Page 9

2.1.3 Identifying Usability and UX Criteria for Low Level Prototype

According to the chosen guidelines which were described in above, we would produce a usability and UX criteria list for the low level prototype.

No Usability and UX Criteria Description 1. Strive Consistency

(Shneiderman Rule)

The interface and functionality of game must be consistent.

2. Enable Users to use Shortcuts (Shneiderman Rule)

The interface of game should include shortcuts for faster performance.

3. Offer Informative Feedback (Shneiderman Rule)

Feedbacks and error messages should help user to understand easily.

4. Permit Easy Reversal of Actions (Shneiderman Rule)

“Undo” and “Redo” actions must be supported.

5. Support Internal Lotus of Control (Shneiderman Rule)

Users must be able to control the whole game.

6. Reduce Short Term Memory Load (Shneiderman Rule)

Users should not need to memorise anything while playing game.

7. Flexibility and Efficiency of Use (Nielsen Guideline)

The game should be flexible for both novice user and expert user.

8. Help User Recognize or Diagnose (Nielsen Guideline)

Words used in feedbacks should not be complex.

9. Help and Documentation (Nielsen Guideline)

User manual or Help option should be supported.

10. Culture (Nielsen Guideline)

Cultural sensitive words and colours should not be used in the interface.


COMP- 1650 Page 10

2.1.4 Evaluation on Existing Games Using Usability and UX Criteria

The following game is from www.softdistrict.com would be evaluated using usability and UX criteria.

Fig 2.1 a game for Children (www.softdistrict.com )

Usability and UX Criteria Mark Reason Strive Consistency (Shneiderman Rule)

1 2 3 4 5 The interface (such as fishes and background image) and functionality are consistent.

Enable Users to use Shortcuts (Shneiderman Rule)

1 2 3 4 5 There are no efficient shortcuts for the users.

Offer Informative Feedback (Shneiderman Rule)

1 2 3 4 5 The game offers some feedback messages when an error is occurred.

Permit Easy Reversal of Actions (Shneiderman Rule)

1 2 3 4 5 User cannot do “undo” or “redo” function while playing game.

Support Internal Lotus of Control (Shneiderman Rule)

1 2 3 4 5 Users are in control role of the whole game.

Reduce Short Term Memory Load (Shneiderman Rule)

1 2 3 4 5 Users don’t need to memorise almost anything to play the game.


COMP- 1650 Page 11

Flexibility and Efficiency of Use (Nielsen Guideline)

1 2 3 4 5 The game memorises the level of each user and therefore, users can continue playing from their levels.

Help User Recognize or Diagnose (Nielsen Guideline)

1 2 3 4 5 Words used in the feedbacks are not very complex.

Help and Documentation (Nielsen Guideline)

1 2 3 4 5 Help or How to play option for the users is supported.

Culture (Nielsen Guideline)

1 2 3 4 5 The game is about eating fishes and that idea is not so good.

Total 31

Another game for the children would be evaluated using the criteria. (Ref: www.roomrecess.com )

Fig 2.2 Another game for Children (www.roomrecess.com )


COMP- 1650 Page 12

Usability and UX Criteria Mark Reason Strive Consistency (Shneiderman Rule)

1 2 3 4 5 The interface of the game is consistent. But the functionality is not very consistent.

Enable Users to use Shortcuts (Shneiderman Rule)

1 2 3 4 5 There are no efficient shortcuts for the users.

Offer Informative Feedback (Shneiderman Rule)

1 2 3 4 5 Some feedbacks are offered but are not informative or are not useful.

Permit Easy Reversal of Actions (Shneiderman Rule)

1 2 3 4 5 User cannot do “undo” or “redo” function while playing game.

Support Internal Lotus of Control (Shneiderman Rule)

1 2 3 4 5 The game is mostly controlled by the game itself. (e.g. find “nouns”, find “adjectives”, etc.,)

Reduce Short Term Memory Load (Shneiderman Rule)

1 2 3 4 5 Users need to memorise just a little to play the game successfully.

Flexibility and Efficiency of Use (Nielsen Guideline)

1 2 3 4 5 The game memorises the level of each user and therefore, users can continue playing from their levels.

Help User Recognize or Diagnose (Nielsen Guideline)

1 2 3 4 5 The game would be sometimes bored to play for the children.

Help and Documentation (Nielsen Guideline)

1 2 3 4 5 Help or How to play option for the users is supported.

Culture (Nielsen Guideline)

1 2 3 4 5 The theme of the game is good (to learn verb forms of English Literature).

Total 27

According to the usability and UX criteria, the first game has a better user interface design than the second game. This is because, the second game does not support internal lotus of control for the users, and users cannot feel that they are in control role by playing the game. And the second game would be bored to play sometimes by the users.


COMP- 1650 Page 13

Weaknesses in Both Games and How to avoid them

First of all, there are no shortcuts in both games for the users. It would be inconvenient when the users need faster performance. Shortcuts are critically important in a game. Therefore, we need to provide shortcuts in Buildings Professional game.

Moreover, both games do not permit easy reversal of actions, which means “undo” and “redo” actions. Not only the games but also all applications should provide “Undo” and “Redo” actions. Actions in a game should be reversible so that users can know errors can be undone.

2.2 Colour Theory

There are three types of colours, primary colour, secondary colour and tertiary colour. Red, Blue and Yellow colours are primary colours. By mixing red colour and blue colour proportionally, we would get violet. We would also get green colour by mixing blue and yellow colour. Orange colour could be got by mixing red and yellow. These three colours, violet, green and orange colours are called secondary colours.

We could make more different tertiary colours by mixing primary colours and secondary colours again. In that way, we could make a thousand of tertiary colours which are different one by another.

Fig 2.3 Typical Colour Circle


COMP- 1650 Page 14

2.2.1 Justifying Colours for the Prototype

As “Buildings Professional” game is targeted for the children of 7 to 11 years of age, the colours used in the game must attract the children. According to “Interaction Design” (2002) by Preece, Rogers and Sharp, most of the children like tertiary bright light colours. Colours such as light green, azure, bright yellow, etc., are tertiary bright light colours. And these colours are matched with white colour background.

Therefore, we decide that light green, azure and light yellow with white colour background would be used in most of the interface of the game. But, we would provide other colours for the children in painting their buildings in the game.

2.3 Font Terminology

Generally, font style can be categorised into two, serif font style and sans-serif (no serif) font styles. Serif fonts include convolution of alphabets. There is no convolution of alphabets in sans-serif font styles. Different Font styles are made up of different x-height, baseline, descender, ascender, and so on.

Fig 2.4 Difference between serif fonts and sans-serif fonts

Font family such as Times New Roman, Informal Roman and Segoe Scripts are Serif font styles. And font family such as Aerial and Century Gothic are Sans-serif font styles. Unlike with san-serif font styles, convolution of alphabets would be seen in serif font styles. Serif font styles are commonly used for title, logo, name, and for the beauty purpose. Serif font styles can attract the users to read the letter in some cases.


COMP- 1650 Page 15

Fig 2.5 A Serif Font Style

2.3.1 Justifying Font Style for the Prototype

Although Serif fonts are beautiful and attractive for the users, children have difficulties in reading serif font style. According to recent research, it is hard to read and understand for some children. They mostly want simpler and funny font styles.

Moreover, people with dyslexia (a kind of disability in which a person is difficult to read and write) cannot read serif font styles. Therefore, we decided to use sans-serif font style rather than serif font styles. Finally, we decided to use “Century Gothic” font style, which is sans-serif font, to use in most of the user interface design of the game.

Although “Century Gothic” font style is chosen, we would use some serif fonts namely Charlemagne Std, for title, logo and name of the game.

Fig 2.6 Sans-Serif Font


COMP- 1650 Page 16

2.4 Layout Design

A simple layout design of a game generally composes of three parts- header, body and footer. A grid is a geometrical division for a space into measured columns, spaces and margins. It is a backbone of screen design.

It is vital to have a simple and clear layout design in a game so that user can scan the information on the screen quickly and easily. Therefore, we need to consider about how grid layout design of our game should be set up early in the prototype level.

2.4.1 Justifying Layout Design for the Prototype

Most of the desktop games have three main layouts, namely, banner, navigation and play area. The interface design of a good game should have at least these three layout design. Therefore, we would set the layout design for “Buildings Professional” game as the following picture.

Fig 2.7 Layout Design for “Buildings Professional Game”

2.5 Graphic Design Elements

Rogers (1987) claimed that physical appearance of objects such as line can significantly affect navigational performance. There are varieties of graphic design elements such as line, colour, shape, space, scale etc. By using graphic design elements, human-computer interaction will be improved.


COMP- 1650 Page 17

2.5.1 Justifying Graphic Design Elements

Line

The most basic element of design is line. In graphic design, lines could be defined as any two connected points. Lines are very useful in dividing space. For example, imagine how a newspaper uses lines to separate contents, headings and footers. Therefore, we would use lines in our prototype.

Shape

Shapes are used to emphasize a portion of a page. Everything in the world is based on shape. We could say that layouts are a kind of shapes. We would use shape richly in our low level prototype.

Space

Sometimes, the blank spaces, whether white colour or black colour, help the imagination of the users. Spaces are a kind of graphic design elements. By using spaces effectively, the interface design of a game would be very attractive without doing anything special.

Scale (size)

It would be very bored if the graphic design of a game is designed with similar sized ingredients. By using different sizes of the design elements, more attractions would be got. Therefore, we would utilize different sizes of graphic elements such as icons in the games.


COMP- 1650 Page 18

3. Current Issues

According to Carroll (2000), a successful game must have a good user interface design. User interface design would be a minor concern for those who do not know how vital it is. There are a lot of issues in designing games especially because of different screen sizes of computers. We would discuss some of user interface design issues that apply to software running on different screen sizes. We would also consider the legal, social and ethical issues deal with user interface design.

3.1 Issues deal with User Interface Design on Different Screen Sizes

A lot of computers such as PC and notebooks are variety in terms of screen size. It is very difficult for a user interface designer to design so that to be reliable with different screen sizes. The issue could be solved by using some techniques such as “float” property of CSS. But there are still a lot of concerns for different screen sizes.

1. Responsiveness Issue

The targeted screen size for the game is 1024×768 pixel. When the game is played with smaller screen devices, some of the contents would not be appeared on the screen. Or, users may need to click drop down button or scroll bar button to view the whole screen. It would be difficult for the users to play the game if there are no responsive or adaptive features.

Fig 3.1 Responsiveness Issue

A user interface design in which contents are not appeared flexibly.


COMP- 1650 Page 19

2. Resolution Issue

Another issue that would be occurred due to different screen size is resolution issue. Most devices with different screen sizes support different resolutions. Some images would not be clearly appeared if the device has low quality resolutions.

3. Font Size Issue

Font size would be another issue if the game is played in different screen sizes. Font sizes would be very big for smaller screen devices. Font sizes should be flexible according to the screen size. Not only font size, but also all the contents of the game such as images, buttons and icons are also required to be flexible according to the screen size.

3.2 Other Relevant User Interface Design Issues

1. Icons and Metaphors Issue

Icons and metaphors help people to recognise and remember things without reading a text. According to Byrne (1993), icons must be simple, large and easy to understand and should be along with text. Otherwise, people would not be able to know what the icons mean. Source:www.sm3directory.com.mm

2. Colour Issues

Colours must be considered for background, icons and buttons. Colours used in a game must be matched each other. Games with bad colour matches could not attract the user satisfaction. Moreover, colours can sometimes give information to the users (for example- “red” for emergency and “yellow” for warning). Users would not understand the game easily if there are no reasonable, meaningful colours.

A game in which icons are difficult to understand


COMP- 1650 Page 20

Source: www.walkthroughgame.com

3. Button Issues

Buttons used in a game must have a standard format. Buttons should have a standard colour, style and size. Texts used in the buttons should be simple, short and unambiguous. Texts in the buttons should not be slum words.

4. Font Styles Issues

Same with buttons, font styles should also be used in the same style and size. Otherwise, users would confuse in reading letters and clicking buttons. Moreover, people with dyslexia (a kind of disability in which a person is difficult to read and write) cannot read some strange font styles easily.

A game with bad colour matches.


COMP- 1650 Page 21

3.3 How to Avoid the Issues in the Prototype

In order to avoid from different screen size issues, the game must be responsive or adaptive game. A responsive design is that the interface of the game will fluidly change and respond to fit any screen or device size. By using float property of CSS, media queries and fluid grids, a responsive design could be created.

Unlike with responsive design, Adaptive design is that the interface of the game is written for many screen varied devices. When the game is opened, the code will detect the size of device using predefined set of layout sizes. Then, the most reliable interface would be displayed on the device.

Fig 3.2 Difference between Adaptive and Responsive Design

We would prefer responsive design for the game “Buildings Professional”. This is because it takes time to create multiple interface designs according to the adaptive approach. Adaptive design approach is also more expensive than responsive design approach. Therefore, we would choose responsive design approach to be reliable with different screen sizes.

Besides, we should use sound effects in the interface. This is because vision and hearing are interdependent each other. Sometimes, the information could not be described by using texts, images and animations only. We should combine sound effects for the images and animations. Moreover, sound effects can make computers more usable by visually disabled users.

Storytelling option in a game would be a powerful tool that can be used to imagine what the game is about. The user can understand the road map or structure of the game. Telling about the game as a story gives more satisfaction for the player. It helps to build more of an emotional attachment to the game. (Ref: www.zingdesign.com )


COMP- 1650 Page 22

3.4 Legal, Social and Ethical Issues

There are varieties of legal, social and ethical issues that need to be considered before designing a game. Not only the games but also all the computer applications should follow the legal, social and ethical constraints.

The legal issues include intellectual property and copyright issues. Although the low fidelity prototype would be created by using our own idea, others can steal or imitate that idea. We should declare about the intellectual property rights for our design. Besides, after the game had developed successfully, some people could copy the game directly or indirectly. In order to avoid this issue, we should register to get a copyright licence for the game. But there are still other serious legal issues in developing the game.

Some parents still believe that computer games could not help their children in learning. This is a kind of social issue. This kind of parental rejections could be occurred. Therefore, we should try to change parents’ mind, educating them that playing “Buildings Professional” game is a way of learning programming. Another social issue is deal with disability. It is difficult to provide the game to be able to play by disable children like colour blind.

The visual organs of children between ages of 7 to 11 are very sensitive. By playing computer games, the visual health of the children could be harmed. The developers of the games need to solve this ethical issue. Therefore, in order to protect the visual health of children, the levels of “Buildings Professional” game should not be so long. And the colours used in the game must be less harmful for visual health of the children.


COMP- 1650 Page 23

4. Developing the Prototype

4.1 Feasibility Study and Foundation

4.1.1 Justifying User Groups

Every game should have targeted user groups so that the user interface design of the game could be developed in order to meet with user requirements. The targeted user groups in the “Buildings Professional” game would be-

1. Children between 7 to 11 years of age

Children between 7 to 11 years of age would be the key users of the game. The user interface design of the game must be developed in order to get the satisfactions of the children. Colours and font styles usage for the children which were described in the above section should be embedded in the game.

2. Teachers

The user interface design and functionality of the game must help in learning programming. Otherwise, the teachers will refuse to use the game for the children. The perspectives of the teachers are really important in this section.

3. Parents

Parents will also take part in using the game in order to make sure that the game is really supporting in learning programming for the children. Most parents still do not know that computer games can help the children in learning a lot of subjects. Therefore, we would have to try to accept by the parents.


COMP- 1650 Page 24

4.2 Design

4.2.1 Conceptual Scenario (Story Line) of the Game

The name of the game is “Buildings Professional”. The game is about building houses, villas, high-rise buildings and skyscrapers. The game is considered to be developed using Java programming framework later. There are altogether 5 levels in the game. The basic programming concepts are embedded throughout the game. There will be only one character in the game, Dora, who is a girl who wants to build beautiful buildings.

In level 1, Dora will request to build a house to the player along with the colours and styles of the roofs, bricks and windows that she wants. The player has to find the roofs and bricks styles that she said. Otherwise, the player will not get scores. This is applying a programming concept of “checking condition (If)” in the game.

After a requested brick had been picked up, the player has to multiply the brick in order to get the required number to cover the whole house. For example, if the required number of bricks to cover the whole house is 100, the player has to multiply the symbol brick with 100. This concept is a kind of “looping” in programming.

After the house had built, Dora will request to extend the house to be a villa. The player will have to follow Dora’s request in order to get enough scores to reach next level. Extending a house to a villa is actually applying “inheritance concept” in the programming.

Moreover, the scoring concept of the game is similar with looping concept in the programming.


COMP- 1650 Page 25

Flow Chart for the Prototype


COMP- 1650 Page 26

4.2.2 Evolution of the Low Level Prototype

Fig 4.1 Layouts of the Low Level Prototype


COMP- 1650 Page 27

Fig 4.2 Low Level Prototype Version 1

Fig 4.3 Low Level Prototype Version 2


COMP- 1650 Page 28

Fig 4.4 Final Low Level Prototype


COMP- 1650 Page 29

4.2.3 Story Board for the Low Level Prototype

In order to understand the following story boards thoroughly, section 4.2.1, Story Line (page no.23) must be read first.

Description Low Level Prototype Level:1 Home page will be appeared and Dora will request to build a house. Task: The player has to click at “House” Button to choose a house style. Score: After choosing a house style, the player will get 50 scores. Programming Concept: Condition (If) Sound Effect: Alert sound after choosing correctly.

Description Low Level Prototype Level:1 Dora will request a roof style that she wants. Task: The player has to click “Roofs” button and find the roof style that Dora wants. Score: After choosing the correct roof style, the player will get another 50 marks. Programming Concept: Condition (If) Sound Effect: Alert sound after choosing correctly.


COMP- 1650 Page 30

Description Low Level Prototype Level:1 Brick styles and required number of bricks will be requested by Dora. Task: The symbol brick would be needed to multiply in order to cover the whole house. Score: The player will get 50 scores after looping. Programming Concept: Looping Sound Effect: Alert sound after looping process.

Description Low Level Prototype Level:1 Accessories such as window styles will be requested. Task: The player has to click “windows and doors” button to choose windows and doors. And then multiply symbol window with 3 in order to get 3 windows. Score: After choosing all, the player will get scores. Programming Concept: Condition (If) and Looping Sound Effect: Alert sound after choosing correctly.


COMP- 1650 Page 31

Description Low Level Prototype Level:2 The player will reach Level 2 only he got at least 150 scores in Level 1. Task: The player has to extend the house to be a villa. Score: After choosing a villa style, the player will get scores. Programming Concept: Inheritance Sound Effect: Alert sound after choosing villa style.


COMP- 1650 Page 32

5. Evaluation Techniques

To become an interactive game, evaluating the interface of the low level prototype is critically important. There are a lot of evaluation techniques. Evaluation techniques can be generally divided into Formative Evaluation and Summative Evaluation.

Formative evaluation is carried out throughout the development process and checks the product needs the users’ needs. Summative evaluation is used to check the quality of finished product.

5.1 Justifying Evaluation Techniques

There are a lot of evaluation techniques. Some of these are Keystroke-Level Model, GOMS, Fitts’s law, Heuristic evaluation and paper prototyping. Among them, we would apply Heuristic evaluation and paper prototyping evaluation for our low level prototype. They are chosen because the two techniques are user-centred, highly practical approach and reality techniques.


COMP- 1650 Page 33

5.2 Heuristic Evaluation Using Usability and UX Criteria for the Prototype

Usability and UX Criteria Mark Reason Strive Consistency? (Shneiderman Rule)

1 2 3 4 5 Both the interface and functionality of Buildings Professional game is very consistent.

Enable Users to use Shortcuts? (Shneiderman Rule)

1 2 3 4 5 There are no effective shortcuts for the users to use.

Offer Informative Feedback? (Shneiderman Rule)

1 2 3 4 5 Feedbacks such as error and warning messages are provided.

Permit Easy Reversal of Actions? (Shneiderman Rule)

1 2 3 4 5 User can do “undo” and “redo” actions easily if there is something wrong.

Support Internal Lotus of Control? (Shneiderman Rule)

1 2 3 4 5 The flow of the game is in structure. Users cannot get in control very much.

Reduce Short Term Memory Load? (Shneiderman Rule)

1 2 3 4 5 Users need to memorise just a little to play the game successfully.

Flexibility and Efficiency of Use? (Nielsen Guideline)

1 2 3 4 5 The Buildings Professional game is flexible and efficient for both novice and expert users. This is because the game memorises the user’s level.

Help User Recognize or Diagnose? (Nielsen Guideline)

1 2 3 4 5 Some of the children might be bored to play the game.

Help and Documentation? (Nielsen Guideline)

1 2 3 4 5 User manual and help options are supported in the game.

Culture? (Nielsen Guideline)

1 2 3 4 5 The theme of the game is good (to learn programming concepts).

Total 35

Weaknesses and Feedback

According to Shneiderman Rule, users should be able to use shortcuts. But “Buildings Professional” game does not provide effective shortcuts for the player at the present. And, the player cannot get in control the game very much. The flow of the game is controlled by Dora, the character in the game. Some feedbacks of the children showed that they are getting bored to play the game.


COMP- 1650 Page 34

5.3 Paper Prototyping for the Prototype

Fig 5.1 Paper Prototyping Evaluation

Consistent Interface

(Shneiderman Rule)

Undo & Redo Action

(Shneiderman Rule)

Help user’s recognition

(Nielsen Guideline)

Colour Theory for Children

Shape (Graphic Design Element)

Sans-serif font (Font Terminology)

Perception & Recognition (Nielsen Guideline)

Space (Graphic Design Element) Reducing

Short term memory load


COMP- 1650 Page 35

6. Conclusion

6.1 Knowledge Got from the Report

Throughout the report, we discussed and justified all about user interface design. We got knowledge about primary colours, secondary colours and tertiary colours. We also got idea deal with colour theory that children under age of 10 mostly like bright colours. In addition, differentiation between font styles such as serif and sans-serif fonts were evaluated. We have also learnt about how to apply graphical elements such as line and space in a prototype.

Moreover, we explained about responsive and adaptive designs and difference between them. Concerning issues due to different screen size were also analysed and discussed how to avoid the issues. We also achieved some knowledge of how to evaluate a low level prototype in terms of user interface design.

6.2 Discussion for Missing Things and Further Enhancement

“Buildings Professional” game does not provide effective shortcuts for the player at the present. And, the player cannot get in control the game very much. The flow of the game is controlled by Dora, the character in the game. Therefore, we should fix this as further enhancement.

The low level prototype for “Buildings Professional” game is fixed design and it is not responsive or adaptive design currently. Therefore, we should add some discussion about how to make responsive or adaptive features for our prototype. And, we also left to take users’ feedbacks on our prototype. Users’ feedbacks are important as we could make decision about what needs to be enhanced.

However, we recommend that the low fidelity prototype for “Buildings Professional” game is in line with the best practice of user interface design.


COMP- 1650 Page 36

7. References

Book References

Preece, Rogers, Sharp, (2002) Interaction Design

(Accessed Date: 12th September 2015)

David Benyon, (2010) Designing Interactive Systems

(Accessed Date: 12th September 2015)

University of Greenwich, B.Sc (BIT) COMP 1649, Interaction Design

Website References

Responsive Design

http://www.zingdesign.com/responsive-website-design-cheatsheet1

(Accessed Date: 3rd October 2015)

Mobile Interface Design

http://netobjects.com/mobile-site.html

(Accessed Date: 3rd October 2015)

Mobile Application Best Practice

http://www.w3.org/2010/09/MWABP

(Accessed Date: 10th October 2015)


COMP- 1650 Page 37

Adaptive Vs Responsive Design

www.jaintechnosoft.com


How to evaluate a game interface?

www.instantshift.com



COMP- 1650 Page 38

Appendix


COMP- 1650 Page 39


COMP- 1650 Page 40

Technology

User Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko