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.

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

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

So, HCI has it’s use in many disciplines like :

• Information Technology & Software Engineering

• Creative Media like ‘ Video Games ’,….

• Cognitive & Experimental Psychology

• And Others…

Now, Let’s Have A Look At :

• HCI In Video Games

• HCI Principles

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

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 througha very innovative way by displaying the information ondifferent 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..

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’….

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

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

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

“ A Classic Tennis Game On Android & iOS ”

‘Flick Tennis’ is a game by ‘Rolocule Games’, which is a Game Studio located in Pune, India.

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.

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

Visibility Of System Status

‘The Scoreboard’ – keeps on updating during the game-playPlus,

‘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)

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

BasicIntermediate

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)

Error Prevention

Users/Players should always be presented with

Proper ‘Error Messages’ and/or ‘Warnings’

Like – Game-Crash Errors

Network IssuesAudio Errors etc…

Flick Tennis, also provides some ‘Error Messages’ to the User/Player

Let’s see one of them………,

Turn Over…

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’

Now, Let’s See.

• Flow-Chart Of The Game-Play Section

• Color Info

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

Flow-Chart 1 – General Game-Play

Flow-Cart 2 – Score System Example SET 1

Flow-Cart 3 – SET 2 ADVANTAGE Point

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’

Now, Let’s Perform A Bit Of:

• Heuristic Evaluation of – The Pause-Menu

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 understandEX : ‘?’ logo for the ‘HELP’ section

Player’s attention is drawn at the Pause-Menu at all times

No ambiguity is observed in the Pause-MenuEX : simple text like ‘HELP’, ‘MATCHINFO’ etc are words which are

understood by all

Pause Menu

Now, Let’s See If We Can Enhance/Suggest Something To…

• ‘Character Selection’ Section – Flick Tennis

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…

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

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

THANK-YOU