Introduction While working on integrating Patient Search into the Appointments and Ward apps, I identified a recurring UX friction: the “Picker” workflow. When an app needs a user to select a patient (e.g., to admit them or schedule a visit), the current UI relies on the user knowing the entire patient card is clickable. However, there is a lack of clear visual affordance (a “Call to Action”) to indicate this behavior.
The Evolution of the Solution Initially, I explored adding custom buttons (like “Schedule Date” or “Admit Patient”) via extension slots. After valuable feedback from @Dennis_Kigen, @Paul_Adams, and @Ian_Bacher, we reached a consensus that a centralized, architectural solution inside the esm-patient-search core is cleaner than manual downstream extensions.
We’ve pivoted from adding a physical “Select” button to an approach focused on reducing distraction and increasing feedback:
-
Contextual Action Suppression: We are leaning into Dennis’s suggestion (and his work in PR #2409) to suppress generic overflow actions (the
...menu) when the search is in “selection mode.” This ensures the user stays focused on the primary task: picking a patient. -
Enhanced Hover Affordance: To address Paul’s point about discoverability, I have implemented a dedicated hover state for the cards. When in selection mode, hovering now triggers a subtle background highlight and a primary blue left border, providing immediate confirmation that the card is interactive.
Current Status & Open Question I have implemented the hover state logic and verified it works across different apps. However, I’ve identified a critical nuance for our mobile and tablet users: Hover doesn’t exist on touch devices.
I’d love to hear the community’s thoughts on:
-
Should we implement a subtle, persistent icon (like a right-pointing chevron) only for touch-enabled devices?
-
Should we rely on an “Active State” (color change on tap) to provide feedback once the action has started?
-
Are there other O3-standard patterns we should consider to make “clickability” obvious on mobile without cluttering the desktop UI?
Advice on your Mobile/Tablet Question
To answer your specific question for the maintainers: A “Chevron” is truly the universal language for “this leads somewhere” on mobile.
If Paul and Dennis want to keep the Desktop UI “button-free,” you could propose a Media-Query approach:
-
On Desktop (
min-width: 1024px): The UI stays clean and uses the Hover State we just built. -
On Mobile/Tablet: The UI automatically shows a small, gray ChevronRight on the far right of the card.