Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Does anyone have a good reference for laying out non-rectangular user elements? I don't just mean circular buttons which are laid out as if they were in a square box, and I don't mean placing them exactly - I need an automated way to lay out a number of circular or oval shapes, taking into account their exact shape, in different container objects.

To clarify, I am look for research on this subject or ideas for principles on how to do it. I'm not looking for code examples or implementation details. This is not something I've seen, so any indication that it exists would be helpful. The closest thing to this I've seen is the "cloud layout" used by some "associated topic" interfaces.

To clarify again, this does not have to be related to web design, or even to currently available systems. I'll settle for any work, no matter how theoretical.

My last attempt to clarify for those who keep asking. Sorry for those who understand the issue. Taking Java as an example, the Java UI toolkits have LayoutManager which is used to control the placement of components, buttons or images or text boxes. There are many implementations of LayoutManager, which place the components in different ways. However all the implementations rely on the underlying mechanisms of components which assume they are rectangular, having a width and a height. The question is: what would a LayoutManager paradigm look like if we didn't need to assume that the components were rectangular, but could be circular or oval.

share|improve this question
I'm unclear on what you're asking. What type of configuration do you need them to be laid out in? What is the goal or purpose of the positioning? –  lori.lee Oct 6 '10 at 17:35
I'm looking for a general technique of laying out such elements, or references to work or studies about that subject. –  DJClayworth Oct 7 '10 at 15:17
@DJClayworth: are you looking for a solution to the optimal packing problem? –  akonsu Oct 10 '10 at 4:46
might try to have a look at "cutting instries" (textile, wood, metal) as their machines have software algortimes that will calculate the best fit on a certain piece or how much is needed for certain forms. –  BerggreenDK Oct 12 '10 at 23:27
@DJClayworth given that you've received no useful answers in a week, it might be a good idea to expand your question by adding visual examples or links to something similar to what you're talking about. You might try rephrasing the question to remove the "how", as people seem to think you're asking an implementation question. –  Rahul Oct 13 '10 at 7:59

2 Answers 2

Jared Tarbell might lead you in the right direction.

He has done some research in the area.


Otherwise there is Ben Fry or Casey Reas the two guys behind Processing http://processing.org/exhibition/

share|improve this answer
Interesting and thought provoking. Thanks Thom. Or is it Pete? –  DJClayworth Oct 19 '10 at 14:56
It's Thomas :) now push that up arrow so I can get a point :) –  ThomPete Oct 19 '10 at 18:07
Glad to oblige. –  DJClayworth Oct 20 '10 at 14:00

Aha! now it starts to make a little sense. Perhaps you can use algortime thoughts like how colors are placed in histograms?

First you analyse the amount and spikes, then you find patterns and ajust the elements accordingly.

I would give every element a sort of "weight/value" (or more variables/attributes even) then spread them out by various patterns.

Giving the user the options perhaps to use patterns/filters like: mirroring, repeating, rotating, flipping etc.

So if you need to spread out in two columns, then you divide the contents into two groups or figure out how many "large" elements there is and then places them in smallere and smaller sizes from that. The size of the elements could be calculated from the amount of usages or weighting in other parameters.

Do you follow this idea?

share|improve this answer
@DJClayworth have you read this one? –  BerggreenDK Nov 5 '10 at 12:11

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.