阅读更多
进入Web2.0时代以来,用户体验(User Experience)逐渐在互联网站实践中被发掘、提炼和延展,它贯穿产品的整个环节,于细微处体现着价值,助推着商机,在企业快速成长的征途中将成为核心竞争力之一。伴随这一趋势,可用性、易用性、转化率、用户研究、交互设计、视觉设计、前端开发……新概念不断进入我们的视野。本文将从概念、衡量标准、流程把控出发,并结合具体应用实践,分享携程在用户体验领域中的探索。

什么是好的用户体验?

把出品iPhone的苹果和海底捞之间连根线,你会想到什么?

苹果推崇简单易用,产品设计时就专注于顾客的想法和需求,用户往往只需按一个键,就可以完成想要实现的功能。原本并非手机巨头的苹果,将这一理念带入手机设计,从iPod、iPhone到iPad,一键通行,即使儿童操作起来都毫无障碍。出众的用户体验获得消费者追捧,迅速赢得市场优势。而海底捞则践行“以提升用户体验打开市场”的理念,令员工以全心全意的极致服务来征服顾客的心。

一个久负盛名的高科技企业,一个服务见长的餐饮新贵,看似互不相干,却有着同样的核心竞争力——用户体验(User Experience)。

在强调以人为本、以用户为中心的今天,用户体验被称做创新2.0模式的精髓。它直接决定了用户对企业的整体印象,界定了企业和竞争对手的差异。在同等条件下,好的用户体验会使产品赢得竞争优势。尤其当市场趋于“同质化”,同类型产品竞争日益激烈,用户体验显得愈发重要。

ISO标准将用户体验定义为“人们对于使用或期望使用的产品、系统及服务的认知印象和回应”。通俗讲,就是产品好不好用,用起来方不方便,下次还愿不愿意再来(12306也许是个反面典型)。

什么是好的用户体验?想象你逛进一家超市,印刷精美的促销目录即时派送给你,清晰明确的导航指示让你很快找到商品区域,排列有层次的商品不致让你陷入太多选择的纠结,商品说明、点评、标价、折扣信息简约全面,重点突出还能排序对比,你不费太多力气就找到心仪的物品放进购物车。此时,相关商品的推荐适时出现,而且正合你的需求,购物清单很快勾满。你推着购物车来到结账处,没有排队还支持各种支付,这样的购物体验,值得点赞吧。

同样的经验,我们也希望出现在携程的网站。并且,访客自登录进入网站起,便仿佛有高级客服相伴,他会收到根据个人信息为他定制的产品信息;简约大气的页面伴随条理明晰的目录分类,用户搜索浏览一路快捷畅通;填写订单时存于网站的个人资料自动填入而无须再费周折。快速的响应、精准的推荐、靠谱的承诺、搜索无结果时贴心周到地给出备选方案……在精心设计规划的虚拟超市里,用户所做的,只是舒适地浏览—选择—下单,省心省力。在线预订过程不再是带着压力的任务,而成为一种享受,一种愉悦的经验。

所有这一切,都源于以用户为中心的用户体验设计 (User Experience Design)。设计的全过程中,产品经理会专注于战略层次(Strategy)明确用户需求和产品目标,在范围层次(Scope)确立网站功能,把握方向。而UED设计中心则会用巧思创意和缜密逻辑,在结构层(Structure)展示网站的具体架构,在框架层(Skeleton)优化页面的设计布局,最终在表现层 (Surface)呈现出面对用户的网页图文,和给用户带来直观体验的交互效果——通俗来讲,产品经理界定“有什么”,交互设计确定“怎么使用”,而视觉设计决定“看起来如何”。

良好的用户体验是各团队共同努力的结果,上线的页面往往都经过反复推敲和优化,集纳了社会学、人类学、心理学、设计学、美学、IT各种知识并平衡于商业考量。页面的改进并不限于外观,统计数据会说话,从不断提升的访问量、订单转化率和用户忠诚度上,用户体验的价值终会让你看到。

如何让用户对产品“一见钟情”?

在携程,客户服务是核心优势。从登上携程页面,到下达订单,再到走完行程感受携程的服务,用户体验随时相伴。单说线上,如何通过文字、图片和潜藏其下的各种逻辑、各种交互行为的运用,让万千访客对携程产品“一见钟情”,UED用户体验设计就承载了这样的任务。

产品的IDEA来源于产品经理,他们会根据用户需求和市场研究,定义出产品的目标、功能和范围,并付诸于具体的产品需求文档。

进入设计阶段,设计师们首先要理解、分析用户的需求,以他们的眼光重新审视,比如将人物角色(Persona)提取到情景(Scenario)中,通过想象用户会有何种购买经历来描述用户需求的完成过程。

现有产品分析也是这一阶段的任务。用研团队通过眼动测试、用户可用性测试和满意度问卷调查这些科学客观的方法,评估设计原型(即设计稿)和需要验证的设计原则,令设计更有的放矢,也能在原型完成后组织用户测试,验证设计使之更臻完善。竞品分析,则是实践“知己知彼”的古训,紧跟市场需求,关注对手动向,科学分析而非盲目跟风。

理清需求后,交互设计师开始进入概念设计,他们将依序规划出产品的工作流程(Workflow)、信息架构和网页布局。在获得需求方认可后的详细设计阶段,UI设计师要为网页上各个元素做出界面和交互设计。具体到一个“提交订单”功能,是否用按钮来完成、按钮何处摆放、按钮的大小层级、鼠标移上去及按下后的变化效果、按下按钮后的成功失败反馈、用户后续操作的提示信息……所有这些用户下单时可能发生的行为,以及系统如何配合响应,事无巨细,交互设计师都要考虑周到。

交互设计完成的将是着重信息元素组织及概念模型搭建的低保真原型,视觉设计师将用他们的创意将之转换成高保真原型(顾名思义,高保真在观感上已十分接近最终的网页)。视觉设计同样历经研究分析、设计草案、视觉提案与定稿完善等阶段,设计师们通过构思创意、多方案对比、配色表现和细节深入,将内容、功能和美学汇集在一起,以专业而有魅力的视觉展示为网页赢得注目。

网页空间寸土寸金,文字内容需符合互联网的扫视习惯,能引领视线,突出符合用户期望且有价值的信息,促进购买。同时需符合语言使用规范,符合法律法规,避免风险。

文案团队会在此时登场,对原型中的文字推敲斟酌,做出优化修改。文案质量关乎公司形象和专业水准,更重要的是能确保用户无障碍、准确、快速地接受产品需要传达的信息,甚至在字里行间感受到携程对用户的尊重与热情。比如,用户选择和预订时,行文给予正面鼓励,完成订单时加以祝贺;而因携程原因遇到客房已订完等状况,则需在结果页使用抱歉提示,并提供其他解决方案。

如果将交互设计比作建筑领域的方案设计、技术设计和施工图绘制,那视觉设计更像经修饰、渲染后模拟出效果图。而样板房的构建,就有赖于前端开发的工程师了。

他们根据设计稿,用HTML完成静态页面制作并用CSS提炼出统一规格的样式表,实现交互效果为动态JS做好铺垫。在此基础上,维护完成页面并对网站前端性能不断优化。在他们手中,高保真原型真正转化成了网页,可交付后续的开发环节。

打动用户,携程是如何做到的?

上文主要介绍了用户体验应遵循的基本流程及设计原则,接下来将结合旅行日程移动应用的设计过程,重点谈谈携程是如何抓住用户核心需求,突破原有局限,为用户提供旅游一站式服务的。

旅行日程通过整合用户订单中的行程信息,可为用户提供统一的行程管理。用户在完成预订后,可在应用上查看出行的整个活动,如飞机出发时间、是否延误、到达目的地要不要接机、怎样去酒店等相关问题。这改变了传统旅游订单管理仅为完成信息确认而简单罗列订单信息的单一功能,延长了与用户交互时间,覆盖了整个出行行程,服务更完善、更贴心。



图1 旅行日程展示方便用户随时获取行程信息


该应用的设计初期,面临的挑战是如何抽取和呈现一张旅游订单所包含的关键出行信息,同时需要能符合手机这一移动设备场景的使用习惯,方便用户能最有效地获取当前所需行程信息。经过团队成员之间的研究,最后选择了动态卡片这一形式,其优点在于对信息的收敛性,能让用户感知到一张行程卡片就是在说一件事情,也正是这种特性,促使设计能够真正从出行的使用场景出发,对展示信息作出正确的取舍。

举例来说,旅行日程的机票卡片,在乘机前几天着重展示时间和航站楼信息,而临近起飞,则着重展示航班动态、值机和登机口信息。若它们变更了,会及时通知用户。而到飞机到达时,又会着重展示行李信息。这种动态的卡片设计,保证了在方寸之地,用户看到的都是和当前场景相符的重要信息。



图2  根据当前场景推送用户所需服务


2014年年中,在旅行日程上线半年后,旅行日程的产品方向要往一站式服务更进一步,然而原有的设计框架已经无法承载。比如用户想从一个景点,游玩其他通勤方便的景点,再比如到了三亚酒店,用户想在那里租车自由行,甚至发现因为是通过携程预订的酒店,租车能更便宜。这时的设计挑战是既要保证原有轻而美的体验,又能开辟出一块面向用户行程中服务的设计。

我们尝试了延展设计。


图3  延展设计让卡片承载更多服务内容


当然,延展必定意味着更多页面。但我们不想打断用户操作,要让用户感到虽然它功能全新了,但页面间,逻辑、操作,以及信息的前后承接比过去更加流畅。我们通过减少卡片的非必要操作,暗示用户可以触摸卡片获得更多与其相关的信息,同时,配合动效,使用户感知如何方便地回到主页面。

新的延展性设计正式亮相后,得到了很多正面反馈。通过前后的动效以及信息的延展让用户意识到整个卡片的延展,同时通过非常自然的手势快速回到主页面。以机票场景为例,当我已经知晓了起飞时间以及值机完成后,想了解机场的具体位置,会自然而然地去触摸卡片本身了解是否有更多有价值信息,接下来出现的更多补充信息会让人意识到这就是延展以及更多帮助信息。这时我们还可以推送有效的机场中或者周边服务,帮助用户的同时也能提高自身的转化。

凭借独特的设计理念和卡片展现形式,旅行日程已成为整个携程App的大入口,活跃用户获得了数十倍的增长,也吸引了其他OTA的跟进效访。在未来的时间里,旅行日程仍会坚持向一站式服务更进一步。

结语

将用户置于核心,用爱和专业悉心浇注产品,是企业产品设计整个流程的指向标。同时遵循基本设计流程,一环一环紧密配合、快速迭代,用户体验设计才能运转若行云流水。

作者简介

林传毅,现任携程酒店研发部设计专家,客栈通产品主设计师,曾是解放日报社编辑和柯达PDC产品可用性专家、记录生命网创始人。

花知鸣,现任携程攻略社区设计专家,曾是今夜酒店特价首席产品设计师,MSN购物首席交互设计师,携程无线事业部设计专家。

本文来自:程序员电子版2015年3月下半月刊,欢迎订阅。
  • 大小: 91 KB
  • 大小: 110.7 KB
  • 大小: 384.6 KB
来自: 程序员电子版
0
1
评论 共 2 条 请登录后发表评论
2 楼 shuhen2011 2015-05-07 13:53
我只记得有一次携程做青岛世博会1元特价票的活动,我和对象都注册、安装携程的app,后来才发现被忽悠了,从此对这东西就没好印象
1 楼 houyujiangjun 2015-04-10 08:40
说的就像携程做的很好似的...

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 各种EJB之间的调用示例

    各种EJB之间的调用源码示例,用远程接口的引用访问EJB、函数将被FirstEJB调用,同时它将调用secondEJB

  • EJB调用机制

    由于EJB的调用过程对于开发者来说是透明的,以至于我们错误地认为lookup()方法返回的对象就是Bean实例。实际上,客户端与Session Bean交互,客户端并不直接与Bean实例打交道,而是客户端通过Bean的远程或本地接口。当调用远程或本地接口的方法时,接口使用的是存根(stub)对象。该存根实现了Session Bean的远程或本地接口。它负责将方法调用经过网络发送到远

  • EJB调用过程

    ① 客户端程序使用lookup方法查找JNDI ②EJB服务器的JDNI服务根据事先登录的信息匹配lookup查询内容,生成Home实例 ③客户端得到对Home实例的引用 ④客户端调用Home.create方法(生成EJB对象) ⑤创建相对应的Bean实例,调用Bean的ejbCreate方法 ⑥生成相对应的Remote Ojbect实例 ⑦客户端得到对Remote Ojbect实例的引用 ⑧客户

  • EJB对象的部署及客户端调用简单示例

    一,EJB对象的写法及部署 1,新建一个EJB Project,在包里加入接口及实现类: 实现类通常以Bean结尾,并且通过注解方式指定EJB类型: 之后,部署到JBoss服务器上。 二,客户端调用 1,将EJB项目中的接口类打包,并把这...

  • EJB到底是什么,真的那么神秘吗??

    3.5.2 我们不禁要问,什么是"服务集群"?什么是"企业级开发"?既然说了EJB 是为了"服务集群"和"企业级开发",那么,总得说说什么是所谓的"服务集群"和"企业级开发"吧!这个问题其实挺关键的,因为J2EE 中并没有说明白,也没有具体的指标或者事例告诉广大程序员什么时候用EJB 什么时候不用。于是大家都产生一些联想,认为EJB"分布式运算"指得是"负载均衡"提高系统的运行效率。然而,估计很多人都搞错了,这个"服务群集"和"分布式运算"并没有根本解决运行负载的问题,尤其是针对数据库的应用系统。为什么?我

  • EJB3.0学习笔记---多接口的时,实现类处理方法:

    EJB学习笔记--- 1.胖客户端:指的是定义的接口太多了,接口做的工作太多; 胖接口: 2.EJB实现类型的定义,用注解的方式,当一个EJBbean,实现了多个接口的时候, 需要用注解的方式指明哪一个接口是用Remote方式访问,哪一个接口使用 local方式访问 3.实现多个接口的情况下定义,访问方式: 有三种: a.第一种:在接口的实现类中: @Remote(value...

  • java访问远程ejb_EJB远程接口调用

    一.EJB简介EJB是sun的JavaEE服务器端组件模型,设计目标与核心应用是部署分布式应用程序。简单来说就是把已经编写好的程序(即:类)打包放在服务器上执行。凭借java跨平台的优势,用EJB技术部署的分布式系统可以不限于特定的平台。EJB (EnterpriseJavaBean)是J2EE(javaEE)的一部分,定义了一个用于开发基于组件的企业多重应用程序的标准。其特点包括网络服务支持和...

  • EJB的home接口

    EJB涉及两个接口,Home接口(扩展自EJBHome)和组件业务接口(扩展自EJBObject),这两个接口都是远程接口,但还有两个对应的本地接口EJBLocalHome和EJBLocalObject接口。  客户有一个目标,就是在bean上调用一个业务方法!!  客户想得到的是bean的一个引用,但是最多只能得到bean的组件接口的一个引用(即EJB对象)的一个引用。如果想得到一个EJ

  • 对EJB的4种Bean的理解

    本文素材来自网络,总结了一下,以备查询。 1.Stateful session Bean (有状态会话Bean) 有状态会话Bean实例有三种状态,不存在,就绪,和钝化。 客户端调用home接口的create 方法,ejb容器实例化一个Bean并调用setSesssionContext,ejbCreate方法,使得Bean处于就绪状态。然后客户就可以使用其商业方法了。ejb容器对Bean

  • springcloud之Robbin设计原理(转载)

    springcloud之Robbin设计原理

  • 客户端使用EJB

    客户端使用EJB类似.NET中的webservice的调用。 先来大致了解一下EJB: ejb容器管理的标准基础设施服务表包括:分布式事务、安全、并发、持久性、资源池和缓冲、接口、负载均衡、容错管理。 EJB规范中有四种对象类型:无状态会话、有状态、实体、消息驱动bean。 这里用一个无状态的会话bean做为例子,学习客户端调用服务端EJB的方法。 RMI远程调用的过程机理如下图:

  • 简述Ribbon的原理

    1.Ribbon的大体流程 一般我们在使用SpringCloud框架的时候并不知道Ribbon是怎么使用的,那么如果我们想要去研究它,应该从什么地方入手呢? 如果在没有使用Feign调用接口的时候,我们肯定会选择RestTemplate来调用,Ribbon给提供了一个负载均衡的一个标注@LoadBalanced,可以加在RestTemplate上,这个就是我们接下来要看Ribbon的入口了。 @LoadBalanced底层其实就是个拦截器,拦截了所有的RestTemplate调用的接口,在通过调用的.

  • 远程调用原理与对比RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB

    在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是些什么关系呢,它们背后到底是基于什么原理实现的呢,了解这些是实现分布式服务框架的基础知识,而如果在性能上有高的要求的话,那深入了解这些技术背后的机制就是必须的了,在这篇 blog中我们将

  • 【EJB基础】远程调用和本地调用

    本篇博客讲解一下远程调用和本地调用。首先要先了解一下几组概念。   远程客户端和本地客户端 远程客户端:客户端与其调用的JEB对象不再同一个JVM进程中。为了创建一个能够被远程访问的企业Bean,你必须用@Remote注解来定义这些Bean。 本地客户端:客户端与其调用的EJB对象在同一个JVM进程中。为了创建一个能够被本地访问的企业Bean,你必须用@Local注解来定义这些Bean。

  • 【EJB系列】(二)——JBOSS7中EJB的远程调用和本地调用

    导读   因为JBOSS6,7版本在EJB的本地调用和远程调用的写法上不同于之前的版本。所以在本篇文章中将给出代码实例,仅供参考。 环境 MyEclipse10 JBOSS7 理论知识远程调用(Remote Access)过程远程客户端 运行在跟EJB不同的机器或不同的JVM进程上 它可以是Web组件(如:JSP、Servlet)、应用客户端或其他的EJB 对客户端来说

  • EJB的Remote访问方式和Local访问方式

    在EJB编程中可以将EJB发布成远程的访问方式和本地的访问方式,那么什么是本地访问方式,什么又是远程访问方式?准确的来讲,区分本地还是远程关键要看EJB和客户端是否在同一个JVM中。如果我们的ejb和客户端同时部署在这个jvm中,当客户端访问ejb的时候我们就认为是本地访问,否则则是远程访问。那么远程访问和本地访问有什么区别呢? 首先第一点来讲本地访问和远程访问在性能上是有很大的差别的,本地方式

  • Ejb远程调用-jboss服务器调用服务器-Bean调用Bean

    今后新线的开发和现有系统的注意事项 1:现有已经开发好的线,如果是增删改是调用其他系统的,而现在是在Controller调用的,是不受EJB分布式事务(JTA)控制的,会出现数据的不准确性,所以为了提高数据的正确性,大家需要把此种方法的调用在自己的Bean的实现里面调用 2:系统内部有把其他Core打包到自己的ear里面,不利于后期的维护 3:远程调用的用户名和密码以前咱们都是在xml里面,等项目开发部署后如果改变服务器不利于项目的迁移 4:分布式事务的解决 总结 我们四个小伙伴整

  • 客服端调用EJB对象的几个基本步骤

    (1)设置JNDI服务工厂以及JNDI服务地址系统属性,初始化InitialContext。 (2)调用lookup()方法查找查找Home接口,从Home接口调用Create方法创建Remote或local接口 (3)调用remote或local接口的业务方法

  • EJB---->调用存储过程

    要调用存储过程,我们可以通过EntityManager 对象的createNativeQuery()方法执行SQL 语句(注意:这里说的是SQL 语句,不是EJB3 QL), 调用存储过程的SQL 格式如下: {call 存储过程名称(参数1, 参数2, … )} 在EJB3 中你可以调用的存储过程有两种 1.无返回值的存储过程。 2.返回值为ResultSet(以select 形式返回的...

Global site tag (gtag.js) - Google Analytics