2

I am trying to find the best way to guide user to achieve their goal (Submitting a course) without the need to force users to make a mistake then correcting them.

In this design:

  1. User lands on this page "Course Details" (option on the left). Here the user needs to fill out some information (some are mandatory and some are not).

    Please notice that the "Submit" button is disabled.

  2. User must select the "Course Date" option on the left. Must set a date. Only after the date is set, the "Submit" button will be enabled and user can submit. Meaning all other options are optional. The required ones are on the "Course Details" and "Course Date" options.

Submit button has to be visible on all pages (Whatever option you chose on the left displays a page on the right with either mandatory fields, optional fields, or both. So user can submit at any point, no matter the page they are on) AFTER all required data is provided, button gets enabled and user can submit (in this case required data is only under Course Details&Course Date).

My question is: While user is on the "Course Details" page, how can I let them know that the "Submit" button is still disabled (Although they filled out all mandatory fields at the "Course Details" page) because they still must go to the "Course Date" option and set a date, so the "Submit" button gets enabled?

So here is what I thought of doing, Either:

  1. I put an asterisk next the "Course Date" option and I add a help icon next to the disabled "Submit" button, guides the user to go set the date and then they will be able to submit.

    Help icon disappears once the button is enabled.

  2. I put an asterisk next the "Course Date" option and I keep the "Submit" button enabled all the time, and once user clicks it before they set the date under the "Course Date" option, I show a message guides users to set a date then submit. (This way I am kind of forcing the user to make a mistake trying to submit then teaching them that they need to set a date first then submit)

I know the design is not great to start with, I appreciate better ideas!

Please note that this is not a finalized design, this design is just a sketch to explain the case, so no focus on fonts, or colors matching ...etc.

Update: (to claify more)

"Submit" button has to stay visible all the time like in the picture provided. As users do not need to fill out all data in all pages. Think about it as u click a button "Create new course", takes u to this page (default = Course Details page), U can fill out all data on all pages and submit. But u still can fill out "only" required data (in this case only at the Course details and date pages) and Submit. What if there are other required data on some other pages that each has several required data but it cannot be placed on the same page as the Course Details page. So how will u handle that? Think of the design as several pages each has specific data some pages has required data while some has optional. User can Submit at any page (all required data is provided).

One more point, there should not be a forced flow. Meaning, there should not be a "Next" button at each page to take the user to next page, as some users know what they need to fill out so they do not want to go to every single page. Some returning users might only want to provide some data (including the required data) and submit. So they want to keep it that way.

First image

Second image: Made some changes to show that there are other options not just the "Course Details" and "Course Date"

Improve this question
5
  • 1
    Why is it all the way off to the left, in a different color box with different font? Why can't all the data you're asking for be in the same main-body box, sorted from required to optional? And why is the Submit button in the top left? It's literally the last thing I looked at, while reading your text talking about it at first I thought it wasn't included in the screenshot at all. Most English-speaking readers look Left-to-Right, Top-to-Bottom. If this is not your demographic or are designing for an extremely diverse demographic, please elaborate.
    – IT Bear
    Commented Dec 9, 2016 at 0:39
  • Is this for desktop browsers only?
    – Confused
    Commented Dec 9, 2016 at 9:40
  • @IT Bear. Plz focus on the question, colors and it being all the way off to the left...etc is not a concern. There is a need to have different pages, each has different required data. Regarding Submit button, is it "top left" anyway? again this is not a finalized design, this is just a very simple fast design to explain the case. However, Submit button is intended to be placed there. Not designing for a different demographic. Submit button must be visible all the time, I know whoever designed it didnt want to place it bottom right or left bcz on some pages user has to scroll down to find it
    – Mo'ath
    Commented Dec 9, 2016 at 13:58
  • @Confused. Yes it is.
    – Mo'ath
    Commented Dec 9, 2016 at 14:00
  • 1
    *"Top-Right", I'm a durrr... So it seems you didn't design the whole layout, or are working with someone else who did? In the end, if you can fix the design, the rest will follow. You can add hints & tricks to a bad design, but most likely it will end up looking like "My Company's App". Stick to what's common and intuitive, the way people have already been trained, or you will always have to tell users they are doing it wrong.
    – IT Bear
    Commented Dec 9, 2016 at 19:59

2 Answers 2

Reset to default
2

It's all in the placement.

It would be best to have the submit button positioned below the Course Date option, because this is the typical logical reading order that implies the date should be set before the submit button is clicked.

I would also suggest putting a tooltip on the disabled submit button - as soon as the user hovers over the disabled button, it should say something like: Please set a course date. Of course, asterisks on required fields (and red outlines if not complete when submit is pressed) is the expected standard, so I would use that as well. Reduce user cognitive load by introducing all these elements.

With these improvements, although maybe not everyone will get it, the majority of users will understand that they need a date before they can submit.

Improve this answer
2
  • Thnks. Submit button has to be visible on all pages (Whatever option you chose on the left displays a page on the right with either mandatory fields, optional fields, or both. So user can submit at any point, no matter the page they are on) AFTER all required data is provided, button gets enabled and user can submit (in this case required data is only under Course Details&Course Date). 2nd suggestion, I assume it is for when we leave the "Submit" button enabled, right? in this case yes, these suggestions work. I am trying to achieve it with Submit is disabled till all required data is provided
    – Mo'ath
    Commented Dec 9, 2016 at 16:01
  • Voted up. Will be using the Tooltip on the disabled Submit button.
    – Mo'ath
    Commented Dec 15, 2016 at 14:38
2

The current de-facto standard is an immediately-visible (i.e. large) asterisk next to each mandatory field, with a lead-in explanation that the starred items are required.

Given that this app is for the use of teachers, it can be accommodated on one page, e.g. (this has not been prettified): enter image description here

Improve this answer
16
  • User lands at the Course Details page, I need to let them know that there are some other mandatory fields that they cannot see at the "Course Details" page (Mandatory field on other pages i.e. here on the Course Date page), and that's why the Submit button is disabled till all required fields are provided. Mandatory fields on each page have asterisks to denote they are mandatory.
    – Mo'ath
    Commented Dec 9, 2016 at 16:49
  • If the submit button depends on items on another page, why isn't it on that page instead? Or, if the person might land on that other page first, why aren't all the mandatory items grouped on the same page? It sounds like that page separation is serving interests other than those of the student, doesn't it?
    – MMacD
    Commented Dec 10, 2016 at 13:25
  • Submit button has to be visible on all pages (Whatever option you choose on the left displays a page on the right with either mandatory fields, optional fields, or both. So user can submit at any point, no matter the page they are on) AFTER all required data is provided, button gets enabled and user can submit (in this case required data is only under Course Details&Course Date). Each option on the left displays a specific page on the right that has specific data. Having these separate pages is mandatory
    – Mo'ath
    Commented Dec 12, 2016 at 14:56
  • You, as the u/i designer, have the responsibility to explain to them why it should be changed in the interest of the students (the principles involved are Be Obvious (also called Avoid Surprises), and Keep It Simple). If they indicate that they don't believe you or don't care, then the most ethical thing you can do is walk away. If that's not possible, add some js to monitor the mandatories and put a line of big red text over the button saying "There are still mandatory items on the next/preceding page. You must complete those items before this button will become active
    – MMacD
    Commented Dec 12, 2016 at 18:04
  • How about adding a Help icon next to "Submit" button, on mouse over (over the help icon) show text says i.e. "select dates to submit"? I think they will be open to changes if v needed. But what would u change if the "Submit" button has to stay visible all the time like in the picture provided. As users do not need to fill out all data in all pages. If u fill out required data in the two pages (course details, date) u can submit. If I put submit on a specific page then (1)user has to search for it(2)user can only submit at that page. This design allow users to fill out some info and submit
    – Mo'ath
    Commented Dec 12, 2016 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.