Button or link for new item form

Question

I'm quite decided to use links to indicate that the user will be taken to page with content, and to use button, when the user takes some action. There is pretty clear distinction between those, so it should be obvious which to use in the particular case.

But what(link, button, something else?) should I use for new item navigation, that will take the user to the new item form, where he can fill the input fields about the item and hit the create button? It's neither a page where the user can read static content, nor it's an action - hitting the new item doesn't create a new resource.

Answer 1

Try re-phasing your question this way...

As a user, what are they trying to do?

Are they trying to create a new item? Or are they trying to view a new item form?

Even though they are technically going to a new page, the end goal they want is to create that new item. The form page is just a sub-step required by your app. To label a link along the lines of "go to the new item form" would be confusing.

Therefore you probably want label it "create new item" even if they're still one step away from actually creating the item. If it's now phrased as an action, you probably want a button.

Edit: As mentioned by @Jamezrp, you want to make sure the way you use links and buttons are consistent across your app. Going with the opening question, a button is probably more appropriate. But you would need to review your button vs links usage to ensure the same pattern is applied elsewhere to avoid confusing the users.

Answer 2

I agree with nightning's answer, but also think that it doesn't really get the point across.

The question shouldn't be link vs button, especially for a web-app. The principles behind both are slightly different but often the same these days. A link is as it sounds, a door to a different page. A button is more like an elevator button...you'll get to the next page, but it's really the next step of the same process.

That said, typically buttons are also used for same-page navigation and javascript functions like revealing text fields or multiple-choice options. Links make these happen too (it just depends on your site architecture and how you decide to code it), but it's more of a question of how does the rest of your web-app operate and will this new method match it. And if not, will you be willing to adjust the rest of the app to make sure it all matches so that users don't get confused by conflicting design motifs.

Answer 3

Buttons initiate a process: Submit, Cancel, Save, etc. Submit buttons can be used by the keyboard to interact with a server, mapped to the Enter/Return key. Links are anchors that connect one HTML document to another. This is a subtle but important distinction.

If hitting the button does not save (Post) a current new item (like Save & Continue) then I recommend showing link as its a navigational element. You can still use a background/border and hover states to highlight the target area if it is necessary to help the user.

When in doubt craft your UI true to what actually happens in the app. If you go to a new page, set the users expectation that is what happens. If there is a submission with page refresh, afford them clues that is what happens with a properly labeled button.

Here is a little trick I use for labeling:

As yourself "Would you like to _____. Yes I would like to _____." with the label for the blank.

And you may also use an arrow to hint that the user will go somewhere else. "Add New ->"