如何打造极致用户体验

积少成多的细致用户体验才能打造颠覆性的产品,颠覆性产品不是一日而成,本文主要帮助大家深入思考用户体验。在移动app产品设计中我们追求2秒定律。即2秒内打开app就让用户知道它是谁?它能做什么。而这些设计中的疑问汇总到一起,就是产品的极致体验都来源一个考量指标:用户感知度。

如何打造极致用户体验

积少成多的细致用户体验才能打造颠覆性的产品,颠覆性产品不是一日而成,本文主要帮助大家深入思考用户体验。在移动app产品设计中我们追求2秒定律。即2秒内打开app就让用户知道它是谁?它能做什么。而这些设计中的疑问汇总到一起,就是产品的极致体验都来源一个考量指标:用户感知度。

首先、来看用户体验最主要的指标就是用户感知度。用户感知度越高,产品体验越高。用户感知度分为这样五个维度:

  1. 视觉:即是用户所看见产品。
  2. 触觉:产品人机交互的过程。
  3. 感觉:对产品的满意程度,所使用的服务是否让用户感觉到极致的快感。
  4. 逻辑:逻辑上是否用户习惯,是不是下个页面是用户能预测到的。
  5. 黏度:用户使用第一次后,用户是不是会再回来使用你的产品。

以上五个维度作为最主要判别指标。

获得指标后,我们先对自己的知识体系进行完善。以下三本书是产品设计中的良作,如果没有阅读过,那么后文对你帮助可能不是很大。

  • 《用户体验的五要素》:表现层、框架层、结构层、范围层、战略层。
  • 《简约至上》交互式设计四策略:删除、组织、影藏、转移。
  • 《不要让我思考》:广告设计的101法则、省略不必要的字、可用性测试。

然后,在设计产品时候先要学会多问自己这些问题?

  • 哪些的用户在使用我们的产品?(Who)
  • 用户最想要看到什么内容?(What)
  • 用户为什么要看这些内容?(Why)
  • 用户什么时候使用我们的产品?(When)
  • 用户在会在哪里使用我们的产品?(where)
  • 用户怎么使用我们的产品?(How)

以上5W1H需要在做产品设计的时候牢记,并且产品设计中时刻贯穿。

一、整体颜色一致性

app从下载完成开始从图标进入后,图标的确定就是对主色调的确定,也是对app内容的主色调确定。app色调在选择上也是十分有讲究的。电商app颜色选择上,多为红色(橘色)。红色主要能引起人的购买欲望。黑色也是电商的主要选择,那是因为黑色具有高贵神秘感,多为奢侈品电商app使用的主色调。比如蓝色具有自由感觉,适合旅游的app。又比如绿色更多都是社交IM产品使用。虽然颜色上也有会出入的,但总体的设计理念不会改变。当从点击app开始到进入app主界面后,整体色调要给人一种过渡和谐的感觉。所以这是我们所要说的颜色一致性。淘宝、京东在app图标和进入后主界面的主色调保持一致,就是为了这种过渡和谐的感觉。这种整体颜色感官体验大大增加用户的好感度。

二、全部结构整洁性

app整体在结构上保持视觉上整洁性。往往我们在浏览app时候,都会觉得电商或者O2O的首页整洁性比较差。因为业务承载量太大,所以无法保持绝对意义上的整洁。而电商首页设计遵循一定的规则,参考我以前写的移动端电商类页面设计说》文章,本人公众号第43篇。这一设计规则保障电商类app在设计上保持了一定的整洁度。整洁度并不是在一定程度上保持过分的简单,过分的简单可以保持app整洁度,但不能承载业务。所以在产品设计上,整洁度一定是在允许合理范围之内的。比如:微信的发现功能页面。它将朋友圈为一列,将扫一扫和摇一摇作为一列,附近的人和漂流瓶作为一列,购物和游戏作为一列。这是在展示上有一定整洁性,帮助用户快速找到想要的功能。假设这里只是单纯的list页面排序下来,没有这样的区别,那用户的感受会十分糟糕。所以结构整洁性是为了保障了用户操作的便利性。

三、首页展示内容完整性

保证了整洁性的基础上,才能保障展示首页内容完整性的前提。作为app首页,你最需要展示给的用户是你最优质的内容(服务或商品、每个类别app不同)业务。而这个内容是你用户最大的痛点需求,这个痛点需求能牢牢地抓住用户心理。即可以达到2秒时间便可以留下来使用app。至于内容完整性,因为基于移动端屏幕小的关系,电商和O2O类产品多半会用Icon作为品类选择。虽然增加的用户路径,但保证了用户在首屏便能快速了解整体所有业务。而音乐类产品会把最主要的播放器的放在底部,一个是为了功能的快速播放,另一点也是内容完整性展示,如果将播放器移除首页,后果也不堪设想。包括新闻类app将所有的分类至于顶部,也是一种业务层面上的展示完整性的选择。首页内容展示完整性,保障了所有业务能最快速的触达用户内心。用户便留下了你app所能起到什么作用的第一印象。

四、逻辑思维正确性

人机交互上包括:点击、输入、滑动手势、重力感应、指纹等多种交互。特别是点击、输入、滑动手势上是交互逻辑最为关键的几个操作。我们要做到是用户可以知道点击后会展示什么内容页面。这种交互逻辑在用户体验上有着细致的快感。在电商app中,点击逻辑多半能构成一套用户购物路径。逻辑上的顺序必须有正确性,不然无法保证购物流程。在电商支付流程中,用户姓名、手机号、地址(地址中的从大到小的过程),都是输入上的逻辑顺序。如果先让你输入地址,再输入手机号,再输入姓名。这是输入上的逻辑不准确性,这个准确性中还包括了用户习惯的逻辑。滑动手势多用于返回和下拉刷新、上拉滑动登操作。其实简单的滑动手势也是很影响逻辑的。某喜欢推送下午茶的软件中,将刷新方式变为上拉方式,其实是很反人类的设计,逻辑上正确性也大大折扣。保障交互逻辑的正确,是用户体验中快感的最主要组成部分。

五、产品交互文案可读性

app内容中,文字占据了绝大部分内容。我们在产品设计中,会参杂很多产品交互文案。文案可读性保证了我们的app产品在使用过程中用户简单操作的认知度。比如最典型就是IOS或者Android系统级别弹出窗口就很有讲究。假设你需要让用户更新,你的文案一定是XXX1.01版本更新。然后下方是确定、取消按钮。但实际上,你多加一句:更新此本会有XX新功能。会帮助你提升用户升级版本几率,也保证了可读性。当然也可以将下方按钮改为单按钮:(知道了。)也是让用户不用思考进行选择。交互文案中多半使用通俗易懂的语句,在设计选择上尽量使用单线程的用户思考模式。文案可读性可以把握了更多得小白用户心里。

六、输入框便利性

从这里开始,是更加细小的关注点。首先是输入框,登录的时候,我们有输入框。聊天的时候有输入框。购买商品或服务的时候,支付填写信息的时候。输入框是除了按钮之外最多的组件。输入框的便利性是让用户使用下去的保证,在输入时绝对不能让用户出现有挫败感的心理。比如很多的输入框,登录名加上一条横线。当手指触碰点击登录名时候,并未点击到横线上时,居然没有弹出键盘。用户第一反应肯定是卡机了?第二反应是产生强烈的挫败感。在这种细节把握上,一定不能让用户出现挫败感心里。在登录的时候,输入用户名字的时候,弹出的是英文键盘。输入手机号的时候,弹出的是数字键盘。这些细小的差别,都是用户在输入时的便利性的体现。输入框不仅是技术上的数据交互和抓取,产品设计上的漂亮。更要关注让用户使用下去的动力。

七、按钮交互严谨性

按钮是app交互中最为常见的组件。包括底部导航上,确认或取消按钮,返回按钮等等。作为app核心的功能组件,没有了按钮几乎无法生存。手机触屏的诞生,更加注重了按钮交互的严谨性。严谨性不仅包括逻辑上的正确,也包括了用户文案简单理解的程度。按钮几乎是第四和第五的结合点。在电商购买页面中,我们会把按钮购买按钮作为吸底式按钮放在底部。一般性是左边是加入购物车右边是立即购买。因为这里有逻辑上严谨性,右边更为重要。还有也是用户操作习惯上的严谨性,右边多为更关键的操作。而客服,店铺,收藏等辅助按钮需要弱化,因为它对主购买流程不构成影响。这里这样做的原因还有需要去除用户过多的思考。按钮严谨性不言而喻,因为每一步流转,都是一次用户流失的过程。为了避免用户在按钮点击过程中流失,我们更需要关注按钮的严谨性。

八、表单列表简洁性

表单列表的组件在app中的使用会很少,即使在web端设计中也是需要更少的展示。因为现在用户在移动端养成的快速和碎片化浏览习惯非常不利于表单和列表展示和输入。app端中展示表单和列表组件更是对小屏幕一种展示的不简洁性。所以在app产品设计中,能避免就避免,能用别的方式展示就用别的方式。但是没有办法的时候,一定要展示的时候,就要十分注重简洁性。列表展示时,内容、文字展示要保持整齐。一般多使用除了列表外其他空间展示留白设计的方式。当表单需要填写时,一定要将填写内容进行逻辑上划分层次,让用户在输入完成时有种一个阶段完成的成就感在当中。还有就是能少填就少填,能点击选择则不选输入方式。表单列表的简洁性极大的帮助了用户在使用时不会产生厌烦感。

九、图片专注性

instagram的在国外的火爆印证了图片的重要性。微信朋友圈中直接发图片的设计也是图片重要性的体现。图片需要追求极致的专注性。图片在社交和电商等很多app上有着极大的重要性。在电商app中,你的商品图片、banner图片都是直接转化购买率最重要的先决条件。在社交app中,你的图片美观程度决定了你的点赞数目和浏览评论数目。图片也是更能抓住视觉最重要的体现。特别当你使用移动产品的时候,几乎一个屏幕就会展示一张图片或者半张图片。这里的图片的专注性不言而喻。特别是Airbnb那样通过专业的摄像图片提升了用户量的按钮后,也证明了图片的专业性也是十分重要的。一张好的图片展示,是很能影响用户的体验的。

十、错误分支回溯性

错误分支的多半体现在否定逻辑上。错误分支回溯不仅仅是让用户点击再浏览别的网页,更主要体现在返回和否定逻辑上。回溯性主要是让用户集中在主功能中进行很好的体验。这里回溯性设计上最优秀的是微信在通讯录和朋友圈上的聊天回溯性。(你可以去点击通讯录和朋友圈好友聊天,看返回到了哪里。)电商中的回溯,是对用户沉浸浏览的一种保障。包括从你不想购买的东西页面回到在选择想买东西的页面。还有就是你取消支付或者购买之后的页面返回的地方。每一步错误回溯都是对用户心里把控和认知的过程。

以上总结的十点主要针对移动端app,我们需要针对这些注意点进行打造细致的体验。PCweb端产品设计部分也适用。更多专业细节方面的设计,除了有利于我们在产品设计上用户体验的极致,也是从更多的细小点引发产品创新的原动力。更极致的专注打磨细节的产品设计,更是打磨我们心里的过程。

(阅读后提示:本文主要适用于产品经理,小部分内容适用UE/UI设计师。)

#专栏作家#

晓翼,微信公众号:上海人在北京。人人都是产品经理专栏作家。专注于电商、O2O的产品经理。会IOS开发、会P图、会运营的逗比一个。常关注社交、旅行类产品。

本文原创发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30311/

(0)
CatherineCatherine
上一篇 2017-05-27
下一篇 2017-05-28

相关推荐

  • 想快速玩转Axure,同时提升产品和交互能力,试试这个秘密武器

    腾讯课堂&起点学院联合打造的给产品经理的Axure课程如果你想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?1、没人监督指导,自学还没到一个周,就想放弃2、按教程操作,却出不了效果,又不知错在哪里3、难的知识内容看着费劲,不会技巧,效率低浪费时间那么这个课程很适合你,2280位同学已经通过这个课程摆脱了Axure困扰。这个课程能带给你什么如果你是产品新人,还没有很好的产品作品,axure实战班里做的原型作品,学到的axu...

    2018-04-30
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08
  • 交互设计师的60日计划之第四天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 帮你自学到底!非科班同学如何成为交互设计师?

    前言:最近一段时间,基本每天都有小伙伴在问,“我是来自非设计专业的学生,能否做交互设计”、“我想从事交互设计工作,是否需要读一个交互设计的硕士?”、“我工作一段时间了,不是设计行业,我能转行做交互设计么?…

    2015-04-27
  • 阿里设计师的思考总结:用户体验设计的进阶修炼之路

    从方法、标准、协同、软技能和创新五个方面说说我对用户体验设计进阶修炼的思考与实践。

    2017-05-17
  • 3步帮你搞定PRD文档

    很多新同学问道写PRD文档时不知如何下手,在这小编整理了一下如何搞定PRD文档的思路,还望对大家有帮助,这样也就值了。 一、理解什么是PRD? PRD:Product Requirement Document,产品需求文档,可以看出它是用来…

    2015-06-05
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27
  • 我对移动记账 App 的设计探索

    现代智能手机给我们提供了非常多丰富实用的功能,比如平时颇为在意金钱去向的我,就是一个 手机记账 App 的使用者,曾经尝试过各种记账 App,但好像都有那么一点不满意,于是我就想如果是我来设计这么一款 App 的话…

    2015-09-15