Job Listing Search Page
The interface effectively uses clear labels and icons for filtering job listings, making it easier for users to navigate and find relevant positions. However, there are areas like spacing consistency, clearer contrast for interactive elements, and search feedback that could be improved to enhance overall usability and accessibility.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast4
Content Readability & Clarity3
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions1
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load1
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
19Moderate
1Minor
Low contrast on placeholder search input text
Major
Color & Contrast
The Problem
The placeholder text 'Ажлын зар хайх' in the search input uses a light gray color on a white background, resulting in low contrast likely below WCAG AA standards.
Why it Matters
Low contrast placeholder text makes it difficult for users with visual impairments or in bright environments to see the search prompt.
How to Fix
Increase the contrast of the placeholder text by using a darker gray or near-black color that meets at least 4.5:1 contrast ratio against the white background.
Issue Highlights
Search input field lacks visible label
Major
Accessibility & Input Ergonomics
The Problem
The search input field near the top center with placeholder text 'Ажлын зар хайх' lacks a visible label associated to it.
Why it Matters
Without visible labels, screen reader users and keyboard users may have difficulty understanding the purpose of the input, reducing usability.
How to Fix
Add a visible label or aria-label describing the input purpose, or ensure the placeholder is supplemented with accessible labeling.
Issue Highlights
Missing clear current page or section indicator
Major
Orientation Missing (Environment/Role/Location)
The Problem
The top navigation and filter bar do not indicate the current user's location within the site or app context clearly. There is no active highlight or breadcrumb showing which page or section the user is on.
Why it Matters
Users may become disoriented or unsure about where they are in the application, reducing trust and making navigation less intuitive.
How to Fix
Implement clear active states or breadcrumbs in the main navigation and key filter sections to show the current page or selected role/environment.
Issue Highlights
Login Button Lacks Clarity for Non-Mongolian Speakers
Major
Conversion & Actions
The Problem
The primary login button labeled 'Нэвтрэх' is in Mongolian, which might be unclear to non-Mongolian users. The button size and color are visually prominent but the language barrier may cause confusion about its purpose.
Why it Matters
Users unfamiliar with the Mongolian language might not understand this action, leading to frustration and potential drop-offs at the login stage.
How to Fix
Add an icon or translate the label into multiple languages dynamically, or provide a tooltip on hover that clarifies the button's purpose in other languages.
Issue Highlights
Inconsistent styles between job attribute tags
Moderate
Visual Consistency, Imagery & Media
The Problem
Job attribute tags (e.g., 'Программист', 'Программ хөгжм') differ in size and spacing. The text and background styling for tags like 'Цалин: Тохиролцоно' and location tags differ across listings.
Why it Matters
Inconsistent tag styles confuse users and reduce the perception of polish and professionalism.
How to Fix
Unify font size, padding, and background colors of all attribute tags for consistent style within the job listings.
Issue Highlights
No clear next step message after 0 new job postings
Moderate
Flow & States Completeness
The Problem
The interface shows '0 шинэ ажлын байр зарлагдсан байна.' indicating zero new job postings, but there is no guidance on what the user should do next, such as expanding search, adding alerts, or exploring other categories.
Why it Matters
Users who see no new listings without further direction may become confused or abandon the site, unsure how to proceed.
How to Fix
Add suggestions or call-to-actions for the user such as modifying filters, subscribing to alerts, or viewing previously saved jobs.
Issue Highlights
Light gray tags with low contrast on white background
Moderate
Color & Contrast
The Problem
Tags with text such as 'Програмист', 'Программ хангамж', etc., use light gray text on a white background, resulting in low contrast that is likely below WCAG AA standards.
Why it Matters
Users may have difficulty reading these tag labels, especially those with visual impairments or in poorly lit conditions.
How to Fix
Use a darker text color for these tags or introduce a subtle contrasting background shade behind the text to increase contrast.
Issue Highlights
Ambiguous salary range label
Moderate
Content Readability & Clarity
The Problem
Salary is displayed as a range with currency symbol (₮) but without a clear label or context explaining what the range covers (monthly, yearly, etc.).
Why it Matters
Users might be uncertain about the salary time period, leading to confusion or incorrect assumptions.
How to Fix
Add a clear label specifying the salary period, for example, 'Salary per month' or 'Monthly salary range'.
Issue Highlights
Weak hierarchy in job listing details
Moderate
Content Readability & Clarity
The Problem
Job listing details such as location, salary, and tags are visually similar in size and weight to less important metadata (like number of applications), reducing clarity.
Why it Matters
Users may find it harder to scan and prioritize important information in the job listings.
How to Fix
Use different font weights, sizes, or colors to clearly separate primary job info (title, salary, location) from secondary details (tags, applications).
Issue Highlights
Job listing badges and details are vertically misaligned
Moderate
Visual Consistency, Imagery & Media
The Problem
The job badge icons, text, and tags on the right side of each job listing are not aligned along a consistent vertical grid, causing visual imbalance.
Why it Matters
Misalignment can reduce readability and make the interface appear less professional and harder to scan quickly.
How to Fix
Adjust the vertical spacing and alignment so that all job badges, tags, and metadata are consistently lined up across all job items.
Issue Highlights
Heart and share icons lack labels or tooltips
Moderate
Visual Consistency, Imagery & Media
The Problem
The heart icon (likely for favoriting) and the share icon in each job listing have no visible labels or tooltips to clarify their purpose.
Why it Matters
Unlabeled icons increase cognitive load as users must guess their function, potentially causing confusion or missed functionality.
How to Fix
Add accessible tooltips or visible text labels to these icons to clearly communicate their actions.
Issue Highlights
Hamburger menu obscures primary navigation choices
Moderate
Navigation & Structure
The Problem
The main navigation is partially hidden under a hamburger menu icon on the right side which contains essential options like 'Нэвтрэх' (login). This removes immediate visibility and access to key navigation items.
Why it Matters
Users may overlook or have difficulty quickly accessing important navigation features, increasing drop-off or search times.
How to Fix
Consider exposing primary navigation items directly on the header bar, especially important login and help buttons, eliminating the need to open a menu first on desktop.
Issue Highlights
Small share and favorite icons in job listings
Moderate
Accessibility & Input Ergonomics
The Problem
The share (arrow) and heart favorite icons on each job card appear small, likely less than the recommended 44x44 pixels touch target size, requiring precise taps.
Why it Matters
Small tap targets increase the chance of user errors, frustration, and accessibility barriers for users with limited dexterity.
How to Fix
Increase the size of these icons or add padding around them to meet recommended touch target minimum dimensions (about 44x44 pixels).
Issue Highlights
Too many separate filters scattered across the screen
Moderate
Efficiency & Cognitive Load
The Problem
Filters for 'Шүүлт нэмэх', 'Мэргэжлийн түвшин', 'Ажлын цаг', location, 'Урамшуулал', and 'Бүх байршил' are all presented as separate buttons or dropdown areas dispersed over the top area of the job listings page.
Why it Matters
Users must mentally manage multiple discrete filtering controls, increasing decision complexity and cognitive load, making it harder to efficiently narrow results.
How to Fix
Combine filtering options into a single collapsible filter panel or unified filter bar to reduce micro-steps and consolidate decision points.
Issue Highlights
Excessive icons and logos clutter interface
Moderate
Efficiency & Cognitive Load
The Problem
Screen shows many small icons for company logos, share buttons, favorites, location pins, and badges across each job listing and header, contributing to visual clutter.
Why it Matters
Users must visually sift through an array of small, similar icons which can distract from primary actions or relevant info.
How to Fix
Simplify or group icons logically; reduce redundant icons especially where non-essential or unclear.
Issue Highlights
Gray text in 'Цалин:' label with low contrast
Moderate
Color & Contrast
The Problem
The label 'Цалин:' near the slider uses a dark gray on white background but appears borderline low contrast, possibly below the recommended WCAG AA 4.5:1 for normal text.
Why it Matters
Users with low vision may struggle to read this label easily, affecting clarity of the salary filter.
How to Fix
Darken the text color to pure black or a darker shade meeting the 4.5:1 contrast ratio requirement.
Issue Highlights
Unclear 'Цалин' label for salary filter
Moderate
Content Readability & Clarity
The Problem
The slider filter labeled 'Цалин' (salary) lacks unit or scale explanation, which could confuse users about what the range values represent exactly.
Why it Matters
Without clear context, users may misinterpret the salary range or filter incorrectly.
How to Fix
Add clearer labeling or tooltip explaining the salary range units and currency used in the slider.
Issue Highlights
Crowded interactive controls in filter area
Moderate
Navigation & Structure
The Problem
The filter and sorting area contains many small, closely grouped clickable buttons and toggles, such as multiple filters, price range slider, and view toggles, causing potential click confusion.
Why it Matters
Users may struggle to accurately interact with filters and controls, causing frustration and increasing error rates during filter selection.
How to Fix
Increase spacing between interactive elements and group related controls visually to reduce clutter and improve tap target clarity.
Issue Highlights
Filter buttons and icons spaced closely in top controls
Moderate
Accessibility & Input Ergonomics
The Problem
The filter-related clickable buttons near the top left (e.g., 'Шүүлт нэмэх' and filter icon) and the small filter icons with text inputs are placed close to each other with insufficient spacing, increasing risk of incorrect taps.
Why it Matters
Closely spaced interactive elements can cause accidental activation of the wrong button or input field, leading to user frustration and errors.
How to Fix
Increase horizontal and vertical spacing around these buttons and icons to ensure clear separation and meeting touch target spacing guidelines.
Issue Highlights
Multiple overlapping job tag buttons add extra choices
Moderate
Efficiency & Cognitive Load
The Problem
Each job listing includes several small tag buttons with job-related keywords that users may feel compelled to evaluate or decide upon before choosing a job.
Why it Matters
Users face many small clickable elements per job that might look like filtering or sorting options, increasing decision fatigue when scanning listings.
How to Fix
Limit number of visible tags or convert them into a single expandable summary per job listing to reduce visible decision points.
Issue Highlights
Support Button Label is Vague
Moderate
Conversion & Actions
The Problem
The support button labeled 'Тусламж' lacks clarity on what type of support or help will be provided upon clicking. The button is visually distinct but does not specify the next action.
Why it Matters
Users may hesitate or avoid clicking because they do not know what to expect, reducing engagement with support features.
How to Fix
Provide a more descriptive label such as 'Customer Support' or 'Get Help' or add an icon suggesting support context.
Issue Highlights
Lack of trust signals near job application buttons
Moderate
Tone, Friendliness & Delight
The Problem
The job listings include an application (анкет) button, but there are no visible trust signals or reassurances near these actions, such as privacy notes or secure application messages.
Why it Matters
Users may hesitate to submit personal information if they do not see indications that their data will be handled securely and respectfully.
How to Fix
Add brief trust indicators near application buttons, such as 'Your data is secure' or a privacy policy link.
Issue Highlights
Small pagination or navigation buttons in top-right icons
Moderate
Accessibility & Input Ergonomics
The Problem
The small icon buttons for social media (LinkedIn, Instagram, Facebook) and user menu at the top-right next to the user initials appear small and tightly spaced.
Why it Matters
Small and closely spaced touch targets can increase errors for users trying to activate these controls.
How to Fix
Increase size and spacing of these icon buttons to ensure easier and more accurate tapping.
Issue Highlights
Small font size for filter labels
Minor
Content Readability & Clarity
The Problem
Filter labels such as 'Мэргэжлийн түвшин', 'Ажлын цаг', and icons for filtering appear to have small font or icon sizes, which might reduce readability.
Why it Matters
Users may struggle to quickly read or identify filter options, especially on smaller screens.
How to Fix
Increase font size and icon size for filter labels to improve readability and usability.
Issue Highlights