violasong
commented
4 years ago Hi, Luca! Sorry for the delay on responding to this. These write ups and proposals are excellent!
CC @jasonLaster @darkwing @digitarald @fvsch : I'd be interested in your thoughts on the bold sections below.
Inconsistency 1 and 2 - Agreed. Changes should probably always be retained.
Going a bit further:
We may want to consider a behavior where, when creating a new watch expression and clicking outside the field, it also commits the change. Chrome does it this way (in watch expressions and XHR).
Bug https://www.dropbox.com/s/bee079xchod9vgt/2020-01-04_watch-expressions_bugs_3.mov?dl=0
This is definitely a bug. Nice catch :)
Placeholder copy
Good thinking. I like "Add expression."
Let's question the reasons to hide the new expression input element
These are really good points. I know we do have vertical space concerns, but if the user is already using the Watch Expression/XHR sections, it could be fine to take up more space. On the Chrome side of things, they just do the + button. We could potentially consider going that route though it doesn't seem as usable.
To summarize:
In Watch Expressions and XHR Breakpoints, the combination of a plus button AND a sometimes-visible input field to add items can cause confusion. We could go the Chrome route with plus button only. Or, could it be worth having an always-visible input field? It would take up extra vertical space only if the user has already added at least one Watch Expression or XHR Breakpoint. This does seem to have the best usability if we are willing to give it the space.
fvsch
digitarald
luc4leone
Background
After reading PR 7467 I played with the "Watch expressions" component:
I took note of small details that maybe can be improved. They are all about interaction design.
Inconsistencies
A quick definition to better understand what follows: an inconsistent UI response happens when 2 similar user actions produce different results.
Inconsistency 1: click anywhere while updating an expression versus click anywhere while creating an expression
Action "click anywhere while updating an expression" reproduction steps:
Result: the changes are discarded.
Action "click anywhere while creating an expression" reproduction steps:
Result: the changes are kept. Same result for invalid expression.
We get the same results in both cases if the new expression is not valid. According to me the two similar actions ("updating" is a kind of "creating") should produce similar results, meaning the results should in both cases be discarded or kept.
Visual explanation:
https://www.dropbox.com/s/so6ij8ycw5rb782/2020-01-04_watch-expressions_inconsistencies_1.mov?dl=0
Inconsistency 2: while creating an expression click anywhere versus click the "Watch expressions" dropdown box title
Action "click anywhere while creating an expression" reproduction steps:
Result: the changes are kept.
Action "click title bar while creating an expression" reproduction steps:
Result: the changes are discarded.
I would expect both actions result in either keep the changes or discard them. I think the right behaviour should be to keep them (while pressing Esc should discard them in both use cases, which is what happens now).
Visual explanation:
Bug
Short description: new expression input in focus without blinking text cursor.
Reproduction steps:
Result:
Expected:
Visual explanation:
https://www.dropbox.com/s/bee079xchod9vgt/2020-01-04_watch-expressions_bugs_3.mov?dl=0
Placeholder copy
The new expression input placeholder copy is "Add watch expression". I think the following possibilities might pair better with the dropdown box title "Watch expressions":
because the first time I read the title "Watch expressions" I didn't think of it as a "compound noun", like for example "Long expressions", but as a verb and a noun. If that's the case, then I wouldn't think of adding a "watch expression", but just an expression (to watch).
Let's question the reasons to hide the new expression input element
The above points can be addressed one by one with specific solutions. However let me also propose a different approach, where I question the interaction design of this component. I suspect that the problems I described above have their root in hiding the new expression input. By hiding the input we gain vertical space and we have less clutter when we are not submitting a new expression. But we have also costs.
A subtle cost is that we give the user two options to create new expressions in the initial state, the "click on the + button top right" and the "click on the input placeholder". The double option is a good thing, until we take away one. After submitting the first expression only the plus button is available. If the user choses to click on the placeholder the first time she decides to enter an expression, she has to think about how to add another expression the second time, since this time the input with the placeholder is hidden: there's a bit of friction in the process.
Also, if a valid expression is already there, and the user starts to type in another one, but then click outside the input to accomplish some other task, then forgot about it, then after some time she deletes the valid expression, the reappearing of the forgotten input with old text inside might be surprising:
A clear benefit of always showing the input is that the use case of "adding more than one expression at the time" would be much quicker, because we could keep the focus on the input after entering a new expression, thus allowing for multiple submission by just using the keyboard, with no need to click on the plus button (that we can delete altogether) between one submission and the other. Quick sketch of the idea:
If we always show the input in "Watch expressions", we should consider to do the same elsewhere in the UI (e.g. "XHR Breakpoints") to be consistent.
Next steps
I look forward to hearing your opinions about the problems I described (did I frame them correctly?). I'll be glad to take action submitting the bug in Bugzilla if I got it right and that's the decision, or building a prototype for the "always show input" solution, or just simply discuss more the points described.