Feedback & error messages for rich internet applications


Published on

Feedback messages and effects should not get overlooked in the application development process or be added as an afterthought, since they are at the core of the user / application interaction.
In this presentation, I have identified five guidelines to help improve communication with the user: The first is to give feedback upon interaction. The next is error prevention, followed by easy error recovery if an error could not be prevented. You also need to make sure that you communicate consistently across the application and, finally, provide help or more information where necessary.

Published in: Design, Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Most people sufferthroughfilling out forms – and messages are often not veryhelpful.In many web appprojects, alert / error / confimration / help / information messages tend to getoverlooked or are added as an afterthought.
  • Gmail Facebook
  • Initially, Twitter had a cat on the fax machine.Yiying Lu, an artist and a designer in Sydney, Australia designed this logoIn this case, the failure was a big success!
  • We all love and need feedback – it’s a psychologicalprincipleInline validation: best to display error messages below the field – not next to it, whenformsmayvary in size or have multiple fields in a row
  • Progress indicators – progress bar, completion, save animation…Whencompleted, provide confirmation – for small actions, the resultcanjustbe visible – for more complexoperations, written message ishelpful. Message should not block further actions.
  • Didyou know that in MS Outlook, youcan enter tomorrow, 5 days – today etc… and itwillrecognize the date.
  • Feedback & error messages for rich internet applications

    1. 1. Feedback & error messagesfor Rich Internet Applications 14.09.2012 b-i branding. technology. integration.
    2. 2. confidential and proprietary ©blue-infinity
    3. 3. Oops, I ruined your life :) confidential and proprietary ©blue-infinity
    4. 4. Some not so great examples Gmail Facebook confidential and proprietary ©blue-infinity
    5. 5. Pretty ones confidential and proprietary ©blue-infinity
    6. 6. Fail Whale – viral ones confidential and proprietary ©blue-infinity
    7. 7. Even Windows’ Blue Screen of Death… confidential and proprietary ©blue-infinity
    8. 8. …has gotten a facelift in Windows 8 confidential and proprietary ©blue-infinity
    9. 9. 5 Principles for messages1. Give feedback on user action and system status2. Prevent errors from happening3. Allow for easy error recovery4. Communicate clearly and consistenty5. Provide access to more information / help when needed confidential and proprietary ©blue-infinity
    10. 10. 1. Give feedback confidential and proprietary ©blue-infinity
    11. 11. 1. Give feedback - During user action / inputInteraction design is about feedback:– Roll-overs effects on all interactive content (icons / buttons / images / links)– Highlight on table rows (when hovering and selecting)– Focus on form fields– Inline validation of errors– Additional indicators: – «checks» for accomplished tasks / fields – Indicators on password strength – Count-down of characters allowed confidential and proprietary ©blue-infinity
    12. 12. 1. Give feedback - After user action– Highlight system progress– Display success confirmation– Display potential error messages clearly confidential and proprietary ©blue-infinity
    13. 13. 2. Prevent errors from happening – bad example! ??? confidential and proprietary ©blue-infinity
    14. 14. 2. Prevent errors from happening – how to do it– Progressive disclosure: Only show what the user needs to see at a given time– Responsive enabling: Do not allow buttons to be clickable that are not– Forgiving formats: Allow different formats – especially for dates– Default values: Whenever possible, provide smart default values– Required fields: Indicate them clearly confidential and proprietary ©blue-infinity
    15. 15. 3. Easy error recovery – how to do it– Provide Undo, Back, Cancel commands whenever technically possible– Allow deleting or editing items whenever business processes allow the user to do so– Provide clear instructions in error messages on how to recover (hint: contact your system administrator is rarely helpful)– If actions are critical and irreversable, ask for confirmation (usually when deleting and closing unsaved items) confidential and proprietary ©blue-infinity
    16. 16. 4. Communicate clearly and consistently – bad example Be sure to check “Never ask me again”! confidential and proprietary ©blue-infinity
    17. 17. 4. Communicate clearly and consistently – do and don’t DO DON’T– Be specific – Make general statements– Use clear language – Use overly technical language– Make your errors visible or overly cute / slang terms– Display errors in proximity of – Only display errors at the top their source of page without hi-lighting– Give constructive advice the fields when possible– Offer a clear path of what to do next confidential and proprietary ©blue-infinity
    18. 18. 5. Provide access to more information – how to do itThe more contextual, the better – no one will willingly click on aglobal help!– Field level help is the most effective– Input prompts or hints: Display in field what type of information is needed – or display additional information when on clicking in field. confidential and proprietary ©blue-infinity
    19. 19. 5. Provide access to more information - But not too much! confidential and proprietary ©blue-infinity
    20. 20. 5. Provide access to more information - Help on demand confidential and proprietary ©blue-infinity
    21. 21. To sum it up– Define UI standards of what to display, when and how BEFORE starting to code– Specify the tone of voice for messages and make sure that messages are consistent– Pay attention to detail: Capitalization rules, syntax, button naming…– Make it fun- but think about your audience confidential and proprietary ©blue-infinity
    22. 22. And to finish: Creativity 404 confidential and proprietary ©blue-infinity
    23. 23. For more information, please contact: confidential and proprietary ©blue-infinity