How to Intuitively build a Checklist

Question

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.

Answer 1

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.

Answer 2

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:

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