The document discusses human-computer interaction (HCI) techniques for game design. It provides examples from the mobile tennis game "Flick Tennis" to illustrate principles of HCI like visibility of system status and error prevention. Flowcharts are used to explain the game's scoring system and gameplay. Suggestions are provided to enhance the character selection section, such as using thumbnail character strips or a 3D rotating globe interface.

1. Name : Akshay. M. Phadke Date : 06.09.13
Unit 75
Human Computer Interaction For Computer Games
Outcomes 1,2 & 3 – Understanding Human Computer Interface For Games,
Understand Methods Of Control & Forms Of Feedback And Be Able To Prototype An
Interface For Game Using HCI Techniques.

2. What Actually Makes A Game Successful?
What it takes to bring out that word ‘WOW’…
So, is it just the Art, just the Programming, just the design of the Main-Menu or
…..some specific components or only a specific component….
But, rather it is that overall effect of all of the components that brings out that
‘charisma’ and that quotient…
So, one of these components is the..
‘HCI ( Human Computer Interaction )’
A most Vital and an Important component which is related to the User-Interface and
acts like a medium between the user/player and the entire game-system.
Let’s Delve Further-----------------

3. So, What is this HCI?
• It’s a very wide discipline which studies all the elements linked to the human use of
computers and software
•devices which can be linked to computers such as video terminals, mobile devices
and computerized consoles.
• The main aim of HCI is to make the use of software and computerized devices as
simple and easy to understand as possible, with the aim of improving the ‘Efficiency
And Effectiveness’ of the actions taken at the same time
• HCI can cover stages like – ‘ from design of the user interface to the investigation of
the results obtained, passing via the search for innovative solutions and the
laboratory assessment of prototypes ‘
continued….

4. So, HCI has it’s use in many disciplines like :
• Information Technology & Software Engineering
• Creative Media like ‘ Video Games ’,….
• Cognitive & Experimental Psychology
• And Others…

5. Now, Let’s Have A Look At :
• HCI In Video Games
• HCI Principles

6. HCI In Video Games
• Games – really are an undying form of entertainment for everyone
• ‘Highly Engrossing’ and ‘Extremely Interactive’
• Depending on the platform..
• Whether it’s a PC game, or
• a mobile game played on an Android Device or
• a game played on a Hand-Held Device
• or on a Console or on any other Device…
‘ The User/Player Interacts With the Game-System Or The Interface Of The Game’
continued…..

7. HCI In Video Games
• It involves
‘The Layout, the Design & the Arrangement of the different Screens present in the
game like the Main-Menu, The Story-Board Section, Customization Screen etc…’
‘Forms Of Control and the other Feedback Mechanisms that are deployed in the game
to convey it till the User/Player’
EX : Look at the screenshot of ‘Shoot The Zombirds’ on an Android Smartphone.
‘ The Heads-Up Display For the Game is portrayed through
a very innovative way by displaying the information on
different graves ‘
• Game Designers make use of HCI Principles & Techniques to design the User-
Interface for the game..
• So,……………Let’s have a look at these Principles in short..

8. Principles Of HCI
• Many Principles & Methodologies have evolved since 1980
• So, there are plenty to choose from like…
• Nielsen’s 10 Principles
• Norman’s Rules From Design Of Everyday Things
• Tognazzini’s 16 Principles
• Shneiderman’s 8 Golden Rules
• All of these explain ‘ Usability Heuristics For User-Interface Design’. So, what’s Heuristics
Evaluation, right?
• ‘ It’s a - usability inspection method for Computer Software that helps to
identify usability problems in the User Interface (UI) design and involves evaluators
examining the interface and judging its compliance with recognized usability principles
(the "heuristics").
•Now, we’ll see – ‘ Nielsen’s 10 Principles’….

9. Nielsen’s Heuristics
The most widely used Heuristics for User-Interface, they are…
I. Visibility Of System Status : The system should always keep users informed about what is
going on, through appropriate feedback within reasonable time.
II. Match Between The System & The Real World : The system should speak the users' language,
with words, phrases and concepts familiar to the user, rather than system-oriented terms.
Follow real-world conventions, making information appear in a natural and logical order.
III. User Control & 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 through an
extended dialogue. Support undo and redo.
IV. Consistency & Standards : Users should not have to wonder whether different words,
situations, or actions mean the same thing. Follow platform conventions.
V. 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.
Continued…….

10. Nielsen’s Heuristics
Rest Of The Nielsen’s Heuristics Include………
• Recognition Rather Than Recall
• Flexibility & Efficiency Of Use
• Aesthetic & Minimalist Design
• Help Users Recognize, Diagnose & Recover From Errors
• Help And Documentation

11. Now, Let’s Consider The Principles :
• Visibility Of System Status
• Error Prevention
By considering a commercial game as an example.
Before, we go to the principles, let’s see what that game is….

12. “ A Classic Tennis Game On Android & iOS ”
‘Flick Tennis’ is a game by ‘Rolocule Games’, which is a Game Studio
located in Pune, India.

13. NOTE
The game is taken into consideration for the sake of explanation
purposes only.
Henceforth, any explanation or information will be given by
considering this game as an example.

14. Let’s Come Back To The Principles………………..,

15. Visibility Of System Status
‘The Scoreboard’ – keeps on updating during the game-play
Plus,
‘The Camera’ & ‘The Pause-Menu’ Buttons,
Another Example – ‘ Status Of The Episodes… Locked/Unlocked’
(Let me show you that practically by running the game on my Android Device)

16. Help & Documentation
•Information should be easy to search
•Should be focused on user’s task
•Should provide concrete steps to be carried out
•And of course, it should not be very large…
So, In Flick Tennis, we have…
A Separate ‘Tutorial’ Section
Basic
Intermediate
Advanced
&
A Separate ‘HELP’ Section
-Hitting Shots, Making Your Own Strategy, Scoring System etc…
-(Let me show you that by practically running the game on my Android Device)

17. Error Prevention
Users/Players should always be presented with
Proper ‘Error Messages’ and/or ‘Warnings’
Like –
Game-Crash Errors
Network Issues
Audio Errors etc…
Flick Tennis, also provides some ‘Error Messages’ to the User/Player
Let’s see one of them………,
Turn Over…

18. Error Prevention…Continued
This is a ‘Game Crash’ Error that Flick Tennis
Reports.
So, User/Player comes to know why the game
exited.
(This is a screenshot taken on my Android
Device and triggered only once in my case)
Imagine if the user is not provided Error
Messages….,
‘Users/Players will just go crazy’

19. Now, Let’s See.
• Flow-Chart Of The Game-Play Section
• Color Info

20. Flick Tennis College Wars :
Game-Play Screenshots
Flow-chart will explain how the game-play occurs in Flick Tennis/in
the above game-play screenshots
So, Turn Over….

21. Flow-Chart 1 – General Game-Play

22. Flow-Cart 2 – Score System Example SET 1

23. Flow-Cart 3 – SET 2 ADVANTAGE Point

24. Color Schemes
‘Flick Tennis’ does not make use of ‘Saturated Colors
The Background Colors have a good contrast with the Foreground
EX : Consider the Main-Menu of Flick Tennis.
‘The black background along with the faded comic page and the text in
White & other buttons constantly highlighted by a light blue tinge – makes
the main-menu really pleasing’.
Not many colors, so the user does not have to keep his eyes focusing at
many places causing ‘Visual Fatigue’

25. Now, Let’s Perform A Bit Of:
• Heuristic Evaluation of – The Pause-Menu

26. The Pause-Menu is a Semi-Transparent Rectangular Black Strip that
appears at the centre of the screen consisting of 6 options denoted by light
blue colored logos with the option name in light blue at bottom.
So,
Logos are fairly big and are easy to understand
EX : ‘?’ logo for the ‘HELP’ section
Player’s attention is drawn at the Pause-Menu at all times
No ambiguity is observed in the Pause-Menu
EX : simple text like ‘HELP’, ‘MATCHINFO’ etc are words which are understood
by all
Pause Menu

27. Now, Let’s See If We Can Enhance/Suggest Something To…
• ‘Character Selection’ Section – Flick Tennis

28. Character-Selection Section Of Flick Tennis
This is how the Character Selection Section Of Flick Tennis looks like.
I’ve some suggestions for this section which might make it look better
or even not (this is purely my opinion)
Let’s See How…

29. A Thumbnail Character Strip At The Bottom Like In The Image Above.
So User/Player can scroll left-right as well can select the desired character by just touching the
respective thumbnail.
Suggestion/s

30. A 3D Rotating Globe Effect – Landscape & Portrait Modes.
Whatever be the number of players, they will appear in a transparent 3D globe with only the
character appearing at the centre of the screen being the highlighted one.
Suggestion/s…Continued

31. THANK-YOU