Optical Effects in User Interfaces

Good article in general but mixed with many fallacies.

1. Size is obviously not height. It's the area of the shape. There are complications though, e.g. negative space often adds weight. Blurring shapes is a terrible idea here.

2. Aligning shape edges is also an optimization problem to equalize overshooting areas.

3. Finding a visual center has nothing to do with the circumcircle in a general case. It's a well-known centroid. But, again, there are lots of complications.

4. A circle is perfectly circular. There are other reasons for the "O" adjustments in typography. It's even mentioned later on with no connection to here.

5. The round corners is another story. In this case G2 fillets are most pleasing. It's hard to make this adjustment by hand, that is why the examples look bad and unnatural. Squircle, Lamé curve, has nothing to do with the iOS icon shape.

Most of these adjustments can be done with mathematical precision. The rest can be approximated well enough with mathematical models. Ideally, design tools should guide these adjustments. There is definitely interest. My most successful plugin for Sketch happened to be the one for optical adjustments http://designplugins.com/optically.

Regarding optical size of icons... for years I've wished that icons were sized (in the dock, in Finder, etc.) to consistent maximum area on top of maximum height/width, so that applications with square icons wouldn't look bigger than the circular or irregular ones. It would make everyone's dock look so much better.

For example, a 32 x 32 icon has 1,024 pixels. If we declared than any icon can only use 2/3 of the available area, then square icons would be reduced to 26 x 26, circle icons to 29 x 29, and more irregular shapes like a printer or magnifying glass would presumably get the full 32 x 32. It's trivial to sum up and calculate from the amount of transparency, and would leave rows of icons so much more optically balanced.

(More advanced -- to deal with hollows, you can "shrink wrap"/"gift wrap" the icon before calculating area.)

Fun fact, the google logo is not a circle: http://i.imgur.com/lBk99be.jpg

I like the optical effect where 1/4 of the article is obscured by two banners.

To me the circle in the diagram which is supposed to be "equal visual weight" looks larger than the square, while the ones in the first example appear about the same.

But if I zoom the page out to 50%, or look at it on my phone, then things do work the way the author expects them to.

So I fear it may be difficult to correct for these effects as long as people use different screens.

> What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically speaking, their width and height are equal.

The area of a circle isn't width * height though, obviously. If you plug pi * r^2 = 400^2 into WolframAlpha, you get a diameter of 2*r = 451.35 pixels, very close to the 450 pixels the author came up with.

For the icons too, maybe you could just count the pixels (ask Photoshop the amount of filled in pixels?) and make sure every icon has a similar amount.

Things like weight, continuous first and second derivatives in other words.

Inscribing something in a circle isn't good enough. Use the image center of mass to really balance icons. Are there any design tools that provide center of mass?

Here's a minimal python/scipy script to measure the image centroid (of a b/w image):

    from scipy import ndimage

    im = ndimage.imread(args.input)
    com = ndimage.measurements.center_of_mass(im)[:2]
    size = im.shape[:2]

    print("positive x is right, positive y is up")
    print("image centroid is offset from image center by x:{0:.1f} pixels by y:{1:.1f} pixels".format(com[1] - size[1]/2, -(com[0] - size[0]/2)))

Is it safe to assume that pixels are perfectly square?

s/weight/area/

This makes me think of optical margins which are used in some typesetting software (like LaTeX with the microtype package). The thing is when it comes to geometry for human consumption the only thing that matters is how it looks. My Dad actually taught me this a long time before I knew about typography. He told me that while a spirit level is an important tool, it's a mistake to put a shelf up level if it doesn't look level next to the ceiling.