产品设计

    今日:46| 主题:17973
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Best practices in mobile UX design: Creating error messages!

[复制链接]
嘚過苴過 发表于 2016-10-4 16:41:47
394 9

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
‘Errors’ happen . They happen in our apps and they happen in our life. Sometimes they happen because we made mistakes. Sometimes because a system failed. Whatever the cause, these errors — and how they are handled — can have a huge impact on the way a user experiences your app. Often overlooked, a lazy error handling and ill-constructed error messages can fill users with frustration, and make them stop using your app. A well-crafted error handling, on the other hand, can turn a moment of failure into a moment of delight.
  In this article, we’ll examine how the design of apps can be optimized to prevent excessive user errors and how to create good error messages.
   If you like this article, give it some sharing :heart:
  What is an Error?

  Errors (or error condition) occur when an app fails to complete an expected action, such as:
  
       
  • The application does not understand user input   
  • The application  fails   
  • A user intends to run incompatible operations concurrently  
   Every error, regardless of who is to blame, becomes a point of friction for your users. Luckily, a well-designed error handling can help reduce that friction.
  Preventing User Errors

  If you design app, you should be familiar with constraints. For example, it’s hard to fill out a certain form or it’s impossible to properly sync a data if a device has a poor network connection. You should take these constraints into account in order to minimize errors by designing an app that makes it easy for users to use it. In other words, it’s better to prevent users from making errors in the first place by offering suggestions, utilizing constraints, and being flexible.
   

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!

  Twitter famously has a strict character limit for tweets and warns users before they exceed that limit with a remaining character count.
  Make Error Message Informative and Consistent

   One of the 10 Usability Heuristics advises that it’s important to communicate errors to users gracefully and clearly. An effective error message provides following information:
  
       
  • Communicate what is happening   
  • Describe how a user can resolve it   
  • Preserve as much user-entered input as possible  
  User Input Errors

  User input validations are meant to have conversations with users and guide them through the difficult times of errors and uncertainty. The output of this process is emotional rather than technical.
  The primary principle of input validation is this: “Talk to the users! Tell when them what is wrong!” Generally speaking, there are three important elements that good form validation consists of:
  
       
  • Right time and place for informing about errors   
  • Right color for the message   
  • Clear language for your message  
   And all these moments have one major goal — avoid confusion .
  Right Time and Place (Inline Validation)

  Users dislike when they go through the process of filling out a form only to find out at submission, that they’ve made an error. The right time to inform about the success/failure of provided data is right after the user has submitted the information. And it’s a time when real-time validation comes into play.
  Real-time inline validation immediately informs users about the correctness of provided data. If you are performing inline form validation, and the field with the error is clearly marked, the submit button may be disabled until the error is corrected. It allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors.
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   Image credit: Google
    Below are a few examples of inline validation:
  
       
  • Incompatible values  
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   An example of errors detected before form submission. Image credit: Material Design
   
       
  • Over/under character or word count  
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
    An example of an input field with character counter and error text. Image credit: Material Design
    Right Color (Intuitive Design)

  Color is one of the best tools to use when designing validation.
  Because it works on an instinctual level, adding red to error messages and yellow to warning messages is incredibly powerful. Error text should be legible, with noticeable contrast against its background color. But make sure that colors in your digital interface are accessible for your users, it’s a really important aspect of a well-executed visual design.
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   Make people notice the message. Image credit: Material Design
    Clear Message (What Happened)

  Make sure your error messages sound like they’ve been written for humans. In order to achieve this you should speak the same language as your users, avoid using technical jargon, express everything in the user’s vocabulary. Your validation message should clearly state:
  
       
  • What went wrong and possibly why.   
  • What’s the next step the user should take to fix the error.  
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   A typical error might state that “the data is invalid” without telling the user why it’s invalid (Is it a typo? Is it occupied?). Make sure the message is clear. Image credit: Material Design
    App Errors

  App errors occur independently of user input. It is an example of a situation where the user is getting something other than their desired state. When showing errors, explain why user cannot see anything, and how to solve this.
  Sync Error/Failure To Load

  When sync or connectivity is down or content has failed to load, the user should know that. Tell them upfront. Since you don’t have a data, you can use empty states to fill this gap. Sad fact that most empty states often look… empty. In the example below, error screen only states “An error occurred” and doesn’t provide any helpful information.
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   Dead-end empty state. Image credit: Spotify
    Think of your error message as a conversation with your user. Use friendly and helpful empty states in a moment of failure. Assist users by providing the basic required information, and encourage users to solve the problem.
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   Feel lost and unconnected, like you are on a deserted island? Follow the advice, keep calm, light a fire, and keep refreshing. Image credit: Azendoo
    If appropriate, present a link (or button) to help a user accomplish their task. But you should only offer options that you can actually support. For example, don’t offer an option like “Try again” in cases where you can detect that the operation will fail.
  Never Show The Raw Error Message

  Messages like the example below are cryptic and scary.
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   This error message was written by a developer for a developer.
    Don’t assume people know about the context of a message or they are tech-savvy, tell people what’s wrong in simple words. How would you explain the error to them, in human speak? Write those words down. That’s your error message.
  Incompatible State Errors

  Incompatible state errors occur when users attempt to run operations that conflict, such as making a call while in airplane mode or trying to play online video while being offline. You should help prevent users from putting themselves into these situations by clearly communicating the states they are selecting. Simply, don’t let people start something they can’t finish.
     

Best practices in mobile UX design: Creating error messages!

Best practices in mobile UX design: Creating error messages!
   Clarify the reason for and origination of the error. Image credit: Material Design
    Conclusion

  The best error message is the one that never shows up. It is always best to prevent errors from happening in the first place by guiding users in the right direction ahead of time. But when errors do arise, a well-designed error handling not only help teach users how to use the app as you intended, but they also prevent users from feeling ignorant.
  About the author:
   This post originally appeared on babich.biz , written by Nick Babich. Nick is a software developer who’s passionate about user experience.



上一篇:“文案要能写好段子,但不要成为段子手”| 创意人说
下一篇:How Creativity And Time Management Can Go Hand In Hand For A Successful Design P
hdsjvvyddj 发表于 2016-10-4 19:00:33
然并卵
回复 支持 反对

使用道具 举报

蒋远涛 发表于 2016-10-5 00:54:03
好帖必须得顶起
回复 支持 反对

使用道具 举报

651092799 发表于 2016-10-5 13:57:55
说不好是在找骂么?
回复 支持 反对

使用道具 举报

riyuexue 发表于 2016-10-16 02:18:56
蜘蛛会不会上吊?
回复 支持 反对

使用道具 举报

Max.极限兔子 发表于 2016-10-16 08:49:38
撸过。。。。
回复 支持 反对

使用道具 举报

佑怡 发表于 2016-10-16 17:49:12
如果你活着,早晚都会死;如果你死了,你就永远活着
回复 支持 反对

使用道具 举报

wikm6na8 发表于 2016-10-20 05:21:07
没人回帖。。。我来个吧
回复 支持 反对

使用道具 举报

w199781 发表于 2016-11-13 09:12:46
高手在民间
回复 支持 反对

使用道具 举报

吻月亮的鬼 发表于 2016-11-14 13:33:05
我了个去,顶了
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表