Microsoft Word – HCI.docx
Hangman Project Report
HANGMAN PROJECT REPORT …………………………………………………………………………………. 1
HCI PRINCIPLES FOLLOWED …………………………………………………………………………………… 1
Early focus on user(s) and task(s) …………………………………………………………………………. 1
Empirical measurement ………………………………………………………………………………………. 2
Iterative design ………………………………………………………………………………………………….. 2
USABILITY TECHNIQUES ADOPTED ………………………………………………………………………….. 2
Aesthetic and minimalist design …………………………………………………………………………… 2
Visibility of system status …………………………………………………………………………………….. 3
Match between system and the real world ……………………………………………………………. 5
User control and freedom ……………………………………………………………………………………. 5
Error prevention …………………………………………………………………………………………………. 5
Help and documentation …………………………………………………………………………………….. 7
FURTHER IMPROVEMENT ……………………………………………………………………………………… 7
Score System ……………………………………………………………………………………………………… 7
Social Function …………………………………………………………………………………………………… 7
REFERENCE …………………………………………………………………………………………………………. 7
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. Guessing
the same word lists in every run would be boring and the users would like to guess
different word lists in different run, so every time, the user starts the software, it will
randomly choose 50 different words from 4 text files for the 4 difficulty levels.
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
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
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.
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 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.
Further Improvement
Score System
If I had more time, I will add score system to my software and score area to my GUI. It
will quantify the user’s performance and only allow the user to enter next level when
he/she reaches certain threshold. I believe this score system will motivate our users to
challenge themselves.
Social Function
I also want to use network technique to implement social function in my game
software. It will allow user to register and login in and see their ranks among their
friends and it even can allow one user to challenge another user to guess the same
word. I believe this function will make the game much more fun.
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