Hangman Project Report
HANGMAN PROJECT REPORT
HCI PRINCIPLES FOLLOWED
Early focus on user(s) and task(s) Empirical measurement 1 Iterative design 2
1 1
1
USABILITY TECHNIQUES ADOPTED
2
Aesthetic and minimalist design 2 Visibility of system status 3
Match between system and the real world User control and freedom 5
Error prevention 6
Help and documentation 7 Reference 8
5
HCI Principles Followed Early focus on user(s) and task(s)
The users for the game at least have a basic vocabulary of English words, and have basic computer skills like keyboard typing and mouse clicking. There are no constraint apart from these 2 assumptions. The English words skill for the users may vary hugely, so the game should have different difficulty levels. And the users may like to play on different operating systems such as Windows, Mac and Linux. Using language Java is a good choice, since it supports all the 3 main platforms.
Empirical measurement
I invite my friends to play my software prototype and give suggestions about it. For example, initially the open and save file is through input the file name, my friend thinks it is difficult to use, so change to use file dialogue instead.
Iterative design
Iterative design
I repeat the following step until the software is satisfying. 1. Design the GUI
2. Test
3. Analyze the feedback
For example, I first use images to draw the hang and man. But after testing, I found the image is not very clear, so I change to draw on the canvas using shape like lines, rectangles and circle to composite the image. The letter spacing and the overall layout also goes through many iterations to reach the final result.
Usability Techniques Adopted Aesthetic and minimalist design
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.
Design
I try to design the interface as intuitive and simple as possible. The GUI consists of 3 areas and nothing extra. It uses simple Border Layout with Hangman area in the top, letter area in the center and control area in the bottom. The control area consists of difficulty level combo box, “Start” game button, “Save” game button and “Load” game button. With minimal and clear GUI, it is very easy to use.
Figure 1. Minimalist Design GUI Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Design
Two areas in the GUI to show the game state, hangman area and letter area.
The hangman area shows how many mistakes the user has made to guess the current word. For example, an empty hang indicates no error made, a hang with whole man indicate 6 errors which also mean the user fails to guess current word,
a hang with only head shown indicates 1 error.
The hangman area shows how many mistakes the user has made to guess the current
already been guessed out. The user can always know the game status through the two
word. For example, an empty hang indicates no error made, a hang with whole man indicate 6 errors which also mean the user fails to guess current word,
a hang with only head shown indicates 1 error.
Figure 2. Left indicates 1 error. Right indicates 6 errors and the user fails.
The letter area shows the letters that have been guessed out and the letters that have not been guessed out.
When all letters shown and colored blue, it indicates that all letters been guessed out and the user succeeds in guessing the word.
When the user fails the guess, the area shows all the letters with blue letter indicating correct guessed out letter and red letter indicating letters that haven’t been guessed out.
Figure 3. Top indicates 3 letters already guessed out, the game not finished yet. Middle indicates game finished with two letters “II” still not guessed out. Bottom indicates all guessed out, the user succeeds.
In summary, the two areas visually show the user whether he/she has failed or succeed in guessing the word, how many errors have been made and which letters have
In summary, the two areas visually show the user whether he/she has failed or succeed in guessing the word, how many errors have been made and which letters have already been guessed out. The user can always know the game status through the two areas.
In addition, one of the two areas will be updated whenever the user input a letter. If the user inputs a correct letter, the letter area will be updated to show the new guessed out letter in the word. If the user inputs a wrong letter, the hangman area will be updated to show another body part of the man. So the system will give the user instant feedback through the two areas to tell whether the input letter is right or wrong.
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. Follow real-world conventions, making information appear in a natural and logical order.
Design
The words in the control clearly indicates the purpose, “Level 1” indicates the game difficulty level, “Start” indicates starting game in the current selected level, “Save” indicates saving the game to file, “Load” indicates loading game from file.
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 through an extended dialogue. Support undo and redo.
Design
Whenever the user doesn’t want to play current game, he/she can click “Start” button to start a new game or using “Load” button to load a previous saved game. Whenever the user wants to change difficulty level, he/she can use “Level” combo box to change difficulty and click “Start” button.
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
Design
Using javaFx FileChooser to input file name to be saved or open game file instead input file name directly. In this way, the program can prevent the user to input invalid path.
In addition, The program configures the FileChooser to only input or open file ending with “.state” to prevent from opening other format file. Another benefit of using File Chooser with specified file format is that it makes the process more intuitive to use, since File Chooser uses system default save and open dialog.
Figure 4. Save Game Dialog.
Figure 5. Open Game Dialog.
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. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
Design
Although the software is very easy to use, I outline the steps to use the software in the file ReadMe.txt.
Reference
1. https://campus.cs.le.ac.uk/teaching/resources/CO2001/week.php
2. https://www.nngroup.com/articles/ten-usability-heuristics/
3. https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction#Design