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.

[njx]

(BTW, I'm assuming you mean that it should open on either left or right-click--not that we should only make it work on right-click.)

[GarthDB]

Exactly

Sent from my iPhone

On Nov 1, 2012, at 12:47 PM, Narciso Jaramillo notifications@github.com wrote:

(BTW, I'm assuming you mean that it should open on either left or right-click--not that we should only make it work on right-click.)

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

[redmunds]

Seems like clicking on Project Settings... would probably be the exception, so what about putting it last (not first)

[GarthDB]

I would make sure it has a divider, but it is hard to gauge which people would use more.

Sent from my iPhone

On Nov 1, 2012, at 12:55 PM, Randy Edmunds notifications@github.com wrote:

Seems like clicking on Project Settings... would probably be the exception, so what about putting it last (not first)

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

[redmunds]

@GarthDB I assigned this to me to get started on.

[GarthDB]

I was going to do mockup but I don't think there is any new ui.

Garth Braithwaite
Sent with Sparrow (http://www.sparrowmailapp.com)

On Friday, November 2, 2012 at 9:22 AM, Randy Edmunds wrote:

@GarthDB (https://github.com/GarthDB) I assigned this to me to get started on.

—
Reply to this email directly or view it on GitHub (#1996 (comment)).

[njx]

Forgot to address the issue with explaining what this field is. Here's a reasonably pithy explanation:

"To use Live Preview with a site or application that runs on a server, enter the server URL that maps to your project folder."

[redmunds]

@njx should that text be:

1. a paragraph above the label/edit field
2. an info icon with popover text box
3. something else?

[njx]

Not sure--I was responding to @GarthDB who asked what the text would be so that he could figure out which of those we should do.

[TomMalbran]

If this option is added to the project dropdown, maybe it could also be added to the file menu together with live preview, as another place to find it in case the user always uses the File menu to open projects, or as the first time.

[pthiess]

Reviewed

[njx]

At bug review, we decided that if we thought we might want to make the first change (move the dialog from the gear into the dropdown menu), we should do that in this sprint--if we later feel like we want the gear back, it makes more sense to split it out later, rather than conversely starting with the gear and then taking it away. So I'll review the pull request and merge as much as is already done. The other issues (help text, project name in dialog) can be done later.

[njx]

Adding sprint 16 back (for the first part of the issue).

[njx]

OK, the first two issues were fixed by #2034. We can fix the last one later.

[redmunds]

Removed Sprint 16 tag for remaining issue.

[njx]

Changing to low priority for remaining issue.

[redmunds]

@larz0 We were waiting to here from Garth about his thoughts on Usability suggestion 3, so re-assigning to you.

[larz0]

Thanks @redmunds What does the dialog look like right now?

[redmunds]

@larz0 Invoke the dialog using: File > Project Settings...

[larz0]

I like the idea of making "Project Settings…" the first item in the drop-down with a separator.

[larz0]

What are your thoughts about replacing the placeholder text with an example? I didn't know I had to include http:// or https://.

[redmunds]

The wording of the current text ("(to use a local server, specify url)") is meant to indicate that this field is optional and why it would be used.

What about: "(to use local server, specify url such as: http://localhost:8000/)" ?

[larz0]

Sounds good. We should remove the parentheses and capitalize the "T" in "to".

[redmunds]

Hey Lars, I'm wondering why you're signed up for the Brackets repo with @larz0 , but you're signed up with the Edge Code repo with @LarZ ? Sounds like a recipe for missed communications to me :)

Update: On Edge Code it's internal-only @lhsu (https://git.corp.adobe.com/lhsu). Yeah it's confusing...

[njx]

Minor wording tweak suggestion: "To use a local server, enter a url like http://localhost:8000/"

[larz0]

@redmunds: I've always had larz0 on github.com but github enterprise won't let me use the same username so I've changed my name to "lhsu aka larz0 on GitHub.com" on github enterprise :)

[larz0]

@njx we should go with that word tweak.

[redmunds]

@larz0 No worries. After I made that comment I realized that we all have to use external ids for brackets and internal ids for edge code, so I guess it's a fact of life.

[jasonsanjose]

@redmunds since #3750 was merged can we close this bug?

[redmunds]

To be safe, FBNC back to @njx .

[njx]

Originally I was thinking that we would have some more extensive help text in here (accessible via a tooltip or some such). But I haven't heard that people are confused by the current dialog, and the new placeholder text seems better, so there isn't much value in keeping this bug open, I think.