Teacher Course Performance Dashboard

The interface effectively uses color-coded badges to quickly communicate student performance statuses, enhancing visual scanning and comprehension. However, the design could improve consistency in spacing, reduce visual clutter in filter controls, and incorporate clearer interaction affordances to boost usability and accessibility.
Analyzed design
Fixes by Category
  • 3
    Color & Contrast
  • 3
    Content Readability & Clarity
  • 2
    Visual Consistency, Imagery & Media
  • 2
    Navigation & Structure
  • 1
    Conversion & Actions
  • 2
    Tone, Friendliness & Delight
  • 2
    Accessibility & Input Ergonomics
  • 4
    Efficiency & Cognitive Load
  • 2
    Flow & States Completeness
  • 2
    Strategic Design
    • Recommended Fixes by Impact
    0Critical
    4Major
    17Moderate
    4Minor

    No clear active state or current location in sidebar

    Major
    Orientation Missing (Environment/Role/Location)
    The Problem
    The sidebar navigation shows multiple menu options but no visual highlight or active state indicating the current page or section where the user is located.
    Why it Matters
    Without a clear indication of the current location, users may feel lost or uncertain about which part of the application they are working in, reducing their confidence and navigation speed.
    How to Fix
    Apply a distinct active state style (such as background highlight or bold text) to the currently selected sidebar item.
    Issue Highlights
    Finding region

    Search input lacks descriptive label

    Major
    Content Readability & Clarity
    The Problem
    The search input has placeholder text 'Введите название предмета...', but no visible label clearly identifying its purpose for screen readers or clarity.
    Why it Matters
    Without a clear label, users relying on assistive technologies may not understand the purpose of the search input, reducing accessibility.
    How to Fix
    Add a visible or accessible label to the search input field describing its function, such as 'Search subjects'.
    Issue Highlights
    Finding region

    Lack of Clear Primary Call to Action

    Major
    Conversion & Actions
    The Problem
    The page displays several filter dropdowns and status indicators but lacks a distinct primary call to action button with clear labeling for the next step the user should take.
    Why it Matters
    Users may be uncertain about what action to take next, leading to confusion and reducing engagement or task completion.
    How to Fix
    Add a prominent primary CTA with a clear, descriptive label indicating the next user action, such as 'Save Changes', 'Submit Grades', or 'Download Report'.
    Issue Highlights
    Finding region

    Multiple consecutive dropdowns create cognitive load

    Major
    Efficiency & Cognitive Load
    The Problem
    The interface shows four dropdown filters (user, semester, grade, attestation method) in a row, requiring users to decide on multiple criteria before seeing results.
    Why it Matters
    Having to choose among several filters simultaneously increases mental effort and may slow task completion or lead to errors.
    How to Fix
    Group related filters or use progressive disclosure to show fewer filtering options initially and reveal more as needed.
    Issue Highlights
    Finding region

    Side menu subtitles have low contrast

    Moderate
    Color & Contrast
    The Problem
    The text 'Преподаватель' and subtitles like 'Аналитика заданий', 'Статистика группы' use a medium gray on a light purple background, appearing low contrast and likely below WCAG AA 4.5:1 ratio.
    Why it Matters
    Users with mild visual impairments may find these subtitles hard to read, reducing usability of the navigation.
    How to Fix
    Increase the text darkness or use a darker shade of gray to ensure contrast ratio meets at least 4.5:1 against the background.
    Issue Highlights
    Finding region

    Placeholder text in search input is low contrast

    Moderate
    Color & Contrast
    The Problem
    The placeholder text 'Введите название предмета...' is displayed in a very light gray on a white background, likely below WCAG AA contrast ratio.
    Why it Matters
    Users may have trouble reading the placeholder text, reducing discoverability of the search function.
    How to Fix
    Use a darker gray color for placeholder text with minimum contrast ratio 4.5:1 on white background.
    Issue Highlights
    Finding region

    Secondary labels in course cards have low contrast

    Moderate
    Color & Contrast
    The Problem
    The descriptive text below the main course titles such as 'Зачёт с оценкой', 'Экзамен', 'Зачёт', and 'Курсова работа' is shown in small, light gray text on a white background, likely below WCAG AA contrast ratio.
    Why it Matters
    Users with low vision or under poor lighting conditions may find this text difficult to read.
    How to Fix
    Increase the darkness of this text to ensure contrast ratio meets at least 4.5:1 against the white background.
    Issue Highlights
    Finding region

    Inconsistent button icon styles in grade indicators

    Moderate
    Visual Consistency, Imagery & Media
    The Problem
    The grade indicator buttons have icons with varying styles: the trophy, thumbs-up, minus, and cross icons differ in stroke thickness and fill style, causing visual inconsistency.
    Why it Matters
    Inconsistent icon styles reduce the professional appearance and can confuse users about the functionality or importance of each status indicator.
    How to Fix
    Standardize the icon style across all grade indicators by using icons from the same set with consistent stroke thickness and fill properties.
    Issue Highlights
    Finding region

    Sidebar navigation icons and labels too close

    Moderate
    Navigation & Structure
    The Problem
    Sidebar menu items include both icons and text labels placed very close together vertically with narrow spacing. This tight layout may cause accidental clicks or difficulty distinguishing targets.
    Why it Matters
    Users might misclick or have trouble quickly scanning and selecting their intended navigation options, reducing efficiency and increasing frustration.
    How to Fix
    Increase vertical spacing between sidebar menu items and consider separating clickable icons from text labels more clearly for easier target distinction.
    Issue Highlights
    Finding region

    Red color for 'Долг' (Debt) label may create harsh negative impression

    Moderate
    Tone, Friendliness & Delight
    The Problem
    The 'Долг' label is colored bright red, which strongly signals error or danger, potentially creating a harsh emotional tone. This may be negatively perceived by students viewing their grades.
    Why it Matters
    A too harsh red can increase anxiety or demotivate users instead of encouraging improvement, impacting user satisfaction negatively.
    How to Fix
    Consider using a softer, less alarming red or an alternative color that conveys concern or need for attention without harshness, balancing seriousness with empathy.
    Issue Highlights
    Finding region

    Dropdown menus are placed too close

    Moderate
    Accessibility & Input Ergonomics
    The Problem
    Four dropdown menus are placed horizontally in close proximity with small spacing between them. Touch targets overlap visually or have less than 8-10 pixels of spacing.
    Why it Matters
    Users with larger fingers or motor impairments may accidentally tap the wrong dropdown, causing errors or frustration.
    How to Fix
    Increase horizontal spacing between dropdown menus to meet recommended touch spacing guidelines (at least 8-10 pixels).
    Issue Highlights
    Finding region

    Sidebar menu icons have small touch targets

    Moderate
    Accessibility & Input Ergonomics
    The Problem
    Sidebar menu icons have small clickable areas that appear less than 40x40 pixels, which is smaller than recommended minimum touch target size.
    Why it Matters
    Small touch targets increase the chance of missing taps, especially on mobile or for users with limited dexterity.
    How to Fix
    Increase the size of clickable areas around icons to at least 40x40 pixels, possibly by adding padding or margins.
    Issue Highlights
    Finding region

    Summary bar uses abbreviations without explanation

    Moderate
    Efficiency & Cognitive Load
    The Problem
    The top summary bar shows several abbreviated terms (e.g., 'Отл', 'Хор', 'Удовл', 'Долги', 'Ср. балл') which require users to recall or guess their meanings.
    Why it Matters
    Users unfamiliar with abbreviations may have to remember terms from previous screens or outside knowledge, increasing mental load and reducing clarity.
    How to Fix
    Add tooltips, expand abbreviations, or include brief explanations directly on the summary bar.
    Issue Highlights
    Finding region

    Summary statistics bar text lacks hierarchy

    Moderate
    Content Readability & Clarity
    The Problem
    The summary box with statistics (Отл: 00 | Хор: 00 | Удовл: 00 | Долги: 00 | Ср. балл: 4,69 | Диплом: Синий) uses uniform font size and weight, making the different stats hard to quickly scan or distinguish.
    Why it Matters
    Users may struggle to quickly understand key performance metrics or recognize important statistics at a glance.
    How to Fix
    Apply visual hierarchy by differentiating headings, values, or separating important numbers with stronger font weight or color highlights.
    Issue Highlights
    Finding region

    Misaligned icons in sidebar menu items

    Moderate
    Visual Consistency, Imagery & Media
    The Problem
    The icons in the sidebar menu items are not vertically centered relative to their text labels, leading to a visually unbalanced menu.
    Why it Matters
    Misalignment of icons with text can distract users and give the application an unpolished, less trustworthy appearance.
    How to Fix
    Adjust vertical alignment of icons so they are perfectly centered relative to menu item text for a cleaner and more professional look.
    Issue Highlights
    Finding region

    Too many distinct filter controls cause inefficiency

    Moderate
    Efficiency & Cognitive Load
    The Problem
    The presence of four separate filters requires multiple selections to narrow content, increasing the number of micro-steps for filtering.
    Why it Matters
    More micro-steps increase task completion time and cognitive effort, potentially frustrating users.
    How to Fix
    Simplify filtering by consolidating controls or allowing combined input in a single control where appropriate.
    Issue Highlights
    Finding region

    Course type labels use low contrast and weak hierarchy

    Moderate
    Content Readability & Clarity
    The Problem
    Under each course title, the subtype text like 'Зачёт с оценкой' or 'Экзамен' is displayed in light gray with little contrast, making it less readable and visually subordinate to titles.
    Why it Matters
    Users might overlook or misunderstand important context about the type of course or exam format due to insufficient emphasis.
    How to Fix
    Increase contrast or use a slightly larger font size or bolder weight for these labels to establish clearer text hierarchy without competing with main titles.
    Issue Highlights
    Finding region

    Search input lacks filters for large subject list

    Moderate
    Navigation & Structure
    The Problem
    A search input field is present but there is no visible filtering or faceted navigation for refining a relatively large list of subjects shown in the main panel.
    Why it Matters
    Without convenient filters or sorting, users may struggle to find specific subjects quickly, increasing the time to locate items and causing frustration.
    How to Fix
    Add filters or faceted navigation (e.g. by type, status, or rating) alongside or integrated with the search input to improve discoverability.
    Issue Highlights
    Finding region

    No clear call to action after filtering criteria selection

    Moderate
    Flow & States Completeness
    The Problem
    The interface allows selecting filters for student, semester, grade, and attestation method, but does not visually indicate what action the user should take to apply these filters or proceed.
    Why it Matters
    Users may be uncertain how to update the displayed results after adjusting filter options, leading to confusion or inaction.
    How to Fix
    Add a clearly labeled 'Apply Filters' or 'Search' button near the filter dropdowns or implement immediate feedback on selection changes to indicate the list updates.
    Issue Highlights
    Finding region

    Minimal visual hierarchy in main content area

    Moderate
    Strategic Design
    The Problem
    The list of courses and their status badges are uniform in size and style, with subtle colors and spacing that make it harder to quickly scan and prioritize information.
    Why it Matters
    Users may find it difficult to quickly assess which courses need urgent attention versus those that are satisfactory, reducing efficiency in task completion.
    How to Fix
    Introduce stronger visual hierarchy via size, weight, or color contrast for critical statuses (e.g., red for debts), and add spacing or grouping to emphasize urgent items.
    Issue Highlights
    Finding region

    Dropdown filters lack clear labels or indication

    Moderate
    Strategic Design
    The Problem
    Dropdown menus labeled only with generic terms (e.g., 'Семестр', 'Оценка', 'Способ аттестации') without clear contextual cues or default selection states may confuse users about their current filtering state.
    Why it Matters
    Users might be unsure which filters are active, resulting in confusion or incorrect data interpretation.
    How to Fix
    Add explicit labels outside dropdowns or placeholder text inside indicating the filter purpose and currently applied value clearly.
    Issue Highlights
    Finding region

    Download button lacks explanation or feedback

    Minor
    Flow & States Completeness
    The Problem
    There is a download icon button present next to the summary but no label or indication of what data will be downloaded or confirmation that the action succeeded.
    Why it Matters
    Users might be unsure what the download button will provide or whether the download is in progress or completed.
    How to Fix
    Add a tooltip or label explaining the download function and provide visual feedback such as a loading spinner or confirmation message on click.
    Issue Highlights
    Finding region

    No visible user environment or context indicator near top filters

    Minor
    Orientation Missing (Environment/Role/Location)
    The Problem
    The top navigation includes user selector, semester, grade, and attestation method dropdowns, but no explicit label or heading clarifies the overall context or environment the user is managing.
    Why it Matters
    Users may be unsure which section or overall environment they are in if the top controls appear disconnected from a labeled context.
    How to Fix
    Add a clear section title or environment label near the dropdown controls to orient the user.
    Issue Highlights
    Finding region

    Gray color for 'Не оценено' (Not graded) label produces neutral, uninspiring impression

    Minor
    Tone, Friendliness & Delight
    The Problem
    The 'Не оценено' label uses a muted gray color which makes it visually subdued and may come across as indifferent or unimportant.
    Why it Matters
    A neutral tone for ungraded work might fail to encourage timely completion or further action from students, missing an opportunity for gentle nudging.
    How to Fix
    Apply a color or iconography that gently encourages attention or action, such as a soft accent color or an icon symbolizing 'pending' or 'in progress'.
    Issue Highlights
    Finding region

    Colored status badges with icons create visual noise

    Minor
    Efficiency & Cognitive Load
    The Problem
    Each subject has a colored badge indicating status (e.g., 'Excellent', 'Satisfactory', 'Not Graded', 'Debt') with an icon, visually drawing attention away from other key information.
    Why it Matters
    While informative, these vivid badges compete visually with subject titles and descriptions, potentially cluttering the view and distracting users from primary content.
    How to Fix
    Reduce badge size or adopt simpler visual indicators; consider integrating status within the main text rather than separate badges.
    Issue Highlights
    Finding region