Multiple methods of navigating backwards from a web app's detail page

Question

I've got a situation where there's a list, and each item in the list contains a detail page. Lets say it's a list of users in a table or something, and clicking on a user brings you to a page with that user's details on it.

Here's a mockup of the detail page:

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

So you've got a form with "Save" and "Cancel" buttons, as well as a link to take the users back to the list of users.

My question: Is the "<-- back" link necessary here? On one hand, it does effectively the same thing as both the "cancel" button (and the browser's back button). On the other hand, it provides a clear way for the user to return to the previous page. Thoughts?

Answer 1

The answer to this is going to heavily depend on the transition between the list and the details view.

For example, if the details view slides in (not a hard refresh), then it makes more sense for the buttons to be "Save" and "<- Back", indicating that it moves you back to the list view.

If the details view appears above the list view, then "Save" and "Cancel" make more sense as it is most similar to a standard edit dialogue.

If it is a completely new page, then something along the lines of "Save" and "Back to User List" makes the most sense. This makes it clear what the button does, just incase the user was distracted between steps, they are now reminded of how they got there since they don't have further context.

No matter which way you go, it is probably a good idea to have only one button that does the same action. Having multiple buttons that do the same thing causes the user to look for some difference between the two buttons (when there really is none). This can lead to confusion and result in the user choosing at random, unsure of their decision.

Answer 2

I recommend that 'Cancel' should be removed and retain the "Back to..." link. Currently, initiating either the "Cancel" and "Back To..." actions invoke the same abandonment of the use case of making updates to this user profile. The only difference is that the "Back To.." link is more explicit in where the user will be taken compared to the "Cancel" button.

Also, presenting the "Back To..." as a link gives it what I believe is appropriate lighter visual weight considering that a 'Save' function will be more likely to be performed than a return to the list page.