Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-3587

New and clearer icons for nodes in trees

    XMLWordPrintable

    Details

      Description

      In order to improve legibility in trees, I'd like to introduce two changes:

      1. add a structural icon for leaf nodes
      2. replace open/close arrows with minus/plus icons

      You'll find the rationale for the changes below.

      1. Easier to group nodes on same level

      User tests show problems with identifying tree levels. In particular, report problems associating nodes with their correct parent nodes.

      In the following example, the "class" and "publicKey" properties are on the same level as the "subscribers" folder. For some, however, they are inside the "subscribers" folder.

      Part of the problem stems from the fact that leaf nodes do not have structural icons in front of them that vertically line up with their sibling nodes. Another part of the problem is that the tree layout is too generous (see MGNLUI-3161 for a fix for that).

      2. Open / close arrows are not easy to discern

      Our current open and close icons for folders are hard to read sometimes, since their direction is not clearly identifiable, especially on small representations.

      By using minus/plus signs instead of arrows, we can significantly improve the legibility of the open/close state of tree nodes and at the same time make sure they appear lighter. The latter allows the actual icons to stand out more.

      Note that trees in older versions of Magnolia had both suggested elements already. They proofed to be clear and effortless to read.

        Checklists

        Acceptance criteria

          Attachments

          1. 0 Problem reading levels.png
            0 Problem reading levels.png
            72 kB
          2. 1 New tree.png
            1 New tree.png
            462 kB
          3. 2 Tree icons_150914.png
            2 Tree icons_150914.png
            13 kB
          4. leaf_icon_on_flat_tree.png
            leaf_icon_on_flat_tree.png
            183 kB
          5. mika-01-tree-icons-plus-minus.png
            mika-01-tree-icons-plus-minus.png
            223 kB
          6. mika-02-properties-first.png
            mika-02-properties-first.png
            224 kB

            Issue Links

              Activity

                People

                Assignee:
                sang.ngo Sang Ngo Huu
                Reporter:
                weder Andreas Weder
                Votes:
                2 Vote for this issue
                Watchers:
                3 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:
                  Date of First Response:

                    Checklists

                    DoD

                      Time Tracking

                      Estimated:
                      Original Estimate - 3d
                      3d
                      Remaining:
                      Time Spent - 7h Remaining Estimate - 2d 1h
                      2d 1h
                      Logged:
                      Time Spent - 7h Remaining Estimate - 2d 1h
                      7h