Restaurant Order Management
The interface is visually clear with well-organized menu categories and product images that aid quick selection. However, the layout is somewhat cluttered and the text on buttons and labels could benefit from improved contrast and spacing for better readability and usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast3
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness4
Strategic DesignRecommended Fixes by Impact
0Critical
7Major
19Moderate
2Minor
Unclear Purpose of Top Right Numeric Fields
Major
Content Readability & Clarity
The Problem
The numeric values on the top right side labeled '55.65', '8.35', and '64.00' lack clear labels or descriptions explaining what these numbers represent (except for Tobacco Fee). This makes it ambiguous for users to understand their meaning or relevance.
Why it Matters
Users may be confused about these numeric values and their importance, leading to errors or delays in processing the order.
How to Fix
Add explicit labels or descriptive text next to these numeric fields to clarify their meaning, such as 'Subtotal', 'Tax', 'Total', or other relevant terms.
Issue Highlights
Lack of clear active state for main navigation tabs
Major
Orientation Missing (Environment/Role/Location)
The Problem
The vertical navigation tabs on the left side use colors to indicate selection but lack clear, distinctive active state indicators such as icons or highlighted backgrounds that stand out enough for quick user orientation.
Why it Matters
Users might struggle to quickly identify which section they are currently in, leading to confusion and slower navigation.
How to Fix
Enhance the active state with more visible indicators such as bold text, distinctive background colors, or active icons to clearly show the current active tab.
Issue Highlights
No Clear Primary Call-to-Action Button
Major
Conversion & Actions
The Problem
The interface does not have a prominent, clearly distinguishable primary CTA button such as 'Checkout' or 'Place Order'. Instead, it mostly displays items and categories without an obvious next step button for completing the order or proceeding with payment.
Why it Matters
Users may be confused about how to finalize their order, leading to potential drop-off and lower conversion rates.
How to Fix
Add a clearly labeled and visually prominent primary CTA button such as 'Place Order' or 'Checkout' that stands out from other UI elements.
Issue Highlights
No Obvious Payment or Order Confirmation Button
Major
Flow & States Completeness
The Problem
The screen shows an active order with selected food items and a total amount, but no visible button or clear call to action for proceeding with payment or confirming the order.
Why it Matters
Without a clear next step, users may become confused about how to complete their transaction, potentially abandoning the order process.
How to Fix
Add a prominently visible button labeled 'Checkout', 'Pay Now', or 'Confirm Order' to guide users to the next step in the ordering flow.
Issue Highlights
Order timer countdown highly visible but unclear if it is a limit or elapsed time
Major
Strategic Design
The Problem
The timer displayed as 00:00:18 next to the customer type under 'Walkin Customer' draws focus but lacks clarity on whether it is a countdown, elapsed time, or other.
Why it Matters
Users may misinterpret this timer, causing stress or distraction which could slow down order handling or increase errors.
How to Fix
Add a label such as 'Order Time Elapsed' or countdown explanation near the timer for clarity.
Issue Highlights
Order summary cards and product selection blend visually causing confusion
Major
Strategic Design
The Problem
The order summary section with added items is visually very similar to the product selection grid below, both using similar card layouts and spacing, making it difficult to quickly differentiate current order from product selection.
Why it Matters
Users may accidentally select or add items twice or be unsure which items are in the current order, slowing down task efficiency.
How to Fix
Use distinct background colors or section separation with clear headings to visually separate order summary from product selection.
Issue Highlights
No Confirmation for Item Deletion or Modification
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
There are items in the order list that likely can be removed or modified, but there is no visible confirmation dialog or undo feature for deleting or changing items.
Why it Matters
Users can accidentally remove or modify items, leading to frustration and potential loss of sales if users are unsure how to recover.
How to Fix
Implement confirmation dialogs or undo options when a user attempts to remove or significantly modify an item in the order.
Issue Highlights
Unlabeled Icon Above Fries Image
Moderate
Visual Consistency, Imagery & Media
The Problem
There is an icon above the fries image consisting of three vertically stacked human figures, but no label explaining its meaning or function.
Why it Matters
Users may not understand the purpose of this icon, increasing confusion and task friction.
How to Fix
Add a text label or tooltip to clarify what this icon represents or its action when tapped.
Issue Highlights
Low contrast of light gray placeholder text in barcode input
Moderate
Color & Contrast
The Problem
The placeholder text 'Type Barcode here and press enter' in the right input box is light gray on a white background, likely below WCAG AA contrast ratio of 4.5:1.
Why it Matters
Users with low vision or color blindness may have difficulty reading placeholder text, leading to confusion about the field's purpose.
How to Fix
Increase the text contrast by using a darker gray or black color for the placeholder text or add a subtle background shade behind the text to improve contrast.
Issue Highlights
Low contrast white price text over dark background in product tiles
Moderate
Color & Contrast
The Problem
Price text such as '23 SAR' in orange or white over partially transparent dark backgrounds inside sandwich image tiles might not consistently achieve WCAG AA contrast ratios.
Why it Matters
Reduced readability of prices makes it harder for users to understand product costs quickly, possibly causing purchasing errors or delays.
How to Fix
Use solid color backgrounds with higher contrast or increase font weight and size for price text to improve readability.
Issue Highlights
Search Product Placeholder Text is Too Small and Low Contrast
Moderate
Content Readability & Clarity
The Problem
The 'Search Product' placeholder text is very small and appears with low contrast against its background, making it hard to read.
Why it Matters
Users may struggle to identify the search input or read the placeholder, reducing usability for product searching.
How to Fix
Increase the font size to at least 14px and improve contrast with the background to meet accessibility standards.
Issue Highlights
Misaligned Price Text in Item Cards
Moderate
Visual Consistency, Imagery & Media
The Problem
The price text elements within the item cards (e.g., '23 SAR', '15 SAR') are inconsistently aligned across different cards. Some prices are positioned higher or lower vertically relative to others in adjacent cards.
Why it Matters
Inconsistent alignment increases cognitive load and gives an impression of unprofessional design quality, making it harder for users to scan prices quickly.
How to Fix
Ensure all price labels inside item cards share a consistent baseline alignment and margin spacing.
Issue Highlights
No Confirmation or Trust Signal for Pricing and Fees
Moderate
Tone, Friendliness & Delight
The Problem
The interface shows detailed pricing including a 'Tobacco Fee' and total amount without any reassurance or confirmation message to the user.
Why it Matters
Users may feel uncertain or mistrustful about fees and pricing if no explanations or confirmations are provided, potentially leading to frustration or abandoned orders.
How to Fix
Add clear trust signals such as tooltips explaining fees, confirmation prompts for charges, or friendly language reassuring accurate pricing.
Issue Highlights
Category buttons spaced too tightly
Moderate
Accessibility & Input Ergonomics
The Problem
The vertical category buttons (Drink, Sandwich, Sweets, combo, etc.) are placed closely together with minimal vertical spacing, less than the recommended 8-10 pixels gap.
Why it Matters
Users might accidentally activate the wrong category button, increasing input errors and frustration.
How to Fix
Increase the vertical spacing between category buttons to improve separability and prevent accidental taps.
Issue Highlights
Cluttered order summary with multiple small info blocks
Moderate
Efficiency & Cognitive Load
The Problem
The order summary area contains small cards for each item, price details, tobacco fee, and barcode entry field all tightly packed causing visual clutter.
Why it Matters
Too many small info blocks and details compete for attention, making it harder for users to quickly verify order contents and proceed.
How to Fix
Use a more streamlined summary layout with collapsible item details and highlight total price with less peripheral info.
Issue Highlights
Unclear purpose of top-left icons leads to user uncertainty
Moderate
Strategic Design
The Problem
The icons 'Discount', 'New', and 'Sprite' at the top-left appear clickable but lack clear labels or tooltips, making it unclear what actions they perform.
Why it Matters
Users may hesitate or make mistakes trying to figure out the purpose of these icons, slowing down order processing or causing frustration.
How to Fix
Add clear labels or tooltips to these icons to clarify their function or replace icons with descriptive text.
Issue Highlights
Low contrast of light gray text labels above order items
Moderate
Color & Contrast
The Problem
The text labels such as 'Shrimp Sandwich' and 'Fish Filet Sandwich' above order items in the top section appear light gray on a white background, resulting in low contrast and likely failing WCAG AA standards.
Why it Matters
Low contrast text can make it difficult for users with visual impairments to read item names, impacting usability and accessibility.
How to Fix
Darken the text color to a medium or dark gray or black to ensure sufficient contrast over the white background.
Issue Highlights
Weak Hierarchy in Price and Quantity in Order Details Area
Moderate
Content Readability & Clarity
The Problem
The order details section lists product names with quantities and prices in similar font sizes and weights, making it hard to quickly distinguish between product, quantity, and price information.
Why it Matters
Users may find it difficult to quickly scan and confirm details of their order, increasing the chance of oversight.
How to Fix
Use distinct font sizes, weights, or colors to differentiate product names, quantities, and prices for better readability and scanning.
Issue Highlights
Crowded menu items and product cards in main area
Moderate
Navigation & Structure
The Problem
The product selection area shows a dense arrangement of many clickable product cards and category buttons with small vertical spacing, potentially making it harder for users to distinguish and accurately tap or click on targets.
Why it Matters
Users may experience difficulty selecting the intended items promptly, leading to errors or frustration.
How to Fix
Increase spacing between clickable elements and reduce visual clutter by grouping or categorizing products more distinctly.
Issue Highlights
No visible environment or role context indicator
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The UI does not prominently display the current user role or environment context, such as whether the user is in a walk-in customer mode or admin mode, except a small 'Walkin Customer' label that blends with other UI elements.
Why it Matters
Users may be unsure about their current role or operational environment leading to operational mistakes or uncertainty.
How to Fix
Add a more prominent and distinct environment or role indicator near the top or header area with a consistent visual style.
Issue Highlights
Small search icon tap target
Moderate
Accessibility & Input Ergonomics
The Problem
The search icon in the top-left of the main product area appears smaller than recommended for comfortable touch targets, likely under 44x44 pixels.
Why it Matters
Users may struggle to accurately tap the search icon, leading to input errors or frustration.
How to Fix
Increase the size of the search icon button to at least 44x44 pixels with sufficient padding around it.
Issue Highlights
Confusing simultaneous category filter buttons
Moderate
Efficiency & Cognitive Load
The Problem
The sandwich, combo, Sweets, drinks, and a foreign language category button are all visible and selectable. Having several category buttons enables unnecessary decision points if more than one needs to be filtered or user is unsure which to pick.
Why it Matters
Users may hesitate or mistakenly select wrong category filters causing frustration and slower ordering.
How to Fix
Use a single dropdown or clear tab layout that highlights the active category to reduce simultaneous buttons and minimize decision points.
Issue Highlights
Mixed language use in controls creates inconsistency
Moderate
Strategic Design
The Problem
The category buttons include both English ('Drinks', 'combo', 'Sweets') and Arabic text in one label, causing inconsistency in UI language.
Why it Matters
Users may find the inconsistent language use confusing or less professional, reducing trust and smooth interaction.
How to Fix
Standardize language across filter buttons based on user preference or locale settings.
Issue Highlights
Potentially small tab button icons on left sidebar
Moderate
Accessibility & Input Ergonomics
The Problem
The tab buttons and icons on the left sidebar (e.g., globe icon, discount, new, sprite tabs) appear small and might have a tap target below 44x44 pixels.
Why it Matters
Users could find it difficult to tap these tabs accurately, resulting in selection errors or difficulty navigating.
How to Fix
Ensure these tab buttons are sized with at least 44x44 pixels tap targets with padding around the icons.
Issue Highlights
Multiple item options create micro-steps to find desired product
Moderate
Efficiency & Cognitive Load
The Problem
The menu shows many individual sandwich items arranged in a grid with several buttons for filtering categories (Sandwich, combo, Sweets, etc.), creating many small decision points before choosing an item.
Why it Matters
Users must scan many similar options and category buttons which increases time and cognitive load during ordering.
How to Fix
Group similar items under expandable categories or add a more refined filter/search feature to reduce the number of visible items at once.
Issue Highlights
Search Product Input Field Lacks Clear Action
Moderate
Flow & States Completeness
The Problem
There is a 'Search Product' text field visible but no visible 'Search' button or indication that pressing Enter triggers a search action.
Why it Matters
Users may type in the search field without knowing how to submit the query, leading to confusion or frustration.
How to Fix
Add a clear search button or visual affordance to indicate search activation, and if possible, support pressing Enter to trigger search.
Issue Highlights
Inconsistent Button Styles in Category Filters
Minor
Visual Consistency, Imagery & Media
The Problem
Category filter buttons on the left show inconsistent highlight styles. The 'Sandwich' button is highlighted with a bright green background and white text, while other active states use gray backgrounds with darker text, causing a style mismatch.
Why it Matters
Inconsistent button style reduces UI cohesion and could confuse users about which filter is actively selected.
How to Fix
Adopt a uniform style for all category buttons when active, maintaining consistent colors and font weights.
Issue Highlights
Menu Item Images Lack Emotional Warmth
Minor
Tone, Friendliness & Delight
The Problem
Menu items such as sandwiches and burgers are shown with basic photos but no engaging or inviting copy to add warmth or friendliness to the ordering experience.
Why it Matters
Emotionally flat presentation can reduce user delight and engagement when browsing food options.
How to Fix
Incorporate friendlier, more appetizing language or imagery overlays that evoke enjoyment and trust.
Issue Highlights