设计重点突出的界面以提高用户参与度
为了更好地吸引用户,重要的是编写引人入胜的内容 ,并以醒目的设计呈现该内容。
大多数设计人员在谈论交互性时都会想到界面 ,但是页面内容也可以鼓励用户交互。
用户参与度是一个棘手的指标,可以针对不同项目以不同方式实现。
说起来容易做起来难,但是,如果您了解了一些基础知识,便可以为项目精心制作具有丰富内容的集中式UI 。
这是吸引访问者的两种最常用的方法,并且如果您可以优化体验,那么增加页面上的可观时间就不会有问题。
在这篇文章中,我将向您展示如何在基于Web的界面上增加用户交互和内容参与 。
捕捉新奇
界面设计也是如此,新颖性代表了似乎跳出页面的元素。
新颖的事件吸引了我们的注意力,因为它们脱颖而出 。
新奇的概念定义了一个事件或事物,这些事件或事物通常是新事物,通常是非常新的事物,并基于上下文而具有独特性。
设计不同的唯一事实常常引起人们的注意。
用户似乎倾向于新颖的体验,界面和UI元素,因为它们是不同的。
我最近发现了一篇很棒的文章,讨论了关于参与的新颖性的重要性。
您还可以使用背景照片,插图或应用程序屏幕截图 (例如在Uber for Business登陆页面上)来增强新颖性。
一个常见的例子是在大多数登录页面上都可以找到号召性用语按钮 。
它们在首次加载时会进行动画处理,因此将设计的新颖性与动作结合起来引起了人们的注意。
该页面上确实有一个号召性用语按钮,但我的注意力立即转到了屏幕截图 。
另一种选择是使用插图图标作为链接的 GiftRocket ,以进一步深入研究该站点。
您无法始终将人们吸引到该站点,但是,如果首先在内部层面吸引他们的注意力,您会看到更好的结果。
这两个示例都利用了新颖性来发挥自己的优势 。
设计是访客首先看到的,您需要在几秒钟内引起他们的注意,以鼓励进一步的参与。
可略写的版式
您可能希望吸引人们阅读您的内容,但是您只能做很多事情。
研究发现,大多数用户扫描网页而不是逐字阅读。
我可以想到至少三种可用于内容中以提高可读性的 强大写作技巧 :
最好的选择是创建带有标题,加粗文本和图片的可浏览内容,以说明您要说的内容。
- 用清晰的字幕划分内容
- 分解段落以使其更小
- 使用项目符号列表可以更快地分享您的观点
通过将内容分成几小部分,您将更容易获得关注并吸引人们进一步进入网站。
目的是使读者以任何必要的方式使页面向下移动 。
内容由尼尔·帕特尔(Neil Patel)撰写,他经常写很长的内容,但他将段落分为1-3个句子。
查看Quick Sprout博客以获取这种写作风格的示例。
边距和填充在布局设计和可读性中都起着重要作用。
另外,请确保增加段落之间的空白量 。
如果标题正确 ,并且在整个内容中使用图片/项目符号 ,则会使人们略读和深入阅读。
无聊的副本不会吸引人,但是有趣的副本太小或缺乏对比都不会。
设计文字,以便阅读时实际上很有趣 。
抢眼图片
从SEO角度来看,这很棒。
Backlinko 最近的一项案例研究表明, 至少包含一个图像的页面通常比没有图像的页面排名更高 。
请记住,新颖的页面元素容易吸引。
如果您可以将一幅图像保持在折叠上方或接近顶部,则还可以在访客反弹之前吸引他们的注意力。
但是用户参与度又如何呢?
但是,与大多数设计技术一样,质量比数量更有价值。
用户可以从阅读中休息一下 ,欣赏图像,或者在图像和书面内容之间建立联系。
当您在整个页面中穿插一幅图像(或多幅图像) 时,将使无聊的文本块变得单调 。
您应该尝试至少包含一张与内容相关并为读者提供价值的图像 。
在另一方面,质量较差的图像不工作,以及在某些情况下,他们所造成的游客的反弹比没有图像更快 。
Moz的案例研究发现,高质量的图像往往会使访问者在页面上停留的时间更长。
TechCrunch会在其文章中使用精选图片来完成此操作,您通常会在首屏上找到精选图片 。
这是让访问者了解内容的全部内容并增加还包含帖子缩略图的相关帖子小部件的CTR的完美方法。
您可以为所写的每个帖子设置一张不同的照片,然后将其强制显示在页面顶部。
WordPress通过发布缩略图功能轻松添加特色图片。
对比页面元素
对比度会在设计的特定区域或某些内容块之间产生硬性楔入。
如果您需要引起页面上某个特定区域的注意,那么不对称是您最好的朋友。
颜色,大小或空白的大并列吸引了人们的眼球,因为它破坏了布局中所有其他内容的模子。
参观者自然很喜欢对比,因为它与众不同。
两个号召性用语按钮之间有很多对比,一个按钮用于下载Sketch试用版,另一个按钮用于购买副本。
我最喜欢的页面元素对比示例是Sketch的主页。
这将引导访问者仅通过视觉刺激就进入“ 立即购买”按钮。
与免费试用版按钮相比,按钮上的文字也更亮。
购买按钮使用的完整背景颜色比标题中的其他颜色要明亮得多。
这是蓝色背景上的亮绿色按钮,看不到其他绿色元素。
该标题只有一个标记为Get OptinMonster Now的按钮。
您会在Optin Monster的首页上注意到类似的技术 。
这可能是一个很棒的视频,值得关注,但不如试用/注册CTA按钮那么多。
在按钮旁边直接是一个用于视频预览的小文本链接。
颜色,大小和形状都会引起您的注意,因为它与标题中的其他所有内容形成对比 。
一个常见的选择是新闻通讯注册表格 ,例如Aeolidia上的示例 。
对于博客,您可能具有不同的用户参与资格。
它以独特的背景色,有趣的字体和可爱的King Triton图标在页面其余部分中脱颖而出。
如果向下滚动到内容的底部,您会注意到一个专门为新闻通讯表单设计的花哨的注册框 。
如果您正在寻找更多示例,请查看此Codrops文章 ,其中包含实时非对称网站的提示和屏幕。
通过A / B测试跟踪指标,查看有效的方法和无效的方法。
对比设计的最佳方法是研究示例并进行实验。
鼓励用户互动
您可以做任何使用户感到与页面互动的工作。
没有一种千篇一律的花样。
静态博客和动态社交网站均是如此。
有许多种方法可以使访问者对网站感兴趣,但是最常见的方法是让他们做事 。
您还可以为用户评论或电子邮件通讯添加表单 。
在静态站点中 ,您可能会添加许多相关链接以阅读更多内容,或者包括图片幻灯片 。
最大的障碍是教会用户网站的工作方式以及如何正确使用界面。
当涉及到动态界面时 ,该站点的目的通常是鼓励用户参与。
我发现的最佳策略之一是设计一个带导游的导游 ,带领参观者了解每个主要特征 。
请查看KissMetrics关于用户参与技术的帖子 。
如果他们没有关注任何人并且没有任何关注者,他们为什么要发推文?
想一想Twitter的前景会给一个全新的用户带来多大的困惑。
此功能使新用户可以开始使用该平台,并可以尝试以下功能 ,跟踪,推文和私人消息。
注册期间的“遵循建议”框可帮助新用户熟悉Twitter的工作方式 。
直观的界面需要说明 ,而简单性可以更快地吸引人们的注意力 。
主要功能应与用户的仪表板或主页相距1-2次点击 。
除了导览外,您还希望使界面简单 。
如果您正在寻找更多的UX设计参与技巧,请查看以下相关文章:
通过了解所有这些技术,您将可以更轻松地构建用于解决用户问题并鼓励新用户加入的界面。
- 用户入职策略以提高参与度 (thinkapps.com)
- 逐步参与课程 (uxbooth.com)
- 不要以为新用户想学习如何使用您的产品 (uxdesign.cc)
翻译自: https://www.hongkiat.com/blog/designing-focused-interfaces-for-attention/