floating versus inline alerts

Question

I personally am a fan of floating alerts such as Toasts. I am thinking of using them for the form validation and feedback.

I find the inline movement of content terrible, though it seems to be the status quo at the moment. What are the pros versus cons of each and which gives a better UX?

Edit: To clarify, I mean the append to body style alerts which cause the content to move.

The question is orientated at validating large forms (20+ fields) rather than a simple sign up form.

I am a fan of keyboard only support so when a field is invalid then I have set up a function to automatically focus on the first invalid input. With the append to body alerts, the alert itself may not be visible, especially on mobile platforms.

Answer 1

Inline hints are good because they provide context...

I agree with you that inline alerts that make other elements shift causes friction and is distracting. There are ways to provide inline help that doesn't do this like making it invisible and just showing it as needed.

Problems with popping up toast alerts include...

1. It could go unnoticed
2. It may not provide the user with enough information to see where the problem is.
3. If multiple things are wrong then the queue of toast could stack up making them harder to relate the alert to the position on the page it occurs

Using both is okay depending on the situation

Inline alerts provide the most direct feedback helping the user provide accurate input while toast alerts can provide information, warnings, or errors at a higher level and not directly tied to a specific input.

Answer 2

I am guessing you are referring to inline alerts such as the bootstrap alerts which appear in the flow of the document as opposed to floating alerts which are usually absolutely positioned divs appended to the body tag.

Anyways, lets get down to it.

Floating alerts are good when you want to inform the user of certain action they have taken. For example, if a user creates a group, a floating alert is nice and non-obtrusive to show that the group has actually been created.

But if you are changing your site's TOS or if the user has made a change which is reversible or maybe if it is something the user HAS to see, then use inline alerts.

The importance of how alerts are presented are as follows :

• Just some small confirmation messages : Use toastr.
• An important confirmation or some site wide message : Use inline alerts
• If something is really important and possibly needs more details from the user : Use modal windows.

You can use all of them in a webapp but I would recommend using either only inline or floating alerts unless your site is very complex.

As for mobile website, toastr and bootstrap alerts are both responsive so that shouldn't be a problem.

Answer 3

Maybe the problem is that you need to divide your large >page in length forms into sections which are validated one at a time.

Consider looking at apples checkout which uses nice bootstrapish tool-tips or popovers to hold errors, that way you get inline and float in the same solution.