4

I'm a developer, not a designer or UI designer.
I'm developing a system and trying to use Metro UI concepts.

What is the best (or correct) way to provide a user notifications about errors using Metro UI concepts?

Examples too are welcome.

Improve this question
3
  • 1
    Hi Ewertng. At UX.SE we like specific questions asking for one thing on one post. In your question I can count to three (notification, required fields and error messages. Try to narrow it down and it won't be closed.
    – Benny Skogberg
    Commented Oct 6, 2012 at 5:54
  • 1
    Benny Skogberg. Edited like your sugestion
    – Ewerton
    Commented Oct 9, 2012 at 12:24
  • @Ewerton: so, you need notifications, about background processes, not error feedback for forms? Tablet/desktop or mobile?
    – Aadaam
    Commented Oct 9, 2012 at 12:26

2 Answers 2

Reset to default
2

Windows Phone has obviously limited screen real estate, the most commonly used pattern changes a bit from your standard web form. The thought with Windows Phone is that you really don't want to waste too much real estate on things like asterisks and inline validation messages. Therefore on Windows Phone, the general pattern is to use what Microsoft refers to as Raw Notifications (you can also see information on Tile Notifications, Toasts, etc and their contexts there). Basically this just means a pop-up displaying a contextual alert. If you find yourself needing lengthy forms, inline validation is still fine as far as I've seen.

Windows 8 does not have the same limitations on screen real estate and so can adhere to more "normal" standards of form validation like inline messages, etc. The same considerations for using inline warnings versus pop ups apply to the Windows 8 design. Another good resource for Windows 8 is the Guidelines for visual feedback.

Those two resources are the only guidelines I've seen directly from Microsoft regarding the subject matter at hand. I would say that in general for Metro, so long as you're being touch-conscious, you can pretty much apply any of the most common validation patterns from the web/desktop apps. Just be careful to be consistent.

If you want to see examples, I'd check some of Microsoft's default apps like Mail and see how they handle warnings/errors (I don't have a device in front of me at the moment, otherwise I'd check for you :) ).

Improve this answer
1

To show: A non-critical error specific to an element in the app.
Your app cannot fix the problem, but users can.
User interaction: Users can continue to interact with the app, system components, and other apps without dismissing the error.
Example: The user enters an invalid string in a text box and then retypes it.

Use this surface: Text inline on the canvas

  • Text only
  • Dismissed by app
  • Appears inline near the source of the error

(Source: Windows 8 UX Guidelines, RTM version, page 145)

Takeaway:

Do online verification (eg, when the user leaves the input field), in case of error, highlight the borders of the field or change background to light pink, and display an explanation underneath or above.

A good read about metro-esque design is UXBooth's Metro article, the authors are suspiciously from Seattle...

Notification is a different thing, though.

Unfortunately, Metro is not developer-friendly in the sense that you either have to be a fully-educated UX designer to understand how to use it, or become one :( It's a really radical approach and it takes some education on modernist design to understand what happens.

The 300-page UX guide is the shortest thing you can read about it basically.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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