Enhance DataTableColumns `pinned` design

[britt6612]

Request: An enhancement for DataTableColumns to prevent users from altering the arrangement of specific columns.

Problem Statement: It's crucial that end users are aware that pinned rows cannot be repositioned.

Current design for pinned list

[KennyAtHPE]

Design considerations and rationale:

Background color

• (Current) Background back
  • Same color as some of our hover states so might be a bit confusing for users as to whether or not it's being selected
  • Puts a strong emphasis on locked items, which is the opposite effect of what's needed
• Disabled overlay
  • Technically it isn't disabled so it might be an incorrect usage of this treatment
  • Good affordance that the field is not interactable and doesn't take emphasis away from the other interactable items
• No background
  • Consistent with other list items but doesn't contribute to deemphasizing it from the other options

Text

• (Current) Bold
  • Consistent with other list items but doesn't contribute to deemphasizing it from the other options
• Default text styling?
• Bold but disabled styling
  • Technically it isn't disabled so it might be an incorrect usage of this treatment. Not accessible?
  • Good affordance that the field is not interactable and doesn't take emphasis away from the other interactable items
• Text/weak
  • Differentiates locked items from other list items but does not convey that it is disabled

Icon choice

• (Current) Pin
  • Does this icon align w/ people's mental model? To me, the pin states that the column will remain visible rather than communicating whether or not it is moveable within the list
  • Furthermore, it almost feels like pinned items should be bubbled to the top but we wouldn't want that since it would break up the list order
• Lock
  • Does this icon align w/ people's mental model? Are we or will we be reserving this icon to be used elsewhere and in a different use case?
  • As a temporary solution, I believe this would be a better fit than the pin icon
• Keep arrows
  • A bit hard to quickly scan through the list if we keep these. This applies to both text/strong and disabled colors

Icon color

• (Current) Text/Strong
  • Since it's similar to the other interactable icons, users might think that it is also interactable
• Disabled overlay
  • Good affordance that the icon is not interactable and doesn't take emphasis away from the other interactable items
  • Consistent styling with the other disabled arrows in the list (first and last list items)
• Text/weak
  • Differentiates locked items from other list items but does not convey that it is disabled

Icon placement

• (Current) Right
  • Consistent with other icons placement. If the pin or lock is chosen, the single icon stands out and emphasizes the fact that it is different
• Left, replacing the number
  • Good emphasize that it's different than the other list items but breaks the pattern for icon placements
  • Does it hurt the user's ability to scan quickly through the list? Will users even be looking at the right side if they expect for icons to be on the right?

---

3 Suggestions