Page MenuHomePhabricator

[Regression pre-wmf.8] No spacing between "Add template" button and the template search field
Closed, DeclinedPublic

Description

No spacing between "Add template" button and the template search field

Screen Shot 2018-06-07 at 12.52.51 PM.png (451×501 px, 22 KB)

Event Timeline

This is not a regression, but a design change for ActionLayouts. See T195973.

It maybe looks a little weird with the focus highlight and the disabled action button. If @Volker_E would like to tweak that combination somehow?

What comes to your mind @DLynch as improvement? I honestly think it's fine given the different visual options. Sure, disabled and enabled side-by-side might look a little bit confusing in the beginning, but

  • after the first keypress it turns into an enabled button (shouldn't this be a primary progressive button there as it's the primary action in that phase)
  • that's probably the exception and not the rule for ActionFieldLayout to have enabled/disabled combination at all
  • the input focus is overlaying the disabled button so that's fine as well

@Volker_E So, I feel like the styling now suggests that the action button is "inside" the input. (Maximally so in the field-with-search-icon case.) That makes it feel wrong to me when the field focus excludes the button. It breaks the "this is one unit" message that the no-spacing-shared-borders design seems to be going for.

My suggestion would be to either include the disabled button within the focus highlight, or change just the right-border of the focus to not be present.

Quick mockups:

actionlayout.png (300×492 px, 22 KB)

@DLynch
Current is a)
Suggestion 1 aka b) I think that's actually worse than current, as folks would rather see this as glitch than a)
Suggestion 2 aka c) The problem here is, that the button can and needs to receive focus as well, and it's not convincing going from widget focus to widget item focus like this IMHO?!

Vvjjkkii renamed this task from [Regression pre-wmf.8] No spacing between "Add template" button and the template search field to tfbaaaaaaa.Jul 1 2018, 1:05 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from tfbaaaaaaa to [Regression pre-wmf.8] No spacing between "Add template" button and the template search field .Jul 2 2018, 3:09 PM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

I think the current design is okay. I would suggest declining this task… @DLynch @Ryasmeen Do you feel strongly that it's a problem? :)

@matmarex: I don't think it's a major issue but I still feel slightly odd about this design having a textfield with focus highlight and a disabled action button right next to it. I did like @DLynch's third suggestion which makes the button look like part of a same unit at-least.

I agree with Volker that the focus states in David's mockups look weird :/

Honestly I like the old design the most… The current design seems okay too, though.

image.png (84×484 px, 3 KB)

I don't know if T195973 is still negotiable, or if that ship has already sailed. I don't really have strong feelings. Feel free to resubscribe me if you want my input.

I suppose that I'm not opposed to the combined field-button per-se, I'm just with matmarex in not really liking it in this specific instance. I'd probably be most visually happy just restoring the separation in this case. (And maybe other similar ones with this aesthetic incompatibility.)

Actually... sensible time to go: @iamjessklein, as our poor new Design person, do you have an opinion on this particular piece of design argument?

Thanks for bringing this up @DLynch - the ideal solution here would be to come up with some proposals and do a multivariate test to see what's more effective. That said, I don't think this is the right problem to address here. There's an innate UX issue with adding templates and having to rely on the user's recall to know what template to select. If we were going to take any time to dedicate to this part of the interface, I would focus on making it easier for users to select a template.

cc/ @Volker_E

Volker_E added a project: UI-Standardization.

Seconding @iamjessklein. The current way the input+search combination is sufficiently working – autofocussing when dialog is opened indicates that user is able to interact with form. Don't see any of the alternatives improving and worth alternating from UI standard way.