Successfully reported this slideshow.
Feedback & error messagesfor Rich Internet Applications                                14.09.2012               b-i brandi...
branding.technology.integration   confidential and proprietary ©blue-infinity
Oops, I ruined your life :)           branding.technology.integration   confidential and proprietary ©blue-infinity
Some not so great examples Gmail Facebook                      branding.technology.integration   confidential and propriet...
Pretty ones              branding.technology.integration   confidential and proprietary ©blue-infinity
Fail Whale – viral ones                                                  http://www.whatisfailwhale.info/                 ...
Even Windows’ Blue Screen of Death…                      branding.technology.integration   confidential and proprietary ©b...
…has gotten a facelift in Windows 8                       branding.technology.integration   confidential and proprietary ©...
5 Principles for messages1.   Give feedback on user action and system status2.   Prevent errors from happening3.   Allow f...
1. Give feedback                   branding.technology.integration   confidential and proprietary ©blue-infinity
1. Give feedback -    During user action / inputInteraction design is about feedback:– Roll-overs effects on all interacti...
1. Give feedback - After user action– Highlight system progress– Display success confirmation– Display potential error mes...
2. Prevent errors from happening – bad example!    ???                        branding.technology.integration   confidenti...
2. Prevent errors from happening – how to do it– Progressive disclosure: Only show what the user needs to  see at a given ...
3. Easy error recovery – how to do it– Provide Undo, Back, Cancel commands whenever technically  possible– Allow deleting ...
4. Communicate clearly and consistently – bad example                               Be sure to check “Never ask me again”!...
4. Communicate clearly and consistently –                     do and don’t               DO                               ...
5. Provide access to more information – how to do itThe more contextual, the better – no one will willingly click on aglob...
5. Provide access to more information - But not too much!                         branding.technology.integration   confid...
5. Provide access to more information                    - Help on   demand                       branding.technology.inte...
To sum it up– Define UI standards of what to display, when and how  BEFORE starting to code– Specify the tone of voice for...
And to finish: Creativity 404http://www.bluedaniel.com/dfdfhttp://www.1stwebdesigner.com/inspiration/unique-404-error-page...
For more information, please contact:         Julia.Borkenhagen@b-i.combranding.technology.integration   confidential and ...
Upcoming SlideShare
Loading in …5
×

Feedback & error messages for rich internet applications

15,477 views

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

Feedback & error messages for rich internet applications

  1. 1. Feedback & error messagesfor Rich Internet Applications 14.09.2012 b-i branding. technology. integration. www.b-i.com
  2. 2. branding.technology.integration confidential and proprietary ©blue-infinity
  3. 3. Oops, I ruined your life :) branding.technology.integration confidential and proprietary ©blue-infinity
  4. 4. Some not so great examples Gmail Facebook branding.technology.integration confidential and proprietary ©blue-infinity
  5. 5. Pretty ones branding.technology.integration confidential and proprietary ©blue-infinity
  6. 6. Fail Whale – viral ones http://www.whatisfailwhale.info/ branding.technology.integration confidential and proprietary ©blue-infinity
  7. 7. Even Windows’ Blue Screen of Death… branding.technology.integration confidential and proprietary ©blue-infinity
  8. 8. …has gotten a facelift in Windows 8 branding.technology.integration 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 branding.technology.integration confidential and proprietary ©blue-infinity
  10. 10. 1. Give feedback branding.technology.integration 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 branding.technology.integration confidential and proprietary ©blue-infinity
  12. 12. 1. Give feedback - After user action– Highlight system progress– Display success confirmation– Display potential error messages clearly Animoto.com branding.technology.integration confidential and proprietary ©blue-infinity
  13. 13. 2. Prevent errors from happening – bad example! ??? branding.technology.integration 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 branding.technology.integration 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) branding.technology.integration confidential and proprietary ©blue-infinity
  16. 16. 4. Communicate clearly and consistently – bad example Be sure to check “Never ask me again”! branding.technology.integration 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 branding.technology.integration 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. branding.technology.integration confidential and proprietary ©blue-infinity
  19. 19. 5. Provide access to more information - But not too much! branding.technology.integration confidential and proprietary ©blue-infinity
  20. 20. 5. Provide access to more information - Help on demand branding.technology.integration 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 branding.technology.integration confidential and proprietary ©blue-infinity
  22. 22. And to finish: Creativity 404http://www.bluedaniel.com/dfdfhttp://www.1stwebdesigner.com/inspiration/unique-404-error-pages-inspiration/ branding.technology.integration confidential and proprietary ©blue-infinity
  23. 23. For more information, please contact: Julia.Borkenhagen@b-i.combranding.technology.integration confidential and proprietary ©blue-infinity

×