直觉设计:如何让网页更直观、易用【UXRen译#162】

直觉设计:如何让网页更直观、易用【UXRen译#162】

作者:Peep Laja(ConversionXL的创始人,世界上领先的转换优化专家之一)

翻译:方糖小姐,校审:小四

 

你的网站越容易使用,那么使用的人越来越多。“容易使用”的至关重要的一部分是直觉。那么直觉设计也就意味着当用户看到的时候,就准确地知道接下来该做什么。

直觉设计最主要的就是其不可见性。当用户刻不容缓地专注于手上的任务,那么设计是凭直觉的。直觉设计重要的是引导用户专注于任务。最终,直觉设计还是要侧重于体验。

想象一下,你在一个汽车租赁的地方选中了想要租赁的汽车,你走过去想进去感受一下,你走到了车前,伸出手想要打开车门——但是没有门把手!你该如何进去呢?

直觉设计:如何让网页更直观、易用【UXRen译#162】

这是一个非直觉设计的例子,非直觉设计窃取了用户的注意力。他尝试进入车内,但是这个过程被一个没有明显解决方案的不常见状况打断了。

网页设计也是同理的。用户只要在没有被打断或者被其它想法干扰的情况下可以完成任务,一切都好。直觉设计是不可见的,但是非直觉设计是一个破坏者。因为直觉设计是无形的,人们不会真正领会它(甚至他们从来都未曾注意过它)——但是如果它消失了用户会立即察觉到。非直觉设计强迫用户关注与任务无关的元素。

 

直觉界面的相关设计问题:谁的直觉?

为什么许多的网站使人们感到困扰?为什么不是所有的网页都是直觉的?这是每个人都期许的,对吗?创建直觉网站的难题就在于人是有差异的。一个人的直觉并不代表另外一个人的直觉。设计本身并不是直觉的——而在于使用它的人是否感觉它是直觉的。

我相信大多数的网站的设计意图都是好的。它们应该是直觉的,但这通常是针对设计师而言。一般来说,开发人员或设计师是不会花费时间看人们使用他们所设计的东西的。

人们都会用自己的视角去看这个世界,当他们设计某样东西时,他们会不自觉地为自己设计——那些和自己有着同样电脑技能水平,或者有使用此类界面的经验的人等等。

直觉设计的正确开始是了解你的用户。你需要清楚对于他们来讲什么是直觉的。在这里要理解的一个非常重要的概念是当前知识和目标知识。

 

当前知识vs目标知识

人们来到你的网页,预先加载了已经存在的知识(以前的经验等等),Jared Pool称之为“当前知识”。那么“目标知识”呢?目标知识就是为了使用你的网站或者应用,用户需要知道多少知识。

二者的差异被称之为“知识鸿沟”。你的工作是创建一个界面来缩小用户当前知识和目标知识的知识鸿沟。

直觉设计:如何让网页更直观、易用【UXRen译#162】

使其变得困难的原因是你可能会有各种各样的用户,有些是精通技术的电脑高手,有些是电脑文盲奶奶们,另外还有介于二者之间的。

如果你的目标群体越小,对你越有利;但如果你的受众越广泛,那会面临更大的设计挑战。

 

概念模型

如果用户从未使用你的网站,这并不意味着他们的当前知识为零。他们可能之前使用过其他类似网站或产品。有些用户可能没有用过,但是每个人都会有自己的概念模型。

比如说你从来不网购,但是你已经有无数次的线下购物经历。因此我让你坐在电脑前并向你展示Amazon.com,告诉你可以从亚马逊购买东西。

用户现在将会使用线下购物的概念模型,并且目的在于复制同样的体验。用户期望的网购来源于线下购物的心智模型——他们以往获知的最接近的体验。

直觉设计:如何让网页更直观、易用【UXRen译#162】

但是假如用户之前就有网购经历,只是未曾在亚马逊购买过商品。由于他们在亚马逊购物的预期,现在他们的概念模型将不同。

如果大多数的用户从未使用过此类网站或者在线服务,那么你需要处理该概念模型。这就是你必须了解用户准确体验的原因。如果网站和用户的心智模型不匹配,用户就会觉得网站非常难用,不够直观。

 

了解用户(研究他们!)

为了使网站的设计更加直观,你需要了解当前知识点和目标知识点的在哪里。以及用户已经知道的和他们需要知道的。

这有两个好的方法:

  1. 领域研究。找到你的客户并观察他们使用网络的习惯,你将会了解他们的当前知识。
  2. 可用性测试。让人们使用该网站,使用任务测试法和发声思考法测试该网站的可用性。这种测试方法还可以远程操作(在网上)。这可以确定用户的目标知识。

这两种情况都不会干扰你观察和做笔记,你将会很快确定主要问题,10个测试对象通常就已经揭示了90%的问题。

从这开始,基于你所学到的构建人物角色。

 

网页直觉的使用时间

一般来说,直觉设计的当前知识就等同于目标知识。

杰瑞德在他的研究中发现两种情况下用户将会告知你界面对于他们来讲是直觉的:

  1. 当前知识点和目标知识点是完全相同的。当用户使用该设计时,他们知道需要执行的操作和完成的目标。
  2. 当前知识点和目标知识点是分离的,但是用户并没有完全意识到该设计是为了帮助他们缩小差距。用户正在被引导,但是在某种程度上看起来是自然的。

换句话说,要么让它简单地不需要任何学习成本,要么添加容易发现和跟进的指令、技巧和缩微复制。

第一种情况的最好示例是谷歌搜索。使用时不会犯错,也没有学习曲线,所见即所得。

直觉设计:如何让网页更直观、易用【UXRen译#162】

第二种情况的好例子可能就是Wufoo。当你登录进去并开始创建第一个表单时,“说明”使它变得简单,并让学习过程看起来非常自然。

直觉设计:如何让网页更直观、易用【UXRen译#162】

因此,对于直觉设计有两个选项。要么通过简化设计来减少目标知识需求直到满足当前知识,要么通过“说明”将当前知识转化成目标知识,或者两者皆有。

 

直觉导航(和搜索)

76%的消费者认为网页设计最重要的因素是:网页可以让我很容易地找到想要的。

他们如何找到想要的东西呢?当然要发挥导航的作用。从这开始变得棘手:如果你的网页有大量的内容信息,那么如何让结构发挥作用呢?

找出菜单条目下的内容的好方法是卡片分类法。卡片分类法是一个用于发现用户如何找到内容或功能预期模式的好方法,这个方法可靠、廉价。它也会帮助你选择菜单条目的措辞。

使用正确的名字命名菜单项是非常重要的,这样人们可以获知触发词(trigger words)的后台的链接。

有趣的是50%的用户不会购买是因为他们找不到他们想要的东西。这就是为什么搜索是非常重要的。你需要搜索你的网址,它必须要非常容易找到。亚马逊拥有巨大的库存并将搜索作为网站的核心。你还能想象到任何其他方式吗?

哦,确保谷歌分析中的“网站搜索”处于打开状态,你也会发现用户使用搜索将会有更高的转化率(搜索者都有意图,他们知道他们在寻找什么)

 

人们将大多数的时间花费在其他网站上

要时刻铭记一件好事情:人们大部分时间是花在其它网站的。因此他们习惯以特定的方式(当前知识)来进入网站。如果和惯例作对就是在找麻烦。

典型惯例事项:

  • 点击左上角的标识一般是返回主页。
  • 水平导航菜单的最后一个链接应该是“联系我们”(或者在垂直菜单的底部)
  • 联系信息应该在页脚
  • 争取一致性:整个网页的导航和其他重要的元素应保持在相同的位置
  • 链接应该和普通的文本很容易区分。
  • 如果用户可以而且应该向下滚动时,滚动条必须是可见的。
  • 左对齐文本比右对齐文本更易于阅读(因为西方人习惯于从左边阅读)
  • 呈现描述性的帮助信息和通知
  • 在整个界面使用用户易理解的朴素语言表达(例如,使用“联系”代替“交流”)

是的,例外不可避免,但是创新是困难且冒险的。在大多数情况下,不要重新发明惯例,让网页按照人们的期望运转。

 

小心再设计

Luke Wroblewski记录了芝加哥最近召开的一次An Event Apart会议,在会上Jared Spool关于重新设计网站的观点是:他们将拉大知识鸿沟。

20%的用户花费80%的收入在网站上,重新设计会对顶级买家产生重大影响。他们知道事情如何运作,当你重新设计了网站,就会改变他们。

并不是人们讨厌改变。他们只是讨厌夺走了他们的当前知识。直觉设计是不会强迫用户改变的。

“主要零售商投放100美元重新设计,折算后下降了20%。一个律师事务所不得不关闭。医生办公室和航空公司经历了重大的延误。他们的网站/APP对于他们最重要的用户就不再是直观的了。”

你需要专注于最重要的买家。设计对于他们来说应是最直观的,不要试图取悦每个人。

着手于重新设计的好方法是使用精益设计方法——通过建立-测量-学习周期来减少所花费的时间。网站经过一段时间的小变化通常优于主要部分的重新设计。不管这个改变带来积极结果还是消极结果,都可以让你测量从而快速学习,“如果那一天我们还活着,我们将会成功,没有人会注意到”。

这适用于当你有大量重复的用户,但如果你的网站流量很少而且当前的设计是有缺陷的,不要犹豫,去做一个全面的革新。

 

结论

目标是网页对于核心用户保持直观,你将会获得更高地转换率和用户忠诚度。研究用户行为,并要一直做界面的用户测试。

Peep Laja是ConversionXL的创始人,世界上领先的转换优化专家之一。在欧洲、中东、美洲中部和美国从事数字营销15余年,他的经历非常丰富:曾在欧洲的SaaS公司、巴拿马的SEO机构、迪拜的房地产门户和国际的非盈利公司工作过。

 

更多译文:
2016年度13篇最佳UI/UX参考文章
Facebook研究经理:全球化研究的完美套路
你的APP引导页,为啥用户会忽略?
老美看微信:如何成就中国最强悍的互联网入口
交互设计基本原则(第二部分:默认和可见性)
“想要”之前是“需要”,用户体验设计的需求层次长啥样?
全部160+篇译文>>
申请加入UXRen翻译组>>

uxren-fanyizu-00


译者:方糖小姐    审校:小四 

作者:Peep Laja

原文链接:https://conversionxl.com/intuitive-web-design-how-to-make-your-website-intuitive-to-use/

原文标题:《Intuitive Web Design: How to Make Your Website Intuitive to Use》

版权声明:

  • 本文版权归:UXRen翻译组 所有;
  • 转载带有“UXRen译”抬头的翻译文章,文章标题必须保留“UXRen译”字样;
  • 转载文中必须保留:“UXRen翻译组”、“作者”、“译者”及“审校者”信息;
  • 转载文末必须保留本译文网页链接地址;
  • 如未遵照上述规则转载,视为侵权,UXRen社区保留随时追责的权利。
 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21063/

(0)
震天下震天下
上一篇 2017-08-07
下一篇 2017-08-07

相关推荐

  • 交互、研发、视觉部门的协作工作技巧分享

    本文转载自交互学堂公众号,作者阿西UED 交互、研发、视觉部门的协作工作技巧分享 微信号:IxDSchool 本文是图片形式,打开有些慢,请耐心加载完再阅读。这里有原文地址

    2016-01-15
  • 【笔记】Google设计师传授Whiteboarding新技能(附视频)

    公元2016年2月20日星期六,丙申猴年正月十三。正是广大交互设计师出门聚会交流的黄道吉日啊!紫气东来,应在中城WeWork Madision,此地必有祥瑞!小编掐指一算,原来是UXRen纽约第二期活动啊!(^o^)/~   笔记:JayJ…

    交互专题 2017-08-07
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 交互设计师的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
  • 交互设计中几个要注意的关键词

    作者:Guibin@DesignGB   sprint “罗马不是一天建成的。” “千里之行,始于足下。” 将一个大问题,拆解成很多小问题,一点一点实现并验证可行性,一个版本一个版本改善,用迭代的思想输出成果。越早交付价值,就越早…

    交互专题 2017-08-07
  • 交互设计师的60日计划第十六天

    周五综合症:不想做事...今天把昨天的需求做完善,与产品经理讨论其中的一个问题,然后将细节标注清楚,但是产品最终还没有确认。除此之外,一直在帮要晋级的一个视觉同事想文案,最后得出结论,还是得多读书,书到…

    交互专题 2015-08-20
  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 交互设计师的60日计划第十五天

    今天晚上去上了想上已久的舞蹈课,超级超级开心。说要学舞说了这么久,总是不能兑现。今年的另一个要实现的事情,就是每周坚持学舞蹈吧。 20150813 产品经理的自己提的方案也可能并不是他想要的 很久以前师父和老大…

    交互专题 2015-08-20
  • 交互设计师的60日计划第十九天

    昨天M+头痛,8点下班回来做分享PPT做到11点半倒头就睡了,忘记了写每日…拖延症真是害人,周日拖了一天只写了大纲,周一做了白PPT,今天又加班到10点把完整的PPT做了,明天晚上演练一下。因为一天的拖延,整个一周都…

    交互专题 2015-08-20