围绕你的新网站建立一个受众需要提供价值。这可能是伟大的内容,有价值的资产,独特的功能,或三者的结合。
但每个用户都需要一种与此值交互的方法。一些设计师将其概括为“UI/UX设计”,在这个术语中,您会考虑到实际的站点设计,但也考虑到了伴随它而来的用户体验。
当新访问者登陆页面时,他们可能对内容感兴趣,但不知道如何使用该设计。这就是学习能力发挥作用的地方。
齐齐哈尔制作网站在这篇文章中,我将分享一些技巧,你可以应用到任何主页布局,使它更有吸引力,更容易从零开始。但让我们先谈谈“可学习性”的起源,以及它是如何应用于网络的。
快速入门学习能力
设计人员希望构建用户可以实际使用的界面。但是,如果用户以前从未见过这个界面呢?最好的UI将是直观的,而且即使没有以前的经验,也很容易获得。
这些通常被称为“可学习”界面,因为用户可以第一次访问它们并了解它们如何快速工作。
微妙的提示,如动画效果,图标,字体颜色,和元素放置在页面上都会影响界面的工作方式。
学习能力的最好方法是用户测试。这可以是详尽的视频记录和现场会议,或非常简单的一对一的反馈,从用户远程访问您的网站。
可学习界面的最终目标是测试不同的人,看看他们有多快地获得接口行为。你的目标人群中的每个人都应该能够使用你的网站,并且能够轻松地快速地学习诀窍。
那么你到底是怎么做的呢?我没有所有的答案,但我确实有一些建议,让你走上正确的轨道。
计划用户行为
齐齐哈尔设计前的第一步是考虑你想让用户做什么在主页上。当然,这将改变基于网站和理想的目标。
简单的电子商务商店想要增加销售额。登陆页面想要增加转换,无论是购买产品,电子邮件注册,或其他什么。博客主页希望吸引访问者阅读他们的内容。
一旦你知道你想让访问者做什么,你就会有一个更容易规划的设计。因为您知道他们应该做什么,所以您可以显著地使用按钮、链接或表单来鼓励这样的用户行为。
例如,以OptinMonster主页使用清晰的CTA按钮来吸引注意。
他们的最终目标是提高注册人数和转化率。但是,在这个页面上登陆的大多数用户完全不知道这个产品是什么,也不知道他们为什么需要它。
标题中的粗体文本解释了一点(A/B测试和访问者转换)。但是大多数访问者在点击一个名为“现在就得到OptinMonster”的按钮之前,想知道他们进入了什么状态。因此,就在这个按钮旁边是一个链接到一个解释视频的产品。
在设计可学习的接口时,这是一个重要的经验教训。是的,考虑一下你想让用户做什么是很重要的。但也要考虑他们想做什么或者他们从一开始就倾向于做什么。
登陆页面上的大多数人都想在考虑注册之前了解它到底是什么,以及它提供了什么。
现在,这在大型社交网站上可能有所不同,比如奎拉或Pinterest。这两个网站都迫使您注册或登录之前,您可以进一步浏览该网站。
我还认为,这两个网站的主页相当通用,并不是很有解释性。
但无论如何,这必须有效,因为这些网络是绝对成长几乎没有减速的迹象。
了解你的观众和品牌。除非你成为下一个Snapchat,否则在要求用户加入之前,你确实需要在产品上销售用户。坦率地说,它甚至不会伤害Snapchat提供关于应用程序在推动注册之前做什么的补充信息。
用对比法
一旦用户出现在您的页面上,您将希望吸引他们参与元素。这些可能包括注册/登录按钮,新的博客文章,或热点项目购买您的商店。
您可以应用的最佳设计技术是强烈对比.
使用额外的空白,更大的文本,更亮的颜色,或类似的功能来吸引眼球到页面的那个部分。让这些元素从第一页中脱颖而出,这样用户就会意识到,甚至潜意识中,有些东西是突出的,需要注意的。
的主页布鲁塞尔把注意力集中在搜索表格上。是的,网站上有指向新资源和免费赠品的链接。但大多数用户都希望搜索特定的资源,因此搜索字段将占据突出位置。
请注意,对比的数量并不感到不和谐或不合适。这将是设计不善的一个例子。
相反,你想要的只是足够的对比,使元素从周围的元素中脱颖而出,但仍然足够干净,以融入设计。
另一个例子可以在葡萄酒图书馆这是一家电子商务葡萄酒店。这个主页的特点是传统的导航标题和搜索形式。但它也为好奇的买家提供了三瓶葡萄酒。
这些瓶子很突出,因为主页上没有其他葡萄酒产品的图片。每款葡萄酒都有一个大的“免费送货”丝带和一个红色的“添加到购物车”按钮。
小细节,如大小,位置和颜色,可能看起来并不是很重要的前期。但是在一个高流量的网站上,如果你对大量的访问者(100 K或更多)进行A/B测试,你会发现明显的不同。
一旦你知道你想让访客做什么,你就应该用对比来引导他们走向那种行为。
不要重新发明车轮(完全)
这个标题的额外后缀意味着一些创造性总是被鼓励的。但是有一条线,可用性是因为创造性而受到损害的。
博客主页应该看起来像博客。这是如何设计的并不总是重要的,但基本的应该在那里(最近的帖子,类别导航,等等)。
您会注意到第一网页设计师它曾经是一个博客,但是它转移到了一个网页设计课程,一个压缩页面。
同样的情况也可以这样说。普罗布洛格将主页更新到“从这里开始”模式然后把博客放在网站的其他地方。
如果您查看主页的不同部分,您将很快学习如何浏览该网站。图标、文本和通过空格/字体大小的对比引导您的眼睛在网站上引导您通过体验。
主页设计、内容结构和布局层次结构都是引导用户围绕设计的视觉线索。一个可学习的设计将感到熟悉,许多用户将认识到这些相似之处。
重复相似的设计模式
用户与你的主页互动越多,他们就会变得越舒服。
为了实现这种自然的舒适感,不要在页面上添加太多复杂的特性或动态小部件。您的动态特性都应该以类似的方式来创建一致的用户体验。
例如,Netflix主页使用图标作为标签链接在信息框之间切换。一旦用户点击其中一个图标,他们就会很快明白链接不会加载新页面。事实上,一些用户甚至可能不知道图标是链接,直到第一次点击。
一旦用户与Netflix主页交互,他们就不会有任何困难。登录按钮固定在右上角.用户可能需要几秒钟的时间才能找到它,但由于大多数网站修复右上角的按钮/链接,这是一个安全的假设。
另一个很好的例子是主题森林主页它在主页上添加网格布局中列出的最新项目。
齐齐哈尔制作网站每个产品显示为一个单一的图标,但当你悬停任何缩略图,你会得到一个小的预览窗口的主题,就在你的鼠标。
这适用于页面上的每个小方块图标,一旦用户了解了这个特性,他们的浏览习惯就会改变。
搜索栏要突出得多,很可能会吸引大多数初次访客的行为。但是页面上的其他元素同样容易学习,而且在整个网站上都是一致的。
使用一致的特性,您可以构建用户所学习的无声语言。即使是最不懂科技的人也能很快学会如何与页面的功能交互,如果它们是一致的,而且行为很容易理解的话。
自己设计
如果你不能应用这些技巧和技巧,那么这些技巧都毫无意义。我试图跨越从博客到电子商务网站和社交网络的大量例子。这将为您提供范围广泛的可学习接口,供您在自己的项目中学习和考虑。
但记得先想想你的访客。计划你的内容战略,并设计你的网站围绕你的用户的目标,而不是围绕其他网站的目标。