产品经理的自我修养——人性化的错误页面设计

输入错误页面设计

课程目标

1.掌握输入错误页面设计方法;

2.掌握访问错误页面设计方法。

前言

近年来,随着互联网的发展,用户会在各种各样的应用场景和环境中去使用产品。站着、坐着还是躺着?公交上、地铁上还是在厕所里?在使用互联网的产品过程中,相信任何一个用户都难以避免遇到错误,或是输入信息错误,或是网络不好等等。这些复杂多样的使用场景使得针对用户操作错误而进行的错误反馈设计变得尤为重要。

输入错误

1.手控类型错误实例

这类型的错误主要是在使用手机或平板的时候会遇到,比如前些天我遇到的一个健身类型的APP,里面有个设置体型的环节.看到这个页面,我第一反应就是点击刻尺上的刻度位置,发现没反应。于是又试着按住“肌肉”模块移动,发现还是没有反应。到后来,因为不小心划到刻尺里的内容,才发现这个东西原来要这样操作的。

好的反馈信息设计应该是这样的:

1)首次进入的时候应该有个引导指引是通过滑动刻尺内容进行设置。

2)用户在点击刻尺的内容时,应该提供设置的指引。

3)用户在按住“肌肉”或“脂肪”模块移动时,也应该提供设置的指引。

4)最简单的方法是在页面提示“请滑动刻尺”。

2.词语/拼音错误

这类型的错误主要是在使用搜索引擎/输入法遇到的。先来看看搜索引擎的例子(以百度为例)

实例1:(百度搜索)

搜索“拖拉及”,百度根据关键词判断用户意图,首先对用户搜索关键词时发生的可能拼写错误提供纠错帮助。然后,给出了搜索拖拉机的结果页面,并在搜索下面提供文案告诉用户这是关键词拖拉机的搜索结果,同时也提供给用户继续想要搜索“拖拉及”的链接——如果用户输入的关键词并没有出现错误,那么就可以通过链接快速的重新进行搜索。

为什么这边不先提供搜索“拖拉及”的结果,然后在提供文案给出搜索“拖拉机”的链接呢?我想原因在于,百度的搜索结果是根据热词和热度优先搜索的,这也符合一个搜索引擎的产品形态。所以说,产品设计也要跟产品形态相结合。

实例2:

这里写图片描述

如第一张图,笔者想输入“相信”两个字,把g和n对换;或如第二张图笔者想输入“产品”两个字,把n和b输入。这在快速敲键盘的时候是经常能遇到的事情,这时输入法给出的结果中,包括了“错误的结果”但却是用户本来想输入的。

百度输入法和搜狗输入法两种产品的设计不仅提高了产品的容错能力,提高了用户搜索/输入效率,还会给用户带来惊喜的感觉(特别是第一次使用的时候),对产品产生潜在的好感。

3.内容不符合规则

这类型的错误常见于表单的填写,最经常接触的我想莫过于登录和注册了,以下就注册模块举一个例子分析:

这里写图片描述
第一张图明明告诉笔者帐号的限制只是“英文或英文+数字”,而用户密码好像没啥限制,提示信息却又告诉帐号“需为4-13个字符,不能为纯数字”,密码“需为6-16个字符,区分大小写”。

这里写图片描述

另外,同时输入帐号和密码时,先提示密码有问题,然后点击注册后,又提示帐号有问题。

大部分用户1:字符是啥?跟字有区别吗?

大部分用户2:哥,你不要只提示部分内容,一次性说明白会死啊?

大部分用户3:哥,你能不能一次性提示完错误信息?

这边比较好的反馈信息设计应该是这样的:

1)进入注册页面时,帐号输入框默认显示“4-13个字的英文或英文+数字组合”,密码输入框默认显示“6-16个字符,区分大小写”——提示规则要全面。

2)用户在点击密码输入框时,如帐号信息输入有误就应该马上给予提示——操作要最便捷。

访问错误页面设计

1、功能不能使用

1.公众平台申请多客服失败时的提示,既没有告诉失败的原因又没有告诉遇到这种情况的解决方案,害的以为是不满足申请多客服的条件,还反复检查了好几次。

这里写图片描述

2.访问某个视频网站,无法播放时的提示,这个反馈就非常到位(必须给36个赞),既让用户知道为什么无法播放还提供想要完成播放的解决方案。

这里写图片描述

2、页面不能打开

1.比较友好的方式,可以缓解用户烦躁心理,还告诉了原因,还有反馈路径——Q我吧。
这里写图片描述

2.新浪微博,告诉原因、方法。

这里写图片描述

3、加载失败

类似形成了模板,说明原因,给出解决办法。

1.QQ彩票

这里写图片描述

小结
这里写图片描述

1.错误页面设计

输入错误

1)手控类型错误

2)词语/拼音错误

3)内容不符合规则

访问错误

1)功能不能使用

2)页面不能打开

3)加载失败

思考

1.分析几种优秀的产品错误页面设计?

2.检查并优化自有产品错误页面设计?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值