[Usability]Request for help designing UI for layouting commands



[please CC replies to cactus cactus rulez org]

Hi,

I hope with GNOME 2 already UI-frozen, you guys can spend some minutes
helping me here, because I have no idea when it comes to designing
simple user interfaces for lots of options, and this is exactly what
I've now encountered.

The application I'm writing (Guikachu) is a Glade-like user interface
editor for PalmOS-running handhelds. The relevant part to my current
issue is that one of its parts is a visual form editor, so you have a
rectangular area and smaller rectangular widgets inside it. You might
want to look at the screenshots at
http://cactus.rulez.org/projects/guikachu/ to get a better idea what
I'm talking about.

A fairly reasonable feature request is to make it easy to line up 
widgets. There are two operations related to this: aligning widgets
and spreading them with even spaces between them.

So my initial idea was to have the following menu structure in the
right-click context menu displayed when more than one widget is
selected:

	Align horizontally	-> Align to the left
			   	   Align to the center
			   	   Align to the right
	Align vertically	-> (...)
	-----------------------
	Spread out horizontally
	Spread out vertically

However, then I have realized that there are a lot more options. I'll
explain each now. What I'd like from the Usability group is
suggestions on how to display all these possibilities, and what
terminology to use.

1, Alignment
There are several ways to decide what line to use as the alignment
standard. Imagine the following situation:

	 .---.
	 | 1 |
	 `---'
	      .----.
	      | 2  |
	      `----'
	  .------.
	  |  3   |
	  `------'
	   
Widgets 1, 2, and 3 are selected. Now suppose the user wants to line
these widgets up horizontally, aligned to the left. There are three
possible lines to align the widgets to:

	 A  C  B
	 |  |  |
	 .---. |
	 | 1 | |
	 `---' |
	 |  |  .----.
	 |  |  | 2  |
	 |  |  `----'
	 | .|--|--.
	 | |  3   |
	 | `|--|--'


      A, the left edge of the left-most widget (1)
      B, the left edge of the right-most widget (2)
      C, the average of the left edge of selected widgets

The problem is, with the possible exception of C, these are all
legitimate user cases so it can't be solved by not providing
obscure/never-used options.

Of course, right-aligning widgets has the same options with respect to
the rigth edge of widgets.
Center alignment is straightforward enough that it doesn't have any
complicated options.

So with alignment, that's (2 (left/right) * 3 (A/B/C) + 1 (center)) *
2 (horizontal/vertical) == 14 possible actions. I certainly don't want
14 menu items :)

2, Spreading

Again, an example:

  .-----.       .---.   .------.
  |  1  |       | 2 |   |  3   |
  `-----'       `---'   `------'
  
First of all, unlike with alignment, with spreading sometimes the
frame of reference should be the whole of the parent window and not
just the combined bounding box of the selected widgets. That's because
a common use of this feature is going to be spreading out buttons at
the bottom of a window, as dictated by the PalmOS UI guidelines.

Also, you can either make the spaces even, or the
positions. E.g. consider

  .-----.     .---.     .------.
  |  1  |     | 2 |     |  3   |
  `-----'     `---'     `------'
        |<--->|   |<--->|
  
versus

  .-----.    .---.      .------.
  |  1  |    | 2 |      |  3   |
  `-----'    `---'      `------'
  |<-------->|<-------->|

So, again, we arrive at a lot of possibilities: 2 (spread over window
size/spread over selection bounding box) * 2 (even spaces/even
positions) * 2 (horizontal/vertical) == 8 valid options.


Thus, I'm looking for a UI that presents to the user all these
layouting commands in a way that is both easy to understand and easy
to use. 

Thanks,
	Gergo

-- 
   .--= ULLA! =----------------------.   `We are not here to give users what
   \    http://cactus.rulez.org       \   they want'  -- RMS, at GUADEC 2001
    `-----= cactus cactus rulez org =--'
Cigány triatlon: leszalad a strandra, úszik egyet, és hazabiciklizik.




[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]