7

The standard way to sinalize the ability to resize is with the operating system's own mouse pointer, the double-pointed arrow in the direction you are to resize (horizontal, vertical or diagonal). This happens when the mouse hovers the edge.

My application, a google chrome extension, consists of a right-handed panel that is inserted as a side bar into a given webpage. When the user hovers over it's edge a handle appears for the panel, and in this handle there is an icon for locking the panel in place, and clicking the handle hides/shows the panel.

So the edge is the only and thus a NECESSARY path between the web content and my app (which is the panel), since the edge separates the two. So given the user will be hovering over this edge multiple times, is it good interaction design to hide the handle and only show on hover? It would hide unnecessary elements most of the time, but also hide the affordance in a static situation.

As for resizing of the panel, should the handle as a whole allow resizing when dragged, or should I limit it to icons or visual areas in the handle? What visual cues would work best in this situation?

  • Should these visual cues light up on hover?

  • Should these visual cues change state when you have them 'grabbed'?

  • Also is it good interaction design to use a hand cursor (for 'grab') instead of the standard double-headed arrow cursor for resizing?

Improve this question
3
  • 2
    "going for a more webapp feel" - is this an actual web app? If so, then are the "panels" within the same browser window? A screen shot / mockup would help quite a bit - context matters!
    – peteorpeter
    Nov 23, 2011 at 16:09
  • It's a chrome extension, so the panel is injected as an iframe into the DOM on a given webpage, for example--so yes, in the same browser window.
    – Vic Goldfeld
    Nov 23, 2011 at 16:33
  • I have edited the question to give a better picture in words.
    – Vic Goldfeld
    Nov 29, 2011 at 9:38

3 Answers 3

Reset to default
8

If I understand your description correctly, then you should use a ordinary vertical split bar to separate your app, the side bar, from the web page.

This split bar should be visible all the time, not only on hover. And the whole split bar should be movable, not limited to some icons.

You should not use a hand cursor, but stick to the standard double-headed arrow cursor.

I believe that the user is familiar with the concept of resizing panels like this (at least all the users that would want to resize it). But if the vertical split bar is missing, then they might believe the side bar width is fixed and not adjustable.

enter image description here

Improve this answer
5
  • 1
    Grips are the classic affordance cue for "drag me"
    – Ben Brocka
    Nov 29, 2011 at 15:46
  • @Ben. As in "drag me and move me around", not for resizing like this. Right?
    – Jørn E. Angeltveit
    Nov 30, 2011 at 10:51
  • Take a look at Microsoft's guidelines: msdn.microsoft.com/en-us/library/windows/desktop/bb545459.aspx
    – Jørn E. Angeltveit
    Nov 30, 2011 at 11:02
  • Both actually; by "grips" I just mean the little dots on the interface like in your example, not the "grabbing" hand cursor; that cursor certainly indicates drag and drop, not "resize", the double sided arrows indicate "resize". I've more generally seen the dotted 'grip" as an affordance cue that you can grab and do something with an interface element; the new Gmail interface uses these grips for both interactions. It's not 100% atomic to one interaction but it greatly aids discovery of either interaction.
    – Ben Brocka
    Nov 30, 2011 at 14:17
  • @Ben. Aha. I thought you meant the (grab) mouse cursor! Vic asked explicitly about the "grab cursor" vs the "resize cursor", that's why I misread your comment.
    – Jørn E. Angeltveit
    Nov 30, 2011 at 20:06
5

If you're looking for affordance then you'll need to display something to the user before they start interacting with it. If it's just that the cursor changes to a double-header arrow when you hover over the border they won't know this is even an option until they actually hover over the border.

You should show something on the window for all the expandable panels to indicate that they can be interacted with in this way.

Similar things are done in various applications, i've grabbed a few here to show some examples.

enter image description here

Improve this answer
1
  • Thank you for your answer, it made me see my question in a different light, and I have made the edits accordingly!
    – Vic Goldfeld
    Nov 29, 2011 at 9:37
2
+50

There's a lot of context that you can depend on in situations like this. From my perspective, there's wiggle room between what you should always do as a best practice and what you can rely on from the experience of your audience.

Since people are installing this as an extension and you want to make it look and feel as if it's a part of the browser application, not having any grab/move icons visible in the interface is probably a desired goal. I only say that under the assumption it's going to have a reasonable width (not take over the window) and be resizable with a cursor change as visual reinforcement.

Another angle that opens up wiggle room is understanding how problematic it is to not show the grab/move icon. If most of your audience has wider screens and it isn't likely that they will have a lesser experience browsing websites, than not showing the tools will not cause much grief. If people who want to change it for vanity purposes, they can work a little harder without feeling like they're getting taken advantage of.

Evernote has a good solution for something similar:

enter image description here

It's just a grey line containing the left column. When your cursor hovers over a 10 pixel area to the right of the column a bright blue box shows up and your cursor changes to a left/right arrow with a bar in the middle (I have no idea what that icon is called).

If you did something similar, I would worry about a few things:

  • Place the box that resizes the column on your side. I'd try to interfere with other sites as little as possible.
  • Evernote doesn't do this, but it might be even more clear if you put the drag/move icons inside the box that appears on rollover.
  • Test out responsive/adaptive website with your extension installed. I would be extremely angry if I spent a lot of time making a nice website to fit the window and someone's extension overlapped my design.

I'm guessing you already know that last part. Just want to make sure. :)

Improve this answer
6
  • Great example with Evernote, that applies to a good extent to the context I have indeed!
    – Vic Goldfeld
    Dec 5, 2011 at 14:32
  • Now if I could only find out what cursor is that.. it's quite a good option.
    – Vic Goldfeld
    Dec 5, 2011 at 14:37
  • 1
    I was digging around in Evernote's CSS and found this: cursor: col-resize; javascriptkit.com/dhtmltutors/csscursors.shtml Might be what you need!
    – Dan Ritz
    Dec 5, 2011 at 20:49
  • That's interesting, is that perhaps the standards cursor they use for fallback reasons, whereas that slightly different (and more appealing) one in the image you linked would be a custom image?
    – Vic Goldfeld
    Dec 5, 2011 at 23:32
  • 1
    I'm guessing what I linked to is showing images of cursors from an old operating system (probably windows) and what I'm seeing on Evernote is a newer operating system cursor (on a mac). I didn't see any references to a custom image in the CSS, but it might be a custom cursor.
    – Dan Ritz
    Dec 6, 2011 at 18:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.