3

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.

  • 2
    Can you explain why you think "inline movement...seems to be the status quo at the moment." – Graham Herrli Sep 25 '14 at 1:56
  • Are you only discussing this in the context of desktop applications or also for mobile devices? – Michael Lai Sep 25 '14 at 4:01
  • @3nafish As in the 'append to body style' versus absolutely positioned alerts. The question is meant to be orientated towards form validation rather than site wide notifications. - updated question to be a bit more understandable. – WJK Sep 25 '14 at 21:22
  • @MichaelLai Both, site is responsive. – WJK Sep 25 '14 at 21:28
  • I haven't seen a toast notification used on a mobile application before... how do you plan to implement it with the limited space on mobile? – Michael Lai Sep 25 '14 at 22:28
3

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.

enter image description here

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

enter image description here

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.

0

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.

  • Thanks. This is really to do with form validation on a series of large (>page in length) forms. I like the idea of auto-focusing to the first invalid input to ease keyboard only input. Inline alerts may not be visible on the page in all cases, especially on a mobile platform. I'm using angular + bootstrap. Angular's inbuilt alerts are inline. – WJK Sep 25 '14 at 21:19
  • For form validation, I would recommend inline alerts directly above the form field explaining where the user went wrong. – shash7 Sep 27 '14 at 5:38
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.