New Launcher: "Create" button is hard to find

[slemeur]

At the end of the flow, the new laucnher is displaying the application summary, but it is taking a lot of space. User has to scroll to find the "Create" button which is a bit small compared to the other elements in the screen.

"Create" action should be easy to find and always available - users should not have to put any cognitive load to do the action.

[animuk]

@catrobson any further status update on the above for the UX team point of view.

[catrobson]

@slemeur When we did user testing, users had no problem seeing the create button. However, the cards were not extending beyond the content, so the create button was normally viewable on screen. Let's fix the cards being taller than they should be and leave the create button as is unless we start to see issues with the button itself.

[slemeur]

@animuk + @catrobson : Thanks. Who is working on fixing the size of the cards?

[invincibleJai]

@catrobson @animuk Have taken off spaces between the cards in summary screen, but still button is not visible. We need to reduce the card size of two bottom cards i.e "Application Information" and "Authorized GitHub Account", am not sure if we can remove "Space Path" and "Target Environment" as these info may not be much useful for the user. Then can change the styles of card from card-pf--small to card-pf--xsmall this can save more space.

pf styles for cards have been used so taking of padding in card heading/body won't make it look good.

cc @slemeur

[catrobson]

@invincibleJai sorry, missed your update. I think this will be OK for the summary. Did we fix this also on the runtimes and missions on the first screen for those cards - I think that is the more serious issue. By here the user knows this is a scrolling experience.

[animuk]

can we consider adding the "setup application" button on the top right hand portion of the above screen? then user can easily find the button and proceed. @invincibleJai @catrobson @slemeur

[invincibleJai]

@catrobson thanks, any thoughts on the suggestion of @animuk, from the user experience POV?

[joshuawilson]

please add Severity to this

[catrobson]

We're looking into various options on how to change this and will respond back to this once we have investigated with design/CSS tomorrow.

[jyasveer]

@catrobson Do we have any updates on this please ?

[catrobson]

@mindreeper2420 @bdellasc FYI - please post once you've had time to look through CSS options for the summary page.

[AdamJ]

I'll be filing a PR shortly to update the Summary area.

The best fix, given the time constraints, are that the anchor for the Summary will be moved from the title to the "Set Up Application" button. The button size will also be increased to make it more prominent and consistent with the continue buttons from the other sections.

[AdamJ]

I've created a PR (https://github.com/fabric8-launcher/ngx-launcher/pull/190) to bring the user down to the button, rather than the Summary header.

[jyasveer]

Thank you @mindreeper2420 for the code changes

[slemeur]

@mindreeper2420 : Could we somehow think about a floating button which would callout and user will memorise where that action (the primary one) is?

It strikes me that the user is "always" able to leave by cancelling the flow, but not able to "create and continue" without going to the bottom of the flow.

One scenario I'm thinking about:

• The user completed the flow and selected a runtime/mission + pipeline
• User completes the git information
• User is reviewing the summary and figures that he selected the wrong pipeline config. In this situation the user has:
• to go back to pipeline
• select the right pipeline
• go back to the bottom of the flow to see the "Set Up Application"

I think the floating button would help to optimize the sequence and avoid one more click&scroll.

WDYT ?

[AdamJ]

@slemeur a few answers to your scenario first:

• The original tech demo had it so that when you were in the situation where you were looking at the Summary and wanted to change your Pipeline, you could click the Pipeline section in the left step indicator and be brought back to the Pipeline section (that is still in place). We also experimented with clicking on the Summary card itself, but users never used it during testing.
• Additionally as part of the original tech demo, if a user goes back to a section to change something (i.e. your pipeline choice), and had completed everything previously, it would automatically bring you back to the Summary section. If that is not the case anymore, then that is a deviation.

On creating a floating button, that was tried, but 1) does not fit with the paradigm of the 'next action' being in the center of the screen, below the section's cards and 2) would interfere with the Feature Flag item that is in the lower right of the screen. During testing, our participants did not have issues finding the 'Set Up Application' button, so we're confident with the focus changes that we have made.

[slemeur]

Thanks for your feedback @mindreeper2420. Ack.

[jyasveer]

@slemeur can we close this issue now ?

[slemeur]

yes. the workaround allows to find the "set up application" more easily. We can revisit based on new feedbacks.