Placement of validation error messages

Question

I'm reading about Validating user input in a Windows Store business app using C#, XAML, and Prism and it says:

"There are guidelines and requirements for the placement of error messages in Windows Store apps. For more info see Guidelines for text input."

But I followed the given link and can't find mention of error messages.

My question, in particular, is: where to place error messages?  The link above describes a scenario in which TextBlock is used, but I feel inclined towards using ToolTip.  What's the recommended practice regarding which to use, or doesn't it matter?

If one is recommended over the other, then of course I'd like to know the reasoning behind that recommendation.  This will help me gauge it's applicability to any given design scenario.

Answer 1

See Choosing the right UI surfaces: Errors for general guidance on errors.

For validation I'd tend towards putting the information in-line next to, above, below, etc. the erroneous field. That makes it clear what and where the error is and will remain as a guide while updating without being in the way.

ToolTips are better for more temporal information that shows and then vanishes when the user is done with it. For validation the ToolTip can go away before the error is fixed and leave the user confused or cover the field and draw attention off of the pane where the error needs to be fixed.

Answer 2

Right, the message shouldn't go away until the user corrects the erroneous input.

I thought I used a ToolTip in my WPF app, but I looked at that code just now and turns out it's not an actual ToolTip.  Rather, I set Validation.ErrorTemplate to a template that includes something mimicking a ToolTip.  It appears underneath the affected field.

As far as I know, Windows Store apps don't have a Validation.ErrorTemplate property, nor does it even have an adorner layer.  As in WPF, ToolTips are designed to be "temporal" so I probably can't display them for the desired duration.  To get an "adorner" as I have in my WPF app, I think I can use a Popup that sticks around until the input is corrected.

The advantage of using Popups rather than inline TextBlocks is that it will be easier coding.  I'll create an attached behavior that takes care of showing the Popup, with an option to specify its position relative to the target control.  So all I have to do is set the attached property and be done with it.  To put a red border around the target control, I'll need an attached behavior anyway.  So this approach gets me more bang for my buck.

Answer 3

I surveyed some potential users and they almost all prefer the red text that appears directly on the canvas rather than something resembling a tooltip.  For coding convenience, I could still implement this as a Popup with a transparent background.  The advantage of truly doing it inline, though, is I don't have to worry about it overlapping with other onscreen elements.