3D Office Layout Planner
The interface offers a clear and intuitive 3D visualization of office spaces, effectively supporting spatial understanding and layout planning. However, the interface could improve by enhancing the clarity of icon labels and providing more interactive guidance or tooltips for first-time users.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast0
Content Readability & Clarity2
Visual Consistency, Imagery & Media1
Navigation & Structure0
Conversion & Actions0
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
2Major
10Moderate
2Minor
No clear indication of user location or role in the layout
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface does not provide clear orientation cues about the user's current location within the floor plan or their role/environment context.
Why it Matters
Without clear orientation, users may struggle to understand where they are in the layout, increasing cognitive load and risk of errors.
How to Fix
Provide a visible heading or breadcrumb area that states the current location. Use map highlighting or labels to clarify the user's context.
Issue Highlights
Primary navigation icons lack labels and active state
Major
Navigation & Structure
The Problem
The primary navigation bar on the left shows only icons without labels or clear active states to indicate the current selection.
Why it Matters
Users may be confused about the purpose of each icon and uncertain about which section they are currently in, leading to navigation errors.
How to Fix
Add descriptive labels to each navigation icon and use a highlight or color change to show the active state.
Issue Highlights
Low contrast text in bottom-right input field
Moderate
Color & Contrast
The Problem
Text inside the input field at the bottom-right corner is dark gray on a white background, appearing somewhat faint and potentially below the recommended WCAG AA contrast ratio of 4.5:1 for normal text.
Why it Matters
Low contrast text can be difficult to read for users with visual impairments, reducing usability and accessibility.
How to Fix
Use a darker font color to increase contrast against the white background to meet or exceed WCAG level AA contrast ratios.
Issue Highlights
Unlabeled Vertical Icon Bar
Moderate
Visual Consistency, Imagery & Media
The Problem
The vertical icon bar on the left side contains icons without visible text labels, making their functions unclear to new users.
Why it Matters
Users may have difficulty understanding the purpose of each icon, causing confusion and slowing navigation.
How to Fix
Add tooltips or visible text labels to each icon to clarify their functions.
Issue Highlights
Small Arrow Button on Top Right
Moderate
Accessibility & Input Ergonomics
The Problem
The arrow button in the top right corner is relatively small with limited padding, which may require precise tapping.
Why it Matters
Smaller touch targets are harder to tap accurately, especially for users with motor impairments or using larger fingers.
How to Fix
Enlarge the arrow button and increase its padding area to meet touch target size recommendations.
Issue Highlights
Multiple small interactive buttons clustered on left vertical sidebar
Moderate
Efficiency & Cognitive Load
The Problem
The left vertical sidebar shows several small icon buttons stacked closely (2D view, camera, settings, share, more options), which may require multiple micro-steps to select the desired tool.
Why it Matters
Users might need to spend extra effort to identify and tap the correct icon, increasing cognitive load and interaction time.
How to Fix
Consolidate related tools under fewer icons using menus or allow customization to hide less used options.
Issue Highlights
Unclear Action After Selecting 'أشجار ونباتات' Input
Moderate
Flow & States Completeness
The Problem
The input box labeled 'أشجار ونباتات' has a right arrow possibly indicating a next step, but it is not visually clear where this arrow navigates or what the next action will be after tapping it.
Why it Matters
Users may be uncertain about what will happen if they proceed, causing hesitation or confusion in the flow.
How to Fix
Add a clear label or tooltip to explain what the right arrow does, or provide a visible confirmation or preview of the subsequent screen or action.
Issue Highlights
Low contrast on inactive UI icons
Moderate
Color & Contrast
The Problem
Icons in the vertical toolbar on the left appear to be a medium green on a white background, resulting in a low contrast ratio likely below WCAG AA. The icons do not stand out clearly against the light background.
Why it Matters
Low contrast icons reduce visibility and can make it hard for users with visual impairments or in bright environments to identify controls.
How to Fix
Increase the contrast by using a darker green or a different accent color for the icons on the white background or add a subtle background shape to increase contrast.
Issue Highlights
Small Vertical Toolbar Icons on Left
Moderate
Accessibility & Input Ergonomics
The Problem
The vertical toolbar on the left contains icons that appear smaller than the recommended minimum target size (around 36x36 dp). This may cause difficulties for users with less precise touch control.
Why it Matters
Small tap targets increase the chance of touch input errors and user frustration, especially on mobile devices.
How to Fix
Increase the size of each toolbar icon and/or the padding around them to ensure targets meet recommended minimum size guidelines for touch input.
Issue Highlights
Multiple separate work areas create competing decision points
Moderate
Efficiency & Cognitive Load
The Problem
The layout includes many visually distinct rooms with different furniture setups, causing users to process and decide among many spatial and functional zones at once.
Why it Matters
Users face higher cognitive load to understand space usage and navigate between work areas effectively.
How to Fix
Simplify layout display or provide zoning labels to clarify functional groupings and reduce off-task decisions.
Issue Highlights
High detail office layout adds visual clutter
Moderate
Efficiency & Cognitive Load
The Problem
The floor plan shows many small elements like chairs, computers, fire extinguishers, and plants, which add detailed visual noise without interactive affordance visible on screen.
Why it Matters
This level of visual detail can distract user focus and make primary actions less apparent.
How to Fix
Use simplified representations or allow toggling detail levels to declutter the view when focusing on specific tasks.
Issue Highlights
No Clear Action or Label for Top-Right Arrow Button
Moderate
Flow & States Completeness
The Problem
The arrow button at the top-right corner suggests a navigation or confirmation action but lacks labeling or context about what pressing it will do.
Why it Matters
Users may hesitate to click it or be unsure if pressing it will save changes, move forward, or perform another action.
How to Fix
Add a label, tooltip, or icon that clarifies the action to be taken when pressing this button to ensure users understand its purpose.
Issue Highlights
Misaligned Right Sidebar Button
Minor
Visual Consistency, Imagery & Media
The Problem
The round button with the arrow on the top right corner is slightly misaligned horizontally with the vertical icon bar on the left side.
Why it Matters
Misalignment can create a perception of unprofessional design and reduce visual harmony on screen.
How to Fix
Adjust positioning to align this button with the vertical icon bar or other horizontal UI elements for consistency.
Issue Highlights
Low contrast for undo-redo icons
Minor
Color & Contrast
The Problem
Undo and redo icons at the bottom-right are gray on a white background, resulting in low contrast that may cause difficulty for some users in identifying these controls.
Why it Matters
If icons are not clearly visible, users might have trouble finding undo and redo functions quickly.
How to Fix
Use darker icons or add a subtle background shape behind the icons to improve contrast.
Issue Highlights