说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

如何打动用户?携程用户体验实践分享

HTML文档下载 WORD文档下载 PDF文档下载
Web2.0时代,用户体验贯穿产品的整个环节,于细微处体现着价值,助推着商机。各企业纷纷视其为核心竞争力,纷纷展开探索与实践。本文将邀请携程专家,谈谈携程是如何打造一站式服务,打动用户的。

进入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月下半月刊,欢迎订阅。

Mozilla或许将发布iOS平台浏览器Junior Mozilla:Facebook手机将采用Firefox OS Anonymous2013年将放慢脚步,McAfee预测遭质疑 一周消息树:Facebook公布2012年Hackathon大赛顶级“黑客作品” HTML+CSS+JS 开发 Firefox OS 应用编程实战 前端开发工程师如何在2013年里提升自己 Java受Objective-C影响很大 而不是C++ Instagram回击报告指责:用户仍保持增长态势 回顾:2012年科技行业十大败笔 苹果地图入选 Amazon CEO Jeff Bezos:好年景,大挑战 2012年度盘点:移动互联网大事件回顾 详解Amazon Redshift 移动周报:再见,2012!你好,2013! 英特尔或在2月宣布其电视计划:提供分类频道 Prismatic:用机器学习分析用户兴趣只需10秒钟 谷歌布局亚太地区数据中心建设 服务响应速度有望提升30% 2013年移动互联网行业技术趋势前瞻 老骥伏枥志在千里:回顾微软这一年 2013或将崛起 水落石出:在与谷歌苹果竞购创业公司中微软胜出 用扁平化的界面设计吸引用户 2012年12月份全球主流浏览器市场份额排行榜 冲榜不一定要刷榜:增加游戏曝光度的7大杀手锏 科技vs政治:FTC对Google的反垄断调查结束背后 威胁百度:奇虎360确认将与谷歌达成合作关系 Facebook更新Messenger应用 推免费网络电话服务 网上疯传iOS7概念设计:Dashboard是真是假? 过时的UI设计 Ubuntu手机系统前途不被看好 三星将于今年发布Tizen设备 将对苹果形成威胁? 分享9条经典的编程语录 国际著名黑客大赛介绍与比较 微软Azure CDN服务全球范围内出现宕机 sQL*Plus worksheet ?请教错误问题! 求教:有恶意用户登录BBS,想踢出该用户,如何操作? 使用axWebBrowser浏览网页的问题 如何把资源流对象(ResourceStream)转换成字符串(AnsiString)? 静态网页内怎样使网页指向到另一个网页? 我的PB是从微软的网站上面DownLoad下来的 学together吧,他比Rose好,borland确实有活力,学together的几大理由!!!!!! 制作在线人员的问题~ 破解后的activereport用vb编的报表程序打包后用在别的机器上还用破解吗? 请问:在VC++.net中能不能编译C++源程序? 说一句你现在最想说的一句真话。 没有菜单和导航栏、地址栏的web页怎么做 问一个小儿科的问题,怎么在Apache中新建一个虚拟目录? quickreport小問題 MFC兼容STL吗? 怎样取出Crystal Repeat for .net的字段? excel报表显示问题 ,请帮帮忙 请问那里有关于IBM LOTUS DOMINO R5 的电子书?? SQL的数据类型转化 DevExpress QuantumGrid动态分组后如何动态取消分组? 帮忙写到题 简单问题,新手请教! 把ChildForm做成DLL形式,用MDIFORM去调用,为什么CHILDFORM中的SPEEDBUTTON的FLAT设置为TRUE没效果 如何在一个字符串中插入“”即双引号啊 今天我终于牵到她的手啦!!开心... 高手指教:怎样移动Line控件,line有没有句柄呢? 关于邮件迁移,求救!! 关于我的笔记本风扇,不知道问题出在哪里 我用masm32的qeditor,但无法运行代码(没反映)? 我想做一个新闻发布系统 请问在VB里面怎么调用水晶报表,报表我已经做好了。 十万火急!请教高手! 系统反复重启,给100分,急等解决? 不知道一个程序的名字,知道它的文件名和路径,如何在例程中关闭程序 200分高送!如何往数据库中读取下列的数据,特别是中间有的数据为空!! 如何将MDI主窗体变为普通窗体?急!! 兄弟最近开发出一套工程机械的管理软件,不知叫什么名字好,请大家帮忙起个名,近来者有分(谢绝废话) 如何将Dbmemo植入Dbgrid中? 2个关于Oracle数据库表的管理的问题 cgi 无法添入购物车 在线等待高分求救 有关treeview的小问题---在线等待 如何运行Select的OnChange? 关于时间的问题。 寻觅vb高手,平时学习的时候,可以问问问题!当然,给分的。谢谢 兄弟最近开发出一套工程机械的管理软件,不知叫什么名字好,请大家帮忙起个名,近来者有分(谢绝废话) 200分求助!! 关于时间的问题。 问题急,谢谢! 小小算法,请教各位!(100分) ORACLE的DATE数据类型怎样使用? 一个等腰三角形的周长是32cm,一条腰长10 cm,底边上的高是8cm,它的面积是( )cm2. 已知等腰三角形ABC中,BD等于8CM,其周长32CM,D是三角形的角分线,求三角形的面积?AD是三角形的角分线 |a|=1,|b|=2,c=a+b,且c垂直a则向量a和b的夹角是?a,b,c均为向量 一片漆黑和山上一个泰字的成语 有关春天花的作文 带万的成语有哪些 好字底下 放一个心念什么? 抗震救灾的成语 太宗论盗 译文原文现在就用呢 成语:万什么万什么 王熙凤的外貌描写(原文词句) 太宗论盗的译文是什么?上(唐太宗)与群臣论止盗,或请重法以禁止,上哂(讥笑)之曰:"民之所以为盗者,由赋繁役重,官吏贪求,饥寒切(逼迫)身,顾不暇顾廉耻耳.朕当去奢省费,轻徭薄赋,选用廉吏,使 青的成语有哪些 王熙凤弄权简介? 描写512抗震救灾情景的成语 矿粒在介质中沉降时受几个力的作用? 王熙凤的事例 请帮我把”猪头敏“设计成个性繁体字, 磁屏蔽材料和磁铁之间有没有力的作用?有没有既可以住挡磁场和磁力也不会和磁铁相吸的材料 ?请知道的朋友 帮忙说说 小弟先谢谢啦 王熙凤毒设什么 弄权什么 逼死什么 破坏什么 上面一个斌字 下面一个贝 是什么字 5笔怎么打 谁知道左边一个王字旁右边一个尿字念什么呀? 上面一个式 下面一个心什么字 猪头繁体字怎么写? 北斗星最古老的叫法是什么? 带乐的成语有哪些 万年历为什么通电后数字一会灭一会亮还报时 口+尿念什么如果能打出来请发给我, 带乐的成语 带乐的成语有哪些 对于北斗七星,下列说法正确的是() A.它们都是能自己发光的恒星 B.它们离地球的距离相同 C.它们的体积相对于北斗七星,下列说法正确的是() A.它们都是能自己发光的恒星 B.它们离地球 带乐的成语有什么 “斌”下加一个“贝”怎么用五笔打出来?希望有具体步骤. 中国古代星象,北斗的第一颗星,既叫贪狼又叫天枢.为什么会有两种叫法?分别是什么样的人(或历法)规定的这两种不同的称呼方式呢? 给我几篇作文参考 一枚邮票的 提示:一滴水可以映出太阳的光辉,一枚邮票可以反映一个领域的天地.电与我们的生活可谓息息相关,一枚关于“电”的邮票承载着太多的蕴含与遐想.请围绕电 带乐带乐的成语有哪些 左边一个月右边一个会念什么?在18:30前给我答案 找几篇好的物理小论文参考.利用超声技术已开发出不少家电产品,如超声波洗衣机、超声波洗碗机等.次声波有什麼用途呢?写一篇''超声技术与家电''或''次声波应用''的小论文.要有探究实验等 带乐的成语有哪些成语 指某件事太吻合了挑不出毛病怎样用成语表示 各位能帮我写几篇作文吗?让我参考参考,要写景的作文,写人的作文,写物的作文,想象作文,科幻作文.写景的要2篇,写人的要2篇,写物的要一篇,想象作文1篇,科幻作文1篇要求:要自编(或真人真 顶泰的成语 表示 好的不能再好了,没什么毛病可挑 成语 我的回答里面状态栏问号和绿钩是什么意思? 泰顶组成的成语 我有件深绿的T恤和黄色长裤,搭配好不好看啊?PS:我是男生 巧填成语关于抗震救灾四川.灾情就是命令,党.温家宝总理( ),亲赴灾区,慰问灾民.人民子弟兵数十万大军( ),从空中.向灾区集结.医院,献血的人( ),单位,捐款的人( ).海外,华人华侨也纷纷( ),献爱 有顶泰两字成语 3个百和6个十合起来是( )书上的答案是:三百六十.练习中也有是:360.到底是填数字还是汉字呢?是都可以么? 小学三年级学过什么几何图形? 泰与顶的组合打一个成语 向量,第六题 我往哪看可以看到北斗七星? 95*55的北极星万年历是多少瓦 第四题 一个等腰三角形的周长是32cm,底边上的高为8cm,求这个三角形各边的长 北极星数码万年历怎样关闭声音 向量题,第六题, 北斗七星是在南半球还是在北半球 一个银字旁,一个山,一个己是什么读 美国海军世界最大驱逐舰下水【高清组图阿根廷法院支持政府打破媒体垄断迪拜宣布禁放孔明灯巴黎中国电影节开幕首条横跨欧亚海底隧道启用 伦敦坐火车范长龙会见马来西亚国防部长强风暴致荷兰人损失近亿欧元巴西拟立法强制跨国网络巨头建立本土数强风暴袭击荷兰致损近亿欧元“丝绸之路经济带——区域合作的愿景”《中国好声音》电影版海报曝光 吴莫愁南京前三季度交通通信人均支出2886国信办主任:“六个目标”让网络空间清国家林业局:严格限制占用生态脆弱地区江西一教师为讨960元代课费跑15年南京一动物园招聘引热议 饲养员要求研六旬老人数年独自将毛坯路修成石子路 银行综合理财能力排名发布 光大银行连南京空气质量污染持续 昨日成10月最江苏将建设师德监督机制 坚决实行“一美工程师为圆梦转行专演死尸【组图】对美国人权审查报告一幅画值11亿?监管不到位 拍卖背后坚持高标准严要求再接再厉确保中博会安中国退役士兵就业创业服务促进会湖北办鄂豫携手开发唐河白河跨省航道图文:埃及前总统穆尔西被判处死刑汉海集团专场推介太原市24个棚改项目社会各界深情缅怀张自忠将军鄂北调水工程PCCP管试制成功中印企业签220亿美元合作协议利川吆喝川盐古道文化旅游项目图文:机关事业单位4000万人将涨工图文:观众体验4D游戏远安警方安全转移群众132人3部鄂产动漫亮相文博会李克强会见美国国务卿克里波士顿马拉松爆炸案嫌犯获死刑联合国通过对美国人权审查报告勇做“三严三实”的自觉践行者省红十字青少年春蕾志愿服务队成立图文:留学生端出60多国美食
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘