Im working on a project and i'm stuck on the best route to take in designing a feature. Rather than go into detail about the actual project i'll use a simple example since the concepts are the same :)

I have a panel on a form, the panel contains 100 buttons in a 10x10 grid. Each button has an ID of 1 to 100.
When clicked the button toggles between On and Off.

I need to allow the user to create a sequence of On/Off combinations.

I started out by recording a sequence of clicks. So the user starts recording then clicks the buttons in the order they want them to activate. Each time a button is clicked it gets added to a List. Works great for a simple one-by-one sequence.

The probem: I need to allow users to turn on more than one button in a single step : / For instance, step one might be for buttons 1-10 and 30-40 to come on together. Then step two would have 1-10 go off, 20-30 come on and 30-40 stay on resulting in 20-40 turned on.

Anyone got any ideas of the cleanest, easiest way to do this..both in code and in terms of UI. I want it to be really simple to click through a sequence and then store it...but i cant find a way to distinguish two buttons one after the other and two buttons to be turned on at the same time.

I've tried a number of approaches but they all seem to awkward with far too many clicks. It needs to be reeeeeaallly fast and easy to do.
Any ideas would be HUGELY appreciated :D

9 Years
Discussion Span
Last Post by sknake

Wow...no replies...either im not the only one stuggling with the idea or i explained it really badly ;)

Ive attached a pic of my concept so far...user clicks teh arrows to move through steps/add step then clicks on any buttons they want active at that step and each step can be given a duration.

Its still a LOT of clicking, but i cant think of a cleaner way to do it : / Still open to ideas guys :D

Attachments StepPicker.gif 4.47 KB

When you open a window, eg. Documents you mostly see a bunch of icons you can select.
You can drag a selection rectangle over some files. You can select more files by holding down the ctrl button and drag another selection rectangle etc. This way you can select file icons say at the top of the window and at the bottom. The selection does not has to be continious.
Try to imitate this. Search for code to drag a selection rectangle on the net.


Cheers ddanbe, i'll look into that :)
My only concern is that less technically savvy people aren't aware of the keyboard shortcuts for selection. I guess fi i put it in tooltips they might figure it out :) And if they dont it wont create MORE clicks


Have your form run in two modes: One in "Normal" mode for usage and one for "Record" mode. I had a very similar concept once for making a customizable dashboard where they could put their favorite items on the application's main form.

They basically pushed a button then selected a menu item and it would bind the two events together.

However this was incomprehensible to certain departments using the application when I used a single form. So what I did was opened up a new instance of the main form with a bright red "Pick your options!" header and instantly everyone understood. I like danny's solution more because it makes sense with everything else in computing, but it depends who the target audience is I guess :(

If you decide to clone your form you could also have a listbox docked on the left/right side that shows the order as they click the buttons.

Edited by sknake: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.