Uploaded image for project: 'IGB'
  1. IGB
  2. IGBF-2043

Change wording, spacing, and button placement on Submit Your App Page

    Details

    • Type: Improvement
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None
    • Story Points:
      1
    • Sprint:
      Fall 4 : 30 Sep to 11 Oct, Fall 5 : 14 Oct to 25 Oct, Fall 6 : 28 Oct to 8 Nov

      Description

      Change wording on "submit_app" page:

      • Remove "Upload your IGB App jar file here"
      • Move question mark button next to "Submit your App"
      • change: "Upload from URL :" to "Enter Link"
      • Remove : (colon) character
      • change: "No file chosen" to "No file selected"

      Change appearance:

      • Use different trash can icon - one that is black and does not have a visible background.
      • Make the "next" button much larger (easier to hit) and center it.
      • Increase space between "or" and the row of items above and below. Vertical spacing between elements should be uniform to create a sense of harmonious flow.
      • When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.
      • Match horizontal alignment to what is shown in slide 2 of: https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0

        Attachments

        1. linux_chromium_mac_safari_.png
          38 kB
          Riddhi Jagdish Patil
        2. windows_firefox.PNG
          21 kB
          Riddhi Jagdish Patil

          Activity

          ann.loraine Ann Loraine created issue -
          ann.loraine Ann Loraine made changes -
          Field Original Value New Value
          Epic Link IGBF-1388 [ 17463 ]
          ann.loraine Ann Loraine made changes -
          Rank Ranked higher
          ann.loraine Ann Loraine made changes -
          Description Change wording on "submit_app" page:

          * Remove "Upload your IGB App jar file here"
          * Move question mark button next to "Submit your App"
          * change: "Upload from URL :" to "Enter Link"
          * Remove : (colon) character
          * change: "No file chosen" to "No file selected"

          Change appearance:

          * Use different trash can icon - one that is black and does not have a visible background.
          * Make the "next" button much larger (easier to hit) and center it.
          * Increase space between "or" and the row of items above and below. Vertical spacing between elements should be the same to create a sense of harmonious flow.
          * When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.

          See slide 2 of:

          https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0


          Change wording on "submit_app" page:

          * Remove "Upload your IGB App jar file here"
          * Move question mark button next to "Submit your App"
          * change: "Upload from URL :" to "Enter Link"
          * Remove : (colon) character
          * change: "No file chosen" to "No file selected"

          Change appearance:

          * Use different trash can icon - one that is black and does not have a visible background.
          * Make the "next" button much larger (easier to hit) and center it.
          * Increase space between "or" and the row of items above and below. Vertical spacing between elements should be uniform to create a sense of harmonious flow.
          * When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.

          See slide 2 of:

          https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0


          ann.loraine Ann Loraine made changes -
          Description Change wording on "submit_app" page:

          * Remove "Upload your IGB App jar file here"
          * Move question mark button next to "Submit your App"
          * change: "Upload from URL :" to "Enter Link"
          * Remove : (colon) character
          * change: "No file chosen" to "No file selected"

          Change appearance:

          * Use different trash can icon - one that is black and does not have a visible background.
          * Make the "next" button much larger (easier to hit) and center it.
          * Increase space between "or" and the row of items above and below. Vertical spacing between elements should be uniform to create a sense of harmonious flow.
          * When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.

          See slide 2 of:

          https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0


          Change wording on "submit_app" page:

          * Remove "Upload your IGB App jar file here"
          * Move question mark button next to "Submit your App"
          * change: "Upload from URL :" to "Enter Link"
          * Remove : (colon) character
          * change: "No file chosen" to "No file selected"

          Change appearance:

          * Use different trash can icon - one that is black and does not have a visible background.
          * Make the "next" button much larger (easier to hit) and center it.
          * Increase space between "or" and the row of items above and below. Vertical spacing between elements should be uniform to create a sense of harmonious flow.
          * When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.
          * Match alignment to what is shown in slide 2 of: https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0


          ann.loraine Ann Loraine made changes -
          Description Change wording on "submit_app" page:

          * Remove "Upload your IGB App jar file here"
          * Move question mark button next to "Submit your App"
          * change: "Upload from URL :" to "Enter Link"
          * Remove : (colon) character
          * change: "No file chosen" to "No file selected"

          Change appearance:

          * Use different trash can icon - one that is black and does not have a visible background.
          * Make the "next" button much larger (easier to hit) and center it.
          * Increase space between "or" and the row of items above and below. Vertical spacing between elements should be uniform to create a sense of harmonious flow.
          * When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.
          * Match alignment to what is shown in slide 2 of: https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0


          Change wording on "submit_app" page:

          * Remove "Upload your IGB App jar file here"
          * Move question mark button next to "Submit your App"
          * change: "Upload from URL :" to "Enter Link"
          * Remove : (colon) character
          * change: "No file chosen" to "No file selected"

          Change appearance:

          * Use different trash can icon - one that is black and does not have a visible background.
          * Make the "next" button much larger (easier to hit) and center it.
          * Increase space between "or" and the row of items above and below. Vertical spacing between elements should be uniform to create a sense of harmonious flow.
          * When a user makes a mistake, a pink error message box appears that displaces everything on the page, moving the components down toward the bottom of the screen. Please change this so that the alert does not move the components.
          * Match horizontal alignment to what is shown in slide 2 of: https://www.dropbox.com/s/xe1v2jo17fg23th/SubmitApp-JarUpload.pptx?dl=0


          ann.loraine Ann Loraine made changes -
          Status Open [ 1 ] To-Do [ 10305 ]
          ann.loraine Ann Loraine made changes -
          Status To-Do [ 10305 ] In Progress [ 3 ]
          ann.loraine Ann Loraine made changes -
          Status In Progress [ 3 ] To-Do [ 10305 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Assignee Sameer Shanbhag [ sameer ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status To-Do [ 10305 ] In Progress [ 3 ]
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -
          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Changes pushed. Pull Request can be found at: https://bitbucket.org/lorainelab/appstore/pull-requests/129/igbf-2043/diff
          ann.loraine Ann Loraine made changes -
          Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
          ann.loraine Ann Loraine made changes -
          Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
          ann.loraine Ann Loraine made changes -
          Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
          ann.loraine Ann Loraine made changes -
          Status Ready for Pull Request [ 10304 ] Pull Request Submitted [ 10101 ]
          ann.loraine Ann Loraine made changes -
          Status Pull Request Submitted [ 10101 ] Reviewing Pull Request [ 10303 ]
          ann.loraine Ann Loraine made changes -
          Status Reviewing Pull Request [ 10303 ] Merged Needs Testing [ 10002 ]
          ann.loraine Ann Loraine made changes -
          Assignee Sameer Shanbhag [ sameer ]
          Hide
          ann.loraine Ann Loraine added a comment -

          Merged and deployed to https://dev-appstore-2.bioviz.org

          Show
          ann.loraine Ann Loraine added a comment - Merged and deployed to https://dev-appstore-2.bioviz.org
          rpatil14 Riddhi Jagdish Patil (Inactive) made changes -
          Assignee Riddhi Jagdish Patil [ rpatil14 ]
          rpatil14 Riddhi Jagdish Patil (Inactive) made changes -
          Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
          Hide
          rpatil14 Riddhi Jagdish Patil (Inactive) added a comment -

          Testing results :- Few more changes to do:
          1) "Submit you App" title should be bold
          2) Hover on Choose File button, tool-tip appears as "No file chosen" which should be "No file selected"
          3) "or" should be in the center of Choose File button as per the ppt
          4) The text field size for the Enter Link should be increased so that the jar path is relatively visible
          5) "Learn more" needs to be italic
          6) Next button can be pushed down a bit
          7) The "Choose File" button name appears as "Browse.." in Windows FireFox. Refer attached screenshot
          8) The "Choose File" button gets chopped off in Mac Safari and Linux Chromium. Refer attached screenshot

          Show
          rpatil14 Riddhi Jagdish Patil (Inactive) added a comment - Testing results :- Few more changes to do: 1) "Submit you App" title should be bold 2) Hover on Choose File button, tool-tip appears as "No file chosen" which should be "No file selected" 3) "or" should be in the center of Choose File button as per the ppt 4) The text field size for the Enter Link should be increased so that the jar path is relatively visible 5) "Learn more" needs to be italic 6) Next button can be pushed down a bit 7) The "Choose File" button name appears as "Browse.." in Windows FireFox. Refer attached screenshot 8) The "Choose File" button gets chopped off in Mac Safari and Linux Chromium. Refer attached screenshot
          rpatil14 Riddhi Jagdish Patil (Inactive) made changes -
          Attachment linux_chromium_mac_safari_.png [ 14440 ]
          Attachment windows_firefox.PNG [ 14441 ]
          rpatil14 Riddhi Jagdish Patil (Inactive) made changes -
          Status Post-merge Testing In Progress [ 10003 ] To-Do [ 10305 ]
          rpatil14 Riddhi Jagdish Patil (Inactive) made changes -
          Assignee Riddhi Jagdish Patil [ rpatil14 ]
          ann.loraine Ann Loraine made changes -
          Assignee Sameer Shanbhag [ sameer ]
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment - - edited

          1, 7, 8 is the Browser Behaviour and cannot be changed. All others can be Fixed.
          Thanks for the input Riddhi Jagdish Patil.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - - edited 1, 7, 8 is the Browser Behaviour and cannot be changed. All others can be Fixed. Thanks for the input Riddhi Jagdish Patil .
          sameer Sameer Shanbhag (Inactive) made changes -
          Status To-Do [ 10305 ] In Progress [ 3 ]
          ann.loraine Ann Loraine made changes -
          Sprint Fall 4 : 30 Sep to 11 Oct [ 75 ] Fall 4 : 30 Sep to 11 Oct, Fall 5 : 14 Oct to 25 Oct [ 75, 76 ]
          ann.loraine Ann Loraine made changes -
          Rank Ranked higher
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          2, 3, 4, 5, 6 Are fixed.
          Pull Request Submitted : https://bitbucket.org/lorainelab/appstore/pull-requests/135/igbf-2043-improve-submit-app-page/diff

          Changes are live on: Dev-appstore-1

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - 2, 3, 4, 5, 6 Are fixed. Pull Request Submitted : https://bitbucket.org/lorainelab/appstore/pull-requests/135/igbf-2043-improve-submit-app-page/diff Changes are live on: Dev-appstore-1
          sameer Sameer Shanbhag (Inactive) made changes -
          Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status Ready for Pull Request [ 10304 ] Pull Request Submitted [ 10101 ]
          Hide
          ann.loraine Ann Loraine added a comment -

          Please make this change:

          Instead of "Learn more" (a link) display a question mark image (same as at the top of the page) that displays the same type of help message reading:

          "If you build your App using Bitbucket pipelines, you can enter the URL of your jar file here. For an example of how this can work, see Super Simple IGB App."

          Link "Super Simple IGB App" to https://bitbucket.org/lorainelab/super-simple-igb-app/

          Show
          ann.loraine Ann Loraine added a comment - Please make this change: Instead of "Learn more" (a link) display a question mark image (same as at the top of the page) that displays the same type of help message reading: "If you build your App using Bitbucket pipelines, you can enter the URL of your jar file here. For an example of how this can work, see Super Simple IGB App ." Link "Super Simple IGB App" to https://bitbucket.org/lorainelab/super-simple-igb-app/
          ann.loraine Ann Loraine made changes -
          Status Pull Request Submitted [ 10101 ] Reviewing Pull Request [ 10303 ]
          ann.loraine Ann Loraine made changes -
          Status Reviewing Pull Request [ 10303 ] To-Do [ 10305 ]
          Hide
          ann.loraine Ann Loraine added a comment -

          Please also fix this usability problem:

          Story:

          When I click "Next" but have not entered the name of a file or jar URL, a pink box appears at the top of the page that states something about how I need to enter one of these two things to proceed. However, the message disappears before I can read it. Please leave the message in place so that the user can read it.

          Show
          ann.loraine Ann Loraine added a comment - Please also fix this usability problem: Story: When I click "Next" but have not entered the name of a file or jar URL, a pink box appears at the top of the page that states something about how I need to enter one of these two things to proceed. However, the message disappears before I can read it. Please leave the message in place so that the user can read it.
          Hide
          ann.loraine Ann Loraine added a comment -

          Layout change:

          • Please the trash can icon immediately to the right of the "Choose File" button.
          • Place the message "No file selected" immediately to the right of the trash button.
          Show
          ann.loraine Ann Loraine added a comment - Layout change: Please the trash can icon immediately to the right of the "Choose File" button. Place the message "No file selected" immediately to the right of the trash button.
          sameer Sameer Shanbhag (Inactive) made changes -
          Status To-Do [ 10305 ] In Progress [ 3 ]
          Show
          sameer Sameer Shanbhag (Inactive) added a comment - PR Submitted: https://bitbucket.org/lorainelab/appstore/pull-requests/135/igbf-2043-improve-submit-app-page/diff Changes are Live at https://dev-appstore-1.bioviz.org/submit_app/
          sameer Sameer Shanbhag (Inactive) made changes -
          Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Assignee Sameer Shanbhag [ sameer ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
          sameer Sameer Shanbhag (Inactive) made changes -
          Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
          ann.loraine Ann Loraine made changes -
          Workflow Fall 2019 Workflow Update [ 20800 ] Revised Fall 2019 Workflow Update [ 21166 ]
          ann.loraine Ann Loraine made changes -
          Status Ready for Pull Request [ 10304 ] Pull Request Submitted [ 10101 ]
          ann.loraine Ann Loraine made changes -
          Status Pull Request Submitted [ 10101 ] Reviewing Pull Request [ 10303 ]
          ann.loraine Ann Loraine made changes -
          Status Reviewing Pull Request [ 10303 ] Merged Needs Testing [ 10002 ]
          ann.loraine Ann Loraine made changes -
          Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
          Hide
          ann.loraine Ann Loraine added a comment -

          Deployed on https://dev-appstore-2.bioviz.org and ready for testing.

          Show
          ann.loraine Ann Loraine added a comment - Deployed on https://dev-appstore-2.bioviz.org and ready for testing.
          ann.loraine Ann Loraine made changes -
          Status Post-merge Testing In Progress [ 10003 ] Merged Needs Testing [ 10002 ]
          ann.loraine Ann Loraine made changes -
          Sprint Fall 4 : 30 Sep to 11 Oct, Fall 5 : 14 Oct to 25 Oct [ 75, 76 ] Fall 4 : 30 Sep to 11 Oct, Fall 5 : 14 Oct to 25 Oct, Fall 6 : 28 Oct to 8 Nov [ 75, 76, 77 ]
          ann.loraine Ann Loraine made changes -
          Rank Ranked higher
          pbole Pawan Bole (Inactive) made changes -
          Assignee Pawan Bole [ pbole ]
          pbole Pawan Bole (Inactive) made changes -
          Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
          Hide
          pbole Pawan Bole (Inactive) added a comment -

          Verified the fix on MAC, Linux and Windows browser Chrome and Firefox.
          It is working as expected.

          Show
          pbole Pawan Bole (Inactive) added a comment - Verified the fix on MAC, Linux and Windows browser Chrome and Firefox. It is working as expected.
          pbole Pawan Bole (Inactive) made changes -
          Resolution Done [ 10000 ]
          Status Post-merge Testing In Progress [ 10003 ] Closed [ 6 ]
          pbole Pawan Bole (Inactive) made changes -
          Assignee Pawan Bole [ pbole ] Sameer Shanbhag [ sameer ]

            People

            • Assignee:
              sameer Sameer Shanbhag (Inactive)
              Reporter:
              ann.loraine Ann Loraine
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: