Back

DTC详情页的设计

目录

设计原则

用户会看多少内容

面对网页,人们只有在对内容真正感兴趣的时候,才会逐字阅读。他们通常会快速地略读(尼尔森),寻找页面中突出的关键词、有用的标题、简短的段落,和易于扫视的列表。因为急着要找到他们想找的特定信息,他们会跳过跟自己无关的内容。
所以,不要指望人们会仔细阅读那些看起来既不易于扫视,又跟他们无关的内容。在网页上应该避免长篇幅文本、冗余说明、营销文案和客套话。

  1. 用户阅读方式: 用户在网页上通常不会逐字阅读,而是通过扫描页面来获取信息。他们会挑选出个别的单词和句子,快速浏览以寻找相关内容。这种行为使得用户对网页的阅读效率提高,但也意味着许多内容可能被忽略。
  2. 扫描行为的稳定性: 根据过去13年的眼动追踪研究,用户的基本扫描行为保持稳定,尽管网页设计不断变化。用户倾向于快速浏览页面,寻找对他们有吸引力的信息。
  3. 阅读时间限制: 在平均的网页访问中,用户通常只能阅读最多28%的文字,实际上更可能只阅读20%。这表明,用户的注意力有限,网页设计需要考虑如何在短时间内传达关键信息。
  4. 内容聚焦与实际阅读: 当网页内容能够帮助用户集中注意力在感兴趣的部分时,用户可能会从扫描转变为实际阅读。这种转变需要良好的内容布局和设计,以引导用户的注意力。

用户的阅读少到什么程度?

用户会滚动多少屏幕?

第一屏的内容仍然会得到最多的注意力,而且当用户在考虑你的页面是否值得一看的时候,它也是至关重要的。 当前的用户习惯已经非常的习惯滚动。尼尔森的研究表明超过90%的用户会在进入页面后发生滚动。 后面的内容滚动多少和你的设计息息相关。
为了使用户继续往下滚动需要遵循3个原则:
1、避免完整性错觉
这篇文章详细讲述了什么事完整性错觉——Nielsen Norman Group:什么是网页设计中的完整性错觉,如何避免?https://www.jianshu.com/p/73223d86fb7a
设计中一定不要画面铺满屏幕而没有任何指示,实际上指示不如一开始就漏出要滚动的内容。关于滚动设计,本文末尾有相关研究。
2、避免重复错觉
当你的后续的内容,毫无变化且结构一模一样时,用户会很快建立认知,你后面都是这样,没什么好看的了。所以设计师长页面时,一定要出现巧妙的一些变化,不管是结构还是内容本身。最好,在恰当的滚动悬崖处增加兴趣的内。
3、最最重要的一条,就是内容结构吸引用户,在断崖处及时放置好的内容。
如下图所示,内容下跌的非常明显。

因此现在大部分页面公式是:第一屏图(外观+价格+核心卖点)+第二屏-第三屏(主要卖点与核心外观)+后续几屏(大标题+参数+外观)。这样的结构基本能很快稳住滚动的下跌。 假发类产品往往都是看中性价比和外观为主,上面这个结构非常有效。

用户对什么内容感兴趣?

以上两点非常系统的介绍了用户行为。
一是,大部分情况下,用户是以略读进行阅读的,只会对自己有兴趣的进行停留。
其次,25%左右的用户会滚动到页面底部。但实际上,毫无意义的内容、对用户没吸力的内容,5%可能都无法达到。
那么需要更加精准的观察用户对哪些内容感兴趣。所以我们必须要还原热力图,以及观察录屏。这些都能更充分的理解和实践用户的行为。
对于假发站,以下是一些兴趣点。

  1. KSP用户会停留并阅读(价格,功能,外观);
  2. 参数会是重点停留区域,如5*5 lace size,human hair,HD Lace, pre-bleached, pre-plucked, gift pack;
  3. 长度选择, 功能选择会让大部分用户停留,并点击切换;
  4. 重点关心的外观,如头发的细节,发型,头围等;
  5. 展示产品参数部分,用户会仔细看界面;
  6. 信任和真实的内容会更好(检测报告,工厂详情,用户评价);

页面结构设计

高保真原型欣赏

设计稿展示