RPG Turn-Based Strategy UI
This interface effectively uses color coding and iconography to clearly differentiate character stats, locations, and action choices, enhancing quick comprehension. However, the dense text and small font sizes could hinder readability, and the user might benefit from more spacing and clearer visual grouping to avoid cognitive overload.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
4
Color & Contrast3
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
1Critical
10Major
16Moderate
1Minor
No confirmation for potentially destructive '사냥' (Hunt) action
Critical
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The '사냥' action likely initiates an attack or hunt, a potentially destructive choice, but no visible confirmation dialog or undo option is present to prevent accidental activation.
Why it Matters
Players might accidentally engage in a negative or irreversible action causing frustration or game loss.
How to Fix
Implement a confirmation step or an undo option when selecting the '사냥' action to safeguard against accidental triggers.
Issue Highlights
Action buttons lack clear primary CTA emphasis
Major
Conversion & Actions
The Problem
The three action choices at the bottom ('사냥', '경계', '은신') appear as equally weighted options with no distinctive styling to indicate the recommended or primary choice, which may cause decision paralysis.
Why it Matters
Users might be unsure which action to prioritize or which is more important, leading to slower decisions or abandonment.
How to Fix
Use visual hierarchy (color, size, or position) to highlight the primary action among the three available choices.
Issue Highlights
Low contrast of purple text on dark background in action selection
Major
Color & Contrast
The Problem
The purple text labeled '은신' and the smaller description text below it is displayed on a very dark blue background, resulting in low contrast that likely falls below WCAG AA standards.
Why it Matters
Users with low vision or in bright environments might have difficulty reading this text, reducing accessibility and usability.
How to Fix
Increase the brightness or saturation of the purple text or lighten the background behind it to meet a contrast ratio of at least 4.5:1 for normal text per WCAG AA.
Issue Highlights
Unclear meaning of ??? markers
Major
Content Readability & Clarity
The Problem
The ??? markers appear multiple times throughout the UI without any visible explanation or tooltip, making their purpose unclear.
Why it Matters
Users may be confused about what the ??? symbols represent, which can reduce comprehension and overall user confidence.
How to Fix
Add tooltips, legends, or clearer labels explaining what ??? means in this context.
Issue Highlights
No label explaining survival status icons
Major
Content Readability & Clarity
The Problem
The '생존자 현황' section has multiple '?' icons below it and only one labeled survivor on the right, but lacks clear labeling or legend describing what the icons indicate.
Why it Matters
Users may not understand the meaning of these icons or their status implications, reducing clarity.
How to Fix
Add legend or clear text descriptions to clarify the meaning of '?' icons and the survivor’s label.
Issue Highlights
Missing clear environment and role orientation
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface shows location references in Korean (e.g., '현재 위치: 학교' and multiple location panels), but lacks a clear, consistently visible breadcrumb or header to establish user's current role, environment, or broader navigation context beyond the immediate location.
Why it Matters
Users may feel lost or unsure about their current environment or role, which can decrease confidence and slow decision-making in navigation-heavy or strategic interfaces.
How to Fix
Add a consistent, clearly visible location breadcrumb or header that highlights current environment and user role context explicitly above or near the main content area.
Issue Highlights
No Trust or Confirmation for Aggressive 'Hunt' Action
Major
Tone, Friendliness & Delight
The Problem
The '사냥' (Hunt) action is an aggressive choice to actively seek enemies, but there is no visible trust signal, confirmation prompt, or reassuring copy before selection.
Why it Matters
Users may feel uncertain or anxious about choosing a potentially risky action without clear encouragement or confirmation, which can lower user confidence and satisfaction.
How to Fix
Add a brief reassuring note or confirmation prompt highlighting consequences or safety of the action, or show trust-building language to guide decision-making.
Issue Highlights
Map area buttons are too small for comfortable touch
Major
Accessibility & Input Ergonomics
The Problem
The buttons in the '후유키 시 맵' section appear quite small horizontally and vertically, likely below the recommended 44x44 pixel touch target size.
Why it Matters
Small touch targets increase the chance of user errors and frustration, especially on touch devices.
How to Fix
Increase the clickable button sizes in the map area to at least 44x44 pixels with sufficient padding around text and icons.
Issue Highlights
Bottom circular survivor icons have small tap targets
Major
Accessibility & Input Ergonomics
The Problem
The circular icons representing survivors at the bottom are quite small, making it difficult to tap accurately.
Why it Matters
Small or tightly spaced icons increase difficulty for users to interact, especially on mobile touchscreens.
How to Fix
Increase the size and spacing of survivor icons to meet or exceed recommended touch area sizes.
Issue Highlights
Unclear how to confirm action selection
Major
Flow & States Completeness
The Problem
The action selection section shows three options (사냥, 경계, 은신) but there is no visible button or instruction to confirm or submit the chosen action.
Why it Matters
Without a clear next step, users may be confused about how to proceed, which can interrupt flow and cause frustration.
How to Fix
Add a clearly labeled confirmation button or an instruction that the user can click or tap to proceed after selecting an action.
Issue Highlights
Unlabeled and unclear icons in map location blocks
Major
Visual Consistency, Imagery & Media
The Problem
Multiple small icons appear next to locations (e.g., trees, buildings, castles, clouds) without labels or legend explaining their meanings.
Why it Matters
Users may not understand what each icon represents, increasing cognitive load and impairing decision making.
How to Fix
Add a legend or tooltip labels to explain icon meanings or provide accessible text descriptions on hover or tap.
Issue Highlights
Inconsistent text color styling for location labels
Moderate
Visual Consistency, Imagery & Media
The Problem
The location labels within the boxed map section use different text colors such as red, blue, green, yellow/orange without a clear pattern, causing inconsistency.
Why it Matters
Inconsistent color usage can confuse users as they might infer different meanings from the colors or perceive the UI as unprofessional.
How to Fix
Standardize the text color for location labels or define a clear color coding system with legend for user understanding.
Issue Highlights
Mixed border and text highlight styles on map location buttons
Moderate
Visual Consistency, Imagery & Media
The Problem
Map locations have differing highlight styles: some have a yellow border with filled background (one location), others have no fill but colored text, and some locations show red text with no border.
Why it Matters
This inconsistent visual treatment may reduce clarity about the current selection or status of each location, causing user confusion.
How to Fix
Apply a uniform style approach for all location buttons, such as consistent use of border, background fill, and text color to indicate selection or status.
Issue Highlights
Misalignment of action option cards in action selection
Moderate
Visual Consistency, Imagery & Media
The Problem
Action selection cards ('사냥', '경계', '은신') are horizontally spaced unevenly. The first card is left aligned but the subsequent cards are spaced inconsistently causing off-grid appearance.
Why it Matters
Misalignment of selectable actions can distract users and degrade the visual structure of the UI, reducing perceived quality.
How to Fix
Align all action option cards evenly with consistent paddings and margins on a uniform grid system.
Issue Highlights
Action buttons are densely packed and lack spacing
Moderate
Navigation & Structure
The Problem
The three large buttons for action selection ('사냥', '경계', '은신') are placed closely side by side inside a wide container with minimal padding around each. This tight grouping reduces clarity and can lead to unintentional clicks.
Why it Matters
Users might misclick the wrong action in a critical moment, causing frustration or unintended gameplay consequences.
How to Fix
Widen spacing between action buttons and add clear hover or focus states to differentiate them distinctly.
Issue Highlights
Excessive Information Density in Location Map Section
Moderate
Efficiency & Cognitive Load
The Problem
The location map area contains many small boxes with colored text, icons, and multiple types of information densely packed together, which can overwhelm users visually.
Why it Matters
High information density in a small area increases cognitive effort, making it harder for users to quickly identify relevant options and understand map details.
How to Fix
Simplify the location map by grouping related areas, reducing redundant icons and text, or using hover or expandable elements to show additional info only when needed.
Issue Highlights
Spacing between map buttons is insufficient
Moderate
Accessibility & Input Ergonomics
The Problem
Several map buttons are placed very close horizontally and vertically, with minimal spacing between touch targets.
Why it Matters
Closely packed interactive elements can lead to accidental taps on the wrong button.
How to Fix
Add more spacing or padding between the buttons to ensure easier target distinction and prevent mis-taps.
Issue Highlights
Yellow text on dark background has borderline visibility
Moderate
Color & Contrast
The Problem
Yellow text such as '제1일차 밤' near the top right is shown on a dark blue background with a contrast ratio that appears marginal or slightly below WCAG AA for large text.
Why it Matters
Users might struggle to read this important status text, impacting comprehension and user experience.
How to Fix
Use a slightly brighter or deeper yellow, or add a subtle text shadow or background highlight to improve contrast.
Issue Highlights
Red text with small font and icons blended on dark background
Moderate
Color & Contrast
The Problem
The red labels such as '후유키 대교', and the red icons inside small boxes have reduced readability on the dark background, likely failing WCAG AA for normal text.
Why it Matters
Users with color vision deficiencies or in low-light conditions may miss critical information conveyed by these texts.
How to Fix
Increase text brightness or add outlines/shadows, or use a lighter red/pink with better contrast against dark background.
Issue Highlights
Blue text for place names on dark background has low contrast
Moderate
Color & Contrast
The Problem
Place name texts in blue, such as '미야마 주택가' and '시가지', are low contrast against the dark UI background, risking WCAG AA non-compliance.
Why it Matters
Difficulty reading place names can confuse users, especially those with visual impairments.
How to Fix
Use a brighter blue or add highlight/outline to improve text contrast against the background.
Issue Highlights
Crowded navigation options in location map
Moderate
Navigation & Structure
The Problem
The location map area contains nine clickable location panels spaced tightly within limited area, each with icons, text, and variable highlight states. The similarity and density of these buttons may cause confusion or misclicks.
Why it Matters
Users might struggle to quickly identify the correct location to select, potentially leading to mistakes or delayed interaction.
How to Fix
Increase spacing around clickable location items and visually differentiate active or current location more clearly to improve scanability and reduce accidental clicks.
Issue Highlights
Aggressive Action Uses Red without Empathy
Moderate
Tone, Friendliness & Delight
The Problem
The '사냥' (Hunt) button is styled in bright red, signaling danger or aggression, but lacks any softening or encouraging text to mitigate harshness in tone.
Why it Matters
The harsh red without empathetic wording may create a visual tone that feels too intimidating or stressful in a game or narrative requiring nuanced emotional engagement.
How to Fix
Incorporate friendlier phrasing or supportive language near the red action button, or adjust red tone to be less aggressive while preserving clarity.
Issue Highlights
Multiple Action Choices Without Contextual Guidance
Moderate
Efficiency & Cognitive Load
The Problem
The '행동 선택' (action selection) area presents three distinct options (hunting, vigilance, stealth) without additional contextual help or recommendations to guide choice.
Why it Matters
Users may experience difficulty deciding which action to select, leading to slower interaction or incorrect choices in a critical gameplay step.
How to Fix
Add clear tooltips, visual cues, or a recommended default action based on the current scenario to support faster decision-making.
Issue Highlights
No visible action for returning or canceling
Moderate
Flow & States Completeness
The Problem
There is no visible button or link to go back, cancel, or change current selections, which may trap the user in a single screen state.
Why it Matters
Users may want to rethink choices or quit without committing, and lack of an exit or cancel option can cause frustration or abandonment.
How to Fix
Add a cancel or back button clearly visible to the user.
Issue Highlights
Action buttons lack distinct visual hierarchy
Moderate
Strategic Design
The Problem
The three action selection buttons ('사냥', '경계', '은신') have minimal visual differentiation beyond simple color changes, making it difficult to quickly identify the primary or recommended action.
Why it Matters
Users may struggle to quickly decide which action is primary or safest, potentially slowing decision-making or causing mistakes.
How to Fix
Increase visual contrast and differentiation for the primary or recommended action using size, color, or emphasis beyond just text color changes.
Issue Highlights
Insufficient hierarchy between action options
Moderate
Content Readability & Clarity
The Problem
The action options '사냥', '경계', '은신' have similar font size and weight, which flattens the hierarchy and may hinder quick scanning and decision-making.
Why it Matters
Users might take longer to distinguish primary actions or may be unsure about relative importance of options.
How to Fix
Increase size or weight of primary actions or use distinct colors or styles to create clearer hierarchy among options.
Issue Highlights
Map location and status information visually conflated
Moderate
Strategic Design
The Problem
The map locations contain mixed information (location name, icons, bonus effects) that visually compete for user attention, without clear prioritization or grouping.
Why it Matters
Users may find it confusing to quickly parse which locations have strategic value or special bonuses, slowing decision making or causing oversight.
How to Fix
Group location names, bonuses, and status effects separately with clearer visual hierarchy or iconography to support quicker scanning.
Issue Highlights
Survivor Status Board Uses Symbols Without Explanation
Minor
Efficiency & Cognitive Load
The Problem
The survivor status section at the bottom uses symbols like '?' and '???' but does not provide an on-screen legend or explanation for these icons.
Why it Matters
Users must remember or guess the meaning of symbols, increasing mental effort and risk of misunderstanding survivor conditions.
How to Fix
Include an accessible legend or tooltip on hover to clarify symbols and statuses shown.
Issue Highlights