互联网产品设计之易用性

产品功能性

确保产品/系统可以事情

产品的功能性便是要确保该产品能够正常的完成事情。
如果一个事物连最基本的功能都无法正常利用，那么无论设计的多么都雅也都成了浮云。
以是，从功能性开始进行可用性的研究是最好的选择。

就网站而言，用户对网站的基本需求可以概括为三个功能：

按钮和链接点中就有反应；网站导航是灵敏的；网站的处理速率是可以接管的。

在越来越看重用户体验的本日，大多数网站这三个方面做的还是比较到位的，我们在培植网站时可以多参考目前主流的网站，比如，淘宝、百度、新浪、搜狐等等，这样可以使我们降落缺点的几率。

下面就网站中表单来解释一下功能性设计

我们创建表单时，有几个关键性的成分：

人们要能够供应表单中所哀求的信息；固定的输入格式会极大地增加表单缺点；相互依赖的表单和登录也会增加出错概率；有歧义的利用解释会大大影响用户的利用。

人们要能够供应表单中所哀求的信息

表单中所哀求人们填写的必要信息被定义为必填字段，已被设计界广泛利用。
常日，表单设计完成后，一些特定的字段会以某种办法进行标注，常日用星号（）表示用户必须输入内容才能完成表单，这便是必填字段。

这些必填的字段有可能是根据业务需求须要得到的信息，我们在做设计的时候原则是减少可填写表单的数量，只管即便减少用户的输入操作。
但是，有的时候由于业务需求，我们不得不须要用户供应这些所谓的必填字段，这个时候我们要做的便是要最大限度的优化操作体验。

无论如何，进行表单测试时，我们要确认用户可以不太费力地供应表单所需的所有信息。
这无疑是提高网站转化的一个主要成分。

固定的输入格式会极大地增加表单缺点

字段验证是为了确保打算机获取到可以理解并能够精确的归档到数据库中的数据。
字段的验证会进行语法检讨，确认信用卡好栏中输入足够长的数字，等等。
用户是看不到这些规则的，这就意味着缺点的概率是巨大的。

举个例子，如果要获取用户的信用卡卡号，用户在输入的时候会直接输入16位数字组成的字符，或者用户会在每4位数之间插入空格，此时就会发生缺点，让很多人无功而返。
显然，系统要得到是16个数字，不包含空格。
此时我们要做的便是，首先在文本框内显示默认笔墨，如“请输入信用卡号”，其次，在用户输入数字时自动用空格符分隔数字“1234 5678 5488”，末了，当用户输入了非数字字符时，在文本框失落去焦点时提示用户缺点即可。

相互依赖的表单和登录也会增加出错概率

表单的依赖性指的是在填写一个表单后须要提交时，惩罚下一个表单的填写，也便是如果要提交表单1，条件是要完成表单2的提交。
举个例子，当我们在一个在线购买电影票的网站挑选电影时，选择要看的电影后，完成了购买电影票的表单填写时，这时须要完成注册表单的填写，这时很让人崩溃的，注册完成后要把刚才的操作重新来过。

当然，购物车中的连续页面这类依赖性的表单并不那么让人讨厌。
只有在网站打断用户当前的操作并哀求他去做其他任务时，才会引发依赖性表单的问题。
当用户按照一定路径从一个交互进入另一个交互时，就会对这个网站的用户体验产生意见，以是千万不要打断用户的操作。

总之，如果设置了两个或多个不同的表单，那就奥确保以得当的顺序向用户呈现。
同时，要给用户预留足够的韶光来填写这些表单，免得网页超时逼迫用户重新来过。

有歧义的利用解释会大大影响用户的利用

有歧义的利用解释会利用户犯缺点，并且让用户摸不着头脑。
在填写表单时，我们会看到对付不同字段的笔墨解释，这些解释笔墨会帮助我们高效的完成表单的验证过程。
不过，也有一些例外。
比如，在填写日期的时候，位于文本框阁下的提示笔墨是“请输入日期，如yyyy/ww/tt”，当用户输入1989/12/25时，系统却报了缺点，缘故原由是打算机只接管19891225这种日期格式。

实在，很随意马虎做到让数据库忽略斜杠、破折号、空格以及其他的分外符号。
在网站中哀求特定的输入格式时，干系的提示信息要确保准确无误，这样才会担保用户能顺利完成表单的验证。

我们再从导航的灵敏度上看一下功能性

在前面说到的网站导航灵敏度，这个紧张涉及到的是系统的速率和效率。
在网站汇总，越来越多的证据显示，网页对付用户要求反应越快，转换率就越高。
Google和Amazon都证明了将反应韶光缩短半秒会大大提升转换率。
导航的灵敏度同样适用于移动设备中，用户们可没有耐心在点击了一个按钮后，等待几秒才会连续利用。

无论是什么东西，如果你以为它用起来慢，那我敢担保其他人会以为它更慢。
以是，我们要做些什么来改进这种环境。
可以先从压缩照片和图片的文件大小开始，而且只要会用Photoshop之类的图像处理工具的人，都可以进行这样的操作。
履历法则便是，任何东西的质量如果只是勉强可以接管，那么其尺寸都可以进一步压缩。
不要把两张图片并列放在一起比对查看，不然你肯定会把文件做得过大，应选取针对网络展示进行优化过的照片或图片。

我们要确保我们设计的产品可以正常的事情。
在设计的过程中我们要常常不断的问自己一些问题，例如：

你的产品要达到什么目标？用户在利用你的产品时，如果被打断，他们是否可以恢复原来的任务？如果不能，你可以做出什么改动来让操作变得大略一些？你可以想到一些边界示例吗？你的表格是否可以容错？后真个业务规则是否哀求了过于严格的输入模式？系统中是否有功能问题或者重新设计流程或做事的问题？你的系统是否可以在所有的浏览器平台事情？在不同的设备（智好手机、平板电脑、便携电脑）上是否都运转良好？用户在操作之后须要等待的韶光是不是会过长？是不是要记性优化来减少用户等待的韶光？

产品相应性

用户知晓产品/系统正在运行，并且理解个中的哪些功能正在运行

我们在和别人互换的时候，总是一个人在说，另一个在听。
我们会在交谈的过程中变换角色，并且重复这样的办法知道发言的结束。
在这个过程中我们须要对方的反馈，比如对方的回应，点头、皱眉、微笑等，或者是声音上的反馈。
所有这些情形下，可感知的反馈都是有效沟通的关键部分，对良好的可用性来说也是如此。

如果相应机制不得当，或者完备缺少相应机制，那么一定会涌现可用性的问题。
想象一下，你的手机在来电时不支持响铃与振动功能。
人们是非常依赖于这种反馈的。

相应性的要素

相应性可以划分为三大类：

约请技巧：吸引眼球的动作，表明会有好事发生的旗子暗记。
例如，标题广告、banner等等。
转换技能：立即回运用户所做的事情。
例如在浏览网页时，光标在可点击的链接上显示手型，这在技能术语上叫做“鼠标悬停”。
相应机制：相应机制指的是用户完成一个主不雅观行动后，所发生的事情表明用户操作后的状态。
比如，在线下载文件时，alert提示正不才载或展示一个下载 进度的提示框。

短缺反馈是一个比较普遍存在的问题。
在现实天下中，我们希望做事场所的做事职员们都会激情亲切的对我们说“感激，希望您有美好的一天”之类激情亲切的话，对你视而不见是令人不愉快的。
在我们浏览网页时，有多少次点击操作完成后，会经历一段漫长的韶光等待，才会提交我们填写的内容。
点击的按钮或者是其他什么控件，它须要与做事器有交互，那么这时等待是在所难免的，此时我们在设计反馈的时候就要慎重，不要让用户过久等待。
一些好的做法：Twitter的点赞无论网络强弱，都会显示成功，其他的就交给系统吧；微信发布朋友圈，无论是否有网络都会显示成功发布，其他的也交给了系统处理；注册/登录时通过按钮的不同状态来反馈当前状态等等。

我们再举一个切换提示的例子。

当光标移动到屏幕上的某个内容时，即光标悬停时，快速相应是相称主要的。
常日，光标会由箭头变成伸出一个手指的小手形状，你便可以点击内容了。
切换提示一样平常也会伴随着笔墨或图标样式的变革，例如颜色等，当鼠标经由它们时就会立即触发这个样式的变革，这样才可以有效的提示用户这是可以点击的。

网络环境中的相应机制

这类反馈有很多，加载中图标、iOS的菊花转、谷歌的旋转图标、苹果的旋转沙漏光标。
苹果的这个光标由于功能相应比较慢，得到了很多不太友善的外号。
由此我们可以看出，供应反馈常日可以缓解问题，却不能办理问题。
以是，在处理永劫光的操作时，最好能利用可以显示进度的图形。

除了基本的屏幕信息，比如“你的文件已经成功下载”，以及各种各样的动画，我们还可以用各种各样的设计模式来完身分歧的任务。
下面是一些比较常用的办法；

亮度调节：调亮特定的区域以表明其处于活动状态。
比如，微信在收付款时，页面被自动的调亮，这样做既可以奉告用户正在进行的操作，也可以避免由于屏幕过暗未便利扫描二维码。
声音：不同的操作关联不同的声音，我们最熟习的便是手机收到邮件或短信时所发出的不同提示音。
淘宝2017版本已经把声音的提示加入了APP中，但是，有一个问题值得思考，便是当用户不知道当前音量的大小时会被这个提示音吓一跳，该当考虑结合手机将音量掌握在不高的范围。

提及来目前有上千种处理相应的技能，有些好，有些坏。
但是无论你决定采取哪种相应机制，只要用户可以看到、听到或感想熏染到，并且理解了这些相应的意思，那便是良好的可用性。

我们要担保系统的相应性，就要确保我们的系统/产品：1.点击按钮时，要能看到按钮的反应；2.指针悬停在一个链接或者其他可交互组件上时，要改变形状来表明可以点击的内容；3.一些大略的任务，如下载文件或点击完成付款流程。
在这个过程中网站要对操作有回应；4.所有须要很永劫光处理的流程，像下载文件，要供应持续的反馈来显示流程的进度；5.得到的反馈要及时。

产品要符合人体工程学

用户可以轻松地查看、点击、波折或者翻转

人体工程学是研究如何设计出符合人们生理和生理能力的设备的科学。
我们对人体工程学的理解大都勾留在办公环境人体工程学，比如办公椅调度、桌子高度、电脑屏幕位置等等。
但是人体工程学不仅适用于电脑屏幕外围的各种情形，也适用于发生在屏幕上的各种事情，在移动端亦是如此。

这里先先容一下12条基本的人体工程学原则：

以正常的姿势事情；减少过度的压力；确保所有的东西都可以轻松得到；在得当的高度事情；减少过度的动作；只管即便减小疲倦和静载荷；只管即便减少压力点；供应间隙；移动、运动和伸展；保持舒适的环境；提高清晰度，让人理解；改进事情流程。

从可用性的角度来说，这些人体工程学原则之以是主要，是由于只管它们是根据实物天下中的浸染效应总结出来的，但对屏幕产品的设计也有深远的影响。
例如：光标可以充当我们的电子手指，和真实的手指一样，它也有能做和不能做的动作。
此外，随着触摸屏的涌现，我们的手指常日便是光标，溘然之间，我们创造自己得同时搪塞线上的和线下的人体工程学问题。

说到人体工程学在屏幕设备上的运用，不得不提到费茨定律，定律的内容就不多说了，费茨定律在设计中的浸染：

按钮等可点击工具须要合理的大小，例如iOS规范中的4444px规则。
屏幕的边和角的位置适宜放菜单栏和按钮这样的元素。
涌如今用户正在操作的工具阁下的掌握菜单或工具栏可以被打开的更快，例如点击鼠标右键涌如今阁下的菜单。

大目标比小目标更随意马虎捕捉和使

我们现在的网站涌现了很多下拉菜单，它们都会触发二级菜单，显示在自己的侧面。
这种下拉菜单要把稳的事情是：

确保点击区域比链接中的笔墨区域大。
由于更大/更随意马虎点击。

确保给用户足够的韶光将光标移动到相应的位置。
详细做法：1.光标在链接上面悬停约0.5秒后，再触发扩展菜单。
2.动画菜单被触发后，就该当尽快显示菜单项，如果可能的话，显示所用的韶光应少于0.1秒。
3.用户将光标从菜单上移开后，要等待0.5秒再关闭菜单。
这样，用户就不必严格地将光标固定在菜单的活动区域中，而可以在操作时更随意地移动光标，也可以选择比较近的操作路径。

过延迟下拉菜单/弹出菜单的收起韶光，用户可以将光标直接移到对角线处的菜单项上，而不会触发其他菜单项或者错过他们想要点击的菜单项

屏幕人体工程学方面的一个主要创造便是，如何最好地创建长链接列表。
可用性专家雅各布尼尔森（Jakob Nielsen）提到过“F模式”。
当你不雅观察一幅眼睛跟踪舆图时，会创造有一种F形模式。
眼睛跟踪舆图常日叫做热点图，哪里被看得越多，哪里就会越红。

这个热点图清晰地显示了人们的眼睛是如何浏览链接页面的。
创建列表或标题时，要确保将最主要的词汇放在前面

这便是说，在准备列表的时候（尤其是链接列表），你要确保最主要的词汇放在链接的开头而不是后面。
这也适用于具备机器可读性的标题，即那些会在搜索结果列表中呈现特定网页名称的标题。
以是，要负责地看待那些没有以最主要的词汇开头的列表、菜单或者链接等。

其余一个基本的人体工程学原则 便是供应间隙，它意味着，要确保两辆购物车可以同时通过超市的过道，按钮大得可以让人舒畅地点击。

我们在创建网站或运用的时候，须要给页面中各个元素之间保留足够的间隙，这样才能担保用户的利用不会有任何干扰。
亚马逊的网站中会存在一些弹出框，它们能够正常的运行，不才图中，弹窗中的各个元素（文本、按钮等）之间保持各自的间隙，层次清晰。

我们要确保产品/系统遵照人体工程学的原则，就要担保：

按钮要足够大，可以方便的通过鼠标或者手指示击；网站中的下拉菜单等其他可交互控件要能被鼠标轻易的捕获（移动设备上这些控件要能被手指轻松的捕获）；页面中的所有元素之间要保持一定的间隙，不能相互影响；我们的页面要让用户轻松的知道要做什么；产品/系统中不能存在不符合逻辑的任务或事情流程，我们的产品/系统要易用。

产品便捷性

所有的东西须要时都有

对付便捷性的定义，很大略：1.让人感到舒适清闲。
2.触手可及。
数字产品的便捷性提现在利用这个产品的过程中，让用户感到舒适清闲，利用我们的产品能够轻松的办理他们想问题。
而且，该当是触手可及的，比如我们饿了，拿起手机找到美团外卖或者百度外卖就能 办理我们的问题。

让人感到舒适清闲

在这里，我们来看一下打算机的多模式输入和输出，打算机的多模式输入包括键盘、鼠标和语音，多模式输出包括声音、视频等。
多模式的体验是指，在一个任务实行过程中进行接口的切换，可以分为三大类：

在同一个接口内从一个任务切换到另一个任务：表示我可以勾留在同一个浏览器窗口，切换不同的任务。
在干系的接口进行切换：表示任务可以从电脑屏幕移动到智好手机上，任务还将连续。
在不干系的接口内进行切换：表示可以从电脑屏幕移动到打印机输出。

这三种情形下的体验可以做到很好。
不好的体验我们要避免，例如：一个网站有两个相互依赖的表单，但必须要分别单独填写，这就会给用户带来很差的体验了。
用户更加期待的是无缝的体验。
让人们尽可能以最少的滋扰、最快的路子、最少的非常来完成他们的事情。

从可用性的角度看，便捷性问题与一个经典的问题密切干系：只有当手机没电的时候，你才会意识到公共场所的电源插座少得可怜；只有下雨的时候，你才会关注雨伞放在哪里。
进入不熟习的地域时，我们会自主的探求舒适的区域。
这是由于，符合我们个人日常习气的事物就可以供应这种舒适感。
事物供应了舒适感，我们就认为它们是便捷的。
以是，我们的产品/系统要为用户供应习气性的舒适感，让用户在利用我们的产品时找到熟习的舒适感，这会让我们的产品加分不少。

触手可及

在这个方面，我们讲究的是“只需一次点击即可完成”。
如果你在修理汽车，最好把所有工具以及修理所需的任何配件都放在手边。
如果你在做饭，那么在开始之前你可能会买来所有的食材并把他们备好。
如果你要在亚马逊上浏览一个主题，那么你该当网络所有须要的链接，并在十几个浏览器窗口中打开它们？当然不！

你期望亚马逊去做这项困难的事情，为你探求并供应有效的链接。
在亚马逊的结账页面，所有链接和其他必要信息会放在同一个地方，所有的产品信息会在另一个地方。
亚马逊已经为你安排好了统统。
将不同的信息都做好了分组。

我们确保产品/系统的便捷性，就要担保：1.将干系内容进行分组，使其更随意马虎查找。
2.如果拥有多模式体验，要确保不同的进程不会相互关扰。
3.要供应有用的内容。
4.肃清逼迫用户多次输入相同信息的区域。
5.为用户供应方便。

产品的大略易用性

帮助人们避免操作缺点或破坏产品

提示

指出人们可能欠妥心忘却了实行什么操作，比如在关闭文档之前保存文档，或者在邮件中忘却粘贴附件。

文明的toast提示

我们一样平常会看到两种类型的系统提示。
一种是比较标准的提示信息“是否要对变动的内容进行保存？”这样的提示信息一样平常是为了提醒用户，这种提示信息用户是不太会反感的。
另一种系统提示却会对用户的操作造成一些影响并且逼迫用户进行许多选择，如“你确定要删除该文档吗？”“你是否确定？该操作不能规复”（废话，我自己选择的删除当然是要删除了！
）。

我们利用提示信息不能打断事宜处理流程的流畅性，不能妨碍人们事情。
在现实天下中，大量不恰当的也会对我们造成滋扰。
一些语音邮箱系统，总是会播放一段长长的广告，才列出菜单项，很让人忧郁。
简而言之，如果帮助是不必要的，那就不要涌现。

警告

在一些内容上添加标签或标记，来表示这些是用户进行下一步操作之前必须完成的内容，比如输入密码或者勾选“我接管条款”复选框。

警告可以见告人们有缺点存在（如密码缺点），状态发生改变（电量不敷），或者其他一些须要你把稳的内容。
但是，一些警告仅仅是让用户确认电脑或者移动设备实行了一些操作。
比如，往智好手机里插入耳机后，或者是拔出耳机的时候，屏幕上总是涌现这样的信息：

“手机插孔中连入一个设备”，我当然知道我查了耳机，难道会有人趁我不把稳偷偷插耳机在我的手机上？

想要避免人们犯错的出发点是很好的，但是不断地陈述显而易见的事实，是会惹恼用户的。
常日在设计此类警示信息时，非常主要的一点事不断评价它们的干系性，确保它们能起到一些浸染。
警告常日是为了奉告系统的缺点故障等用户不可预知的情形，并非是用户明确的状态。

在移动设备中，对话框作为警告的一种表现形式，在iOS和Google的规范中都有规定，对话框这种中断用户流的形式适用于用户实行了将要引起严重缺点的交互行为（在软件中则是此操作将要引起用户状态变革的情形）或者是系统自身的非常警告等。
在用户节制范围内的情形，用提示更加妥当。

用户操作在app中的警告提示

逼迫

肃清一些不可用的选项，比如把一些不可用或者在某个特定时刻不适用的菜单项变灰色。

在数字天下中，实现逼迫操作的办法，是把那些由于某些缘故原由不可用的菜单项置灰。
例如，如果已经保存了文档，没有再对文档修正，那“保存”按钮就可以一贯不可用。
我们可以多考虑以点，置灰的菜单项用户是不知道缘故原由的，为什么之前还能点击呢？我们希望程序能供应一些阐明，解释为什么这时这个菜单项不可用。
例如，鼠标悬停在置灰的菜单项时，会有一个小小的提示解释弹出框来阐明缘故原由。
当然到目前为止，还没有程序是这么做。

“下一步”按钮置灰

我们要帮助人们做出更好的决策

屏幕信息有时候会须要我们做出选择，乃至那些须要我们点击“确定”的信息也会让我考虑一下自己须要认可的内容。
我们在设计这写提示信息时，须要问自己一些问题：

用户知道为什么会涌现这个信息吗？用户是否足够理解这个提示，并且做出精确的决定？提示中信息是否有用，会不会让用户困惑？用户理解做完决策的后果吗？

如果所有的答案都是否，那么就得修正提示信息或者考虑变动设计，去掉这个提示信息。

我们要担保产品/系统的大略易用，就要确保：

为用户供应多种相应办法，以防万一。
提示信息要清晰简洁，易于理解。
准确区分提示和警告，不得稠浊。
不要妨碍用户去完成任务。
为用户供应认知线索，精确勾引用户利用产品。
确保用户随时随地获取所须要的信息。

作者：流年，互联网产品设计师，4年互联网产品设计履历。

本文由 @流年 原创发布于大家都是产品经理。
未经容许，禁止转载。

题图来自PEXELS，基于CC0协议