解释需要避免水平滚动

我需要帮助解释我的老板为什么她的客户的网站上她的设计很差。她对网络毫无所知，作为一名网络开发人员与一名平面设计师（甚至不是网页设计师）的女性一起工作可能会很困难。在她设计的当前网站上，根据她的说法，图片栏“需要”大约为1200px，但对内容没有必要。速写来说明这是怎么回事：解释需要避免水平滚动

正如你看到的，旗帜流溢过去内容的960像素和宽1200像素。当所有内容在960像素宽的视口内可见时，这将创建一个水平滚动。我需要将其设置为img>而不是CSS背景，因为它是一个从图像到图像渐变的jQuery幻灯片。

我认为这是一个很大的问题，因为很多人在浏览器中会看到所有相关内容时会在其浏览器中添加水平滚动条。她认为没有人会注意到，它会没事的。我认为这对最终用户来说是非常糟糕的做法和混乱。

我该如何向她解释问题？

来源

2010-03-23 Brad Herman

这并不回答这个问题，但可能值得使用“最大宽度”而不是宽度。如果你幸运的话，那么你可以取悦你的老板和世界其他地区。更改背景图像可以通过JQuery完成，所以你的效果应该是可能的。:) – Amadiere 2010-03-23 16:54:03

我知道你可以改变背景图片，但从背景图片到背景图片的淡入淡出是不可能的。 – 2010-03-23 17:00:45

您可以在jQuery中使用.fadeIn（）/ .fadeOut（）/ .fadeTo（）。我会说褪色到像白色，然后到下一个图像，然后到白色，然后到下一个图像等纯色。 – 2010-03-23 17:03:30

问她是否想打开小册子，只看到其中一个褶皱是不必要的，因为它只是有一些标题图像溢出到它（但没有内容）。

XXXXXXX|XXXXXXX 
XIMAGEX|XIMAGEX 
XXXXXXX|XXXXXXX 
     | 
Some | (but 
content| this 
here | is 
     | blank)

来源

2010-03-23 16:55:40

+1 - 不错的想法... – DVK 2010-03-23 17:26:06

@DVK谢谢！ :) – 2010-03-25 14:19:12

两点我会做：

NO各大网站使用水平滚动。不是一个。这意味着，无论她认为“好”的设计如何，100％的用户都会感到困惑，并且很可能永远不会看到屏幕右侧的内容。
水平滚动是折叠或“中心折叠”样式页的打印等效物。你会把这个杂志的每一页都做成这样吗？

来源

2010-03-23 16:55:59

最大的问题不一定是他们需要滚动才能看到内容，它甚至不是内容。横幅只是在子菜单的右侧有一张脸，所以完全没有必要滚动浏览某个人的正确部分，以至于他们并不关心。 – 2010-03-23 17:01:05

在这种情况下，请指出她通过在底部强制使用不必要的水平滚动条来浪费垂直空间。 – 2010-03-23 17:04:27

试过了......她不认为这是一个问题，我只是一名肛门工程师（这是同一个女人，当我告诉她制作所有的文字图像，所以字体可以是Futura绝对荒谬）。 – 2010-03-23 17:13:48

将她指向尼尔森 - 这是最着名和顶级的网络可用性专家。

“水平滚动条”是错误＃3“Top Ten Web-Design Mistakes of 2002”文章

而且，指出（不知道尼尔森一样）是绝大多数的小鼠没有水平滚轮（这是一个在讨论尼尔森文章的文章的评论中提出的观点）。

另外，做通常的UI事情 - 测试！

挑选5个理想匹配所需用户配置文件的随机人员。要求他们用模拟了，没有任何警报，并观察哪一个比较省事/快（和要求，也obseve不问）

来源

2010-03-23 16:59:54 DVK

请勿使用水平滚轮？或者是否有VERTICAL滚轮？ – 2010-03-23 17:10:33

Oupsie :)固定 – DVK 2010-03-23 17:15:06

2002？虽然我喜欢这类研究，但2002年在互联网上是古老的。他们肯定有更新的版本？ – 2010-03-23 17:21:36

尝试这两点说服她：

显示她关于最常用的浏览器分辨率的一些数据（仍在20％的网民有1024×768屏幕分辨率）
具有网站的某些部分不可见时加载的页面是不是“用户友好”（用户会错过一些重要信息）

来源

2010-03-23 17:00:28

杀死我的部分是没有信息被切断......所有的实际内容仍然可见，并且在960像素的限制内，这只是一个愚蠢的图像，溢出了页面。 – 2010-03-23 17:04:56

我有一个1600px宽的宽屏显示器，但浏览器内容窗口通常在800x600左右。（我可以，而且经常这样做，可以在这个分辨率下安装四个窗口---文本编辑器，浏览器，聊天，终端，阅读器，电子邮件，文件夹......），但是你不能屏幕分辨率与页面分辨率相同。 – 2010-03-23 17:48:35

@rogerpate 我同意你的100％。她对2件事情“积极”。我们的大多数用户将拥有像我们这样的宽屏显示器（尽管我显示了她的相反证据）。其次，没有普通用户会注意到水平滚动条，所以它滚动显示没有内容的事实不是一个问题......我显然正在失去这场战斗 - 如果你与一个傻瓜进行争吵，你已经失去了。 – 2010-03-23 17:59:29

人们从左到右，从上到下（或从一些国家的从右到左）阅读。因此，他们可以在需要开始滚动之前阅读更多内容，因为他们只需要垂直滚动。

如果您引入水平滚动，那么用户必须在每行的末尾滚动，而不是在每个页面的末尾滚动。

来源

2010-03-23 17:00:41 Sean

几乎每个人现在都有一个滚轮鼠标，但只有极少数人有侧滚动的滚轮鼠标。甚至更少的人甚至知道车轮可以侧滚！

让她咀嚼。

来源

2010-03-23 17:02:14 Pyrolistical

我不认为鼠标滚轮非常咀嚼，虽然我的孩子在年轻时不同意 – DVK 2010-03-23 19:44:04

你应该给她的例子，并告诉她她正在尝试做什么。你真的想水平滚动来获取页面另一面的信息吗？

http://www.badwebsiteideas.com/horizontal.htm

来源

2010-03-23 17:05:33 Sean

看起来像一个很好的答案，但链接已关闭... :( – 2013-03-18 20:36:12

可以在整个旗帜，在它所有的部件图像被缩小到窄？（无可否认它也会更短，可能更难以阅读等）。那么如果右边的脸真的很重要，那么它仍然是可见的......水平滚动真的非常糟糕。但我想你（和其他人）已经知道:)

来源

2010-03-23 17:08:15 odavy

我可以缩小它，但我们需要脸被推得足够远以至于漂浮在那里的子菜单超过纯白色并且不被脸部遮住 – 2010-03-23 17:10:03

主要内容区域能够缩小以容纳它吗？但是现在你又在谈论缩小比例整个网页，你在潮流中游泳，我感到你的痛苦:) – odavy 2010-03-23 17:14:49

嗯。这听起来像你们需要一位需求分析师来在这里中间。我认为，确定一个符合巴斯夫规范的解决方案是符合公平的。假设大多数应用程序的“大多数”用户将拥有宽屏幕是不够的。似乎她很难解释为什么她不能重新设计她的横幅以便更小&符合所需的尺寸。

我认为用户将完全注意到水平滚动条，并被它所恼怒。因为这不是大多数用户习惯看到的东西（不能想到有任何主要网站），他们会（实际上）学习新的东西来使用您的网站，这是不好的。他们应该能够看到一个网站，并能够立即使用它，而不是花几秒钟的时间来确定滚动条不会显示任何新内容，只是头上的附加图形 - 这几秒钟你失去了什么人。

我还想知道，如果在水平滚动条上有任何部分508的指导。这对你们并不重要，但我正在开发政府网站，所以508对我们来说每天都是一件大事。如果您的用户只使用键盘或屏幕阅读器，则该滚动条不仅仅是烦人的。

来源

2010-03-23 18:22:44 elduff

解释需要避免水平滚动

回答

相关问题