Project grid header design

There are two goal posts related to column operations (drag and drop to reorder and adding mouse shortcuts to the header). While there are implementation ideas for each, it doesn't seem to me that there is consensus on how to make these features work without a broader design discussion about the project grid header. Previous discussions have taken place on these GitHub issues: drag and drop to reorder columns, improving renaming columns.

I’ll follow up with my summary of the discussions so far, but in the meantime I have a few questions for the community:

  1. How have UI/UX designs been worked on collaboratively in the past? I know there are design assets in Figma and I think Figma has some git-style merge functionality, so have folks collaborated there on designs? I think I’ve seen designs posted back and forth on the forum. Is that preferred?
  2. For complex interactions like the project grid header, interacting with prototypes directly seems to me to be a good way of communicating design proposals. Is there a way that folks have shared in-progress versions of OpenRefine before? I know we build snapshot releases, but that’s only for code that’s been merged into the master branch. Maybe the simplest option is to have developers build locally and upload assets as attachments to forum posts?

Hi folks, apologies for the follow up but I wanted to present a brief overview of my understanding of the past discussions around these features (based on the discussion in the aforementioned issues and linked pull requests). Apologies if I’ve misrepresented any comments or omitted any concerns:

  • The column drop-down menu can be confusing to navigate and would benefit from a redesign
  • A consistent user experience and visual language should be used across the application. For example: reusing styles and behavior between the mouse shortcut to rename projects and the proposed mouse shortcut to rename columns
    • I don’t think we currently have this documented on Figma, so adding screenshots of how OpenRefine currently looks would be much appreciated if someone’s looking to contribute designs!
  • Making individual updates to the project grid header without considering the design of the entire end result has a high risk of making the user experience worse despite delivering requested features

To have a common understanding of what the combination of the requested features looks like, I've put the two proposed implementations together in a branch on my fork: GitHub - SoryRawyer/OpenRefine at grid-header-shortcuts . I’m working on building artifacts for this branch and will upload them here once I have them.

Update: here are compiled versions of this branch for Linux and Mac: Release Preview assets for grid header updates · SoryRawyer/OpenRefine · GitHub

Screenshots of the column renaming mouse shortcut can be found in the description of the draft pull request: Add mouse shortcuts to grid header by SoryRawyer · Pull Request #7361 · OpenRefine/OpenRefine · GitHub

1 Like