Drag / resize handles

In my last post about Anaconda’s UX redesign, there were a couple of mockups that featured draggable diagrams for managing space on a disk, allowing you to shrink its partitions as possible:

I’ve been thinking about the best way to make the partitions look draggable. They only need to be draggable horizontally; the mockup above shows a diagonal drag handle making it seem as if the space could potentially be dragged upwards as well as horizontally (it can’t.) I’ve looked around different UI patterns for this; it seems a lot rely on the mouse hovering over the area to be dragged and the pointer changing to indicate draggability. I’m not sure that’s enough; I think there should be more visual clues that something is draggable that don’t require you to mouse over them to determine draggability.

So here are some mockups I did just experimenting with different looks; some are definitely more successful than others, I think. What do you think?

6 Comments

  1. Robin N

    I think the interaction model matters a lot here; if I drag and “shrink” the Mac HD partition, does it add to “Bootcamp” or “Free”?
    From another angle, If I’m looking at the above, and want to take add that 8gb free space to Mac HD, where do I click and drag?
    Probably the easiest to model is that clicking and dragging a gap between two partitions only affects those two partitions. If that’s the case, then I’d say something along the lines of B or X, except with the “grippy dots” spanning the gap.

    • mairin

      Something like this?
      Brilliant, for whatever reason I wasn’t thinking about making the gap itself grippy. And you’re right, that model makes more sense – I did have the idea ‘Free’ would grow and shrink as you shrink the partitions and I wasn’t thinking about the case where you change your mind and want to grow it back. What do you think?

  2. Pingback: Reclaiming space from partitions during installation Round 2 « Máirín Duffy

  3. Nyawade S

    I like N and S. I’m not sure, but isn’t the only difference that S draws a line between used and free space?
    Are animated handles allowed? If so, I think they would be very effective. Could even have “DRAG” fade in and out from the edge.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.