通过产品设计提升界面使用效率的个人经验

封面pid=69249584

这次突然想写写关于面向高效率交互的界面设计的一些个人观点。系统化的高效率界面设计思路可能不是一篇博文就可以概括的,这种小小的个人经验还是可以说说的。那么开始吧~

从文本开始,学习西方先进的字幕经验

设计界面时,除非对于自己的图形化设计有非一般的自信(比如google,特指google mail使用了完全的图形语言来展示工具栏),否则不可避免的需要使用文字来进行注释说明。这些文字会出现在诸如页头、表单、提示等等位置,在产品设计上文本几乎无处不在。文本本身自然而然的成为了优化的首选对象。

在电影和电视行业中,字幕已经有了相对通用标准(推荐阅读:BBCNexflix的字幕准则)。他们使用足够大的字号,字体清晰,分行利落。相比之下应用界面所使用的样式就参差不一,可能会出现小到无法辨认的字号,花枝招展的字体,以及对比颜色的滥用。

字幕的样式标准在界面设计上同样可用,我们需要让文字足够大,清晰。对功能性文本使用通用的无衬线的印刷字体,而非海报或艺术字体。这些小细节都会让文本更加易读,从而提升界面的使用效率。

 

阅读UI,排版合理性一跃而出

设计界面时,我们除了需要强调重要信息,弱化次要信息以外。界面元素的排版顺序的合理性也会影响着用户的使用效率。这里我通常会使用一种叫做“阅读UI”的思路来测试排版的合理性。那么“阅读UI”具体应该怎么做呢?我们就以微博举例。

我们将微博博文的各个原文当做一个句子的主语宾语(动名词),用自上至下,自左至右的顺序将所有元素拼成一个句子(如下图)。

正常来说,我们可以很容易的通过补充介词助词将其还原成一个完整的句子。如果说我们消费的介词助词或者补充说明用语越多,拼合成句消费的时间过长或者拼合时产生了明显的语病。那么这个排版就可能存在不合理的地方。

通过这样的方法,我们可以简单的验证排版的合理性。将界面元素合理安排会降低阅读时的思考成本,使用效率自然也会得到提高。

思考和预测视觉焦点移动的轨道,为用户而加速

举个最简单的例子:在阅读这篇文章时你应该已经发现了,我的博客本身是一个流式网格设计。可是正文部分宽度却只有700像素左右。这并不是故意为了留白好看而这样设计的。

用户阅读长文本遇到换行时,每换一行所带来的眼动成本是可以被预测的。过长的行宽除了会带来阅读疲劳感以外,换行时视觉焦点移动的时间越长,用户可能遗忘上一行的内容就会越多。如此反复下来阅读的效率就会越来越低。

我们再回过头来看看现代报刊杂志的文本排版,大体都会把一行内的字数控制在20个汉字左右,这其实也和刚才上文所提到的字幕规范不谋而合(BBC字幕规范要求一条字幕需要控制在40个等宽字符之间,这相当于20个汉字)。

看完对换行的眼动成本思考,想必你已经能够对预测眼动这个思路拥有最初步的认识了。也许之后下一次使用别人家的产品时,你的脑内就会预测生成出用户使用时的眼动路径了(实在无法做到的话就买个眼动仪吧,推荐Tobii Eye Tracker 4C)。

获知了用户了的眼动路径后,产品设计需要做的无非只有两件事。其一,是缩短用户使用时产生的路径长度和路径停顿点数量,这样可以减少整体的页面检索成本。其二,便是在用户的眼动路径中,合理的放置用户可能所需要的信息或功能。这样可以使得便已有操作目的的用户,可以更有效率的使用你的界面。

 

结语

界面本身的设计优化在我看来是非常吃经验的一个工作。除了需要见多识广以外,还要在设计中注入自己对于用户行为的思考。一味的借鉴同行的产品设计,最终也只能抄来皮囊,抄不走灵魂。

Comment

There is no comment on this post. Be the first one.

Leave a comment