Space-saving in drag and drop activity?
Oct 28, 2019
Hi everyone!
I've been asked to create a drag and drop activity for managers to self-assess against some lominger competencies. The categories are 'Critical', 'Must Have' and 'Nice to Have'.
Take a look at the attached .story file to see what I've done. I'm encountering several issues that I don't currently have solutions for:
1. There are too many drag items! We'd like them to be able to sort a total of 38 competencies and the most I can fit at the moment is (arguably) 10-12. I asked if we could reveal the drag items one at a time but stakeholders would prefer users be able to sort items at their own pace. Any ideas on how to display these items without making them unreadable?
I had thought about some kind of user controlled carousel. Does anyone have examples of this working in confined spaces?
2. Stakeholders have also asked that users be able to see a brief description of the competency when they mouse over or click on the drag items. Here's what I've experimented with and how it turned out:
- Hover state on drag item appearing below item; does not allow enough room for full competency descriptions.
- Layer triggered by mouse hover; seems to work okay but can get a bit janky when combined with the freeform drag and drop.
- Layer triggered by mouse click; works okay, but there's no easy way to convey to learners that items are clickable as well as dragable. Users have basic tech literacy but may not be confident.
So far the last option seems like the most functional and reliable. any ideas for implementing it so that users don't get confused?
Thanks!
1 Reply
Make the droppable boxes much smaller, like 6 points of text. Use all CAPS it improve readability, the size and shape of the boxes should drop as well.
Now add a scrolling panel on the left part of the slide and drop all the competencies into that panel. That will give you all the scrolling space you need.
The users can drag objects out of the scrolling panel and drop them into the static columns on the slide.
See if that gets you there.
=================
My solution for this would be to put all the competencies into a scrolling panel with 3 radio buttons on each one for the to click, nothing to drag. A standard LIKERT SCALE that everyone is familiar with.
Be sure to put the titles of your columns OUTSIDE The scrolling panel above they don't scroll, everything else does.
This discussion is closed. You can start a new discussion or contact Articulate Support.