Enhance UX of LitePlacer

[mrandt]

Testing Reza's enhanced LitePlacer software, comparing to Juha's original version and looking at some other p&p machine UI, I started to think about ways to improve and enhance the user experience of our software.

I will start by posting an idea to declutter the main screen and make software operation more intent driven - I suggest to introduce a new tab called "Manual Control".

I envision it to contain and group all controls related to manually moving the gantry and nozzle, controlling manual pickup and placement and special (non standard) homing operations.

In turn, I would remove all the redundant functionality and information from the bottom of the screen. I would also hide the shortkeys and only display them on request - most people will know them by heart quite soon or mark their keyboard as Juha did.

Permanent display of current coordinates should IMHO be moved to the camera display since this permanent status information similar to the camera pictures.

I put together a mockup / wireframe to facilitate discussion - see image below:

Mockup of suggested "Manual Control" tab for LitePlacer

LitePlacer_ManualControl_Mockup.png (66.4 KiB) Viewed 9878 times

Let me know what you think or if you have any questions. I am happy to change around and improve this draft - hopefully we can use this as a basis for future development.

[mawa]

Malte,
your suggestion is very good. I was missing a tab like that also.

Here are some additional thoughts:

Markers:

I would still like to be able to set individual marks as special locations. For instance for tray locations and fiducials. So either we could dynamically add them to the special locations button list or build a group of its own.

Go There:

I would also make the Go There using a toggle Camera<->Nozzle. When you change this toggle the machine moves according to the set value.
So you first can move to a part with the camera and then use the nozzle to pick it it.

Jogging with keyboard

Although Juha F5..F12 jog works I am going to implement a jog keyboard assignment I am using for years in my PC-CNC mill software: the arrow keys and the numeric key pad.

Keys 4 and 6 jog X
Keys 8 and 2 jog Y
Keys + and - jog Z
the Zero key cycles the increment/step size from continuose to 1,10, 100mm.
You can use these keys "blindly" without have to look at the keyboard while you either look at the down camera image or directly at the machine.

[mrandt]

Thanks for the comments.

I updated the mockup:

- included the "locations" table as Reza had designed it (so they would move from "Calibration & Locations" tab which should subsequently become just "Calibration")
- put a radio box which allows moving either nozzle or camera to given coordinates; toggling the other option shall move nozzle to camera location and vice versa

Mockup of suggested "Manual Control" tab for LitePlacer - updated v2

LitePlacer_ManualControl_Mockup_v2.png (67.68 KiB) Viewed 9864 times

Regarding the shortkeys: I don't really care what they are - either num-block or F-keys work fine for me Maybe you should make the mapping selectable in the options if you add an alternative one.

For jogging, I actually wanted to pursue another idea using an external hardware controller. I will put that into another thread for discussion.

Cheers
Malte

[thereza]

if you want manual controls i think it should be in the bottom pane to allow you to access it all the time. Or in a dedicated form by itself mostly to keep the mainform from growing further in sizes.

I think the locations are easy to access via the drop down menu - why would you prefer dedicated buttons? I'm not opposed to it - just wondering what the need is

my focus now is on stability and adding the functionality to make it more useful - automating things that are slow - like adding components, etc.

I want to make it clear that i'm not taking over the software development - it was more my need to add certain functionality that i wanted or felt like it was missing and will continue to make the changes that I need. I'm looking forward to getting others involved in development and extending the application further.

Reza

[thereza]

Malte,
your suggestion is very good. I was missing a tab like that also.

Here are some additional thoughts:

Markers:

I would still like to be able to set individual marks as special locations. For instance for tray locations and fiducials. So either we could dynamically add them to the special locations button list or build a group of its own.

easy to do currently all you have to do is click add and add all the specific locations you want.

Go There:

I would also make the Go There using a toggle Camera<->Nozzle. When you change this toggle the machine moves according to the set value.
So you first can move to a part with the camera and then use the nozzle to pick it it.

this kind of exists through the button on the bottom right - there is pickup here and place here button. how would you like the functionality changed?

Jogging with keyboard

Although Juha F5..F12 jog works I am going to implement a jog keyboard assignment I am using for years in my PC-CNC mill software: the arrow keys and the numeric key pad.

Keys 4 and 6 jog X
Keys 8 and 2 jog Y
Keys + and - jog Z
the Zero key cycles the increment/step size from continuose to 1,10, 100mm.
You can use these keys "blindly" without have to look at the keyboard while you either look at the down camera image or directly at the machine.

what if you want to type in a number using the keypad? do you want to make the changes and submit them?

[mrandt]

I noticed that the mockups are hard to view due to scrolling. Click the following link to open the latest one full-screen:
http://liteplacer.com/phpBB/download/file.php?id=75

I want to make it clear that i'm not taking over the software development

Reza, I think that is understood. It is not my intention to ask you to implement all of this either. I greatly appreciate all the new functionality you have added and completely understand that you did that to aid your own needs while kindly sharing with us.

I am not able to program for Windows platforms the way you, Juha and others do. But I have quite some experience in software development and try to help by testing and making suggestions.

In my opinion, LitePlacer UI is driven by functionality and not by user intent in many areas - which is fine given the stage we're in. But if Juha and the extended team want to drive it further, I think we need to review and improve the user experience.

From my experience, mockups (or wireframes or whatever you like to call the drawings) present a great way to develop and discuss UI / UX before actually going through the effort of implementing it.

I also think that it does not stop with the sugested "manual control" tab but the other screens might also need some rework. I just selected this as a starting point and am willing to drive it further.

I am not claiming that my drawings are "the only right way" to do it, but merely a suggestion that I can easily change around as needed - so this thread should give us the chance to discuss. OK?

...declutter the main screen and make software operation more intent driven - I suggest to introduce a new tab called "Manual Control".

The main reason I am suggesting to introduce a "manual control" tab is to declutter the main window. There are too many buttons and status values already. In addition to that, I have a smaller screen mounted to my LitePlacer (19" @ 1440x900) just because it fits the frame. Downside is, that with the current height of the window I have multiple nested scroll bars which makes operation really nasty Decluttering the main form would probably allow to better adjust for the window height.

Besides my screen resolution issues, I think there is no need to access all these controls all the time. Ideally, most machine movements should be automatic anyways. Manual control is only needed in certain situations, so why not "hide" it away? Most power users will use shortkeys (or external hardware, see other thread about that: http://liteplacer.com/phpBB/viewtopic.php?f=11&t=94) anyways.

If we look at user's intention, there are situations where they (or at least the way I use my machine) need to do many moves manually. Setup locations, try to pick a certain part and see if the needle is right size, test movement and speed, etc.

It is not the situation in which I automatically place all the components on a board - so a different tab to group all these related functions seems logical to me.

I think the locations are easy to access via the drop down menu - why would you prefer dedicated buttons?

I think you are right about the buttons. If you look at the second version of my mockup you'll notice that I did away with the buttons and included the grid control which I like much better. I am fine to have the locations accessible from a menu as well, but at least in my workflow I do not really need those all the time.

if you want manual controls i think it should be in the bottom pane to allow you to access it all the time. Or in a dedicated form by itself mostly to keep the mainform from growing further in sizes.

See above - I doubt that you need to access them all the time. From my usage of LitePlacer, I would say I never touch those buttons down there once I am configuring a job or running placement.

Making the jog controls a popup (similar to camera) is another idea I could agree with.

I would also make the Go There using a toggle Camera<->Nozzle. When you change this toggle the machine moves according to the set value.
So you first can move to a part with the camera and then use the nozzle to pick it it.

this kind of exists through the button on the bottom right - there is pickup here and place here button. how would you like the functionality changed?

My intention is different. I want to clear up a plausible misconception: What do coordinates refer to? Let's say I move machine to (X,Y)(100,100) - does the camera move there? Does the needle move there?

If we had the suggested "switch" as suggested in the mockup (next to the big "go there" button) it would become perfectly clear to a user what the coordinates refer to. And once you toggle the switch, the camera would go where the nozzle used to be - and vice versa. Very helpful for testing and manual placement of parts.

It is also a metaphor I have seen work well in other CNC and P&P controller software.

And of course I would keep the "pickup" and "place" buttons, see mockup drawing.

what if you want to type in a number using the keypad? do you want to make the changes and submit them?

I think this is a good argument aggainst alternate shortkey mapping for jogging. As I suggested earlier: If Manfred takes the effort to implement an alternate key mapping, we should have an option to choose which one users want. I would probably keep the F-keys as I got used to them by now.

Sorry for the long text. If you are looking for the tl;dr summary:
1. this thread is meant to discuss ideas based on mockups before actually implementing them
2. I think UI should be changed and enhanced to facilitate better UX, but that is a job for Juha and anyone volunteering, not meant to put pressure on Reeza
3. While I picked "Manual Control" as a starting point, I will review the other screens as well and make suggestions to be discussed

Thanks and regards
Malte

[thereza]

download visual studio and play with the code. you can easily move things around graphically without editing the code.

can you post a screenshot of your display on you monitor?

also what is the use case for knowing the position of the needle vs. the component (i.e. the toggle). right now the #s refer to the camera location which is consistent. To make it 'toggle' requires some ugly code and is also dependent on the needle angle. for example, if you rotate the needle, in order to keep the current position, the gantry would need to move to compensate.


-r

[mrandt]

download visual studio and play with the code. you can easily move things around graphically without editing the code.

I already have, remember the discussion about build problems?

Still, I believe creating and discussing mockups first is more productive and leads to better results in the long run.

can you post a screenshot of your display on you monitor?

See here: https://github.com/jkuusama/LitePlacer-ver2/issues/23

also what is the use case for knowing the position of the needle vs. the component (i.e. the toggle). right now the #s refer to the camera location which is consistent. To make it 'toggle' requires some ugly code and is also dependent on the needle angle. for example, if you rotate the needle, in order to keep the current position, the gantry would need to move to compensate.

I understand the complexity and appreciate that this takes extra effort. Maybe we leave it as an optional feature for later?

To me, this functionality is mostly about the conceptual model of the machine. What do I move, camera or needle? And how do these play together? Pretty obvious to those who know the code. Absolute mystery to any newbie user... If we keep with the approach of always positioning the camera first and just taking the needle to camera location for pickup or place operations, we will need to find a way to make that obvious to the users. Many CNC router and other PnP software distinguish the reference. Becomes more interesting if you have multiple tools or multi nozzles - so I'd rather set it right now than later.

Again, not saying all of this has to be implemented right away - and not necessarily by you either.

[mrandt]

OK, here comes the next mockup - this time for "Run Job", probably the most important screen for most users.

I thought about the separation of CAD from Job data for quite a bit and finally came to the conclusion that it just does not make sense anymore. While I believe I understand Juha's initial intentions, the boundaries became blurry.

Reza added very helpful features such as tracking which parts have been placed already, allowing to resume jobs and handle errors. But why configure some details in an aggregated list and others in the CAD data? Just does not make sense from a workflow point of view.

Instead, I suggest to use a Tree Grid (or whatever Windows developers would call it) to display data from CAD, outline the hierarchy of groups of components and show or edit all operations of a job - see mockups below.

Again, discussion is very welcome

Fullscreen link: http://liteplacer.com/phpBB/download/fi ... view&id=80

Mockup of suggested "Run Job" tab for LitePlacer

LitePlacer_RunJob_Mockup.png (80.3 KiB) Viewed 9506 times

All items that have same package and value in CAD file shall be grouped together automatically.

Operations on group shall implicitly apply to all descendant items (children).

I like the idea of having a status model for each item and an aggregated status for each group of items - see last column. Greatly improves situational awareness, allows for error handling and resume.

I think treating fiducial measurment as part of the job makes more sense to rely on users to click "Re-Measure". Executing the fiducial group would be equivalent to that - any arguments to keep a button "Re-Measure"?

Calibrating nozzle wobble should happen automatically before a job is run and after each change of nozzle - so no need for an extra button. We should probably have that function in "calibration" tab instead.

Fullscreen link: http://liteplacer.com/phpBB/download/fi ... view&id=78

Mockup of suggested "Run Job" tab for LitePlacer - Context Menu for line operations (here: item)

LitePlacer_RunJob_Mockup_ContextItem.png (85.46 KiB) Viewed 9506 times

I think it makes sense to use right-click context menu to operate on line items or groups. Saves a lot of space and it is a well known metaphor from spreadsheets and the like, users will probably get it.

Fullscreen link: http://liteplacer.com/phpBB/download/fi ... view&id=79

Mockup of suggested "Run Job" tab for LitePlacer - Context Menu for line operations (here: group of items)

LitePlacer_RunJob_ContextGroup.png (83.43 KiB) Viewed 9506 times

Context menu should probably be slightly different for groups or items... Just an idea.

What do you think?

[mawa]

Malte,

your proposal is great!

Using a master-detail grid (thats how Microsoft and my companies tool vendor devExpress call the feature of displaying two different but interrelated record sets) is an excellent idea !

I like the idea of not cluttering the UI full of buttons and using context menus to manipulate the list contents instead.

Maybe some drag & drop can be added alternatively to be able to move parts and groups over a larger distance.

In my companies CRM software we have a couple of administration tables with such single step move up/down buttons. They can be a pain when you want to regroup on a larger distance. So we implemented additional Drag & Drop movement after a short while.

It is a bit of work to get these menus work in a consistent manner, but it can be done.

My question: Is the Placement Operations box necessary at all?

During the Job run I would let the selected line move down the list, automatically expanding the group it steps into and optionally automatically collapsing the group it steps out from.
Then all the information is in the current selected line. The corresponding Status cell can be updated dynamically while the different placement actions are executed.

The pause Job button can IMO also be omitted. When you click the "Run Job" it changes to "Pause Job". Next Click it changes to "Resume Job".

When a error occurs the button should go to "Resume". (I hope we get the software to be able to resume after TinyG resets )

Maybe we should think of a kind of CD/DVD player button arrangement with

• a "rewind" button (goes to the to of the job list),
  a "reverse" button (goes one step back up, to redo an unsuccessful step (is easier than manually selecting that line in the list))
  a "play >" / "Pause ||" button and
  a "Stop [ ]" button.

Almost everybody is familiar on how to use these buttons.