Improve initial user/project registrations wizards

[TimvdLippe]

The current registrations wizards are long and somewhat complicated. We would like to improve the workflow to not lose users to a potentially tedious process. Moreover, the user consent for gathering the data (with an explanation of what data is shared) should be more prominent, to inform the user what we are actually doing. This consent should include a mention that we are allowed to publish the data in an anonymized way (and what "anonymized" actually means in this context).

[TimvdLippe]

@Inventitech We have talked about this, but we haven't made a concrete plan just yet. What steps would we like to keep and which ones do we want to skip or consolidate in one screen? I assume we want to remain asking for all characteristics, but in a shortened form?

The workflow would then be:

1. Ask if user is registered, if not in the current screen fill in some data
2. Next screen: ask if there is an existing project. Else fill it in on the current screen.
3. General characteristics regarding the user (e.g. programming experience)

The question is: where should we add the mention of consent? I think the clearest would be to put that on the first screen, instead of letting users fill it in and then show them the message. That is nicest way of conveying that information in my opinion.

[Inventitech]

Hi Tim, I like your ideas. You are free to remove/adapt the "characteristics" questions (do you use testing/do you have CI/...) to the extent useful you. Maybe you can give me a list of things you want to ask?

Go ahead :+1:

[Inventitech]

Do you have a couple screenshots for me? :-)

[TimvdLippe]

Still need to do Eclipse. Spent the whole day on it, but couldn't make it work, so have to start over tomorrow. Hopefully I can finish that tomorrow. Then I will post some screenshots. Note that most of the stuff is still there, just a bit shortened and on fewer pages.

[Inventitech]

I think one for IntelliJ (esp. one with the consent) would be sufficient. I am mainly asking because of the ethics review package.

[TimvdLippe]

No big changes though. You can read the message at https://github.com/TestRoots/watchdog/pull/294/files#diff-f41010c58e5f12981822ba10c16813a5R40 Feel free to suggest textual changes on the language

[TimvdLippe]

It's 3 windows right now.

User welcome screen:

User registration: Yes: No: Similar with project registration. No:

[Inventitech]

Hm, have you seen my comments above?

[TimvdLippe]

@Inventitech I have, but I am not sure what you mean. Could you clarify?

[Inventitech]

Oh, I forgot to click "Submit" ;) Comment is now in the code.

What do you think about the Project registration? Could we perhaps drop that entire page? I also don't understand why the button "Create new WD project" is there. What's the difference to Finish?

[TimvdLippe]

The creation of a project can fail, so that is a different step than finishing the dialog. Therefore the step of creating the project and obtaining its projectid (in a text box) is done first. If that succeeds, the user can finish the dialog. (Similarly to how previously you had a separate page for verification and showing the id)

I think there is still value in asking. The answers are not required (you can create a project without selecting any option). Probably we want to add 1 more question: "... a static analysis tool (e.g. CheckStyle)?"

[Inventitech]

Uhh, I think that UI feature is really confusing to users (and was handled better before).

I agree, they are interesting -- but are you going to use these answers in your research? Would you not want to ask questions about ASATs?

[TimvdLippe]

I personally respectfully disagree. To me, the switching between pages was very confusing, especially in the event of the project registration failing. Having this on one page allowing users to modify the data (as it is still in view) makes a lot more sense to me. This probably boils down to personal preference, so I will go around and ask some other students by letting them go through the registration process and note any problems. That way we have quantitative data on what to improve the dialog :+1:

I am okay with removing all questions and tailor them to my research, but that seems selfish for me. Removing the question means we lose the datapoints from new users regarding the testing. From a research point-of-view, is this a valid proposition? If you are okay with losing these datapoints as they will not be used in later research, I can put questions tailored to ASATs there instead.

[Inventitech]

Re your first paragraph: I like that approach very much. I would just say that the default would be that the registration would succeed. A failure should be the absolute exception.

Re the second, I think it is unlikely we are going to use that data ever -- so why still collect it, if you can't make use of it, either?

[TimvdLippe]

Re the second, I think it is unlikely we are not going to use that data ever -- so why still collect it, if you can't make use of it, either?

All right. I will remove the messages, add new questions for my research and update the JSONTransferer/server logic accordingly.

[Inventitech]

@TimvdLippe Could you post an updated screenshot of the first registratoin page so that I can include it in the ethics report? Thanks!

[TimvdLippe]

I can do that tomorrow afternoon, then I have my laptop accessible again.

Op do 12 apr. 2018 om 21:52 schreef Moritz Beller <notifications@github.com

:

@TimvdLippe https://github.com/TimvdLippe Could you post an updated screenshot of the first registratoin page so that I can include it in the ethics report? Thanks!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/TestRoots/watchdog/issues/289#issuecomment-380924680, or mute the thread https://github.com/notifications/unsubscribe-auth/AFrDb3LrZJWk-Yc8HcYqKDEHapFEIqfBks5tn7B3gaJpZM4TAVFB .

[TimvdLippe]

@Inventitech There ya go:

[Inventitech]

Awesome, thanks, @TimvdLippe :-)

[Inventitech]

UI in Eclipse is not satisfactory:

The position of the icons is weird, the text does not appear where it should. Why is the TU Delft logo not in the upper right corner, but the user icon? The look and feel of the input fields is non-genuine (why are they rounded?)

The operating system field is still an input text field, not a label. The checkmark symbol does not appear after a successful user verification.

Please test this on a Mac and Windows system, too, and post screenshots here.

One additional comment: Why are the text strings of the wizards duplicated between the Eclipse and IntelliJ versions? They should really be in the core. Please add periods to the end of the sentences, too.

[TimvdLippe]

The position of the icons is weird, the text does not appear where it should. Why is the TU Delft logo not in the upper right corner, but the user icon?

Because I used the same logic as IntelliJ, to keep the code consistent. Happy to introduce differences in each implementation in terms of layout, but we just need to be aware of making such a change in terms of maintaibility. Could you specify what you mean with where it should?

The look and feel of the input fields is non-genuine (why are they rounded?)

I think this is a personal judgement. I personally also prefer the IntelliJ UI over Eclipse, but this just how Eclipse looks. Moreover, the rounded corners are already on master, so this is not an issue in the current PR as well as not a WatchDog issue. I think you need to open a feature request at Eclipse if you would like this addressed in the core Eclipse UI theme.

The operating system field is still an input text field, not a label.

Ah did that in IntelliJ, but forgot in Eclipse. Duplication FTW.....

Please test this on a Mac and Windows system, too, and post screenshots here.

This code and look-and-feel should be platform-independent.

Why are the text strings of the wizards duplicated between the Eclipse and IntelliJ versions? They should really be in the core.

Most of the strings of user and project are in core, because that made sense. I will try to find a sensible location for extracting the user strings. Note that because of the difference in implementation between IntelliJ and Eclipse regarding browser links, this can get a bit annoying. I suppose an enum works best in this case.

Please add periods to the end of the sentences, too.

Sure.

[Inventitech]

Because I used the same logic as IntelliJ, to keep the code consistent. Happy to introduce differences in each implementation in terms of layout, but we just need to be aware of making such a change in terms of maintaibility. Could you specify what you mean with where it should?

If you can replicate the above screenshot on your system, checkout master, have a look at how it looks there and replicate.

[TimvdLippe]

I made some small tweaks to the spacing. Screenshots should now be mostly similar. Note that the "Welcome to WatchDog!" has been moved, to keep it in-line with our other UI and make it more clear.

Before:

After:

[Inventitech]

Why is the text "Welcome to watchdog" in the gray area? Why is the gray area so huge? Why remove the pictograms to distinguish between user and project setup?

[TimvdLippe]

Why is the text "Welcome to watchdog" in the gray area?

As I said in the previous comment:

Note that the "Welcome to WatchDog!" has been moved, to keep it in-line with our other UI and make it more clear.

Why is the gray area so huge?

Because the project registration panel is rather big and Eclipse does not allow a wizard to dynamically change.

Why remove the pictograms to distinguish between user and project setup?

This should be clear by the new pages so I see no need to add them back. If you still want them back, I can add them, but I would personally be against that.

[Inventitech]

Checking commit 3b2bd78a93fd9b864103bcd6175a38e61c0adbc6 (HEAD -> update-swing-registration, origin/update-swing-registration

Project registration is severely broken (visually!) on Eclipse/Linux Oxygen 3.A:

Steps to reproduce:

1. Start with a registered user, non-monitored workspace
2. Tick the monitor workspace flag in the WD settings
3. Open the WD quick fixes, click "fix it"
4. It appears like this.

[Inventitech]

Bootup with registered User ID, new project:

Wizard contents are now within the window frame, but the layout remains distorted.

[Inventitech]

User registration is also broken visually in the sign-up wizard. Text is rendered to the right (is this intentional?), the flow is visually broken.

Question should not be "Do you have a (user|project) WatchDog registration?", but "Do you have a WatchDog (user|project) registration?". Actually, the question should also ask at least in the case of projects for this project/workspace. In fact, maybe an even better question would be Do you want to create a new ... Since the icons are gone, could we highlight user or project?

[Inventitech]

After registering a user, why is the field not aligned with all the other fields in the wizard? Why is it using a non-editable input box and not a label like Linux?

[Inventitech]

When I go back on the above page and Next, the Create new WatchDog user button is not locked, so people can create an arbitrary number of WatchDog users.

[Inventitech]

Clicking Cancel in the above step brings up this weird message:

No, I do not want to create a project, I just cancelled it!!

Btw., the content of the wizard is initially distorted (I was not fast enough to capture it) and relayouted properly after switching focus back to Eclipse.

[Inventitech]

There is a horizontal gap between the two questions. Why are the questions not vertically aligned?

[TimvdLippe]

I have followed your steps, but was unable to reproduce these visual issues on my machine. Since this is quite hard to debug, I took a completely different approach. The code now uses composite.pack() instead of the magic values. This should hopefully fix the issues on your machine as well. Could you let me know if it is now working as intended?

Question should not be "Do you have a (user|project) WatchDog registration?", but "Do you have a WatchDog (user|project) registration?". Actually, the question should also ask at least in the case of projects for this project/workspace. In fact, maybe an even better question would be Do you want to create a new ...

Good suggestion :+1: , I have updated the wording to the following two (and swapped the meaning of the buttons):

Do you want to create a new WatchDog (user|project) registration?

After registering a user, why is the field not aligned with all the other fields in the wizard?

Since this field is the output from the form, the visual distinction accentuates the difference between input and output. Moreover, the field is a lot longer than the other fields, so this field should be longer than the others and thus not fit in the grid layout.

When I go back on the above page and Next, the Create new WatchDog user button is not locked, so people can create an arbitrary number of WatchDog users.

Good catch. I indeed forgot to disable it on that menu. Actually, to prevent these kind of issues I have abstracted away this logic to reduce duplication and prevent these kind of issues :+1:

Why is it using a non-editable input box and not a label like Linux?

Because (at least on my machine) you can not select the text (to copy) of the label, but you can in an editbox. Since the user should be able to copy the ID, a label would not work.

No, I do not want to create a project, I just cancelled it!!

This was one of the feedback points of last week IRL meeting (to also open the window if the project ID is not found). I have updated the logic to prevent this from happening.

Btw., the content of the wizard is initially distorted (I was not fast enough to capture it) and relayouted properly after switching focus back to Eclipse.

With the new composite.pack() method, I think this should be resolved as well.

There is a horizontal gap between the two questions. Why are the questions not vertically aligned?

This appears to be a default margin in the RowLayout. I have explicitly removed the margin from these layouts to fix the issue.

[Inventitech]

Ok, this is a lot better. A couple smaller things remain. I will describe each in its own post.

The arrangement of the text and the button looks "dirty" here, because there is text in the button but it is not vertically aligned with the text that follows it. Moreover, that then breaks into a newline, at which point it has a different line height again. Begin a new line after the button (I don't know how that will look)?

The same is true for the User ID input field and its describing label before, they are not vertically aligned. Replicate layout from above?

[Inventitech]

The size of the input field does not fit an entire WatchDog ID.

[Inventitech]

The Verify button is horizontally stretching (after some thinking about it, I actually like that), but the register button is not. Also, especially in this big dialog and when only Finish is available, people might miss the register button on the left.

It is very ugly that there is such a huge horizontal distance between the labels and their corresponding input fields, just because some labels are very long. By the time the users sees the input field for Project Name, they have already forgotten about it.

Treat and layout the verify and register buttons in the same way?

[TimvdLippe]

Layout of the output text should now be improved:

And the ID field should be sufficiently large:

[TimvdLippe]

On IntelliJ:

[Inventitech]

IMHO It will look better if the Create new ... button (and the verify buttons) are horizontally filling (this probably requires in the layout to have this cell span two cells)

I wonder can we make these questions a bit shorter so that there is not such a wide gap between the question and the answer field, or introduce linebreaks (\n or even <br /> might work)? If none of this is an option, some rephrasing could also help:

Does your project use Continuous Integration (Travis, Jenkins, ...)?

Which static analysis tools do you use in this project?

[TimvdLippe]

IMHO It will look better if the Create new ... button (and the verify buttons) are horizontally filling (this probably requires in the layout to have this cell span two cells)

This is going to be challenge, but maybe I can make this work with button.setGridData. Have to try it out.

or introduce linebreaks

I have googled extensively as well as reading through the sourcecode of Eclipse, but sadly was unable to make it work :cry:

Your rephrasing of the questions is the easiest and most suitable solution indeed.

[TimvdLippe]

In Eclipse:

In IntelliJ:

In IntelliJ the verify/create buttons are still half size, as I was not able to figure out how to do it with GridLayout in Swing. We would need to change the layout system to GridBagLayout, but that seems a dangerous change right now. This layout mechanism is significantly different and requires a lot of code changes, because it has to add GridBagConstraints to all elements in this layout. That requires a lot of code changes I am not comfortable to make so late in the release phase. Are you okay with keeping it like this for now in IntelliJ to minimize our overall risk? I would be glad to change it in a separate PR after with a proper chance of testing and updating a lot more code, simply to prevent the risk of breaking stuff right now. At least it is working in Eclipse :stuck_out_tongue:

[Inventitech]

Fine with this, no need for a PR later. Looking good. Are there extraneous spaces in front of the links in IntelliJ?

[TimvdLippe]

Yes they are, but that is the Swing layout manager I can not change. That is because IntellIJ forces the text to be separated from the clickable link. In Eclipse you can make this in 1 element and it just works.