(网经社讯)如何用最准确的媒介来清晰、直接地传达数据和其所表示的信息?Dashboard可以帮到你。
一、Dashboard的含义
早期dashboard是指汽车等产品上的信息面板,中文译名即仪表盘。
在Mac的OS系统内,dashboard是指包含各类小widget的面板。
目前我们说的dashboard承袭了仪表板的核心概念——通过图表、列表等形式,直接、高效、准确地向用户传递重要信息。
在dribble等网站上可以搜到很多作品(如下图)。不过除非是用于对外展示,否则dashboard的形式不必特别华丽。
因为对于To B用户而言,它的核心始终是传递信息。界面上的内容都应有存在的理由,一些额外的装饰可能会造成干扰。
我们要做的事情是:少做没意义的事情,多把有用的信息呈现并突显出来。
二、设计步骤
设计dashboard时,可以按照以下四项逐步推进:
2.1 用户场景
进行用户场景分析时,需要明确“用户”和“任务”“数据内容”这三个要素。
用户需要通过(监测、分析、评估)内容去完成(一些特定的)目的。
对于用户:需要了解其身份、在公司内的职位、工作内容等。
对于目的:需要弄清是什么触发了用户使用dashboard的行为?用户访问dashboard的原因是什么?为了达到目的需要以什么频率访问dashboard?
对于内容:需要明白用户使用dashboard后需要做出哪些决定?哪些关键信息辅助自己做出决定?有哪些情况需要提醒用户等。
2.2 展示形式
根据数据内容选择不同形式或形式组合,例如dashboard内常用的图表、表格或列表等。其中,图表的特点是可以方便看出趋势但是难以索引 ,表格与列表反之。
同时,并不是所有内容都要以可视化的形式展现,只可视化必要而且能迅速看出端倪的东西。
关于图表形式,印象中初中的数学课就已经介绍过,在此就不赘述了。需要特别说明几点细节问题,信息设计大牛Stephen Few在他的《information Dashboard Design》一书中有提到:
人对于面积和角度的敏感度不如对长度的感觉。饼图通常不是一个好的选择,除非很强调个体在整体中的比例,此时也可以用堆积条形图;
人对于横向长度的敏感度又高于纵向;
3D的数据图表又增加了纵深的维度会影响阅读和记忆;
要做到图表上每个像素都是有用不多余的,一般折线或柱状图已经足够用了。
2.3 数据排布
要通过对业务的了解、对用户的访谈等对界面内各项内容的重要性进行区分。用户必须看到或者必须去做的事情要放在醒目的位置,或者要给与强烈的视觉暗示,避免用户因为数据的不起眼而错过重要信息。
ToB产品内涉及的数据信息通常也很多,要对各部分内容进行有逻辑地分组。在排版上给与用户分组的暗示,让用户能更快速定位到需要的信息。(关于数据排布的部分,还会再写一篇格式塔心理学的应用~之后奉上)
2.4 交互方式
在完成以上几步后,需要根据内容细化交互方式。
例如信息关系是否有层级?如果有,那么是用什么形式去展现这个层级,下拉列表还是弹窗?还是会在图表内有进一步的交互动作(如下图)?
有哪些内容需要进行说明或者提醒?采用hover还是toast?
相似控件的交互方式是否保持一致?
……
三、小结
总而言之,dashboard是与用户进行信息展示与沟通的媒介,要用最准确的媒介来清晰、直接地传达数据和其所表示的信息。
Steven Few在书中提出,评价dashboard的好坏要看其组织是否合理、内容是否简洁、对相应用户群体或领域是否有针对性的定制化内容。我们在设计时也可以参考下这些标准。
Reference:
1. Information Dashboard Design. Stephen Few.
2. Dashboard Design 10. Mike Hughes.(来源:人人都是产品经理 文/鱼丸子 编选:电子商务研究中心)