Unifying mapping and laser settings

[peteruithoven]

First mockup, shoot away.

[peteruithoven]

Added a few details. Found ways to incorporate saving mappings and mapping multiple selections to one profile. Not sure about the "Edit advanced profile settings" button placement. Feels like that should be in the opened up laserproperties parts somehow. But I'm not sure how.

[mgmax]

Looks good to me. The only confusing thing would be the ordering: Will the order in your example be engrave-cut-mark? Is there a way to say "cut green, then yellow"?

This is already a problem with the current GUI, but I think we should also find a fix for this if we rework the whole interface.

[peteruithoven]

Thanks for the feedback! Coming from modern web interfaces I was assuming drag and drop. But maybe we should add a indicator, like jqueryui's sortable, because it's a different context. http://jqueryui.com/sortable/

[mgmax]

This sounds good, but I fear most users will still be confused. We have many users coming from the Epilog windows driver which enforces "engrave first, then cut". They often just select what to engrave and what to cut and assume it will be in a sensible order. If VisiCut doesn't do it right by default, they blame it.

Can we just enforce a default sorting, as long as it is not changed explicitly?

I propose using a list for each profile:

The user would just drag and drop "blue" to "cut" when he wants to cut it. For the (usually not needed) case of cutting before engraving, the user would drag the "cut" group before "engrave", or use the up/down buttons. I don't think that users understand that you can also drag-and-drop whole groups and not only individual items.

[peteruithoven]

Nice idea. I need to think about how I can get the actual properties in here somehow (which is important for my users).

Because these interfaces are quite differently than the existing one, prototyping would be interesting. A very simple but unexpectedly useful way is "paper prototyping". The basic idea is that you draw the interface on pieces of paper in such a way you can simulate the interface. You prepare a couple of tasks for people, like

• Cut everything
• Cut black engrave green
• Cut 1px lines on 100% power and 10% speed .
• etc You give these to a couple of people and you don't help them out until absolutely necessary, you just emulate the computer swapping out pieces of paper. The nice thing is that this is easy, because this is easy people will be less hesitant to give criticism on your design, you can iterate (improve) quickly and anyone that can draw can contribute and help you out doing this. It's recommended to have someone there to observe and make notes. http://alistapart.com/article/paperprototyping http://www.paperprototyping.com/

But if this is really not your cup of tea some jQuery javascript kind of mockups might be a easy way to prototype.

[peteruithoven]

Inspired by mgmax ideas of putting profiles first I made the following mockup. By putting the profiles first it makes more sense when we limit the reordering of profiles. So for lasercutters like Epilog we could just disable reordering. It also takes away a selection for users. In the current interface they have to select both a selection (a color for example) and a profile. In this interface I reused the progressive disclosure idea we use for files.

I wouldn't go for the drag and drop idea because I think this is a interface type that people might have less experience with.

[mgmax]

I dislike the use of a dropdown box (intended for "select one") for showing a list of selected items. Such multi-selection lists are rather unusual in programs. The only example I remember from a desktop application are attachments in Mozilla Thunderbird: right clicking opens a drop-down menu where you can delete items:

Most web interfaces seem to show a list of elements with an "x" button for removing after each single element. A single "add" button is often placed at the bottom of the list:

• item 1 (x)
• Item 2 (x)

(add...)

To be honest, I don't know how to bring this into a Java desktop application without looking strange.

[peteruithoven]

Good point. I find it hard to find java ui examples so I simply used the Java Swing List element in the following mockup. Another benefit of a list is that reordering might be easier and more user friendly to implement. I would prefer this list (and profile area) to grow when items are added but seeing Thomas had a hard time making the tables grow to the used space it might also work if they have a height of 3 lines and then start to scroll.

What do you mean with "this" when you talk about bringing this into a Java desktop application? These dropdowns, lists or the whole interface?

[peteruithoven]

Just for fun, this was the paper prototype I made of the mockup and tested on a person in about an hour. Hope to find the time to do some more tests, also with the whole interface to give people the right context.

[peteruithoven]

After some tests and discussions some first basic improvements:

• People got confused over "None" so added a more explanatory label to the add selection button when nothing is selected.
• Turning around settings. By putting the setting names left we can make the side bar thinner. This is especially nice for lasercutters that support a lot of settings (like purge, ventilation, frequency, focus etc). When you add extra treatments per profile (cutting multiple times for example) a column can be added. (Thanks Rick Companje for the idea)
• drag icon gray

[peteruithoven]

I personally found the combination of found mapping options and presets (saved mappings) a bit confusing so this is another variation:

[mgmax]

the simple variant on the left looks nice, but the "advanced" checkbox can be confusing. Imagine a shared computer that is used by beginners and experts. An expert uses VisiCut, leaves "advanced" checked. Now a beginner uses Visicut and is confused by the menu.

I see two solutions:

• Reset the checkbox state at some point
• Integrate the "advanced" options into the list, as a category like "by color". The list would have one additional entry "advanced" at the very bottom. If you expand this entry, you see the advanced selections like "WHERE Color IS RED".

[peteruithoven]

I totally agree, I fell into the modes (like beginners / advanced) pitfall again. I made the following iteration, inspired by your second solution: I also made the collapsible list more consistent with the regular ui design and added a bit more explanations.

[peteruithoven]

I'm doubting about settings open and close icons. I feel, in contrast to the above designs, option B makes more sense.

[mgmax]

I like it :)