Enhance Collapse/Expand Icons and Entity Indicators

Hi Fibery Team,

I’d like to propose a UI enhancement that I believe could improve the overall user experience.

Issue with Current Collapse/Expand Icons

The current collapse/expand arrow icons in Fibery feel unintuitive compared to standard interfaces found in other software like Asana or ClickUp. They don’t clearly indicate the ability to expand or collapse sections, which can make navigation less straightforward for users.

Confusion with Entity Icons

Additionally, the “square” icon used for entities is somewhat confusing. It’s unclear whether the icon signifies an expandable item or serves another purpose. In my opinion, if an item is not collapsible, no icon should be displayed to avoid misleading users.

Suggested Improvements

  1. Update Collapse/Expand Icons:
    Adopt more universally recognized icons for expand and collapse actions, such as chevron arrows not so big and not so bold and filled version commonly used in many applications. This would make the functionality more immediately apparent to users.
  2. Conditional Entity Icons:
    Display icons only for entities that are collapsible. If an item cannot be expanded, removing the icon would reduce visual clutter and prevent confusion.

Visual Example

Below is a screenshot illustrating the current icons I’m referring to:

image

Example of improved icons:

SmartSuite
image

ClickUp

image

Asana
image

Benefits

  • Improved Intuitiveness: Users will immediately recognize expandable sections, enhancing navigation.
  • Cleaner Interface: Reducing unnecessary icons will make the UI cleaner and less distracting.
  • Consistency with Other Tools: Aligning with common design standards used in other popular software can make Fibery feel more familiar to new users.
4 Likes

As far as I can tell, and based on your screenshots, Fibery does the same as Asana and ClickUp, with the exception of showing a square for rows that can’t be expanded/collapsed (and maybe Fibery icons are slightly larger?)

Yes, you’re right that both Fibery and tools like Asana and ClickUp use chevron icons for expanding/collapsing. However, in my opinion, the chevron format used in Fibery doesn’t make it immediately clear to me that the item is expandable/collapsible. I’m not sure if it’s the combination with the square icon that makes it feel less intuitive, but something about it doesn’t quite click for me.

It might also be due to the inconsistency in how chevrons are used. For example, in the sidebar, the chevron pattern is more recognizable and feels clearer, but the chevrons used for entity items don’t seem to follow the same visual pattern. This inconsistency might be what’s creating the confusion in my case.

One looks like an “icon” the other looks like a “chevron” to really expand and collapse.

Screenshot_20241001_083620_Vivaldi

2 Likes