While working on a sidebar panel of an application, I have encountered a unique problem. A user needs to create steps (think in terms of creating an online course via a builder). One can add as many steps as they like. Each of these steps has tons of fields within it. I thought of creating a collapsible card with move functionality. Because a user might feel the need to change the order of the steps. Is this technically correct? Should the drag/move icon come outside the card?
-
1Although complex, I don't see a special problem. There's an example in this Stackoverflow Q&A– DanielilloDec 13, 2021 at 20:58
-
4From an accessibility perspective, make sure that elements can be reordered by more than just drag and drop. Perhaps allow them to TAB to the "grid" icon and move the element up or down via a special key (eg, shift+up) or via "move up" and "move down" buttons.– slugoliciousDec 13, 2021 at 22:06
-
Good point, just that it needs to be accessible by pointer devices as well, not only to keyboard users.– AndyApr 25, 2022 at 9:21
Add a comment
|
1 Answer
You can certainly dedicate areas within a large drag-and-drop surface to do specific things, such as expanding a panel. This can be helped with a visual indicator on hover/ mouse-over:
However, as I've shown above, you might have to think about the panel behaviour once it is expanded. Some designers choose to isolate interactions until done (for example, using a modal), and then hand control back to the drag-and-drop functionality.
answered Dec 15, 2021 at 13:13
