I am developing an application where users are required to build and execute checklists.

The concept is easy and the code not hard but I am struggling to find an intuitive mechanism for them to do so.

The process it pretty simple:

  • They can produce a checklist from some base checklists (they are allowed to import more than one).
  • The checklist gets mapped to a work item (not mandatory)
  • There are some additional details like name , etc that need to be filled in
  • They should also be allowed to edit the checklist

I had initial prototyped a windows application where I used a wizard driven approach but now they want it on the web and it has got me stuck.

Was thinking about Chrome's Option menu UI design with the overlapping as a possible solution.

Some advice/idea's would be greatly appreciated.

  • 1
    Could you show us some of what you already have to comment on?
    – JohnGB
    Commented Sep 15, 2011 at 9:15

2 Answers 2


I would allow the user to left click on unchecked checklist items, which would change the label into a text box. The label could have text (updating a task name) or could be blank (adding a task name). Erasing the text would delete the task name. Left clicking anywhere else on the checklist would change the text box back into a label.

Left clicking on a check box would check the box.

I'm not sure how well this would work with your checklist mapping to work items.


I think it is important to keep the list together as a list the whole time. Also, graphically it needs to represent which field is being edited.

I've wire framed an example for fun:

wire frame

The list item will be highlighted, and edit box attached the same color to show they correspond.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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