should a button be disabled under offline situation or clickable with a notification of offline afterwards

Question

Recently, I encountered a dilemma when designing a button on a mobile app.

Here is the case. On the screen where I place the button, the user is required to fill in some information (but not all text fields are mandatory). At the bottom, there are two buttons: send now and send later. As long as the user completes the mandatory fields, Send Later is enabled.

A bit more background information: The app is to help users record real-time readings and send them back. But because the network in the working environment can be very unstable and due to users' job attibutes, they can consciously choose to send the data immediately or send it back later (could because of offline mode or they want to send all data at once). And after the user clicks Send now, they will be led to a screen where they are required to enter their credentials and then their data will be sent. while Send later button doesn't serve "save as draft" function because users cannot edit the data afterwards. And unlike outbox function, the saved items won't be sent automatically since users' credentials are required.

The question is that when the user completes the mandatory fields, I 'm not sure if Send Now button should just be simply disabled under offline mode, or it should be enabled and after the user clicks it, there will be a popup saying "No network available".

To disable the button does make the workflow much simpler, because when offline, the user has to click send later anyway. But keeping the button clickable seems a standard design (so only the mandatory fields control status of a button, but normally there is only one button, for example, Log in).

Answer 1

Here I can see 2 cases one is when to enable the button and other one is what would be the right label for the button

Here is my answer

1. Whenever the user inputs the data, enable the 'Send Later' option. If user fills the mandatory info, enable 'Send Now' button. Hope this helps
2. I feel you should change label from Send Now to Submit, Submit is acknowledging user to submit the form. Send Now is not an appropriate word for the form submission, it's not sending but actually it submits user input data. Change the Send Later to Save, it clearly communicating user to save the data.

Answer 2

Add an "Offline" label to show current status and to tell users why the Send Now button is disabled.

This way you also show that the Send Later is the only available option while offline.

^{download bmml source – Wireframes created with Balsamiq Mockups}

OR

^{download bmml source}

Answer 3

This is one of the option:

Change name of buttons: Rename "Send Now" to "Submit" and "Send Later" to "Save as Draft". This will remove the dilemma with "Send Later" button that when to send? what does later means? In what time?. In this case, what you can do that is on clicking submit in offline mode save it as draft and in flash message tell user "You are offline now. The form is saved as draft. As soon as you go online it will be automatically submitted.".

Answer 4

See this. Note Top warning and Button descriptions.