Back button look bootstrap which one to use?

Question

I have a multi page web app where the user first selects some information and uploads a file to import, then the file will be sent to the back end for processing. After that the results will be presented to the user in a new page. There the user can make some selection on what years to include in the import. On that page upon inspection the user is not satisfied he/she can go back to the file upload page and upload another file / use other options. The normal flow however is to press submit so these things will be imported. On that page i have a back button. The question is how should it be presented?

The action is not dangerous since it's just a matter of restarting.

I'm quite limited to the buttons available in bootstrap css

I'm choosing between warning, default or link. And is leaning towards link, since it's quite a neutral one, and have the intention of linking the user to the first page (they could as well just begin from scratch by going to the import link directly)

Do you have any other things I should consider?

Answer 1

I would consider back a secondary feature of the page. As long as the placement is consistent and the style isn't conflicting with page level actions I would opt for the link as you've suggested.

Answer 2

Button vs Link

Links usually navigate away from current task/context while a button leads to an action within the current task/context. In this situation I am assuming the user is uploading a series of documents into there profile/folder so clicking back wouldnt take them out of the task of populating the profile/folder.

I would say this button is a primary action since it directly affects the flow of the task and has to be presented as a primary action. You could fall back to the default button if you dont like the asthetics. You can also override bootstrap styles using CSS or add your own classes to style buttons so you are not constrained by bootstraps styles.

Also consider adding an icon to your button with either an image or something like font awesome/glyphicons for extra emphasis on your button.

Additional Suggestion

The process of bringing the user away from the main page and then having them go back seems like a little to much work (unless these are the limitations of the code). Is it possible you could streamline this process with something say a model window with an upload wizard for the user to add/select data.

Example. Process I understand (user makes an upload -> directed to page containing all uploads/submissions -> is able to select/deselect certain uploads -> user then can make a choice to continue elsewhere in the app or make another upload?)

Model window: User presses upload button -> gets form to submit document + meta data -> upon successful upload model window closes showing list of all uploads

With a model window solution the user would seamlessly switch between upload and edit context allowing for quick customization of data without having to break flow by constantly changing pages.

Answer 3

I designed a system providing similar functionality recently. I created a colour scheme and hierarchy for primary, secondary and negative buttons. All negative I placed in red, primary were in green and secondary were in blue, all had active and inactive states.

What really matters is the context that you are providing for a user, if what you use is consistent then it shouldn't really matter as a user will always be able to recognise it :)

As for your question, I would probably go for info over link as it's more vibrant. I worry that link, as a call to action, would get lost and blend in to the page.