1. Gameplay screen
1.1. Visual - None-diegetic UI
1.1.1. HP bar and icons
1.1.2. HP bar decreases
1.1.2.1. plays feedback animation
1.1.3. HP bar increases
1.1.3.1. plays feedback animation
1.1.4. Skill or MP bar and icons
1.1.4.1. Skill or MP bar decreases
1.1.4.1.1. plays feedback animation
1.1.4.2. Skill or MP bar increases
1.1.4.2.1. plays feedback animation
1.1.5. switch skill icons
1.1.6. score dislay
1.1.7. money credit display + icon
1.1.8. collectables display + icon
1.1.8.1. If obtain collectables, play feedback animation
1.2. Visual - Spactial UI
1.2.1. character damage number display + animation
1.2.2. enemy damage number display + animation
1.2.3. character emotions icons
1.3. Usability
1.3.1. HP bar or icons contrast from all types of bacground
1.3.2. Skill or MP bar contrast from all types of background
1.3.3. HP bar or icons + Skill or MP bar height is about 1/5 of screen
1.3.4. HP bar or icons + Skill or MP bar width is about 1/3 of screen
1.3.5. switch skill icons contrast from all types of background
1.3.6. score display contrast from all types of background
1.3.7. money credits display + icons contrast from all types of background
1.3.8. collectables display + icon contrast from all types of background
1.3.9. UI is layout with reference to rule of thirds/golden ratio
1.3.10. UI is layout with consideration user reading order
1.3.11. damage number display contrasts from all types of background.
1.4. Funtionality
1.4.1. HP bar or Icon will increase or decrease with gameplay
1.4.1.1. HP bar decrease when damaged by enemies
1.4.1.2. HP bar increase when step on health or special item
1.4.2. Skill or MP bar will increase or decrease with gameply
1.4.2.1. Skill / MP bar increase when eliminate or damage enemy
1.4.2.2. Skill / MP bear decrease when special ability or skill is activated
1.4.3. Skill icons can be switched or toggled
1.4.4. score display updates with gameplay
1.4.5. money credit display updates with gameplay
1.4.5.1. Money credit increases when money credit is obtained
1.4.5.2. Money credit decreases when money credit is used
1.4.6. collectables display updates with gameplay
1.4.6.1. collectables increases
2. Introduction screen
2.1. Visuals
2.1.1. Studio logo animation last for 5secs
2.1.1.1. Studio logo animation disappear
2.1.2. Skip studio animation button - neutral state
2.1.2.1. if mouse over button is true, then button - mouse over state
2.2. Usability
2.2.1. logo contrast well with background
2.2.1.1. if logo colour == contrast with background, then logo colour stays the same - else logo colour changes.
2.3. Functionality
2.3.1. Skip studio animation button
2.3.1.1. If keyboard is pressed, studio animation skips
3. Title Screen
3.1. Visuals
3.1.1. Enters screen transition animation
3.1.2. Game logo graphic appears
3.1.3. Start game button
3.1.3.1. Neutral state
3.1.3.2. Mouse over state
3.1.3.2.1. If mouse hover on start game button, play animation
3.1.3.3. hit state + animation
3.1.3.3.1. If user press the start game button, play animation
3.1.4. Options button
3.1.4.1. Neutral state
3.1.4.2. Mouse over state
3.1.4.2.1. If mouse hover on option button, play animation
3.1.4.3. hit state + animation
3.1.4.3.1. If user press the option button, play animation
3.1.5. Credits button
3.1.5.1. Neutral state
3.1.5.2. Mouse over state
3.1.5.2.1. If mouse hover on credits button, play animation
3.1.5.3. hit state + animation
3.1.5.3.1. If user click on credits button, play animation
3.1.6. Copyright statement
3.1.7. Background graphics
3.1.8. Exit screen transition animation
3.2. Usability
3.2.1. Buttons can be clearly seen
3.2.2. Logo is position at point of focus (rules of third)
3.2.3. Logo size occupies at least 1/4 of screen
3.2.4. Logo contrasts from background
3.3. Sound
3.3.1. Background Music (BGM)
3.3.2. Start Game button
3.3.2.1. If mouse over start game button, play sound effect
3.3.2.2. If user click on the start game button, play sound effect
3.3.3. Options button
3.3.3.1. If mouse over options button, play sound effect
3.3.3.2. If user click on options button, play sound effect
3.3.4. Credits button
3.3.4.1. If mouse over credits button, play sound effect
3.3.4.2. If user click on credits button, play sound effect
3.4. Functionality
3.4.1. Start game button
3.4.1.1. If user click on start game button, screen displays game
3.4.2. options button
3.4.2.1. if user click on options button, screen goes to option
3.4.3. credits button
3.4.3.1. If user click on credits option, screen goes to credit
4. Credit Screen
4.1. Visuals
4.1.1. enters screen transition animation
4.1.2. names and roles display
4.1.3. source credit display
4.1.4. back button
4.1.4.1. neutral state
4.1.4.1.1. nothing happens
4.1.4.2. mouse over state
4.1.4.2.1. plays animation
4.1.4.3. hit state + animation
4.1.4.3.1. exits credit screen to title screen
4.1.5. background graphics
4.1.6. exit screen transition animation
4.1.6.1. when exit screen transition, play animation
4.2. Sound
4.2.1. Background music
4.2.2. Back button
4.2.2.1. when mouse over, play sound effect
4.2.2.2. when user click on back button, play sound effect
4.3. Usability
4.3.1. Back button can be clearly seen
4.3.2. Back button is positioned at lower right or left of screen.
4.4. Functionality
4.4.1. Back button is functioning correctly