At the moment there are a few details that leave room for improvement for the properties panel.
If you take a look at the properties panel it doesn't have clear borders on the top and on the left. The properties panel is more or less "hanging" in the open.
The only distinct borders are the one at the bottom and the one at the left which is thicker. It is possible to drag the properties panel by the thicker border but the mouse pointer isn't changing on hover "indicating" an available interaction option nor is there some sort of style change on hover. It is sort of a "hidden" feature. The only potential clue is the thicker left properties panel border that could lead to the assumption on the users end.
That the properties panel is "hanging" in the open is due to the fact that the properties panel is placed in the upper right corner of the bpmn canvas. I've highlighted the extent of the canvas in Drupal in red:
so the canvas reaches only at the bottom to the window border, on the left, right and top there is a padding. In Camunda in contrast the canvas fills the whole viewport width as well as the available viewport height.
That way there isn't the impression of a freely hanging panel. With the current implementation of the properties panel there are two more issues (see disappeared.mp4).
Through the ability to drag and extend the properties panel further to the left there is the potential to get too long line lengths. In the context of the triple AAA WCAG2.1 1.4.8 success criterion's second requirement (https://www.w3.org/WAI/WCAG21/Techniques/css/C20.html) the user gets easily past the recommended ~80 characters per line, way past. on the other hand if you watch until the end of the video it is also possible to minimize the properties panel past the canvas border that it completely disappears. in case the user panics and forgets to save potential changes and simply reloads the page it is a potential source for data loss.
I wonder if the following approach would be viable:
1) for the properties panel itself remove the border on the left and replace it with the details handle Camunda uses (in case it isn't something bespoke created exclusively for Camunda).
It would have several advantages. The handle has a visual affordance including some style changes on hover. Then there is an issue upstream to add a hotkey so the user is able to expand and collapse the properties panel. another advantage is that the handle is using a button element. and by allowing the properties panel only to expand and collapse and not to adjust the width by having a fixed width you prevent the issues shown in the video.
2) in regards of the properties panel "hanging" in the open. it might make sense to extend the canvas to the available extents of the available screen estate in Drupal without adding any padding. i've illustrated here (colorized the regular drupal header in green and colorized the canvas in red - i've extended the canvas so there aren't any white paddings like in the canvas.jpg and repositioned the toolbar and the properties panel slightly - keep in mind that is just a rough draft to communicate the gist of the problem):
in the current implementation with the padding and the canvas not reaching to the full available screen real estate extent model elements are simply cut off.
the user has to assume where the canvas ends. on the right it is equal with the right border of the properties panel in contrast on the left it isnt consistent with the left border of the toolbar. on top it is equal with the upper border of the properties panel but unequal to the upper border of the toolbar. and at the bottom of the screen the canvas border is equal to the window border. so overall it is inconsistent and requires some assumptions by the user instead a clear visual queue like utilizing the window border. currently the user only has a visual queue when dragging or adding a new element to the canvas so the canvas gets greyed out. problem is that the grey is too light again from an accessibility perspective.
by extending the canvas the user would have clear visual borders by the used window borders and there wouldn't be any need for any assumptions anymore.
Active
1.1
User interface
Makes Drupal easier to use. Preferred over UX, D7UX, etc.
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
