Medical Appointment Scheduler
The interface effectively organizes patient data and scheduling information with clear sectioning and consistent use of icons, improving navigation within a complex workflow. However, the dense layout, small font sizes, and heavy reliance on icons without clear labels may overwhelm users and hinder quick comprehension.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
4
Color & Contrast2
Content Readability & Clarity5
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions2
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
1Critical
9Major
20Moderate
3Minor
Missing Clear Primary CTA in New Appointment Section
Critical
Conversion & Actions
The Problem
The Nueva Programación section has required fields and form inputs but no clearly labeled or visually emphasized primary call-to-action button to submit or confirm the appointment creation.
Why it Matters
Users will be confused about how to finalize the new appointment, potentially causing drop-off or incomplete submissions.
How to Fix
Add a distinct primary action button with a clear label such as 'Confirm Appointment' or 'Save Appointment' prominently placed and visually emphasized.
Issue Highlights
Unlabeled Hour Input Field
Major
Content Readability & Clarity
The Problem
The 'Hora' (Hour) input field shows placeholders '__ : __' but lacks an explicit label clarifying expected input format (24h or 12h) or time zone information.
Why it Matters
Without clear guidance, users may enter time in the wrong format or confusion can arise about the correct scheduling time, increasing error risk.
How to Fix
Add a label or tooltip clarifying time format and whether timezone adjustment is required for the 'Hora' input.
Issue Highlights
No clear indication of current navigation location
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface lacks a visible breadcrumb or distinct active state in the primary navigation bar to clearly indicate the user's current location or role within the system.
Why it Matters
Users may become disoriented about which section or module they are currently using, leading to confusion and inefficiency.
How to Fix
Add a breadcrumb trail or highlight the active navigation item prominently in the primary navigation bar to show the current location or role context.
Issue Highlights
Delete Appointment Lacks Confirmation
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The trash bin icon in the appointment table toolbar suggests a delete function but lacks visible safeguard such as a confirmation prompt or undo option.
Why it Matters
Users can accidentally delete important appointments, leading to data loss and frustration.
How to Fix
Implement a confirmation dialog or undo feature before deleting appointments.
Issue Highlights
Low contrast in disabled input text
Major
Color & Contrast
The Problem
The text inside the disabled input fields (e.g. patient name 'Pedro', NHC number '50000256') appears in light grey on a white background, likely failing WCAG AA contrast requirements for normal text.
Why it Matters
Users with low vision or color blindness may have difficulty reading the information inside disabled input fields, reducing accessibility and usability of patient data.
How to Fix
Increase the contrast of the disabled input text color to meet at least a 4.5:1 contrast ratio against the background.
Issue Highlights
Very small circular icon buttons with badge counts
Major
Accessibility & Input Ergonomics
The Problem
The small circular icon buttons in the top right corner with notification badges (e.g., bell with '3', envelope with '11') appear to be less than 32x32 pixels and require precise tapping.
Why it Matters
Small touch targets increase the difficulty of clicking, especially on mobile devices or for users with motor impairments, leading to user frustration and errors.
How to Fix
Increase the size of these icon buttons to at least 32x32 pixels with sufficient padding, or add a larger tap area around the icons.
Issue Highlights
Too many input fields in Nueva Programación form
Major
Efficiency & Cognitive Load
The Problem
The Nueva Programación section includes numerous dropdowns, text fields, checkboxes, and buttons, requiring multiple separate interactions to complete scheduling.
Why it Matters
The abundance of fields creates cognitive load and may slow down users, increasing time and effort needed to complete scheduling.
How to Fix
Simplify the form by grouping related fields, using sensible defaults, and minimizing required inputs to reduce steps.
Issue Highlights
No clear primary action to confirm new appointment scheduling
Major
Flow & States Completeness
The Problem
The 'Nueva Programación' panel contains many required fields but does not have a clearly visible primary button (e.g., Save, Submit, or Confirm) to proceed with or finalize the scheduling of the appointment.
Why it Matters
Users may be confused about how to complete the appointment creation process, leading to incomplete actions or abandonment.
How to Fix
Add a prominent, clearly labeled primary action button such as 'Confirm Appointment' or 'Save' positioned where it is easily discoverable after filling out the form.
Issue Highlights
Confusing Patient Data Search and Result Overlap
Major
Strategic Design
The Problem
The 'Resultado de la búsqueda' section shows multiple very similar entries with barely distinguishable information, and the search results are presented in a tight table below the patient data form, causing potential confusion.
Why it Matters
Users may struggle to select the correct patient record, risking errors in patient care and data integrity.
How to Fix
Enhance search result differentiation by showing more distinctive patient identifiers, use clearer result grouping, and separate search results visually from editable patient data fields.
Issue Highlights
Unclear Form Input Types and Controls in 'Nueva Programación'
Major
Strategic Design
The Problem
Within 'Nueva Programación', several input fields do not clearly indicate accepted input types (e.g., 'Fecha' labeled as 'Text' instead of date picker) and checkboxes are mixed with dropdown fields unpredictably.
Why it Matters
This may cause user confusion or input errors, slowing down the scheduling process and potentially leading to incorrect appointments.
How to Fix
Use appropriate input controls matching data types (e.g., date pickers for date fields, dropdowns only where selection is needed), and group related inputs consistently with clear labeling.
Issue Highlights
Low contrast placeholder text in dropdowns
Moderate
Color & Contrast
The Problem
Placeholder text and unselected dropdown labels (like 'Text' in the Fecha field) appear in light grey on a white background, resulting in low contrast likely below WCAG AA standards.
Why it Matters
Low contrast on placeholder text can make it hard for users to understand which fields require input, especially for users with visual impairments.
How to Fix
Use a darker shade for placeholder text and dropdown labels to increase contrast against the white background.
Issue Highlights
Unclear Date Format in Histórico Citas Table
Moderate
Ambiguous Date/Time/Timezone
The Problem
The date '21/11/2022' in the 'Histórico Citas' section uses a day/month/year format without explicit labeling, which can be ambiguous for users unfamiliar with this convention.
Why it Matters
Ambiguous date formats can cause misinterpretation of important appointment or record dates, leading to confusion or errors in scheduling or record keeping.
How to Fix
Add a date format label or use an unambiguous format like '21 Nov 2022' or '2022-11-21' throughout the UI.
Issue Highlights
Inconsistent button background colors in top patient action buttons
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Alergias' button uses a strong red background with white text, while other action buttons like 'Riesgos' and 'Multiresistencia' have a gray background with black text. This inconsistency in button styling creates a fragmented visual hierarchy.
Why it Matters
Users may be confused about the relative importance or status of each button due to inconsistent color usage, which can increase cognitive load and slow down task completion.
How to Fix
Standardize button backgrounds by using a consistent color scheme for similar action buttons, reserving accent colors like red for only critical alerts or statuses.
Issue Highlights
Unlabeled icons in 'Nueva Programación' top right corner
Moderate
Visual Consistency, Imagery & Media
The Problem
There are several small icons for actions in the top right corner of the 'Nueva Programación' panel without visible labels or tooltips, potentially causing confusion about their function.
Why it Matters
Ambiguous icons increase cognitive load and can cause errors or hesitation as users may not understand their purpose without trial and error.
How to Fix
Provide visible text labels or add consistent tooltips that appear on hover to clarify icon functions.
Issue Highlights
Ambiguous icons in 'Resultado de la Búsqueda' header
Moderate
Visual Consistency, Imagery & Media
The Problem
The icon buttons in the 'Resultado de la Búsqueda' section header lack text labels, making their functions unclear at a glance.
Why it Matters
Unclear iconography can frustrate users or cause them to avoid using these features, reducing interface usability.
How to Fix
Add labels next to icons or implement tooltips with short descriptions on hover.
Issue Highlights
High density of action buttons and icons in top bar
Moderate
Navigation & Structure
The Problem
The top right corner contains numerous icons and buttons (user profile, notifications, search, filters, list/grid toggles, etc.) placed closely together, increasing visual complexity and the chance of misclicks.
Why it Matters
Users may experience difficulty quickly identifying and accessing the right controls, leading to slower task completion and user frustration.
How to Fix
Group related icons under expandable menus or reduce the number of visible elements by prioritizing the most common actions for immediate access.
Issue Highlights
Crowded patient data and search results area
Moderate
Navigation & Structure
The Problem
The left panel showing patient data, search results, and historical appointments contains many fields, icons, and buttons in close proximity, creating visual clutter and making individual elements harder to distinguish.
Why it Matters
This density can lead to user errors, slower data entry, and difficulties scanning relevant information effectively.
How to Fix
Increase spacing between clickable elements, group related fields logically, and consider progressive disclosure to reduce on-screen complexity.
Issue Highlights
Busy patient info and historical data panel with dense tables
Moderate
Efficiency & Cognitive Load
The Problem
The left panel displays detailed patient data, search results, and historical appointments with multiple tables and icons in a compact space, making it visually dense.
Why it Matters
The cluttered information presentation can overwhelm users, making it harder to quickly find relevant details and increasing mental effort.
How to Fix
Use progressive disclosure, collapsible sections, or tabs to separate patient info, results, and history for cleaner visuals.
Issue Highlights
Overloaded Top Navigation with Excessive Icons
Moderate
Strategic Design
The Problem
The top navigation bar contains a dense cluster of small icons and buttons with limited spacing and unclear grouping, making it difficult to quickly understand or prioritize actions.
Why it Matters
Users may face cognitive overload trying to identify important actions or notifications, reducing efficiency and increasing chance of errors in a critical healthcare environment.
How to Fix
Group related icons under clearly labeled menus or tooltips, reduce the number of visible icons, and increase spacing to improve scanability and ease of use.
Issue Highlights
New Appointment Form Lacks Clear Grouping
Moderate
Conversion & Actions
The Problem
The Nueva Programación form contains many required fields and checkboxes, but the layout groups them densely without distinct sections or headings to help users parse information.
Why it Matters
A dense ungrouped form can overwhelm users and increase form fill errors or abandonment.
How to Fix
Visually separate sections such as Patient Info, Schedule Details, Service Info, and Confirmation to help users navigate the form.
Issue Highlights
Low contrast icons in toolbar buttons
Moderate
Color & Contrast
The Problem
Several icons in the toolbar area (top right) appear light grey on a near-white background, likely failing WCAG AA contrast for graphical objects.
Why it Matters
Users with low vision or color blindness may have difficulty identifying toolbar icons, leading to reduced usability and difficulty locating controls.
How to Fix
Increase the icon color contrast by using a darker color or adding a visible background to the icons.
Issue Highlights
Weak Hierarchy in 'Nueva Programación' Form Labels
Moderate
Content Readability & Clarity
The Problem
In the form under 'Nueva Programación,' all labels and inputs have a similar font weight and size without distinguishing headings or groupings, making it hard to quickly scan or understand sections.
Why it Matters
Users may take longer to complete form fields or miss required fields because no clear visual hierarchy guides attention.
How to Fix
Use font size, weight, or whitespace to group related fields and visually separate form sections for better readability.
Issue Highlights
Misalignment of input fields and section titles in 'Datos del Paciente'
Moderate
Visual Consistency, Imagery & Media
The Problem
Input fields for 'Nombre', 'Apellido', 'Apellido 2', and 'Fecha Nacimiento' are not perfectly aligned horizontally, and the spacing between label groups is uneven. Furthermore, 'DATOS DEL PACIENTE' and its associated content appear slightly off-grid compared to adjacent panels.
Why it Matters
Misalignment can reduce visual harmony, making the interface look unprofessional and harder to scan, which reduces user efficiency.
How to Fix
Adjust margins and padding for input fields and labels to align consistently on a common grid baseline and ensure even spacing between sections.
Issue Highlights
Unlabeled icons in 'Histórico Citas' action bar
Moderate
Visual Consistency, Imagery & Media
The Problem
Icons in the 'Histórico Citas' section's toolbar do not have visible labels or descriptions, reducing clarity for their actions.
Why it Matters
This ambiguity could result in mistakes or slower task execution as users hesitate or try to guess icon functions.
How to Fix
Add text labels or tooltips for icons to clarify their purpose.
Issue Highlights
Missing Trust Indicators on Patient Allergy Section
Moderate
Tone, Friendliness & Delight
The Problem
The 'Alergias' button for patient allergies is prominently displayed in red, but there are no visible trust signals or reassuring messages about the accuracy or protection of this sensitive medical information.
Why it Matters
Users managing or viewing sensitive allergy data may feel uncertain about the reliability or security of the information, reducing trust and confidence in the system during critical healthcare tasks.
How to Fix
Add trust signals such as a lock icon, confirmation messages about data security, or tooltips assuring data accuracy and confidentiality near the allergy section.
Issue Highlights
Closely spaced icon buttons in patient header toolbar
Moderate
Accessibility & Input Ergonomics
The Problem
Icon buttons in the patient header toolbar (above 'DATOS DEL PACIENTE') are tightly spaced with very small gaps between them, making it easy to tap the wrong button.
Why it Matters
Icons placed too close together increase accidental taps on adjacent buttons, which can confuse users and cause operational mistakes.
How to Fix
Increase horizontal spacing between icon buttons to at least 8-10 pixels or add padding around each button to improve tap accuracy.
Issue Highlights
Tiny checkbox targets for week days in scheduling area
Moderate
Accessibility & Input Ergonomics
The Problem
Checkboxes for days (L, M, X, J, V, S, D) in the scheduling section are very small and packed close together.
Why it Matters
Small checkboxes are difficult for users to select accurately on touchscreens, increasing error rates and lowering usability.
How to Fix
Enlarge checkbox controls and provide more spacing between each day selection to meet minimum target size guidelines (about 32x32 pixels).
Issue Highlights
Multiple overlapping filter buttons cause conflicting choices
Moderate
Efficiency & Cognitive Load
The Problem
Filter buttons labeled CENTROS, HQCDB, Andalucía, Todos, and others are displayed side-by-side, requiring users to manually select among overlapping filters without clear guidance on which combinations are valid.
Why it Matters
Users may struggle to decide which filters to apply or mistakenly apply incompatible filters, causing confusion and delay.
How to Fix
Consolidate related filters into a single multi-select control or use dynamic filtering that prevents conflicting selections.
Issue Highlights
No actionable controls in 'TABLA DE CITAS' or 'RECOMENDACIONES' sections
Moderate
Flow & States Completeness
The Problem
The 'TABLA DE CITAS' and 'RECOMENDACIONES' sections are visible but appear empty or placeholder-like without any visible call-to-action or guidance for next steps.
Why it Matters
Without guidance or controls, users may be uncertain what to do next or how to interact with these sections, creating a perception of dead ends in the flow.
How to Fix
Provide guidance, empty state messages, or actionable buttons in these sections to direct users on how to proceed or add content.
Issue Highlights
Unclear role/mode context in patient header
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The top section contains patient info and multiple tabs (e.g., Allergies, Risks, Multiresistencia) but it lacks clear markers or labels indicating the user role or the overall app mode, which could orient the user.
Why it Matters
Lacking explicit environment or role context can confuse users about their current scope of work or permission level within the system.
How to Fix
Add a visible label or badge indicating the user role or the current environment mode near the patient header area for clarity.
Issue Highlights
Dropdown fields with faint arrow indicators
Minor
Accessibility & Input Ergonomics
The Problem
Several dropdown fields in the 'NUEVA PROGRAMACIÓN' section use very subtle arrow icons or low visual contrast, making it unclear they are interactive dropdowns.
Why it Matters
Users may not realize these fields are interactive input elements, causing confusion and potentially reducing form completion rates.
How to Fix
Increase contrast and size of dropdown arrow icons or add a more obvious affordance like a button boundary or distinct background color.
Issue Highlights
Low contrast inactive tab text
Minor
Color & Contrast
The Problem
Text labels on inactive tabs such as 'Riesgos', 'Multiresistencia', and 'Aislamiento' use a medium grey color on a light grey background, likely resulting in low visual contrast.
Why it Matters
Users might have difficulty discerning which tabs are inactive versus active due to subtle contrast differences, affecting navigation clarity.
How to Fix
Use a stronger contrast color for inactive tab text or backgrounds to improve differentiation.
Issue Highlights
Red Allergy Button May Imply Critical or Error State Without Context
Minor
Tone, Friendliness & Delight
The Problem
The allergy tab is highlighted in a strong red color, which typically indicates errors or urgent issues, yet no explicit warning or error text is shown to clarify the status.
Why it Matters
Users might misinterpret the red color as an indication of a system error or a critical urgent alert, causing unnecessary alarm or confusion.
How to Fix
Use a less alarming color for normal active state or pair the red color with explanatory text or iconography to clarify that it is a normal alert for allergies, not an error.
Issue Highlights