How to style a button - AJAX vs Hard Refresh?

Question

When I'm casually surfing the internet, I stumble upon random buttons that I'm not really sure if they're going to open up a modal or just slide down a div so I just get scared of clicking them in fear of having the page to refresh and load the DOM again making me wait extra seconds in the void.

This is a true phenomenon that I have observed with clients. If my clients of X website knew that Y button will just fadeIn() a small div, they are more likely to click on the button and see what happens.

Answer 1

Users on general wouldn't know the difference between a javascript-library-enabled partial undisclosure of an element and a refresh of the page. There are no conventions around for letting the user know the difference. And I agree, with todays heavy web apps which takes three four seconds to load, it really would be useful to know the difference. Or not.

The real problem here is not wheather it's an AJAX load or a full refresh. the problem is the very long loading times. That's the problem we should adress in terms of User Experience. It's not an issue how to differenciate post backs from client side scripting with button color, label or title-attributes. We need to focus on the problem and not solve the symptom.

But this won't be solved in a flash. So in the meanwhile I would suggest an intense color (red!) for the button who makes the full post back, and a less prominent color for "lean reload" (gray!).

---

Good and important question!

Answer 2

Some UI hints that may help:

Ellipses and Arrows

Historically, Ellipses have been used to indicate the presence of a modal popup. Example: File->Print... indicates that a dialogue box will open for the user. Ellipses would probably suggest an AJAX action.

Submenus are usually hinted using arrows.

Tabs

If the page is meant to represent a single record but the record has information divided into different groups, the groups may be represented as tabs. Since all of the data is part of a single object, it is expected to load without refreshes.

Some of the stackexchange websites use tabs to represent different sections of the website. The sections are not part of the same document / object, and so are not expected to load without refreshes.

Button text

The default unstyled submit button has had a long enough history with full page refreshes that "Submit" by itself should probably suggest a page refresh. I don't think the converse is true, though.

Multi-part forms usually have buttons that indicate a final action, "Submit", with buttons before that for "Next". From the user's perspective, you should be able to "take back" the "Next" action before the final Submit. Refreshing gives a sense of finality to it, so you probably want "Next" to be in Ajax.

Feed-like interfaces

Applications like twitter and facebook that have a dynamic Ajax stream suggest that the submit button is also Ajax. In both applications, the button "activates" only upon entering text into the feed interface. A visual suggestion that the button is linked to the stream is also helpful. With twitter, there is no other place for your posted data to go but the central stream. With facebook, the post button is placed immediately above the stream, looking like an element inside the stream itself. In both, the color of the activated button looks like the links in the stream itself.

I'm not sure how this applies to stackexchange's "post your answer" button. The plain styling and finality of the wording suggests that the page will refresh, but the presence of the post textarea in the stream suggests that the text will appear in the stream shortly.

I'll post and see which it is .