阿里设计师:“三种方式”教你做好体验设计

阿里云交互设计专家弗凌在2017年12月20日云栖大会北京峰会上做了题为“从直觉到数据——体验设计进阶”的主题演讲。专家从直觉、经验、数据等三个角度来解释设计师应如何分析、解决问题以及如何更好的设计,并且根据阿里云云市场的实例来进行陈述。这些经验首次对外详细剖析,很有价值。
以下是视频精彩内容整理:

直觉是什么?

直觉是潜藏在人认知深处的规律,不以人的意志为转移。人的直觉中三个定律:菲茨定律,席客法则,古腾堡原理。
菲茨定律是用来预测从任意一点到目标中心位置所需时间的数学模型。揭示了用户在做操作的过程中,所消耗的时间与它操作目标的距离是成正比的,与面积是成反比的。目标越大,操作的时间越少。距离越远,消耗的时间越长。

例如图上的按键。如果拿鼠标去操作图片中的按键的话,右边会更舒服。这个现象就可以用菲茨定律来说明。
席客法则:一个人面临的选择越多的话,做出决定需要的时间就越多。

上图是遥控器发展的变迁,虽然功能很多,但是大部分功能并不会被用到,所以遥控器的功能键变得越来越少。

古腾堡原理:描述了用户习惯性的运动规律,即左上到右下的对角线扫视。这个在业界也有很多的应用,Twitter和facebook的首页都遵循这个原理。

经验从哪里?

所谓经验,就是对长期自我训练后产生的高效反应。。
一个完整的业务有四个流程:进入期,转化期,体验期,反馈期。进入期就是用户建立对产品的感性认知,包括前台直面消费者的网站和促销页。转化期就是由感性认知到购买转化,涉及注册、购买的流程和页面。体验期就是用户从购买到具体体验,包括产品的管理、后台系统。反馈期就是由体验带来的开放式反馈,主动或被动接受用户反馈系统。

这个流程是一个漏斗结构。流量通过漏斗不断往下去流,如果页面设计的不够精彩,用户在进入期就会流失。用户发现注册流程比较繁琐,购买流程有让人分心的东西,也会导致用户无法走完转化期。在体验期发现根本无法使用,也会产生用户流失。
右侧为理想中的模型:用户能走完整个流程。进入期的设计要笑脸相迎,即使用户不感冒提供的服务,但是看到笑脸,可能就会多看几眼,产生良性的点击。转化期的设计要直截了当,一切影响用户流畅操作的决策都应该被禁止。体验期的设计要如沐春风,在思考体验加分项的同时,要更加关注产品的零容忍点。
管理等待提示,对不同的等待时间设计不同的样式,用来给用户做提示。还要提高整个系统的容错性,机制上防止异常状况出现。一种常见的处理方式是如果用户出现异常,就不允许其进行下一步。如果需要用户干预,最好能提供解决方案,避免InternalError直接流出。

数据能做什么?

数据不光转化已有的方案,更能帮人突破思维惰性,发现更好的自己。人脑是会自发的形成很多定式,这样可以减少能耗,增大生存几率。设计依靠定式做久了,就会像是去磁性的指南针,产生偏差,需要数据来矫正其准确性。

基于数据驱动做设计有四个步骤:
(1)提炼数据。数据有两种组织维度:第一种是链路数据。包括镜像类目、选择版本、立即购买、支付、立即管理等所有流程;第二个就是页面数据。包括Pv,Uv,Br等。
(2)分析和诊断。先基于宏观数据去大概定位哪些页面或哪些流程出了问题,基于这些宏观的诊断,再去微观去定位问题。查看数据反馈出来的问题是什么。
(3)猜想,像侦探一样,大胆假设,小心求证。
(4)实践与验证。基于这些原因做设计的改进。最后再把数据收集回来,如果数据是正面反馈的话,证明猜测是对的,如果不是正面的反馈,说明没有找到原因,进行下一轮的迭代。

数据在在阿里云云市场中的应用
为了提升阿里云市场的流量。通过拉取最近7天的数据,转化的最高值路径和次高值路径,得到每一步的转化率。通盘来看,整个前台运营业的导流效果一般,用户只走完了只有首页和基础页面。下单和支付的流程还是比较正常,所以可能问题出现了前台。对首页数据分析发现,点击主要分布在导航和首屏区域,首屏占比超过70%,场景区占比不到10%。
首页存在着两个问题:(1)首屏和场景区之间穿插了一屏其他模块,用户需要滑动两次或三次才能看到其他场景区。(2)场景内容信息密度过小,排版机械,存在空间浪费。某些模块只有商品名称和店铺名称,缺乏运营感,可能会影响用户的点击。
解决方案:首先把首屏和场景区之间夹杂的模块砍掉,因为它们在很重要的位置,却没有产生特别重要的作用。砍掉一些点击率很低的模块,改变卡片样式,优化了每一个板块里面的图片,修改了文案。短语词语能够激发瞬时记忆,刺激浏览点击,所以把短语也加入到了卡片设计里面。使用“猜你喜欢”来黏住用户,所以将“猜你喜欢”模块放到了最下面,而且扩大了这个模块的区域。
什么时候适合做数据驱动的设计?

任何一个产品都有创始期,成长期,成熟期和衰退期。一般认为在成长期和成熟期是适合做数据驱动的。因为企业在创始期的时候,数据较少,就无法基于数据去做设计。还需要增加对数据工具的使用。阿里巴巴内部使用的工具有Udata,A加,阿拉丁等。

通过直觉解决简单的问题,通过经验解决一些基础的问题,通过数据解决一些更复杂的问题。直觉一看就能看出来,效率比较高。经验没有直觉那么快,但也是能够感知数据好不好。通过数据设计的话,就需要提取数据,分析和猜想,做方案,回收和验证,这样的效率相对低。所以设计师需要找到最优的切入点。
引擎是埋藏在设计师内心深处的一眼泉水,设计灵感和方案都是通过这样泉水源源不断的涌现到纸面,还原成优美的界面最后变成大众鼠标下的一个个按钮、链接。希望每个设计师都能够找到自己的这眼泉水,畅饮甘甜。

时间: 2024-07-29 01:37:38

阿里设计师:“三种方式”教你做好体验设计的相关文章

具体实现XML的三种方式

xml 在熟悉XML之前,我们至少应该了解一下这个技术到底是如何具体实现的.就目前的趋势来看(因为XML的有关标准改动都多达十七八次的,所以先不管它最后会怎样,先就目前的实现方式来看),要使得用户最后能够在客户端看到使用XML技术做出来的东西(如果要是用行业术语来解释的话,就是说,如何使用XSL级联样表转换XML的文档成其他的格式例如HTML.),主要有下面的三种实现手段: 1.第一种方式为:     让XML文档和与其关联的XSL级联样表同时被传送到客户端(通常使用的是浏览器),然后在客户端让

具体实现 XML 的三种方式

xml 在熟悉XML之前,我们至少应该了解一下这个技术到底是如何具体实现的.就目前的趋势来看(因为XML的有关标准改动都多达十七八次的,所以先不管它最后会怎样,先就目前的实现方式来看),要使得用户最后能够在客户端看到使用XML 技术做出来的东西(如果要是用行业术语来解释的话,就是说,如何使用XSL级联样表转换XML的文档成其他的格式例如HTML.),主要有下面的三种实现手段: 1.第一种方式为: 让XML文档和与其关联的XSL级联样表同时被传送到客户端(通常使用的是浏览器),然后在客户端让XML

天上不会掉馅饼 创业快速获风投的三种方式

不要寄托于奔波在IT会场.遇及更多的VC就能融到资金:更不要想着VC众多,东方不亮西方亮,总有一两个会看懂你的商业模式. 你所要做的,恰恰是不必去考虑VC的胃口,他们喜欢什么或者今年什么模式会很热,专注于你正在做的项目,想清楚它想透它. 只有三种方式会帮助你的网络公司快速融到资金: 第一种:先围绕你的网站主题狂做流量,把网站迅速做到ALEXA排名2000位左右,最好能更高些.注意不要做假,自欺欺人的结果只会是无始而终.在拥有了有一定的.庞大的且稳定的用户基础上进行变阵,顺势变成你千思百想出的商业

实现 Java 平台的三种方式

广泛地说,只要能执行 Java bytecode 者,就可以称为 Java 平台(Java platform).大致上,实现 Java 平台的方式有三种,分别是: Java 虚拟机器(Java Virtual Machine,JVM) Java 操作系统(Java Operating System) Java 芯片(Java Chip) 以下就此三种 Java 平台提出解说,并比较之. Java 虚拟机器 所谓的 Java 虚拟机器,指的是在操作系统上执行的一种程序,此程序可以解读 Java b

Asp.net mvc 2中使用Ajax的三种方式

在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板. 首先看一下原始的Ajax的调用的 定义CommentController,代码如下: public class CommentController : Controller { private IList<string> _comments = new List

实现Java平台的三种方式详细解析

广泛地说,只要能执行 Java bytecode 者,就可以称为 Java 平台(Java platform).大致上,实现 Java 平台的方式有三种,分别是: Java 虚拟机器(Java Virtual Machine,JVM) Java 操作系统(Java Operating System) Java 芯片(Java Chip) 以下就此三种 Java 平台提出解说,并比较之. Java 虚拟机器 所谓的 Java 虚拟机器,指的是在操作系统上执行的一种程序,此程序可以解读 Java b

WPF中实现PropertyGrid的三种方式

由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章 介绍在WPF中实现PropertyGrid的三种方式,三种方式都是俺平时使用时总结出 来的. 第一种方式:使用WindowsForm的PropertyGrid控件. 用过WPF的童鞋都晓得,可以通过WindowsFormsHost将WindowsForm的控件宿 主到WPF中使用.很简单,分为简单的3步. 第一步:引用dll:在WPF应用程序中引入System.Windows.Forms.dll. 第二步:引用命

JDBC的批处理操作三种方式

SQL批处理是JDBC性能优化的重要武器,经本人研究总结,批处理的用法有三种. package lavasoft.jdbctest; import lavasoft.common.DBToolkit; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException; import java.sql.Statement; /** * JDBC的批量操作三种方式 * * @auth

探讨JavaScript中声明全局变量三种方式的异同

     这篇文章主要介绍了JavaScript中声明全局变量三种方式的异同.变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.需要的朋友可以过来参考下,希望对大家有所帮助 变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符).   方式1   var test; var test = 5;需注意的是该句不能包含在function内,否则是局部变量.这是第一种方式声明全局变量.   方式2   test