必威体育Betway必威体育官网
当前位置:首页 > 运营推广

互联网产品设计之可用性

时间:2019-07-29 12:11:07来源:运营推广作者:seo实验室小编阅读:67次「手机版」
 

可用性设计

可用性定义:产品可用性也叫用户可用性,是指产品真正能够提供客户功能信息的实用性。假设所有的功能都是没问题的,那接下来的工作就是确保它能够按用户期望的方式行事。

产品功能的可见性

如果一个元素(链接,选项,按钮…)不能被看见和被确认,那它就不存在。

如果用户看不到自己想要找的东西,或者原本应该看到的东西,那就是遇到了严重的可用性问题。如果你正在进行产品设计,不要指望用户会耐心十足地到处点击去寻找重要的辅助信息,阅读合同条款中晦涩难懂的条文,或者做一些可能从根本上影响用户操作的事情。

以下几种情况会使得功能元素“不可见”,在产品设计中应避免:

不在用户要寻找的位置;

被其他元素挡住了;

即使在显眼的位置也不能被识别;

根本就不存在。

在报纸还是单页印刷的时代,报摊的报纸都是折叠着摆放的。因此,除非有人拿起报纸打开它,否则只能看到头版的部分信息,其他部分就被称为“不明显位置”。区分可见部分与不可见部分的就是“折痕“。

随着网站的出现,“折痕”被赋予了新的意义。“折痕以下”意味着这些内容都不是即时可见的,除非用户向下滚动页面。和报纸不同,浏览器窗口中的“折痕”并没有确切的位置。因为折痕的位置取决于浏览器窗口的大小,如果你使用的是大屏幕,并且把浏览器窗口放到最大,就会看到网页的更多内容。但是,如果你把窗口变小一些,看到的内容也会变少。在智能手机或上网本上,最大可见区域通常比全尺寸电脑显示器上的可见区域小。

另外,屏幕分辨率可以大大影响浏览器窗口中看到的内容,屏幕分辨率越低折痕越高,下图中亚马逊官网在1920*1080与1280*720分辨率下的折痕位置:

亚马逊官网(1920*1080分辨率)

亚马逊官网(1280*720分辨率)

事实上,亚马逊网站的主页非常长。有些内容是必需的,因为它们可能有助于搜索引擎优化。但是这些内容处于页面很不明显的位置,很多人有可能永远也不会看到它们。

网站中有些内容是要明显显示的,下面列出了绝对要显示在明显位置的内容:

品牌和主要导航

帮助信息

站内搜索框

购物车和结算链接

咨询链接

语言切换入口

快速应用的关键输入区

关键输出区(置于输入区的附近)

通常可以放心地置于页面底部的内容包括:法律声明;隐私政策;地址和联系电话。

创建适于滚动的页面

所谓适于滚动的页面,是利用布局向用户传递强烈的信号,告诉用户要进行页面滚动还能看到更多内容。无论折痕落在什么位置,都要让布局穿过某个元素(比如图片),让用户知道滚动页面可以看到更多的内容。适于滚动的诀窍就是在图形消逝的地方让内容中断。网页的下边缘越干净,就越不适于滚动。

底部图片中断,利于页面滚动

假若一个设计从物理上把两个相关的信息分开,也可能会带来问题。比方说,我要在页面顶端的一个输入框提交信息,我就会希望输出结果也显示在输入框所在的位置(比如,提交内容)。即使在适于滚动的界面上,我们也不希望用户过多地滚动页面。为了点击屏幕外的提交按钮,不得不滚动一点页面,真是让人极其恼火。随着屏幕变小,越多越多的按钮、输入框以及输出框,需要在页面的顶端或底端出现,这也是人体工程学方面的考虑。

微博发表文字信息,发送按钮位于右上角

位于底部的发布按钮

避免设计广告盲区

广告盲区是指人们忽视网站上各种banner广告的倾向。USATODAY.com通过采访和网站统计了解到,大多数用户对三件事情感兴趣:运动、天气和股票。所以,网站的设计方案是把这三项内容都放在吸引人的彩色方框中,并置于网页的顶端。这样做的结果是什么?没有人点击这些内容,于是出现了广告盲区。

红框内即为广告盲区

在产品设计中,可以采用以下方式避免广告盲区:

让特定的用户看到特定广告,达到精准投放效果。

将广告设于页面底部,而非顶部。最新的研究显示,获得最高关注的不是页面顶端,而是在第一屏的底部。这对广告设计有着直接的应用借鉴,能够避免广告盲区效应的损害。

以对联形式悬挂于首页两侧, 规格较大,不会产生上下的广告盲区,广告位置可以强烈冲击访客视觉。

网站的重要内容避免过度设计

避免遮挡重要内容

网页浏览总的体验极大地影响着用户购买产品、继续使用服务乃至注册的欲望。然而我们都知道,有些网站只能有限度地浏览,唯有付费后才能看更多的内容。用户必须注册并提供个人信息、付一些钱,或是做其他事情才能访问页面。

京东的做法是一个正面的案例,京东提供了未登录也可选择商品加入购物车技术支持,具体来说就是,一个未登陆用户访问了京东网站,这个客户在 2 点、 3 点、 4 点分别加了三件商品入购物车,这样京东的后台也记录了这个用户的购物车里面已经有三件商品,并且只要每次该用户查看自己的购物车,京东后台都能够展示相应的数据(涉及session与cookie技术,本文暂不深入),在用户最后要结算的时候才会提示用户登录/注册账号

我们在产品设计中要确保产品的可见性,试着在设计中解决如下问题:

重要的信息不要隐藏在用户找不到的地方。

不要让任何东西挡住要显示的信息。

避免将重要的信息设计成了广告盲区。。

在有折痕的页面中对信息进行分组,不要将重要的信息隐藏到折痕下面。

付费方式不要对免费体验的部分造成影响。

产品要让用户易于理解

在可用性方面,说到“易于理解”,就是让用户的回答必须是“是”!

共同参照概念

共同参照的意思,是指无论是谁使用某个东西,都可以和它的设计者保持相同一致的理解

文字

文字描述在产品设计中一直都发挥着重要的作用。比如,图书中的文字往往多于图片,iPhone上有了非常炫酷的图标也还要有关联文字。文字构成了大多数使用手册、菜单、产品说明、以及公共内容等的核心内容。

关于文字的可用性,要记住两件事情:

无论描述什么,都要简洁、明确表述

不要认为每个人都能正确理解你写的信息

用户不能理解的错误提示

创建共同参照的要点方法:

不要认为一切都是理所当然的

提前考虑用户可能遇到的问题

回答用户没有想到的问题

根据用户的实际使用情境检查内容

不同的使用情境,会随时影响所需(提供)的信息

图片

张图片会胜过千言万语。图像可以提升文字效果。最重要的是,图像可以形象地说明一个仅用文字很难描述清楚的事物。文字能够很好地传达事实和数据。但是照片、图形等往往能更好地传达物体微妙且常常富于情感方面的内容。

此外,图片可以展示一些东西如何使用、穿戴,等等。如果产品的使用方式略微与众不同,图片就会相当有用。

最后,只用图片和图像或许不能展示全部的内容。为了把信息表述清楚,请使用两种以上的共同参照要点方法。

天猫显示的商品图,不仅展示了商品细节、如何使用使用,还结合视频全面展示商品,这是一个很好的共同参照

图标

我们知道,图标固然很有吸引力,但它实际上在沟通起来相当逊色。事实上,只有4个图标最终被大多数人认可:

放大镜(查找)

房子(主页)

信封(联系我们/邮件)

打印机(打印)

经验告诉我们,如果你真的需要一个图标,最好使用类似微软苹果谷歌的设计。人们通过网站或应用程序学习东西,也期望能把这些知识应用到其他网站和应用程序中。不要设计太有创意的图标。虽然它们很漂亮,但设计成本很高。真正有创意的图标一般只有被点击才有意义,否则做得再好看也没有用。产品中任何东西的理念都是它可以做什么,而不是它看起来怎么样。

QQ的图标也会加入鼠标移入显示文字,这样做让用户更容易理解图标的含义

音频、视频

带宽增大、格式标准化的统一和易于使用的第三方服务的出现,使得人们可以将真正的多媒体内容快速地添加到网站和应用中。视频与音频的出现增加了用户交互的趣味性,人们可以通过听和看视频更快速的获取想要得到的资源。视频和音频往往都会是比较好的共同参照。

为保证我们的产品能够让用户易于理解,我们要做到以下几点:

说明、帮助文案要精确而全面。

不要使用让用户可能难以理解的缩写、官话或生僻词汇。

使用正确建立共同参照的图片。

要让所有用户都能理解网页内容或者线下流程。

使图标包含描述性文字,包括alt属性(当鼠标悬停在一个词或图像上,就会自动弹出一个小黄框)。

视觉设计的角度来创建成熟的共同参照。

可视化描述内容不要误导用户。

产品的一致性

产品规则不会出乎意料地改变。

一致性是实现清晰简洁的功能设计的关键之一,它让我们周围的世界变得更容易理解,从而使得我们的生活变得简单。苹果公司的设计师曾经说过,‘当事物表现不同时,应该保持视觉上的不一致;而当事物表现相同时,应该保持视觉上的一致性。’

例如,如果你一直把“提交”作为按钮标签,就不要突然将它改为“发送”和“接受”,以免大家疑惑。不要只是出于创意而混用术语。一旦建立了自己的语言习惯,就要坚持使用,特别是在有关表单和对话框的地方。

保持事物的单一性

既想要保持用词的标准性,也要为用户提供简单直接的选择。比如,选择性别时:

男;

女;

这是一个单一列表,其中所有的词语(把这些想象成网站上的菜单标签)都有明确的区别,没有任何重复,用户也可以轻易的做出选择。如果换成下面的情况,你会怎么选?

男;

女;

未成年人;

菜单分类清晰、明确

用标准化提升一致性

使用标准化的设计可以为用户的使用保驾护航,比如,做一款安卓应用要符合Google的相关规范,同样,iOS也有着自己的设计规范。标准化的关键不是阻碍创新,而是让解决方案清晰可见。

在设计不同客户端产品时,我们要确保熟练掌握其设计规范,这样才能设计出符合用户使用习惯的产品。

一个按钮,一个功能

多按钮的遥控器

我们都见到过让人讨厌的遥控器,面板上有很多个按钮。尽管这个东西有很多其他的可用性问题,但至少它没有多功能按钮。如果你希望一个按钮有多种功能,那基本上就是在自讨苦吃。人们总是不理解为什么一个应用程序或一个网站突然就切入到“不同的模式”里了。

例如,我可以使用遥控器上的菜单按钮来激活或关闭电视屏幕上的菜单。这很好。但是在菜单键周围还有四个光标按钮用于导航。左箭头按钮为后退功能,而在菜单关闭的情况下,它可以快速浏览12个不同的屏幕高宽比(宽屏,电影扩展16∶9,字幕变焦,等等)。如果我同时按下左箭头和右箭头,就会看到设置菜单,但它不同于按下菜单键时看到的菜单。总之,多功能按钮可以说是非常糟糕的。

苹果公司在消除多功能按钮和避免多用途方面做得十分出色。iPhone只有一个按钮,并且它只做一件事情:返回手机主屏幕。其他所有的操作都通过触摸屏上的“软”按钮完成。苹果鼠标也只有一个按钮。也就是说,如果你按住苹果鼠标一两秒钟,就会看到另一个菜单,就像PC上的鼠标右键。这是一个折中的方法,但它能正常工作并且易于操作。

当然,一键并不总是更为简单。多按钮也不总是坏事,只要它们能够合理分组,表明按钮的相关功能,并且不会在不同的时间代表不同的功能。

一个图标,一个功能

与按钮密切相关的是图标的操作。例如,谷歌备受欢迎的Gmail应用程序曾经是出了名地爱重复使用图标。毕竟,设置图标是为了对隐藏在图标背后的功能提供快速的认知提示。

当然,并不是只有谷歌这么做。windows产品,也同样也有重用图标的案例。

由此看来,尽管经过多年的研究和消费者投诉,就连那些大企业都还没有真正接受“一个图标,一个功能”的最佳实践理念。

不同的图标提供不同的功能,这样才能让用户对我们的产品不产生疑虑。

网易云音乐,细致的图标

让我们的产品具备一致性是极其重要的,我们要做到以下几点:

设计中不要存在看起来相同,但实际操作不相同的东西。

设计中不要存在看起来不同,但操作相同的东西。

不要为了创新而牺牲了对象或功能的一致性。

不要重复利用图标来实现不同的功能。

尝试在你的产品或服务中增加功能的一致性,也可采用他人开发的最佳实践。

使用颜色和物理分组对按钮和其他控件进行分类,让用户马上明白它们是有关联的。

产品的可预见性

让用户清楚地知道下一步会发生什么。

一致性与可预见性的一个显著区别是:一致性意味着某些东西每次都做相同的事情,可预见性意味着它会做你期望它做的事情。举一个简单的例子,花瓣网上每一个素材都有收藏的图标,这是一致性。用户点击图标意味着收藏了该素材,这是可预见性。

一致性与可预见性

让用户知道该期待什么

可预见性意味着某样事物会做你希望它做的事情。知道该期待什么的关键在于,在交互活动真正发生之前设置预期。

我敢打赌,在去一个餐厅之前你一定会通过‘大众点评’查看评论,来了解商户是否值得信赖。在购买图书(或其它商品)之前,你也一定会在评论区查看该书的评价。

当用户触发一个操作后,适当的提示可以为用户建立预期。

倒计时跳转页面提示,给予用户期待

品牌、客户满意度和预期

营销意义上说,品牌也与设定预期有关。其中一个关键部分就是对产品或服务进行市场定位。例如,我们认为沃尔沃是安全型汽车,捷豹是舒适的运动型汽车,雪佛兰是实用性汽车。

客户满意度和预期是紧密相关的。例如,国外的调查显示,并不因良好服务而著称且不涉人情的折扣商店沃尔玛,得到的客户满意度要高于以服务自诩的诺德斯特姆。为什么呢?因为没有人真正期望会从沃尔玛得到良好的服务,所以工作人员做任何一件让购物者更方便的小事都会令人印象深刻。但人们对诺德斯特姆的服务预期已相当高,所以他们需要更努力才能为客户留下深刻的印象。这等同于商业中的位高则任重。

所以,我们从中学到的是,如果人们不抱有期望,那就帮助他们建立期望;如果他们怀有期望,你超出期望越多,那么人们就会感受到更好的可用性。也就是,要做到超出用户的预期。

让用户知道有多少步骤

多次点击并不一定会使产品变糟糕,只要用户认为每次点击会使他们更接近目标,就会多次点击。因此,我们最可能预见的往往是那些提前告诉人们要点击多少次的过程。

如果有多步过程,请确保用文字或图片明示出来。

展示出过程的步骤

把东西放在用户期待看到的地方

让东西可见意味着把它们放在它们应该出现的地方。说到可预见性,将东西放在人们期望找到的地方也很重要。例如,在现实世界中,我希望电灯开关紧挨着门,希望在厨房里找到锅碗瓢盆。简而言之,用户希望所有东西就在需要用到的地方附近,并以合理的方式进行分组。

为确保我们的产品具备可预见性,我们可以尝试如下方法:

帮助用户利用过去的经验。

让用户知晓应该提前知道的事情。

提前告诉用户有几个步骤。

提供某种可见状态表明产品的不可用状态。

在产品的使用过程中确保符合用户的预期。

相关阅读

互联网产品设计之易用性

相关阅读

不会用剑:那些伪互联网海盗们

我们很难弄清楚时光到底意味着什么,但每到年底,回首一年往事,有时会有很不真实的感觉。时光可以带给我们波澜壮阔、世事沧桑,繁华落尽

创业,你真的准备好了吗?|4个互联网连环创业者的启示录

创业是啥?在他看来,创业就是:你坚持着就觉得很幸福的事情。2018年新年刚过的一个工作日中午,天气出奇的好,湛蓝的天空上划过几道云痕,虽

教育互联网化,对K12在线教育市场产生了怎样的影响?

K12在线教育在国内已经发展很久,但是貌似一直不温不火;最近几年曾经现象一般的课程盒子、超级课程表等也都在默默发展着。对于学生

如何用编程思维快速完成产品设计?

舒舟(阿里巴巴1688事业部):人们普遍认为,流程和工具不重要,重要的是想法和思路。话虽如此,不过我认为流程和工具也能反映一个设计师的设

后台产品设计的4个原则

大家都说后台产品难做、要求高,这是有原因的。而且这个原因会超出我们的认知,一起来看看吧。什么是后台产品后台产品也被我们称为后

分享到:

栏目导航

推荐阅读

热门阅读