F-Pattern in Reading Digital ContentYouTube↗  IA↗(long shot)
Science & Technology  15.5K views 122 likes 4 dislikes   25 Aug 2017
NNgroup 252K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Contributed subtitles
Chinese (China) Pu Zhang
Click to Play Video Click to Play Video
The F-Pattern, also known as "The F-Shaped Scanning Pattern" is an approach people take
F-Pattern, 也叫做F-型浏览模式， 是指一种
to reading on the web.
人们阅读网络页面的方式。
We observed people reading this way when we do eyetracking research; during which we use
我们发现人们这样阅读当我们做人眼视线研究;
technology which enables us to see what people are fixating on, what they're looking at as
这种研究方法能让我们探究人眼阅读网页时的关注点。
they read on the Web.
In action, the F-Pattern appears to look like the letter, F. So, a person begins reading
实际上，F-型就像字母F。
on the left side of a column of text, and as they read, they move to the right.Then
人们会先读左列内容，然后向右侧读。
they move back to the left, and when they move to the right, they'll read a little bit
然后回到左侧，接下来在向右读的过程中，他们会比第一次在向右侧读的内容更少一点儿。
less.
And they move back to left and read a little bit less, and a little bit less.
以次反复，用户会向右浏览更少的内容。
It ends up appearing to be the capital letter, F... roughly.
这种模式就像大写的字母F一样。
We also see the F-pattern on mobile devices, but it's smaller.
我们在移动设备中也见到过这种F 模式， 但是比电脑效果会更小一些。
In languages where people read from right to left, like Arabic, we also see the F-pattern,
有一些从右到左阅读的语言中，比如说阿拉伯语，我们也能见到这种F 模式，
but it's reversed.
但是它是反过来的。
So why does the F-pattern happen?
但这种F 模式为什么会存在呢？
It happens because people are trying to minimize the work they need to do, and maximize the
这是因为设计者希望降低他们的工作量，并使
benefit they get from that work.
利益最大化。
For eyetracking, that means, they're trying to economize on the number of fixations that
对于视线追踪来说，设计者们希望减少用户视线固定的次数，
they do on a page, and learn the most that they can from the content that they actually
并且让用户了解他们正在注视的内容。
do look at.
Page layout also plays a major role in whether people scan in the F-pattern.
页面布局对于用户是否使用F 模式至关重要。
If we present a wall of text to users that has no formatting, and isn't written for the
如果设计者直接为用户呈现一面墙似的内容，却不考虑网络页面格式，
Web, they're going to find their own path through that text.
用户需要自己寻找内容中的模式。
We can do things to make it much easier for people to scan text.
但是设计者们可以让用户浏览更为便捷。
For example, use chunking of text, use bullets, and more important than anything, use headings
例如，使用块状似的文本，专案符号（小黑点）。最为重要的一点，在文本中使用标题
and sub-headings within the text.
和副标题。
And make those headings look different from normal text: larger, a different color, bolder,
对于标题来说，设计者们可以让其与其他文本不同：大号字体，不同颜色，粗体，
a different typeface, any of these things can work.
或不同字体，这些都行得通。
And with that, users are able to scan to the headings and decide if those words are things
这样一来，用户们就能更先浏览标题并决定
that they're interested in.
以下的内容是否是他们感兴趣的。
And if they are, they'll read the normal text below it.
如果他们的确对这个专题感兴趣，那么他们就会阅读接下来的文本。
And if not, they'll read to the next heading, and that's a different pattern that we see
如果他们对此不感兴趣，他们会浏览下一个标题。这就是我们在用户网页使用
people revealing when they read on the Web.
经验中发现的另外一种阅读模式。
I like to call that one, the "Layer-Cake pattern."
我喜欢称之为，多层夹心蛋糕模式。
I was hungry when I named that one.
当我命名它的时候，我其实挺饿的。
It resembles a layer cake with the frosting and the cake.
这种模式就像一个有着糖霜和海绵面糕似的夹心蛋糕。
So layer cake is a good pattern.
这也是一种极好的模式。
F-pattern is one that can and should be avoided.
F 模式是一种设计者能够并应该避免的模式。
Similar videos:

Using Content Frames in the Design Process
NNgroup
4.5K views 68 likes 0 dislikes 22 Jun 201832% match

UX Animations
NNgroup
2K views 123 likes 1 dislikes 08 Jan 202131% match

4 Trustworthiness Factors
NNgroup
2.1K views 65 likes 5 dislikes 30 Oct 202031% match

The Biggest Mistake in Writing for the Web
NNgroup
7.2K views 181 likes 1 dislikes 24 Apr 202028% match

Better Forms Through Visual Organization
NNgroup
4.4K views 122 likes 0 dislikes 17 Jul 202027% match

Design for the Elderly
NNgroup
14.4K views 776 likes 1 dislikes 22 Jan 202127% match

Content Creation in Agile Development Processes
NNgroup
1.6K views 70 likes 0 dislikes 12 Feb 202126% match

UX vs. Service Design
NNgroup
19K views 386 likes 9 dislikes 21 Jun 201926% match

Transitioning from UI to UX
NNgroup
5.3K views 105 likes 1 dislikes 29 Nov 201925% match

How to Test Visual Design
NNgroup
18.5K views 226 likes 1 dislikes 09 Nov 201825% match

The Halo Effect in UX Design
NNgroup
5.7K views 102 likes 0 dislikes 22 Nov 201925% match

Why Service Design
NNgroup
5.4K views 71 likes 1 dislikes 18 Oct 201925% match

Design Ruts and Functional Fixedness
NNgroup
1.2K views 64 likes 0 dislikes 20 Nov 202024% match

Why Didn't People Scroll? The Illusion of Completeness
NNgroup
4K views 73 likes 3 dislikes 06 Dec 201924% match

Usability in the Physical World vs. on the Web
NNgroup
4.6K views 94 likes 0 dislikes 21 Sep 201824% match

DesignOps 101
NNgroup
5.2K views 104 likes 5 dislikes 26 Jul 201924% match

User Interface Design Fails
NNgroup
7.5K views 160 likes 1 dislikes 09 Oct 202024% match

10 Best Intranets of 2020
NNgroup
5.1K views 32 likes 0 dislikes 03 Apr 202024% match

Why Chunking Content is Important
NNgroup
14.1K views 183 likes 1 dislikes 12 Oct 201824% match

10 Best Intranets of 2019
NNgroup
12.1K views 66 likes 3 dislikes 08 Feb 201923% match

Calculating ROI for Design Projects
NNgroup
4.5K views 159 likes 1 dislikes 26 Feb 202123% match

Why You Should Use a Grid for Designing Layouts
NNgroup
10.6K views 229 likes 5 dislikes 31 May 201923% match

Design Systems and Their Benefits
NNgroup
6.7K views 107 likes 0 dislikes 31 Aug 201822% match

Design Principles 101
NNgroup
10.1K views 233 likes 2 dislikes 22 May 202022% match

Checkboxes vs. Switches in Forms
NNgroup
6.2K views 62 likes 3 dislikes 20 Jul 201822% match

The Visual Principle of Scale in User Interface Design
NNgroup
1.3K views 40 likes 1 dislikes 06 Nov 202022% match

Usability Heuristic 5: Error Prevention
NNgroup
19.9K views 136 likes 2 dislikes 13 Sep 201922% match

Animations are Distracting!
NNgroup
7.7K views 105 likes 6 dislikes 30 Nov 201822% match

Design Thinking & Agile
NNgroup
9.8K views 114 likes 6 dislikes 27 Sep 201922% match

Don't Listen to the Customers
NNgroup
8.6K views 248 likes 5 dislikes 17 Jan 202022% match


Settings Privacy About Contact Donate