[AI] UI/UX & CSS Feedback Request for a Coffee Shop POS System (JSF + PrimeFaces 14)
| Hi everyone! 👋 I'm developing a web-based POS & Coffee Shop Management System built with JSF (Jakarta EE 11) + PrimeFaces 14. I'm sharing screenshots of several management and administration views (Roles, Employees, Discounts, Products, and Characteristics). I would love to get your honest feedback on UI design, visual hierarchy, layout, and UX. 💡 Project Context This platform handles core store operations: Menu & Product Management: Items, types, categories, prices, and dynamic attributes. Discounts & Promotions: Flexible discount rates, date-range offers, and rule triggers. Staff & Security: Employee records, custom roles, and access control. Daily Operations: Cash registers, order processing, and invoicing (not shown in these specific shots). 🛠️ Tech Stack & Frontend Architecture View Layer: Jakarta Server Faces (JSF / XHTML) using modular facelets templates. UI Components: PrimeFaces (v14.0 - Jakarta edition) + custom CSS stylesheet (estilos.css). Backend: Jakarta EE 11 running on Open Liberty + PostgreSQL (JPA). Localization: Native i18n support (Spanish, English, Chinese). 🔍 Comprehensive UI/UX Feedback Checklist I'm looking for feedback on any of the following aspects: 1. 🎨 Visual Hierarchy & Layout (UI) Form & Table Balance: Does the vertical split between the upper form (Inputs) and the lower datatable look clean, or does it feel cluttered? Buttons & Actions: Are primary action buttons (Guardar / Save) clearly distinguishable from secondary ones (Limpiar / Clear)? Toast Notifications: You'll notice PrimeFaces growl/alert messages in some shots. Are floating toast messages appropriate here, or would inline banner alerts be better UX? 2. ⚡ Usability & Data Density (UX) Readability: Are datatable columns, badge statuses (ACTIVO), and action icons (Edit/Delete) clear and easy to scan for administrative staff? Form Field Spacing: Is the padding and margin between input fields, dropdowns, and checkboxes comfortable for desktop use? 3. 🖌️ Modernizing PrimeFaces & CSS Styling Default Theme Polish: What specific CSS tweaks (shadows, border-radius, background grays, typography) would you recommend to give the default PrimeFaces theme a cleaner, more modern look? Any suggestions, CSS snippets, or constructive critiques are highly appreciated! 🙌 [link] [comments] |