最专业的八方代购网站源码!

资讯热点
易于使用的互联网产品设计

发布时间:2019-3-5 分类: 电商动态

对于代购源码网站而言,加载时间,导航视图,页面布局甚至按钮大小都是易于使用的领域。除代购源码网站设计外,易用性同样适用于移动应用程序以及我们周围其他产品和服务的设计。易用性是产品设计的重要原则,是产品竞争力的核心,是现代企业不可忽视的商业标准。

产品功能

确保产品/系统正常工作。

产品的功能是确保产品正常工作。如果一件东西即使用最基本的功能也无法使用,那么无论设计多么美观,它都会变成一片云。因此,从功能开始就对可用性的研究是最佳选择。

就代购源码网站而言,代购源码网站的基本用户需求可归纳为三个功能:

按钮和链接点有反应;

代购源码网站导航很敏感;

代购源码网站的处理速度是可以接受的。

今天,越来越多的用户体验关注,代购源码网站的三个方面大部分还比较到位,我们可以参考当前主流代购源码网站建设的代购源码网站,如淘宝,百度,新浪,搜狐等。可以让我们减少错误的机会。

以下是代购源码网站表格上的功能设计说明

创建表单时有几个关键因素:

人们应该能够提供表格中要求的信息;

固定输入格式可以大大增加表单错误;

相互依赖的形式和登录也会增加出错的可能性;

不明确的使用说明会极大地影响用户的使用。

人们应该能够提供表格中要求的信息

表格中所需人员填写的必要信息被定义为必填字段,并已被设计界广泛使用。通常,在设计表单后,某些特定字段会以某种方式标记。通常,星号(*)表示用户必须输入内容才能完成表单。这是一个必填字段。

这些必填字段可以是需要根据业务需求获得的信息。设计原则是减少可以填写的表格数量,并最大限度地减少用户的输入操作。但是,有时由于业务需求,我们必须为用户提供这些所谓的必填字段,这次我们要做的就是最大化运营体验。

无论如何,在进行表单测试时,我们希望确保用户可以轻松地提供表单所需的所有信息。这无疑是改善代购源码网站转换的重要因素。

固定输入格式可以大大增加表单错误

字段验证是为了确保计算机获取可理解且可以正确存档到数据库中的数据。将检查字段的验证语法,确认信用卡是否在足够好的字段中输入,等等。用户无法看到这些规则,这意味着错误的概率很大。

例如,如果您想获取用户的信用卡号,用户在键入时将直接输入一个16位数的字符,或者用户将在每4个数字之间插入一个空格。此时,将发生错误,因此很多人无法返回。显然,系统必须得到16个数字,没有空格。此时,我们需要做的是首先在文本框中显示默认文本,例如“ldquo;请输入信用卡号码”其次,当用户输入号码时,号码会自动用空格字符“1234 5678 5488”分隔,最后,当用户输入非数字字符时,用户文本框失去焦点时会出现错误提示。

相互依赖的表单和登录也会增加错误的可能性

表格的依赖性是指在填写表格后需要提交表格时对下一表格的处罚,即如果要提交表格1,则前提是完成表格2的提交。例如,当我们在网上购买电影票的代购源码网站上选择电影时,在选择要观看的电影之后,当完成购买电影票的表格时,需要完成注册表格,这非常严重。注册完成后,您必须立即重新执行操作。

当然,诸如购物车中的连续页面之类的依赖形式并不那么烦人。仅当站点中断用户的当前操作并要求他执行其他任务时,才会引发依赖关系表单。当用户根据特定路径从一个交互移动到另一个交互时,它将对代购源码网站的用户体验有意见,因此不要中断用户的操作。

总之,如果设置了两个或更多不同的表单,则保证以正确的顺序呈现给用户。同时,为用户提供足够的时间来填写这些表单,以便网页超时强制用户返回。

不明确的指令将极大地影响用户的使用

模糊的指令可能会使用户犯错并让用户感到困惑。填写表格时,我们会看到不同字段的文字说明,这些说明将有助于我们有效地完成表单验证过程。但是,也有一些例外。例如,填写日期时,文本框旁边的提示文字为“请输入日期,例如yyyy/ww/tt””,当用户输入1989/12/25时,系统报告错误,因为仅限计算机接受19891225的日期格式。

实际上,很容易使数据库忽略斜杠,短划线,空格和其他特殊符号。当代购源码网站上需要特定的输入格式时,相关的提示信息应准确无误,以便用户能够成功完成表格的验证。

让我们看一下导航灵敏度的功能

在前面提到的代购源码网站导航灵敏度中,这主要涉及系统的速度和效率。在代购源码网站上的总结,越来越多的证据表明,页面响应用户请求的速度越快,转换率就越高。谷歌和亚马逊都表明,将响应时间缩短半秒将大大提高转换率。导航的灵敏度也适用于移动设备,用户可以等待几秒钟继续使用按钮而无需耐心。

无论如何,如果您认为使用起来很慢,那么我可以保证其他人会认为它更慢。那么我们需要做些什么才能改善这种状况。您可以从压缩照片和图像的文件大小开始,只要您可以使用Photoshop等图像处理工具,就可以执行此操作。经验法则是,如果任何东西的质量几乎不可接受,它的大小可以进一步压缩。不要将两个图像并排放在一起检查。否则,你肯定会使文件太大。您应该选择针对Web显示进行优化的照片或图像。

我们希望确保我们设计的产品正常运行。在设计过程中,我们必须经常问自己一些问题,例如:

您的产品目标是什么?

当用户使用您的产品时,如果他们被中断,他们可以恢复原始任务吗?如果没有,您可以做些什么改变以使操作更容易?

你能想到一些边界的例子吗?

你的表单是容错的吗?后端业务规则是否需要过于严格的输入模式?

系统中是否存在功能问题或重新设计流程或服务存在问题?

您的系统可以在所有浏览器平台上运行吗它在不同设备(智能手机,平板电脑,笔记本电脑)上运行良好吗?

操作太长后用户需要等待的时间?是否有必要记住优化以减少用户的等待时间?

产品响应能力

用户知道产品/系统正在运行并知道哪些功能正在运行

当我们与他人沟通时,我们总是独自谈论而另一个人在倾听。我们将在对话期间更改角色,并重复了解对话结束的方式。在这个过程中,我们需要来自另一方的反馈,例如对方的回答,点头,皱眉,微笑等,或来自语音的反馈。在所有这些情况下,可感知的反馈是有效沟通的关键部分,因为有利于良好的可用性。

如果响应机制不合适,或者完全缺乏响应机制,那么可用性就会出现问题。想象一下,您的手机在通话时不支持振铃和振动。人们非常依赖这种反馈。

响应元素

响应能力可分为三类:

邀请技巧:吸引眼球运动,指示好事发生的迹象。例如,标题广告,横幅等。

转换技术:立即响应用户的行为。例如,在浏览网页时,光标在可点击链接上显示手形,在技术术语中称为“查看”。

响应机制:响应机制是指用户完成表示用户操作后的状态的主观动作后发生的情况。例如,在线下载文件时,警报会提示正在下载或显示下载文件夹。

缺乏反馈是一个相对常见的问题。在现实世界中,我们希望服务处的服务人员热情地对我们说:“谢谢,我希望你有一个美好的一天。”如果你热情,那么对你视而不见是不愉快的。当我们浏览网页时,完成了多少次点击,我们会在提交我们填写的内容之前经过漫长的等待。点击按钮或其他控件,它需要与服务器交互,然后等待是不可避免的,此时我们在设计反馈时要小心,不要让用户等待太久。一些好的做法:Twitter的赞誉,无论网络的强弱,都会表现出成功,另一方面会被移交给系统;微信发布圈子的朋友,无论是否有网络都会显示成功发布,另外还要交给系统进行处理;注册/登录时,通过按钮的不同状态反馈当前状态等。

让我们再看一下切换提示的例子。

当光标移动到屏幕上的某个位置时,也就是说,当光标悬停时,快速响应非常重要。通常,光标从箭头变为伸出手指的小手形,您可以单击内容。切换提示通常伴随着文本或图标样式的变化,如颜色等,当鼠标通过它们时,它会立即触发样式的变化,从而可以有效地提示用户点击。

网络环境中的响应机制

有很多这样的反馈,加载图标,iOS菊花转,谷歌的旋转图标,苹果的旋转沙漏光标。由于响应缓慢,Apple的光标收到了许多不友好的昵称。由此可以看出,提供反馈通常可以缓解问题,但无法解决问题。因此,在处理长期操作时,最好使用显示进度的图表。

除了基本的屏幕信息,例如“您的文件已经成功下载”,以及各种动画,我们还可以使用各种设计模式来完成不同的任务。以下是一些比较常见的方法;

亮度调整:使特定区域变亮以指示其处于活动状态。例如,当微信收到付款时,页面会自动变亮。这不仅可以通知用户正在进行的操作,而且还可以避免由于屏幕太暗而导致的QR码扫描不方便。

声音:不同的操作与不同的声音相关联。我们最熟悉的是手机收到电子邮件或短信时发出的不同声音。淘宝2017版已经向APP添加了声音提示,但是有一个值得考虑的问题。当用户不知道当前音量时,此提示会震惊。应该考虑到与手机结合使用的音量不高。范围。

目前有数千种处理响应的技术,有些是好的,有些是坏的。但无论您决定使用哪种响应机制,只要用户能够看到,听到或感受到它,并理解这些响应的含义,就可以获得良好的可用性。

为了确保系统的响应能力,我们必须确保我们的系统/产品:1。当您单击按钮时,您必须能够看到按钮的响应; 2.当指针悬停在链接或其他交互式组件上时,更改形状。表明你可以点击什么; 3.一些简单的任务,例如下载文件或单击以完成付款流程。在这个过程中,代购源码网站应该响应操作; 4.需要很长时间处理的所有流程(如下载文件)应提供持续反馈,以显示流程的进度; 5.及时获得反馈。

产品必须符合人体工程学

用户可以轻松查看,单击,弯曲或翻转

人体工程学是研究如何设计满足人们身心能力的设备的科学。我们对人体工程学的理解大多保留在办公环境的人体工程学中,例如办公椅调整,桌面高度,计算机屏幕位置等。但人机工程学不仅适用于计算机屏幕周边的各种情况,而且适用于屏幕上以及移动端发生的各种情况。

以下是12种基本的人体工程学原理:

工作在正常位置;

减少过度压力;

确保一切都很容易;

工作在正确的高度;

减少过度运动;

最大限度地减少疲劳和静载;

最小化压力点;

提供许可;

移动,锻炼和伸展;

保持舒适的环境;

提高清晰度并让人们理解;

改善工作流程。

从可用性的角度来看,这些符合人体工程学的原则很重要,因为尽管它们基于物理世界的影响,但它们对屏幕产品的设计产生了深远的影响。例如,光标可以充当我们的电子手指,并且像真正的手指一样,它也具有可以和不可以完成的动作。另外,随着触摸屏的出现,我们的手指通常是光标。突然间,我们发现自己不得不处理在线和离线人体工程学问题。

当谈到在屏幕设备上应用人体工程学时,你必须提到菲茨定律。法律的内容并不多,以及菲茨定律在设计中的作用:

可点击的对象(如按钮)需要合理的大小,例如iOS规范中的44 * 44px规则。

屏幕的边缘和角落适用于菜单栏和按钮等元素。

可以更快地打开用户正在处理的对象旁边显示的控制菜单或工具栏,例如单击鼠标右键以显示其旁边的菜单。

大目标比小目标更容易捕捉和制作

我们当前的代购源码网站上有很多下拉菜单,它们会触发二级菜单,它显示在自身的一侧。关于这个下拉菜单需要注意的是:

确保单击区域大于链接中的文本区域。因为它更大/更容易点击。

确保为用户提供足够的时间将光标移动到适当的位置。具体做法:1。在触发扩展菜单之前,光标悬停在链接上约0.5秒。 2.触发动画菜单后,应尽快显示菜单项。如果可能,显示器应少于0.1秒。 3.用户从菜单中删除光标后,等待0.5秒再关闭菜单。这样,用户不必严格地将光标固定在菜单的活动区域中,而是可以在操作期间更加任意地移动光标,或者选择相对接近的操作路径。

通过延迟下拉菜单/弹出菜单的折叠时间,用户可以将光标直接移动到对角线上的菜单项,而不会触发其他菜单项或丢失他们想要点击的菜单项

屏幕人体工程学的一个重要发现是如何最好地创建长链接列表。可用性专家Jacob·雅各布尼尔森提到了“F模式”。当您查看眼动追踪图时,您会发现F形图案。眼动追踪图通常被称为热点。你看到的越多,你的红色就越多。

此热点图清楚地显示了人们的眼睛如何浏览链接的页面。创建列表或标题时,请务必将最重要的单词放在前面

这意味着在准备列表(尤其是链接列表)时,您需要确保将最重要的单词放在链接的开头而不是后面。这也适用于机器可读的标题,即在搜索结果列表中显示特定页面名称的标题。因此,请仔细查看不以最重要单词开头的列表,菜单或链接。

另一个基本的人体工程学原理是提供间隙,这意味着确保两个购物车可以同时通过超市的过道,按钮足够大,可以轻松点击。

当我们创建代购源码网站或应用程序时,我们需要在页面中的元素之间留出足够的空白,以确保用户的使用不会干扰。亚马逊的代购源码网站上有一些弹出窗口,它们可以正常运行。在下图中,弹出窗口中的每个元素(文本,按钮等)都保持自己的间隙,并且级别清晰。

为确保产品/系统符合人体工程学原则,我们必须确保:

按钮应足够大,以便用鼠标或手指轻松点击;

其他交互式控件(如代购源码网站上的下拉菜单)应该可以通过鼠标轻松捕获(移动设备上的控件应该很容易被手指捕获);

页面中的所有元素之间必定存在一定的差距,这些差异不会相互影响;

我们的页面使用户更容易知道该做什么;

产品/系统中必须没有逻辑任务或工作流程,我们的产品/系统应该易于使用。

产品便利性

一切都需要在那里

方便的定义很简单:1。让人感觉舒适。 2.触手可及。数码产品的便利性现在正在使用该产品,因此用户可以放心使用我们的产品轻松解决他们想要的问题。而且,它应该是触手可及的。例如,如果我们饿了,拿起电话找到美国外卖或百度外卖可以解决我们的问题。

让人感到舒适

在这里,我们来看看计算机的多模式输入和输出。计算机的多模式输入包括键盘,鼠标和语音。多模输出包括声音,视频等。多模式体验意味着任务执行期间的界面切换可以分为三类:

在同一界面中从一个任务切换到另一个任务:表示我可以保持在同一个浏览器窗口中并在不同任务之间切换。

打开相关界面:表示任务可以从计算机屏幕移动到智能手机,任务将继续。

在不相关的接口之间切换:表示您可以从计算机屏幕移动到打印机输出。

这三种情况的经验可以很好地完成。我们必须避免糟糕的经历。例如,一个代购源码网站有两种相互依赖的形式,但必须单独填写,这将给用户带来不好的体验。用户期待的是无缝体验。让人们以最少的干扰,最快的方式和最少的例外来完成他们的工作。

从可用性的角度来看,便利问题与一个经典问题密切相关:只有当手机断电时,你才会意识到公共场所的电源插座是可怜的;只有在下雨的时候,你才会注意遮阳伞。在哪里放。进入一个不熟悉的地区,我们会找到一个舒适的区域。这是因为符合我们日常习惯的东西可以提供这种舒适感。事情提供了舒适,我们认为它们很方便。因此,我们的产品/系统为用户提供了习惯性的舒适感,因此用户在使用我们的产品时可以找到熟悉的舒适度,这将为我们的产品增加很多。

触手可及

在这方面,我们正在关注“ldquo;只需点击一下即可完成如果您正在修理汽车,最好保留手头所需的所有工具和任何配件。如果您正在烹饪,您可以在开始之前购买所有食材并做好准备。如果您想浏览亚马逊上的主题,那么您应该收集所有必需的链接并在十几个浏览器窗口中打开它们?当然不是!

您希望亚马逊能够完成这项艰巨的任务,并为您找到并提供有效的链接。在亚马逊的结帐页面上,所有链接和其他必要信息都放在同一个地方,所有产品信息都在另一个位置。亚马逊为您安排了一切。不同的信息被分组。

为确保我们的产品/系统的便利性,我们必须确保:1。将相关内容分组以便于查找。 2.如果您具有多模式体验,请确保不同的进程不会相互干扰。 3.提供有用的内容。 4.消除强制用户多次输入相同信息的区域。 5.为用户提供便利。

产品易用性

帮助人们避免操作错误或损坏产品

提示

指出人们可能忘记了他们做了什么,例如在关闭文档之前保存文档,或者忘记将附件粘贴到电子邮件中。

文明的吐司提示

我们通常会看到两种类型的系统提示。一种是比较标准提示信息“你要保存更改内容吗?”这种提示信息一般是提醒用户提示信息用户不是很反感。另一个系统提示将对用户的操作产生一些影响,并迫使用户做出许多选择,例如“ldquo;您确定要删除该文件吗?”“你确定吗? <操作无法恢复> (胡说八道,我删除你的选择当然是删除了!)。

我们使用提示信息不会中断事件处理过程的流畅性,也不会妨碍人们的工作。在现实世界中,许多不恰当的新闻也会干扰我们。一些语音邮件系统总是播放长广告并列出菜单项,这非常令人沮丧。简而言之,如果没有必要帮助,请不要显示它。

警告

在某些内容中添加标签或标签,表明必须先完成这些标签或标签,然后才能进入下一步,例如输入密码或选中“我接受条款”复选框。

警告可以告诉人们出现问题(例如密码错误),状态已更改(电池电量不足)或其他需要您注意的事项。但是,某些警告只是让用户确认计算机或移动设备已执行某些操作。例如,当您将耳机插入智能手机或拔出耳机时,此消息始终显示在屏幕上:

“这是一个连接到电话插孔的设备。”当然,我知道我检查了耳机。是否有人不注意在手机上窃取耳机?

避免人们犯错误的起点是好事,但不断陈述明显的事实会使用户烦恼。通常在设计此类警告时,必须不断评估其相关性,并确保他们做某事。警告通常用于通知系统不可预测的情况,例如错误故障,而不是用户的显式状态。

在移动设备中,对话框是一种警告形式,如iOS和Google规范中所定义。对话框中被中断的用户流的形式适合于用户执行将导致严重错误的交互式动作(在软件中)。在此操作的情况下将导致用户状态更改)或系统本身的异常警告。在用户掌握的情况下,使用提示更合适。

应用中用户操作的警告

强制

消除一些不可用的选项,例如灰显不可用的菜单项或在特定时刻不适用的菜单项。

在数字世界中,强制执行操作的方法是使由于某种原因不可用的菜单项变灰。例如,如果文档已保存且文档尚未修改,则“保存”按钮将保持不可用状态。我们可以更多地考虑这一点,灰色的菜单项用户不知道原因,为什么你之前点击?我们希望该程序可以提供一些解释,为什么此菜单项目不可用。例如,当您将鼠标悬停在灰色的菜单项上时,会有一个小提示来解释弹出窗口以解释原因。当然,到目前为止,还没有任何计划这样做过。

“下一步“按钮变灰了

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

屏幕信息有时需要我们做出选择,甚至是那些要求我们点击“确定”的屏幕信息。我会考虑一下我需要认识到的。在设计此提示消息时,我们需要问自己一些问题:

用户是否知道此消息出现的原因?

用户是否足以理解此提示并做出正确的决定?

提示中的信息是否有用,是否会使用户感到困惑?

用户是否理解做出决定的后果?

如果所有答案都正确,则必须修改提示信息或考虑更改设计并删除提示信息。

为确保产品/系统简单易用,我们必须确保:

为了以防万一,为用户提供多个响应。

提示应清晰简洁,易于理解。

准确区分提示和警告,不要混淆。

不要阻止用户完成任务。

为用户提供认知线索,以正确引导用户使用该产品。

确保用户在需要的时间和地点获取所需信息。

作者:转瞬即逝,互联网产品设计师,4年互联网产品经验。

本文最初由@流年发表。未经许可,禁止复制。

该地图来自PEXELS,基于CC0协议

« 服务器推送HTTP/2最佳实践 | 代购源码网站优化对数据分析的重要性 »