Your SlideShare is downloading. ×
Akshay-UNIT 75-LO-1,2&3-FINAL
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Akshay-UNIT 75-LO-1,2&3-FINAL


Published on

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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