Uploaded image for project: 'Ibexa IBX'
  1. Ibexa IBX
  2. IBX-5403

Improve UX for richtext editing - width/space aspect with or without Page Builder



    • Icon: Improvement Improvement
    • Resolution: Done
    • Icon: High High
    • None
    • 4.4.1
    • UX task
    • Ibexa Content, Ibexa Experience
    • Yes


      Changes introduced in Ibexa DXP 4.x leave very little editing space for the non-PageBuilder attributes, which can be immediately problematic for richtext fields. This may affect UX, especially when working with larger richtext documents, which carry tables, graphical elements, more complex data compositions as well as long contents.

      When working with classical content types, without Page Builder, a decision seems to have been made to define a maximum width of attribute fields column:

      With more content, richtext field grows longer, but does not grow wider. Instead, horizontal scroll is activated, which may be one of the worst UX patterns out there. It's completely acceptable as a edge-case security (too little space), but it's really weird when we have plenty of space available on the screen (as shown above).

      Also, the floating toolbar of new Online Editor / richtext editor graphically is very similar to the surrounding background. It's really easy to loose it from sight. For less experienced users it's something they may not cope with well.

      Same problems are carried over to Page Builder context, when editing attributes:

      There is even less space given to the attributes, and it's value is fixed. The whole UI becomes even more complex here, with multiple scrolls. The richtext editing reflects even less final rendering and gets user further away from WYSIWYG. Horizontal scroll for richtext more inevitable. And richtext's toolbar floating even further away from actual field:

      In the meantime, it seems that overall CSS is quite ready to accomodate more space:

      Based on the above, I would like to propose couple of improvement points.

      One: to allow dynamic width adjustment for the column containing attribute fields. It would be ideal if this could be a flexible drag&adjust tool that would utilize Ibexa Preferences to save user's ideal width. Also, with a reset button/option to move back to defaults.

      Second: to give some specific color to richtext toolbar in order to make it more outstanding and visible. Also, it's floating should probably have limits set. For example:



          1. image-2023-03-28-13-52-21-121.png
            158 kB
          2. more-width-ready-css.png
            85 kB
          3. more-width-ready-preview.png
            920 kB
          4. non-page-builder.png
            545 kB
          5. non-page-builder-2.png
            525 kB
          6. page-builder-1.png
            1.01 MB
          7. page-builder-2.png
            1.08 MB



              Unassigned Unassigned
              45fc158e-1e71-4a12-9a5d-3210b3f553ee@accounts.ibexa.co Piotr Karaś
              4 Vote for this issue
              5 Start watching this issue