菜单 关闭

利用可用的屏幕空间

通过 雅各布·尼尔森5月9日,二千零一十一

总结:网站和移动应用程序常常把选项塞进屏幕的太小部分,使项目更难理解。


电脑屏幕珍贵像素是世界上最有价值的房地产.Amazon添加到购物车按钮为160×27像素,或0.003平方英尺(0.0003米)在典型的100 dpi监视器分辨率下。你可以挤满80万人扣在普通美国家庭的地板上,目前售价16万美元。即使是一个按钮通常会带来更多——更不用说80万个按钮的收入了。

通常情况下,当某物非常珍贵时,你试着保存它。但是屏幕空间不应该被囤积,应该花掉它.我看到过太多的设计,它们把非常manbetx官方网站手机版有价值的内容或动作项目塞进很小的空间,同时浪费了大量的屏幕空间。

8年前,我分析了50个网站主页的空间分配并且发现只有40%的屏幕空间用于导航或用户感兴趣的内容。这是在800×600显示器的时代,当时空间特别宝贵。今天,很多网站都有点好,更大的显示器显然可以让更多的空间播放。

仍然,网站经常在小弹出窗口中打开重要功能,违反两条准则:

  • 不要用弹出窗口污染用户的屏幕。
  • 在一个足够大的空间中显示内容,让用户无需滚动即可看到所需的所有内容。例如,遵循以下指南:电子商务产品页面当用户单击放大图片按钮。

浪费的移动空间

即使在一个大的桌面显示器上,空间很昂贵,应该加以利用。移动屏幕太小,浪费空间是罪过。

让我们看看我们最近运行的一个iPad研究的屏幕。这是一项新的研究,但这种风格让人想起主导早期iPamanbetx官方网站手机版d应用程序的古怪设计

ABC新闻iPad应用程序:初始主屏幕
ABC新闻iPad应用程序:主屏幕。

当前新闻的用户界面是一个巨大的领域;你可以用手势来旋转它。这是一个简洁的图形,最初的交互很吸引人:首先,用户发现它“有点酷”、“非常酷”、“花哨”、“引人注目”和“有趣”。

尽管最初的反应是积极的,用户不喜欢屏幕他们一发现就转向另一个视图。ABC应用程序的普通用户告诉我们,在使用该应用程序时,他们更喜欢将外观更标准的新闻列表作为主屏幕。

ABC新闻iPad应用程序:可选主屏幕
ABC新闻iPad应用程序:提供更多新闻的备用主屏幕。
这是人们实际使用的。

为什么用户喜欢普通,轻微钻孔设计manbetx官方网站手机版每天,实际使用?因为它一目了然地显示更多新闻.球体只提供了一个单一的故事的清晰视图。其他的故事有扭曲的图像和标题,很难阅读。太浪费屏幕空间了。

较高的信息密度=不需要四处走动,更容易看到自己想要的东西。爱德华塔夫特在他的杰作中呼吁用更多的“数据墨水”绘制图表定量信息的可视化显示与这个想法有关,虽然略有不同:打印的图表不同于交互式用户界面。在UI中,你不能把屏幕塞满很多信息或用户会感到不知所措。

最近研究的第二个例子来自NASA:

美国宇航局iPad应用
NASA iPad应用程序:主屏幕和下拉菜单展开。

美国宇航局iPad应用程序的主屏幕是对太阳系的可视化。这不是对空间的高效利用,但事实上没关系,因为这是一幅引人入胜的图像,从打开的屏幕上提供了多种选择,同时清楚地传达应用程序的全部内容。

在用户测试中,这个屏幕的主要问题是有可能接触到错误的天体:地球和月球之间的距离仅是我们在触摸屏应用中分离物体可用性指南的60%。(参见完整报告移动可用性指南

另一个与空间利用相关的可用性问题(屏幕空间,不是外层空间)。以卫星任务为特色的下拉菜单很难使用,原因有两个。第一,按钮的图标看起来更像鱼骨架而不是卫星,但这是一个相对次要的问题。

更大的问题是身体上很难移动通过一长串的任务-这样做似乎需要无限滚动。也,每颗卫星难以识别从它的图片和缩写。大多数卫星看起来都是一样的,除非你是一个比美国宇航局有权期待它的用户更多的太空书呆子。

设计师试manbetx官方网站手机版图模仿超级菜单,但由于以下几个原因未能实现其效益:

  • 没有分类菜单项-一个好的超级菜单将把任务分成小组,给每个小组一个标题。这样做可以更容易地找到某些类型的卫星,比如那些内部行星的探索。
  • 标签没有解释-例如,知道“ace”测量高能粒子可能会有所帮助,manbetx官网手机登陆而“目的”研究的是中层冰。
  • 插图毫无意义.很绒毛,但还是很松散。

而不是滚动菜单,最好把用户带到单独全屏概述从一个角度展示了所有的任务,使它们更容易比较。花更多的屏幕空间是可以的,只要你给用户一个返回主视图的简单方法。

小的扩散,iPad应用程序中难以使用的交互区域部分是苹果公司的错,因为默认电子邮件应用程序的设计错误。manbetx官方网站手机版收件箱在下面显示为一个瘦菜单。这在景观上很好,允许用户在收件箱和单个邮件之间快速切换,以便快速处理邮件。

在纵向上,然而,“收件箱”菜单显示为一个覆盖,部分掩盖了邮件内容,使两个窗格无法同时工作。为什么要显示两个窗格,当你不能同时使用两者时?最好在整个平板电脑屏幕上显示收件箱,显示更多消息和/或每个消息的更广泛预览。

越大越好

移动设备和平板电脑本身就很小,因此,您必须优化它们的屏幕空间的使用,并尽可能大地显示内容。桌面屏幕更大,因此,您通常可以通过进一步扩展内容来获得更好的用户体验。

很少有例外的规则,即在用户界面中越大越好。在坚持打开新窗口并将其最大化的站点上,甚至在最大的监视器上都可以找到一个例子。一旦人们有了30英寸的显示器,他们不再需要最大化的浏览器窗口;发现这很烦人,说,一个词汇表条目,占用2560×1600像素,并模糊了您正在使用的其他窗口。

主要是虽然,让我们不要把信息塞进小窥视孔里.优化可用屏幕空间的用户界面是提高可用性(从而提高转换率)的关键策略。