如何打造极致用户体验

积少成多的细致用户体验才能打造颠覆性的产品,颠覆性产品不是一日而成,本文主要帮助大家深入思考用户体验。在移动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

相关推荐

  • 交互设计必杀技:如何做一名高效的“陪产婆”

    数十万互联网从业者的共同关注!作者:臭脸任。作者授权早读课发表,转载请联系作者。微信公众号:臭脸任的慢生活(ID:choulianren-renyi)欢迎投稿到早读课,投稿邮箱:mm@zaodula.com问题起源于臭脸君开始转战给i…

    2017-08-01
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 用好的交互设计来管理复杂-“Tab”

    标签可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,易用易理解,就能为你的用户体验加分。

    2017-05-18
  • 3分钟带你掌握11个最常用的交互控件

    本文作者将来总结一下各个控件的特点,方便各位更好的理解这些控件。(更具体的说明请参考:iOS和Android规范解析——警告框(Alerts)对比)(更具体的说明请参考:iOS和Android规范解析——简易菜单、简易对话框和弹出框 )(更具体的说明请参考: iOS和Android规范解析——简易菜单、简易对话框和弹出框 )
    (更具体的说明请参考: iOS和Android规范解析——底部浮层(上))
    (更具体的说明请参考: iOS和Android规范解析——底部浮层(下))(更具体的说明请参考: iOS和Android规范解析——确认弹框、全屏弹框和模态视图)

    2017-04-30
  • 设计基础|设计的7条心理学原则和定律

    译者注:上图的中文版金字塔并非原文内容,找来帮助大家理解。译者注(图中文字):
    费茨定律示例
    它是什么意思呢?费茨定律表明,你应当让按钮和其他界面元素足够大,因为用户点击小按钮十分困难。
    如果你有个小按钮,像【OK】这样,可以增加一些内边距,或者让它更宽:【 OK 】
    如果说网站上有个按钮,让整个按钮都能点击——而不仅仅是文字标签。
    而且,如果你把物体放在很远的地方,最好就要增大它的尺寸作为补偿。

    2017-05-24
  • 交互设计流程(一):需求分析(转自人人都是产品经理)

    本文是系列文章的第一篇,主要从业务需求、用户需求、分解关键因素三个方面来分析。一起来文章中看看吧~进入到腾讯工作后,由于处于广点通广告部门,平时的设计呈现多与业务相关,基本是以B端设计为主,对于传统交互设计的方法论有点生疏了。所以特在此整理,同时也分享给有需要的同学。该系列交互设计文章,抽取工作中需要的核心步骤,预估计有6篇,暂拟定如下内容:交互设计流程一之需求分析交互设计流程二之架构设计交互设计流程三之流程设计交互设计流程四之页面布局...

    2018-05-08
  • 界面设计中的动画原理:可理解的变速过渡效果-深入研究加速和减速

    注:“可读性”是说动画绘制者如何定义动画的精准度,用来清晰而容易地理解正在发生的事情。例如:不可读=不清楚发生的事情很易读=它非常清楚,立刻能懂弹跳背后的物理理论:球刚开始被放开的时候,它有一个相对缓慢的速度。在重力的作用下,球的速度持续增长,直到接触地面的那一刻速度达到最大。地面给球反作用力,使它以几乎相同的速度反弹回去。当球移动时,两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放,这使得球随着升高逐渐减低速度,直到它耗费掉所有的反作用力,最终到达反弹的最高点。它在顶部停留一微秒,直到重力把它拉下来,使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤,这样我们就可以重新创造它。注:不要羞于“照搬”大自然。你的观众会更快地与动画关联起来,从而更容易读懂动画。注意:这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书,例如迪斯尼的《生命的幻象》或《动画师的生存工具》,那么这些书会告诉你,当一个物体开始减速然后加速时,这一过程被称为渐慢(ease-out),因为它的姿态在“缓慢输出”。但是,在软件产业(CSS动画,Adobe Edge等),这一过程被称为渐快(ease in)!我不确定这一不同之处是怎么来的,但是不幸的是,这就是它的形成过程。所以,当你在阅读一篇文章时,而这篇文章把它们把“渐快”称为“渐慢”,那么不要觉得困惑。看一眼你所在的网站你就懂了:D。时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :  34
    0.2  :  68
    0.3  : 102
    0.4  : 136
    0.5  : 170时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :   2
    0.2  :  10
    0.3  :  36
    0.4  :  87
    0.5  : 170注意:你会在软件中看到更多用于设置缓冲的选项,例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择,但是概念是相同的。只需记住——缓和的程度越高,你就会得到更多的缓和度。并不是规则,只是工具(There are no rules. Only tools)- Glenn Vilppu

    2017-06-05
  • 信息架构与导航系统,还傻傻分不清楚吗?

    作者:Jennifer Cardello,翻译:小球娘   几句话概述:信息架构是支撑网站的骨架;导航指的是网站交互界面上,用来让用户到达具体信息内容的元素。 人们有时会把信息架构(IA)和导航系统的概念混淆到一起,这些概…

    交互专题 2017-08-07
  • 阅读类产品中的交互设计逻辑分析

    ↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

    2018-02-27
  • 超越触控的手势交互

    手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

    2016-07-18