Game Title Selection Screen
The design effectively uses bold typography and contrasting colors to draw immediate attention to the game title and interactive buttons. However, the interface could improve in clarity by organizing button labels more consistently and enhancing language localization for a broader audience.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity2
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions0
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load1
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
1Critical
9Major
8Moderate
2Minor
Potentially destructive '7인 지정 소환' action lacks confirmation
Critical
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The red button labeled '7인 지정 소환' suggests a high-impact or destructive action (often red is used for destructive or irreversible actions). There is no visible indication of a confirmation dialog or undo option before executing this action.
Why it Matters
Users may accidentally trigger a destructive action without realizing the consequences, leading to frustration, errors, or data loss.
How to Fix
Implement a confirmation prompt or undo option before performing this action to help users avoid mistakes.
Issue Highlights
Inconsistent Button Styles Below Description Text
Major
Visual Consistency, Imagery & Media
The Problem
The buttons below the description text use inconsistent background colors (yellow, blue, red, and gray) and border styles, with some having filled backgrounds and others outlined. This creates a visual inconsistency.
Why it Matters
Inconsistent button styling increases cognitive load, making it harder for users to understand button hierarchy and functionality at a glance.
How to Fix
Standardize button background colors, border styles, and text colors to follow a consistent design system. Group related actions with similar styles.
Issue Highlights
Missing Navigation Context and Location Indicators
Major
Orientation Missing (Environment/Role/Location)
The Problem
The screen shows a central title and several buttons but lacks clear orientation indicators like breadcrumbs, headings, or highlighted navigation states that clarify the user's current location or role within the app.
Why it Matters
Users may become confused about where they are in the app, leading to disorientation and difficulty navigating back or understanding available options.
How to Fix
Add visible location indicators such as highlighted active states on navigation buttons, breadcrumbs, or clear headings that denote the current screen or user role.
Issue Highlights
Poor contrast of gray text on dark background
Major
Color & Contrast
The Problem
The medium gray text in the center of the screen has low contrast against the dark blue background, likely below WCAG AA standards for normal text.
Why it Matters
Users with low vision or in bright environments may have difficulty reading the text, impacting accessibility and comprehension.
How to Fix
Increase the contrast by using a lighter gray or white color for the text or darken the background behind it.
Issue Highlights
Red text inside red-bordered button has insufficient contrast
Major
Color & Contrast
The Problem
The red text labeled '7인 지정 소환' inside a red border on the dark background offers poor contrast and is likely below WCAG AA standards for readability.
Why it Matters
This reduces readability, especially for users with color vision deficiencies or low vision, making the label harder to understand.
How to Fix
Use a lighter or white text color within the button or provide a solid background behind the text for contrast.
Issue Highlights
Primary Navigation Elements Not Clearly Distinguished
Major
Navigation & Structure
The Problem
The interactive elements (buttons) are clustered centrally with mixed colors and styles but do not visually separate primary navigation from secondary actions or provide a clear navigation bar or menu.
Why it Matters
Users may struggle to identify which buttons represent main navigation versus secondary functions, which can impede quick and effective navigation.
How to Fix
Designate a clear primary navigation area with consistent and distinct styling, grouping main navigation actions separately from secondary ones.
Issue Highlights
Unclear primary call-to-action among multiple buttons
Major
Conversion & Actions
The Problem
The screen displays multiple buttons with different colors and labels such as '성배전쟁 참전', '촉매소환', '7인 지정 소환', '수동 전투 참전', and '랭킹'. It is not visually clear which button is the main primary call-to-action to initiate the primary user task.
Why it Matters
When users are presented with multiple calls-to-action without a clear primary focus, they may feel confused about the intended next step, reducing conversion and increasing bounce risk.
How to Fix
Designate one button as the primary call-to-action with distinct emphasis via size, color, or placement so users can instantly identify the main action to take. Secondary actions can be visually de-emphasized.
Issue Highlights
No clear guidance on what to do next
Major
Flow & States Completeness
The Problem
The screen contains multiple buttons and text but does not clearly indicate which action is the primary next step or what the user is expected to do first.
Why it Matters
Users may become confused about where to click or how to proceed, leading to frustration and abandonment.
How to Fix
Highlight the primary action button with a clear label and visual precedence. Provide brief instructions or tooltips to guide the user on what action to take first.
Issue Highlights
Lack of Clear Visual Hierarchy and Button Differentiation
Major
Strategic Design
The Problem
Multiple buttons use similar colors and styles (yellow and red outlined boxes with text), creating visual confusion and reducing clarity regarding the primary action. The layout centers all elements but lacks spacing or other visual cues to guide the user’s focus efficiently.
Why it Matters
Users may struggle to quickly understand available options or which action is most important, resulting in slower decision-making or abandonment.
How to Fix
Establish a clearer visual hierarchy by differentiating primary and secondary buttons through distinctive colors, sizes, or placement. Add padding or spacing around buttons to visually separate them.
Issue Highlights
Confusing Text Content Without Clear Explanation or Context
Major
Strategic Design
The Problem
The Korean text block under the main title appears as a poetic or abstract statement without clarification or context on how it relates to user actions or game play, which might confuse users unfamiliar with the theme.
Why it Matters
Lack of clear context can impede user understanding of the screen's purpose and reduce engagement or willingness to proceed.
How to Fix
Include a concise, clear subtitle or descriptive text that explains the function of the screen and the purpose of the buttons below, tailored to the user's likely goals.
Issue Highlights
Lack of clear text hierarchy for subtitle and body
Moderate
Content Readability & Clarity
The Problem
The subtitle and body text appear to be similar in size and weight, making it difficult to distinguish main points or headings from supporting text.
Why it Matters
Users may have difficulty scanning the text and understanding the information structure, leading to comprehension drop-off.
How to Fix
Increase font size or weight of the subtitle and/or add spacing between sections to create better visual hierarchy.
Issue Highlights
Misaligned Buttons in Central Cluster
Moderate
Visual Consistency, Imagery & Media
The Problem
The buttons below the text are not aligned horizontally or vertically in a consistent grid pattern, creating a scattered appearance.
Why it Matters
Misaligned elements reduce visual harmony and can distract users, thereby impairing the professional perception and readability of the UI.
How to Fix
Align buttons to a clear vertical or horizontal grid layout with consistent spacing to enhance visual order.
Issue Highlights
Small tap area on '랭킹' button
Moderate
Accessibility & Input Ergonomics
The Problem
The '랭킹' button at the bottom center appears to be smaller than the recommended minimum size for touch targets (approximately less than 44x44 pixels).
Why it Matters
Small tap targets can increase the chance of user errors and make it difficult for users, especially on mobile devices, to activate the button accurately.
How to Fix
Increase the size of the '랭킹' button to at least 44x44 pixels or add padding around the button to increase the touch target area without affecting the layout.
Issue Highlights
Too many action buttons clustered in main UI
Moderate
Efficiency & Cognitive Load
The Problem
There are five distinct clickable buttons (성배전쟁 참전, 촉매소환, 7인 지정 소환, 수동 전투 참전, 랭킹) presented closely together, which may overwhelm the user with simultaneous action choices.
Why it Matters
Users may experience difficulty quickly deciding which option to take, leading to hesitation or errors.
How to Fix
Group related actions under expandable menus or use progressive disclosure to show fewer choices at once.
Issue Highlights
Dark blue text on blackish-blue background has low contrast
Moderate
Color & Contrast
The Problem
The blue text inside the blue-bordered button ('촉매소환') blends into the dark background, resulting in insufficient contrast for easy readability.
Why it Matters
Users may struggle to identify the button label quickly, reducing usability and increasing cognitive load.
How to Fix
Use a lighter text color or a different background shade inside the button for better color separation.
Issue Highlights
Clustered Buttons Cause Navigation Overload
Moderate
Navigation & Structure
The Problem
Multiple buttons with different colors and styles are placed close together centrally, which may lead to difficulty distinguishing and selecting the intended action quickly.
Why it Matters
Users might click the wrong button or hesitate, reducing the usability and flow of the app.
How to Fix
Increase spacing between buttons, standardize button design, or group related actions to reduce visual noise and improve clarity.
Issue Highlights
Buttons '성배전쟁 참전' and '촉매소환' are closely spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The yellow '성배전쟁 참전' button and blue '촉매소환' button are directly adjacent with very little spacing between them, likely under the recommended minimum spacing of 8 pixels for touch targets.
Why it Matters
Buttons placed too close together may cause accidental taps on the wrong button, leading to user frustration and errors.
How to Fix
Increase the horizontal spacing between these two buttons to at least 8 pixels to allow users to clearly distinguish and tap the intended button.
Issue Highlights
Buttons '7인 지정 소환' and '수동 전투 참전' are too close
Moderate
Accessibility & Input Ergonomics
The Problem
The red '7인 지정 소환' button and yellow '수동 전투 참전' button are placed with minimal vertical spacing that likely falls below recommended touch spacing guidelines.
Why it Matters
Insufficient spacing increases the risk of tapping the wrong button, causing user errors and frustration.
How to Fix
Increase vertical space between these buttons to at least 8 pixels.
Issue Highlights
'랭킹' label may not appear interactive enough
Minor
Accessibility & Input Ergonomics
The Problem
The '랭킹' element at the bottom center looks like a small text label or badge with subtle styling that may not clearly indicate it is interactive.
Why it Matters
Users may not recognize this as a clickable element, reducing discoverability of important functionality.
How to Fix
Increase visual affordance such as adding a distinct button shape, background color, border, or hover effect to imply this text is clickable.
Issue Highlights
Poetic Korean text may require user interpretation without clear UI guidance
Minor
Efficiency & Cognitive Load
The Problem
Centered poetic or prose text occupies space but does not provide explicit instructions or context for next steps, requiring users to remember or infer meaning.
Why it Matters
Users unfamiliar with the game's lore or purpose may find it harder to understand what actions to take next.
How to Fix
Add short explicit instructions or tooltips near buttons explaining their function and relation to the text.
Issue Highlights