We encounter and process tremendous amounts of information every day. Think about all the information you’ve come across today — how much of it was actually relevant and useful to you?

Most of the information we encounter is噪音— it’s irrelevant to our current need. Conversely, the information that is relevant and useful to us (the information we’re looking for or want) is thesignal.

定义:在人机交互中,信噪比represents the ratio of relevant to irrelevant information in an interface or communication channel.

In a user interface, the “information” involved in this ratio could be anything — text content, visual elements, or animation. Essentially, anything that users have to process could count as signal or noise. To improve the efficiency of communicating information through your designs and help users complete their tasks, aim for a high signal–to–noise ratio.

Signal or Noise?

Although the definitions of signal and noise are simple, when it comes to real design, it isn’t always easy to tell the difference. Not every user will have the same goal, so exactly what counts as “signal” and “noise” will vary. One person’s signal could be noise to another. Therefore, the signal–to–noise ratio of your UI could be higher or lower depending on who’s looking at it, and what that person is trying to do.

United Airlines’ homepage has several elements that might be signal in some situations, but noise in others.

联合航空公司的主页是几个不同任务的起点。例如:

  • Booking a flight
  • Checking in for a booked flight
  • Looking up details about a booked flight

For a user who wants to book a new flight, the blueBook Travelblock will be the strongest signal — the part of the interface that’s most relevant to her. But for someone who wants to find details about a flight he’s already booked, theBook Travel块只是噪音,而且我的旅行section and theSign Inlink are signal.

Some of the elements in this interface, however, will be noise to all users, irrespective of which of the three primary tasks they are doing; these include:

  • the advertisements for the United credit card
  • 底部的装饰飞机
  • theSite Feedback沿着页面右侧链接

In an ideal world (from an HCI perspective, at least), we should remove any content or UI elements that are not relevant for any of the tasks supported on the site. Taken to the extreme, the goal of a high signal–to–noise ratio is closely related to极简主义- 一种Web设计趋势,旨在通过删除不必要的元素或内容来简化接口。然而,UI.元素可以提供简单的通信或任务效率以外的功能.

除了传达信息外,我们还希望我们的接口在视觉上吸引人,并唤起用户的某种情绪。我们希望炫耀我们的品牌,需要为业务目标提供服务(如推广某些产品)。随着这些额外的目标,我们应该aim for a reasonable signal–to–noise ratiorather than seeking to exclude in an absolutist manner all ‘irrelevant’ parts.

Note, however, that there some things that are “noise” to everyoneandfail to serve some other purpose — for example, gratuitous分散注意力的动画and annoy users, or huge images that take a lot of space without communicating much information. Keep an eye out for any elements that aren’t serving your users’ goals or your business goals, and consider eliminating those.

Increasing the Signal–to–Noise Ratio

While balancing user and business priorities is crucial, a high signal–to–noise ratio can be achieved by paying attention to your content and by using a strong visual hierarchy.

简单和优先内容

To improve the signal–to–noise ratio, start with a clear content strategy to help you prioritize the information you want to convey.

Before starting to create content for a page, or revising an existing page, think about the needs of your page visitors and about what you must communicate to them. Once you have a list of candidate topics, create a content hierarchy: prioritize the ideas and topics you came up with. One useful way to work through this prioritization is by using内容框架.

Since人们没有仔细阅读, it’s important to be sure that every piece of text on a page has some importance to at least some of your users. Avoid redundant content, as well as large文本块,这对用户扫描并快速将其信号与噪声分开的具有挑战性。考虑使用介绍页面上的文本inverted pyramid style- 首先从最重要的信息开始,并在页面上进一步添加漂亮了解详细信息。帮助用户避免F-Pattern.by offering good formatting, with bolded keywords and bullet points.

来自almanac.com的本文不适合扫描,不允许人们轻松地将重要元素(信号)与支持者分开。本节了存储唐菖蒲植被使用子弹,这很好。不幸的是,子弹不帮助用户区分部分。在每个段落中的密钥短语上使用暗文之间的更多空白和使用粗体文本将帮助用户找到其信号内容。
This article from thespruce.com is on the same topic, gladiola flowers. The formatting here emphasizes the signal much better than the Farmer’s Almanac does. Each bullet has white space around it, and the topic sentence is placed at the beginning of each paragraph and shown in bold. Note that theadvertisements, which are likely noise to all users, are kept in the right rail where users expect them to be.

视觉层次结构

For each page, think about the importance of the different elements (whether铬合金or content), and then help your users pick out the signal and skip over the noise by using a visual hierarchy that reflects the relative importance of these elements. In other words, anything that is highly relevant for most users should have a high visual weight.

There are a lot of methods for creating visual hierarchy. For example:

  • making the font large and bold
  • changing the color of a call to action
  • adding an icon
  • 增加按钮的大小

In general, important elements should be larger, bolder, or in a contrasting color relative to the elements around them. Just keep in mind: you should use these techniques sparingly. Only highlight the essential information, to make sure the page doesn’t become overwhelming.

PNC储蓄账户的此登陆页使用多种策略来传达视觉层次结构,不同颜色,大小和文本重量。橙色颜色用于最重要的元素(呼叫动作按钮,标题和副标题),它与页面其他部分中使用的灰色和灰色蓝色强烈形成对比。此方法可帮助用户快速识别对它们最重要的页面的组件。不幸的是,橙色也用于纯粹的装饰,嘈杂,而不是非常有意义的钱包图。

Dynamic Noise

设计A.user interface is different than designing printcollateral. Even though the basic principle of signal vs. noise applies to both interactive designs and static designs, there are some additional issues to consider for the online medium and other user interfaces. In particular, what counts as noise can change from moment to moment, as the user’s task changes.

考虑,例如,navigation on a website: much of the time, the navigation UI is noise, as the user is focused on the page content. However, when the user is done with the current page and wants to move to another page, the navigation suddenly becomes signal. This tension can be resolved by aconsistent design,因此在站点上的所有页面上以相同的方式显示导航。用户将快速学习忽略一贯设计的网站上的导航区域(直到他们需要它,当然 - 当时用户将快速找到导航的时间)。通过这种方式,虽然导航将保持噪音,但它是良性的噪音,不会打扰用户。相比之下,从页面到一个地方反弹的嘈杂的设计元素肯定会充当恶劣的噪音并打扰用户更多。

Conclusion

Interfaces with high signal–to–noise ratios improve communication with users and make their tasks easier. Strive to reduce the noise and make the signal stand out, while balancing organizational priorities and goals. In this way, users are likely to find the information they need easily and complete their tasks.