Structural Enhancement of Clickables on System in Accordance with HCI Standards

[barchakuz]

Description: The current layout of clickable elements on our system, particularly on medium-sized devices and smaller screens like iPads and mobiles, presents usability challenges. The buttons are positioned too closely together and are relatively small, increasing the likelihood of misclicks, particularly on touch-enabled devices. To align with Human-Computer Interaction (HCI) standards and ensure optimal user performance, it is essential to make adjustments to the front-end structure of the website.

Bug Description: Clickable elements, such as buttons, on the website are too closely spaced and small, leading to potential misclicks and usability issues, especially on touch-enabled devices.

To Reproduce:

Access the website on a medium-sized device or smaller screen. Navigate to a page containing clickable elements, such as buttons or links. Attempt to interact with the clickable elements, noticing the close proximity and small size. Experience potential misclicks or difficulty in accurately selecting desired clickable elements due to their size and spacing. Expected Behavior: Clickable elements should adhere to HCI standards, with appropriate size and spacing to facilitate easy interaction and minimize the risk of misclicks, especially on touch-enabled devices.

Screenshots: attached

Root Device:

OS: [e.g., Windows 10] Browser:Chrome Version: 24

Tested Device 1: Device: Iphone 14 Pro Max OS: iOS8.1 Browser sifari Version 22

Tested Device 2: Device: samsung galaxy s24 OS: Android 14 Browser Crome Version 22

Additional Context: Ensuring proper size and spacing of clickable elements is essential for adhering to HCI standards and providing an optimal user experience. By enhancing clickables according to HCI principles, we can improve usability, user satisfaction, and overall engagement with the system.