Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: High High
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Studio UI
    • Labels:

      Description

      When switching to Edit mode, the purple border lines go to the limit of the block, which is normal (I assume that the limits of the div blocks); so my request is to add some margin between those blocks in order to increase the experience of drag & drop (between 0.5 rem and 0.8rem)

      Image attached for reference of how the Edit view should look-> "Studio blocks DragDrop.png"

        Issue Links

          Activity

          Hide
          Piotr Nalepa added a comment -

          Inaki Juaniz-Velilla I'm not sure whether adding extra margins in the editor is a good idea. It may break the visual feeling of an edited page, especially when on an edited page there are already some extra margins between blocks and we add more margin for our needs.

          Show
          Piotr Nalepa added a comment - Inaki Juaniz-Velilla I'm not sure whether adding extra margins in the editor is a good idea. It may break the visual feeling of an edited page, especially when on an edited page there are already some extra margins between blocks and we add more margin for our needs.
          Hide
          Inaki Juaniz-Velilla added a comment -

          Piotr Nalepa We are using blocks to organize content, because specific behaviors are needed (drag & drop) for customization. These blocks need more separation than what a regular amount of internal whitespace can provide. The limit shouldn't be only the internal whitespace (padding), but the lines/dividers that define blocks limits and some external margin. As you know, these blocks inherit grid rules (this happens also with content cards, for instance). Maybe we need to reduce the amount of padding. In any case whitespace should always be our ally, not our enemy

          The reason behind this is that well-defined blocks structure content into easily-digestible chunks, each of which should be understandable at a glance. If you check UI patterns for drag & drop interactions there is always enough whitespace among blocks. When the user sees a page sectioned neatly into chunks, her eye is guided along the page more comfortably. This is something that the human visual system always looks for, it looks for bigger patterns, wether they are deliberately or not. We need to reinforce the former, in order to increase user’s experience making simple tasks as simple as possible. Hence, having a clean and consistent page structure assists the user in ease and predictability of her navigation.

          Show
          Inaki Juaniz-Velilla added a comment - Piotr Nalepa We are using blocks to organize content, because specific behaviors are needed (drag & drop) for customization. These blocks need more separation than what a regular amount of internal whitespace can provide. The limit shouldn't be only the internal whitespace (padding), but the lines/dividers that define blocks limits and some external margin. As you know, these blocks inherit grid rules (this happens also with content cards, for instance). Maybe we need to reduce the amount of padding. In any case whitespace should always be our ally, not our enemy The reason behind this is that well-defined blocks structure content into easily-digestible chunks, each of which should be understandable at a glance. If you check UI patterns for drag & drop interactions there is always enough whitespace among blocks. When the user sees a page sectioned neatly into chunks, her eye is guided along the page more comfortably. This is something that the human visual system always looks for, it looks for bigger patterns, wether they are deliberately or not. We need to reinforce the former, in order to increase user’s experience making simple tasks as simple as possible. Hence, having a clean and consistent page structure assists the user in ease and predictability of her navigation.
          Hide
          Dariusz Szut added a comment -
          Show
          Dariusz Szut added a comment - PR created: https://github.com/ezsystems/StudioUIBundle/pull/600
          Show
          Dariusz Szut added a comment - PR merged: https://github.com/ezsystems/StudioUIBundle/commit/f046aa8743ac8a12b87489262d801f1859204761

            People

            • Assignee:
              Unassigned
              Reporter:
              Inaki Juaniz-Velilla
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: