marcbouchenoire / sketch-constraints

📏 A plugin that integrates constraints in Sketch to lay out layers.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Slight UI improvement

iAlborz opened this issue · comments

Here are some suggestions:

-adding a 4px corner radius to text fields for a smoother user experience and a more comfortable feel
-having the boxes profiled with the numbers. instead of clicking twice to drop down and selecting the number, now I can simply click the checkmark.
-right now it's not clear which directions have constraints, the checkmark approach makes it more clear.

screen shot 2015-10-08 at 12 00 33 am

  • Why? Text fields on OS X have squared corners.
  • Currently if the text field is empty it means that there is no constraint, it seems more logical to me than using checkmarks.

Well the default OS X assets are really old.
having no number does not necessarily mean there's no constraints.
having a checkmark on the other hand is a clear boolean estate. it's either on or off.
having it empty feels incomplete.
another reason to have a checkmark and have the text fields pre-populated with the numbers (that are currently in the drop down) is ease of use.
If I have a layer that is already where I want it to be, I need to click the dropdown and click the number and repeat 4 times. that's 8 clicks.
but with my approach the user can achieve that with 4 clicks only.

p.s. I'm not a developer but I do have extensive UX and UI experience. my suggestions are purely for making the experience easier for the user. I can't imagine how many hours of development goes into this, and I really appreciate all the efforts everyone is putting in this.

The current solution also has two clear boolean states, empty = no constraint, filled = constraint :)
I agree that your solution is better if the layer is already placed but I designed Sketch Constraints to also be used to place layers directly. I don't want Sketch Constraints to work only in one case.

In my experience people have trouble understanding what an empty text field means.
for example in sketch itself, when you select two items that their width aren't the same, the width text field would go empty.
and if their heights are identical, the height text field would show the number.
Logically your argument is correct. but from a user experience point of view it could be a bit confusing for people not familiar with the plug-in.
and with the addition of a checkmark, the user still has the option to adjust the value. the same as they do already.