收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5403|回复: 5

从网易邮箱谈“信息提示”交互设计

[复制链接]
发表于 2007-12-12 20:48:03 | 显示全部楼层 |阅读模式
网易邮箱是国内的免费邮件服务商,旗下免费邮有 163.com、126.com、yeat.net等,在市场份额上处于绝对的领先地位。我也是网易的免费邮用户,今天就其中的“信息提示”交互问题谈一谈。

我有一个163.com的邮箱,默认界面是极速3.0Beta,另外一个是yeah.net的邮箱,默认界面是逍遥3.0Beta。假若我需要修改个人资料,进入邮箱后,在“选项”页面里找到“个人资料”,填写完毕之后提交。这里的交互设计的用意都是让用户得知“资料修改是否成功”这个信息的。

先看极速版,用户修改信息,点击确定提交之后,出现的提示框会出现在屏幕中间的位置(如图示),而且提示框以外区域蒙上了一层灰色,给人一种不可操作的感觉,而提示框的亮度则要高一点,这样提示框就很醒目,清楚的让用户知道了“资料修改成功”这个信息,但是如果用户要进行其他操作,比如写新邮件,就必须点击提示框里的“确定”,解除提示框造成的其他区域不可点击的问题,也许这点会让用户觉得有点麻烦——明明都点击“确定”,成功修改了,还要我再次“确定”你的提示信息。

再看逍遥版,用户修改信息,点击确定提交之后,如果修改成功,则直接跳转到选项页面,提示信息出现在如图示的位置,大概3秒之后自动消失。首先,这里出现的提示信息“不够明显”,因为提示区域过小,文字也小,背景色黄色与主色调蓝色对比不是很明显,同时,用户用鼠标点击屏幕下方的“确定”之后,鼠标不会到处移动,视线仍会停留鼠标附近,但是提示信息却出现在页面上端,交互的响应距离太远,用户的视线不会马上移到提示信息区域,用户很可能不会注意到(第一次我就没有注意到),这样用户就不知道到底发生了什么事情,很可能认为“这个网站有问题”或者“没有修改成功”。但有一点还是可取的——没有让用户“二次确认”。

两种交互的设计各有优点和缺点,一种提示信息明显,交互性强,但是需要用户“二次确认”;一种不需要“二次确认”,但是提示信息却与用户玩了“捉迷藏”的游戏。

如何改进呢?我们可以把优点结合,如果在极速版出现的提示框中加入“3秒中后自动跳转”这样的提示,既可以有足够的时间给用户阅读提示信息,又免去了“二次确认”的麻烦。相信这样做不会给邮箱的开发人员带来多大的工作量,而且应该是很容易做到的,但是我们却没有享受到这样的便利。我们似乎已经习惯了这样一条规则——让用户适应界面,而不是界面为用户设计。

我们如果遵守以下几条规则,“信息提示”就可以达到很好的交互效果:
1.“提示信息”依据重要或者紧急程度,必须让用户了解。可以通过对比于其他区域的颜色,文字大小等视觉效果手段来引起用户的注意。
2.注意交互的响应距离,一般来说提示信息的区域应出现在交互发生之前的注意力范围,这个范围指的是触发交互事件的物体位置(一般指的是鼠标指针位置)到屏幕正中的这个区域,同时影响这个距离的还有页面的排版,内容排的越多越挤,这个范围越小。
3.信息提示要适当使用,不要给用户造成更大程度上的麻烦,比如“二次确认”,或者过于频繁。我曾经见过这样的设计:在一个论坛注册页面,我填写了一个已经被注册掉的用户名,过于简单的密码和错误的邮箱,结果点击注册之后接连跳出三个警告框,我只好在点击三次确定之后重新填写资料。不知道何种原因会使得程序员这么设计,不过这种糟糕的设计现在已经看不到了。但是有些非常重要的提示信息必须通过鼠标的再次点击确认,比如支付宝付款完成后出现的提示框(最近没有使用支付宝,无法得到截图)。

最后举两个例子,登录饭否,在设置页里修改各种信息后,出现的信息提示框如下。虽然信息提示区域达到了足够吸引用户注意力的大小,但是由于颜色对比颜色仍不是很明显,越过了用户的注意力范围,这个仍算不上较好的设计。登录WordPress博客管理,更新某些信息后提示信息也是出现在了页面上部,但是相对于饭否,这个提示框使用了颜色的时间渐变,由于排版简洁,也没有越过交互响应距离。所以总体来说,这个算是很好的设计了。

注意:本文属于个人研究,并非权威观点,欢迎大家批评指正,发表自己的看法。

原载NingShell Blog,转载请联系。

[[i] 本帖最后由 kevinboul 于 2007-12-12 20:53 编辑 ]
发表于 2007-12-13 21:59:33 | 显示全部楼层
“.注意交互的响应距离”能举例说明一下吗?
回复 支持 反对

使用道具 举报

发表于 2007-12-14 10:17:21 | 显示全部楼层
我的理解大概是在页面底部操作,最好信息提示出现在顶部,就算是在响应距离之外了吧
个人觉得,对于提示性质的信息,确定按钮应该默认focus,并且提供可以忽略提示的选项,或者视文字内容多寡让它过一段时间后自动消失
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-14 11:03:35 | 显示全部楼层
回2楼,如果你点击的“确定”位置在页面底部,提示信息却出现在了页面顶部,越过了用户的注意力范围,那么这个交互响应距离远远超过了理论值。比方大家经常看到的QQ空间那些花花绿绿的页面,内容很多,假设提示信息出现在页面顶部,忽略掉的人是50%,提示信息出现在页面中部,则忽略掉的人则只有5%(这是假设数据,没有经过测试)。

回3楼,你的建议非常不错,虚心学习。

由于疏忽,上次忘记传图了,补在这里:







[[i] 本帖最后由 kevinboul 于 2007-12-14 11:06 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-12-15 23:46:14 | 显示全部楼层
学习了~~
回复 支持 反对

使用道具 举报

发表于 2007-12-17 12:53:41 | 显示全部楼层
从楼主的文章中可以看出,楼主深有研究,不错
学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-15 02:51 , Processed in 0.110072 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表