Your SlideShare is downloading. ×
Feedback & error messages for rich internet applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Feedback & error messages for rich internet applications

12,800
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. …

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,800
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Feedback & error messagesfor 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 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. 1. Give feedback branding.technology.integration confidential and proprietary ©blue-infinity
    • 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. 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 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. 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 404http://www.bluedaniel.com/dfdfhttp://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.combranding.technology.integration confidential and proprietary ©blue-infinity