Sprint 2 - Team 7 task ticket 2: Design display of the detailed eviction card and new window

[LIU-Evelyn]

Description

Task: Design display effects of detailed eviction cards and information/clue windows
Feature: Basic image and sub-feature of Detailed eviction cards: Goal 2

Based on feedback from completing goal 1, the display of detailed eviction cards has been determined through the studio. The interaction process will include two features: move mouse to cards (show the related basic information of NPC); click on cards (pop up a new window to show the related clues). Therefore, in this task, team will design the image and effect of the menu according to this.

Example

• Detailed Eviction Cards: Design the detailed interface for the eviction card, which mainly adds the Image, Name and Gender of NPCs.
• Information/clues Windows: Each NPC will have an eviction card (for the user to choose the traitor he considers). In order to help the player chooses the traitor more accurately, the information/clues window will popped up after he clicking the eviction card.

Dependencies

• Information about eviction character relies on storyline and character interactions (Sprint 1 - Team 5 Feature ticket: Instructions & Storyline #7 and Sprint 1 - Team 9 Feature Ticket : Communication with NPC #9 ).
• The basic image of NPC that shown on the cards depend on character design (Sprint 1 - Team 1 Character Design #13 ).
• The Player Eviction Menu (Sprint 1 - Team 7 Feature ticket: Player Eviction Menu / GUI #4 ).

Milestones

Steps that need to be completed for this task:

• Step 1: Design draft of Detailed Eviction Card and Information/clues Window (Sep. 6)
• Step 2: Improve the final image and effect of the feature, such as adding hovering, adjusting colors, etc. (Sep. 7)

Completion Deadline: Sep. 7

Additional goals

Documentation

• Main description of feature
• User survey for detailed eviction card

Member

• Yingxin Liu (@LIU-Evelyn ) (Yingxin LIU)
• Kexin Du (@motaA0309 ) (Kexin Du)

[LIU-Evelyn]

In order to let the player discover the extra functions of the card, the mouseover effect of the eviction card is designed. The color of the selected card will be more vivid (highlighted) (right) than the normal card (left).

Normal	Hover

[LIU-Evelyn]

September 5th: The initial idea of the information/clues window，in order to achieve the dreamy feeling of underwater elements, we set the background of the original window to be translucent：

with translucent background	without translucent background

[motaA0309]

September 6th: To better fit the theme of the game, some decorative elements have been replaced, such as the addition of starfish, shells, and dolphins.

with translucent background	without translucent background

[motaA0309]

September 10th: Some users feel that the translucent window looks too similar to the background, and when the eviction card is added with npc information, it may affect the text display of the clue window (it looks messy). Therefore, we replaced the window with a scroll, and increased the transparency (90%), then made some optimizations. The final design image:

[LIU-Evelyn]

Designed basic info about NPC: Design process