让用户能够很容易地扫描到
除了设置速度的用户界面不符合常规之外,这款游戏还是非常不错的。我认为它很适合用来招待小孩子玩,但是我不能忍受这种特别的速度控制。于是我通过源代码修改了程序,用11 减去用户输入的数字,在延迟循环中使用这个运算得到的差值而不是用户直接输入的数值。这个改动花了我大约2 分钟,程序员需要花费的时间可能更少,但是他显然没有意识到应该避免将实现暴露给游戏的用户。
—— 摘自Jeff Johnson 著,王蔓、刘耀明翻译的《GUI 设计禁忌》机械工业出版社出版
为了便于大家更深刻地理解什么是“用户及其任务”,我们看看淘宝网,如图2-5-15所示,这是大家所公认的用户体验非常好的一个网站。淘宝在首页提供了搜索、商品分类、推荐等,这些都是用户在购物中会使用到的功能,很好。
但是与Amazon(如图2-5-16所示)相比呢?
图2-5-15淘宝网的首页
图2-5-16Amazon的首页
Amazon利用Cookie(网站为了辨别用户身份而储存在用户本地终端上的数据)记录了我之前访问过的一本书Running Lean,并把这本书放在了网站首页的中间位置,周围的其他推荐,也是围绕这本书进行的。请大家注意,这两个网站的截图都是在未登录的状态下截取的。在我看到Amazon首页时候,我有一种被尊重的感觉,就好像去一个常去的餐馆吃饭,服务员了解我的口味能猜出来我要点什么菜。这样精准的推荐也更方便我去购买这本书,省去了重新搜索的过程。回头看看淘宝,它所提供的各种冷漠的工具是不是显得相对不够关注用户及其任务?
在网络游戏中,吸引用户在商城中消费是实现商业模式的重要一环,但是一些游戏的商城设计得并不合理。在《天龙八部》的元宝商店中(图2-5-17),商品分类的名字很费解,南北奇货是卖什么的?花舞人间是卖什么的?我想买一个坐骑,应该去珍兽商城吗?单个商品缺乏购买按钮,也没有网络购物中常见的购物车。在购买形象类道具之前,我想试穿一下看看效果,如何试穿?哦,要额外点击一下“试穿/骑”按钮。我是想给游戏付费的呀,为什么要这样折磨我?
图2-5-17游戏《天龙八部》的商城
作为对比,我们再看一下《冒险岛》的商城,如图2-5-18所示。清晰的商品分类,每个道具都有购买按钮,有购物车、即时试穿的功能,这些设计都是围绕着用户及其任务展开的。在设计产品的时候,我们需要给予用户醒目、清晰的指引,以帮助他们尽快地进入下一步,下一步,下一步……最终完成任务。
图2-5-18游戏《冒险岛》的商城
人的视觉是通过扫描的方式工作的,打开一个界面之后,会粗略地扫描上面的重点,比如大面积的图形、加大加黑的文字、更醒目的颜色、动态的画面等,而并不会仔仔细细地看完界面中的每个字(包括支付界面)。指引信息首先要醒目,让用户能够很容易地扫描到。比如公路上的路牌,在汽车行驶到距离岔路口一定的距离,需要判断要进入哪条路线的时候,路牌正好处于司机视线的中心区,并且面积足够大,这就是非常醒目的设计。指引信息在产品界面中所处的位置、它的尺寸(面积、体积)和它与周围环境的反差是醒目与否的决定因素。一般来说,界面的左上角(通常是眼球运动轨迹的起点)和大幅图片的周围,都是比较醒目的位置。如果指引信息是通过动画形式进入到界面中的,那么在顶部居中的位置或界面中心出现会比较醒目。
以糗事百科为例,图2-5-19是原来的设计,所有字体的颜色都差不多,投票和关注等操作并不醒目,并不便于用户进行扫描。
图2-5-19糗事百科原来的设计
图2-5-20是优化之后的设计,字体有了大小、深浅的区别,去掉了关注,增加了分享的图标,投票的可点击感更强了。
图2-5-20糗事百科优化后的设计
指引信息的尺寸越大就越醒目,这一点很容易理解,我们的眼球在扫描界面的时候总是会被大号的东西所吸引。有的时候,指引信息的位置很好、尺寸很大,却被淹没在了其他信息中,我们需要通过增加视觉对比等方法把它与其他噪声信息有效分离开,比较极端的做法是把网页变暗只点亮需要用户关注的信息(代表案例是Lightbox),在我们进行用户测试的时候发现这样做会导致一些用户恐慌,他们不清楚到底发生了什么,为什么网页变暗了,是不是出了什么问题?目前比较流行的做法是用不透明或者半透明的边框将提示信息与其他噪声信息隔离开,如图2-5-21所示。
图2-5-21将提示信息与其他噪声信息隔离开
其次,指引信息要清晰,被扫描到之后能够被用户有效理解,进而被执行。图2-5-17《天龙八部》商城中的“花舞人间”就不是一个清晰的指引信息;图2-5-18《冒险岛》商城中的道具按照“装备”、“消耗”等方式进行分类则清晰很多。在希望用户进行操作的地方,尽可能使用简短有力的暗示性措辞,比如“立即购买”、“马上加入”。
练习题
比较拍拍和淘宝的指引信息(见图2-5-22 和图2-5-23),哪个更醒目、清晰,具体在哪几点上做得更好?
图2-5-22拍拍的商品介绍界面
图2-5-23淘宝的商品介绍界面
尽可能地降低用户的学习成本
打开即会用的产品可以减少用户的思考。一个好的产品