这其实是一篇技术出身的产品经理所写的关于用户体验的深刻忏悔书

文章目录[隐藏]

十大交互原则实用总结

如果当初没有进入产品经理的队列,笔者说不定也是互联网程序猿中的一员。做技术出身的产品经理有好也有不好,好是因为一般有一个idea或者是新的需求,在没有用到特别尖端、特别前卫、特别超出自己理解范围之内的技术之外,基本想一下就知道大概要怎么做,需要做哪些地方的改动,大概要花多长时间。不好的地方也是,因为太清楚技术实现,所以容易有种想把所有的中间过程都让用户知道的强烈曝光欲。这种感觉,真的只有做过技术又做过产品的人才能理解。偏技术的产品经理做出来的产品体验和偏用户的产品经理做出来的产品体验,大家可以自行脑补Windows和Apple,大概就是那种感觉~~

笔者在认认真真做过用户端产品的5个月之后,终于恍然大悟要如何去衡量产品的体验。以下为笔者结合尼尔森十大交互原则和实际工作中的一些情况,总结出来的一份自查清单。以期在每次做完产品需求或者进行产品验收的时候,都按照如下的规则老老实实检查一遍,保证用户体验。这些经验是总结给有技术背景,但是不太重视用户体验的产品经理(比如我)的一些警告和警示,对于初入行或者想入行的产品小白,也具有一定的参考意义。

尼尔森十大交互原则上场~~

原则一 状态可感知

1. 菜单tab记录是否明显?

菜单Tab可以让用户知道自己当前在哪个位置,否则他们就会在我们的产品里迷路。

2. 标题栏是否明确?

文章的标题是一篇文章的招牌,而标题栏就是一个页面的招牌,一个页面如果连标题栏都没有,或者标题栏和内容不符,那用户体验也是极差的。

3. 数据加载是否有进度提醒?

很多时候,用户不是不愿意等待,只是等待的时间过长,用户也不知道还有多久,索性就把应用给关了,如果加上一个进度提示,让他知道页面加载和跳转大概还有多久,他就会更加耐心。这和我们早上赶路去上班愿意坐地铁二不愿意坐公交是一样的道理。因为公交车的到达时间是不确定的,而地铁一定会在说好的点到站,这样一比,地铁的用户体验就比公交车的用户体验好多了。所以,进度条是很有必要滴~

原则二 贴近用户认知

1. 所有的图标或者术语是否都在用户的理解范围内?

比如表达性别的图标:

1936101L9-0

1936106164-1

这两个图标分别是什么意思?你真的清楚吗?如果你不清楚,为什么要把问题留给用户呢?如果你清楚,你确保大部分的用户都清楚吗?

2. 有没有容易产生歧义的图标?

举个活生生的例子,这是我们某个功能早期的图标:

1936105153-2

选中之后是这样的:

1936102226-3

(源文件已经找不到了,我是凭着记忆和拙劣的PS技能搞出来的~反正大概就是这个意思~)

回头看时,我的心情是狰狞的:

这其实是一篇技术出身的产品经理所写的关于用户体验的深刻忏悔书

大概你也已经明白,这样的图标变化,真的是没什么卵用…

3. 除了图标之外,所有的文字,用户是不是都能读懂?有没有技术性语言是贴近技术而不是贴近用户的?

原则三 操作可控

1. 是否支持撤销或者重做?

原则四 一致性

1. 同一个含义的功能是否是同一个称呼或者同一个图标?

会不会有时候返回按钮是这样的:

1936101P5-5

有的时候又是这样的:

19361014a-6

2. 返回和前进按钮的位置是否都保持不变?有没有出现有的页面有而有的页面没有的情况?

顺便吐个槽,现在火得不得了的《王者荣耀》,一般情况情况下返回是在左上角的,闯关模式每闯完一关,返回是在中间的,我真的不相信闯关模式是外包出去的!!

原则五 防错

1. 在容易犯错的重要操作是否有二次确认?比如取消订单,比如删除记录等等。

2. 在做出删除等不可恢复的操作之前,有没有文字提示?

原则六 再认好过回忆

1. 已填写的内容,是否在最终确认时向用户展示以示确认?

2. 已选择的商品和数量在最终下单前有没有和用户再次确认过?

原则七 灵活高效

1. 加载速度够不够快?

2. 用起来是不是能快速上手?

3. 功能有没有过于复杂不好理解?

4. 所有能点击的地方,指向性是否明确?有没有让用户迟疑的点击事件?

5. 最重要的是,你的中级用户都明白如何使用吗?

原则八 易扫

1. 重要的功能/内容是否突出?

2. 版面划分是否清楚?

3. 不重要的功能是否隐藏或转移或弱化?

原则九 容错

1. 如果出现了错误,是否有人性化的提示告诉用户应该去哪儿而不是只有404?

2. 会不会出现异常操作导致应用崩溃的情况发生?

原则十 人性化帮助

1. 简单的功能是否不需要文档就能看懂?

2. 陌生的功能是否有新手引导?

3. 困难的共是否有帮助中心?

4. 复杂的问是否有帮助文档?

5. 客服电话贴上了吗?

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

(0)
iouedioued
上一篇 2015-11-30
下一篇 2015-11-30

相关推荐

  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • 通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

    不单是视觉扁平,交互层级也更加扁平啦~

    2017-05-09
  • Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。

      摘要:Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。通过它,设备可以感知用户点击力度,再根据力度的不同调出相应的不同功能,让用户和设备能够进行更好的…

    2015-03-18
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • 总结|2017年的5个网页设计趋势

    几何图案与全屏背景图结合、灰色的高级用法、色彩叠加……这篇总结的这5个网页设计趋势,其实在年底就初现端倪,所以2017年大面积运用几乎势在必行,想不落人后记得打开阅读哟。

    2017-05-08
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • iOS和Android规范解析——简易菜单、简易对话框和弹出框

    今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。

    2017-05-02
  • Apple Watch界面设计规范之UI设计基础(2/2)

    六、布局 并排放置的按钮数量要控制好。当并排放置按钮时,使用图标来代替标题文案。一行不要放置3个以上,否则按钮的尺寸将会太小,很难被点到。 完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在…

    2015-03-10
  • Axure实验室 | 带放大效果的轮播图

    提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样。阅读原文预览然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮...

    2018-03-15