极简主义设计等同于可用设计的神话是有据可查的。在设计者试图创造出减少复杂性的界面时,他们经常基于简单的想法而不是内容的细微差别和受众的需求来过度简化内容和互动。
审美上的简单被当作好设计的事实上的标准,即使是密集的、信息丰富的界面--尽管它们表面上很复杂--在许多情况下可以更清晰、更可用。
在这篇文章中,我们将介绍什么是信息密度,以及设计师和开发者在设计和构建网络和移动应用时应该如何考虑它。
什么是信息密度?
信息密度指的是界面中信息内容的数量--用Edward Tufte的话来说就是 "数据墨水",它是由信息与可用空间的比例来衡量的。最终,网络和移动应用程序应该为一个特定的界面找到合适的信息密度,以平衡上下文和设计,而不是只追求表面的简洁。
在数字屏幕上,这可以包括静态或交互式的内容:文本、微缩文本、标签、链接、按钮、控制、图表--任何有指导意义的或可用的东西,而不是纯粹的美学。数据丰富、高密度的显示器有大量的内容,而数据稀薄、低密度的显示器则相对空闲。
低密度、中密度和高密度界面的例子。谷歌的搜索页面,谷歌的搜索结果页面,以及纽约时报的登陆页面。
对于正确的信息密度水平,并没有一个通用的规则。一个界面的成功在很大程度上取决于设计者在多大程度上为特定的环境、内容、受众和屏幕尺寸找到了合适的密度,而最后一个因素使这项工作变得复杂。
例如,一个在桌面上达到理想水平密度的布局,在移动屏幕上可能会变得过于密集,而一个移动布局在桌面上可能会感觉过于简单。可用性和理解力的问题可能出现在这两端。
设计师的任务不是任意地简化看似 "繁忙 "的设计,而是艺术地管理复杂性。这里有一些原则和提示,可以帮助产品团队在处理丰富的、响应式的界面时找到理想的信息密度。
管理应用设计的信息密度
1.通过增加细节来创造背景
界面设计的重点是创造上下文以帮助人们理解手头的任务和内容。虽然像Dieter Rams("我的意图是省略每一个不需要的元素")和John Maeda("实现简单的最简单的方法是通过周到的减少。当有疑问时,就去掉")使设计师有条件去掉多余的设计元素,但对减法的强调可能是以牺牲有效的情境创造为代价的,这需要增加细节。
Rams和Maeda分别告诫我们要 "使产品可以被理解 "和 "要小心你从设计中删除的东西",这一点没有被强调。
在设计低保真度的界面时,我发现逐步加入高保真度的内容是很有帮助的,例如,包括微缩文本、上下文帮助文本、有代表性的正文文本和关键数据等等。
从一开始就考虑有代表性的内容,这就要求设计者在通过交互的核心元素工作时,对视觉层次做出决定。
考虑一下用户可能会对这个界面提出什么问题。我可以加入什么相关的信息来帮助他们回答这些问题而不离开他们的环境?我怎样才能调整交互方式,使其对初次使用的用户更容易理解,对重复使用的用户更有效率?
一个关于高保真内容如何用于低保真设计工作的例子。
就像在绘本图画中填入轮廓一样,我把线框当作最终设计的概念边界;当我在更高保真度的工作中,随着我花更多的时间在设计上,并把它放在可用性测试中,我就会引入美学上的改进并加入细节。
2.在不同的屏幕尺寸上保持一致的密度
移动优先的设计运动在某种程度上是对处理不当的信息密度的回应--完整的桌面网站被塞进移动视口的宽度,导致了难以阅读的小内容以及尴尬的平移和缩放。
然而,随着设计师们学会了为小屏幕优先考虑基本元素,并在流畅的网格系统中工作,为移动浏览优化的布局有可能在桌面和显示器的宽度上变得空洞。
一个在移动视口宽度上达到比桌面宽度更好密度的界面例子。
除了为响应式内容行为创建模式(例如定义堆叠规则),考虑如何在不同的屏幕尺寸范围内保持类似的信息密度水平也是很有帮助的--因此,在网页开发中创建了响应式设计。
移动界面不一定是稀疏的才是可用的或有吸引力的。这方面的一个很好的例子可以从我的同事Kevin关于响应式屏幕高度的文章中看到。他认为,标准的内容堆叠惯例导致在较小的设备上出现不必要的长页面。他的探索表明,即使在营销页面上也可以提高密度,从而达到良好的效果。
在移动宽度上提高营销页面的密度的探索。
有些界面过于复杂,无法有效地缩小,需要对布局、导航结构和交互方式进行重大调整。
这也是为什么像Airtable这样信息丰富、互动性强的产品会创建一个完全独立的移动应用来显示用户在桌面上可以访问的相同数据的原因之一。
在下面的截图中,浏览器视口(1280px × 694px)比移动视口(375px × 667px)大3.5倍,显示63个表格单元,而移动视口只有12个单元。
如果移动视口能够多显示6个单元格,那么它将或多或少地与桌面视图的比例密度相匹配。综上所述,Airtable很好地处理了每个视口的密度。
一个例子说明了Airtable如何在移动和桌面视口的宽度上保持密度。
3.使用最小文本和触摸目标尺寸作为界限
尽管内容--而不是审美--的考虑应该促使设计师在更高的密度水平上工作,但可及性标准可以作为防止界面变得过于密集的指南。
尽管网页的最小字体大小还没有被定义(可读性取决于字母、对比度和用户的视力),但人们普遍认为12px左右是界面文本的一个好的最小尺寸。
另一个有用的参考是移动触摸的目标尺寸,谷歌的Material Design规范将其定义为至少48px的方形。(需要注意的是,链接元素的视觉表现可以小于48px正方形,但有效的可点击区域应该至少是这个大小)。
Material Design的密度指南给出了在引入更高的密度时保持可访问性的有用例子。
Material Design对移动触摸目标的建议。
4.进行理解性设计测试
增加密度的目的是为了帮助人们理解内容并与之互动,而验证这一点的最好方法是通过可用性和理解力测试--特别是在移动设备上。
除了标准的任务可用性措施,产品团队在测试密集的界面时可能会留意一些事情。
- 用户在信息的摘要和细节视图之间的移动有多容易?当他们从一个层次移到另一个层次时,他们是否能保持一种上下文的感觉?尝试用不同的方法来表示抽象的层次(比如Jeff Dance的"垂直 "和 "分层 "概念),以找到最有效的方法来吸引用户探索和理解。
- 用户是否在他们期望的地方滚动?Mike Bostock列出了一些关于滚动互动、数据密集的图形和视觉叙事的规则,指出只要访问者意识到视口外的额外内容,滚动(而不是点击或标签)就是一种毫不费力的行为(而且只要滚动交互的行为符合用户的期望)。
- 显示的信息是否有助于用户的认知努力?在较小的屏幕尺寸上显示复杂信息的一个挑战是用户在浏览内容时对记忆的负担。正如Raluca Badiu所说:"人与设备交流渠道的容量自然受限于用户的工作记忆。如果网站或应用程序要求用户学习太多的新信息......往往用户会达到一个僵局,他的工作记忆将不再有这些信息,他需要去寻找这些信息"。较小的设备屏幕本质上提供了一个较窄的内容视图,要求用户将连续观看的信息拼凑起来,否则他们可能会在桌面上的单一视图中看到。哪些类型的上下文帮助或响应性的布局变化可能有助于在较窄的屏幕上形成这种感觉?
- 用户在使用界面之前和之后是如何看待其密度的?对密度的感知是主观的,因文化、技术水平、认知能力和年龄而异。询问人们在第一眼看到界面时和执行了一些任务后对界面密度的印象,可以消除对产品过于复杂的担忧。如果人们一开始和在熟悉之后都认为应用程序很复杂,那么可能需要进行额外的修改。
结论
对高密度界面的厌恶在很大程度上是对设计不良的高密度界面的厌恶。Jesse James Garrett在他的经典著作*《用户体验元素*》中指出:"当人们评论一个设计是'繁忙'或'杂乱'的时候,他们真正的反应是这个设计没有引导他们顺利地浏览页面"。设计师没有建立清晰的信息和视觉层次。
问题不在于内容本身,而在于它的显示方式。通过将复杂性作为一个设计问题,而不是内容问题来重新规划,更多的信息被深思熟虑地展示出来,使得交互变得更加明智,更加清晰。
广大受众每天都在使用的信息密集型界面的例子。
当设计师认识到像Airtable、Spotify和Google Maps这样的日常信息密集型应用的可用性时,他们应该寻求最佳的密度水平,而不是最小的水平,寻求经过深思熟虑的复杂内容的展示所带来的优雅感。
The postBalancing information density in web developmentappeared first onLogRocket Blog.