了解Web设计的可学习性:提示和最佳实践。
建立一个可学习的网站要比听起来难的多。目标应该是一个清晰的用户体验,访问者可以快速的获取和理解。
移动应用设计者可以通过onboarding来解决这个问题,帮助用户学习界面。但网站不能总是提供冗长的教程。
让我们看一下learnability,看看你如何将这些技术应用到你的网站上。大多数访问者都知道如何浏览网页,所以这并不是说要做人们学习的界面,而是遵循惯例,这样他们就可以使用你的网站了。
为什么易学性问题
一旦人们知道如何使用接口,他们就会更多地使用接口。相反地,人们从那些看起来非常复杂的界面中跳出来。
你想设计学习能力,这样人们就会留下来。我们的目标是帮助他们快速学习你的界面,这样他们就可以继续使用。这样你就能得到更多的重复用户,网站的回弹率也会更低。
交互设计应该是可以学习的,或者至少不应该要求设计人员教人们如何使用接口。这对像Photoshop这样的复杂软件不起作用,但网站不是复杂的软件。
亚马逊
例如,每个人都知道亚马逊的网站。它有成千上万的种类和数以百万计的产品。有了这么多内容,你就会认为它是一团糟。
然而,浏览和搜索亚马逊并不太难。为什么?
因为他们关注的是帮助人们理解界面的相关组件。
使用更复杂的页面元素,您并不总是需要依赖于常识。例如,当您在UI中悬停一些元素时,Twitter会使用一些提示提示。
推特
他们的目标是鼓励更多的用户互动,并帮助人们继续使用Twitter。这是一种保证方法,可以增加用户总数,并鼓励更高的保留率。
考虑到这一点,让我们再深入了解一下一些可学习网站的技术。
一致性品种熟悉
我之前提到过,一个良好的设计需要一个一致的接口。这意味着您希望使用人们熟悉的常见页面元素,并在长期内保持相似。
某些元素应该保持在每个页面的相同位置。您的导航、徽标和主要内容区域应该都很容易找到。
但更复杂的应用程序需要的不仅仅是信息内容。举个例子,Dropbox的后端自推出以来基本上是一样的。
Dropbox
一旦用户了解了Dropbox的界面,他们就再也不需要重新学习了。这就是一致性的目标。
当有人第二次回到Dropbox时,他们已经熟悉了。一旦人们使用它一段时间,他们就会熟悉UI并期望它以某种方式表现出来。
你也可以在博客和内容网站上找到同样的方法,只是不太明显。例如,WebDesigner Depot推出了一个重新设计,并改变了所有的悬浮事件,以使用移动动画效果。
WDD
现在,当你有任何有特色的故事图片,标题,或任何导航链接,你会注意到有一个小动画把这些东西移向右边。
这在整个网站上都是一致的,它告诉访客要期待什么。
在您的设计中寻找一致性,并尽可能保持这些元素的一致性。
界面反应和反馈
移动世界经常谈论微互动和这些互动如何影响行为。这些交互通常是用户行为的动画或UI响应,它们对可学习的接口至关重要。
用户需要证明他们所做的事情(点击、提交表单、输入内容)实际上对页面有影响。
您可以通过简单的动画效果或创建响应用户的页面元素来实现这一点。
一个很好的例子是MailChimp注册页面上的注册表单。
MailChimp的
当你为你的帐户输入一个密码时,MailChimp的UI会自动地在你点击的时候划掉某些需求。例如,密码必须至少有8个字符长度。
一旦你键入8个字符,这个小项就会被划掉。它显示您的击键正在影响页面,用户可以了解密码字段是如何工作的。
另一个很好的例子是Photojojo电子商务产品页面布局。
Photojojo
每当你点击“添加到购物车”的时候,页面就会滚动到顶部,你会看到一个工具提示和购物车的概述。
这个接口的响应让您知道您刚刚添加了一些东西到您的购物车。这是一个明确的指示,你的鼠标点击做了一些事情。
遵循标准规范
在介绍web布局的一致性值之前,我已经讨论了web设计中的标准。
如果你正在设计一个平均每天使用的网站,那么你需要遵循惯例。现在不是让自己变得有创造力或者开始胡思乱想的时候。
扫一扫,加我微信