Should there be a visual distinction between a link and a AJAX like interaction? I quite often see that dashed underlining triggers an action on the same page. Is this a new convention? Would that improve an understanding of what is to happen upon a click?
-
What do you do about links that update parts of a page using ajax and use the html 5 history api to allow the navigation buttons to work?– Mike AxiakMay 24, 2011 at 3:27
-
I'm not familiar with HTML5 history API thus not completely sure about the interaction. Although, I do understand what you mean to some extent and therefore would like some answers from the community.– DenzoMay 24, 2011 at 7:07
4 Answers
I think it helps if the user will know if they will be taken away from the page or if something will just update via AJAX.
There isn't really a convention as of yet, but I think what you proposed is very logical.
Users like be being in control and hate surprises. I think after 1 or 2 times they would understand which is a link and which would update AJAX
-
2In terms of accessibility it would be nice if those interactions were actually hyperlinks and just gracefully degraded to loading the targeted content on a separate page in case of unavailable Javascript or something, too.– RahulMay 24, 2011 at 12:49
The important thing here is that your site behaves consistently. I really don't think that the users will understand the difference between a dashed line and a solid line. (User tests are the only way to reveal the facts for your product & user group).
My experience is that most users don't get the difference between local links and external links marked with icons either:
Eg:
From a technical point of view, it is not necessary to distinguish between the underlying technology. The user sees something clickable and expects the system to behave "naturally" when he/she interacts with it. Page reload, external links or AJAX-update isn't the main issue. The key is that the users don't get any surprises and that the system behaves as expected.
The fact that underlined text is interpreted as clickable has nothing to do with the natural affordance of underlined text. Hyperlinks doesn't invite you to click on it from mother natures side. Hyperlinks are "thought affordance". It is a convention we've been used to over time. It is extremely unlikely that one can introduce and establish new "thought affordance" with the same success that hyperlinks were.
what's the difference between a link that opens a container with js and one which opens it with a page refresh? (except the back button of course)
Ajax requests save only bandwidth and time, they're not changing user interaction with the app in any major way.
I think it's more about how you label the links and buttons, and by use of existing "conventions" that people will accept something to act dynamically instead of reloading the page.
For example, if someone has used Facebook a lot then they might connect the word "Like" with the way it works in Facebook (AJAX, not a page reload). That being said, liking a Facebook Page does refresh the page.
If someone uses Twitter a lot, they might connect actions like Reply and Favourite with performing dynamically.
There's no convention really, to show that a link or button will perform an AJAX like request instead of refreshing. The best thing you can probably do is research widely used words and how their actions work on the websites and try to maintain this general convention.