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.

1. Feedback & error messages
for Rich Internet Applications
14.09.2012
b-i branding. technology. integration.
www.b-i.com

2. branding.technology.integration confidential and proprietary ©blue-infinity

3. Oops, I ruined your life :)
branding.technology.integration confidential and proprietary ©blue-infinity

4. Some not so great examples
Gmail
Facebook
branding.technology.integration confidential and proprietary ©blue-infinity

5. Pretty ones
branding.technology.integration confidential and proprietary ©blue-infinity

6. Fail Whale – viral ones
http://www.whatisfailwhale.info/
branding.technology.integration confidential and proprietary ©blue-infinity

7. Even Windows’ Blue Screen of Death…
branding.technology.integration confidential and proprietary ©blue-infinity

8. …has gotten a facelift in Windows 8
branding.technology.integration confidential and proprietary ©blue-infinity

9. 5 Principles for messages
1. Give feedback on user action and system status
2. Prevent errors from happening
3. Allow for easy error recovery
4. Communicate clearly and consistenty
5. Provide access to more information / help when needed
branding.technology.integration confidential and proprietary ©blue-infinity

10. 1. Give feedback
branding.technology.integration confidential and proprietary ©blue-infinity

11. 1. Give feedback - During user action / input
Interaction 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. 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. 2. Prevent errors from happening – bad example!
???
branding.technology.integration confidential and proprietary ©blue-infinity

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. 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. 4. Communicate clearly and consistently – bad example
Be sure to check “Never ask me again”!
branding.technology.integration confidential and proprietary ©blue-infinity

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. 5. Provide access to more information – how to do it
The more contextual, the better – no one will willingly click on a
global 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. 5. Provide access to more information - But not too much!
branding.technology.integration confidential and proprietary ©blue-infinity

20. 5. Provide access to more information - Help on demand
branding.technology.integration confidential and proprietary ©blue-infinity

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. And to finish: Creativity 404
http://www.bluedaniel.com/dfdf
http://www.1stwebdesigner.com/inspiration/unique-404-error-pages-inspiration/
branding.technology.integration confidential and proprietary ©blue-infinity

23. For more information, please contact:
Julia.Borkenhagen@b-i.com
branding.technology.integration confidential and proprietary ©blue-infinity