Usability issues/suggestions for Project Settings dialog

[njx]

1. (ALREADY FIXED) Visual design issue: The gear feels to me like it's kind of "floating in space"--it's not really visually tied to the project title other than vertical alignment, and the association isn't that strong. Could we consider having some kind of visual affordance that ties the two together, like a background color or gradient for the project header area?
2. (ALREADY FIXED) Project Settings dialog: I wonder if it would be valuable to have the name of the project in the dialog, maybe in the title. That would make it clear that these settings are per-project instead of global.
3. I'm not sure it's going to be immediately obvious to people what "Live Preview Base URL" means. Could we add some kind of help messaging in here--maybe an "i" information icon to the right of the field that you mouse over or click to get an explanation of what this is? (In general, it seems like we should have a design pattern for getting help that's more extensive than just a tooltip.)

[njx]

To @GarthDB for consideration. /cc @redmunds

[njx]

One more thought...This dialog really brings home to me how heavy the black background shield for modal dialogs feels. It really seems overwhelming when this relatively small dialog comes up. I wonder if we should tone the shield down in general.

Also, should we consider making UI like this feel less like a modal dialog, and more like a popup attached to the gear? (I wouldn't do that as part of this user story...that would be a later story for improving dialog UIs generally, I think.)

[GarthDB]

The shield should be toned down, in the original design comp the shield is rgba(0,0,0,0.15)

[GarthDB]

A popover could be a good solution, but long term I think it needs to be related to the application settings story.

[njx]

@GarthDB: any thoughts on the issues in the main bug description?

[GarthDB]

Yes, talked it over with xdid today in design review.

1. We think it would be best to hide the gear and reveal on rollover.
2. The name should be included to clarify it is for a specific project, not all projects
3. This is tricky. What would be the explanation? Could we write it out and then try and whittle it down? If it isn't too long we could just display it.

[redmunds]

1. Does it make more sense to put the gear in the upper right corner of the Project Panel? There's a big empty, lonely header up there. Garth, you mean rollover of the panel, not the icon, correct?
2. Also, what about changing the label to "Live Preview Server URL" ?

[GarthDB]

I mean on the project name in the panel

Sent from my iPhone

On Nov 1, 2012, at 8:03 AM, Randy Edmunds notifications@github.com wrote:

Does it make more sense to put the gear in the upper right corner of the Project Panel? There's a big empty, lonely header up there. Garth, you mean rollover of the panel, not the icon, correct?

Also, what about changing the label to "Live Preview Server URL" ?

—
Reply to this email directly or view it on GitHub.

[njx]

I'm not sure that makes sense--if I hover over the project name, the gear appears way to the right, and then when I move the mouse to the right to target the gear, it will dehover the project name, so the gear would disappear.

We could make the hover area include the whole area to the right of the project name, but that still seems like a very fiddly interaction--as I move the mouse to the right, I have to be careful not to wobble the mouse slightly above or below the (invisible) empty hover area, or the gear will disappear. Seems like that would be very frustrating.

Would it make sense to move the gear closer to the actual project name--e.g. to the right or left of the dropdown arrow? I guess the problem with that is that right now clicking on the project name actually opens the recent project list (the same as the arrow does)--I did that originally so that it was easy to target.

One other thought...what if we got rid of the gear altogether, and just had the first item in the dropdown menu when you click the name of the project (or the arrow) be "Project Settings...", followed by a separator and then the recent projects list? That would be simpler and clearer, I think, and avoid the problem of having different small targets for different functionality.

[GarthDB]

The problem is with the dropdown. If we didn't have it I would say put the
gear right next to the project label. Having it appear in the dropdown
would be a good solution. Could we also open the dropdown on right click?

[njx]

Yup, that would be easy.

[GarthDB]

Ok, locking it in. Project Settings in dropdown, with right click support. Final vote.