UX - Grouping of widget options

Owned by Liladhar Patil
Last updated: Jul 26, 2024
2 min read

 

image-20240723-120431.png

 

A grouping of widget options refers to organising and categorising interactive elements (widgets) within a user interface (UI) into logical, coherent sections. This structure helps users navigate and find options more efficiently, enhancing the overall user experience (UX)

 

How to specify it on widgets:

  1. Let's consider the Previous Next Widget as an example:

    1. groupName should be the same when we combine options into one group.

      1. image-20240723-121732.png

    2. Frontend admin view

    3. groupTitle and groupDescription should be added once for one group.

      1. groupTitle : Group titles serve as clear, concise labels that help users quickly understand the purpose and content of each group of options

      2. groupDescription :

        1.  

        2. Frontend admin view

          1.  

    4. If there are localized options OR options are in the util file in that case, follow the step:

      1. Use the spread operator and add a variable

      2.  

  2. How it works in code:

Group Wrapping with Dynamic className:

  • The code implements the grouping by wrapping each set of related options in a div that uses the group name as its class name. This allows for specific styling and handling of different groups. Options that do not have a specified group name are added to a defaultGroup. This ensures that all options are included and allows for consistent handling of ungrouped options within the same structure.